123 lines
4.9 KiB
HTML
123 lines
4.9 KiB
HTML
<!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">Slideshow Settings</h1>
|
|
<a href="/" class="text-blue-600 hover:underline text-sm">Back</a>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<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() {
|
|
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) => {
|
|
// 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)
|
|
});
|
|
|
|
if (res.ok) {
|
|
alert("Settings Saved Successfully!");
|
|
} else {
|
|
alert("Error saving settings.");
|
|
}
|
|
};
|
|
|
|
loadSettings();
|
|
</script>
|
|
</body>
|
|
</html> |