paadi/slideshowApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change schedule to settings with new default interval

Browse Source
This commit is contained in:
Adrian Zürcher
2026-01-21 09:03:53 +01:00
parent 66c6d9a3fb
commit d1f1ad563b
6 changed files with 191 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
web/static/settings.html
View File

@@ -8,24 +8,41 @@
<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>
<h1 class="text-2xl font-bold text-gray-800">Slideshow Settings</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 id="scheduleForm" class="space-y-8">
<div class="space-y-4">
<h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">General Settings</h2>
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg border border-gray-100">
<label class="text-gray-700 font-medium">Default Interval (seconds)</label>
<input type="number" name="default_interval" min="1" value="10"
class="w-24 bg-white border rounded-md p-2 text-center focus:ring-2 focus:ring-blue-500 outline-none">
</div>
</div>
<hr class="border-gray-100">
<div class="space-y-4">
<h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">Weekly Scheduler</h2>
<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>
</div>
<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 All Settings
</button>
</form>
</div>
@@ -47,32 +64,57 @@
// 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];
});
try {
const res = await fetch('/api/get-settings');
const data = await res.json();
Object.keys(data).forEach(key => {
const el = document.querySelector(`[name="${key}"]`);
if (el) {
if (el.type === 'checkbox') el.checked = data[key];
else el.value = data[key];
}
});
} catch (err) {
console.error("Failed to load settings:", err);
}
}
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', {
formData.forEach((value, key) => {
// Convert number fields to integers
if (key === 'default_interval') {
obj[key] = parseInt(value);
}
// Handle checkbox presence
else if (key.includes('_active')) {
obj[key] = true;
}
else {
obj[key] = value;
}
});
// Ensure unchecked boxes are sent as false
days.forEach(day => {
if (!obj[day + '_active']) obj[day + '_active'] = false;
});
const res = await fetch('/api/save-settings', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(obj)
});
alert("Schedule Saved!");
if (res.ok) {
alert("Settings Saved Successfully!");
} else {
alert("Error saving settings.");
}
};
loadSettings();