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: '/' }];
|
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 |
|
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 |
|
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 |
|
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 |
|
67 | url.addEventListener('click', function (e) {
|
68 | if (e.target === prevEl) {
|
69 | return;
|
70 | }
|
71 | prevEl = e.target;
|
72 | if (document.selection) {
|
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 |