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

citrascope/web/static/formatters.js

@@ -0,0 +1,129 @@
+/**
+ * CitraScope Formatter Utilities
+ *
+ * Shared formatting functions for the dashboard UI.
+ * These functions are exposed in the Alpine.js store for use in templates.
+ */
+
+/**
+ * Strip ANSI color codes from text
+ * @param {string} text - Text containing ANSI codes
+ * @returns {string} Text with ANSI codes removed
+ */
+export function stripAnsiCodes(text) {
+    const esc = String.fromCharCode(27);
+    return text.replace(new RegExp(esc + '\\[\\d+m', 'g'), '').replace(/\[\d+m/g, '');
+}
+
+/**
+ * Format ISO date string to local time
+ * @param {string} isoString - ISO 8601 date string
+ * @returns {string} Formatted local time string
+ */
+export function formatLocalTime(isoString) {
+    const date = new Date(isoString);
+    return date.toLocaleString(undefined, {
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: true
+    });
+}
+
+/**
+ * Format milliseconds as countdown string
+ * @param {number} milliseconds - Time in milliseconds
+ * @returns {string} Formatted countdown string (e.g., "2h 30m 15s")
+ */
+export function formatCountdown(milliseconds) {
+    const totalSeconds = Math.floor(milliseconds / 1000);
+    if (totalSeconds < 0) return 'Starting soon...';
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+    if (hours > 0) return `${hours}h ${minutes}m ${seconds}s`;
+    if (minutes > 0) return `${minutes}m ${seconds}s`;
+    return `${seconds}s`;
+}
+
+/**
+ * Format elapsed time for "X ago" display
+ * @param {number} milliseconds - Elapsed time in milliseconds
+ * @returns {string} Human-readable elapsed time (e.g., "2 hours ago")
+ */
+export function formatElapsedTime(milliseconds) {
+    const seconds = Math.floor(milliseconds / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+    if (days > 0) return `${days} day${days !== 1 ? 's' : ''} ago`;
+    if (hours > 0) return `${hours} hour${hours !== 1 ? 's' : ''} ago`;
+    if (minutes > 0) return `${minutes} minute${minutes !== 1 ? 's' : ''} ago`;
+    return 'just now';
+}
+
+/**
+ * Format minutes as "Xh Ym" display
+ * @param {number} minutes - Time in minutes
+ * @returns {string} Formatted time string (e.g., "2h 30m")
+ */
+export function formatMinutes(minutes) {
+    const hours = Math.floor(minutes / 60);
+    const mins = Math.floor(minutes % 60);
+    if (hours > 0) return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
+    return `${mins}m`;
+}
+
+/**
+ * Format last autofocus timestamp
+ * @param {Object} status - Status object containing last_autofocus_timestamp
+ * @returns {string} Formatted autofocus time or "Never"
+ */
+export function formatLastAutofocus(status) {
+    if (!status || !status.last_autofocus_timestamp) return 'Never';
+    const elapsed = Date.now() - status.last_autofocus_timestamp * 1000;
+    return formatElapsedTime(elapsed);
+}
+
+/**
+ * Format time offset with source information - compact format for status pill
+ * @param {Object} timeHealth - Time health object with offset_ms, source, and optional metadata
+ * @returns {string} Formatted time offset (e.g., "17ns, 10 sats" or "+2ms, ntp")
+ */
+export function formatTimeOffset(timeHealth) {
+    if (!timeHealth || timeHealth.offset_ms == null) return 'Unknown';
+    
+    const o = timeHealth.offset_ms;
+    const abs = Math.abs(o);
+    const s = o >= 0 ? '+' : '';
+    
+    // Format offset with appropriate units
+    let offsetStr;
+    if (abs < 0.001) {
+        // Sub-microsecond: show as nanoseconds
+        offsetStr = `${s}${Math.round(abs * 1000000)}ns`;
+    } else if (abs < 1) {
+        // Sub-millisecond: show as microseconds
+        offsetStr = `${s}${Math.round(abs * 1000)}µs`;
+    } else if (abs < 1000) {
+        // Milliseconds
+        offsetStr = `${s}${abs.toFixed(0)}ms`;
+    } else {
+        // Seconds
+        offsetStr = `${s}${(abs / 1000).toFixed(1)}s`;
+    }
+
+    // Add source/satellite info
+    if (timeHealth.source === 'gps' && timeHealth.metadata?.satellites != null) {
+        // GPS with satellite count
+        return `${offsetStr}, ${timeHealth.metadata.satellites} sats`;
+    } else if (timeHealth.source && timeHealth.source !== 'unknown') {
+        // Other sources (ntp, chrony)
+        return `${offsetStr}, ${timeHealth.source}`;
+    } else {
+        // No source info
+        return offsetStr;
+    }
+}

citrascope/web/static/store-init.js

@@ -0,0 +1,216 @@
+/**
+ * CitraScope Alpine store - must register BEFORE Alpine starts.
+ * Load this script before Alpine.js so the alpine:init listener is attached in time.
+ */
+import * as formatters from './formatters.js';
+import * as components from './components.js';
+
+(() => {
+    document.addEventListener('alpine:init', () => {
+        // Register Alpine components FIRST (before Alpine starts processing the DOM)
+        window.Alpine.data('adapterField', components.adapterField);
+        window.Alpine.data('taskRow', components.taskRow);
+        window.Alpine.data('filterRow', components.filterRow);
+        window.Alpine.data('logEntry', components.logEntry);
+
+        // Register store
+        window.Alpine.store('citrascope', {
+            status: {},
+            tasks: [],
+            logs: [],
+            latestLog: null,
+            wsConnected: false,
+            wsReconnecting: false,
+            currentTaskId: null,
+            isTaskActive: false,
+            nextTaskStartTime: null,
+            countdown: '',
+            config: {},
+            apiEndpoint: 'production',
+            hardwareAdapters: [], // [{value, label}]
+            filters: {},
+            savedAdapter: null,
+            enabledFilters: [],
+            filterConfigVisible: false,
+            filterAdapterChangeMessageVisible: false,
+            currentSection: 'monitoring',
+            version: '',
+            updateIndicator: '',
+            versionCheckState: 'idle',
+            versionCheckResult: null,
+
+            // Loading states for async operations
+            isSavingConfig: false,
+            isCapturing: false,
+            isAutofocusing: false,
+            captureResult: null,
+            exposureDuration: 0.1,
+
+            // Spread all formatter functions from shared module
+            ...formatters,
+
+            // Unified adapter fields (schema + values merged)
+            adapterFields: [],
+
+            // Computed property: Group adapter fields by their group property
+            get groupedAdapterFields() {
+                const grouped = {};
+                this.adapterFields.forEach(f => {
+                    const g = f.group || 'General';
+                    if (!grouped[g]) grouped[g] = [];
+                    grouped[g].push(f);
+                });
+                return Object.entries(grouped);
+            },
+
+            // Store methods
+            async captureImage() {
+                if (Number.isNaN(this.exposureDuration) || this.exposureDuration <= 0) {
+                    // Import createToast from config.js
+                    const { createToast } = await import('./config.js');
+                    createToast('Invalid exposure duration', 'danger', false);
+                    return;
+                }
+
+                this.isCapturing = true;
+                try {
+                    const response = await fetch('/api/camera/capture', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ duration: this.exposureDuration })
+                    });
+                    const data = await response.json();
+
+                    if (response.ok && data.success) {
+                        this.captureResult = data;
+                        const { createToast } = await import('./config.js');
+                        createToast('Image captured successfully', 'success', true);
+                    } else {
+                        const { createToast } = await import('./config.js');
+                        createToast(data.error || 'Failed to capture image', 'danger', false);
+                    }
+                } catch (error) {
+                    console.error('Capture error:', error);
+                    const { createToast } = await import('./config.js');
+                    createToast('Failed to capture image: ' + error.message, 'danger', false);
+                } finally {
+                    this.isCapturing = false;
+                }
+            },
+
+            async toggleProcessing(enabled) {
+                const endpoint = enabled ? '/api/tasks/resume' : '/api/tasks/pause';
+                try {
+                    const response = await fetch(endpoint, { method: 'POST' });
+                    const result = await response.json();
+                    if (!response.ok) {
+                        alert(result.error || 'Failed to toggle task processing');
+                        // Revert on error
+                        this.status.processing_active = !enabled;
+                    }
+                } catch (error) {
+                    console.error('Error toggling processing:', error);
+                    alert('Error toggling task processing');
+                    this.status.processing_active = !enabled;
+                }
+            },
+
+            async toggleAutomatedScheduling(enabled) {
+                try {
+                    const response = await fetch('/api/telescope/automated-scheduling', {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ enabled: enabled })
+                    });
+                    const result = await response.json();
+                    if (!response.ok) {
+                        alert(result.error || 'Failed to toggle automated scheduling');
+                        // Revert on error
+                        this.status.automated_scheduling = !enabled;
+                    }
+                } catch (error) {
+                    console.error('Error toggling automated scheduling:', error);
+                    alert('Error toggling automated scheduling');
+                    this.status.automated_scheduling = !enabled;
+                }
+            },
+
+            showCameraControl() {
+                this.captureResult = null; // Reset capture result when opening modal
+                const modal = new bootstrap.Modal(document.getElementById('cameraControlModal'));
+                modal.show();
+            },
+
+            async showVersionModal() {
+                this.versionCheckState = 'loading';
+                this.versionCheckResult = null;
+
+                const modal = new bootstrap.Modal(document.getElementById('versionModal'));
+                modal.show();
+
+                // Check for updates (inline implementation)
+                try {
+                    const versionResponse = await fetch('/api/version');
+                    const versionData = await versionResponse.json();
+                    const currentVersion = versionData.version;
+
+                    const githubResponse = await fetch('https://api.github.com/repos/citra-space/citrascope/releases/latest');
+                    if (!githubResponse.ok) {
+                        this.versionCheckState = 'error';
+                        this.versionCheckResult = { status: 'error', currentVersion };
+                        return;
+                    }
+
+                    const releaseData = await githubResponse.json();
+                    const latestVersion = releaseData.tag_name.replace(/^v/, '');
+                    const releaseUrl = releaseData.html_url;
+
+                    if (currentVersion === 'development' || currentVersion === 'unknown') {
+                        this.updateIndicator = '';
+                        this.versionCheckState = 'up-to-date';
+                        this.versionCheckResult = { status: 'up-to-date', currentVersion };
+                        return;
+                    }
+
+                    // Compare versions
+                    const v1 = latestVersion.split('.').map(n => parseInt(n) || 0);
+                    const v2 = currentVersion.split('.').map(n => parseInt(n) || 0);
+                    const maxLen = Math.max(v1.length, v2.length);
+                    let comparison = 0;
+                    for (let i = 0; i < maxLen; i++) {
+                        const num1 = v1[i] || 0;
+                        const num2 = v2[i] || 0;
+                        if (num1 > num2) { comparison = 1; break; }
+                        if (num1 < num2) { comparison = -1; break; }
+                    }
+
+                    if (comparison > 0) {
+                        this.updateIndicator = `${latestVersion} Available!`;
+                        this.versionCheckState = 'update-available';
+                        this.versionCheckResult = { status: 'update-available', currentVersion, latestVersion, releaseUrl };
+                    } else {
+                        this.updateIndicator = '';
+                        this.versionCheckState = 'up-to-date';
+                        this.versionCheckResult = { status: 'up-to-date', currentVersion };
+                    }
+                } catch (error) {
+                    console.debug('Update check failed:', error);
+                    this.versionCheckState = 'error';
+                    this.versionCheckResult = { status: 'error', currentVersion: 'unknown' };
+                }
+            },
+
+            showConfigSection() {
+                // Close setup wizard modal
+                const wizardModal = bootstrap.Modal.getInstance(document.getElementById('setupWizard'));
+                if (wizardModal) {
+                    wizardModal.hide();
+                }
+
+                // Navigate to config section
+                this.currentSection = 'config';
+                window.location.hash = 'config';
+            }
+        });
+    });
+})();

citrascope/web/static/style.css

@@ -2,6 +2,11 @@
  * Bootstrap 5 handles most styling; these are overrides and additions only
  */
 
+/* Alpine.js: hide elements until Alpine has processed them */
+[x-cloak] {
+    display: none !important;
+}
+
 /* Log terminal container - custom scrollbar and background watermark */
 .log-container {
     background: #0d1117 url('/static/img/citra.png') no-repeat 85% center;

citrascope/web/templates/_config.html

@@ -0,0 +1,175 @@
+    <div class="container my-4" id="configSection" x-show="$store.citrascope.currentSection === 'config'" x-cloak>
+        <form @submit.prevent="window.saveConfiguration($event)">
+            <div class="row g-3 mb-3">
+                <!-- API Configuration Card -->
+                <div class="col-12" x-data="{ apiCardExpanded: $persist(true).as('apiCard') }">
+                    <div class="card bg-dark text-light border-secondary">
+                        <div class="card-header d-flex justify-content-between align-items-center" style="cursor: pointer;" @click="apiCardExpanded = !apiCardExpanded">
+                            <div class="d-flex align-items-center gap-2">
+                                <i class="bi bi-cloud-arrow-up"></i>
+                                <h5 class="mb-0">API Configuration</h5>
+                                <small class="text-muted" x-show="!apiCardExpanded" x-text="$store.citrascope.apiEndpoint === 'production' ? 'Production' : ($store.citrascope.apiEndpoint === 'development' ? 'Development' : 'Custom')"></small>
+                            </div>
+                            <i class="bi" :class="apiCardExpanded ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
+                        </div>
+                        <div class="card-body" x-show="apiCardExpanded">
+                            <div class="row g-3">
+                                <div class="col-12">
+                                    <label for="apiEndpoint" class="form-label">API Endpoint</label>
+                                    <select id="apiEndpoint" class="form-select" x-model="$store.citrascope.apiEndpoint">
+                                        <option value="production">Production (api.citra.space)</option>
+                                        <option value="development">Development (dev.api.citra.space)</option>
+                                        <option value="custom">Custom</option>
+                                    </select>
+                                </div>
+                                <div class="col-12" id="customHostContainer" x-show="$store.citrascope.apiEndpoint === 'custom'">
+                                    <label for="customHost" class="form-label">Custom API Host</label>
+                                    <input type="text" id="customHost" class="form-control" placeholder="api.example.com" x-model="$store.citrascope.config.host">
+                                    <div class="row g-2 mt-2">
+                                        <div class="col-6">
+                                            <label for="customPort" class="form-label small">Port</label>
+                                            <input type="number" id="customPort" class="form-control" placeholder="443" x-model.number="$store.citrascope.config.port">
+                                        </div>
+                                        <div class="col-6 d-flex align-items-end">
+                                            <div class="form-check">
+                                                <input class="form-check-input" type="checkbox" id="customUseSsl" x-model="$store.citrascope.config.use_ssl">
+                                                <label class="form-check-label" for="customUseSsl">
+                                                    Use SSL
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-12 col-md-6">
+                                    <label for="personal_access_token" class="form-label">Personal Access Token <span class="text-danger">*</span></label>
+                                    <input type="password" id="personal_access_token" class="form-control" placeholder="Enter your Citra API token" required x-model="$store.citrascope.config.personal_access_token">
+                                    <small class="text-muted">Get your token and telescope ID from <a :href="$store.citrascope.config.app_url || ''" target="_blank" x-text="($store.citrascope.config.app_url || '').replace('https://', '')"></a></small>
+                                </div>
+                                <div class="col-12 col-md-6">
+                                    <label for="telescopeId" class="form-label">Telescope ID <span class="text-danger">*</span></label>
+                                    <input type="text" id="telescopeId" class="form-control" placeholder="Enter telescope ID" required x-model="$store.citrascope.config.telescope_id">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+
+                {% include '_config_hardware.html' %}
+
+
+                <!-- Time Synchronization Settings Card -->
+                <div class="col-12" x-data="{ timeCardExpanded: $persist(true).as('timeCard') }">
+                    <div class="card bg-dark text-light border-secondary">
+                        <div class="card-header d-flex justify-content-between align-items-center" style="cursor: pointer;" @click="timeCardExpanded = !timeCardExpanded">
+                            <div class="d-flex align-items-center gap-2">
+                                <i class="bi bi-clock-history"></i>
+                                <h5 class="mb-0">Time Synchronization</h5>
+                                <small class="text-muted" x-show="!timeCardExpanded" x-text="'Check every ' + ($store.citrascope.config.time_check_interval_minutes || 5) + 'min • ' + ($store.citrascope.config.time_offset_pause_ms || 500) + 'ms threshold'"></small>
+                            </div>
+                            <i class="bi" :class="timeCardExpanded ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
+                        </div>
+                        <div class="card-body" x-show="timeCardExpanded">
+                            <div class="row g-3">
+                                <div class="col-12 col-md-6">
+                                    <label for="time_offset_pause_ms" class="form-label">Pause Threshold (ms)</label>
+                                    <input type="number" class="form-control form-control-sm" id="time_offset_pause_ms" min="1" max="10000" step="1" x-model.number="$store.citrascope.config.time_offset_pause_ms">
+                                    <small class="text-muted">Clock drift that triggers task pause</small>
+                                </div>
+                                <div class="col-12 col-md-6">
+                                    <label for="time_check_interval_minutes" class="form-label">Check Interval (minutes)</label>
+                                    <input type="number" class="form-control form-control-sm" id="time_check_interval_minutes" min="1" max="60" step="1" x-model.number="$store.citrascope.config.time_check_interval_minutes">
+                                    <small class="text-muted">How often to check time synchronization</small>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Logging Settings Card -->
+                <div class="col-12" x-data="{ loggingCardExpanded: $persist(true).as('loggingCard') }">
+                    <div class="card bg-dark text-light border-secondary">
+                        <div class="card-header d-flex justify-content-between align-items-center" style="cursor: pointer;" @click="loggingCardExpanded = !loggingCardExpanded">
+                            <div class="d-flex align-items-center gap-2">
+                                <i class="bi bi-file-earmark-text"></i>
+                                <h5 class="mb-0">Logging Settings</h5>
+                                <small class="text-muted" x-show="!loggingCardExpanded" x-text="($store.citrascope.config.log_level || 'INFO') + ($store.citrascope.config.file_logging_enabled !== false ? ' • File logging' : ' • Console only')"></small>
+                            </div>
+                            <i class="bi" :class="loggingCardExpanded ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
+                        </div>
+                        <div class="card-body" x-show="loggingCardExpanded">
+                            <div class="row g-3">
+                                <div class="col-12 col-md-6">
+                                    <label for="logLevel" class="form-label">Log Level</label>
+                                    <select id="logLevel" class="form-select" x-model="$store.citrascope.config.log_level">
+                                        <option value="DEBUG">DEBUG</option>
+                                        <option value="INFO">INFO</option>
+                                        <option value="WARNING">WARNING</option>
+                                        <option value="ERROR">ERROR</option>
+                                    </select>
+                                </div>
+                                <div class="col-12 col-md-6">
+                                    <div class="form-check mt-4">
+                                        <input class="form-check-input" type="checkbox" id="file_logging_enabled" x-model="$store.citrascope.config.file_logging_enabled">
+                                        <label class="form-check-label" for="file_logging_enabled">
+                                            Enable file logging
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="col-12">
+                                    <small class="text-muted">
+                                        Log file: <span class="text-secondary" x-text="$store.citrascope.config.log_file_path || 'Disabled'">Loading...</span>
+                                    </small>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Task Settings Card -->
+                <div class="col-12" x-data="{ taskCardExpanded: $persist(true).as('taskCard') }">
+                    <div class="card bg-dark text-light border-secondary">
+                        <div class="card-header d-flex justify-content-between align-items-center" style="cursor: pointer;" @click="taskCardExpanded = !taskCardExpanded">
+                            <div class="d-flex align-items-center gap-2">
+                                <i class="bi bi-gear"></i>
+                                <h5 class="mb-0">Task Settings</h5>
+                                <small class="text-muted" x-show="!taskCardExpanded" x-text="$store.citrascope.config.keep_images ? 'Keep images' : 'Delete images after upload'"></small>
+                            </div>
+                            <i class="bi" :class="taskCardExpanded ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
+                        </div>
+                        <div class="card-body" x-show="taskCardExpanded">
+                            <div class="row g-3">
+                                <div class="col-12 col-md-6">
+                                    <div class="form-check mt-2">
+                                        <input class="form-check-input" type="checkbox" id="keep_images" x-model="$store.citrascope.config.keep_images">
+                                        <label class="form-check-label" for="keep_images">
+                                            Keep captured images
+                                        </label>
+                                    </div>
+                                    <small class="text-muted ms-4">By default, images are deleted after upload unless this is enabled</small>
+                                </div>
+                                <div class="col-12">
+                                    <small class="text-muted">
+                                        Images directory: <span class="text-secondary" x-text="$store.citrascope.config.images_dir_path || 'Loading...'">Loading...</span>
+                                    </small>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Save Button -->
+            <div class="row">
+                <div class="col">
+                    <button type="submit" class="btn btn-primary" :disabled="$store.citrascope.isSavingConfig">
+                        <span x-text="$store.citrascope.isSavingConfig ? 'Saving...' : 'Save Configuration'"></span>
+                        <span x-show="$store.citrascope.isSavingConfig" class="spinner-border spinner-border-sm ms-2" role="status"></span>
+                    </button>
+                                    <small class="text-muted ms-3">
+                                        Config file: <span class="text-secondary" x-text="$store.citrascope.config.config_file_path || 'Loading...'">Loading...</span>
+                                    </small>
+                </div>
+            </div>
+        </form>
+    </div>