initial commit
This commit is contained in:
27
templates/base.html
Executable file
27
templates/base.html
Executable file
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title> {% block title %} Арка {% endblock %} </title>
|
||||
{% load static %}
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
|
||||
{% block styles %} {% endblock %}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="header-wrapper">
|
||||
<header>
|
||||
<img id="logo-image" src="{% static 'favicon.webp' %}" alt="logo image">
|
||||
<div>
|
||||
<span id="logo-text">АРКА</span>
|
||||
<span>API & Документация</span>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<main id="content">
|
||||
{% block content %} тут должен быть контент {% endblock %}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
230
templates/index.html
Executable file
230
templates/index.html
Executable file
@@ -0,0 +1,230 @@
|
||||
{% extends 'base.html' %}
|
||||
{% block title %} Арка | API Docs {% endblock %}
|
||||
|
||||
{% block styles %}
|
||||
<style>
|
||||
.table-wrapper, .constructor-result > pre {
|
||||
overflow-x: auto;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td, th {
|
||||
border: var(--brand-color) solid 1px;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--brand-color);
|
||||
}
|
||||
|
||||
details > div {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
margin-left: 0.5em;
|
||||
padding-left: 1em;
|
||||
border-left: var(--brand-color) solid 1px;
|
||||
}
|
||||
|
||||
.method-div {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.method-div summary {
|
||||
font-weight: bolder;
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
/* =============================== */
|
||||
|
||||
.constructor-wrapper {
|
||||
background: var(--bkg-color2);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.constructor-fields {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
.constructor-param {
|
||||
padding: 0.5em 0;
|
||||
display: block;
|
||||
margin: 0.2em 0;
|
||||
}
|
||||
|
||||
.constructor-param > * {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.constructor-param > input, .constructor-param > button {
|
||||
border: var(--brand-color) solid 2px;
|
||||
border-radius: 5px;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.constructor-result {
|
||||
min-width: 200px;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1 class="page-header"> Список методов API </h1>
|
||||
<div>
|
||||
<p> Ну а пока ты ждешь рабочего API для заказов и портфолио, можно послушать музычку </p>
|
||||
<audio preload="none" controls src="/m.mp3"></audio>
|
||||
<p> А еще можно попробовать сделать запросы в конструкторе, он есть для каждого метода </p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function getAccessToken(new_value) {
|
||||
if (new_value === undefined || new_value === null || new_value === "") {
|
||||
let res = localStorage.getItem("access_token")
|
||||
if (res === null) {
|
||||
return ""
|
||||
}
|
||||
return res
|
||||
} else {
|
||||
console.log(`Storing ${new_value} as token`)
|
||||
localStorage.setItem("access_token", new_value)
|
||||
document.getElementById('current_access_token').innerText = new_value
|
||||
return new_value
|
||||
}
|
||||
}
|
||||
async function sendRequest(method, params) {
|
||||
let url = `/methods/${method}`
|
||||
if (params !== undefined && params !== null) {
|
||||
url += "?" + new URLSearchParams(params)
|
||||
}
|
||||
return await fetch(url)
|
||||
}
|
||||
|
||||
async function makeRequest(view, method, inputs) {
|
||||
let params = {}
|
||||
for (let k in inputs) {
|
||||
let element = document.getElementById(inputs[k])
|
||||
const name = element.name
|
||||
{#let val = encodeURIComponent(element.value)#}
|
||||
let val = element.value
|
||||
if (name === "access_token") {
|
||||
val = getAccessToken(val)
|
||||
}
|
||||
if (val.length > 0)
|
||||
params[name] = val
|
||||
}
|
||||
let res = await sendRequest(method, params)
|
||||
const text = await res.text()
|
||||
document.getElementById(view).innerText = text
|
||||
|
||||
// чтобы запоминался токен
|
||||
try {
|
||||
let j = JSON.parse(text)
|
||||
getAccessToken(j["response"]["access_token"])
|
||||
} catch (e) {}
|
||||
}
|
||||
</script>
|
||||
|
||||
{% for method in api_methods %}
|
||||
<div class="method-div">
|
||||
<details>
|
||||
<summary>{{ method.name }}</summary>
|
||||
|
||||
<div>
|
||||
<h3>Описание</h3>
|
||||
<p>
|
||||
{{ method.doc | safe }}
|
||||
</p>
|
||||
|
||||
<h3>Параметры</h3>
|
||||
{% if method.params %}
|
||||
<div class="table-wrapper"><table>
|
||||
<tr>
|
||||
<th>Название</th>
|
||||
<th>Тип</th>
|
||||
<th>Описание</th>
|
||||
<th>Обязательный</th>
|
||||
</tr>
|
||||
|
||||
{% for param in method.params %}
|
||||
<tr>
|
||||
<td>{{ param.name }}</td>
|
||||
<td>{{ param.type }}</td>
|
||||
<td>{{ param.description | safe }}</td>
|
||||
<td>{{ param.required }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table></div>
|
||||
{% else %}
|
||||
<p>
|
||||
Этот метод не принимает параметров.
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
<h3>Результат</h3>
|
||||
<p>
|
||||
{{ method.returns | safe }}
|
||||
</p>
|
||||
<p>
|
||||
Ссылка на метод (без параметров): <a href="/methods/{{ method.name }}">{{ method.name }}</a>
|
||||
</p>
|
||||
<details>
|
||||
<summary>Конструктор</summary>
|
||||
<div class="constructor-wrapper" id="view-{{ method.name }}">
|
||||
<div class="constructor-fields">
|
||||
<div style="">
|
||||
<h3>Параметры</h3>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
{% if method.params %}
|
||||
{% for param in method.params %}
|
||||
<div class="constructor-param">
|
||||
<label for="param-{{ method.name }}-{{ param.name }}">{{ param.name }}</label>
|
||||
<input type="text" name="{{ param.name }}" id="param-{{ method.name }}-{{ param.name }}">
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="constructor-param">
|
||||
<p>
|
||||
Этот метод не принимает параметров.
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="constructor-param">
|
||||
<button onclick="makeRequest('result-{{ method.name }}', '{{ method.name }}',
|
||||
[{% for param in method.params %}'param-{{ method.name }}-{{ param.name }}', {% endfor %}])">Выполнить</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="constructor-result">
|
||||
<h3>Результат</h3>
|
||||
<hr>
|
||||
<pre id="result-{{ method.name }}"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
</details>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<div style="text-align: center; background: var(--bkg-color2); margin: 0; margin-top: 3em; padding: 2em; overflow-wrap: break-word;">
|
||||
Перейти в <a href="/admin">админку</a>.
|
||||
<div>
|
||||
Текущий токен: <i id="current_access_token"></i><br><a onclick="localStorage.clear(); document.getElementById('current_access_token').innerText = ''">Сбросить</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.onload = (event) => {
|
||||
const at = localStorage.getItem("access_token")
|
||||
if (at !== null) {
|
||||
document.getElementById('current_access_token').innerText = at
|
||||
}
|
||||
};
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user