Tsumanu/bazzar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Better test editor

Browse Source
This commit is contained in:
eraden 2022-04-16 21:09:50 +02:00
parent 5bdcaf4298
commit 38bed6f835
1 changed files with 49 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
api/assets/index.html
View File

@ -3,27 +3,60 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Bazzar</title> <title>Bazzar</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Questrial);
@import url(https://fonts.googleapis.com/css?family=Arvo);
@font-face {
src: url(https://lea.verou.me/logo.otf);
font-family: 'LeaVerou';
}
fieldset {
display: flex;
justify-content: space-between;
width: 600px;
}
fieldset > label {
width: 45%;
}
fieldset > input, fieldset > textarea {
width: 54%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/components/prism-json.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/themes/prism-dark.min.css">
</head> </head>
<body> <body>
<div style="display: flex"> <div style="display: flex;justify-content: space-between;">
<div> <div style="width: 49%">
<form> <form>
<select id="method"> <fieldset>
<option value="GET">GET</option> <label for="method">Method</label>
<option value="POST">POST</option> <select id="method">
<option value="PATCH">PATCH</option> <option value="GET">GET</option>
<option value="DELETE">DELETE</option> <option value="POST">POST</option>
</select> <option value="PATCH">PATCH</option>
<input id="path" type="text"> <option value="DELETE">DELETE</option>
<textarea id="params"></textarea> </select>
</fieldset>
<fieldset>
<label for="path">Path</label><input id="path" type="text">
</fieldset>
<fieldset>
<label for="params">Params</label><textarea id="params"></textarea>
</fieldset>
<input type="submit"> <input type="submit">
</form> </form>
</div> </div>
<div> <div style="width: 49%">
<pre><code id="output"></code></pre> <pre style="background: black; width: 100%; min-height: 300px"><code id="output" class="language-json"></code></pre>
</div> </div>
</div> </div>
<script> <script>
Prism.manual = true;
const out = document.querySelector('#output'); const out = document.querySelector('#output');
const form = document.querySelector("form"); const form = document.querySelector("form");
const urlEl = form.querySelector('#path'); const urlEl = form.querySelector('#path');
@ -40,8 +73,8 @@
paramsEl.value.split("\n").forEach(s => { paramsEl.value.split("\n").forEach(s => {
if (!s.length) return; if (!s.length) return;
let [k, v] = s.split("="); let [k, ...v] = s.split("=");
params[k] = v; params[k] = Array(v).join('=');
}); });
const rest = method === 'GET' const rest = method === 'GET'
@ -51,10 +84,10 @@
? `${ path }?${ JSON.stringify(params) }` ? `${ path }?${ JSON.stringify(params) }`
: path; : path;
fetch(`/${ path }`, { ...rest, method }) fetch(`${ path }`, { ...rest, method })
.then(res => res.json()) .then(res => res.json())
.then(json => { .then(json => {
out.textContent = JSON.stringify(json, null, 4); out.innerHTML = Prism.highlight(JSON.stringify(json), Prism.languages.json, 'json');
}) })
}); });
</script> </script>