Skip to content

Commit

Permalink
Adding sandbox
Browse files Browse the repository at this point in the history
  • Loading branch information
Matt Zabriskie committed Aug 28, 2014
1 parent 9efd604 commit 2579728
Show file tree
Hide file tree
Showing 2 changed files with 227 additions and 0 deletions.
164 changes: 164 additions & 0 deletions sandbox/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
<!doctype html>
<html>
<head>
<title>axios</title>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<style type="text/css">
pre {
max-height: 200px;
min-height: 39px;
overflow: auto;
}
</style>
</head>
<body class="container">
<h1>axios</h1>

<div class="well">
<h3>Input</h3>
<form role="form" onsubmit="return false;">
<div class="form-group">
<label for="method">Method</label>
<select id="method" class="form-control">
<option value="GET">GET</option>
<option value="POST">POST</option>
<option value="PUT">PUT</option>
<option value="DELETE">DELETE</option>
<option value="HEAD">HEAD</option>
<option value="PATCH">PATCH</option>
</select>
</div>
<div class="form-group">
<label for="params">Params</label>
<textarea id="params" class="form-control" placeholder='{"foo": "bar", "baz": 123.45}'></textarea>
</div>
<div class="form-group" style="display: none;">
<label for="data">Data</label>
<textarea id="data" class="form-control" placeholder='{"foo": "bar", "baz": 123.45}'></textarea>
</div>
<div class="form-group">
<label for="headers">Headers</label>
<textarea id="headers" class="form-control" placeholder='{"X-Requested-With": "XMLHttpRequest"}'></textarea>
</div>
<button id="submit" type="submit" class="btn btn-primary">Send Request</button>
</form>
</div>

<div class="well">
<h3>Request</h3>
<pre id="request">No Data</pre>
</div>

<div class="well">
<h3>Response</h3>
<pre id="response">No Data</pre>
</div>

<script src="/axios.js"></script>
<script>
(function () {
// Just for you IE8
if (typeof Array.prototype.indexOf === 'undefined') {
Array.prototype.indexOf = function (item) {
for (var i=0, l=this.length; i<l; i++) {
if (this[i] === item) {
return i;
}
}
return -1;
}
}

var method = document.getElementById('method');
var params = document.getElementById('params');
var data = document.getElementById('data');
var headers = document.getElementById('headers');
var submit = document.getElementById('submit');
var request = document.getElementById('request');
var response = document.getElementById('response');

function acceptsData(method) {
return ['PATCH', 'POST', 'PUT'].indexOf(method) > -1;
}

function getUrl() {
return '/api';
}

function getParams() {
return params.value.length === 0 ? null : JSON.parse(params.value);
}

function getData() {
return data.value.length === 0 ? null : JSON.parse(data.value);
}

function getHeaders() {
return headers.value.length === 0 ? null : JSON.parse(headers.value);
}

function syncWithLocalStorage() {
method.value = localStorage.getItem('method') || 'GET';
params.value = localStorage.getItem('params') || '';
data.value = localStorage.getItem('data') || '';
headers.value = localStorage.getItem('headers') || '';
}

function syncParamsAndData() {
switch (method.value) {
case 'PATCH':
case 'POST':
case 'PUT':
params.parentNode.style.display = 'none';
data.parentNode.style.display = '';
break;
default:
params.parentNode.style.display = '';
data.parentNode.style.display = 'none';
break;
}
}

submit.onclick = function () {
var options = {
url: getUrl(),
params: !acceptsData(method.value) ? getParams() : undefined,
data: acceptsData(method.value) ? getData() : undefined,
method: method.value,
headers: getHeaders()
};

request.innerHTML = JSON.stringify(options, null, 2);

axios(options)
.success(function (res) {
response.innerHTML = JSON.stringify(res.data, null, 2);
})
.error(function (res) {
response.innerHTML = JSON.stringify(res.data, null, 2);
});
};

method.onchange = function () {
localStorage.setItem('method', method.value);
syncParamsAndData();
};

params.onchange = function () {
localStorage.setItem('params', params.value);
};

data.onchange = function () {
localStorage.setItem('data', data.value);
};

headers.onchange = function () {
localStorage.setItem('headers', headers.value);
};

syncWithLocalStorage();
syncParamsAndData();
})();
</script>
</body>
</html>
63 changes: 63 additions & 0 deletions sandbox/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
var fs = require('fs');
var url = require('url');
var path = require('path');
var http = require('http');
var server;

server = http.createServer(function (req, res) {
req.setEncoding('utf8');

var parsed = url.parse(req.url, true);
var pathname = parsed.pathname;

console.log('[' + new Date() + ']', req.method, pathname);

if (pathname === '/') {
pathname = '/index.html';
}

if (pathname === '/index.html') {
fs.createReadStream(path.join(__dirname, pathname)).pipe(res);
} else if (pathname === '/axios.js') {
res.writeHead(200, {
'Content-Type': 'text/javascript'
});
fs.createReadStream(path.join(__dirname, '../dist/axios.js')).pipe(res);
} else if (pathname === '/api') {
var status;
var result;
var data = '';

req.on('data', function (chunk) {
data += chunk;
});

req.on('end', function () {
try {
status = 200;
result = {
url: req.url,
data: data ? JSON.parse(data) : undefined,
method: req.method,
headers: req.headers
};
} catch (e) {
console.error('Error:', e.message);
status = 400;
result = {
error: e.message
};
}

res.writeHead(status, {
'Content-Type': 'application/json'
});
res.end(JSON.stringify(result));
});
} else {
res.writeHead(404);
res.end('<h1>404 Not Found</h1>');
}
});

server.listen(3000);

0 comments on commit 2579728

Please sign in to comment.