move html to static folder

2026-01-16 07:57:33 +01:00
parent 4d9e0836e5
commit 45c400e7d3
5 changed files with 6 additions and 5 deletions
--- a/web/static/settings.html
+++ b/web/static/settings.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Sheduler Settings</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-50 min-h-screen p-6">
+    <div class="max-w-2xl mx-auto bg-white rounded-xl shadow-lg p-8 border border-gray-100">
+        <div class="flex justify-between items-center mb-8">
+            <h1 class="text-2xl font-bold text-gray-800">Weekly Scheduler</h1>
+            <a href="/" class="text-blue-600 hover:underline text-sm">Back</a>
+        </div>
+
+        <form id="scheduleForm" class="space-y-4">
+            <table class="w-full text-left">
+                <thead>
+                    <tr class="text-gray-400 text-xs uppercase">
+                        <th class="pb-4">Day</th>
+                        <th class="pb-4">Enabled</th>
+                        <th class="pb-4">Start Time</th>
+                        <th class="pb-4">End Time</th>
+                    </tr>
+                </thead>
+                <tbody class="text-gray-600 italic text-sm">
+                    </tbody>
+            </table>
+            <button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg font-bold shadow-md hover:bg-blue-700 transition">Save Schedule</button>
+        </form>
+    </div>
+
+    <script>
+        const days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
+        const tbody = document.querySelector('tbody');
+
+        // Generate Table Rows
+        days.forEach(day => {
+            tbody.innerHTML += `
+                <tr class="border-t border-gray-50">
+                    <td class="py-4 font-bold text-gray-700 not-italic">${day}</td>
+                    <td><input type="checkbox" name="${day}_active" class="rounded text-blue-600"></td>
+                    <td><input type="time" name="${day}_start" value="08:00" class="bg-gray-50 border rounded p-1"></td>
+                    <td><input type="time" name="${day}_end" value="22:00" class="bg-gray-50 border rounded p-1"></td>
+                </tr>
+            `;
+        });
+
+        // Load existing settings
+        async function loadSettings() {
+            const res = await fetch('/api/get-schedule');
+            const data = await res.json();
+            Object.keys(data).forEach(key => {
+                const el = document.querySelector(`[name="${key}"]`);
+                if(el.type === 'checkbox') el.checked = data[key];
+                else el.value = data[key];
+            });
+        }
+
+        document.getElementById('scheduleForm').onsubmit = async (e) => {
+            e.preventDefault();
+            const formData = new FormData(e.target);
+            const obj = {};
+            formData.forEach((value, key) => {
+                // Handle checkbox value manually
+                if (key.includes('_active')) obj[key] = true;
+                else obj[key] = value;
+            });
+            // Ensure unchecked boxes are false
+            days.forEach(day => { if(!obj[day+'_active']) obj[day+'_active'] = false; });
+
+            await fetch('/api/save-schedule', {
+                method: 'POST',
+                body: JSON.stringify(obj)
+            });
+            alert("Schedule Saved!");
+        };
+
+        loadSettings();
+    </script>
+</body>
+</html>