Update alpha v.0969
This commit is contained in:
253
templates/building_new.html
Normal file
253
templates/building_new.html
Normal file
@@ -0,0 +1,253 @@
|
||||
{% 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 %}
|
||||
Reference in New Issue
Block a user