279 lines
13 KiB
HTML
279 lines
13 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}Редактирование товара{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="container">
|
||
<div class="row justify-content-center">
|
||
<div class="col-md-8">
|
||
<div class="card">
|
||
<div class="card-header" style="background: linear-gradient(135deg, var(--steel-blue) 0%, var(--light-steel-blue) 100%); color: white;">
|
||
<h2 class="card-title mb-0">
|
||
<i class="fas fa-edit"></i> Редактирование товара
|
||
</h2>
|
||
</div>
|
||
<div class="card-body">
|
||
<!-- Информация о партнере (только для чтения) -->
|
||
{% if client %}
|
||
<div class="alert alert-info mb-3">
|
||
<i class="fas fa-info-circle"></i> Редактирование товара партнера:
|
||
<strong>{{ client.name }}</strong>
|
||
<input type="hidden" name="client_id" value="{{ client.id }}">
|
||
</div>
|
||
{% endif %}
|
||
|
||
<!-- Flash сообщения -->
|
||
{% 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">
|
||
{{ message }}
|
||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||
</div>
|
||
{% endfor %}
|
||
{% endif %}
|
||
{% endwith %}
|
||
|
||
<form method="POST" id="productForm">
|
||
<div class="row">
|
||
<div class="col-md-6 mb-3">
|
||
<label for="product_name" class="form-label">Наименование</label>
|
||
<input type="text" class="form-control" id="product_name" name="product_name"
|
||
value="{{ product.product_name }}" required maxlength="255"
|
||
onkeypress="return isLetterKey(event)"
|
||
oninput="this.value = this.value.replace(/[^а-яА-ЯёЁa-zA-Z\s]/g, '')">
|
||
<small class="form-text text-muted">Только буквы</small>
|
||
</div>
|
||
|
||
<div class="col-md-6 mb-3">
|
||
<label for="article" class="form-label">Артикул</label>
|
||
<input type="text" class="form-control" id="article" name="article"
|
||
value="{{ product.article }}" required maxlength="100" readonly>
|
||
<small class="form-text text-muted">Не изменяется</small>
|
||
</div>
|
||
|
||
<div class="col-md-6 mb-3">
|
||
<label for="category_id" class="form-label">Категория</label>
|
||
<select class="form-select" id="category_id" name="category_id" required>
|
||
<option value="">Выберите категорию</option>
|
||
{% for category in categories %}
|
||
<option value="{{ category.id }}" {% if category.id == product.category_id %}selected{% endif %}>
|
||
{{ category.category_name }}
|
||
</option>
|
||
{% endfor %}
|
||
</select>
|
||
</div>
|
||
|
||
<div class="col-md-6 mb-3">
|
||
<label for="material_id" class="form-label">Материал</label>
|
||
<select class="form-select" id="material_id" name="material_id">
|
||
<option value="">Не выбран</option>
|
||
{% for material in materials %}
|
||
<option value="{{ material.id }}" {% if material.id == product.material_id %}selected{% endif %}>
|
||
{{ material.material_name }}
|
||
</option>
|
||
{% endfor %}
|
||
</select>
|
||
</div>
|
||
|
||
<div class="col-12 mb-3">
|
||
<label for="description" class="form-label">Описание</label>
|
||
<textarea class="form-control" id="description" name="description" rows="3" maxlength="500">{{ product.description or '' }}</textarea>
|
||
</div>
|
||
|
||
<!-- Скрытое поле с client_id (неизменяемый) -->
|
||
<input type="hidden" name="client_id" value="{{ product.client_id }}">
|
||
|
||
<div class="col-md-6 mb-3">
|
||
<label for="production_time_days" class="form-label">Время изготовления (дней)</label>
|
||
<input type="number" class="form-control" id="production_time_days" name="production_time_days"
|
||
min="1" value="{{ product.production_time_days or 1 }}" required
|
||
onkeypress="return isNumberKey(event)">
|
||
<small class="form-text text-muted">Сколько дней нужно на производство</small>
|
||
</div>
|
||
|
||
<div class="col-md-6 mb-3">
|
||
<label for="min_price" class="form-label">Цена</label>
|
||
<input type="number" class="form-control" id="min_price" name="min_price"
|
||
min="0" step="0.01" required value="{{ product.min_price }}"
|
||
onkeypress="return isNumberKey(event)">
|
||
</div>
|
||
|
||
<div class="col-md-6 mb-3">
|
||
<label for="quantity_in_stock" class="form-label">Количество на складе</label>
|
||
<input type="number" class="form-control" id="quantity_in_stock" name="quantity_in_stock"
|
||
min="0" value="{{ product.quantity_in_stock or 0 }}"
|
||
onkeypress="return isNumberKey(event)">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mt-4">
|
||
<div class="col-12">
|
||
<div class="d-flex justify-content-between">
|
||
<a href="{{ url_for('catalog') }}" class="btn btn-secondary">
|
||
<i class="fas fa-arrow-left"></i> Назад
|
||
</a>
|
||
<button type="submit" class="btn btn-primary">
|
||
<i class="fas fa-save"></i> Сохранить изменения
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Функция для проверки ввода только цифр
|
||
function isNumberKey(evt) {
|
||
var charCode = (evt.which) ? evt.which : evt.keyCode;
|
||
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
|
||
return false;
|
||
}
|
||
return true;
|
||
}
|
||
|
||
// Функция для проверки ввода только букв
|
||
function isLetterKey(evt) {
|
||
var charCode = (evt.which) ? evt.which : evt.keyCode;
|
||
// Разрешаем буквы, пробел, backspace, delete, tab, enter
|
||
if (charCode == 32 || charCode == 8 || charCode == 46 || charCode == 9 || charCode == 13) {
|
||
return true;
|
||
}
|
||
// Русские и английские буквы
|
||
if ((charCode >= 65 && charCode <= 90) || (charCode >= 97 && charCode <= 122) ||
|
||
(charCode >= 1040 && charCode <= 1103)) {
|
||
return true;
|
||
}
|
||
return false;
|
||
}
|
||
|
||
document.getElementById('productForm').addEventListener('submit', function(e) {
|
||
const price = parseFloat(document.getElementById('min_price').value);
|
||
if (price <= 0) {
|
||
e.preventDefault();
|
||
alert('Цена должна быть больше 0');
|
||
return false;
|
||
}
|
||
|
||
const prodDays = parseInt(document.getElementById('production_time_days').value);
|
||
if (prodDays < 1) {
|
||
e.preventDefault();
|
||
alert('Время изготовления должно быть не менее 1 дня');
|
||
return false;
|
||
}
|
||
|
||
// Проверяем наименование на наличие цифр
|
||
const productName = document.getElementById('product_name').value;
|
||
if (/\d/.test(productName)) {
|
||
e.preventDefault();
|
||
alert('Наименование не должно содержать цифры');
|
||
return false;
|
||
}
|
||
});
|
||
|
||
// Очищаем поле наименования от цифр при вводе
|
||
document.getElementById('product_name').addEventListener('input', function() {
|
||
this.value = this.value.replace(/[0-9]/g, '');
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
.card {
|
||
border: 1px solid var(--light-steel-blue);
|
||
border-radius: 15px;
|
||
box-shadow: 0 4px 10px rgba(70, 130, 180, 0.1);
|
||
}
|
||
|
||
.form-label {
|
||
color: var(--steel-blue);
|
||
font-weight: 500;
|
||
font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
|
||
}
|
||
|
||
.form-control, .form-select {
|
||
border: 2px solid var(--light-steel-blue);
|
||
border-radius: 8px;
|
||
padding: 10px 15px;
|
||
font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
|
||
}
|
||
|
||
.form-control:focus, .form-select:focus {
|
||
border-color: var(--steel-blue);
|
||
box-shadow: 0 0 0 0.2rem rgba(70, 130, 180, 0.25);
|
||
outline: none;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, var(--steel-blue) 0%, #3a6d99 100%);
|
||
border: none;
|
||
border-radius: 8px;
|
||
padding: 10px 20px;
|
||
font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: linear-gradient(135deg, #3a6d99 0%, var(--steel-blue) 100%);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 10px rgba(70, 130, 180, 0.3);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: linear-gradient(135deg, var(--light-steel-blue) 0%, #9fb6d4 100%);
|
||
border: none;
|
||
border-radius: 8px;
|
||
padding: 10px 20px;
|
||
color: #2c3e50;
|
||
font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: linear-gradient(135deg, #9fb6d4 0%, var(--light-steel-blue) 100%);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 10px rgba(176, 196, 222, 0.3);
|
||
}
|
||
|
||
.form-text {
|
||
font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
|
||
color: #6c757d;
|
||
}
|
||
|
||
.alert {
|
||
border-radius: 10px;
|
||
border: 1px solid var(--light-steel-blue);
|
||
font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
|
||
}
|
||
|
||
.alert-success {
|
||
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
|
||
color: #155724;
|
||
border-left: 6px solid #28a745;
|
||
}
|
||
|
||
.alert-danger {
|
||
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
|
||
color: #721c24;
|
||
border-left: 6px solid #dc3545;
|
||
}
|
||
|
||
.alert-info {
|
||
background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
|
||
color: #0c5460;
|
||
border-left: 6px solid #17a2b8;
|
||
}
|
||
|
||
textarea.form-control {
|
||
resize: vertical;
|
||
min-height: 80px;
|
||
}
|
||
|
||
/* Стиль для readonly поля */
|
||
#article[readonly] {
|
||
background-color: #f8f9fa;
|
||
cursor: not-allowed;
|
||
}
|
||
</style>
|
||
{% endblock %} |