458 lines
16 KiB
HTML
458 lines
16 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}Добавление материала{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="container">
|
||
<div class="row justify-content-center">
|
||
<div class="col-md-8">
|
||
<!-- Хлебные крошки -->
|
||
<nav aria-label="breadcrumb" class="mb-3">
|
||
<ol class="breadcrumb">
|
||
<li class="breadcrumb-item"><a href="{{ url_for('catalog') }}">Каталог материалов</a></li>
|
||
<li class="breadcrumb-item active">Добавление материала</li>
|
||
</ol>
|
||
</nav>
|
||
|
||
<div class="form-card">
|
||
<div class="form-card-header">
|
||
<h2 class="form-card-title">
|
||
<i class="fas fa-cube"></i> Добавление нового материала
|
||
</h2>
|
||
</div>
|
||
|
||
<div class="form-card-body">
|
||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||
{% if messages %}
|
||
{% for category, message in messages %}
|
||
<div class="alert alert-{{ 'danger' if category == 'error' else 'success' }} alert-dismissible fade show">
|
||
<i class="fas fa-{{ 'exclamation-circle' if category == 'error' else 'check-circle' }} me-2"></i>
|
||
{{ message }}
|
||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||
</div>
|
||
{% endfor %}
|
||
{% endif %}
|
||
{% endwith %}
|
||
|
||
<form method="POST" id="materialForm">
|
||
<div class="row">
|
||
<!-- Левая колонка -->
|
||
<div class="col-md-6">
|
||
<h5 class="section-title">
|
||
<i class="fas fa-info-circle"></i> Основная информация
|
||
</h5>
|
||
|
||
<div class="form-group">
|
||
<label for="product_name" class="form-label">
|
||
<i class="fas fa-tag"></i>
|
||
Название материала
|
||
</label>
|
||
<input type="text" class="form-control modern-input" id="product_name" name="product_name"
|
||
required maxlength="255" placeholder="Например: Паркетная доска">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="article" class="form-label">
|
||
<i class="fas fa-barcode"></i>
|
||
Артикул
|
||
</label>
|
||
<input type="text" class="form-control modern-input" id="article" name="article"
|
||
required maxlength="50" placeholder="Например: ПРК-001">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="category_id" class="form-label">
|
||
<i class="fas fa-folder"></i>
|
||
Категория
|
||
</label>
|
||
<div class="select-wrapper">
|
||
<select class="form-select modern-select" id="category_id" name="category_id" required>
|
||
<option value="" selected disabled>Выберите категорию</option>
|
||
{% for category in categories %}
|
||
<option value="{{ category.id }}">{{ category.category_name }}</option>
|
||
{% endfor %}
|
||
</select>
|
||
<i class="fas fa-chevron-down select-arrow"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Правая колонка -->
|
||
<div class="col-md-6">
|
||
<h5 class="section-title">
|
||
<i class="fas fa-cog"></i> Характеристики
|
||
</h5>
|
||
|
||
<div class="form-group">
|
||
<label for="min_price" class="form-label">
|
||
<i class="fas fa-ruble-sign"></i>
|
||
Цена
|
||
</label>
|
||
<input type="number" class="form-control modern-input" id="min_price" name="min_price"
|
||
required min="0" step="0.01" value="0.00" placeholder="0.00">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="material_id" class="form-label">
|
||
<i class="fas fa-cube"></i>
|
||
Тип материала
|
||
</label>
|
||
<div class="select-wrapper">
|
||
<select class="form-select modern-select" id="material_id" name="material_id">
|
||
<option value="" selected>Не выбран</option>
|
||
{% for material in materials %}
|
||
<option value="{{ material.id }}">{{ material.material_name }}</option>
|
||
{% endfor %}
|
||
</select>
|
||
<i class="fas fa-chevron-down select-arrow"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="quantity_in_stock" class="form-label">
|
||
<i class="fas fa-warehouse"></i>
|
||
Наличие на складе
|
||
</label>
|
||
<input type="number" class="form-control modern-input" id="quantity_in_stock" name="quantity_in_stock"
|
||
min="0" value="0" placeholder="0">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Описание на всю ширину -->
|
||
<div class="col-12">
|
||
<div class="form-group">
|
||
<label for="description" class="form-label">
|
||
<i class="fas fa-align-left"></i>
|
||
Описание материала
|
||
</label>
|
||
<textarea class="form-control modern-input" id="description" name="description"
|
||
rows="4" maxlength="1000" placeholder="Подробное описание материала..."></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Кнопки -->
|
||
<div class="form-actions">
|
||
<a href="{{ url_for('catalog') }}" class="btn btn-outline">
|
||
<i class="fas fa-times"></i> Отмена
|
||
</a>
|
||
<button type="submit" class="btn btn-primary">
|
||
<i class="fas fa-save"></i> Добавить материал
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
/* ===== ОСНОВНЫЕ ПЕРЕМЕННЫЕ ===== */
|
||
:root {
|
||
--antique-white: #FAEBD7;
|
||
--light-brown: #DEB887;
|
||
--brown: #A0522D;
|
||
--dark-brown: #8B4513;
|
||
}
|
||
|
||
/* ===== ХЛЕБНЫЕ КРОШКИ ===== */
|
||
.breadcrumb {
|
||
background: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.breadcrumb-item a {
|
||
color: var(--brown);
|
||
text-decoration: none;
|
||
font-family: 'Verdana', sans-serif;
|
||
}
|
||
|
||
.breadcrumb-item a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.breadcrumb-item.active {
|
||
color: #6c757d;
|
||
font-family: 'Verdana', sans-serif;
|
||
}
|
||
|
||
.breadcrumb-item + .breadcrumb-item::before {
|
||
color: var(--light-brown);
|
||
}
|
||
|
||
/* ===== КАРТОЧКА ФОРМЫ ===== */
|
||
.form-card {
|
||
background: white;
|
||
border: 1px solid var(--light-brown);
|
||
border-radius: 16px;
|
||
box-shadow: 0 4px 20px rgba(160, 82, 45, 0.1);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.form-card-header {
|
||
background: linear-gradient(135deg, var(--brown) 0%, var(--dark-brown) 100%);
|
||
padding: 20px 25px;
|
||
color: white;
|
||
}
|
||
|
||
.form-card-title {
|
||
font-size: 1.4rem;
|
||
font-weight: 600;
|
||
font-family: 'Verdana', sans-serif;
|
||
margin: 0;
|
||
}
|
||
|
||
.form-card-title i {
|
||
margin-right: 10px;
|
||
color: white;
|
||
}
|
||
|
||
.form-card-body {
|
||
padding: 25px;
|
||
}
|
||
|
||
/* ===== ЗАГОЛОВКИ СЕКЦИЙ ===== */
|
||
.section-title {
|
||
color: var(--brown);
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px solid var(--light-brown);
|
||
font-family: 'Verdana', sans-serif;
|
||
}
|
||
|
||
.section-title i {
|
||
color: var(--brown);
|
||
margin-right: 8px;
|
||
}
|
||
|
||
/* ===== ЭЛЕМЕНТЫ ФОРМЫ ===== */
|
||
.form-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.form-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
color: var(--brown);
|
||
font-weight: 600;
|
||
font-size: 0.95rem;
|
||
margin-bottom: 6px;
|
||
font-family: 'Verdana', sans-serif;
|
||
}
|
||
|
||
.form-label i {
|
||
color: var(--brown);
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.modern-input {
|
||
width: 100%;
|
||
height: 42px;
|
||
padding: 0 12px;
|
||
border: 2px solid var(--light-brown);
|
||
border-radius: 10px;
|
||
font-size: 0.95rem;
|
||
font-family: 'Verdana', sans-serif;
|
||
transition: all 0.2s ease;
|
||
background: white;
|
||
}
|
||
|
||
.modern-input:focus {
|
||
outline: none;
|
||
border-color: var(--brown);
|
||
box-shadow: 0 0 0 3px rgba(160, 82, 45, 0.1);
|
||
}
|
||
|
||
.modern-input:hover {
|
||
border-color: var(--brown);
|
||
}
|
||
|
||
textarea.modern-input {
|
||
height: auto;
|
||
padding: 12px;
|
||
resize: vertical;
|
||
}
|
||
|
||
.select-wrapper {
|
||
position: relative;
|
||
}
|
||
|
||
.modern-select {
|
||
width: 100%;
|
||
height: 42px;
|
||
padding: 0 35px 0 12px;
|
||
border: 2px solid var(--light-brown);
|
||
border-radius: 10px;
|
||
font-size: 0.95rem;
|
||
font-family: 'Verdana', sans-serif;
|
||
background: white;
|
||
cursor: pointer;
|
||
appearance: none;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.modern-select:focus {
|
||
outline: none;
|
||
border-color: var(--brown);
|
||
box-shadow: 0 0 0 3px rgba(160, 82, 45, 0.1);
|
||
}
|
||
|
||
.modern-select:hover {
|
||
border-color: var(--brown);
|
||
}
|
||
|
||
.select-arrow {
|
||
position: absolute;
|
||
right: 15px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: var(--brown);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* ===== КНОПКИ ===== */
|
||
.form-actions {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 25px;
|
||
padding-top: 20px;
|
||
border-top: 2px solid var(--light-brown);
|
||
}
|
||
|
||
.btn {
|
||
padding: 10px 25px;
|
||
border-radius: 10px;
|
||
font-size: 0.95rem;
|
||
font-weight: 500;
|
||
font-family: 'Verdana', sans-serif;
|
||
transition: all 0.2s ease;
|
||
border: none;
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--brown);
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: var(--dark-brown);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(160, 82, 45, 0.3);
|
||
}
|
||
|
||
.btn-outline {
|
||
background: white;
|
||
border: 2px solid var(--light-brown);
|
||
color: var(--brown);
|
||
}
|
||
|
||
.btn-outline:hover {
|
||
background: var(--antique-white);
|
||
border-color: var(--brown);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* ===== АЛЕРТЫ ===== */
|
||
.alert {
|
||
border-radius: 10px;
|
||
border: 1px solid var(--light-brown);
|
||
font-family: 'Verdana', sans-serif;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.alert-success {
|
||
background: var(--antique-white);
|
||
color: var(--brown);
|
||
border-left: 4px solid #28a745;
|
||
}
|
||
|
||
.alert-danger {
|
||
background: var(--antique-white);
|
||
color: #721c24;
|
||
border-left: 4px solid #dc3545;
|
||
}
|
||
|
||
/* ===== ИКОНКИ ===== */
|
||
i {
|
||
color: var(--brown);
|
||
}
|
||
|
||
.btn-primary i, .btn-outline i, .form-card-header i {
|
||
color: inherit;
|
||
}
|
||
|
||
/* ===== АДАПТИВНОСТЬ ===== */
|
||
@media (max-width: 768px) {
|
||
.form-card-body {
|
||
padding: 20px;
|
||
}
|
||
|
||
.form-actions {
|
||
flex-direction: column-reverse;
|
||
gap: 10px;
|
||
}
|
||
|
||
.form-actions .btn {
|
||
width: 100%;
|
||
justify-content: center;
|
||
}
|
||
|
||
.col-md-6 {
|
||
width: 100%;
|
||
}
|
||
|
||
.section-title {
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.section-title:first-of-type {
|
||
margin-top: 0;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
// Валидация формы
|
||
document.getElementById('materialForm').addEventListener('submit', function(e) {
|
||
const name = document.getElementById('product_name').value;
|
||
const article = document.getElementById('article').value;
|
||
const price = parseFloat(document.getElementById('min_price').value);
|
||
const quantity = parseInt(document.getElementById('quantity_in_stock').value) || 0;
|
||
|
||
if (!name.trim()) {
|
||
e.preventDefault();
|
||
alert('Введите название материала');
|
||
return false;
|
||
}
|
||
|
||
if (!article.trim()) {
|
||
e.preventDefault();
|
||
alert('Введите артикул материала');
|
||
return false;
|
||
}
|
||
|
||
if (price < 0) {
|
||
e.preventDefault();
|
||
alert('Цена не может быть отрицательной');
|
||
return false;
|
||
}
|
||
|
||
if (quantity < 0) {
|
||
e.preventDefault();
|
||
alert('Количество не может быть отрицательным');
|
||
return false;
|
||
}
|
||
});
|
||
</script>
|
||
{% endblock %}
|
||
{% endblock %} |