Implement server-side order persistence with SQLite and Flask API

js/drag-drop.js

@@ -3,30 +3,67 @@
  */
 
 const STORAGE_KEY_ORDER = 'services-order';
+const USER_ID = 'default'; // Could be customized per user in the future
 
-// Load saved order from localStorage
-function loadSavedOrder() {
+// Load saved order from server (with localStorage fallback)
+async function loadSavedOrder() {
   try {
+    // Try to load from server first
+    const response = await fetch(`/api/order?user_id=${USER_ID}`);
+    if (response.ok) {
+      const serverOrder = await response.json();
+      if (Object.keys(serverOrder).length > 0) {
+        // Sync server order to localStorage
+        localStorage.setItem(STORAGE_KEY_ORDER, JSON.stringify(serverOrder));
+        return serverOrder;
+      }
+    }
+    
+    // Fallback to localStorage
     const saved = localStorage.getItem(STORAGE_KEY_ORDER);
     return saved ? JSON.parse(saved) : {};
   } catch (e) {
     console.error('Error loading saved order:', e);
-    return {};
+    // Fallback to localStorage
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY_ORDER);
+      return saved ? JSON.parse(saved) : {};
+    } catch (e2) {
+      return {};
+    }
   }
 }
 
-// Save order to localStorage
-function saveSavedOrder(orderMap) {
+// Save order to server and localStorage
+async function saveSavedOrder(orderMap) {
   try {
+    // Save to localStorage immediately
     localStorage.setItem(STORAGE_KEY_ORDER, JSON.stringify(orderMap));
+    
+    // Also save to server
+    const response = await fetch('/api/order', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        user_id: USER_ID,
+        order: orderMap
+      })
+    });
+    
+    if (!response.ok) {
+      console.warn('Failed to save order to server, using localStorage only');
+    }
   } catch (e) {
-    console.error('Error saving order:', e);
+    console.error('Error saving order to server:', e);
+    // localStorage save already happened above, so at least we have local persistence
   }
 }
 
 // Apply saved order to service groups
-function applySavedOrder() {
-  const orderMap = loadSavedOrder();
+async function applySavedOrder() {
+  const orderMap = await loadSavedOrder();
   
   document.querySelectorAll('.service-group').forEach(group => {
     const groupName = group.querySelector('h2')?.textContent;