Переделки и улучшения

This commit is contained in:
2025-11-21 16:56:58 +03:00
parent 58838614a5
commit 0d239ef1de
11 changed files with 604 additions and 138 deletions

View File

@@ -12,10 +12,15 @@
}
.source-info-cell {
min-width: 250px;
min-width: 200px;
background-color: #f8f9fa;
}
.param-cell {
min-width: 120px;
text-align: center;
}
.marks-cell {
min-width: 150px;
text-align: center;
@@ -82,11 +87,24 @@
background-color: #6c757d;
color: white;
}
.satellite-selector {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 0.375rem;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.satellite-selector h5 {
margin-bottom: 1rem;
color: #495057;
}
</style>
{% endblock %}
{% block content %}
<div class="container-fluid px-3">
<div class="{% if full_width_page %}container-fluid{% else %}container{% endif %} px-3">
<!-- Page Header -->
<div class="row mb-3">
<div class="col-12">
@@ -94,6 +112,28 @@
</div>
</div>
<!-- Satellite Selector -->
<div class="row mb-3">
<div class="col-12">
<div class="satellite-selector">
<h5>Выберите спутник:</h5>
<div class="row">
<div class="col-md-6">
<select id="satellite-select" class="form-select" onchange="selectSatellite()">
<option value="">-- Выберите спутник --</option>
{% for satellite in satellites %}
<option value="{{ satellite.id }}" {% if satellite.id == selected_satellite_id %}selected{% endif %}>
{{ satellite.name }}
</option>
{% endfor %}
</select>
</div>
</div>
</div>
</div>
</div>
{% if selected_satellite_id %}
<!-- Toolbar with search, pagination, and filters -->
<div class="row mb-3">
<div class="col-12">
@@ -111,7 +151,18 @@
<thead class="table-dark sticky-top">
<tr>
<th class="source-info-cell">
{% include 'mainapp/components/_sort_header.html' with field='id' label='Информация об объекте' current_sort=sort %}
{% include 'mainapp/components/_sort_header.html' with field='id' label='ID / Имя' current_sort=sort %}
</th>
<th class="param-cell">
{% include 'mainapp/components/_sort_header.html' with field='frequency' label='Частота, МГц' current_sort=sort %}
</th>
<th class="param-cell">
{% include 'mainapp/components/_sort_header.html' with field='freq_range' label='Полоса, МГц' current_sort=sort %}
</th>
<th class="param-cell">Поляризация</th>
<th class="param-cell">Модуляция</th>
<th class="param-cell">
{% include 'mainapp/components/_sort_header.html' with field='bod_velocity' label='Бодовая скорость' current_sort=sort %}
</th>
<th class="marks-cell">Наличие</th>
<th class="marks-cell">
@@ -128,19 +179,13 @@
<tr data-source-id="{{ source.id }}">
<td class="source-info-cell" rowspan="{{ marks.count }}">
<div><strong>ID:</strong> {{ source.id }}</div>
<div><strong>Имя объекта:</strong> {{ source.objitem_name }}</div>
<div><strong>Дата создания:</strong> {{ source.created_at|date:"d.m.Y H:i" }}</div>
<div><strong>Кол-во объектов:</strong> {{ source.source_objitems.count }}</div>
{% if source.coords_average %}
<div><strong>Усреднённые координаты:</strong> Есть</div>
{% endif %}
{% if source.coords_kupsat %}
<div><strong>Координаты Кубсата:</strong> Есть</div>
{% endif %}
{% if source.coords_valid %}
<div><strong>Координаты оперативников:</strong> Есть</div>
{% endif %}
<div><strong>Имя:</strong> {{ source.objitem_name }}</div>
</td>
<td class="param-cell" rowspan="{{ marks.count }}">{{ source.frequency }}</td>
<td class="param-cell" rowspan="{{ marks.count }}">{{ source.freq_range }}</td>
<td class="param-cell" rowspan="{{ marks.count }}">{{ source.polarization }}</td>
<td class="param-cell" rowspan="{{ marks.count }}">{{ source.modulation }}</td>
<td class="param-cell" rowspan="{{ marks.count }}">{{ source.bod_velocity }}</td>
{% with first_mark=marks.0 %}
<td class="marks-cell" data-mark-id="{{ first_mark.id }}">
<span class="mark-status {% if first_mark.mark %}mark-present{% else %}mark-absent{% endif %}">
@@ -197,19 +242,13 @@
<tr data-source-id="{{ source.id }}">
<td class="source-info-cell">
<div><strong>ID:</strong> {{ source.id }}</div>
<div><strong>Имя объекта:</strong> {{ source.objitem_name }}</div>
<div><strong>Дата создания:</strong> {{ source.created_at|date:"d.m.Y H:i" }}</div>
<div><strong>Кол-во объектов:</strong> {{ source.source_objitems.count }}</div>
{% if source.coords_average %}
<div><strong>Усреднённые координаты:</strong> Есть</div>
{% endif %}
{% if source.coords_kupsat %}
<div><strong>Координаты Кубсата:</strong> Есть</div>
{% endif %}
{% if source.coords_valid %}
<div><strong>Координаты оперативников:</strong> Есть</div>
{% endif %}
<div><strong>Имя:</strong> {{ source.objitem_name }}</div>
</td>
<td class="param-cell">{{ source.frequency }}</td>
<td class="param-cell">{{ source.freq_range }}</td>
<td class="param-cell">{{ source.polarization }}</td>
<td class="param-cell">{{ source.modulation }}</td>
<td class="param-cell">{{ source.bod_velocity }}</td>
<td colspan="2" class="no-marks">Отметок нет</td>
<td class="actions-cell">
<div class="action-buttons" id="actions-{{ source.id }}">
@@ -228,8 +267,8 @@
{% endwith %}
{% empty %}
<tr>
<td colspan="4" class="text-center py-4">
<p class="text-muted mb-0">Объекты не найдены</p>
<td colspan="9" class="text-center py-4">
<p class="text-muted mb-0">Объекты не найдены для выбранного спутника</p>
</td>
</tr>
{% endfor %}
@@ -240,6 +279,16 @@
</div>
</div>
</div>
{% else %}
<!-- No satellite selected message -->
<div class="row">
<div class="col-12">
<div class="alert alert-info text-center">
<h5>Пожалуйста, выберите спутник для просмотра объектов</h5>
</div>
</div>
</div>
{% endif %}
</div>
<!-- Offcanvas Filter Panel -->
@@ -250,24 +299,6 @@
</div>
<div class="offcanvas-body">
<form method="get" id="filter-form">
<!-- Satellite Selection - Multi-select -->
<div class="mb-2">
<label class="form-label">Спутник:</label>
<div class="d-flex justify-content-between mb-1">
<button type="button" class="btn btn-sm btn-outline-secondary"
onclick="selectAllOptions('satellite_id', true)">Выбрать</button>
<button type="button" class="btn btn-sm btn-outline-secondary"
onclick="selectAllOptions('satellite_id', false)">Снять</button>
</div>
<select name="satellite_id" class="form-select form-select-sm mb-2" multiple size="6">
{% for satellite in satellites %}
<option value="{{ satellite.id }}" {% if satellite.id in selected_satellites %}selected{% endif %}>
{{ satellite.name }}
</option>
{% endfor %}
</select>
</div>
<!-- Mark Status Filter -->
<div class="mb-2">
<label class="form-label">Статус отметок:</label>
@@ -307,7 +338,10 @@
</select>
</div>
{# Сохраняем параметры сортировки и поиска при применении фильтров #}
{# Сохраняем параметры сортировки, поиска и спутника при применении фильтров #}
{% if selected_satellite_id %}
<input type="hidden" name="satellite_id" value="{{ selected_satellite_id }}">
{% endif %}
{% if request.GET.sort %}
<input type="hidden" name="sort" value="{{ request.GET.sort }}">
{% endif %}
@@ -322,7 +356,7 @@
<button type="submit" class="btn btn-primary btn-sm">
Применить
</button>
<a href="?" class="btn btn-secondary btn-sm">
<a href="?{% if selected_satellite_id %}satellite_id={{ selected_satellite_id }}{% endif %}" class="btn btn-secondary btn-sm">
Сбросить
</a>
</div>
@@ -331,6 +365,25 @@
</div>
<script>
// Satellite selection
function selectSatellite() {
const select = document.getElementById('satellite-select');
const satelliteId = select.value;
if (satelliteId) {
const urlParams = new URLSearchParams(window.location.search);
urlParams.set('satellite_id', satelliteId);
// Reset page when changing satellite
urlParams.delete('page');
window.location.search = urlParams.toString();
} else {
// Clear all params if no satellite selected
window.location.search = '';
}
}
// Multi-select helper function
function selectAllOptions(selectName, select) {
const selectElement = document.querySelector(`select[name="${selectName}"]`);
@@ -347,8 +400,8 @@ document.addEventListener('DOMContentLoaded', function() {
const filterCounter = document.getElementById('filterCounter');
if (filterCounter) {
// Count active filters (excluding pagination, sort, search, and items_per_page)
const excludedParams = ['page', 'sort', 'search', 'items_per_page'];
// Count active filters (excluding pagination, sort, search, items_per_page, and satellite_id)
const excludedParams = ['page', 'sort', 'search', 'items_per_page', 'satellite_id'];
let activeFilters = 0;
for (const [key, value] of urlParams.entries()) {

View File

@@ -193,6 +193,24 @@
</div>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Дата подтверждения:</label>
<div class="readonly-field">
{% if object.confirm_at %}{{ object.confirm_at|date:"d.m.Y H:i" }}{% else %}-{% endif %}
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Дата наличия:</label>
<div class="readonly-field">
{% if object.last_signal_at %}{{ object.last_signal_at|date:"d.m.Y H:i" }}{% else %}-{% endif %}
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">

View File

@@ -118,6 +118,40 @@
{% endif %}
</div>
<!-- Column visibility toggle button -->
<div>
<div class="dropdown">
<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle"
id="columnVisibilityDropdown" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-gear"></i> Колонки
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="columnVisibilityDropdown" style="max-height: 400px; overflow-y: auto;">
<li>
<label class="dropdown-item">
<input type="checkbox" id="select-all-columns" onchange="toggleAllColumns(this)"> Выбрать всё
</label>
</li>
<li><hr class="dropdown-divider"></li>
<li><label class="dropdown-item"><input type="checkbox" class="column-toggle" data-column="0" checked onchange="toggleColumn(this)"> Выбрать</label></li>
<li><label class="dropdown-item"><input type="checkbox" class="column-toggle" data-column="1" checked onchange="toggleColumn(this)"> ID</label></li>
<li><label class="dropdown-item"><input type="checkbox" class="column-toggle" data-column="2" checked onchange="toggleColumn(this)"> Имя</label></li>
<li><label class="dropdown-item"><input type="checkbox" class="column-toggle" data-column="3" checked onchange="toggleColumn(this)"> Спутник</label></li>
<li><label class="dropdown-item"><input type="checkbox" class="column-toggle" data-column="4" checked onchange="toggleColumn(this)"> Тип объекта</label></li>
<li><label class="dropdown-item"><input type="checkbox" class="column-toggle" data-column="5" checked onchange="toggleColumn(this)"> Принадлежность объекта</label></li>
<li><label class="dropdown-item"><input type="checkbox" class="column-toggle" data-column="6" checked onchange="toggleColumn(this)"> Координаты ГЛ</label></li>
<li><label class="dropdown-item"><input type="checkbox" class="column-toggle" data-column="7" checked onchange="toggleColumn(this)"> Кол-во ГЛ(точек)</label></li>
<li><label class="dropdown-item"><input type="checkbox" class="column-toggle" data-column="8" checked onchange="toggleColumn(this)"> Координаты Кубсата</label></li>
<li><label class="dropdown-item"><input type="checkbox" class="column-toggle" data-column="9" checked onchange="toggleColumn(this)"> Координаты визуального наблюдения</label></li>
<li><label class="dropdown-item"><input type="checkbox" class="column-toggle" data-column="10" checked onchange="toggleColumn(this)"> Координаты справочные</label></li>
<li><label class="dropdown-item"><input type="checkbox" class="column-toggle" data-column="11" onchange="toggleColumn(this)"> Создано</label></li>
<li><label class="dropdown-item"><input type="checkbox" class="column-toggle" data-column="12" onchange="toggleColumn(this)"> Обновлено</label></li>
<li><label class="dropdown-item"><input type="checkbox" class="column-toggle" data-column="13" checked onchange="toggleColumn(this)"> Дата подтверждения</label></li>
<li><label class="dropdown-item"><input type="checkbox" class="column-toggle" data-column="14" checked onchange="toggleColumn(this)"> Последний сигнал</label></li>
<li><label class="dropdown-item"><input type="checkbox" class="column-toggle" data-column="15" checked onchange="toggleColumn(this)"> Действия</label></li>
</ul>
</div>
</div>
<!-- Pagination -->
<div class="ms-auto">
{% include 'mainapp/components/_pagination.html' with page_obj=page_obj show_info=True %}
@@ -281,32 +315,6 @@
placeholder="До" value="{{ date_to|default:'' }}">
</div>
<!-- Signal Mark Filter -->
<div class="mb-2">
<label class="form-label">Наличие сигнала:</label>
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="has_signal_mark" id="has_signal_mark_1"
value="1" {% if has_signal_mark == '1' %}checked{% endif %}>
<label class="form-check-label" for="has_signal_mark_1">Есть</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="has_signal_mark" id="has_signal_mark_0"
value="0" {% if has_signal_mark == '0' %}checked{% endif %}>
<label class="form-check-label" for="has_signal_mark_0">Нет</label>
</div>
</div>
</div>
<!-- Mark Date Filter -->
<div class="mb-2">
<label class="form-label">Дата отметки сигнала:</label>
<input type="date" name="mark_date_from" id="mark_date_from" class="form-control form-control-sm mb-1"
placeholder="От" value="{{ mark_date_from|default:'' }}">
<input type="date" name="mark_date_to" id="mark_date_to" class="form-control form-control-sm"
placeholder="До" value="{{ mark_date_to|default:'' }}">
</div>
<hr class="my-3">
<h6 class="text-muted mb-2"><i class="bi bi-sliders"></i> Фильтры по параметрам точек</h6>
@@ -444,13 +452,14 @@
<th scope="col" style="min-width: 150px;">Координаты Кубсата</th>
<th scope="col" style="min-width: 150px;">Координаты визуального наблюдения</th>
<th scope="col" style="min-width: 150px;">Координаты справочные</th>
<th scope="col" style="min-width: 180px;">Наличие сигнала</th>
<th scope="col" style="min-width: 120px;">
{% include 'mainapp/components/_sort_header.html' with field='created_at' label='Создано' current_sort=sort %}
</th>
<th scope="col" style="min-width: 120px;">
{% include 'mainapp/components/_sort_header.html' with field='updated_at' label='Обновлено' current_sort=sort %}
</th>
<th scope="col" style="min-width: 150px;">Дата подтверждения</th>
<th scope="col" style="min-width: 150px;">Последний сигнал</th>
<th scope="col" class="text-center" style="min-width: 150px;">Действия</th>
</tr>
</thead>
@@ -489,32 +498,10 @@
<td>{{ source.coords_kupsat }}</td>
<td>{{ source.coords_valid }}</td>
<td>{{ source.coords_reference }}</td>
<td style="padding: 0.3rem; vertical-align: top;">
{% if source.marks %}
<div style="font-size: 0.75rem; line-height: 1.3;">
{% for mark in source.marks %}
<div style="{% if not forloop.last %}border-bottom: 1px solid #dee2e6; padding-bottom: 3px; margin-bottom: 3px;{% endif %}">
<div style="margin-bottom: 1px;">
{% if mark.mark %}
<span class="badge bg-success" style="font-size: 0.7rem;">Есть</span>
{% elif mark.mark == False %}
<span class="badge bg-danger" style="font-size: 0.7rem;">Нет</span>
{% else %}
<span class="badge bg-secondary" style="font-size: 0.7rem;">-</span>
{% endif %}
<span class="text-muted" style="font-size: 0.7rem;">{{ mark.timestamp|date:"d.m.y H:i" }}</span>
</div>
<div class="text-muted" style="font-size: 0.65rem;">{{ mark.created_by }}</div>
</div>
{% endfor %}
</div>
{% else %}
<span class="text-muted">-</span>
{% endif %}
</td>
<td>{{ source.created_at|date:"d.m.Y H:i" }}</td>
<td>{{ source.updated_at|date:"d.m.Y H:i" }}</td>
<td>{{ source.confirm_at|date:"d.m.Y H:i"|default:"-" }}</td>
<td>{{ source.last_signal_at|date:"d.m.Y H:i"|default:"-" }}</td>
<td class="text-center">
<div class="btn-group" role="group">
{% if source.objitem_count > 0 %}
@@ -566,7 +553,7 @@
</tr>
{% empty %}
<tr>
<td colspan="14" class="text-center text-muted">Нет данных для отображения</td>
<td colspan="15" class="text-center text-muted">Нет данных для отображения</td>
</tr>
{% endfor %}
</tbody>
@@ -1062,6 +1049,47 @@ function updateFilterCounter() {
}
}
// Column visibility functions
function toggleColumn(checkbox) {
const columnIndex = parseInt(checkbox.getAttribute('data-column'));
const table = document.querySelector('.table');
const cells = table.querySelectorAll(`td:nth-child(${columnIndex + 1}), th:nth-child(${columnIndex + 1})`);
if (checkbox.checked) {
cells.forEach(cell => {
cell.style.display = '';
});
} else {
cells.forEach(cell => {
cell.style.display = 'none';
});
}
}
function toggleAllColumns(selectAllCheckbox) {
const columnCheckboxes = document.querySelectorAll('.column-toggle');
columnCheckboxes.forEach(checkbox => {
checkbox.checked = selectAllCheckbox.checked;
toggleColumn(checkbox);
});
}
// Initialize column visibility - hide Создано and Обновлено columns by default
function initColumnVisibility() {
const createdAtCheckbox = document.querySelector('input[data-column="11"]');
const updatedAtCheckbox = document.querySelector('input[data-column="12"]');
if (createdAtCheckbox) {
createdAtCheckbox.checked = false;
toggleColumn(createdAtCheckbox);
}
if (updatedAtCheckbox) {
updatedAtCheckbox.checked = false;
toggleColumn(updatedAtCheckbox);
}
}
// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
// Setup select-all checkbox
@@ -1092,7 +1120,6 @@ document.addEventListener('DOMContentLoaded', function() {
setupRadioLikeCheckboxes('has_coords_kupsat');
setupRadioLikeCheckboxes('has_coords_valid');
setupRadioLikeCheckboxes('has_coords_reference');
setupRadioLikeCheckboxes('has_signal_mark');
// Update filter counter on page load
updateFilterCounter();
@@ -1122,6 +1149,9 @@ document.addEventListener('DOMContentLoaded', function() {
if (offcanvasElement) {
offcanvasElement.addEventListener('show.bs.offcanvas', updateFilterCounter);
}
// Initialize column visibility
setTimeout(initColumnVisibility, 100);
});
// Show source details in modal