intercept/templates/partials/modes/ais.html

<!-- AIS VESSEL TRACKING MODE -->
<div id="aisMode" class="mode-content" style="display: none;">
    <div class="section">
        <h3>AIS Vessel Tracking</h3>
        <div class="info-text" style="margin-bottom: 15px;">
            Track ships and vessels via AIS (Automatic Identification System) on 161.975 / 162.025 MHz.
        </div>
        <a href="/ais/dashboard" target="_blank" class="run-btn" style="display: inline-block; text-decoration: none; text-align: center; margin-bottom: 15px;">
            Open AIS Dashboard
        </a>
    </div>

    <div class="section">
        <h3>Settings</h3>
        <div class="form-group">
            <label>Gain (dB, 0 = auto)</label>
            <input type="number" id="aisGainInput" value="40" min="0" max="50" placeholder="0-50">
        </div>
    </div>

    <div class="section">
        <h3>Status</h3>
        <div id="aisStatusDisplay" class="info-text">
            <p>Status: <span id="aisStatusText" style="color: var(--accent-yellow);">Standby</span></p>
            <p>Vessels: <span id="aisVesselCount">0</span></p>
        </div>
    </div>

    <button class="run-btn" id="startAisBtn" onclick="startAisTracking()">
        Start AIS Tracking
    </button>
    <button class="stop-btn" id="stopAisBtn" onclick="stopAisTracking()" style="display: none;">
        Stop AIS Tracking
    </button>
</div>

<script>
    let aisEventSource = null;
    let aisVessels = {};

    function startAisTracking() {
        const gain = document.getElementById('aisGainInput').value || '40';
        const device = document.getElementById('deviceSelect')?.value || '0';

        fetch('/ais/start', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ device, gain, bias_t: typeof getBiasTEnabled === 'function' ? getBiasTEnabled() : false })
        })
        .then(r => r.json())
        .then(data => {
            if (data.status === 'started' || data.status === 'already_running') {
                document.getElementById('startAisBtn').style.display = 'none';
                document.getElementById('stopAisBtn').style.display = 'block';
                document.getElementById('aisStatusText').textContent = 'Tracking';
                document.getElementById('aisStatusText').style.color = 'var(--accent-green)';
                startAisSSE();
            } else {
                alert(data.message || 'Failed to start AIS tracking');
            }
        })
        .catch(err => alert('Error: ' + err.message));
    }

    function stopAisTracking() {
        fetch('/ais/stop', { method: 'POST' })
        .then(r => r.json())
        .then(() => {
            document.getElementById('startAisBtn').style.display = 'block';
            document.getElementById('stopAisBtn').style.display = 'none';
            document.getElementById('aisStatusText').textContent = 'Standby';
            document.getElementById('aisStatusText').style.color = 'var(--accent-yellow)';
            document.getElementById('aisVesselCount').textContent = '0';
            if (aisEventSource) {
                aisEventSource.close();
                aisEventSource = null;
            }
            aisVessels = {};
        });
    }

    function startAisSSE() {
        if (aisEventSource) aisEventSource.close();

        aisEventSource = new EventSource('/ais/stream');
        aisEventSource.onmessage = function(e) {
            try {
                const data = JSON.parse(e.data);
                if (data.type === 'vessel') {
                    aisVessels[data.mmsi] = data;
                    document.getElementById('aisVesselCount').textContent = Object.keys(aisVessels).length;
                }
            } catch (err) {}
        };

        aisEventSource.onerror = function() {
            setTimeout(() => {
                if (document.getElementById('stopAisBtn').style.display === 'block') {
                    startAisSSE();
                }
            }, 2000);
        };
    }

    // Check initial status
    fetch('/ais/status')
    .then(r => r.json())
    .then(data => {
        if (data.tracking_active) {
            document.getElementById('startAisBtn').style.display = 'none';
            document.getElementById('stopAisBtn').style.display = 'block';
            document.getElementById('aisStatusText').textContent = 'Tracking';
            document.getElementById('aisStatusText').style.color = 'var(--accent-green)';
            document.getElementById('aisVesselCount').textContent = data.vessel_count || 0;
            startAisSSE();
        }
    })
    .catch(() => {});
</script>