From ed9a79f94a4c4c7f57da9ef10690c717ed3b7af7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9A=D0=BE=D1=88=D0=BA=D0=B8=D0=BD=20=D0=A1=D0=B5=D1=80?=
 =?UTF-8?q?=D0=B3=D0=B5=D0=B9?= <ckoshkin@yandex.ru>
Date: Sun, 23 Nov 2025 23:27:09 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=BE=D0=B4=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20=D1=87=D0=B0=D1=81=D1=82=D0=BE=D1=82=D0=BD=D1=8B?=
 =?UTF-8?q?=D0=B9=20=D0=BF=D0=BB=D0=B0=D0=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/mainapp/satellite_form.html     | 446 +++++++++++++-----
 1 file changed, 321 insertions(+), 125 deletions(-)

diff --git a/dbapp/mainapp/templates/mainapp/satellite_form.html b/dbapp/mainapp/templates/mainapp/satellite_form.html
index 5ba7d29..98c8eb4 100644
--- a/dbapp/mainapp/templates/mainapp/satellite_form.html
+++ b/dbapp/mainapp/templates/mainapp/satellite_form.html
@@ -17,12 +17,7 @@
         border: 1px solid #dee2e6;
         border-radius: 4px;
         padding: 20px;
-        overflow-x: auto;
-    }
-    
-    #frequencyCanvas {
-        display: block;
-        cursor: crosshair;
+        height: 400px;
     }
     
     .legend {
@@ -44,18 +39,16 @@
         border-radius: 3px;
     }
     
-    .transponder-tooltip {
-        position: absolute;
-        background: rgba(0, 0, 0, 0.9);
-        color: white;
-        padding: 10px;
-        border-radius: 4px;
-        font-size: 0.85rem;
-        pointer-events: none;
-        z-index: 1000;
-        display: none;
-        max-width: 300px;
-        white-space: pre-line;
+    .chart-controls {
+        display: flex;
+        gap: 10px;
+        margin-bottom: 15px;
+        flex-wrap: wrap;
+    }
+    
+    .chart-controls button {
+        padding: 5px 15px;
+        font-size: 0.9rem;
     }
 </style>
 {% endblock %}
@@ -214,16 +207,28 @@
 
     {% if action == 'update' and transponders %}
     <!-- Frequency Plan Visualization -->
-    <!-- <div class="row mt-4">
+    <div class="row mt-4">
         <div class="col-12">
             <div class="card">
                 <div class="card-body">
                     <h4>Частотный план</h4>
-                    <p class="text-muted">Визуализация транспондеров спутника по частотам (Downlink). Наведите курсор на транспондер для подробной информации.</p>
+                    <p class="text-muted">Визуализация транспондеров спутника по частотам (Downlink). Используйте колесико мыши для масштабирования, наведите курсор на полосу для подробной информации.</p>
                     
                     <div class="frequency-plan">
+                        <div class="chart-controls">
+                            <button type="button" class="btn btn-sm btn-outline-primary" id="resetZoom">
+                                <i class="bi bi-arrow-clockwise"></i> Сбросить масштаб
+                            </button>
+                            <button type="button" class="btn btn-sm btn-outline-secondary" id="zoomIn">
+                                <i class="bi bi-zoom-in"></i> Увеличить
+                            </button>
+                            <button type="button" class="btn btn-sm btn-outline-secondary" id="zoomOut">
+                                <i class="bi bi-zoom-out"></i> Уменьшить
+                            </button>
+                        </div>
+                        
                         <div class="frequency-chart-container">
-                            <canvas id="frequencyCanvas"></canvas>
+                            <canvas id="frequencyChart"></canvas>
                         </div>
                         
                         <div class="legend">
@@ -256,9 +261,7 @@
                 </div>
             </div>
         </div>
-    </div> -->
-    
-    <div class="transponder-tooltip" id="transponderTooltip"></div>
+    </div>
     {% endif %}
 </div>
 {% endblock %}
@@ -267,7 +270,7 @@
 {% if action == 'update' and transponders %}
 <script>
 // Transponder data from Django
-const transponders = {{ transponders|safe }};
+const transpondersData = {{ transponders|safe }};
 
 // Color mapping for polarizations
 const polarizationColors = {
@@ -278,88 +281,129 @@ const polarizationColors = {
     'default': '#6c757d'
 };
 
-let canvas, ctx, tooltip;
-let hoveredTransponder = null;
-
 function getColor(polarization) {
     return polarizationColors[polarization] || polarizationColors['default'];
 }
 
-function renderFrequencyPlan() {
-    if (!transponders || transponders.length === 0) {
+// Chart state
+let canvas, ctx, container;
+let zoomLevel = 1;
+let panOffset = 0;
+let isDragging = false;
+let dragStartX = 0;
+let dragStartOffset = 0;
+let hoveredTransponder = null;
+let transponderRects = [];
+
+// Frequency range
+let minFreq, maxFreq, freqRange;
+let originalMinFreq, originalMaxFreq, originalFreqRange;
+
+function initializeFrequencyChart() {
+    if (!transpondersData || transpondersData.length === 0) {
         return;
     }
     
-    canvas = document.getElementById('frequencyCanvas');
+    canvas = document.getElementById('frequencyChart');
+    if (!canvas) return;
+    
+    container = canvas.parentElement;
     ctx = canvas.getContext('2d');
-    tooltip = document.getElementById('transponderTooltip');
     
-    // Find min and max frequencies
-    let minFreq = Infinity;
-    let maxFreq = -Infinity;
+    // Calculate frequency range
+    minFreq = Infinity;
+    maxFreq = -Infinity;
     
-    transponders.forEach(t => {
+    transpondersData.forEach(t => {
         const startFreq = t.downlink - (t.frequency_range / 2);
         const endFreq = t.downlink + (t.frequency_range / 2);
         minFreq = Math.min(minFreq, startFreq);
         maxFreq = Math.max(maxFreq, endFreq);
     });
     
-    // Add padding (5%)
-    const padding = (maxFreq - minFreq) * 0.05;
+    // Add 2% padding
+    const padding = (maxFreq - minFreq) * 0.02;
     minFreq -= padding;
     maxFreq += padding;
     
-    const freqRange = maxFreq - minFreq;
+    // Store original values
+    originalMinFreq = minFreq;
+    originalMaxFreq = maxFreq;
+    originalFreqRange = maxFreq - minFreq;
+    freqRange = originalFreqRange;
+    
+    // Setup event listeners
+    canvas.addEventListener('wheel', handleWheel, { passive: false });
+    canvas.addEventListener('mousedown', handleMouseDown);
+    canvas.addEventListener('mousemove', handleMouseMove);
+    canvas.addEventListener('mouseup', handleMouseUp);
+    canvas.addEventListener('mouseleave', handleMouseLeave);
+    
+    renderChart();
+}
+
+function renderChart() {
+    if (!canvas || !ctx) return;
     
     // Set canvas size
-    const container = canvas.parentElement;
-    const canvasWidth = Math.max(container.clientWidth - 40, 800);
-    const rowHeight = 50;
-    const topMargin = 40;
-    const bottomMargin = 60;
+    const dpr = window.devicePixelRatio || 1;
+    const rect = container.getBoundingClientRect();
+    const width = rect.width;
+    const height = rect.height;
     
-    // Group transponders by polarization to stack them
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    canvas.style.width = width + 'px';
+    canvas.style.height = height + 'px';
+    ctx.scale(dpr, dpr);
+    
+    // Clear canvas
+    ctx.clearRect(0, 0, width, height);
+    
+    // Layout constants
+    const leftMargin = 60;
+    const rightMargin = 20;
+    const topMargin = 40;
+    const bottomMargin = 40;
+    const chartWidth = width - leftMargin - rightMargin;
+    const chartHeight = height - topMargin - bottomMargin;
+    
+    // Group transponders by polarization
     const polarizationGroups = {};
-    transponders.forEach(t => {
-        const pol = t.polarization || 'default';
+    transpondersData.forEach(t => {
+        const pol = t.polarization || 'Другая';
         if (!polarizationGroups[pol]) {
             polarizationGroups[pol] = [];
         }
         polarizationGroups[pol].push(t);
     });
     
-    const numRows = Object.keys(polarizationGroups).length;
-    const canvasHeight = topMargin + (numRows * rowHeight) + bottomMargin;
+    const polarizations = Object.keys(polarizationGroups);
+    const rowHeight = chartHeight / polarizations.length;
     
-    // Set canvas dimensions (use device pixel ratio for sharp rendering)
-    const dpr = window.devicePixelRatio || 1;
-    canvas.width = canvasWidth * dpr;
-    canvas.height = canvasHeight * dpr;
-    canvas.style.width = canvasWidth + 'px';
-    canvas.style.height = canvasHeight + 'px';
-    ctx.scale(dpr, dpr);
-    
-    // Clear canvas
-    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+    // Calculate visible frequency range with zoom and pan
+    const visibleFreqRange = freqRange / zoomLevel;
+    const centerFreq = (minFreq + maxFreq) / 2;
+    const visibleMinFreq = centerFreq - visibleFreqRange / 2 + panOffset;
+    const visibleMaxFreq = centerFreq + visibleFreqRange / 2 + panOffset;
     
     // Draw frequency axis
     ctx.strokeStyle = '#dee2e6';
     ctx.lineWidth = 1;
     ctx.beginPath();
-    ctx.moveTo(0, topMargin);
-    ctx.lineTo(canvasWidth, topMargin);
+    ctx.moveTo(leftMargin, topMargin);
+    ctx.lineTo(width - rightMargin, topMargin);
     ctx.stroke();
     
-    // Draw frequency labels
+    // Draw frequency labels and grid
     ctx.fillStyle = '#6c757d';
-    ctx.font = '12px sans-serif';
+    ctx.font = '11px sans-serif';
     ctx.textAlign = 'center';
     
-    const numLabels = 10;
-    for (let i = 0; i <= numLabels; i++) {
-        const freq = minFreq + (freqRange * i / numLabels);
-        const x = (canvasWidth * i / numLabels);
+    const numTicks = 10;
+    for (let i = 0; i <= numTicks; i++) {
+        const freq = visibleMinFreq + (visibleMaxFreq - visibleMinFreq) * i / numTicks;
+        const x = leftMargin + chartWidth * i / numTicks;
         
         // Draw tick
         ctx.beginPath();
@@ -367,114 +411,266 @@ function renderFrequencyPlan() {
         ctx.lineTo(x, topMargin - 5);
         ctx.stroke();
         
+        // Draw grid line
+        ctx.strokeStyle = 'rgba(0, 0, 0, 0.05)';
+        ctx.beginPath();
+        ctx.moveTo(x, topMargin);
+        ctx.lineTo(x, height - bottomMargin);
+        ctx.stroke();
+        ctx.strokeStyle = '#dee2e6';
+        
         // Draw label
         ctx.fillText(freq.toFixed(1), x, topMargin - 10);
     }
     
-    // Draw "МГц" label
-    ctx.textAlign = 'right';
-    ctx.fillText('МГц', canvasWidth, topMargin - 25);
+    // Draw axis title
+    ctx.fillStyle = '#000';
+    ctx.font = 'bold 12px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText('Частота (МГц)', width / 2, topMargin - 25);
     
-    // Store transponder positions for hover detection
-    const transponderRects = [];
+    // Draw polarization label
+    ctx.save();
+    ctx.translate(15, height / 2);
+    ctx.rotate(-Math.PI / 2);
+    ctx.textAlign = 'center';
+    ctx.fillText('Поляризация', 0, 0);
+    ctx.restore();
+    
+    // Clear transponder rects for hover detection
+    transponderRects = [];
     
     // Draw transponders
-    let yOffset = topMargin + 10;
-    
-    Object.keys(polarizationGroups).forEach((pol, groupIndex) => {
+    polarizations.forEach((pol, index) => {
         const group = polarizationGroups[pol];
         const color = getColor(pol);
+        const y = topMargin + index * rowHeight;
+        const barHeight = rowHeight * 0.7;
+        const barY = y + (rowHeight - barHeight) / 2;
         
         // Draw polarization label
         ctx.fillStyle = '#000';
-        ctx.font = 'bold 14px sans-serif';
-        ctx.textAlign = 'left';
-        ctx.fillText(`${pol}:`, 5, yOffset + 20);
+        ctx.font = 'bold 12px sans-serif';
+        ctx.textAlign = 'right';
+        ctx.fillText(pol, leftMargin - 10, barY + barHeight / 2 + 4);
         
+        // Draw transponders
         group.forEach(t => {
             const startFreq = t.downlink - (t.frequency_range / 2);
             const endFreq = t.downlink + (t.frequency_range / 2);
             
-            const x = ((startFreq - minFreq) / freqRange) * canvasWidth;
-            const width = ((endFreq - startFreq) / freqRange) * canvasWidth;
-            const y = yOffset;
-            const height = 30;
+            // Check if transponder is visible
+            if (endFreq < visibleMinFreq || startFreq > visibleMaxFreq) {
+                return;
+            }
             
-            // Draw transponder bar
+            // Calculate position
+            const x1 = leftMargin + ((startFreq - visibleMinFreq) / (visibleMaxFreq - visibleMinFreq)) * chartWidth;
+            const x2 = leftMargin + ((endFreq - visibleMinFreq) / (visibleMaxFreq - visibleMinFreq)) * chartWidth;
+            const barWidth = x2 - x1;
+            
+            // Skip if too small
+            if (barWidth < 1) return;
+            
+            // Draw bar
             ctx.fillStyle = color;
-            ctx.fillRect(x, y, width, height);
+            ctx.fillRect(x1, barY, barWidth, barHeight);
             
             // Draw border
             ctx.strokeStyle = '#fff';
             ctx.lineWidth = 2;
-            ctx.strokeRect(x, y, width, height);
+            ctx.strokeRect(x1, barY, barWidth, barHeight);
             
-            // Draw transponder name if there's enough space
-            if (width > 50) {
-                ctx.fillStyle = pol === 'R' ? '#000' : '#fff';
-                ctx.font = '11px sans-serif';
+            // Draw name if there's space
+            if (barWidth > 40) {
+                ctx.fillStyle = (pol === 'R') ? '#000' : '#fff';
+                ctx.font = '10px sans-serif';
                 ctx.textAlign = 'center';
-                ctx.fillText(t.name, x + width / 2, y + height / 2 + 4);
+                ctx.fillText(t.name, x1 + barWidth / 2, barY + barHeight / 2 + 3);
             }
             
             // Store for hover detection
             transponderRects.push({
-                x, y, width, height,
-                data: t
+                x: x1,
+                y: barY,
+                width: barWidth,
+                height: barHeight,
+                transponder: t
             });
         });
-        
-        yOffset += rowHeight;
     });
     
-    // Add mouse move event for tooltip
-    canvas.addEventListener('mousemove', (e) => {
-        const rect = canvas.getBoundingClientRect();
-        const mouseX = e.clientX - rect.left;
-        const mouseY = e.clientY - rect.top;
+    // Draw hover tooltip
+    if (hoveredTransponder) {
+        drawTooltip(hoveredTransponder);
+    }
+}
+
+function drawTooltip(t) {
+    const startFreq = t.downlink - (t.frequency_range / 2);
+    const endFreq = t.downlink + (t.frequency_range / 2);
+    
+    const lines = [
+        t.name,
+        'Диапазон: ' + startFreq.toFixed(3) + ' - ' + endFreq.toFixed(3) + ' МГц',
+        'Downlink: ' + t.downlink.toFixed(3) + ' МГц',
+        'Полоса: ' + t.frequency_range.toFixed(3) + ' МГц',
+        'Поляризация: ' + t.polarization,
+        'Зона: ' + t.zone_name
+    ];
+    
+    // Calculate tooltip size
+    ctx.font = '12px sans-serif';
+    const padding = 10;
+    const lineHeight = 16;
+    let maxWidth = 0;
+    lines.forEach(line => {
+        const width = ctx.measureText(line).width;
+        maxWidth = Math.max(maxWidth, width);
+    });
+    
+    const tooltipWidth = maxWidth + padding * 2;
+    const tooltipHeight = lines.length * lineHeight + padding * 2;
+    
+    // Position tooltip
+    const mouseX = hoveredTransponder._mouseX || canvas.width / 2;
+    const mouseY = hoveredTransponder._mouseY || canvas.height / 2;
+    let tooltipX = mouseX + 15;
+    let tooltipY = mouseY + 15;
+    
+    // Keep tooltip in bounds
+    if (tooltipX + tooltipWidth > canvas.width) {
+        tooltipX = mouseX - tooltipWidth - 15;
+    }
+    if (tooltipY + tooltipHeight > canvas.height) {
+        tooltipY = mouseY - tooltipHeight - 15;
+    }
+    
+    // Draw tooltip background
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.9)';
+    ctx.fillRect(tooltipX, tooltipY, tooltipWidth, tooltipHeight);
+    
+    // Draw tooltip text
+    ctx.fillStyle = '#fff';
+    ctx.font = 'bold 12px sans-serif';
+    ctx.textAlign = 'left';
+    ctx.fillText(lines[0], tooltipX + padding, tooltipY + padding + 12);
+    
+    ctx.font = '11px sans-serif';
+    for (let i = 1; i < lines.length; i++) {
+        ctx.fillText(lines[i], tooltipX + padding, tooltipY + padding + 12 + i * lineHeight);
+    }
+}
+
+function handleWheel(e) {
+    e.preventDefault();
+    
+    const delta = e.deltaY > 0 ? 0.9 : 1.1;
+    const newZoom = Math.max(1, Math.min(20, zoomLevel * delta));
+    
+    if (newZoom !== zoomLevel) {
+        zoomLevel = newZoom;
         
-        hoveredTransponder = null;
+        // Adjust pan to keep center
+        const maxPan = (originalFreqRange * (zoomLevel - 1)) / (2 * zoomLevel);
+        panOffset = Math.max(-maxPan, Math.min(maxPan, panOffset));
         
+        renderChart();
+    }
+}
+
+function handleMouseDown(e) {
+    isDragging = true;
+    dragStartX = e.clientX;
+    dragStartOffset = panOffset;
+    canvas.style.cursor = 'grabbing';
+}
+
+function handleMouseMove(e) {
+    const rect = canvas.getBoundingClientRect();
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
+    
+    if (isDragging) {
+        const dx = e.clientX - dragStartX;
+        const freqPerPixel = (freqRange / zoomLevel) / (rect.width - 80);
+        panOffset = dragStartOffset - dx * freqPerPixel;
+        
+        // Limit pan
+        const maxPan = (originalFreqRange * (zoomLevel - 1)) / (2 * zoomLevel);
+        panOffset = Math.max(-maxPan, Math.min(maxPan, panOffset));
+        
+        renderChart();
+    } else {
+        // Check hover
+        let found = null;
         for (const tr of transponderRects) {
             if (mouseX >= tr.x && mouseX <= tr.x + tr.width &&
                 mouseY >= tr.y && mouseY <= tr.y + tr.height) {
-                hoveredTransponder = tr.data;
+                found = tr.transponder;
+                found._mouseX = mouseX;
+                found._mouseY = mouseY;
                 break;
             }
         }
         
-        if (hoveredTransponder) {
-            const startFreq = hoveredTransponder.downlink - (hoveredTransponder.frequency_range / 2);
-            const endFreq = hoveredTransponder.downlink + (hoveredTransponder.frequency_range / 2);
-            
-            tooltip.innerHTML = `<strong>${hoveredTransponder.name}</strong>
-Downlink: ${hoveredTransponder.downlink.toFixed(3)} МГц
-Полоса: ${hoveredTransponder.frequency_range.toFixed(3)} МГц
-Диапазон: ${startFreq.toFixed(3)} - ${endFreq.toFixed(3)} МГц
-Поляризация: ${hoveredTransponder.polarization}
-Зона: ${hoveredTransponder.zone_name}`;
-            tooltip.style.display = 'block';
-            tooltip.style.left = (e.pageX + 15) + 'px';
-            tooltip.style.top = (e.pageY + 15) + 'px';
-        } else {
-            tooltip.style.display = 'none';
+        if (found !== hoveredTransponder) {
+            hoveredTransponder = found;
+            canvas.style.cursor = found ? 'pointer' : 'default';
+            renderChart();
+        } else if (found) {
+            found._mouseX = mouseX;
+            found._mouseY = mouseY;
         }
-    });
-    
-    canvas.addEventListener('mouseleave', () => {
-        tooltip.style.display = 'none';
-        hoveredTransponder = null;
-    });
+    }
 }
 
-// Render on page load
-document.addEventListener('DOMContentLoaded', renderFrequencyPlan);
+function handleMouseUp() {
+    isDragging = false;
+    canvas.style.cursor = hoveredTransponder ? 'pointer' : 'default';
+}
+
+function handleMouseLeave() {
+    isDragging = false;
+    hoveredTransponder = null;
+    canvas.style.cursor = 'default';
+    renderChart();
+}
+
+function resetZoom() {
+    zoomLevel = 1;
+    panOffset = 0;
+    renderChart();
+}
+
+function zoomIn() {
+    zoomLevel = Math.min(20, zoomLevel * 1.2);
+    renderChart();
+}
+
+function zoomOut() {
+    zoomLevel = Math.max(1, zoomLevel / 1.2);
+    if (zoomLevel === 1) {
+        panOffset = 0;
+    }
+    renderChart();
+}
+
+// Initialize on page load
+document.addEventListener('DOMContentLoaded', function() {
+    initializeFrequencyChart();
+    
+    // Control buttons
+    document.getElementById('resetZoom').addEventListener('click', resetZoom);
+    document.getElementById('zoomIn').addEventListener('click', zoomIn);
+    document.getElementById('zoomOut').addEventListener('click', zoomOut);
+});
 
 // Re-render on window resize
 let resizeTimeout;
 window.addEventListener('resize', () => {
     clearTimeout(resizeTimeout);
-    resizeTimeout = setTimeout(renderFrequencyPlan, 250);
+    resizeTimeout = setTimeout(renderChart, 250);
 });
 </script>
 {% endif %}