geralt/dbstorage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавил отметки с источниками

Browse Source
This commit is contained in:
Кошкин Сергей
2025-12-17 11:39:45 +03:00
parent 9066e28d35
commit 0a01769bf3
4 changed files with 807 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
dbapp/mainapp/templates/mainapp/source_list.html
View File

@@ -1620,6 +1620,19 @@ function showPlaybackAnimation() {
window.open(url, '_blank');
}
// Function to show source marks for selected sources
function showSourceMarks() {
if (!window.selectedSources || window.selectedSources.length === 0) {
alert('Список источников пуст');
return;
}
const selectedIds = window.selectedSources.map(source => source.id);
const url = '{% url "mainapp:source_marks" %}' + '?ids=' + selectedIds.join(',');
window.open(url, '_blank');
}
// Function to merge selected sources
function mergeSelectedSources() {
if (!window.selectedSources || window.selectedSources.length < 2) {
@@ -2226,6 +2239,9 @@ function showTransponderModal(transponderId) {
<button type="button" class="btn btn-outline-info btn-sm" onclick="showPlaybackAnimation()" title="Анимация движения объектов">
<i class="bi bi-play-circle"></i> Анимация
</button>
<button type="button" class="btn btn-outline-warning btn-sm" onclick="showSourceMarks()" title="Отметки сигналов по источникам">
<i class="bi bi-check2-square"></i> Отметки
</button>
{% if user|has_perm:'source_merge' %}
<button type="button" class="btn btn-outline-success btn-sm" onclick="mergeSelectedSources()">
<i class="bi bi-union"></i> Объединить

483
dbapp/mainapp/templates/mainapp/source_marks.html Normal file
View File

@@ -0,0 +1,483 @@
{% extends "mainapp/base.html" %}
{% load static %}
{% block title %}Отметки сигналов по источникам{% endblock %}
{% block extra_css %}
<style>
.mark-cell { text-align: center; padding: 4px 6px; font-size: 0.8rem; white-space: nowrap; }
.mark-present { background-color: #d4edda !important; color: #155724; }
.mark-absent { background-color: #f8d7da !important; color: #721c24; }
.mark-empty { background-color: #f8f9fa; color: #adb5bd; }
.filter-panel { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.375rem; padding: 1rem; margin-bottom: 1rem; }
.history-table { font-size: 0.85rem; border-collapse: collapse; border-spacing: 0; }
.history-table th { position: sticky; top: 0; background: #343a40; color: white; font-weight: 500; white-space: nowrap; padding: 6px 8px; font-size: 0.75rem; z-index: 5; border: 1px solid #495057; }
.history-table td { padding: 4px 6px; vertical-align: middle; border: 1px solid #dee2e6; }
/* Фиксированные колонки */
.history-table .sticky-col { position: sticky; background: #f8f9fa; z-index: 2; box-sizing: border-box; }
.history-table thead .sticky-col { background: #343a40; z-index: 10; }
.history-table tbody tr:hover .sticky-col { background: #e9ecef; }
/* Жёсткие размеры для фиксированных колонок */
.history-table .col-name { left: 0; width: 200px !important; min-width: 200px !important; max-width: 200px !important; white-space: normal; word-break: break-word; }
.history-table .col-coords { left: 200px; width: 150px !important; min-width: 150px !important; max-width: 150px !important; text-align: center; font-size: 0.75rem; }
.history-table .col-satellite { left: 350px; width: 100px !important; min-width: 100px !important; max-width: 100px !important; text-align: center; }
.history-table .col-frequency { left: 450px; width: 80px !important; min-width: 80px !important; max-width: 80px !important; text-align: center; }
.history-table .col-freq_range { left: 530px; width: 70px !important; min-width: 70px !important; max-width: 70px !important; text-align: center; }
.history-table .col-polarization { left: 600px; width: 70px !important; min-width: 70px !important; max-width: 70px !important; text-align: center; }
.history-table .col-modulation { left: 670px; width: 70px !important; min-width: 70px !important; max-width: 70px !important; text-align: center; }
.history-table .col-bod_velocity { left: 740px; width: 80px !important; min-width: 80px !important; max-width: 80px !important; text-align: center; }
.history-wrapper { max-height: 75vh; overflow: auto; }
.col-hidden { display: none !important; }
/* Отметки в ячейке */
.marks-container { display: flex; gap: 3px; justify-content: center; align-items: center; flex-wrap: nowrap; }
.mark-icon { font-size: 0.85rem; font-weight: bold; cursor: default; padding: 1px 3px; border-radius: 2px; }
.mark-icon-yes { color: #155724; background: #d4edda; }
.mark-icon-no { color: #721c24; background: #f8d7da; }
.history-table td.mark-cell-container { white-space: nowrap; min-width: 40px; }
.tooltip-inner { text-align: left !important; max-width: 300px; }
</style>
{% endblock %}
{% block content %}
<div class="container-fluid px-3">
<div class="row mb-3">
<div class="col-12">
<h2>
<i class="bi bi-check2-square"></i> Отметки сигналов по источникам
<span class="badge bg-info">{{ source_ids|length }} источников</span>
</h2>
<a href="{% url 'mainapp:source_list' %}" class="btn btn-outline-secondary btn-sm">
<i class="bi bi-arrow-left"></i> Назад к списку
</a>
</div>
</div>
<div class="filter-panel">
<div class="row align-items-end g-2">
<div class="col-md-3">
<label class="form-label">Поиск (имя или частота):</label>
<input type="text" id="history-search" class="form-control form-control-sm" placeholder="Введите имя или частоту..." oninput="filterHistoryTable()">
</div>
<div class="col-md-5">
<div class="d-flex gap-2 flex-wrap">
<button class="btn btn-primary btn-sm" onclick="loadData()">
<i class="bi bi-arrow-clockwise"></i> Обновить
</button>
<button class="btn btn-outline-primary btn-sm" type="button" data-bs-toggle="offcanvas" data-bs-target="#filtersOffcanvas">
<i class="bi bi-funnel"></i> Фильтры <span id="filterCounter" class="badge bg-danger" style="display: none;">0</span>
</button>
<div class="dropdown">
<button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside">
<i class="bi bi-gear"></i> Колонки
</button>
<ul class="dropdown-menu" style="min-width: 200px;">
<li><label class="dropdown-item"><input type="checkbox" id="col-toggle-all" onchange="toggleAllColumns(this)"> Выбрать всё</label></li>
<li><hr class="dropdown-divider"></li>
<li><label class="dropdown-item"><input type="checkbox" class="col-toggle" data-col="name" checked onchange="toggleColumn(this)"> Имя</label></li>
<li><label class="dropdown-item"><input type="checkbox" class="col-toggle" data-col="coords" checked onchange="toggleColumn(this)"> Координаты</label></li>
<li><label class="dropdown-item"><input type="checkbox" class="col-toggle" data-col="satellite" checked onchange="toggleColumn(this)"> Спутник</label></li>
<li><label class="dropdown-item"><input type="checkbox" class="col-toggle" data-col="frequency" onchange="toggleColumn(this)"> Частота</label></li>
<li><label class="dropdown-item"><input type="checkbox" class="col-toggle" data-col="freq_range" onchange="toggleColumn(this)"> Полоса</label></li>
<li><label class="dropdown-item"><input type="checkbox" class="col-toggle" data-col="polarization" onchange="toggleColumn(this)"> Поляризация</label></li>
<li><label class="dropdown-item"><input type="checkbox" class="col-toggle" data-col="modulation" onchange="toggleColumn(this)"> Модуляция</label></li>
<li><label class="dropdown-item"><input type="checkbox" class="col-toggle" data-col="bod_velocity" onchange="toggleColumn(this)"> Бодовая скорость</label></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 text-end">
<span id="dateRangeInfo" class="text-muted small"></span>
</div>
</div>
</div>
<div class="card">
<div class="card-body p-0">
<div class="history-wrapper" id="data-container">
<div class="text-center p-4">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Загрузка...</span>
</div>
<p class="mt-2">Загрузка данных...</p>
</div>
</div>
</div>
</div>
</div>
<!-- Offcanvas Filters -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="filtersOffcanvas" aria-labelledby="filtersLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="filtersLabel">Фильтры</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
</div>
<div class="offcanvas-body">
<!-- Polarization -->
<div class="mb-3">
<label class="form-label fw-bold">Поляризация:</label>
<div class="d-flex justify-content-between mb-1">
<button type="button" class="btn btn-sm btn-outline-secondary py-0" onclick="selectAllFilterOptions('filter-polarization', true)">Все</button>
<button type="button" class="btn btn-sm btn-outline-secondary py-0" onclick="selectAllFilterOptions('filter-polarization', false)">Снять</button>
</div>
<select id="filter-polarization" class="form-select form-select-sm" multiple size="5">
{% for pol in polarizations %}
<option value="{{ pol.id }}">{{ pol.name }}</option>
{% endfor %}
</select>
</div>
<!-- Modulation -->
<div class="mb-3">
<label class="form-label fw-bold">Модуляция:</label>
<div class="d-flex justify-content-between mb-1">
<button type="button" class="btn btn-sm btn-outline-secondary py-0" onclick="selectAllFilterOptions('filter-modulation', true)">Все</button>
<button type="button" class="btn btn-sm btn-outline-secondary py-0" onclick="selectAllFilterOptions('filter-modulation', false)">Снять</button>
</div>
<select id="filter-modulation" class="form-select form-select-sm" multiple size="5">
{% for mod in modulations %}
<option value="{{ mod.id }}">{{ mod.name }}</option>
{% endfor %}
</select>
</div>
<!-- Frequency Range -->
<div class="mb-3">
<label class="form-label fw-bold">Частота (МГц):</label>
<div class="row g-2">
<div class="col-6"><input type="number" id="filter-freq-min" class="form-control form-control-sm" placeholder="От" step="0.001"></div>
<div class="col-6"><input type="number" id="filter-freq-max" class="form-control form-control-sm" placeholder="До" step="0.001"></div>
</div>
</div>
<!-- Bandwidth Range -->
<div class="mb-3">
<label class="form-label fw-bold">Полоса (МГц):</label>
<div class="row g-2">
<div class="col-6"><input type="number" id="filter-freq-range-min" class="form-control form-control-sm" placeholder="От" step="0.001"></div>
<div class="col-6"><input type="number" id="filter-freq-range-max" class="form-control form-control-sm" placeholder="До" step="0.001"></div>
</div>
</div>
<!-- Baud Velocity Range -->
<div class="mb-3">
<label class="form-label fw-bold">Бодовая скорость:</label>
<div class="row g-2">
<div class="col-6"><input type="number" id="filter-bod-min" class="form-control form-control-sm" placeholder="От" step="0.1"></div>
<div class="col-6"><input type="number" id="filter-bod-max" class="form-control form-control-sm" placeholder="До" step="0.1"></div>
</div>
</div>
<div class="d-grid gap-2">
<button class="btn btn-primary" onclick="loadData(); bootstrap.Offcanvas.getInstance(document.getElementById('filtersOffcanvas')).hide();">
Применить фильтры
</button>
<button class="btn btn-outline-secondary" onclick="clearAllFilters()">
Очистить фильтры
</button>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script>
const sourceIds = {{ source_ids_json|safe }};
// Column visibility state
const COLUMN_STORAGE_KEY = 'sourceMarksColumns';
let columnVisibility = {
name: true,
coords: true,
satellite: true,
frequency: false,
freq_range: false,
polarization: false,
modulation: false,
bod_velocity: false
};
// Load column visibility from localStorage
function loadColumnVisibility() {
const saved = localStorage.getItem(COLUMN_STORAGE_KEY);
if (saved) {
try {
columnVisibility = JSON.parse(saved);
} catch (e) {}
}
document.querySelectorAll('.col-toggle').forEach(cb => {
const col = cb.dataset.col;
cb.checked = columnVisibility[col] !== false;
});
updateSelectAllCheckbox();
}
function saveColumnVisibility() {
localStorage.setItem(COLUMN_STORAGE_KEY, JSON.stringify(columnVisibility));
}
function toggleColumn(checkbox) {
const col = checkbox.dataset.col;
columnVisibility[col] = checkbox.checked;
saveColumnVisibility();
applyColumnVisibility();
updateSelectAllCheckbox();
updateStickyPositions();
}
function toggleAllColumns(checkbox) {
const checked = checkbox.checked;
document.querySelectorAll('.col-toggle').forEach(cb => {
cb.checked = checked;
columnVisibility[cb.dataset.col] = checked;
});
saveColumnVisibility();
applyColumnVisibility();
updateStickyPositions();
}
function updateSelectAllCheckbox() {
const checkboxes = document.querySelectorAll('.col-toggle');
const allChecked = Array.from(checkboxes).every(cb => cb.checked);
document.getElementById('col-toggle-all').checked = allChecked;
}
function applyColumnVisibility() {
const cols = ['name', 'coords', 'satellite', 'frequency', 'freq_range', 'polarization', 'modulation', 'bod_velocity'];
cols.forEach(col => {
const cells = document.querySelectorAll(`.col-${col}`);
cells.forEach(cell => {
if (columnVisibility[col]) {
cell.classList.remove('col-hidden');
} else {
cell.classList.add('col-hidden');
}
});
});
}
function updateStickyPositions() {
const colWidths = {
name: 200,
coords: 150,
satellite: 100,
frequency: 80,
freq_range: 70,
polarization: 70,
modulation: 70,
bod_velocity: 80
};
const cols = ['name', 'coords', 'satellite', 'frequency', 'freq_range', 'polarization', 'modulation', 'bod_velocity'];
let leftPos = 0;
cols.forEach(col => {
const cells = document.querySelectorAll(`.col-${col}`);
if (columnVisibility[col]) {
cells.forEach(cell => {
cell.style.left = leftPos + 'px';
});
leftPos += colWidths[col];
}
});
}
function loadData() {
const container = document.getElementById('data-container');
container.innerHTML = '<div class="text-center p-4"><div class="spinner-border"></div> Загрузка...</div>';
const params = new URLSearchParams({
ids: sourceIds.join(',')
});
// Add filter params
const polSelect = document.getElementById('filter-polarization');
Array.from(polSelect.selectedOptions).forEach(opt => params.append('polarization_id', opt.value));
const modSelect = document.getElementById('filter-modulation');
Array.from(modSelect.selectedOptions).forEach(opt => params.append('modulation_id', opt.value));
const filterMapping = {
'freq-min': 'freq_min',
'freq-max': 'freq_max',
'freq-range-min': 'freq_range_min',
'freq-range-max': 'freq_range_max',
'bod-min': 'bod_velocity_min',
'bod-max': 'bod_velocity_max'
};
Object.entries(filterMapping).forEach(([id, paramName]) => {
const el = document.getElementById('filter-' + id);
if (el && el.value) {
params.append(paramName, el.value);
}
});
fetch(`{% url 'mainapp:source_marks_api' %}?${params}`)
.then(r => r.json())
.then(data => {
if (data.error) {
container.innerHTML = `<div class="alert alert-danger m-3">${data.error}</div>`;
return;
}
if (data.message && (!data.data || data.data.length === 0)) {
container.innerHTML = `<div class="alert alert-info m-3">${data.message}</div>`;
return;
}
// Update date range info
if (data.date_range) {
document.getElementById('dateRangeInfo').textContent = data.date_range;
}
renderTable(data);
updateFilterCounter();
})
.catch(err => {
container.innerHTML = `<div class="alert alert-danger m-3">Ошибка загрузки: ${err}</div>`;
});
}
function renderTable(data) {
const container = document.getElementById('data-container');
if (!data.data || data.data.length === 0) {
container.innerHTML = '<div class="alert alert-info m-3">Нет данных для отображения</div>';
return;
}
let html = '<table class="table table-bordered table-sm history-table"><thead><tr>';
html += '<th class="sticky-col col-name">Имя</th>';
html += '<th class="sticky-col col-coords">Координаты ГЛ</th>';
html += '<th class="sticky-col col-satellite">Спутник</th>';
html += '<th class="sticky-col col-frequency">Частота</th>';
html += '<th class="sticky-col col-freq_range">Полоса</th>';
html += '<th class="sticky-col col-polarization">Пол.</th>';
html += '<th class="sticky-col col-modulation">Мод.</th>';
html += '<th class="sticky-col col-bod_velocity">Бод. скор.</th>';
if (data.periods && data.periods.length > 0) {
data.periods.forEach(p => { html += `<th class="mark-cell">${p}</th>`; });
}
html += '</tr></thead><tbody>';
data.data.forEach(row => {
html += '<tr>';
html += `<td class="sticky-col col-name">${row.name}</td>`;
html += `<td class="sticky-col col-coords">${row.coords_average || '-'}</td>`;
html += `<td class="sticky-col col-satellite">${row.satellite || '-'}</td>`;
html += `<td class="sticky-col col-frequency">${row.frequency || '-'}</td>`;
html += `<td class="sticky-col col-freq_range">${row.freq_range || '-'}</td>`;
html += `<td class="sticky-col col-polarization">${row.polarization}</td>`;
html += `<td class="sticky-col col-modulation">${row.modulation}</td>`;
html += `<td class="sticky-col col-bod_velocity">${row.bod_velocity || '-'}</td>`;
if (row.marks) {
row.marks.forEach(m => {
if (m && m.items && m.items.length > 0) {
const sortedItems = [...m.items].sort((a, b) => {
const timeA = a.time.split(':').map(Number);
const timeB = b.time.split(':').map(Number);
return (timeA[0] * 60 + timeA[1]) - (timeB[0] * 60 + timeB[1]);
});
const tooltipLines = sortedItems.map(item => {
const icon = item.mark ? '✓' : '✗';
return `${icon} ${item.time} - ${item.user}`;
});
const tooltipContent = tooltipLines.join('<br>');
let iconsHtml = '<div class="marks-container">';
sortedItems.forEach(item => {
const iconCls = item.mark ? 'mark-icon-yes' : 'mark-icon-no';
const icon = item.mark ? '✓' : '✗';
iconsHtml += `<span class="mark-icon ${iconCls}">${icon}</span>`;
});
iconsHtml += '</div>';
html += `<td class="mark-cell mark-cell-container" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" title="${tooltipContent.replace(/"/g, '&quot;')}">${iconsHtml}</td>`;
} else {
html += '<td class="mark-cell mark-empty">-</td>';
}
});
}
html += '</tr>';
});
html += '</tbody></table>';
container.innerHTML = html;
loadColumnVisibility();
applyColumnVisibility();
updateStickyPositions();
// Initialize Bootstrap tooltips
const tooltipTriggerList = container.querySelectorAll('[data-bs-toggle="tooltip"]');
tooltipTriggerList.forEach(el => new bootstrap.Tooltip(el));
}
function filterHistoryTable() {
const search = document.getElementById('history-search').value.toLowerCase().trim();
const rows = document.querySelectorAll('#data-container tbody tr');
rows.forEach(row => {
const name = row.querySelector('.col-name')?.textContent.toLowerCase() || '';
const freq = row.querySelector('.col-frequency')?.textContent.toLowerCase() || '';
const match = !search || name.includes(search) || freq.includes(search);
row.style.display = match ? '' : 'none';
});
}
function clearAllFilters() {
document.getElementById('filter-polarization').selectedIndex = -1;
document.getElementById('filter-modulation').selectedIndex = -1;
document.getElementById('filter-freq-min').value = '';
document.getElementById('filter-freq-max').value = '';
document.getElementById('filter-freq-range-min').value = '';
document.getElementById('filter-freq-range-max').value = '';
document.getElementById('filter-bod-min').value = '';
document.getElementById('filter-bod-max').value = '';
updateFilterCounter();
}
function selectAllFilterOptions(selectId, select) {
const el = document.getElementById(selectId);
Array.from(el.options).forEach(opt => opt.selected = select);
}
function updateFilterCounter() {
let count = 0;
if (document.getElementById('filter-polarization').selectedOptions.length > 0) count++;
if (document.getElementById('filter-modulation').selectedOptions.length > 0) count++;
if (document.getElementById('filter-freq-min').value) count++;
if (document.getElementById('filter-freq-max').value) count++;
if (document.getElementById('filter-freq-range-min').value) count++;
if (document.getElementById('filter-freq-range-max').value) count++;
if (document.getElementById('filter-bod-min').value) count++;
if (document.getElementById('filter-bod-max').value) count++;
const badge = document.getElementById('filterCounter');
if (count > 0) {
badge.textContent = count;
badge.style.display = '';
} else {
badge.style.display = 'none';
}
}
// Init
document.addEventListener('DOMContentLoaded', function() {
loadColumnVisibility();
if (sourceIds && sourceIds.length > 0) {
loadData();
} else {
document.getElementById('data-container').innerHTML = '<div class="alert alert-warning m-3">Не выбраны источники</div>';
}
});
</script>
{% endblock %}