bazzar/api/assets/index.html

233 lines
7.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;
}
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="bearer">bearer</label>
<input name="bearer" id="bearer"/>
</fieldset>
<fieldset>
<label for="op">Operation</label>
<select name="op" id="op">
<option></option>
<optgroup label="Api V1">
<option value="api-v1-sign-in">Api Sign In</option>
<option value="api-v1-products">Products</option>
<option value="api-v1-stocks">Stocks</option>
<option value="api-v1-shopping-cart">Shopping cart</option>
<option value="api-v1-shopping-cart-items">Shopping cart items</option>
</optgroup>
<optgroup label="Admin">
<option value="admin-auto-login">Auto login</option>
<option value="admin-get-products">Get products</option>
<option value="admin-create-product">Create product</option>
<option value="admin-create-stock">Create stock</option>
</optgroup>
</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" rows="40"></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 bearerEl = form.querySelector('#bearer');
const send = (method, path, params) => {
const bearer = bearerEl.value || '';
const rest = method === 'GET'
? {}
: { body: JSON.stringify(params), headers: { 'Content-Type': 'application/json' } };
if (bearer.length) {
if (!rest.headers) rest.headers = {};
rest.headers["Authorization"] = `Bearer ${ bearer }`;
}
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 'api-v1-sign-in': {
mthEl.value = 'POST';
urlEl.value = '/api/v1/sign-in';
paramsEl.value = 'login=Eraden\npassword=test';
break;
}
case 'api-v1-products': {
mthEl.value = 'GET';
urlEl.value = '/api/v1/products';
paramsEl.value = '';
break;
}
case 'api-v1-stocks': {
mthEl.value = 'GET';
urlEl.value = '/api/v1/stocks';
paramsEl.value = '';
break;
}
case 'api-v1-shopping-cart': {
mthEl.value = 'GET';
urlEl.value = '/api/v1/shopping-cart';
paramsEl.value = '';
break;
}
case 'api-v1-shopping-cart-items': {
mthEl.value = 'GET';
urlEl.value = '/api/v1/shopping-cart-items';
paramsEl.value = '';
break;
}
/// admin
case 'admin-auto-login': {
paramsEl.value = `login=Eraden\npassword=test`
mthEl.value = 'POST';
urlEl.value = '/admin/sign-in';
break;
}
case 'admin-get-products': {
mthEl.value = 'GET';
urlEl.value = '/admin/api/v1/products';
paramsEl.value = '';
break;
}
case 'admin-create-product': {
paramsEl.value = serializeParams({
name: 'Foo',
short_description: 'asd',
long_description: 'asjdoiajd ajio djaso idja s',
price: 1200,
deliver_days_flag: ["monday"]
});
mthEl.value = 'POST';
urlEl.value = '/admin/api/v1/product';
break;
}
case 'admin-create-stock': {
paramsEl.value = serializeParams({
product_id: 1,
quantity: 456,
quantity_unit: 'gram'
});
mthEl.value = 'POST';
urlEl.value = '/admin/api/v1/stock';
break;
}
}
});
const serializeParams = (p) =>
Object.entries(p).map(([k, v]) => {
let value = Array.isArray(v)
? `[${ v.join(',') }]`
: v
return `${ k }=${ value }`
}).join('\n');
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 {
if (v.match(/\-?\d+/)) {
v = JSON.parse(v);
} else if (v.startsWith("[") && v.endsWith(']')) {
v = v.substring(1, v.length - 1).split(',').map(s => s.trim())
}
} catch (_) {
}
params[k] = v;
});
send(method, path, params)
});
</script>
</body>
</html>