большое обновление фронта
This commit is contained in:
@@ -1,164 +1,137 @@
|
||||
{% extends 'base.html' %}
|
||||
{% load static %}
|
||||
|
||||
{% block head %}
|
||||
<script src="{% static 'js/chart-4.4.1.umd.js' %}"></script>
|
||||
<script src="{% static 'js/moment-2.js' %}"></script>
|
||||
<script src="{% static 'js/chartjs-adapter-moment.js' %}"></script>
|
||||
|
||||
<script src="{% static 'js/index-main.js' %}"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block styles %}
|
||||
<style>
|
||||
<style>
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
</style>
|
||||
.content-block {
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
#canvas-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.value-good {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.value-bad {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
<h1 class="page-header"> Мониторинг водозаборного узла </h1>
|
||||
<h1> Мониторинг водозаборного узла </h1>
|
||||
{% if user.is_superuser %}
|
||||
<a href="/admin">Админка</a>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<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 = 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>
|
||||
<div class="content-wrapper">
|
||||
<div class="content-block">
|
||||
<h2>Состояние насосной станции</h2>
|
||||
<p>Последнее обновление: <span id="pump-last-update"></span></p>
|
||||
<p>Частота ПЧ: <span id="pump-vfd-freq"></span>Гц</p>
|
||||
<p>Ток ПЧ: <span id="pump-vfd-curr"></span>А</p>
|
||||
<p>Ошибка ПЧ: <span id="pump-vfd-error"></span></p>
|
||||
<p>Регистр аварий: <span id="pump-alarms"></span></p>
|
||||
<p>Состояние КА: <span id="pump-stage"></span></p>
|
||||
<p>Текущий расход: <span id="pump-flow-meter"></span>м³</p>
|
||||
</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 class="content-block">
|
||||
<h2>Состояние резервуара</h2>
|
||||
<p>Последнее обновление: <span id="tank-last-update"></span></p>
|
||||
<p>Текущий уровень воды: <span id="tank-level-now"></span>%</p>
|
||||
<p>Текущее значение с радара: <span id="tank-raw-now"></span></p>
|
||||
<p>Уровень воды <span id="tank-level-dir"></span></p>
|
||||
<p>Статус: <span id="tank-status"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-block chart">
|
||||
<h2> Уровень воды в резервуаре, %</h2>
|
||||
<div id="canvas-wrapper"><canvas id="water_level"></canvas></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.onload = (event) => {
|
||||
const at = localStorage.getItem("access_token")
|
||||
if (at !== null) {
|
||||
document.getElementById('current_access_token').innerText = at
|
||||
<script>
|
||||
moment.locale('ru')
|
||||
|
||||
let bodyStyles = window.getComputedStyle(document.body);
|
||||
|
||||
const chart_dataset = {
|
||||
label: "Резервуар",
|
||||
color: bodyStyles.getPropertyValue('--brand-text'),
|
||||
data: [],
|
||||
pointRadius: 0
|
||||
}
|
||||
|
||||
Chart.defaults.color = bodyStyles.getPropertyValue('--text-color2');
|
||||
|
||||
const chart = new Chart("water_level", {
|
||||
type: "line",
|
||||
data: {
|
||||
datasets: [chart_dataset]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: { display: false },
|
||||
scales: {
|
||||
y: { min: 0, max: 100 },
|
||||
x: {
|
||||
type: 'time',
|
||||
time: {
|
||||
unit: 'day'
|
||||
},
|
||||
scaleLabel: {
|
||||
labelString: 'Timestamp'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", (event) => {
|
||||
// запуск обновления статистики
|
||||
updateStatus().then(() => {
|
||||
setInterval(() => {
|
||||
updateStatus().then()
|
||||
}, RELOAD_STATS_INTERVAL)
|
||||
})
|
||||
|
||||
function updateChart(data) {
|
||||
chart_dataset.data = data.map((e) => {
|
||||
return {x: new Date(e[0] * 1000), y: e[1]}
|
||||
})
|
||||
chart.update();
|
||||
}
|
||||
|
||||
loadChartData().then((data) => {
|
||||
updateChart(data)
|
||||
|
||||
setInterval(() => {
|
||||
loadChartData().then((d) => {
|
||||
updateChart(d)
|
||||
})
|
||||
}, RELOAD_CHART_INTERVAL)
|
||||
})
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user