254 lines
7.3 KiB
HTML
254 lines
7.3 KiB
HTML
{% extends "base.html" %}
|
|
{% block body_class %}page-bg bg-cabinets{% endblock %}
|
|
{% block content %}
|
|
<style>
|
|
body.bg-cabinets {
|
|
background-color: #B3B3DA;
|
|
background-image:
|
|
linear-gradient(rgba(179, 179, 218, 0.75), rgba(179, 179, 218, 0.75)),
|
|
url('{{ url_for("static", filename="bg/bg_zdanie.png", v=1) }}');
|
|
background-size: auto 40vh;
|
|
}
|
|
.building-page {
|
|
min-height: calc(100vh - 150px);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding-top: 18px;
|
|
}
|
|
.building-panel {
|
|
width: min(518px, calc(100vw - 24px));
|
|
height: 280px;
|
|
background: #f7f7f9;
|
|
border: 1px solid #8a8a8a;
|
|
border-radius: 7px;
|
|
box-shadow: 0 12px 24px rgba(15, 23, 32, 0.16);
|
|
padding: 19px;
|
|
box-sizing: border-box;
|
|
overflow: visible;
|
|
}
|
|
.building-panel__header {
|
|
margin-bottom: 16px;
|
|
}
|
|
.building-panel__title {
|
|
margin: 0;
|
|
font-size: 1.28rem;
|
|
line-height: 1.15;
|
|
}
|
|
.building-form {
|
|
height: 207px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
.building-form .form-label {
|
|
margin-bottom: 7px;
|
|
font-weight: 700;
|
|
color: #20242d;
|
|
font-size: 0.88rem;
|
|
}
|
|
.building-form__row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 135px;
|
|
gap: 12px;
|
|
}
|
|
.special-floor-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.special-floor-row .form-control {
|
|
flex: 1;
|
|
}
|
|
.special-floor-row .btn {
|
|
width: 80px;
|
|
flex: 0 0 80px;
|
|
}
|
|
.special-floor-list {
|
|
display: grid;
|
|
gap: 0.4rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
.special-floor-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
border: 1px solid #d2d2d2;
|
|
background: #fff;
|
|
border-radius: 6px;
|
|
padding: 0.35rem 0.45rem 0.35rem 0.6rem;
|
|
}
|
|
.special-floor-item__name {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.building-form__footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
margin-top: auto;
|
|
}
|
|
body:not(.bg-home) .container .building-panel .btn,
|
|
body:not(.bg-home) .container .building-panel .btn:hover,
|
|
body:not(.bg-home) .container .building-panel .btn:focus {
|
|
min-height: 32px;
|
|
padding: 3px 14px;
|
|
background: #d9d9d9;
|
|
border: 1px solid #000;
|
|
border-radius: 6px;
|
|
color: #000;
|
|
box-shadow: inset 1px 1px 0 #f7f7f7, inset -1px -1px 0 #8a8a8a;
|
|
font-family: 'Chicago Regular', 'Segoe UI', Arial, sans-serif;
|
|
font-size: 0.85rem;
|
|
line-height: 1.2;
|
|
text-decoration: none;
|
|
}
|
|
body:not(.bg-home) .container .building-panel .btn:active {
|
|
box-shadow: inset -1px -1px 0 #f7f7f7, inset 1px 1px 0 #8a8a8a;
|
|
}
|
|
body:not(.bg-home) .container .building-panel .form-control {
|
|
min-height: 32px;
|
|
border: 1px solid #7a7a7a;
|
|
border-radius: 6px;
|
|
background: #ffffff;
|
|
box-shadow: inset 1px 1px 0 #f2f2f2, inset -1px -1px 0 #b3b3b3;
|
|
font-family: 'Chicago Regular', 'Segoe UI', Arial, sans-serif;
|
|
font-size: 0.88rem;
|
|
padding: 4px 6px;
|
|
}
|
|
body:not(.bg-home) .container .building-panel .form-control:focus {
|
|
border-color: #7a7a7a;
|
|
box-shadow: inset 1px 1px 0 #f2f2f2, inset -1px -1px 0 #b3b3b3;
|
|
outline: none;
|
|
}
|
|
.building-form__error {
|
|
min-height: 1em;
|
|
color: #8b1d1d;
|
|
font-size: 0.78rem;
|
|
line-height: 1;
|
|
}
|
|
@media (max-width: 560px) {
|
|
.building-page {
|
|
padding-top: 1rem;
|
|
}
|
|
.building-panel {
|
|
width: min(518px, calc(100vw - 24px));
|
|
height: auto;
|
|
min-height: 280px;
|
|
padding: 19px;
|
|
}
|
|
.building-form {
|
|
height: auto;
|
|
min-height: 0;
|
|
}
|
|
.building-form__row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.special-floor-row {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="building-page">
|
|
<section class="building-panel">
|
|
<div class="building-panel__header">
|
|
<h3 class="building-panel__title">Добавить здание</h3>
|
|
</div>
|
|
|
|
<form method="post" action="{{ url_for('buildings_add') }}" class="building-form" id="buildingForm" novalidate>
|
|
<input type="hidden" name="special_floors" id="specialFloorsValue">
|
|
<div class="building-form__row">
|
|
<div>
|
|
<label class="form-label">Название здания</label>
|
|
<input name="building" id="buildingName" class="form-control" autofocus>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Этажей</label>
|
|
<input name="floor_count" class="form-control" type="number" min="0" step="1" value="0">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Специальный этаж</label>
|
|
<div class="special-floor-row">
|
|
<input class="form-control" id="specialFloorInput" placeholder="Цокольный этаж">
|
|
<button class="btn btn-outline-primary" type="button" id="specialFloorAdd">Добавить</button>
|
|
</div>
|
|
<div class="special-floor-list" id="specialFloorList"></div>
|
|
</div>
|
|
<div class="building-form__error" id="buildingError"></div>
|
|
<div class="building-form__footer">
|
|
<a class="btn btn-outline-secondary" href="{{ url_for('cabinets') }}">Отмена</a>
|
|
<button class="btn btn-success" type="submit">Добавить</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
const form = document.getElementById('buildingForm');
|
|
const input = document.getElementById('specialFloorInput');
|
|
const addBtn = document.getElementById('specialFloorAdd');
|
|
const list = document.getElementById('specialFloorList');
|
|
const hidden = document.getElementById('specialFloorsValue');
|
|
const buildingName = document.getElementById('buildingName');
|
|
const error = document.getElementById('buildingError');
|
|
const floors = [];
|
|
|
|
function syncHidden() {
|
|
hidden.value = floors.join('\n');
|
|
}
|
|
|
|
function renderFloors() {
|
|
list.innerHTML = '';
|
|
floors.forEach((floor, index) => {
|
|
const item = document.createElement('div');
|
|
item.className = 'special-floor-item';
|
|
item.innerHTML = `
|
|
<span class="special-floor-item__name"></span>
|
|
<button type="button" class="btn btn-sm btn-outline-danger text-danger">Удалить</button>
|
|
`;
|
|
item.querySelector('.special-floor-item__name').textContent = floor;
|
|
item.querySelector('button').addEventListener('click', () => {
|
|
floors.splice(index, 1);
|
|
syncHidden();
|
|
renderFloors();
|
|
});
|
|
list.appendChild(item);
|
|
});
|
|
}
|
|
|
|
function addFloor() {
|
|
const value = (input.value || '').trim();
|
|
if (!value) return;
|
|
const exists = floors.some((floor) => floor.toLowerCase() === value.toLowerCase());
|
|
if (!exists) {
|
|
floors.push(value);
|
|
syncHidden();
|
|
renderFloors();
|
|
}
|
|
input.value = '';
|
|
input.focus();
|
|
}
|
|
|
|
addBtn.addEventListener('click', addFloor);
|
|
input.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
addFloor();
|
|
}
|
|
});
|
|
form.addEventListener('submit', (e) => {
|
|
if (error) error.textContent = '';
|
|
if (buildingName && !(buildingName.value || '').trim()) {
|
|
e.preventDefault();
|
|
if (error) error.textContent = 'Укажите название здания';
|
|
buildingName.focus();
|
|
return;
|
|
}
|
|
syncHidden();
|
|
});
|
|
})();
|
|
</script>
|
|
{% endblock %}
|