376 lines
18 KiB
HTML
376 lines
18 KiB
HTML
<!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>
|
||
<style>
|
||
body {
|
||
background-color: #EEEFF5;
|
||
}
|
||
</style>
|
||
</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>
|
||
{{#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>
|
||
|
||
<form class="main-form" id="pass-form">
|
||
<h1>Новая заявка на пропуск</h1>
|
||
<div class="radio-inputs">
|
||
<label class="radio">
|
||
<input autocomplete="off" type="radio" id="onetime-radio" name="form-type" value="onetime" checked>
|
||
<span class="name">Разовый</span>
|
||
</label>
|
||
<label class="radio">
|
||
<input autocomplete="off" type="radio" id="temp-radio" name="form-type" value="temp">
|
||
<span class="name">Временный</span>
|
||
</label>
|
||
<label class="radio">
|
||
<input autocomplete="off" type="radio" id="car-radio" name="form-type" value="car">
|
||
<span class="name">Автомобильный</span>
|
||
</label>
|
||
<label class="radio">
|
||
<input autocomplete="off" type="radio" id="tmc-radio" name="form-type" value="tmc">
|
||
<span class="name">Ввоз-Вывоз ТМЦ</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="input-area" id="fullname-container">
|
||
<label>ФИО*</label>
|
||
<div class="fullname-input-group">
|
||
<input type="text" class="fullname-input" value="{{User.Фамилия}} {{User.Имя}} {{User.Отчество}}" required>
|
||
<button type="button" class="add-fullname">+</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="input-area">
|
||
<label for="legalname-input">Наименование организации</label>
|
||
<input type="text" id="legalname-input" value="{{User.Наименование}}">
|
||
</div>
|
||
<div class="input-area">
|
||
<label for="date-input">Дата посещения*</label>
|
||
<input type="date" id="date-input" required>
|
||
</div>
|
||
|
||
<div style="display: none;" class="inputs" id="car-inputs">
|
||
<div class="car-input-group" data-index="1">
|
||
<label>Номер автомобиля</label>
|
||
<input type="text" class="carnumber-input">
|
||
<label>Марка автомобиля</label>
|
||
<input type="text" class="carbrand-input">
|
||
<label>Модель автомобиля</label>
|
||
<input type="text" class="carmodel-input">
|
||
<label>Цвет автомобиля</label>
|
||
<input type="text" class="carcolor-input">
|
||
<button type="button" class="add-car">Добавить ещё автомобиль</button>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div style="display: none;" class="inputs" id="tmc-inputs">
|
||
|
||
<div class="tmc-input-group" data-index="1">
|
||
<label>Наименование ТМЦ</label>
|
||
<input type="text" class="tmcname-input">
|
||
<label>Единица измерения</label>
|
||
<input type="text" class="tmcunit-input">
|
||
<label>Количество</label>
|
||
<input type="text" class="tmcquantity-input">
|
||
<button type="button" class="add-tmc">Добавить ещё ТМЦ</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="input-area">
|
||
<label for="text-input">Текст заявки</label>
|
||
<textarea id="text-input" cols="30" rows="10"></textarea>
|
||
</div>
|
||
<div class="form-info">
|
||
<p>В тексте формы указывайе всю информацию, которая может быть полезна при оформлении пропусков. Например, ФИО или номер автомобиля.</p>
|
||
</div>
|
||
<button style="margin-top: 15px;" type="submit" id="send-button">Оставить заявку</button>
|
||
</form>
|
||
|
||
<script>
|
||
|
||
function getCookie(name) {
|
||
var cookies = document.cookie.split(";");
|
||
for (var i = 0; i < cookies.length; i++) {
|
||
var cookie = cookies[i].trim();
|
||
if (cookie.startsWith(name + "=")) {
|
||
return cookie.substring(name.length + 1);
|
||
}
|
||
}
|
||
return null;
|
||
}
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
const passForm = document.getElementById("pass-form");
|
||
|
||
const carInputsContainer = document.getElementById("car-inputs");
|
||
|
||
let carIndex = 1;
|
||
|
||
function addCarInput() {
|
||
carIndex++;
|
||
const inputGroup = document.createElement("div");
|
||
inputGroup.classList.add("car-input-group");
|
||
inputGroup.setAttribute("data-index", carIndex);
|
||
inputGroup.innerHTML = `
|
||
<label>Номер автомобиля</label>
|
||
<input type="text" class="carnumber-input" required>
|
||
<label>Марка автомобиля</label>
|
||
<input type="text" class="carbrand-input" required>
|
||
<label>Модель автомобиля</label>
|
||
<input type="text" class="carmodel-input" required>
|
||
<label>Цвет автомобиля</label>
|
||
<input type="text" class="carcolor-input" required>
|
||
<button type="button" class="remove-car bright">Удалить этот автомобиль</button>
|
||
`;
|
||
carInputsContainer.appendChild(inputGroup);
|
||
|
||
inputGroup.querySelector(".remove-car").addEventListener("click", function() {
|
||
inputGroup.remove();
|
||
});
|
||
}
|
||
|
||
carInputsContainer.addEventListener("click", function(e) {
|
||
if (e.target.classList.contains("add-car")) {
|
||
addCarInput();
|
||
}
|
||
});
|
||
|
||
const tmcInputsContainer = document.getElementById("tmc-inputs");
|
||
|
||
let tmcIndex = 1;
|
||
|
||
function addTmcInput() {
|
||
tmcIndex++;
|
||
const inputGroup = document.createElement("div");
|
||
inputGroup.classList.add("tmc-input-group");
|
||
inputGroup.setAttribute("data-index", tmcIndex);
|
||
inputGroup.innerHTML = `
|
||
<label>Наименование ТМЦ</label>
|
||
<input type="text" class="tmcname-input" required>
|
||
<label>Единица измерения</label>
|
||
<input type="text" class="tmcunit-input" required>
|
||
<label>Количество</label>
|
||
<input type="text" class="tmcquantity-input" required>
|
||
<button type="button" class="remove-tmc bright">Удалить это ТМЦ</button>
|
||
`;
|
||
tmcInputsContainer.appendChild(inputGroup);
|
||
|
||
inputGroup.querySelector(".remove-tmc").addEventListener("click", function() {
|
||
inputGroup.remove();
|
||
});
|
||
}
|
||
|
||
tmcInputsContainer.addEventListener("click", function(e) {
|
||
if (e.target.classList.contains("add-tmc")) {
|
||
addTmcInput();
|
||
}
|
||
});
|
||
|
||
const fullnameContainer = document.getElementById("fullname-container");
|
||
|
||
function addFullnameInput() {
|
||
const inputGroup = document.createElement("div");
|
||
inputGroup.classList.add("fullname-input-group");
|
||
inputGroup.innerHTML = `
|
||
<input type="text" class="fullname-input" required>
|
||
<button type="button" class="remove-fullname bright">-</button>
|
||
`;
|
||
inputGroup.querySelector(".remove-fullname").addEventListener("click", function() {
|
||
inputGroup.remove();
|
||
});
|
||
fullnameContainer.appendChild(inputGroup);
|
||
}
|
||
|
||
fullnameContainer.addEventListener("click", function(e) {
|
||
if (e.target.classList.contains("add-fullname")) {
|
||
addFullnameInput();
|
||
}
|
||
});
|
||
|
||
passForm.addEventListener("submit", async function(event) {
|
||
event.preventDefault();
|
||
$('#send-button').addClass('inactive');
|
||
|
||
const formrole = '{{Role}}'
|
||
|
||
const passtext = $('#text-input').val();
|
||
|
||
const fullnames = Array.from(document.querySelectorAll(".fullname-input")).map(input => input.value);
|
||
const legalname = $('#legalname-input').val();
|
||
const date = $('#date-input').val();
|
||
|
||
var type;
|
||
|
||
if (document.getElementById('temp-radio').checked) {
|
||
type = "Временный";
|
||
// Отправляем запрос на сервер для авторизации
|
||
const response = await fetch("{{API_SERVER}}/passes/newform", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
Authorization: getCookie("token"),
|
||
},
|
||
body: JSON.stringify({ formrole, passtext, type, fullnames, legalname, date })
|
||
});
|
||
if (response.status === 201) {
|
||
const data = await response.json();
|
||
alert("Ваша заявка принята к рассмотрению!")
|
||
|
||
window.location.href = "/";
|
||
$('#send-button').removeClass('inactive');
|
||
} else {
|
||
alert("Произошла ошибка при попытке отправить заявку");
|
||
$('#send-button').removeClass('inactive');
|
||
}
|
||
}
|
||
if (document.getElementById('onetime-radio').checked) {
|
||
type = "Разовый";
|
||
// Отправляем запрос на сервер для авторизации
|
||
const response = await fetch("{{API_SERVER}}/passes/newform", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
Authorization: getCookie("token"),
|
||
},
|
||
body: JSON.stringify({ formrole, passtext, type, fullnames, legalname, date })
|
||
});
|
||
if (response.status === 201) {
|
||
const data = await response.json();
|
||
alert("Ваша заявка принята к рассмотрению!")
|
||
|
||
window.location.href = "/";
|
||
$('#send-button').removeClass('inactive');
|
||
} else {
|
||
alert("Произошла ошибка при попытке отправить заявку");
|
||
$('#send-button').removeClass('inactive');
|
||
}
|
||
}
|
||
if (document.getElementById('car-radio').checked) {
|
||
type = "Автомобильный";
|
||
|
||
const carnumber = Array.from(document.querySelectorAll(".carnumber-input")).map(input => input.value);
|
||
const carbrand = Array.from(document.querySelectorAll(".carbrand-input")).map(input => input.value);
|
||
const carmodel = Array.from(document.querySelectorAll(".carmodel-input")).map(input => input.value);
|
||
const carcolor = Array.from(document.querySelectorAll(".carcolor-input")).map(input => input.value);
|
||
|
||
// Отправляем запрос на сервер для авторизации
|
||
const response = await fetch("{{API_SERVER}}/passes/newform", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
Authorization: getCookie("token"),
|
||
},
|
||
body: JSON.stringify({ formrole, passtext, type, fullnames, legalname, date, carnumber, carbrand, carmodel, carcolor })
|
||
});
|
||
if (response.status === 201) {
|
||
const data = await response.json();
|
||
alert("Ваша заявка принята к рассмотрению!")
|
||
|
||
window.location.href = "/";
|
||
$('#send-button').removeClass('inactive');
|
||
} else {
|
||
alert("Произошла ошибка при попытке отправить заявку");
|
||
$('#send-button').removeClass('inactive');
|
||
}
|
||
}
|
||
if (document.getElementById('tmc-radio').checked) {
|
||
type = "ТМЦ";
|
||
|
||
const tmcname = Array.from(document.querySelectorAll(".tmcname-input")).map(input => input.value);
|
||
const tmcunit = Array.from(document.querySelectorAll(".tmcunit-input")).map(input => input.value);
|
||
const tmcquantity = Array.from(document.querySelectorAll(".tmcquantity-input")).map(input => input.value);
|
||
|
||
// Отправляем запрос на сервер для авторизации
|
||
const response = await fetch("{{API_SERVER}}/passes/newform", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
Authorization: getCookie("token"),
|
||
},
|
||
body: JSON.stringify({ formrole, passtext, type, fullnames, legalname, date, tmcname, tmcunit, tmcquantity })
|
||
});
|
||
if (response.status === 201) {
|
||
const data = await response.json();
|
||
alert("Ваша заявка принята к рассмотрению!")
|
||
|
||
window.location.href = "/";
|
||
$('#send-button').removeClass('inactive');
|
||
} else {
|
||
alert("Произошла ошибка при попытке отправить заявку");
|
||
$('#send-button').removeClass('inactive');
|
||
}
|
||
}
|
||
|
||
});
|
||
});
|
||
|
||
|
||
</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"});
|
||
|
||
});
|
||
</script>
|
||
<script>
|
||
const radioInputs = document.querySelectorAll('input[name="form-type"]');
|
||
const carInputs = document.getElementById('car-inputs');
|
||
const tmcInputs = document.getElementById('tmc-inputs');
|
||
|
||
radioInputs.forEach(input => {
|
||
input.addEventListener('change', function() {
|
||
if (this.checked) {
|
||
if (this.value === "car") {
|
||
carInputs.style.display = 'flex';
|
||
tmcInputs.style.display = 'none';
|
||
} else if (this.value === "tmc") {
|
||
carInputs.style.display = 'none';
|
||
tmcInputs.style.display = 'flex';
|
||
} else if (this.value === "temp" || this.value === "onetime") {
|
||
carInputs.style.display = 'none';
|
||
tmcInputs.style.display = 'none';
|
||
}
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |