UNPKG

6.75 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width,initial-scale=1.0">
8 <link rel="icon" href="/favicon.ico" type="image/x-icon" />
9 <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
10 <title>WebpackMockServer</title>
11 <script>
12 var routes = [{ method: 'get', path: '/' }]; // default for intellisense support during the development
13 routes = JSON.parse('{routes}');
14
15 document.addEventListener('DOMContentLoaded', function () {
16 var ul = document.querySelector('#app');
17 var prevEl;
18 var form = document.createElement("form");
19 form.setAttribute("target", "_blank");
20 document.body.appendChild(form);
21
22 for (var i = 0; i < routes.length; ++i) {
23 var r = routes[i];
24
25 var btn = document.createElement('button')
26 btn.append(r.method)
27 btn.route = r;
28 btn.addEventListener('click', function (e) {
29 // getting response from mock-server
30 var route = e.target.route;
31 if (route.method === 'get' || route.method === 'post') {
32 form.setAttribute("method", route.method);
33 form.setAttribute("action", route.path);
34 form.submit();
35 } else {
36 var xmlHttp = new XMLHttpRequest()
37 xmlHttp.onreadystatechange = function () {
38 if (xmlHttp.readyState == XMLHttpRequest.DONE) {
39 // opening in a new window because 'form' case works only for 'get' 'post'
40 var w = window.open("", "_blank");
41 w.document.write('<div style="font-weight:bold">' + route.method + ' ' + route.path + '</div>');
42 w.document.write('<div>response status: <span style="font-weight:bold">' + xmlHttp.status + '</span></div>');
43 w.document.write('data:');
44 try {
45 // checking if parsing possible
46 JSON.parse(xmlHttp.responseText);
47 w.document.write('<br/>');
48 w.document.write('<pre style="word-wrap: break-word; white-space: pre-wrap;">')
49 w.document.write(xmlHttp.responseText);
50 w.document.write('</pre>')
51 } catch {
52 w.document.write('<span style="color: #da0707"> invalid json</span><br/><br/>');
53 w.document.write(xmlHttp.response);
54 }
55
56 w.document.close();
57 }
58 }
59 xmlHttp.open(route.method.toUpperCase(), route.path)
60 xmlHttp.send('{}')
61 }
62 })
63
64 var url = document.createElement('span')
65 url.append(r.path)
66 // select all by the first click
67 url.addEventListener('click', function (e) {
68 if (e.target === prevEl) {
69 return;
70 }
71 prevEl = e.target;
72 if (document.selection) { // IE
73 var range = document.body.createTextRange();
74 range.moveToElementText(e.target);
75 range.select();
76 } else if (window.getSelection) {
77 var range = document.createRange();
78 range.selectNode(e.target);
79 window.getSelection().removeAllRanges();
80 window.getSelection().addRange(range);
81 }
82 })
83
84 var li = document.createElement('li');
85 li.className = r.method;
86 li.appendChild(btn);
87 li.appendChild(url)
88
89 ul.appendChild(li)
90 }
91 })
92 </script>
93 <style>
94 body {
95 display: flex;
96 flex-direction: column;
97 justify-content: center;
98 align-items: center;
99 font-family: Open Sans, sans-serif;
100 color: #3b4151;
101 margin: 0;
102 background: #fafafa;
103 }
104
105 *:focus {
106 outline: 4px dotted #404040;
107 outline-offset: -1px;
108 box-shadow: 0 0 12px 2px #6b6464;
109 }
110
111 h1 {
112 font-size: 20px;
113 }
114
115 ul {
116 margin: 0;
117 padding: 0;
118 list-style-type: none;
119 display: inline-flex;
120 flex-direction: column;
121 }
122
123 li {
124 margin: 2px;
125 border-radius: 3px;
126 border: 1px solid;
127 }
128
129 li>* {
130 padding: 6px;
131 }
132
133 li>span {
134 margin-left: 6px;
135 min-width: 260px;
136 display: inline-block;
137 }
138
139 button {
140 font: inherit;
141 border: none;
142 min-width: 80px;
143 text-align: center;
144 background: none;
145 font-weight: bold;
146 border-radius: 3px;
147 color: #3b3b3b;
148 cursor: pointer;
149 text-transform: uppercase;
150 }
151
152 button:hover {
153 box-shadow: inset 0 0 0 99999px rgba(0, 0, 0, .1);
154 color: white;
155 }
156
157 .get {
158 background: #ebf3fb;
159 border-color: #80bffe;
160 }
161
162 .get>button {
163 background: #80bffe;
164 }
165
166 .post {
167 background: #e8f6f0;
168 border-color: #68d4a4;
169 }
170
171 .post>button {
172 background: #68d4a4;
173 }
174
175 .put {
176 background: #fbf1e6;
177 border-color: #fcb154;
178
179 }
180
181 .put>button {
182 background: #fcb154;
183 }
184
185 .delete {
186 background: #fae7e7;
187 border-color: #fa6161;
188 }
189
190 .delete>button {
191 background: #fa6161;
192 }
193 </style>
194</head>
195
196<body>
197 <h1>WebpackMockServer. Routes:</h1>
198 <ul id="app"></ul>
199</body>
\No newline at end of file