From 3d6856f108bbb3c35be56145daebf418e4683892 Mon Sep 17 00:00:00 2001
From: John Mizerek <mizerek@gmail.com>
Date: Sat, 7 Feb 2026 17:22:14 -0800
Subject: [PATCH] KDS/HUD: Add online/offline connection detection

- Listen to browser online/offline events
- Check navigator.onLine before API calls
- Update status indicator immediately when connection changes
- Auto-refresh when coming back online

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 hud/hud.js | 23 +++++++++++++++++++++++
 kds/kds.js | 23 +++++++++++++++++++++++
 2 files changed, 46 insertions(+)

diff --git a/hud/hud.js b/hud/hud.js
index 7f95006..bb5e34c 100644
--- a/hud/hud.js
+++ b/hud/hud.js
@@ -49,6 +49,23 @@ const HUD = {
       }
     });
 
+    // Monitor online/offline status
+    window.addEventListener('online', () => {
+      console.log('[HUD] Back online');
+      this.setConnected(true);
+      this.fetchTasks();
+    });
+
+    window.addEventListener('offline', () => {
+      console.log('[HUD] Went offline');
+      this.setConnected(false);
+    });
+
+    // Initial connection check
+    if (!navigator.onLine) {
+      this.setConnected(false);
+    }
+
     console.log('[HUD] Initialized');
   },
 
@@ -63,6 +80,12 @@ const HUD = {
 
   // Fetch tasks from API
   async fetchTasks() {
+    // Check if online before attempting fetch
+    if (!navigator.onLine) {
+      this.setConnected(false);
+      return;
+    }
+
     try {
       const response = await fetch(`${this.config.apiBaseUrl}/listPending.cfm`, {
         method: 'POST',
diff --git a/kds/kds.js b/kds/kds.js
index 3345cc1..7486614 100644
--- a/kds/kds.js
+++ b/kds/kds.js
@@ -23,6 +23,23 @@ document.addEventListener('DOMContentLoaded', () => {
   checkStationSelection();
   updateClock();
   setInterval(updateClock, 1000);
+
+  // Monitor online/offline status
+  window.addEventListener('online', () => {
+    console.log('[KDS] Back online');
+    updateStatus(true);
+    loadOrders(); // Refresh immediately when back online
+  });
+
+  window.addEventListener('offline', () => {
+    console.log('[KDS] Went offline');
+    updateStatus(false);
+  });
+
+  // Initial connection check
+  if (!navigator.onLine) {
+    updateStatus(false);
+  }
 });
 
 // Update clock display
@@ -197,6 +214,12 @@ function startAutoRefresh() {
 async function loadOrders() {
   if (!config.businessId) return;
 
+  // Check if online before attempting fetch
+  if (!navigator.onLine) {
+    updateStatus(false);
+    return;
+  }
+
   try {
     const url = `${config.apiBaseUrl}/orders/listForKDS.cfm`;
     const response = await fetch(url, {