Commit fb40c847 authored by vertighel's avatar vertighel
Browse files

feat: pick-mode tab warning + new-image badge on viewer tabs 



guider-panel.js dispatches guider-pick-change (active true/false) with
the active viewerId on pick start and all exit paths. control.js maps
viewerId suffix (-sci/-tec) to the corresponding tab button and toggles
border-warning during pick; also adds a 7px warning dot on inactive
viewer tabs when a fits-preview frame arrives, cleared on shown.bs.tab.

Co-Authored-By: default avatarClaude Sonnet 4.6 <noreply@anthropic.com>
parent bf019007

noctua/web/static/js/control.js

+40 −0
Original line number Diff line number Diff line
@@ -180,4 +180,44 @@ document.addEventListener('DOMContentLoaded', () => { 
    });



    applyMode('station1');



    // -----------------------------------------------------------------------

    // Pick mode: outline danger on the viewer tab that owns the active viewer

    // -----------------------------------------------------------------------

    function tabBtnForViewer(viewerId) {

        if (!viewerId) return null;

        if (viewerId.endsWith('-sci')) return document.querySelector('[data-bs-target="#mon-fits"]');

        if (viewerId.endsWith('-tec')) return document.querySelector('[data-bs-target="#mon-teccam"]');

        return null;

    }



    document.addEventListener('guider-pick-change', ({ detail }) => {

        const tabBtn = tabBtnForViewer(detail?.viewerId);

        if (!tabBtn) return;

        tabBtn.classList.toggle('border',         detail.active);

        tabBtn.classList.toggle('border-warning', detail.active);

    });



    // -----------------------------------------------------------------------

    // New-image badge: warning dot on viewer tabs when a new frame arrives

    // while the tab is not in focus

    // -----------------------------------------------------------------------

    document.addEventListener('fits-preview', ({ detail }) => {

        const { cam_id } = detail ?? {};

        if (!cam_id) return;

        let tabBtn = null;

        if (cam_id.startsWith('sci'))      tabBtn = document.querySelector('[data-bs-target="#mon-fits"]');

        else if (cam_id.startsWith('tec')) tabBtn = document.querySelector('[data-bs-target="#mon-teccam"]');

        if (!tabBtn || tabBtn.classList.contains('active')) return;

        if (!tabBtn.querySelector('.tab-new-badge')) {

            const dot = document.createElement('span');

            dot.className = 'tab-new-badge badge rounded-pill bg-warning ms-1 p-0';

            dot.style.cssText = 'width:7px; height:7px; display:inline-block; vertical-align:middle;';

            tabBtn.appendChild(dot);

        }

    });



    document.addEventListener('shown.bs.tab', e => {

        e.target.querySelector('.tab-new-badge')?.remove();

    });

});

noctua/web/static/js/guider-panel.js

+13 −0
Original line number Diff line number Diff line
@@ -356,6 +356,9 @@ function initPickMode(panelId) { 
            }

            btn.classList.remove('btn-warning');

            btn.classList.add('btn-outline-secondary');

            document.dispatchEvent(new CustomEvent('guider-pick-change', {

                detail: { viewerId: state.activeViewerId, active: false },

            }));

            return;

        }
@@ -408,6 +411,9 @@ function initPickMode(panelId) { 


            btn.classList.remove('btn-warning');

            btn.classList.add('btn-outline-secondary');

            document.dispatchEvent(new CustomEvent('guider-pick-change', {

                detail: { viewerId: state.activeViewerId, active: false },

            }));

        }

    };
@@ -447,6 +453,12 @@ function initPickMode(panelId) { 
        btn.classList.remove('btn-outline-secondary');

        btn.classList.add('btn-warning');



        const cameraEl = document.getElementById(`guider-camera-${panelId}`);

        state.activeViewerId = cameraEl?.options[cameraEl?.selectedIndex]?.dataset?.viewerId ?? null;

        document.dispatchEvent(new CustomEvent('guider-pick-change', {

            detail: { viewerId: state.activeViewerId, active: true },

        }));



        for (const id of [

            `guider-cx-${panelId}`, `guider-cy-${panelId}`,

            `guider-tx-${panelId}`, `guider-ty-${panelId}`,
@@ -476,6 +488,7 @@ function initPanel(panelId) { 
    _pickState[panelId] = {

        phase:            'idle',

        viewer:           null,

        activeViewerId:   null,

        mouseMoveHandler: null,

        mousePos:         null,

        sessionClicked:   false,