238 lines
11 KiB
HTML
238 lines
11 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}Партнеры офисной мебели{% endblock %}
|
||
|
||
{% block content %}
|
||
<!-- Заголовок и кнопка добавления (в стиле заказов) -->
|
||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
<h2 class="page-title">Партнеры офисной мебели</h2>
|
||
<a href="{{ url_for('add_client') }}" class="btn btn-primary">
|
||
<i class="fas fa-plus"></i> Новый партнер
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Поиск и сортировка -->
|
||
<div class="filter-section mb-4">
|
||
<h4 class="filter-title">Поиск и сортировка</h4>
|
||
<form method="GET" action="{{ url_for('index') }}" id="filterForm">
|
||
<div class="row">
|
||
<div class="col-md-4 mb-3">
|
||
<label for="search" class="form-label">Поиск по названию или ИНН:</label>
|
||
<div class="input-group">
|
||
<input type="text" class="form-control" name="search" id="search"
|
||
placeholder="Введите название или ИНН..."
|
||
value="{{ request.args.get('search', '') }}">
|
||
<button class="btn btn-primary" type="submit">
|
||
<i class="fas fa-search"></i> Найти
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 mb-3">
|
||
<label for="sort" class="form-label">Сортировать по:</label>
|
||
<select class="form-select" name="sort" id="sort">
|
||
<option value="name_asc" {% if request.args.get('sort') == 'name_asc' or not request.args.get('sort') %}selected{% endif %}>Названию (А-Я)</option>
|
||
<option value="name_desc" {% if request.args.get('sort') == 'name_desc' %}selected{% endif %}>Названию (Я-А)</option>
|
||
<option value="rating_desc" {% if request.args.get('sort') == 'rating_desc' %}selected{% endif %}>Рейтингу (сначала высокий)</option>
|
||
<option value="rating_asc" {% if request.args.get('sort') == 'rating_asc' %}selected{% endif %}>Рейтингу (сначала низкий)</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-3 mb-3">
|
||
<label for="type" class="form-label">Тип партнера:</label>
|
||
<select class="form-select" name="type" id="type">
|
||
<option value="all" {% if request.args.get('type') == 'all' or not request.args.get('type') %}selected{% endif %}>Все типы</option>
|
||
<option value="ЗАО" {% if request.args.get('type') == 'ЗАО' %}selected{% endif %}>ЗАО</option>
|
||
<option value="ОАО" {% if request.args.get('type') == 'ОАО' %}selected{% endif %}>ОАО</option>
|
||
<option value="ООО" {% if request.args.get('type') == 'ООО' %}selected{% endif %}>ООО</option>
|
||
<option value="ПАО" {% if request.args.get('type') == 'ПАО' %}selected{% endif %}>ПАО</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-2 mb-3">
|
||
<label for="rating" class="form-label">Мин. рейтинг:</label>
|
||
<select class="form-select" name="rating" id="rating">
|
||
<option value="0" {% if request.args.get('rating') == '0' or not request.args.get('rating') %}selected{% endif %}>Любой</option>
|
||
<option value="4" {% if request.args.get('rating') == '4' %}selected{% endif %}>4+</option>
|
||
<option value="4.5" {% if request.args.get('rating') == '4.5' %}selected{% endif %}>4.5+</option>
|
||
<option value="4.8" {% if request.args.get('rating') == '4.8' %}selected{% endif %}>4.8+</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="row mt-2">
|
||
<div class="col-12">
|
||
<a href="{{ url_for('index') }}" class="btn btn-secondary">
|
||
<i class="fas fa-times"></i> Сбросить все фильтры
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- Список партнеров -->
|
||
{% if partners %}
|
||
<div class="row">
|
||
{% for partner in partners %}
|
||
{% include 'components/partner_card.html' %}
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<!-- Информация о результатах поиска -->
|
||
<div class="row mt-3">
|
||
<div class="col-12">
|
||
<p class="text-muted">
|
||
<i class="fas fa-info-circle"></i>
|
||
Найдено партнеров: <strong>{{ partners|length }}</strong>
|
||
{% if request.args.get('search') %}
|
||
по запросу "{{ request.args.get('search') }}"
|
||
{% endif %}
|
||
{% if request.args.get('type') and request.args.get('type') != 'all' %}
|
||
, тип: {{ request.args.get('type') }}
|
||
{% endif %}
|
||
{% if request.args.get('rating') and request.args.get('rating') != '0' %}
|
||
, рейтинг ≥ {{ request.args.get('rating') }}
|
||
{% endif %}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
{% else %}
|
||
<div class="alert alert-info">
|
||
<i class="fas fa-info-circle"></i>
|
||
{% if request.args.get('search') or request.args.get('type') != 'all' or request.args.get('rating') != '0' %}
|
||
<strong>Ничего не найдено</strong> по вашему запросу.
|
||
<br><a href="{{ url_for('index') }}" class="alert-link">Сбросить все фильтры</a>
|
||
{% else %}
|
||
Нет данных о партнере. <a href="{{ url_for('add_client') }}" class="alert-link">Добавьте первого партнера</a>.
|
||
{% endif %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
<!-- JavaScript для автоматической сортировки -->
|
||
<script>
|
||
document.getElementById('sort').addEventListener('change', function() {
|
||
document.getElementById('filterForm').submit();
|
||
});
|
||
|
||
document.getElementById('type').addEventListener('change', function() {
|
||
document.getElementById('filterForm').submit();
|
||
});
|
||
|
||
document.getElementById('rating').addEventListener('change', function() {
|
||
document.getElementById('filterForm').submit();
|
||
});
|
||
|
||
let searchTimeout;
|
||
document.getElementById('search').addEventListener('input', function() {
|
||
clearTimeout(searchTimeout);
|
||
searchTimeout = setTimeout(() => {
|
||
if (this.value.length >= 2 || this.value.length === 0) {
|
||
document.getElementById('filterForm').submit();
|
||
}
|
||
}, 800);
|
||
});
|
||
|
||
document.getElementById('search').addEventListener('keypress', function(e) {
|
||
if (e.key === 'Enter') {
|
||
e.preventDefault();
|
||
document.getElementById('filterForm').submit();
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
.page-title {
|
||
color: var(--steel-blue);
|
||
font-size: 1.8rem;
|
||
font-weight: 600;
|
||
font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
|
||
}
|
||
|
||
.filter-section {
|
||
background-color: var(--alice-blue);
|
||
padding: 20px;
|
||
border-radius: 12px;
|
||
border: 1px solid var(--light-steel-blue);
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.filter-title {
|
||
color: var(--steel-blue);
|
||
margin-bottom: 20px;
|
||
font-size: 1.25rem;
|
||
font-weight: 500;
|
||
font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
|
||
}
|
||
|
||
.form-label {
|
||
font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
|
||
color: var(--steel-blue);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.form-control, .form-select {
|
||
font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
|
||
border: 1px solid var(--light-steel-blue);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.form-control:focus, .form-select:focus {
|
||
border-color: var(--steel-blue);
|
||
box-shadow: 0 0 0 0.2rem rgba(70, 130, 180, 0.25);
|
||
}
|
||
|
||
.btn {
|
||
font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
|
||
border: none;
|
||
border-radius: 8px;
|
||
padding: 10px 20px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, var(--steel-blue) 0%, #3a6d99 100%);
|
||
color: white;
|
||
}
|
||
|
||
.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%);
|
||
color: #2c3e50;
|
||
}
|
||
|
||
.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);
|
||
color: #2c3e50;
|
||
}
|
||
|
||
.input-group .btn {
|
||
border-top-left-radius: 0;
|
||
border-bottom-left-radius: 0;
|
||
}
|
||
|
||
.card {
|
||
border: 1px solid var(--light-steel-blue);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.text-muted {
|
||
font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
|
||
}
|
||
|
||
.alert {
|
||
border-radius: 12px;
|
||
border: 1px solid var(--light-steel-blue);
|
||
background: linear-gradient(135deg, var(--alice-blue) 0%, #E6F2FF 100%);
|
||
border-left: 6px solid var(--steel-blue);
|
||
font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
|
||
}
|
||
|
||
.alert-link {
|
||
color: var(--steel-blue);
|
||
font-weight: 600;
|
||
}
|
||
</style>
|
||
{% endblock %} |