ArgusSite/static/templates/index.html

190 lines
5.9 KiB
HTML
Raw Normal View History

2023-07-03 22:31:18 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, introductory scale=1">
<title>Панель управления</title>
<link rel="stylesheet" href="../styles/main.css" />
</head>
<body>
<style>
2023-09-18 10:00:43 +00:00
.main .name {
margin-bottom: 100px !important;
}
2023-09-19 11:11:08 +00:00
.main {
margin-top: 92px !important;
}
.main .bg {
min-height: calc(100vh - 162px - 92px);
}
</style>
2023-07-03 22:31:18 +00:00
<div class="page-transition"></div>
<header>
<img src="../img/argus.png">
2023-07-03 22:31:18 +00:00
<h1>Аргус</h1>
2023-07-16 16:09:25 +00:00
<h2><span>/</span> {{Organisation}}</h2>
2023-07-03 22:31:18 +00:00
</header>
<section class="account-info">
<div id="account-main">
<img id="person" src="../img/person.svg">
2023-07-16 16:09:25 +00:00
<span>{{User}}</span>
2023-07-03 22:31:18 +00:00
<img id="down" src="../img/down.svg">
<img id="up" src="../img/up.svg">
</div>
<a href="/logout"><div id="account-additional" class="additional">Выйти</div></a>
2023-07-03 22:31:18 +00:00
</section>
<section class="navigation">
<a href="/">
<div class="selected"><img src="../img/chart.svg">Главная</div>
</a>
<a href="/devices">
<div><img src="../img/cloud.svg">Устройства</div>
</a>
<a href="/reports">
<div><img src="../img/bubble.svg">Отчёты</div>
</a>
<a href="/live">
<div><img src="../img/waves.svg">Трансляция</div>
</a>
2023-08-21 03:28:58 +00:00
<a href="/videos">
2023-07-03 22:31:18 +00:00
<div><img src="../img/play.svg">Записи</div>
</a>
<a href="https://forms.yandex.ru/cloud/6515ecda3e9d08f17262c332/" target="_blank">
<div><img src="../img/bug.svg">Собщить об ошибке</div>
</a>
{{#if isAdmin}}
2023-09-11 05:59:00 +00:00
<a class="admin-panel" href="/admin">
<div><img src="../img/keyboard.svg">Админка</div>
</a>
{{/if}}
2023-08-28 04:40:58 +00:00
<a class="settings" href="/settings">
2023-07-03 22:31:18 +00:00
<div><img src="../img/gear.svg">Настройки</div>
</a>
</section>
<section class="main">
{{#if ifDBError}}
<section class="dberror">
<div class="erorr-container">
<img src="../img/warning.svg"> <br>
<h1>Ошибка </h1> <br>
<span>Не удалось получить данные из БД</span>
<button type="button" onclick="location.reload();">Повторить попытку</button>
</div>
</section>
{{/if}}
2023-07-03 22:31:18 +00:00
<div class="name">
2023-07-16 16:09:25 +00:00
<img src="../img/cars.svg"><span>Сводка по {{Count}} ТС</span>
2023-07-03 22:31:18 +00:00
</div>
<section class="bg">
<section class="content">
<div class="graph left">
<h1>Предупреждения</h1>
<span>10 д</span>
<div class="chart">
<canvas id="chart-warnings"></canvas>
</div>
</div>
<div class="graph right">
<h1>Позиционирование</h1>
<span>10 д</span>
<div class="chart">
<canvas id="chart-positions"></canvas>
</div>
</div>
</section>
</section>
</section>
2023-08-14 04:11:03 +00:00
<script>
var warningsData = {
labels: [
{{#each Dates}}
'{{this}}',
{{/each}}
],
datasets: [
{
label: "Актуальный период",
backgroundColor: "rgba(235, 146, 139, 1)",
borderWidth: 0,
borderRadius: 9,
hoverBackgroundColor: "rgba(235, 146, 139, 0.8)",
data: [{{AlarmsLast11Days}}],
grouped: false,
},
{
label: "Предыдущий период",
backgroundColor: "rgba(235, 146, 139, 0.5)",
borderWidth: 0,
borderRadius: 9,
hoverBackgroundColor: "rgba(235, 146, 139, 0.3)",
data: [{{Alarms11DaysBefore}}],
},
],
};
var positionsData = {
labels: [
{{#each Dates}}
'{{this}}',
{{/each}}
],
datasets: [
{
label: "Позиционирование",
borderColor: "#8086F9",
fill: false,
data: [
{{PositionsLast11Days}}
],
pointStyle: false,
pointRadius: 25,
pointHoverRadius: 25,
tension: 0.4,
},
],
};
</script>
2023-07-03 22:31:18 +00:00
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="../scripts/graphs.js"></script>
<script>
// Скрытие/Показ дополнительных меню аккаунта
const accountMain = document.getElementById('account-main');
const accountAdditional = document.getElementById('account-additional');
const accountUp = document.getElementById('up');
const accountDown = document.getElementById('down');
accountAdditional.style.display = 'none';
accountUp.style.display = 'none';
accountMain.addEventListener('click', () => {
if (accountAdditional.style.display === 'none') {
accountAdditional.style.display = 'flex';
accountUp.style.display = 'unset';
accountDown.style.display = 'none';
} else {
accountAdditional.style.display = 'none';
accountUp.style.display = 'none';
accountDown.style.display = 'unset';
}
});
</script>
</body>
</html>