144 lines
4.9 KiB
HTML
144 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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>
|
|
<body>
|
|
<div style="display: flex;justify-content: space-between;">
|
|
<div style="width: 49%">
|
|
<form style="width: 100%">
|
|
<fieldset>
|
|
<label for="op">Operation</label>
|
|
<select name="op" id="op">
|
|
<option value="auto-login">Auto login</option>
|
|
<option value="get-products">Get products</option>
|
|
<option value="create-product">Create product</option>
|
|
</select>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label for="method">Method</label>
|
|
<select id="method">
|
|
<option value="GET">GET</option>
|
|
<option value="POST">POST</option>
|
|
<option value="PATCH">PATCH</option>
|
|
<option value="DELETE">DELETE</option>
|
|
</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">
|
|
</form>
|
|
</div>
|
|
<div style="width: 49%">
|
|
<pre style="background: black; width: 100%; min-height: 300px"><code
|
|
id="output"
|
|
class="language-json"
|
|
style="overflow: auto"
|
|
></code></pre>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
Prism.manual = true;
|
|
|
|
const out = document.querySelector('#output');
|
|
const form = document.querySelector("form");
|
|
const urlEl = form.querySelector('#path');
|
|
const paramsEl = form.querySelector('#params');
|
|
const mthEl = form.querySelector('#method');
|
|
const opEL = form.querySelector('#op');
|
|
|
|
const send = (method, path, params) => {
|
|
const rest = method === 'GET'
|
|
? {}
|
|
: { body: JSON.stringify(params), headers: { 'Content-Type': 'application/json' } };
|
|
path = method === 'GET'
|
|
? `${ path }?${ JSON.stringify(params) }`
|
|
: path;
|
|
|
|
fetch(`${ path }`, { ...rest, method })
|
|
.then(async (res) => {
|
|
if (res.status < 400) {
|
|
const json = await res.json();
|
|
out.innerHTML = Prism.highlight(JSON.stringify(json, null, 4), Prism.languages.json, 'json');
|
|
} else {
|
|
out.innerHTML = await res.text();
|
|
}
|
|
})
|
|
}
|
|
|
|
opEL.addEventListener('change', () => {
|
|
switch (opEL.value) {
|
|
case 'auto-login':
|
|
paramsEl.value = `login=Eraden\npassword=text`
|
|
return send(mthEl.value = 'POST', urlEl.value = '/admin/sign-in', { login: 'Eraden', password: 'test' })
|
|
case 'get-products':
|
|
return send(mthEl.value = 'GET', urlEl.value = '/admin/api/v1/products', {})
|
|
case 'create-product':
|
|
const p = {
|
|
name: 'Foo',
|
|
short_description: 'asd',
|
|
long_description: 'asjdoiajd ajio djaso idja s',
|
|
price_major: 12,
|
|
price_minor: 0,
|
|
};
|
|
paramsEl.value = Object.entries(p).map((k, v) => `${ k }=${ v }}`).join('\n');
|
|
return send(mthEl.value = 'POST', urlEl.value = '/admin/api/v1/product', p)
|
|
}
|
|
})
|
|
|
|
form.addEventListener('submit', (ev) => {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
|
|
let path = urlEl.value;
|
|
let params = {};
|
|
const method = mthEl.value;
|
|
|
|
paramsEl.value.split("\n").forEach(s => {
|
|
if (!s.length) return;
|
|
let [k, ...v] = s.split("=");
|
|
v = Array(v).join('=')
|
|
try {
|
|
v = JSON.parse(v);
|
|
} catch (_) {
|
|
}
|
|
params[k] = v;
|
|
});
|
|
|
|
send(method, path, params)
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|