Update index.html

index.html

@@ -8,7 +8,6 @@
     <meta name="theme-color" content="#2c303a" media="(prefers-color-scheme: dark)">
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
-        /* Custom styles (UNCHANGED from your original - Retained for brevity) */
         :root {
             --light-bg: #e0e5ec; --dark-bg: #2c303a; --light-shadow-outer-1: #a3b1c6;
             --light-shadow-outer-2: #ffffff; --dark-shadow-outer-1: #22252e; --dark-shadow-outer-2: #363a46;
@@ -117,33 +116,51 @@
         const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
         const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
 
-        let monitoredUrlsCache = []; // Client-side cache of URL data from backend
-
-        const UI_REFRESH_INTERVAL_MS = 5000; // Refresh UI data from backend every 5 seconds
-        const HISTORY_DURATION_MS_FOR_DISPLAY = 60 * 60 * 1000; // For uptime % and history bar visualization
+        let monitoredUrlsCache = [];
+        const UI_REFRESH_INTERVAL_MS = 5000;
+        const HISTORY_DURATION_MS_FOR_DISPLAY = 60 * 60 * 1000;
         const MAX_HISTORY_POINTS_FOR_DISPLAY = 90;
+        
+        const USER_ID_KEY = 'urlPingerUserId'; // Key for localStorage
+        let currentAppUserId = null; // In-memory cache for the user ID
+
+        // --- User ID Management ---
+        function getAppUserId() {
+            if (currentAppUserId) return currentAppUserId;
+
+            let userId = localStorage.getItem(USER_ID_KEY);
+            if (!userId) {
+                if (crypto.randomUUID) {
+                    userId = crypto.randomUUID();
+                } else { // Fallback for older browsers (less robust UUID)
+                    userId = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+                        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+                        return v.toString(16);
+                    });
+                }
+                localStorage.setItem(USER_ID_KEY, userId);
+            }
+            currentAppUserId = userId;
+            return userId;
+        }
 
-        // --- Theme Toggle (UNCHANGED logic) ---
+        // --- Theme Toggle ---
         function applyTheme(isDark) {
             if (isDark) {
                 document.documentElement.classList.add('dark');
                 themeToggleLightIcon.classList.remove('hidden');
                 themeToggleDarkIcon.classList.add('hidden');
-                requestAnimationFrame(() => {
-                    const darkBg = getComputedStyle(document.documentElement).getPropertyValue('--dark-bg').trim();
-                    document.querySelector('meta[name="theme-color"][media="(prefers-color-scheme: dark)"]').setAttribute('content', darkBg);
-                });
             } else {
                 document.documentElement.classList.remove('dark');
                 themeToggleLightIcon.classList.add('hidden');
                 themeToggleDarkIcon.classList.remove('hidden');
-                requestAnimationFrame(() => {
-                     const lightBg = getComputedStyle(document.documentElement).getPropertyValue('--light-bg').trim();
-                    document.querySelector('meta[name="theme-color"]:not([media])').setAttribute('content', lightBg);
-                });
             }
+             // Update meta theme-color and body background after class change
             requestAnimationFrame(() => {
-                 document.body.style.backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--light-bg').trim();
+                const currentBg = getComputedStyle(document.documentElement).getPropertyValue('--light-bg').trim();
+                document.querySelector('meta[name="theme-color"]:not([media])').setAttribute('content', currentBg);
+                document.querySelector('meta[name="theme-color"][media="(prefers-color-scheme: dark)"]').setAttribute('content', currentBg); // Also set dark for consistency if needed
+                document.body.style.backgroundColor = currentBg;
             });
         }
         function toggleTheme() {
@@ -162,39 +179,59 @@
 
         // --- API Communication Wrapper ---
         async function apiRequest(endpoint, options = {}) {
+            const userId = getAppUserId(); // Get or generate user ID for each request
+            
+            const defaultHeaders = { 'X-User-ID': userId };
+            // Only set Content-Type if body exists, otherwise let browser handle or set explicitly
+            if (options.body && typeof options.body === 'string' && (!options.headers || !options.headers['Content-Type'])) {
+                 defaultHeaders['Content-Type'] = 'application/json';
+            }
+
+            const mergedOptions = {
+                ...options,
+                headers: {
+                    ...defaultHeaders,
+                    ...(options.headers || {}),
+                }
+            };
+            
+            // For GET/HEAD/DELETE (typically no body), ensure Content-Type is not forced if not needed
+            const httpMethod = (mergedOptions.method || 'GET').toUpperCase();
+            if (!mergedOptions.body && (httpMethod === 'GET' || httpMethod === 'HEAD' || httpMethod === 'DELETE')) {
+                if (mergedOptions.headers && mergedOptions.headers['Content-Type'] === 'application/json') { // Only remove if it was our default
+                    delete mergedOptions.headers['Content-Type'];
+                }
+            }
+
             try {
-                const response = await fetch(endpoint, options);
+                const response = await fetch(endpoint, mergedOptions);
                 if (!response.ok) {
                     const errorData = await response.json().catch(() => ({ message: response.statusText }));
                     throw new Error(errorData.error || errorData.message || `HTTP Error ${response.status}`);
                 }
                 if (response.status === 204 || response.headers.get("content-length") === "0") {
-                    return null; // Handle No Content responses
+                    return null;
                 }
                 return await response.json();
             } catch (error) {
                 console.error(`API Request Error for ${endpoint}:`, error);
-                errorMsg.textContent = `Error: ${error.message}`; // Display error to user
-                throw error; // Re-throw for calling function to handle if needed
+                errorMsg.textContent = `Error: ${error.message}`;
+                throw error;
             }
         }
 
         async function fetchAndRenderUrls() {
             try {
-                const dataFromServer = await apiRequest('/api/urls');
-                monitoredUrlsCache = dataFromServer || []; // API might return empty list or null
+                const dataFromServer = await apiRequest('/api/urls'); // User ID header is added by apiRequest
+                monitoredUrlsCache = dataFromServer || [];
                 renderUrlListUI();
             } catch (e) {
-                // Error already logged by apiRequest and potentially shown in errorMsg
-                // Optionally, render a more specific error state for the list
-                urlList.innerHTML = `<p class="italic" style="color: var(--text-light-muted);">Could not load URLs. Server may be down.</p>`;
+                urlList.innerHTML = `<p class="italic" style="color: var(--text-light-muted);">Could not load URLs. Server may be down or user ID missing.</p>`;
             }
         }
         
-        // --- Uptime and History Bar Calculation (for UI) ---
         function getDisplayMetrics(backendHistoryArray) {
-            const historyForDisplay = (backendHistoryArray || []).map(h => ({ ...h, timestamp: h.timestamp * 1000 })); // Convert backend sec to ms
-            
+            const historyForDisplay = (backendHistoryArray || []).map(h => ({ ...h, timestamp: h.timestamp * 1000 }));
             const cutoffTimeMs = Date.now() - HISTORY_DURATION_MS_FOR_DISPLAY;
             const relevantHistory = historyForDisplay.filter(entry => entry.timestamp >= cutoffTimeMs);
 
@@ -202,13 +239,10 @@
 
             const okCount = relevantHistory.filter(entry => entry.status === 'ok').length;
             const uptimePercent = Math.round((okCount / relevantHistory.length) * 100);
-            // Newest history points first for the bar rendering logic (flex-direction: row-reverse)
             const historyBarPoints = relevantHistory.slice(-MAX_HISTORY_POINTS_FOR_DISPLAY).map(entry => entry.status).reverse();
-
             return { percentage: `${uptimePercent}%`, points: historyBarPoints };
         }
 
-        // --- UI Rendering Logic ---
         function createUrlItemDOM(urlData) {
              const itemDiv = document.createElement('div');
              itemDiv.className = 'neumorphic-outset-sm p-4 mb-4 last:mb-0 url-item';
@@ -265,9 +299,9 @@
         }
 
         function renderUrlListUI() {
-            urlList.innerHTML = ''; // Clear current list
+            urlList.innerHTML = '';
             if (monitoredUrlsCache.length === 0) {
-                urlList.innerHTML = `<p class="italic" style="color: var(--text-light-muted);">No URLs being monitored. Add one to begin.</p>`;
+                urlList.innerHTML = `<p class="italic" style="color: var(--text-light-muted);">No URLs being monitored by you. Add one to begin.</p>`;
                 return;
             }
             monitoredUrlsCache.forEach(urlData => {
@@ -276,27 +310,25 @@
             });
         }
 
-        // --- Event Handlers ---
         async function handleAddUrl() {
             let urlToAdd = urlInput.value.trim();
-            errorMsg.textContent = ''; // Clear previous errors
+            errorMsg.textContent = ''; 
 
             if (!urlToAdd) {
                 errorMsg.textContent = 'Please enter a URL.'; return;
             }
             if (!urlToAdd.startsWith('http://') && !urlToAdd.startsWith('https://')) {
-                urlToAdd = 'https://' + urlToAdd; // Default to https
+                urlToAdd = 'https://' + urlToAdd;
             }
             try {
-                new URL(urlToAdd); // Basic client-side format validation
+                new URL(urlToAdd);
             } catch (_) {
                 errorMsg.textContent = 'Invalid URL format.'; return;
             }
 
-            // Optimistic client-side duplicate check (backend does final validation)
             const normalizedUrl = urlToAdd.replace(/\/+$/, '').toLowerCase();
             if (monitoredUrlsCache.some(u => u.url.replace(/\/+$/, '').toLowerCase() === normalizedUrl)) {
-                errorMsg.textContent = 'This URL appears to be already monitored.'; return;
+                errorMsg.textContent = 'This URL appears to be already monitored by you.'; return;
             }
 
             addUrlBtn.disabled = true; addUrlBtn.textContent = '...'; urlInput.disabled = true;
@@ -304,24 +336,21 @@
             try {
                 await apiRequest('/api/urls', {
                     method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
+                    headers: { 'Content-Type': 'application/json' }, // Explicitly set for POST with JSON body
                     body: JSON.stringify({ url: urlToAdd })
                 });
-                urlInput.value = ''; // Clear input on success
-                await fetchAndRenderUrls(); // Refresh list to show the newly added URL
+                urlInput.value = '';
+                await fetchAndRenderUrls();
             } catch (e) {
-                // apiRequest already displayed the error in errorMsg
+                // apiRequest already displayed the error
             } finally {
                 addUrlBtn.disabled = false; addUrlBtn.textContent = 'Add'; urlInput.disabled = false;
             }
         }
 
         async function handleRemoveUrl(urlIdToRemove) {
-            // Optional: add a confirm() dialog here
-            // if (!confirm(`Are you sure you want to remove this URL?`)) return;
             try {
                 await apiRequest(`/api/urls/${urlIdToRemove}`, { method: 'DELETE' });
-                // Remove from local cache and re-render for immediate UI update
                 monitoredUrlsCache = monitoredUrlsCache.filter(url => url.id !== urlIdToRemove);
                 renderUrlListUI();
             } catch (e) {
@@ -333,15 +362,15 @@
             setInterval(fetchAndRenderUrls, UI_REFRESH_INTERVAL_MS);
         }
 
-        // --- Initialization ---
         addUrlBtn.addEventListener('click', handleAddUrl);
         urlInput.addEventListener('keypress', (event) => {
             if (event.key === 'Enter') { event.preventDefault(); handleAddUrl(); }
         });
 
         document.addEventListener('DOMContentLoaded', () => {
-            fetchAndRenderUrls();    // Initial data load
-            setupPeriodicDataRefresh(); // Start refreshing data from backend
+            getAppUserId(); // Ensure user ID is generated or loaded on start
+            fetchAndRenderUrls();
+            setupPeriodicDataRefresh();
         });
     </script>
 </body>