first commit
This commit is contained in:
Ivan
251
static/templates/devices/drivers.html
Normal file
251
static/templates/devices/drivers.html
Normal file
@ -0,0 +1,251 @@
|
||||
<!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, initial-scale=1.0">
|
||||
<title>Устройства</title>
|
||||
<link rel="stylesheet" href="../styles/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Аргус</h1>
|
||||
<h2><span>/</span> Название организации</h2>
|
||||
</header>
|
||||
|
||||
<section class="account-info">
|
||||
<div id="account-main">
|
||||
<img id="person" src="../img/person.svg">
|
||||
<span>Тестовое Имя</span>
|
||||
<img id="down" src="../img/down.svg">
|
||||
<img id="up" src="../img/up.svg">
|
||||
</div>
|
||||
<a href="/login"><div id="account-additional" class="additional">Выйти</div></a>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="navigation">
|
||||
<a href="/">
|
||||
<div><img src="../img/chart.svg">Главная</div>
|
||||
</a>
|
||||
<a href="/devices">
|
||||
<div class="selected"><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>
|
||||
<a href="/">
|
||||
<div><img src="../img/play.svg">Записи</div>
|
||||
</a>
|
||||
<a class="settings" href="/">
|
||||
<div><img src="../img/gear.svg">Настройки</div>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section class="main">
|
||||
<div class="name">
|
||||
<span>Устройства</span>
|
||||
</div>
|
||||
<nav>
|
||||
<a href="/devices">Список устройств</a>
|
||||
<a class="selected" href="/devices/drivers">Водители</a>
|
||||
<a href="/devices/newdevice">Добавить устройство</a>
|
||||
<a href="/devices/newdriver">Добавить водителя</a>
|
||||
|
||||
<a class="update" href="/devices/update">Обновление ПО</a>
|
||||
</nav>
|
||||
<section class="bg">
|
||||
<section class="content">
|
||||
|
||||
<section class="for-table">
|
||||
|
||||
<section class="organisation">
|
||||
<h1>Организация</h1>
|
||||
|
||||
<ul class="area">
|
||||
<li class="area-name"><img src="../img/ul.svg"><input type="checkbox" id="name-1" class="checkbox-input" hidden checked><label for="name-1" class="checkbox-label">Группа 1</label>
|
||||
<ul class="area-devices" id="devices-1">
|
||||
<li class="device"><img><input type="checkbox" id="1-device-1" class="checkbox-input device-filter" value="1-device-1" hidden checked><label for="1-device-1" class="checkbox-label"><div class="checkmark"></div>Трамваи</label></li>
|
||||
<li class="device"><img><input type="checkbox" id="1-device-2" class="checkbox-input device-filter" value="1-device-2" hidden checked><label for="1-device-2" class="checkbox-label"><div class="checkmark"></div>Маршрутки</label></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="area-name"><img src="../img/ul.svg"><input type="checkbox" id="name-2" class="checkbox-input" hidden checked><label for="name-2" class="checkbox-label">Группа 2</label>
|
||||
<ul class="area-devices" id="devices-2">
|
||||
<li class="device"><img><input type="checkbox" id="2-device-1" class="checkbox-input device-filter" value="2-device-1" hidden checked><label for="2-device-1" class="checkbox-label"><div class="checkmark"></div>Трамваи</label></li>
|
||||
<li class="device"><img><input type="checkbox" id="2-device-2" class="checkbox-input device-filter" value="2-device-2" hidden checked><label for="2-device-2" class="checkbox-label"><div class="checkmark"></div>Электробусы</label></li>
|
||||
<li class="device"><img><input type="checkbox" id="2-device-3" class="checkbox-input device-filter" value="2-device-3" hidden checked><label for="2-device-3" class="checkbox-label"><div class="checkmark"></div>Троллейбусы</label></li>
|
||||
<li class="device"><img><input type="checkbox" id="2-device-4" class="checkbox-input device-filter" value="2-device-4" hidden checked><label for="2-device-4" class="checkbox-label"><div class="checkmark"></div>Старые ТС</label></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="area-name"><img src="../img/ul.svg"><input type="checkbox" id="name-3" class="checkbox-input" hidden checked><label for="name-3" class="checkbox-label">Другое</label>
|
||||
<ul class="area-devices" id="devices-3">
|
||||
<li class="device"><img><input type="checkbox" id="3-device-1" class="checkbox-input device-filter" value="3-device-1" hidden checked><label for="3-device-1" class="checkbox-label"><div class="checkmark"></div>Маршрутки</label></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section id="table-area" class="table">
|
||||
<h1>Список водителей</h1>
|
||||
<input id="table-search" class="search" type="text" placeholder="Поиск">
|
||||
|
||||
|
||||
<table id="deviceTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input id="device-all" type="checkbox"><label for="device-all"><div class="checkmark"></div></label></th>
|
||||
<th>ID</th>
|
||||
<th>Имя</th>
|
||||
<th>Фамилия</th>
|
||||
<th>Номер ТС</th>
|
||||
<th>Номер телефона</th>
|
||||
<th>Почта</th>
|
||||
<th>Карта водителя</th>
|
||||
<th><button id="delete-device-all" value="delete-device-all" class="trash"></button></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Сюда будут добавляться строки таблицы -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<div id="count">
|
||||
<!-- Сюда добавится итоговое количество результатов -->
|
||||
</div>
|
||||
<div id="pagination">
|
||||
<!-- Сюда будут добавляться ссылки для переключения между страницами -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<script src="../scripts/table-drivers.js"></script>
|
||||
<script src="../scripts/jquery.min.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>
|
||||
|
||||
|
||||
<script>
|
||||
const checkboxes = document.querySelectorAll('.organisation .checkbox-input');
|
||||
|
||||
checkboxes.forEach((checkbox) => {
|
||||
applyFilterAndSearch();
|
||||
checkbox.addEventListener('change', function() {
|
||||
document.querySelector('#device-all').checked = false;
|
||||
applyFilterAndSearch();
|
||||
const devices = this.parentNode.querySelector('.area-devices');
|
||||
if (this.checked) {
|
||||
devices.style.display = 'block';
|
||||
|
||||
// Активируем дочерние чекбоксы
|
||||
const childCheckboxes = devices.querySelectorAll('.device-filter');
|
||||
childCheckboxes.forEach((childCheckbox) => {
|
||||
childCheckbox.checked = true;
|
||||
applyFilterAndSearch();
|
||||
});
|
||||
} else {
|
||||
devices.style.display = 'none';
|
||||
applyFilterAndSearch();
|
||||
|
||||
// Деактивируем дочерние чекбоксы
|
||||
const childCheckboxes = devices.querySelectorAll('.device-filter');
|
||||
childCheckboxes.forEach((childCheckbox) => {
|
||||
childCheckbox.checked = false;
|
||||
applyFilterAndSearch();
|
||||
});
|
||||
}
|
||||
|
||||
// Деактивируем дочерние чекбоксы, если родительский чекбокс не выбран
|
||||
if (!this.checked) {
|
||||
const childCheckboxes = devices.querySelectorAll('.device-filter');
|
||||
childCheckboxes.forEach((childCheckbox) => {
|
||||
childCheckbox.checked = false;
|
||||
applyFilterAndSearch();
|
||||
});
|
||||
devices.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
var table = document.querySelector('#deviceTable');
|
||||
var tableCheckboxAll = table.querySelector('#device-all');
|
||||
var tableCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]');
|
||||
|
||||
tableCheckboxAll.addEventListener('click', function(event) {
|
||||
table = document.querySelector('#deviceTable');
|
||||
tableCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]');
|
||||
if (tableCheckboxAll.checked) {
|
||||
tableCheckboxes.forEach((tableCheckbox) => {
|
||||
tableCheckbox.checked = true;
|
||||
});
|
||||
} else {
|
||||
tableCheckboxes.forEach((tableCheckbox) => {
|
||||
tableCheckbox.checked = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('#deviceTable').click( function(event) {
|
||||
table = document.querySelector('#deviceTable');
|
||||
tableCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]');
|
||||
|
||||
|
||||
for (var i = 0; i < tableCheckboxes.length; i++) {
|
||||
tableCheckboxes[i].addEventListener('click', function(event) {
|
||||
for (var j = 0; j < tableCheckboxes.length; j++) {
|
||||
if (!tableCheckboxes[j].checked || tableCheckboxes[j].disabled) {
|
||||
tableCheckboxAll.checked = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
tableCheckboxAll.checked = true;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
251
static/templates/devices/index.html
Normal file
251
static/templates/devices/index.html
Normal file
@ -0,0 +1,251 @@
|
||||
<!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, initial-scale=1.0">
|
||||
<title>Устройства</title>
|
||||
<link rel="stylesheet" href="../styles/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Аргус</h1>
|
||||
<h2><span>/</span> Название организации</h2>
|
||||
</header>
|
||||
|
||||
<section class="account-info">
|
||||
<div id="account-main">
|
||||
<img id="person" src="../img/person.svg">
|
||||
<span>Тестовое Имя</span>
|
||||
<img id="down" src="../img/down.svg">
|
||||
<img id="up" src="../img/up.svg">
|
||||
</div>
|
||||
<a href="/login"><div id="account-additional" class="additional">Выйти</div></a>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="navigation">
|
||||
<a href="/">
|
||||
<div><img src="../img/chart.svg">Главная</div>
|
||||
</a>
|
||||
<a href="/devices">
|
||||
<div class="selected"><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>
|
||||
<a href="/">
|
||||
<div><img src="../img/play.svg">Записи</div>
|
||||
</a>
|
||||
<a class="settings" href="/">
|
||||
<div><img src="../img/gear.svg">Настройки</div>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section class="main">
|
||||
<div class="name">
|
||||
<span>Устройства</span>
|
||||
</div>
|
||||
<nav>
|
||||
<a class="selected" href="/devices">Список устройств</a>
|
||||
<a href="/devices/drivers">Водители</a>
|
||||
<a href="/devices/newdevice">Добавить устройство</a>
|
||||
<a href="/devices/newdriver">Добавить водителя</a>
|
||||
|
||||
<a class="update" href="/devices/update">Обновление ПО</a>
|
||||
</nav>
|
||||
<section class="bg">
|
||||
<section class="content">
|
||||
|
||||
<section class="for-table">
|
||||
|
||||
<section class="organisation">
|
||||
<h1>Организация</h1>
|
||||
|
||||
<ul class="area">
|
||||
<li class="area-name"><img src="../img/ul.svg"><input type="checkbox" id="name-1" class="checkbox-input" hidden checked><label for="name-1" class="checkbox-label">Группа 1</label>
|
||||
<ul class="area-devices" id="devices-1">
|
||||
<li class="device"><img><input type="checkbox" id="1-device-1" class="checkbox-input device-filter" value="1-device-1" hidden checked><label for="1-device-1" class="checkbox-label"><div class="checkmark"></div>Трамваи</label></li>
|
||||
<li class="device"><img><input type="checkbox" id="1-device-2" class="checkbox-input device-filter" value="1-device-2" hidden checked><label for="1-device-2" class="checkbox-label"><div class="checkmark"></div>Маршрутки</label></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="area-name"><img src="../img/ul.svg"><input type="checkbox" id="name-2" class="checkbox-input" hidden checked><label for="name-2" class="checkbox-label">Группа 2</label>
|
||||
<ul class="area-devices" id="devices-2">
|
||||
<li class="device"><img><input type="checkbox" id="2-device-1" class="checkbox-input device-filter" value="2-device-1" hidden checked><label for="2-device-1" class="checkbox-label"><div class="checkmark"></div>Трамваи</label></li>
|
||||
<li class="device"><img><input type="checkbox" id="2-device-2" class="checkbox-input device-filter" value="2-device-2" hidden checked><label for="2-device-2" class="checkbox-label"><div class="checkmark"></div>Электробусы</label></li>
|
||||
<li class="device"><img><input type="checkbox" id="2-device-3" class="checkbox-input device-filter" value="2-device-3" hidden checked><label for="2-device-3" class="checkbox-label"><div class="checkmark"></div>Троллейбусы</label></li>
|
||||
<li class="device"><img><input type="checkbox" id="2-device-4" class="checkbox-input device-filter" value="2-device-4" hidden checked><label for="2-device-4" class="checkbox-label"><div class="checkmark"></div>Старые ТС</label></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="area-name"><img src="../img/ul.svg"><input type="checkbox" id="name-3" class="checkbox-input" hidden checked><label for="name-3" class="checkbox-label">Другое</label>
|
||||
<ul class="area-devices" id="devices-3">
|
||||
<li class="device"><img><input type="checkbox" id="3-device-1" class="checkbox-input device-filter" value="3-device-1" hidden checked><label for="3-device-1" class="checkbox-label"><div class="checkmark"></div>Маршрутки</label></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section id="table-area" class="table">
|
||||
<h1>Список устройств</h1>
|
||||
<input id="table-search" class="search" type="text" placeholder="Поиск">
|
||||
|
||||
|
||||
<table id="deviceTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input id="device-all" type="checkbox"><label for="device-all"><div class="checkmark"></div></label></th>
|
||||
<th>Группа</th>
|
||||
<th>Номерной знак</th>
|
||||
<th>Серийный номер</th>
|
||||
<th>Номер SIM-карты</th>
|
||||
<th>Кол-во каналов</th>
|
||||
<th>IP-адрес</th>
|
||||
<th>Порт</th>
|
||||
<th><button id="delete-device-all" value="delete-device-all" class="trash"></button></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Сюда будут добавляться строки таблицы -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<div id="count">
|
||||
<!-- Сюда добавится итоговое количество результатов -->
|
||||
</div>
|
||||
<div id="pagination">
|
||||
<!-- Сюда будут добавляться ссылки для переключения между страницами -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<script src="../scripts/table.js"></script>
|
||||
<script src="../scripts/jquery.min.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>
|
||||
|
||||
<script>
|
||||
const checkboxes = document.querySelectorAll('.organisation .checkbox-input');
|
||||
|
||||
checkboxes.forEach((checkbox) => {
|
||||
applyFilterAndSearch();
|
||||
checkbox.addEventListener('change', function() {
|
||||
document.querySelector('#device-all').checked = false;
|
||||
applyFilterAndSearch();
|
||||
const devices = this.parentNode.querySelector('.area-devices');
|
||||
if (this.checked) {
|
||||
devices.style.display = 'block';
|
||||
|
||||
// Активируем дочерние чекбоксы
|
||||
const childCheckboxes = devices.querySelectorAll('.device-filter');
|
||||
childCheckboxes.forEach((childCheckbox) => {
|
||||
childCheckbox.checked = true;
|
||||
applyFilterAndSearch();
|
||||
});
|
||||
} else {
|
||||
devices.style.display = 'none';
|
||||
applyFilterAndSearch();
|
||||
|
||||
// Деактивируем дочерние чекбоксы
|
||||
const childCheckboxes = devices.querySelectorAll('.device-filter');
|
||||
childCheckboxes.forEach((childCheckbox) => {
|
||||
childCheckbox.checked = false;
|
||||
applyFilterAndSearch();
|
||||
});
|
||||
}
|
||||
|
||||
// Деактивируем дочерние чекбоксы, если родительский чекбокс не выбран
|
||||
if (!this.checked) {
|
||||
const childCheckboxes = devices.querySelectorAll('.device-filter');
|
||||
childCheckboxes.forEach((childCheckbox) => {
|
||||
childCheckbox.checked = false;
|
||||
applyFilterAndSearch();
|
||||
});
|
||||
devices.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
var table = document.querySelector('#deviceTable');
|
||||
var tableCheckboxAll = table.querySelector('#device-all');
|
||||
var tableCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]');
|
||||
|
||||
tableCheckboxAll.addEventListener('click', function(event) {
|
||||
table = document.querySelector('#deviceTable');
|
||||
tableCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]');
|
||||
if (tableCheckboxAll.checked) {
|
||||
tableCheckboxes.forEach((tableCheckbox) => {
|
||||
tableCheckbox.checked = true;
|
||||
});
|
||||
} else {
|
||||
tableCheckboxes.forEach((tableCheckbox) => {
|
||||
tableCheckbox.checked = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('#deviceTable').click( function(event) {
|
||||
table = document.querySelector('#deviceTable');
|
||||
tableCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]');
|
||||
|
||||
|
||||
for (var i = 0; i < tableCheckboxes.length; i++) {
|
||||
tableCheckboxes[i].addEventListener('click', function(event) {
|
||||
for (var j = 0; j < tableCheckboxes.length; j++) {
|
||||
if (!tableCheckboxes[j].checked || tableCheckboxes[j].disabled) {
|
||||
tableCheckboxAll.checked = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
tableCheckboxAll.checked = true;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
490
static/templates/devices/newdevice.html
Normal file
490
static/templates/devices/newdevice.html
Normal file
@ -0,0 +1,490 @@
|
||||
<!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, initial-scale=1.0">
|
||||
<title>Устройства</title>
|
||||
<link rel="stylesheet" href="../styles/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Аргус</h1>
|
||||
<h2><span>/</span> Название организации</h2>
|
||||
</header>
|
||||
|
||||
<section class="account-info">
|
||||
<div id="account-main">
|
||||
<img id="person" src="../img/person.svg">
|
||||
<span>Тестовое Имя</span>
|
||||
<img id="down" src="../img/down.svg">
|
||||
<img id="up" src="../img/up.svg">
|
||||
</div>
|
||||
<a href="/login"><div id="account-additional" class="additional">Выйти</div></a>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="navigation">
|
||||
<a href="/">
|
||||
<div><img src="../img/chart.svg">Главная</div>
|
||||
</a>
|
||||
<a href="/devices">
|
||||
<div class="selected"><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>
|
||||
<a href="/">
|
||||
<div><img src="../img/play.svg">Записи</div>
|
||||
</a>
|
||||
<a class="settings" href="/">
|
||||
<div><img src="../img/gear.svg">Настройки</div>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section class="main">
|
||||
<div class="name">
|
||||
<span>Устройства</span>
|
||||
</div>
|
||||
<nav>
|
||||
<a href="/devices">Список устройств</a>
|
||||
<a href="/devices/drivers">Водители</a>
|
||||
<a class="selected" href="/devices/newdevice">Добавить устройство</a>
|
||||
<a href="/devices/newdriver">Добавить водителя</a>
|
||||
|
||||
<a class="update" href="/devices/update">Обновление ПО</a>
|
||||
</nav>
|
||||
<section class="bg">
|
||||
<section class="content">
|
||||
|
||||
<section class="for-new">
|
||||
|
||||
<section class="stages">
|
||||
<input name="newStage" type="radio" value="details" id="stage-details" checked><label for="stage-details">Детали</label>
|
||||
<div class="vertical-line"></div>
|
||||
<input name="newStage" type="radio" value="sim" id="stage-sim"><label for="stage-sim">SIM - Карта</label>
|
||||
<div class="vertical-line"></div>
|
||||
<input name="newStage" type="radio" value="ts" id="stage-ts"><label for="stage-ts">Транспортное средство</label>
|
||||
<div class="vertical-line"></div>
|
||||
<input name="newStage" type="radio" value="equipment" id="stage-equipment"><label for="stage-equipment">Оборудование</label>
|
||||
</section>
|
||||
</section>
|
||||
<section id="add-new-container" class="add-new">
|
||||
|
||||
<form>
|
||||
|
||||
<div id="details" class="new-parameters active">
|
||||
|
||||
<h1>Детали устройства</h1>
|
||||
<h2>Сперва самое необходимое</h2>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<div class="parameters-inputs">
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-plate">Номерной знак<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="plateNumber" type="text" id="parameters-plate" placeholder="Номер номерного знака" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-plateColor">Цвет номерного знака<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<select name="plateColor" id="parameters-plateColor">
|
||||
<option value="blue">Синий</option>
|
||||
<option value="yellow">Жёлтый</option>
|
||||
<option value="white">Белый</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-serial">Серийный номер<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="serialNumber" type="text" id="parameters-serial" placeholder="Серийный номер устройства" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-channels">Количество каналов<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="channelsAmount" type="text" id="parameters-channels" placeholder="Кол-во каналов устройства" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-protocol">Протокол<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<select name="connectionProtocol" id="parameters-protocol">
|
||||
<option value="N9M">N9M</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-ip">IP-адрес<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="IPAddress" type="text" id="parameters-ip" placeholder="IP-адрес сервера" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-group">Группа<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="deviceGroup" type="text" id="parameters-group" placeholder="Название группы" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-port">Порт<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="serverPort" type="text" id="parameters-port" placeholder="Порт сервера" required>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<button id="continue-details" type="button">Продолжить</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="sim" class="new-parameters">
|
||||
|
||||
<h1>Настройки SIM-карты</h1>
|
||||
<h2>Для связи с устройством</h2>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<div class="parameters-inputs">
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-sim">Номер SIM-карты<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="sumNumber" type="text" id="parameters-sim" placeholder="Номер SIM-карты" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-sim-imei">IMEI<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="simIMEI" type="text" id="parameters-sim-imei" placeholder="IMEI SIM-карты" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-sim-imsi">IMSI<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="simIMSI" type="text" id="parameters-sim-imsi" placeholder="IMSI SIM-карты" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-sim-module">Тип сетевого модуля<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<select name="simModule" id="parameters-sim-module">
|
||||
<option value="GPRS">GPRS</option>
|
||||
<option value="CDMA">CDMA</option>
|
||||
<option value="EVDO">EVDO</option>
|
||||
<option value="WCDMA">WCDMA</option>
|
||||
<option value="EDGE">EDGE</option>
|
||||
<option value="TDSCDMA">TDSCDMA</option>
|
||||
<option value="LTE-TDD">LTE-TDD</option>
|
||||
<option value="LTE-FDD">LTE-FDD</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<button id="continue-sim" type="button">Продолжить</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="ts" class="new-parameters">
|
||||
|
||||
<h1>Детали транспортного средства</h1>
|
||||
<h2>Технические характеристики и не только</h2>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<div class="parameters-inputs">
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-trasnsport-type">Тип автомобиля<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<select name="transportType" id="parameters-trasnsport-type" onchange="truncateText(this)">
|
||||
<option value="1">Пассажирский подвижной состав</option>
|
||||
<option value="2">Большой автобус</option>
|
||||
<option value="3">Средний автобус</option>
|
||||
<option value="4">Микроавтобус</option>
|
||||
<option value="5">Лимузин</option>
|
||||
<option value="6">Большой спальный автобус</option>
|
||||
<option value="7">Спальный автобус среднего размера</option>
|
||||
<option value="8">Обычный грузовик</option>
|
||||
<option value="9">Большой обычный грузовик</option>
|
||||
<option value="10">Среднегабаритный обычный грузовик</option>
|
||||
<option value="11">Маленький обычный грузовик</option>
|
||||
<option value="12">Специальная транспортировочная машина</option>
|
||||
<option value="13">Контейнерная тележка</option>
|
||||
<option value="14">Большой транспортировочный автомобиль</option>
|
||||
<option value="15">Изометрический вагон</option>
|
||||
<option value="16">Спецтехника для перевозки грузовых автомобилей</option>
|
||||
<option value="17">Танкер</option>
|
||||
<option value="18">Тягач</option>
|
||||
<option value="19">Прицеп</option>
|
||||
<option value="20">Транспортер</option>
|
||||
<option value="21">Другая спецтехника</option>
|
||||
<option value="22">Автомобиль для перевозки опасных грузов</option>
|
||||
<option value="23">Сельскохозяйственная машина</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-trasnsport-factory">Номер завода<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="transportFactory" type="text" id="parameters-trasnsport-factory" placeholder="Номер завода ТС" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-transport-strength">Несущая способность<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="transportStrength" type="text" id="parameters-transport-strength" placeholder="Несущая способность (тонны)" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-transport-engine">Номер двигателя<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="transportEngine" type="text" id="parameters-transport-engine" placeholder="Номер двигателя ТС" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-transport-stanina">Номер станины<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="transportStanina" type="text" id="parameters-transport-stanina" placeholder="Номер станины ТС" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-trasnsport-fuel">Тип топливного масла<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<select name="transportFuel" id="parameters-trasnsport-fuel">
|
||||
<option value="gasoline">Бензин</option>
|
||||
<option value="diesel">Дизельное топливо</option>
|
||||
<option value="naturalGas">Природный газ</option>
|
||||
<option value="liquefiedGas">Сжиженный газ</option>
|
||||
<option value="electric">Электрическое</option>
|
||||
<option value="other">Прочие</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<div class="parameters-transport-certificate">
|
||||
<label for="parameters-transport-certificate">Свид-ство о дорожной перевозке<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="transportCertificate" type="text" id="parameters-transport-certificate" placeholder="Номер свидетельства" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<div class="pparameters-trasnsport-category">
|
||||
<label for="parameters-trasnsport-category">Техническая категория<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<select name="transportCategory" id="parameters-trasnsport-category">
|
||||
<option value="1">Категория 1</option>
|
||||
<option value="2">Категория 2</option>
|
||||
<option value="3">Категория 3</option>
|
||||
<option value="other">Не достает стандарта</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-transport-expire">Срок действия<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="transportExpire" type="date" id="parameters-transport-expire" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-transport-consumption">Расход топлива на 100 км<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="transportConsumption" type="text" id="parameters-transport-consumption" placeholder="Расход топлива в литрах" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-transport-province">Провинция<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="transportProvince" type="text" id="parameters-transport-province" placeholder="Провинция" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-transport-city">Город<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="transportCity" type="text" id="parameters-transport-city" placeholder="Город" required>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<button id="continue-ts" type="button">Продолжить</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="equipment" class="new-parameters">
|
||||
|
||||
<h1>Информация о оборудовании</h1>
|
||||
<h2>Технические моменты</h2>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<div class="parameters-inputs">
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-equipment-name">Имя устройства<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="equipmentName" type="text" id="parameters-equipment-name" placeholder="Имя пользовательского устройства" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-equipment-password">Пароль устройства<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="equipmentPassword" type="text" id="parameters-equipment-password" placeholder="Пароль устройства" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-equipment-number">Номер партии<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="equipmentNumber" type="text" id="parameters-equipment-number" placeholder="Заводской номер партии" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-equipment-released">Дата выпуска<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="equipmentReleased" type="date" id="parameters-equipment-released" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-device-installer">Установщик<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="equipmentInstaller" type="text" id="parameters-device-installer" placeholder="ФИО установщика" required>
|
||||
</div>
|
||||
<div class="parameters-input">
|
||||
<label for="parameters-equipment-installed">Дата монтажа<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="equipmentInstalled" type="date" id="parameters-equipment-installed" required>
|
||||
</div>
|
||||
|
||||
<label for="parameters-device-description">Внешнее описание<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="equipmentDescription" type="text" id="parameters-device-description" placeholder="Внешнее описание " required>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<button>Сохранить</button>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<script src="../scripts/jquery.min.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>
|
||||
|
||||
<script>
|
||||
|
||||
$("#continue-details").click(function () {
|
||||
document.getElementById("stage-sim").checked = true;
|
||||
});
|
||||
$("#continue-sim").click(function () {
|
||||
document.getElementById("stage-ts").checked = true;
|
||||
});
|
||||
$("#continue-ts").click(function () {
|
||||
document.getElementById("stage-equipment").checked = true;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
const container = document.getElementById('new-parameters');
|
||||
const content1 = document.getElementById('details');
|
||||
const content2 = document.getElementById('sim');
|
||||
const content3 = document.getElementById('ts');
|
||||
const content4 = document.getElementById('equipment');
|
||||
const btn1 = document.getElementById('continue-details');
|
||||
const btn2 = document.getElementById('continue-sim');
|
||||
const btn3 = document.getElementById('continue-ts');
|
||||
const radioButtons = document.querySelectorAll('input[type="radio"][name="newStage"]');
|
||||
const duration = 100;
|
||||
|
||||
let activeContent = content1;
|
||||
|
||||
function switchContent(newContent) {
|
||||
fadeOut(activeContent, () => {
|
||||
fadeIn(newContent);
|
||||
activeContent = newContent;
|
||||
});
|
||||
}
|
||||
|
||||
function fadeIn(element) {
|
||||
element.style.opacity = 0;
|
||||
element.style.display = 'block';
|
||||
let start = performance.now();
|
||||
|
||||
function animate(time) {
|
||||
let timeFraction = (time - start) / duration;
|
||||
if (timeFraction > 1) {
|
||||
element.style.opacity = 1;
|
||||
} else {
|
||||
element.style.opacity = timeFraction;
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
function fadeOut(element, callback) {
|
||||
element.style.opacity = 1;
|
||||
let start = performance.now();
|
||||
|
||||
function animate(time) {
|
||||
let timeFraction = (time - start) / duration;
|
||||
if (timeFraction > 1) {
|
||||
element.style.opacity = 0;
|
||||
element.style.display = 'none';
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
element.style.opacity = 1 - timeFraction;
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
btn1.addEventListener('click', () => {
|
||||
if (activeContent === content1) {
|
||||
switchContent(content2);
|
||||
} else {
|
||||
switchContent(content1);
|
||||
}
|
||||
});
|
||||
|
||||
btn2.addEventListener('click', () => {
|
||||
if (activeContent === content2) {
|
||||
switchContent(content3);
|
||||
} else {
|
||||
switchContent(content2);
|
||||
}
|
||||
});
|
||||
|
||||
btn3.addEventListener('click', () => {
|
||||
if (activeContent === content3) {
|
||||
switchContent(content4);
|
||||
} else {
|
||||
switchContent(content3);
|
||||
}
|
||||
});
|
||||
|
||||
for (let radioButton of radioButtons) {
|
||||
radioButton.addEventListener('change', () => {
|
||||
if (radioButton.value === 'details') {
|
||||
switchContent(content1);
|
||||
} else if (radioButton.value === 'sim') {
|
||||
switchContent(content2);
|
||||
} else if (radioButton.value === 'ts') {
|
||||
switchContent(content3);
|
||||
} else if (radioButton.value === 'equipment') {
|
||||
switchContent(content4);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function truncateText(select) {
|
||||
var maxLength = 30;
|
||||
var option = select.options[select.selectedIndex];
|
||||
if (option.text.length > maxLength) {
|
||||
option.text = option.text.substring(0, maxLength) + '...';
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
295
static/templates/devices/newdriver.html
Normal file
295
static/templates/devices/newdriver.html
Normal file
@ -0,0 +1,295 @@
|
||||
<!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, initial-scale=1.0">
|
||||
<title>Устройства</title>
|
||||
<link rel="stylesheet" href="../styles/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Аргус</h1>
|
||||
<h2><span>/</span> Название организации</h2>
|
||||
</header>
|
||||
|
||||
<section class="account-info">
|
||||
<div id="account-main">
|
||||
<img id="person" src="../img/person.svg">
|
||||
<span>Тестовое Имя</span>
|
||||
<img id="down" src="../img/down.svg">
|
||||
<img id="up" src="../img/up.svg">
|
||||
</div>
|
||||
<a href="/login"><div id="account-additional" class="additional">Выйти</div></a>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="navigation">
|
||||
<a href="/">
|
||||
<div><img src="../img/chart.svg">Главная</div>
|
||||
</a>
|
||||
<a href="/devices">
|
||||
<div class="selected"><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>
|
||||
<a href="/">
|
||||
<div><img src="../img/play.svg">Записи</div>
|
||||
</a>
|
||||
<a class="settings" href="/">
|
||||
<div><img src="../img/gear.svg">Настройки</div>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section class="main">
|
||||
<div class="name">
|
||||
<span>Устройства</span>
|
||||
</div>
|
||||
<nav>
|
||||
<a href="/devices">Список устройств</a>
|
||||
<a href="/devices/drivers">Водители</a>
|
||||
<a href="/devices/newdevice">Добавить устройство</a>
|
||||
<a class="selected" href="/devices/newdriver">Добавить водителя</a>
|
||||
|
||||
<a class="update" href="/devices/update">Обновление ПО</a>
|
||||
</nav>
|
||||
<section class="bg">
|
||||
<section class="content">
|
||||
|
||||
<section class="for-new">
|
||||
|
||||
<section class="stages">
|
||||
<input name="newStage" type="radio" value="main" id="stage-main" checked><label for="stage-main">Основная информация</label>
|
||||
<div class="vertical-line"></div>
|
||||
<input name="newStage" type="radio" value="details" id="stage-details"><label for="stage-details">Детали</label>
|
||||
</section>
|
||||
</section>
|
||||
<section id="add-new-container" class="add-new">
|
||||
|
||||
<form>
|
||||
|
||||
<div id="main" class="new-parameters drivers active">
|
||||
|
||||
<h1>Основная информация</h1>
|
||||
<h2>Сперва самое необходимое</h2>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<label for="parameters-plate">Фотография<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<div id="upload-photo" class="upload-input">
|
||||
<img src="../img/upload.svg">
|
||||
<span class="upload-text">Загрузить фотографию водителя</span>
|
||||
<span class="upload-description">PNG, JPG (макс 20 мб)</span>
|
||||
</div>
|
||||
<input id="input-upload-photo" type="file" name="upload-file" style="display: none;">
|
||||
|
||||
<div class="parameters-inputs">
|
||||
<label for="driver-name">Имя<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverName" type="text" id="driver-name" placeholder="Имя водителя" required>
|
||||
|
||||
<label for="driver-surname">Фамилия<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverSurname" type="text" id="driver-surname" placeholder="Фамилия водителя" required>
|
||||
|
||||
<label for="driver-card">Карта водителя<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverCard" type="text" id="driver-card" placeholder="Номер карты водителя" required>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<button id="continue-main" type="button">Продолжить</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="details" class="new-parameters drivers">
|
||||
|
||||
<h1>Детальная информация</h1>
|
||||
<h2>Для удобства в идентификации</h2>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<div class="parameters-inputs">
|
||||
|
||||
<label for="driver-gender">Пол<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<select name="driverGender" id="driver-gender">
|
||||
<option value="male">Мужской</option>
|
||||
<option value="female">Женский</option>
|
||||
</select>
|
||||
|
||||
<label for="driver-license">Водительское удостоверение<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverLicense" type="text" id="driver-license" placeholder="Номер водительского удостоверения" required>
|
||||
|
||||
<label for="driver-passport">Удостоверение личности<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverPassport" type="text" id="driverPassport" placeholder="Номер удостоверения личности" required>
|
||||
|
||||
<label for="driver-phone">Мобильный телефон<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverPhone" type="text" id="driver-phone" placeholder="Номер мобильного телефона" required>
|
||||
|
||||
<label for="driver-description">Примечание<span style="color: rgba(255, 69, 58, 1);">*</span></label>
|
||||
<input name="driverDescription" type="text" id="driver-description" placeholder="Примечание" required>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="horizontal-line"></div>
|
||||
|
||||
<button>Сохранить</button>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<script src="../scripts/jquery.min.js"></script>
|
||||
|
||||
<script>
|
||||
const fileSelect = document.getElementById("upload-photo");
|
||||
const fileElem = document.getElementById("input-upload-photo");
|
||||
|
||||
fileSelect.addEventListener(
|
||||
"click",
|
||||
(e) => {
|
||||
if (fileElem) {
|
||||
fileElem.click();
|
||||
}
|
||||
},
|
||||
false
|
||||
);
|
||||
</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>
|
||||
|
||||
<script>
|
||||
|
||||
$("#continue-main").click(function () {
|
||||
document.getElementById("stage-details").checked = true;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
const container = document.getElementById('new-parameters');
|
||||
const content1 = document.getElementById('main');
|
||||
const content2 = document.getElementById('details');
|
||||
const btn1 = document.getElementById('continue-main');
|
||||
const radioButtons = document.querySelectorAll('input[type="radio"][name="newStage"]');
|
||||
const duration = 100;
|
||||
|
||||
let activeContent = content1;
|
||||
|
||||
function switchContent(newContent) {
|
||||
fadeOut(activeContent, () => {
|
||||
fadeIn(newContent);
|
||||
activeContent = newContent;
|
||||
});
|
||||
}
|
||||
|
||||
function fadeIn(element) {
|
||||
element.style.opacity = 0;
|
||||
element.style.display = 'block';
|
||||
let start = performance.now();
|
||||
|
||||
function animate(time) {
|
||||
let timeFraction = (time - start) / duration;
|
||||
if (timeFraction > 1) {
|
||||
element.style.opacity = 1;
|
||||
} else {
|
||||
element.style.opacity = timeFraction;
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
function fadeOut(element, callback) {
|
||||
element.style.opacity = 1;
|
||||
let start = performance.now();
|
||||
|
||||
function animate(time) {
|
||||
let timeFraction = (time - start) / duration;
|
||||
if (timeFraction > 1) {
|
||||
element.style.opacity = 0;
|
||||
element.style.display = 'none';
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
element.style.opacity = 1 - timeFraction;
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
btn1.addEventListener('click', () => {
|
||||
if (activeContent === content1) {
|
||||
switchContent(content2);
|
||||
} else {
|
||||
switchContent(content1);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
for (let radioButton of radioButtons) {
|
||||
radioButton.addEventListener('change', () => {
|
||||
if (radioButton.value === 'main') {
|
||||
switchContent(content1);
|
||||
} else if (radioButton.value === 'details') {
|
||||
switchContent(content2);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function truncateText(select) {
|
||||
var maxLength = 30;
|
||||
var option = select.options[select.selectedIndex];
|
||||
if (option.text.length > maxLength) {
|
||||
option.text = option.text.substring(0, maxLength) + '...';
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user