webpack-mock-server
Version:
Mocks api requests for webpack-dev-server with hot-replacement
199 lines (173 loc) • 6.55 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<title>WebpackMockServer</title>
<script>
var routes = [{ method: 'get', path: '/' }]; // default for intellisense support during the development
routes = JSON.parse('{routes}');
document.addEventListener('DOMContentLoaded', function () {
var ul = document.querySelector('#app');
var prevEl;
var form = document.createElement("form");
form.setAttribute("target", "_blank");
document.body.appendChild(form);
for (var i = 0; i < routes.length; ++i) {
var r = routes[i];
var btn = document.createElement('button')
btn.append(r.method)
btn.route = r;
btn.addEventListener('click', function (e) {
// getting response from mock-server
var route = e.target.route;
if (route.method === 'get' || route.method === 'post') {
form.setAttribute("method", route.method);
form.setAttribute("action", route.path);
form.submit();
} else {
var xmlHttp = new XMLHttpRequest()
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == XMLHttpRequest.DONE) {
// opening in a new window because 'form' case works only for 'get' 'post'
var w = window.open("", "_blank");
w.document.write('<div style="font-weight:bold">' + route.method + ' ' + route.path + '</div>');
w.document.write('<div>response status: <span style="font-weight:bold">' + xmlHttp.status + '</span></div>');
w.document.write('data:');
try {
// checking if parsing possible
JSON.parse(xmlHttp.responseText);
w.document.write('<br/>');
w.document.write('<pre style="word-wrap: break-word; white-space: pre-wrap;">')
w.document.write(xmlHttp.responseText);
w.document.write('</pre>')
} catch {
w.document.write('<span style="color: #da0707"> invalid json</span><br/><br/>');
w.document.write(xmlHttp.response);
}
w.document.close();
}
}
xmlHttp.open(route.method.toUpperCase(), route.path)
xmlHttp.send('{}')
}
})
var url = document.createElement('span')
url.append(r.path)
// select all by the first click
url.addEventListener('click', function (e) {
if (e.target === prevEl) {
return;
}
prevEl = e.target;
if (document.selection) { // IE
var range = document.body.createTextRange();
range.moveToElementText(e.target);
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(e.target);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
})
var li = document.createElement('li');
li.className = r.method;
li.appendChild(btn);
li.appendChild(url)
ul.appendChild(li)
}
})
</script>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: Open Sans, sans-serif;
color: #3b4151;
margin: 0;
background: #fafafa;
}
*:focus {
outline: 4px dotted #404040;
outline-offset: -1px;
box-shadow: 0 0 12px 2px #6b6464;
}
h1 {
font-size: 20px;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
display: inline-flex;
flex-direction: column;
}
li {
margin: 2px;
border-radius: 3px;
border: 1px solid;
}
li>* {
padding: 6px;
}
li>span {
margin-left: 6px;
min-width: 260px;
display: inline-block;
}
button {
font: inherit;
border: none;
min-width: 80px;
text-align: center;
background: none;
font-weight: bold;
border-radius: 3px;
color: #3b3b3b;
cursor: pointer;
text-transform: uppercase;
}
button:hover {
box-shadow: inset 0 0 0 99999px rgba(0, 0, 0, .1);
color: white;
}
.get {
background: #ebf3fb;
border-color: #80bffe;
}
.get>button {
background: #80bffe;
}
.post {
background: #e8f6f0;
border-color: #68d4a4;
}
.post>button {
background: #68d4a4;
}
.put {
background: #fbf1e6;
border-color: #fcb154;
}
.put>button {
background: #fcb154;
}
.delete {
background: #fae7e7;
border-color: #fa6161;
}
.delete>button {
background: #fa6161;
}
</style>
</head>
<body>
<h1>WebpackMockServer. Routes:</h1>
<ul id="app"></ul>
</body>