bom-local-service/Views/RadarTest/Index.cshtml

@{
    ViewData["Title"] = $"BOM Radar Test - {ViewBag.Suburb}, {ViewBag.State}";
    var apiBaseUrl = ViewBag.ApiBaseUrl as string ?? "";
    var suburb = ViewBag.Suburb as string ?? "";
    var state = ViewBag.State as string ?? "";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewData["Title"]</title>
    <link rel="stylesheet" href="~/css/radar-test/styles.css" asp-append-version="true" />
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="header-content">
                <h1>🌧️ BOM Radar Test</h1>
                <div class="subtitle">@suburb, @state</div>
            </div>
            <div class="header-actions">
                <button class="settings-header-btn" id="settings-btn-header">
                    <span>⚙️</span>
                    <span>Settings</span>
                </button>
            </div>
        </div>
        
        <div id="error-container"></div>
        
        <div class="content">
            <!-- Status Cards Section - Above slideshow -->
            <div class="info-section">
                <div class="info-card">
                    <h3>Cache & Update Status</h3>
                    <div class="value" id="cache-status">Checking...</div>
                    <div class="timestamp" id="update-status-detail" style="cursor: help;"></div>
                    <div style="font-size: 0.85em; color: #666; margin-top: 5px; font-style: italic;">
                        <span id="estimation-note" style="display: none;">Estimates improve as metrics are collected from completed updates</span>
                    </div>
                </div>
                
                <div class="info-card">
                    <h3>Observation Time</h3>
                    <div class="value" id="observation-time">-</div>
                </div>
                
                <div class="info-card">
                    <h3>Cache Expires</h3>
                    <div class="value" id="cache-expires">-</div>
                    <div class="timestamp" id="cache-expires-relative"></div>
                </div>
                
                <div class="info-card">
                    <h3>Next Update</h3>
                    <div class="value" id="next-update">-</div>
                    <div class="timestamp" id="next-update-relative"></div>
                </div>
                
                <div class="info-card">
                    <h3>Weather Station</h3>
                    <div class="value" id="weather-station">-</div>
                </div>
                
                <div class="info-card">
                    <h3>Distance</h3>
                    <div class="value" id="distance">-</div>
                </div>
                
                <div class="info-card">
                    <h3>Auto Refresh</h3>
                    <div class="value">
                        <span class="refresh-indicator" id="refresh-indicator"></span>
                        <span id="refresh-status">Active</span>
                    </div>
                    <div class="timestamp" id="last-refresh"></div>
                    <div class="timestamp" id="next-client-check"></div>
                </div>
            </div>
            
            <!-- Radar Slideshow Section -->
            <div class="radar-section">
                <div class="radar-image-container">
                    <div class="loading" id="loading">Loading radar data...</div>
                    <img id="radar-image" class="radar-image" style="display: none;" alt="Radar image">
                </div>
                
                <div class="frame-controls" id="frame-controls"></div>
                
                <div class="play-controls">
                    <button class="play-btn" id="play-btn">▶ Play</button>
                    <button class="play-btn" id="prev-btn">◀ Previous</button>
                    <button class="play-btn" id="next-btn">Next ▶</button>
                </div>
                
                <div class="frame-info" id="frame-info"></div>
            </div>
        </div>
    </div>
    
    <!-- Settings Modal -->
    <div id="settings-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 1000; align-items: center; justify-content: center; animation: fadeIn 0.2s;">
        <div style="background: white; border-radius: 16px; padding: 20px; max-width: 650px; width: 95%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); position: relative;">
            <button id="close-settings-btn" style="position: absolute; top: 15px; right: 15px; background: #f0f0f0; border: none; font-size: 24px; color: #666; cursor: pointer; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s; font-weight: 300;" 
                    onmouseover="this.style.background='#e0e0e0'; this.style.color='#333';" 
                    onmouseout="this.style.background='#f0f0f0'; this.style.color='#666';"
                    onclick="hideSettings()">×</button>
            <h2 style="margin-bottom: 20px; color: #667eea; font-size: 1.5em; display: flex; align-items: center; gap: 12px; font-weight: 700;">
                <span style="font-size: 1.2em;">⚙️</span> Settings
            </h2>
            
            <div style="background: #f8f9ff; border-left: 4px solid #667eea; padding: 15px; border-radius: 8px; margin-bottom: 30px;">
                <div style="font-weight: 600; color: #667eea; margin-bottom: 5px;">💡 Tip</div>
                <div style="font-size: 0.9em; color: #666;">Configure your slideshow experience and select extended timespans to view historical radar data.</div>
            </div>
            
            <div style="margin-bottom: 25px;">
                <div style="font-size: 0.85em; text-transform: uppercase; color: #667eea; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 15px;">Slideshow Configuration</div>
                
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #333;">Slideshow Timespan</label>
                    <select id="timespan-select" style="width: 100%; padding: 12px; border: 2px solid #667eea; border-radius: 8px; font-size: 1em; background: white;">
                        <option value="latest">Latest 7 frames (default)</option>
                        <option value="1h">Last 1 hour</option>
                        <option value="3h">Last 3 hours</option>
                        <option value="6h">Last 6 hours</option>
                        <option value="12h">Last 12 hours</option>
                        <option value="24h">Last 24 hours</option>
                        <option value="custom">Custom range...</option>
                    </select>
                    <div class="timestamp" style="margin-top: 6px;">Select how much historical data to include in slideshow</div>
                </div>
                
                <div id="cache-range-info" style="margin-bottom: 20px; padding: 12px; background: #f8f9fa; border-radius: 8px; font-size: 0.9em; border: 1px solid #e0e0e0;">
                    <div style="font-weight: 600; color: #333; margin-bottom: 5px;">📊 Available Cache Range:</div>
                    <div id="cache-range-text">Loading...</div>
                </div>
                
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #333;">Frame Interval (seconds)</label>
                    <input type="number" id="frame-interval-input" min="0.1" step="0.1" style="width: 100%; padding: 12px; border: 2px solid #667eea; border-radius: 8px; font-size: 1em;">
                    <div class="timestamp" style="margin-top: 6px;">Time between frames in slideshow (minimum 0.1 seconds)</div>
                </div>
            </div>
            
            <div style="margin-bottom: 25px; padding-top: 20px; border-top: 2px solid #f0f0f0;">
                <div style="font-size: 0.85em; text-transform: uppercase; color: #667eea; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 15px;">Auto Refresh</div>
                
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #333;">Auto Refresh Interval (seconds)</label>
                    <input type="number" id="refresh-interval-input" min="5" step="5" style="width: 100%; padding: 12px; border: 2px solid #667eea; border-radius: 8px; font-size: 1em;">
                    <div class="timestamp" style="margin-top: 6px;">How often to check for new radar data (minimum 5 seconds)</div>
                </div>
            </div>
            
            <div id="custom-range-section" style="display: none; margin-bottom: 20px; padding: 15px; background: #f8f9ff; border-radius: 8px; border: 1px solid #e0e0ff;">
                <div style="font-weight: 600; color: #667eea; margin-bottom: 12px;">📅 Custom Time Range</div>
                <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #333;">Start Time</label>
                <input type="datetime-local" id="start-time-input" style="width: 100%; padding: 12px; border: 2px solid #667eea; border-radius: 8px; font-size: 1em; margin-bottom: 12px;">
                
                <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #333;">End Time</label>
                <input type="datetime-local" id="end-time-input" style="width: 100%; padding: 12px; border: 2px solid #667eea; border-radius: 8px; font-size: 1em;">
                
                <div class="timestamp" style="margin-top: 6px;">Select custom time range (times are in local timezone). Maximum range is based on your cache retention settings.</div>
            </div>
            
            <div style="margin-bottom: 25px; padding-top: 20px; border-top: 2px solid #f0f0f0;">
                <div style="font-size: 0.85em; text-transform: uppercase; color: #667eea; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 15px;">Playback Options</div>
                
                <div style="margin-bottom: 20px;">
                    <label style="display: flex; align-items: center; cursor: pointer; padding: 12px; background: #f8f9fa; border-radius: 8px; transition: background 0.2s;" 
                           onmouseover="this.style.background='#f0f0f0';" 
                           onmouseout="this.style.background='#f8f9fa';">
                        <input type="checkbox" id="auto-play-input" style="width: 20px; height: 20px; margin-right: 12px; cursor: pointer;">
                        <span style="font-weight: 600; color: #333;">Auto-play on page load</span>
                    </label>
                </div>
            </div>
            
            <div style="display: flex; gap: 12px; margin-top: 30px; padding-top: 20px; border-top: 2px solid #f0f0f0;">
                <button class="play-btn" id="save-settings-btn" style="flex: 1; padding: 14px; font-size: 1.05em; font-weight: 600;">💾 Save Settings</button>
                <button class="play-btn" id="cancel-settings-btn" style="flex: 1; background: #6c757d; padding: 14px; font-size: 1.05em; font-weight: 600;" 
                        onmouseover="this.style.background='#5a6268';" 
                        onmouseout="this.style.background='#6c757d';">Cancel</button>
            </div>
        </div>
    </div>
    
    <script>
        // Inject server-side configuration
        window.API_BASE = '@apiBaseUrl';
    </script>
    <script type="module" src="~/js/radar-test/app.js" asp-append-version="true"></script>
</body>
</html>