citrascope 0.7.0__py3-none-any.whl → 0.8.0__py3-none-any.whl

citrascope/web/static/config.js

@@ -1,6 +1,7 @@
 // Configuration management for CitraScope
 
 import { getConfig, saveConfig, getConfigStatus, getHardwareAdapters, getAdapterSchema } from './api.js';
+import { getFilterColor } from './filters.js';
 
 // API Host constants - must match backend constants in app.py
 const PROD_API_HOST = 'api.citra.space';
@@ -18,10 +19,14 @@ export async function initConfig() {
     // Hardware adapter selection change
     const adapterSelect = document.getElementById('hardwareAdapterSelect');
     if (adapterSelect) {
-        adapterSelect.addEventListener('change', async function(e) {
+        adapterSelect.addEventListener('change', async (e) => {
             const adapter = e.target.value;
             if (adapter) {
-                await loadAdapterSchema(adapter);
+                // Extract the NEW adapter's saved settings from the nested structure
+                const allAdapterSettings = currentConfig.adapter_settings || {};
+                const newAdapterSettings = allAdapterSettings[adapter] || {};
+                await loadAdapterSchema(adapter, newAdapterSettings);
+                populateAdapterSettings(newAdapterSettings);
                 await loadFilterConfig();
             } else {
                 document.getElementById('adapter-settings-container').innerHTML = '';
@@ -34,7 +39,7 @@ export async function initConfig() {
     // API endpoint selection change
     const apiEndpointSelect = document.getElementById('apiEndpoint');
     if (apiEndpointSelect) {
-        apiEndpointSelect.addEventListener('change', function(e) {
+        apiEndpointSelect.addEventListener('change', (e) => {
             const customContainer = document.getElementById('customHostContainer');
             if (e.target.value === 'custom') {
                 customContainer.style.display = 'block';
@@ -173,10 +178,21 @@ async function loadConfiguration() {
             autofocusInterval.value = config.autofocus_interval_minutes || 60;
         }
 
+        // Load time sync settings (monitoring always enabled)
+        const timeOffsetPause = document.getElementById('time_offset_pause_ms');
+
+        if (timeOffsetPause) {
+            timeOffsetPause.value = config.time_offset_pause_ms || 500;
+        }
+
         // Load adapter-specific settings if adapter is selected
         if (config.hardware_adapter) {
-            await loadAdapterSchema(config.hardware_adapter);
-            populateAdapterSettings(config.adapter_settings || {});
+            // adapter_settings is nested: {"nina": {...}, "kstars": {...}, "direct": {...}}
+            // Extract the current adapter's settings
+            const allAdapterSettings = config.adapter_settings || {};
+            const currentAdapterSettings = allAdapterSettings[config.hardware_adapter] || {};
+            await loadAdapterSchema(config.hardware_adapter, currentAdapterSettings);
+            populateAdapterSettings(currentAdapterSettings);
         }
     } catch (error) {
         console.error('Failed to load config:', error);
@@ -186,9 +202,16 @@ async function loadConfiguration() {
 /**
  * Load adapter schema and render settings form
  */
-async function loadAdapterSchema(adapterName) {
+async function loadAdapterSchema(adapterName, currentSettings = {}) {
     try {
-        const data = await getAdapterSchema(adapterName);
+        // Pass current adapter settings for dynamic schema generation
+        const settingsParam = Object.keys(currentSettings).length > 0
+            ? `?current_settings=${encodeURIComponent(JSON.stringify(currentSettings))}`
+            : '';
+
+        const response = await fetch(`/api/hardware-adapters/${adapterName}/schema${settingsParam}`);
+        const data = await response.json();
+
         currentAdapterSchema = data.schema || [];
         renderAdapterSettings(currentAdapterSchema);
     } catch (error) {
@@ -208,57 +231,115 @@ function renderAdapterSettings(schema) {
         return;
     }
 
-    let html = '<h5 class="mb-3">Adapter Settings</h5><div class="row g-3 mb-4">';
+    // Group fields by their 'group' property
+    const grouped = schema.reduce((acc, field) => {
+        if (field.readonly) return acc; // Skip readonly fields
+        const group = field.group || 'General';
+        if (!acc[group]) acc[group] = [];
+        acc[group].push(field);
+        return acc;
+    }, {});
+
+    let html = '<h5 class="mb-3">Adapter Settings</h5>';
+
+    // Render each group as a card
+    Object.entries(grouped).forEach(([groupName, fields]) => {
+        html += `<div class="card bg-dark border-secondary mb-3">`;
+        html += `<div class="card-header">`;
+        html += `<h6 class="mb-0"><i class="bi bi-${getGroupIcon(groupName)} me-2"></i>${groupName}</h6>`;
+        html += `</div>`;
+        html += `<div class="card-body">`;
+        html += `<div class="row g-3">`;
+
+        fields.forEach(field => {
+            const isRequired = field.required ? '<span class="text-danger">*</span>' : '';
+            const placeholder = field.placeholder || '';
+            const description = field.description || '';
+            const displayName = field.friendly_name || field.name;
 
-    schema.forEach(field => {
-        // Skip readonly fields (handled elsewhere in UI)
-        if (field.readonly) {
-            return;
-        }
+            html += '<div class="col-12 col-md-4">';
+            html += `<label for="adapter_${field.name}" class="form-label">${displayName} ${isRequired}</label>`;
+
+            if (field.type === 'bool') {
+                html += `<div class="form-check mt-2">`;
+                html += `<input class="form-check-input adapter-setting" type="checkbox" id="adapter_${field.name}" data-field="${field.name}" data-type="${field.type}">`;
+                html += `<label class="form-check-label" for="adapter_${field.name}">${description}</label>`;
+                html += `</div>`;
+            } else if (field.options && field.options.length > 0) {
+                html += `<select id="adapter_${field.name}" class="form-select adapter-setting" data-field="${field.name}" data-type="${field.type}" ${field.required ? 'required' : ''}>`;
+                html += `<option value="">-- Select ${displayName} --</option>`;
+                field.options.forEach(opt => {
+                    // Handle both object format {value, label} and plain string options
+                    const optValue = typeof opt === 'object' ? opt.value : opt;
+                    const optLabel = typeof opt === 'object' ? opt.label : opt;
+                    html += `<option value="${optValue}">${optLabel}</option>`;
+                });
+                html += `</select>`;
+            } else if (field.type === 'int' || field.type === 'float') {
+                const min = field.min !== undefined ? `min="${field.min}"` : '';
+                const max = field.max !== undefined ? `max="${field.max}"` : '';
+                const step = field.type === 'float' ? 'step="any"' : '';
+                html += `<input type="number" id="adapter_${field.name}" class="form-control adapter-setting" `;
+                html += `data-field="${field.name}" data-type="${field.type}" `;
+                html += `placeholder="${placeholder}" ${min} ${max} ${step} ${field.required ? 'required' : ''}>`;
+            } else {
+                // Default to text input
+                const pattern = field.pattern ? `pattern="${field.pattern}"` : '';
+                html += `<input type="text" id="adapter_${field.name}" class="form-control adapter-setting" `;
+                html += `data-field="${field.name}" data-type="${field.type}" `;
+                html += `placeholder="${placeholder}" ${pattern} ${field.required ? 'required' : ''}>`;
+            }
 
-        const isRequired = field.required ? '<span class="text-danger">*</span>' : '';
-        const placeholder = field.placeholder || '';
-        const description = field.description || '';
-        const displayName = field.friendly_name || field.name;
+            if (description && field.type !== 'bool') {
+                html += `<small class="text-muted">${description}</small>`;
+            }
+            html += '</div>';
+        });
 
-        html += '<div class="col-12 col-md-6">';
-        html += `<label for="adapter_${field.name}" class="form-label">${displayName} ${isRequired}</label>`;
+        html += `</div></div></div>`; // Close row, card-body, card
+    });
 
-        if (field.type === 'bool') {
-            html += `<div class="form-check mt-2">`;
-            html += `<input class="form-check-input adapter-setting" type="checkbox" id="adapter_${field.name}" data-field="${field.name}" data-type="${field.type}">`;
-            html += `<label class="form-check-label" for="adapter_${field.name}">${description}</label>`;
-            html += `</div>`;
-        } else if (field.options && field.options.length > 0) {
-            const displayName = field.friendly_name || field.name;
-            html += `<select id="adapter_${field.name}" class="form-select adapter-setting" data-field="${field.name}" data-type="${field.type}" ${field.required ? 'required' : ''}>`;
-            html += `<option value="">-- Select ${displayName} --</option>`;
-            field.options.forEach(opt => {
-                html += `<option value="${opt}">${opt}</option>`;
-            });
-            html += `</select>`;
-        } else if (field.type === 'int' || field.type === 'float') {
-            const min = field.min !== undefined ? `min="${field.min}"` : '';
-            const max = field.max !== undefined ? `max="${field.max}"` : '';
-            html += `<input type="number" id="adapter_${field.name}" class="form-control adapter-setting" `;
-            html += `data-field="${field.name}" data-type="${field.type}" `;
-            html += `placeholder="${placeholder}" ${min} ${max} ${field.required ? 'required' : ''}>`;
-        } else {
-            // Default to text input
-            const pattern = field.pattern ? `pattern="${field.pattern}"` : '';
-            html += `<input type="text" id="adapter_${field.name}" class="form-control adapter-setting" `;
-            html += `data-field="${field.name}" data-type="${field.type}" `;
-            html += `placeholder="${placeholder}" ${pattern} ${field.required ? 'required' : ''}>`;
-        }
+    container.innerHTML = html;
 
-        if (description && field.type !== 'bool') {
-            html += `<small class="text-muted">${description}</small>`;
+    // Add change listeners to device type fields to reload schema dynamically
+    const deviceTypeFields = ['camera_type', 'mount_type', 'filter_wheel_type', 'focuser_type'];
+    deviceTypeFields.forEach(fieldName => {
+        const select = document.getElementById(`adapter_${fieldName}`);
+        if (select) {
+            select.addEventListener('change', async () => {
+                // Get current adapter name
+                const adapterSelect = document.getElementById('hardwareAdapterSelect');
+                if (!adapterSelect || !adapterSelect.value) return;
+
+                // Collect current settings
+                const currentSettings = collectAdapterSettings();
+
+                // Reload schema with new device type selection
+                await loadAdapterSchema(adapterSelect.value, currentSettings);
+
+                // Repopulate settings (preserves user's selections)
+                populateAdapterSettings(currentSettings);
+            });
         }
-        html += '</div>';
     });
+}
 
-    html += '</div>';
-    container.innerHTML = html;
+/**
+ * Get Bootstrap icon name for a group
+ */
+function getGroupIcon(groupName) {
+    const icons = {
+        'Camera': 'camera',
+        'Mount': 'compass',
+        'Filter Wheel': 'circle',
+        'Focuser': 'eyeglasses',
+        'Connection': 'ethernet',
+        'Devices': 'hdd-network',
+        'Imaging': 'image',
+        'General': 'gear',
+        'Advanced': 'sliders'
+    };
+    return icons[groupName] || 'gear';
 }
 
 /**
@@ -361,6 +442,8 @@ async function saveConfiguration(event) {
         // Autofocus settings (top-level)
         scheduled_autofocus_enabled: document.getElementById('scheduled_autofocus_enabled')?.checked || false,
         autofocus_interval_minutes: parseInt(document.getElementById('autofocus_interval_minutes')?.value || 60, 10),
+        // Time sync settings (monitoring always enabled)
+        time_offset_pause_ms: parseFloat(document.getElementById('time_offset_pause_ms')?.value || 500),
         // API settings from endpoint selector
         host: host,
         port: port,
@@ -428,7 +511,7 @@ async function saveConfiguration(event) {
  * @param {string} type - 'danger' for errors, 'success' for success messages
  * @param {boolean} autohide - Whether to auto-hide the toast
  */
-function createToast(message, type = 'danger', autohide = false) {
+export function createToast(message, type = 'danger', autohide = false) {
     const toastContainer = document.getElementById('toastContainer');
     if (!toastContainer) {
         console.error('Toast container not found');
@@ -556,6 +639,9 @@ async function loadFilterConfig() {
             // Show the filter section
             if (filterSection) filterSection.style.display = 'block';
 
+            // Update enabled filters display on dashboard
+            updateEnabledFiltersDisplay(data.filters);
+
             // Populate filter table
             const tbody = document.getElementById('filterTableBody');
             const noFiltersMsg = document.getElementById('noFiltersMessage');
@@ -573,6 +659,7 @@ async function loadFilterConfig() {
                     filterIds.forEach(filterId => {
                         const filter = filters[filterId];
                         const isEnabled = filter.enabled !== undefined ? filter.enabled : true;
+                        const filterColor = getFilterColor(filter.name);
                         const row = document.createElement('tr');
                         row.innerHTML = `
                             <td>
@@ -581,7 +668,9 @@ async function loadFilterConfig() {
                                        data-filter-id="${filterId}"
                                        ${isEnabled ? 'checked' : ''}>
                             </td>
-                            <td>${filter.name}</td>
+                            <td>
+                                <span class="badge" style="background-color: ${filterColor}; color: white;">${filter.name}</span>
+                            </td>
                             <td>
                                 <input type="number"
                                        class="form-control form-control-sm filter-focus-input"
@@ -620,50 +709,74 @@ async function saveModifiedFilters() {
         return { success: 0, failed: inputs.length };
     }
 
-    let successCount = 0;
-    let failedCount = 0;
-
-    // Save all filter values
+    // Collect all filter updates into array
+    const filterUpdates = [];
     for (const input of inputs) {
         const filterId = input.dataset.filterId;
         const focusPosition = parseInt(input.value);
 
-        if (isNaN(focusPosition) || focusPosition < 0) {
-            failedCount++;
-            continue;
+        if (Number.isNaN(focusPosition) || focusPosition < 0) {
+            continue; // Skip invalid entries
         }
 
         // Get enabled state from corresponding checkbox
         const checkbox = document.querySelector(`.filter-enabled-checkbox[data-filter-id="${filterId}"]`);
         const enabled = checkbox ? checkbox.checked : true;
 
-        try {
-            const response = await fetch(`/api/adapter/filters/${filterId}`, {
-                method: 'PATCH',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ focus_position: focusPosition, enabled: enabled })
-            });
+        filterUpdates.push({
+            filter_id: filterId,
+            focus_position: focusPosition,
+            enabled: enabled
+        });
+    }
 
-            if (response.ok) {
-                successCount++;
-            } else {
-                failedCount++;
-                const data = await response.json();
-                console.error(`Failed to save filter ${filterId}: ${data.error || 'Unknown error'}`);
-                // If it's the "last enabled filter" error, show it to the user
-                if (response.status === 400 && data.error && data.error.includes('last enabled filter')) {
-                    showConfigMessage(data.error, 'danger');
+    if (filterUpdates.length === 0) {
+        return { success: 0, failed: 0 };
+    }
+
+    // Send single batch update
+    try {
+        const response = await fetch('/api/adapter/filters/batch', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(filterUpdates)
+        });
+
+        if (response.ok) {
+            const data = await response.json();
+            const successCount = data.updated_count || 0;
+
+            // After batch update, sync to backend
+            try {
+                const syncResponse = await fetch('/api/adapter/filters/sync', {
+                    method: 'POST'
+                });
+                if (!syncResponse.ok) {
+                    console.error('Failed to sync filters to backend');
                 }
+            } catch (error) {
+                console.error('Error syncing filters to backend:', error);
             }
-        } catch (error) {
-            failedCount++;
-            console.error(`Error saving filter ${filterId}:`, error);
+
+            return { success: successCount, failed: 0 };
+        } else {
+            const data = await response.json();
+            const errorMsg = data.error || 'Unknown error';
+            console.error(`Failed to save filters: ${errorMsg}`);
+
+            // Show error to user
+            if (response.status === 400 && errorMsg.includes('last enabled filter')) {
+                showConfigMessage(errorMsg, 'danger');
+            }
+
+            return { success: 0, failed: filterUpdates.length };
         }
+    } catch (error) {
+        console.error('Error saving filters:', error);
+        return { success: 0, failed: filterUpdates.length };
     }
-
-    return { success: successCount, failed: failedCount };
 }
 
 /**
@@ -792,6 +905,28 @@ export async function initFilterConfig() {
     await loadFilterConfig();
 }
 
+/**
+ * Update the enabled filters display on the dashboard.
+ * @param {Object} filters - Filter configuration object
+ */
+function updateEnabledFiltersDisplay(filters) {
+    const filtersEl = document.getElementById('enabledFilters');
+    if (!filtersEl) return;
+
+    const enabledFilters = Object.values(filters)
+        .filter(filter => filter.enabled !== false)
+        .map(filter => filter.name);
+
+    if (enabledFilters.length > 0) {
+        filtersEl.innerHTML = enabledFilters.map(filterName => {
+            const color = getFilterColor(filterName);
+            return `<span class="badge me-1" style="background-color: ${color}; color: white;">${filterName}</span>`;
+        }).join('');
+    } else {
+        filtersEl.textContent = '-';
+    }
+}
+
 /**
  * Setup autofocus button event listener (call once during init)
  */

citrascope/web/static/filters.js

@@ -0,0 +1,55 @@
+/**
+ * Filter color utilities for visual wavelength representation.
+ *
+ * Maps standard astronomical filters to their representative colors
+ * based on spectral wavelength. Colors are darker variants suitable
+ * for badge backgrounds with white text.
+ */
+
+/**
+ * Standard filter name to color mappings.
+ * Colors chosen to be dark enough for white text readability.
+ */
+export const FILTER_COLORS = {
+    // Johnson-Cousins UBVRI
+    'U': '#33005D',      // Ultraviolet (365nm)
+    'B': '#002A6E',      // Blue (445nm)
+    'V': '#005500',      // Visual/Green (551nm)
+    'R': '#6E0000',      // Red (658nm)
+    'I': '#550000',      // Near-infrared (806nm)
+
+    // Sloan ugriz
+    'u': '#3B0066',      // Ultraviolet (354nm)
+    'g': '#00442A',      // Green (477nm)
+    'r': '#6E2200',      // Orange-Red (623nm)
+    'i': '#5D0000',      // Near-infrared (763nm)
+    'z': '#440000',      // Infrared (913nm)
+
+    // RGB filters
+    'Red': '#770000',
+    'Green': '#006600',
+    'Blue': '#003380',
+    'Clear': '#4C4C4C',  // Gray for broadband clear
+    'Luminance': '#4C4C4C',  // Gray for luminance
+
+    // Narrowband emission line filters
+    'Ha': '#6E002A',     // H-alpha (656.3nm) - characteristic deep red
+    'Hb': '#004C66',     // H-beta (486.1nm) - cyan
+    'OIII': '#005D44',   // OIII (500.7nm) - teal
+    'SII': '#6E112A',    // SII (672.4nm) - pink-red
+};
+
+/**
+ * Get color for a filter based on name.
+ *
+ * @param {string} name - Filter name (e.g., "Ha", "Red", "V")
+ * @returns {string} Hex color string suitable for dark badge backgrounds
+ */
+export function getFilterColor(name) {
+    // Check known filters first
+    if (FILTER_COLORS[name]) {
+        return FILTER_COLORS[name];
+    }
+    // Default to gray if no match
+    return '#777777';
+}

citrascope/web/static/style.css

@@ -49,6 +49,45 @@ body {
     gap: 0.5em;
 }
 
+#automatedSchedulingStatus {
+    display: inline-block;
+    min-width: 70px;
+}
+
+#toggleAutomatedSchedulingSwitch {
+    margin-top: 6px;
+    cursor: pointer;
+}
+
+#toggleAutomatedSchedulingSwitch:checked {
+    background-color: #198754;
+    border-color: #198754;
+}
+
+#toggleAutomatedSchedulingSwitch:focus {
+    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
+}
+
+#processingStatus {
+    display: inline-block;
+    min-width: 70px;
+}
+
+/* Task processing switch alignment */
+#toggleProcessingSwitch {
+    margin-top: 6px;
+    cursor: pointer;
+}
+
+#toggleProcessingSwitch:checked {
+    background-color: #198754;
+    border-color: #198754;
+}
+
+#toggleProcessingSwitch:focus {
+    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
+}
+
 /* Clickable elements */
 #headerVersion, #updateIndicator {
     cursor: pointer;