Added user input tracking + Started error management for in the Designer

src/assets/icons.py

@@ -18,4 +18,7 @@ icon_add_regular = NotStr("""<svg name="add" xmlns="http://www.w3.org/2000/svg"
     </path>
   </g>
 </svg>
-""")
+""")
+
+# Fluent ErrorCircle20Regular
+icon_error = NotStr("""<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20"><g fill="none"><path d="M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16zm0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14zm0 9.5a.75.75 0 1 1 0 1.5a.75.75 0 0 1 0-1.5zM10 6a.5.5 0 0 1 .492.41l.008.09V11a.5.5 0 0 1-.992.09L9.5 11V6.5A.5.5 0 0 1 10 6z" fill="currentColor"></path></g></svg>""")

src/assets/main.js

@@ -88,4 +88,125 @@ function enableTooltip() {
     }
 
     element.removeAttribute("mmt-no-tooltip");
-}
+}
+
+// Function to save form data to browser storage and track user input in real time
+function saveFormData(formId) {
+    const form = document.getElementById(formId);
+    if (!form) {
+        console.error(`Form with ID '${formId}' not found`);
+        return;
+    }
+
+    const storageKey = `formData_${formId}`;
+
+    // Function to save current form state
+    function saveCurrentState() {
+        const formData = {};
+
+        // Get all input elements
+        const inputs = form.querySelectorAll('input, select, textarea');
+
+        inputs.forEach(input => {
+            if (input.type === 'checkbox' || input.type === 'radio') {
+                formData[input.name || input.id] = input.checked;
+            } else {
+                formData[input.name || input.id] = input.value;
+            }
+        });
+
+        // Store in browser storage
+        const dataToStore = {
+            timestamp: new Date().toISOString(),
+            data: formData
+        };
+
+        try {
+            localStorage.setItem(storageKey, JSON.stringify(dataToStore));
+        } catch (error) {
+            console.error('Error saving form data:', error);
+        }
+    }
+
+    // Add event listeners for real-time tracking
+    const inputs = form.querySelectorAll('input, select, textarea');
+
+    inputs.forEach(input => {
+        // For text inputs, textareas, and selects
+        if (input.type === 'text' || input.type === 'email' || input.type === 'password' ||
+            input.type === 'number' || input.type === 'tel' || input.type === 'url' ||
+            input.tagName === 'TEXTAREA' || input.tagName === 'SELECT') {
+
+            // Use 'input' event for real-time tracking
+            input.addEventListener('input', saveCurrentState);
+            // Also use 'change' event as fallback
+            input.addEventListener('change', saveCurrentState);
+        }
+
+        // For checkboxes and radio buttons
+        if (input.type === 'checkbox' || input.type === 'radio') {
+            input.addEventListener('change', saveCurrentState);
+        }
+    });
+
+    // Save initial state
+    saveCurrentState();
+
+    console.debug(`Real-time form tracking enabled for form: ${formId}`);
+}
+
+// Function to restore form data from browser storage
+function restoreFormData(formId) {
+    const form = document.getElementById(formId);
+    if (!form) {
+        console.error(`Form with ID '${formId}' not found`);
+        return;
+    }
+
+    const storageKey = `formData_${formId}`;
+
+    try {
+        const storedData = localStorage.getItem(storageKey);
+
+        if (storedData) {
+            const parsedData = JSON.parse(storedData);
+            const formData = parsedData.data;
+
+            // Restore all input values
+            const inputs = form.querySelectorAll('input, select, textarea');
+
+            inputs.forEach(input => {
+                const key = input.name || input.id;
+                if (formData.hasOwnProperty(key)) {
+                    if (input.type === 'checkbox' || input.type === 'radio') {
+                        input.checked = formData[key];
+                    } else {
+                        input.value = formData[key];
+                    }
+                }
+            });
+
+        }
+    } catch (error) {
+        console.error('Error restoring form data:', error);
+    }
+}
+
+
+function bindFormData(formId) {
+  console.debug("bindFormData on form " + (formId));
+  restoreFormData(formId);
+  saveFormData(formId);
+}
+
+// Function to clear saved form data
+function clearFormData(formId) {
+    const storageKey = `formData_${formId}`;
+
+    try {
+        localStorage.removeItem(storageKey);
+        console.log(`Cleared saved data for form: ${formId}`);
+    } catch (error) {
+        console.error('Error clearing form data:', error);
+    }
+}