passesFrontend/static/templates/account/applications.html

517 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../styles/main.css">
<script src="../scripts/jquery.min.js"></script>
<script src="../scripts/helpPopup.js"></script>
<title>Управление пользователями</title>
<script>
const API_SERVER = "{{API_SERVER}}";
let applications = [
{{#each Applications}}
{
id: {{this.id}},
status: "{{this.Статус}}",
type: "{{this.Вид_заявки}}",
worker: "{{this.Работник}}",
date: "{{this.Датааявки}}",
finaldate: "{{this.Дата_решения}}",
legal: "{{this.Организация}}",
car: "{{this.Авто_госомер}}",
},
{{/each}}
];
</script>
<script src="../scripts/applications-table.js"></script>
</head>
<body>
<header>
<a href="/account"><h1>Система управления заявками на пропуска</h1></a>
<nav>
<div class="dropdown">
<a class="help-button" onclick="toggleDropdown('dropdownHelp-1')">Техническая поддержка</a>
<div id="dropdownHelp-1" class="dropdown-help">
<a href="tel:83477527706">8 (34775) 2-77-06</a>
<a href="tel:89174023516">8 (917) 402-35-16</a>
</div>
</div>
<div class="dropdown">
<a class="help-button" onclick="toggleDropdown('dropdownHelp-2')">Инструкции</a>
<div id="dropdownHelp-2" class="dropdown-help dropdown-manual">
<a href="/docs/manual.pdf" target="_blank">Текст</a>
<a href="https://drive.google.com/file/d/1CxrAgr2brQclZqtbbreSUU9tN-jsNTwf/view?usp=sharing" target="_blank">Видео</a>
</div>
</div>
<a href="/account">Профиль</a>
{{#if (eq Role 'legal')}}
<span>{{User.Наименование}}</span>
{{else}}
<span>{{User.Фамилия}} {{User.Имя}} {{User.Отчество}}</span>
{{/if}}
<a class="exit-button" href="/logout"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" fill="none" viewBox="0 0 20 16">
<path fill="#6B7A99" d="m4.016 7.13 2.608-2.606-1.226-1.226L.696 8l4.702 4.702 1.226-1.226L4.016 8.87h4.858V7.131H4.016ZM8.874.179v6.953h5.215V8.87H8.874v6.953h10.43V.178H8.873Z"/>
</svg>
</a>
</nav>
</header>
<nav class="underheader-buttons">
<button onclick="location.href='/account/newform'" class="blue">Создать заявку</button>
<input id="table-search" type="text" placeholder="Поиск...">
<button onclick="requestUpdate();">Найти</button>
<button onclick="requestUpdate();"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" fill="none" viewBox="0 0 16 20">
<path fill="#6B7A99" d="M8 4V0L3 5l5 5V6c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H0c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8Z"/>
</svg>
</button>
</nav>
<div id="applicationsWrapper" class="table-wrapper">
<table id="applicationsTable">
<thead>
<tr>
<th>ID</th>
<th>Статус</th>
<th>Вид</th>
<th>ФИО</th>
<th>Организация</th>
<th>Дата пропуска</th>
<th>Дата решения</th>
<th>Автомобиль</th>
</tr>
</thead>
<tbody>
<!-- Сюда будут добавляться строки таблицы -->
</tbody>
</table>
</div>
<div id="pagination">
<div id="left-slider" onclick="decrementPage()">
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="19" fill="none" viewBox="0 0 11 19">
<path fill="#000" fill-opacity=".75" d="M0 9.495c0 .273.101.514.315.722l8.92 8.477a.981.981 0 0 0 .73.295c.585 0 1.035-.427 1.035-.995 0-.285-.124-.525-.304-.711L2.508 9.495l8.188-7.789c.18-.186.304-.437.304-.71C11 .425 10.55 0 9.965 0c-.292 0-.54.098-.73.284L.314 8.773A.955.955 0 0 0 0 9.495Z"/>
</svg>
</div>
<div id="page-number">1</div>
<div id="right-slider" onclick="incrementPage()">
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="19" fill="none" viewBox="0 0 11 19">
<path fill="#000" fill-opacity=".75" d="M11 9.495a.967.967 0 0 0-.326-.722L1.766.284A1.062 1.062 0 0 0 1.024 0C.45 0 0 .427 0 .995c0 .274.112.525.292.711l8.189 7.789-8.189 7.788c-.18.186-.292.426-.292.71 0 .57.45.996 1.024.996.292 0 .54-.098.742-.295l8.908-8.477c.213-.208.326-.449.326-.722Z"/>
</svg>
</div>
</div>
<form id="editApplicationForm">
<input type="text" id="editapplicationid-input" hidden>
<input type="text" id="editapplicationtype-input" hidden>
<div id="editapplication-form-popup-bg" class="form-popup-bg not-main" >
<div class="form-container">
<div id="btnCloseForm" class="close-button"><svg onclick="closeForm();" id="btnCloseFormSvg" xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
<path fill="#0050CF" fill-rule="evenodd" d="M14 1.41 12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7 14 1.41Z" clip-rule="evenodd"/>
</svg>
</div>
<h1>Заявка на <span id="editApplication"></span> пропуск</h1>
<br>
<div class="input-area">
<label for="editauthor-input">Автор</label>
<input type="text" id="editauthor-input" readonly>
</div>
<div class="input-area">
<label for="editstatus-input">Статус</label>
<select id="editstatus-input">
<option value="Новая">Новая</option>
<option value="Утверждено">Утверждено</option>
<option value="Отказ">Отказ</option>
</select>
</div>
<div class="input-area">
<label for="editname-input">ФИО*</label>
<input type="text" id="editname-input" required>
</div>
<div class="input-area">
<label for="editlegal-input">Организация</label>
<input type="text" id="editlegal-input">
</div>
<div class="input-area">
<label for="editdate-input">Дата выдачи*</label>
<input type="date" id="editdate-input" required>
</div>
<div class="input-area">
<label for="editdate-input">Действие до</label>
<input type="date" id="edittodate-input">
</div>
<div class="input-area">
<label for="editfinaldate-input">Дата решения</label>
<input type="date" id="editfinaldate-input">
</div>
<div class="input-area">
<label for="editdecision-input">Решение</label>
<input type="text" id="editdecision-input">
</div>
<div style="display: none;" class="inputs" id="car-inputs">
<ul id="carlist"></ul>
<input type="text" id="editcarnumber-input" hidden>
<input type="text" id="editcarbrand-input" hidden>
<input type="text" id="editcarmodel-input" hidden>
<input type="text" id="editcarcolor-input" hidden>
</div>
<div style="display: none;" class="inputs" id="tmc-inputs">
<ul id="tmclist"></ul>
<input type="text" id="edittmcname-input" hidden>
<input type="text" id="edittmcunit-input" hidden>
<input type="text" id="edittmcquantity-input" hidden>
</div>
<div class="input-area">
<label for="editadditional-input">Дополнительно</label>
<textarea id="editadditional-input"></textarea>
</div>
<button type="button" class="bright" id="makePass-button">Создать пропуск из заявки</button>
<div class="user-buttons" style="display: flex; justify-content: space-between;">
<button style="width: 49.5%;" type="submit" id="editApplication-button">Сохранить изменения</button>
<button style="width: 49.5%;" type="button" id="deleteApplication-button" class="delete">Удалить заявку</button>
</div>
</div>
</div>
</form>
<script>
var pageNumberInput = document.getElementById('page-number');
var totalMax = Math.ceil({{Total}} / 15);
function decrementPage() {
var currentPage = parseInt(pageNumberInput.textContent, 10);
if (currentPage > 1) {
pageNumberInput.textContent = currentPage - 1;
requestUpdate();
} else {
requestUpdate();
}
}
function incrementPage() {
var currentPage = parseInt(pageNumberInput.textContent, 10);
if (currentPage === totalMax || currentPage > totalMax) {
pageNumberInput.textContent = totalMax;
requestUpdate();
}
if (currentPage < totalMax) {
pageNumberInput.textContent = currentPage + 1;
requestUpdate();
}
}
</script>
<script>
function closeForm() {
$('.form-popup-bg').removeClass('is-visible');
}
$(document).ready(function($) {
$('#addUser').on('click', function(event) {
event.preventDefault();
$('#adduser-form-popup-bg').addClass('is-visible');
});
$('#editapplication-form-popup-bg').on('click', function(event) {
if ($(event.target).is('#editapplication-form-popup-bg') || $(event.target).is('#btnCloseForm')) {
event.preventDefault();
$(this).removeClass('is-visible');
}
});
});
document.addEventListener("DOMContentLoaded", function() {
const editApplicationForm = document.getElementById("editApplicationForm");
editApplicationForm.addEventListener("submit", async function(event) {
event.preventDefault();
$('#editApplication-button').addClass('inactive');
const id = $('#editapplicationid-input').val();
const status = $('#editstatus-input').val();
const name = $('#editname-input').val();
const legal = $('#editlegal-input').val();
const date = $('#editdate-input').val();
const todate = $('#edittodate-input').val();
const finaldate = $('#editfinaldate-input').val();
const decision = $('#editdecision-input').val();
const carnumber = $('#editcarnumber-input').val();
const carbrand = $('#editcarbrand-input').val();
const carmodel = $('#editcarmodel-input').val();
const carcolor = $('#editcarcolor-input').val();
const tmcname = $('#edittmcname-input').val();
const tmcunit = $('#edittmcunit-input').val();
const tmcquantity = $('#edittmcquantity-input').val();
const additional = $('#editadditional-input').val();
// Отправляем запрос на сервер для авторизации
const response = await fetch("{{API_SERVER}}/forms/update", {
method: "PUT",
headers: {
"Content-Type": "application/json",
Authorization: getCookie("token"),
},
body: JSON.stringify({ id, status, name, legal, date, todate, finaldate, decision, carnumber, carbrand, carmodel, carcolor, tmcname, tmcunit, tmcquantity, additional })
});
if (response.status === 201) {
location.reload();
$('#editApplication-button').removeClass('inactive');
} else {
alert("Ошибка авторизации");
$('#editApplication-button').removeClass('inactive');
}
});
});
function openApplication(id) {
const requestOptions = {
method: "GET",
headers: {
Authorization: getCookie("token"),
},
};
fetch(API_SERVER + "/forms/application?id=" + id, requestOptions)
.then((response) => {
if (response.ok) {
$("#editapplication-form-popup-bg").addClass("is-visible");
return response.json();
} else {
console.error("Ошибка при отправке POST запроса.");
return "Ошибка при отправке запроса.";
}
})
.then((data) => {
$("#editapplicationid-input").val(id);
$("#editApplication").html(data.data.Видаявки);
$("#deleteApplication-button").attr("onclick", `deleteApplication(${id})`);
$("#makePass-button").attr("onclick", `makePass(${id})`);
if (data.data.Видаявки === "Временный" || data.data.Видаявки === "Разовый") {
$("#car-inputs").css("display", "none");
$("#tmc-inputs").css("display", "none");
} else if (data.data.Видаявки === "Автомобильный") {
$("#car-inputs").css("display", "flex");
$("#tmc-inputs").css("display", "none");
} else if (data.data.Видаявки === "ТМЦ") {
$("#car-inputs").css("display", "none");
$("#tmc-inputs").css("display", "flex");
}
$("#editauthor-input").val(data.data.Автор);
$("#editname-input").val(data.data.Работник);
$("#editlegal-input").val(data.data.Организация);
$("#editstatus-input").val(data.data.Статус);
$("#editdecision-input").val(data.data.Решение);
$("#editcarnumber-input").val(data.data.Авто_госомер);
$("#editcarbrand-input").val(data.data.Автоарка);
$("#editcarmodel-input").val(data.data.Автоодель);
$("#editcarcolor-input").val(data.data.Авто_цвет);
$("#edittmcname-input").val(data.data.Наименование);
$("#edittmcunit-input").val(data.data.Единица_измерения);
$("#edittmcquantity-input").val(data.data.Количество);
if (data.data.Видаявки === "ТМЦ") {
var tmcnames = JSON.parse(data.data.Наименование);
var tmcunits = JSON.parse(data.data.Единица_измерения);
var tmcquantitys = JSON.parse(data.data.Количество);
var tmclist = "";
for (var i = 0; i < tmcnames.length; i++) {
tmclist += "<li><span style='font-weight: 600;'>Позиция " + (i + 1) + ":</span> <br>" +
"Наименование ТМЦ - " + tmcnames[i] + "<br>" +
"Единица измерения - " + tmcunits[i] + "<br>" +
"Количество - " + tmcquantitys[i] +
"</li>";
}
$("#tmclist").html(tmclist);
}
if (data.data.Видаявки === "Автомобильный") {
var carnumbers = JSON.parse(data.data.Авто_госомер);
var carbrands = JSON.parse(data.data.Автоарка);
var carmodels = JSON.parse(data.data.Автоодель);
var carcolors = JSON.parse(data.data.Авто_цвет);
var carlist = "";
for (var i = 0; i < carnumbers.length; i++) {
carlist += "<li><span style='font-weight: 600;'>Авто " + (i + 1) + ":</span> <br>" +
"Номер - " + carnumbers[i] + "<br>" +
"Марка - " + carbrands[i] + "<br>" +
"Модель - " + carmodels[i] + "<br>" +
"Цвет - " + carcolors[i] +
"</li>";
}
$("#carlist").html(carlist);
}
$("#editadditional-input").val(data.data.Дополнение);
$("#editapplicationtype-input").val(data.data.Видаявки);
function formatDateForDateInput(dateString, inputId) {
const date = new Date(dateString);
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;
document.getElementById(inputId).value = formattedDate;
}
formatDateForDateInput(data.data.Датааявки, "editdate-input");
if (data.data.Дата_решения) {
formatDateForDateInput(data.data.Дата_решения, "editfinaldate-input");
} else {
$("#editfinaldate-input").val("");
}
if (data.data.Действиео) {
formatDateForDateInput(data.data.Действиео, "edittodate-input");
} else {
$("#edittodate-input").val("");
}
})
.catch((error) => {
console.error("Ошибка при отправке запроса:", error);
});
}
async function makePass(id) {
const requestOptions = {
method: "POST",
headers: {
Authorization: getCookie("token"),
},
};
$('#makePass-button').addClass('inactive');
const status = $('#editstatus-input').val();
const name = $('#editname-input').val();
const legal = $('#editlegal-input').val();
const date = $('#editdate-input').val();
const todate = $('#edittodate-input').val();
const finaldate = $('#editfinaldate-input').val();
const decision = $('#editdecision-input').val();
const carnumber = $('#editcarnumber-input').val();
const carbrand = $('#editcarbrand-input').val();
const carmodel = $('#editcarmodel-input').val();
const carcolor = $('#editcarcolor-input').val();
const tmcname = $('#edittmcname-input').val();
const tmcunit = $('#edittmcunit-input').val();
const tmcquantity = $('#edittmcquantity-input').val();
const additional = $('#editadditional-input').val();
const type = $('#editapplicationtype-input').val();
if (!todate || !date || !name ) {
alert("Пожалуйста, заполните все поля.")
$('#makePass-button').removeClass('inactive');
return;
}
// Отправляем запрос на сервер для авторизации
const response = await fetch("{{API_SERVER}}/forms/makepass", {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: getCookie("token"),
},
body: JSON.stringify({ id, status, name, legal, date, todate, finaldate, decision, carnumber, carbrand, carmodel, carcolor, tmcname, tmcunit, tmcquantity, additional, type })
});
if (response.status === 201) {
alert("Заявка успешно преобразована в пропуск!")
location.reload();
$('#makePass-button').removeClass('inactive');
} else {
alert("Ошибка авторизации");
$('#makePass-button').removeClass('inactive');
}
}
function deleteApplication(id) {
const requestOptions = {
method: "DELETE",
headers: {
Authorization: getCookie("token"),
},
};
fetch(API_SERVER + "/forms/delete?id=" + id, requestOptions)
.then((response) => {
if (response.ok) {
$("#editapplication-form-popup-bg").removeClass("is-visible");
location.reload();
return response.json();
} else {
console.error("Ошибка при отправке POST запроса.");
return "Ошибка при отправке запроса.";
}
})
.catch((error) => {
console.error("Ошибка при отправке запроса:", error);
});
}
</script>
<script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.js"></script>
<script>
$(document).ready(function(){
$('#phone-input').inputmask({"mask": "+7 (999) 999-9999"});
$('#contactphone-input').inputmask({"mask": "+7 (999) 999-9999"});
$('#editphone-input').inputmask({"mask": "+7 (999) 999-9999"});
$('#editcontactphone-input').inputmask({"mask": "+7 (999) 999-9999"});
});
</script>
</body>
</html>