Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Layout almost finalized now.

Saving complete POST and PUT requests with proper "params" and "raw" handling.
  • Loading branch information...
commit 97e6484c821e39f605b5c4afc8553a4e9e2468a1 1 parent 17f5ab7
Abhinav authored
2  NOTICE
View
@@ -1,2 +1,2 @@
-POSTMan
+POSTMan
Copyright 2011 Abhinav Asthana
43 simple-rest-client/improved_style.css
View
@@ -1,11 +1,8 @@
html, body {
- background: #eaeaea;
- height: 100%;
margin-top: 0;
margin-left: 0;
- width: 100%;
- height: 100%;
font-family: Helvetica, Arial, sans-serif;
+ min-height: 800px;
}
header {
@@ -17,7 +14,7 @@ header {
border-bottom-style: solid;
border-bottom-color: #116284;
border-bottom-width: 5px;
- height: 70px;
+ height: 50px;
width: 100%;
}
@@ -171,7 +168,8 @@ fieldset {
}
#logo {
- padding: 20px;
+ padding: 12px;
+ padding-left: 15px;
float: left
}
@@ -361,8 +359,8 @@ fieldset {
#credits {
float: right;
- margin-right: 20px;
- margin-top: 35px;
+ margin-right: 10px;
+ margin-top: 18px;
color: #fff;
font-weight: bold;
font-size: 10px;
@@ -411,8 +409,8 @@ li .right {
#main {
background: #fff;
- margin-left: 350px;
- height: 100%;
+ float: left;
+ padding-bottom: 20px;
}
#main-scroller {
@@ -423,13 +421,12 @@ li .right {
width: 340px;
padding-left: 10px;
background: #eaeaea;
+ overflow-y: scroll;
+ height: 100%;
}
#container {
- padding-right: 0px;
- padding-left: 0px;
- background: #eaeaea;
- height: 100%;
+ height: 100%
}
#request,
@@ -507,14 +504,18 @@ li .right {
-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
}
-.headersContainer {
- width: 580px;
+.sendRequestButtonContainer {
+ margin-top: 25px;
}
-.editHeaderButton {
- margin-left: -5px;
- margin-bottom: 5px;
+
+#headers-ParamsEditor {
+ margin-top: 15px;
}
-.sendRequestButtonContainer {
- margin-top: 25px;
+#requestUrl {
+ margin-bottom: 10px;
+}
+
+#pheaders {
+ margin-bottom: 10px;
}
80 simple-rest-client/index.html
View
@@ -42,7 +42,7 @@
<body>
<header>
<div id="logo" class="clearfix">
- <img src="images/postman.jpg" alt="POSTMAN"/>
+ <img src="images/postman.jpg" alt="POSTMAN" height="18px"/>
<span class="smallheadertext"> A better HTTP client to test web services</span>
</div>
<div id="credits">
@@ -51,9 +51,9 @@
<a href="http://twitter.com/sobtiankit" target="_blank">@sobtiankit</a>
</div>
</header>
-<div id="container" class="container-fluid">
- <div id="history" class="sidebar clearfix">
- <div id="historyContainer">
+<div id="container" class="clearfix">
+ <div id="history" class="clearfix">
+ <div id="historyContainer" class="clearfix">
<ul class="pills" data-tabs="tabs">
<li class="active"><a href="javascript:void(0);">History</a></li>
<li><a href="javascript:void(0);">Collections</a></li>
@@ -62,21 +62,18 @@
</ul>
</div>
</div>
- <div id="main" class="clearfix content">
- <div id="main-scroller">
+ <div id="main" class="content">
<section id="request">
<h2><img src="images/request.jpg" alt="REQUEST" height="15px"/></h2>
- <div id="requestUrl">
- <div class="row" style="height: 50px;">
- <div class="span10">
- <input type="text" name="url" id="url" tabindex="1" class="inputText" placeholder="URL">
- </div>
- <div class="span2">
- <span class="buttonLayout">
- <a href="javascript:void(0);" class="btn small"
- onclick="showParamsEditor('url')">Edit params</a></span>
- </div>
+ <div id="requestUrl" class="row clearfix">
+ <div class="span10">
+ <input type="text" name="url" id="url" tabindex="1" class="inputText" placeholder="URL">
+ </div>
+ <div class="span2">
+ <span class="buttonLayout">
+ <a href="javascript:void(0);" class="btn small"
+ onclick="showParamsEditor('url')">Edit params</a></span>
</div>
</div>
@@ -93,60 +90,60 @@
</div>
<div id="methods" class="clearfix">
- <ul class="pills small" style="margin-bottom: 10px;">
- <li class="active"><a id="method-get" href="javascript:void(0);" data-method="get"
+ <ul class="method-selectors pills small" style="margin-bottom: 10px;">
+ <li class="method-selector-get active"><a id="method-get" href="javascript:void(0);" data-method="get"
onclick="showRequestMethodUi('GET');">GET</a></li>
- <li><a id="method-post" href="javascript:void(0);" data-method="post"
+ <li class="method-selector-post"><a id="method-post" href="javascript:void(0);" data-method="post"
onclick="showRequestMethodUi('POST');">POST</a></li>
- <li><a id="method-put" href="javascript:void(0);" data-method="put"
+ <li class="method-selector-put"><a id="method-put" href="javascript:void(0);" data-method="put"
onclick="showRequestMethodUi('PUT');">PUT</a></li>
- <li><a id="method-delete" href="javascript:void(0);" data-method="delete"
+ <li class="method-selector-delete"><a id="method-delete" href="javascript:void(0);" data-method="delete"
onclick="showRequestMethodUi('DELETE');">DELETE</a></li>
- <li><a id="method-head" href="javascript:void(0);" data-method="head"
+ <li class="method-selector-head"><a id="method-head" href="javascript:void(0);" data-method="head"
onclick="showRequestMethodUi('HEAD');">HEAD</a></li>
- <li><a id="method-options" href="javascript:void(0);" data-method="options"
+ <li class="method-selector-options"><a id="method-options" href="javascript:void(0);" data-method="options"
onclick="showRequestMethodUi('OPTIONS');">OPTIONS</a></li>
</ul>
</div>
- <div id="pheaders">
- <div class="headersContainer">
+ <div id="pheaders" class="row clearfix">
+ <div class="span10 headersContainer">
<textarea name="headers" id="headers" tabindex="3" class="inputText"
placeholder="Headers"></textarea>
</div>
- <div class="editHeaderButton">
- <a href="javascript:void(0);" class="btn small" onclick="showParamsEditor('headers')"
- style="margin-left:5px">Edit headers</a>
+ <div class="span2 editHeaderButton">
+ <a href="javascript:void(0);" class="btn small" onclick="showParamsEditor('headers')">Edit headers</a>
</div>
-
</div>
- <div id="headers-ParamsEditor" class="paramsEditor">
- <div id="headers-ParamsFields" class="editorFields"></div>
- <div id="headers-ParamsEditorActions" class="actions">
- <input type="button" id="cancelHeaderParamsButton" name="closeBodyParams" value="Save and close"
- class="btn primary medium"
- onclick="closeParamsEditor('headers')"/>
+ <div class="row">
+ <div id="headers-ParamsEditor" class="span10 paramsEditor">
+ <div id="headers-ParamsFields" class="editorFields"></div>
+ <div id="headers-ParamsEditorActions" class="actions">
+ <input type="button" id="cancelHeaderParamsButton" name="closeBodyParams"
+ value="Save and close"
+ class="btn primary medium"
+ onclick="closeParamsEditor('headers')"/>
+ </div>
</div>
</div>
<div id="data">
<ul class="pills small" style="margin-bottom: 0px; height: 38px;">
- <li class="active">
+ <li id="selector-container-params" class="active">
<a href="javascript:void(0);" onclick="showBodyParamsEditor()" id="data-params">Params</a>
</li>
- <li>
+ <li id="selector-container-raw">
<a href="javascript:void(0);" onclick="showRawEditor()" id="data-raw">Raw body</a>
</li>
</ul>
<div id="bodyDataContainer">
<textarea name="data" id="body" tabindex="4" class="inputText"></textarea>
</div>
- </div>
-
- <div id="body-ParamsEditor" class="paramsEditor">
- <div id="body-ParamsFields" class="editorFields"></div>
+ <div id="body-ParamsEditor" class="paramsEditor">
+ <div id="body-ParamsFields" class="editorFields"></div>
+ </div>
</div>
<div class="sendRequestButtonContainer">
@@ -199,7 +196,6 @@
</div>
</fieldset>
</section>
- </div>
</div>
</div>
</body>
52 simple-rest-client/requester.js
View
@@ -88,6 +88,16 @@ var indexedDB = window.indexedDB || // Use the standard DB API
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;
+function Request() {
+ this.id = "";
+ this.url = "";
+ this.method = "";
+ this.headers = "";
+ this.data = "";
+ this.dataMode = "params";
+ this.timestamp = 0;
+}
+
function clearFields() {
$("#response").css("display", "");
$("#loader").css("display", "");
@@ -198,6 +208,8 @@ function sendRequest() {
}
}
});
+
+ data = $('#body').val();
}
//Check if a file is being sent
@@ -208,7 +220,7 @@ function sendRequest() {
requestStartTime = new Date().getTime();
- saveRequest(url, method, $("#headers").val(), data);
+ saveRequest(url, method, $("#headers").val(), data, dataMode);
$('#submitRequest').button("loading");
}
@@ -366,7 +378,7 @@ function setupDB() {
request.onfailure = postman.indexedDB.onerror;
};
- postman.indexedDB.addRequest = function(id, url, method, headers, data) {
+ postman.indexedDB.addRequest = function(id, url, method, headers, data, dataMode) {
console.log("Saving request to indexed DB");
var db = postman.indexedDB.db;
@@ -379,6 +391,7 @@ function setupDB() {
"method": method.toString(),
"headers": headers.toString(),
"data": data.toString(),
+ "dataMode": dataMode.toString(),
"timestamp": new Date().getTime()
});
@@ -467,9 +480,9 @@ function initDB() {
}
//History management functions
-function saveRequest(url, method, headers, data) {
+function saveRequest(url, method, headers, data, dataMode) {
var id = guid();
- postman.indexedDB.addRequest(id, url, method, headers, data);
+ postman.indexedDB.addRequest(id, url, method, headers, data, dataMode);
}
function renderRequestToSidebar(url, method, id, position) {
@@ -518,15 +531,25 @@ function loadRequestInEditor(request) {
$('#urlParamsEditor').css("display", "none");
$('#response').css("display", "none");
- closeParamsEditor("body");
- $('#body').val("")
-
if (method === 'post' || method === 'put') {
- $('#data').val(request.data);
+ var dataMode = request.dataMode.toLowerCase();
+
$('#data').css("display", "block");
- showBodyParamsEditor();
+ $('#body').val(request.data);
+ $('#body').css("display", "block");
+
+ $('#data .pills li').removeClass("active");
+ if(dataMode == 'params') {
+ $('#selector-container-params').addClass("active");
+ showParamsEditor("body");
+ }
+ else if (dataMode == 'raw') {
+ $('#selector-container-raw').addClass("active");
+ closeParamsEditor("body");
+ }
}
else {
+ $('#body').val("")
$('#data').css("display", "none");
closeParamsEditor("body");
}
@@ -740,12 +763,8 @@ function removeBodyListeners() {
}
function setContainerHeights() {
- var mainHeight = $('#main-scroller').height();
- var historyHeight = $('#history').height();
-
- var maxHeight = mainHeight > historyHeight ? mainHeight : historyHeight;
var docHeight = $(document).height();
- $('#history').height(maxHeight + "px");
+ $('#history').height(docHeight + "px");
}
$(document).ready(function() {
@@ -872,9 +891,6 @@ function showBodyParamsEditor() {
dataMode = "params";
showParamsEditor('body');
- var containerHtml = '<textarea name="data" id="body" tabindex="4" class="inputText"></textarea>';
- $('#bodyDataContainer').html(containerHtml);
-
setCurrentDataFormat('params');
removeBodyListeners();
addBodyListeners();
@@ -885,8 +901,6 @@ function showRawEditor() {
closeParamsEditor('body');
setCurrentDataFormat('raw');
- var containerHtml = '<textarea name="data" id="body" tabindex="4" class="inputText"></textarea>';
- $('#bodyDataContainer').html(containerHtml);
removeBodyListeners();
addBodyListeners();
Please sign in to comment.
Something went wrong with that request. Please try again.