feat(ui): Zeitplan-Formular in Playlist-Verwaltung
This commit is contained in:
parent
6cabaeca58
commit
588045ac04
1 changed files with 60 additions and 0 deletions
|
|
@ -783,6 +783,10 @@ const manageTmpl = `<!DOCTYPE html>
|
|||
.display-state-badge.on { background:#dcfce7; color:#166534; }
|
||||
.display-state-badge.off { background:#fee2e2; color:#991b1b; }
|
||||
.display-state-badge.unknown { background:#f3f4f6; color:#6b7280; }
|
||||
/* Schedule control */
|
||||
.schedule-row { display:flex; gap:.75rem; align-items:flex-end; flex-wrap:wrap; margin-top:.75rem; }
|
||||
.schedule-row .field { margin:0; }
|
||||
.schedule-row label { font-size:.75rem; color:#6b7280; display:block; margin-bottom:.2rem; font-weight:600; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -951,6 +955,33 @@ const manageTmpl = `<!DOCTYPE html>
|
|||
onclick="sendDisplayCmd('off')">Ausschalten</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Schedule control -->
|
||||
<div class="box mb-3">
|
||||
<h3 class="title is-6 mb-2">Zeitplan</h3>
|
||||
<label class="pl-toggle" title="Zeitplan aktivieren">
|
||||
<input type="checkbox" id="schedule-enabled"
|
||||
{{if .Schedule.ScheduleEnabled}}checked{{end}}
|
||||
onchange="saveSchedule()">
|
||||
<span class="pl-toggle-track"></span>
|
||||
<span class="pl-toggle-thumb"></span>
|
||||
<span class="pl-toggle-label" style="font-size:.8rem">Zeitplan aktiv</span>
|
||||
</label>
|
||||
<div class="schedule-row">
|
||||
<div class="field">
|
||||
<label>Einschalten</label>
|
||||
<input class="input is-small" type="time" id="power-on-time"
|
||||
value="{{.Schedule.PowerOnTime}}"
|
||||
onchange="saveSchedule()" style="width:8rem">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Ausschalten</label>
|
||||
<input class="input is-small" type="time" id="power-off-time"
|
||||
value="{{.Schedule.PowerOffTime}}"
|
||||
onchange="saveSchedule()" style="width:8rem">
|
||||
</div>
|
||||
</div>
|
||||
<p id="schedule-save-ok" class="save-ok mt-2" style="font-size:.8rem">✓ Gespeichert</p>
|
||||
</div>
|
||||
<!-- Upload (collapsed) -->
|
||||
<div class="box mb-3">
|
||||
<details id="upload-details">
|
||||
|
|
@ -1129,6 +1160,35 @@ function sendDisplayCmd(state) {
|
|||
}).catch(function() { showToast('Netzwerkfehler', 'is-danger'); });
|
||||
}
|
||||
|
||||
// ─── Schedule control ────────────────────────────────────────────────────────
|
||||
function saveSchedule() {
|
||||
var slug = {{.Screen.Slug | printf "%q"}};
|
||||
var enabled = document.getElementById('schedule-enabled').checked;
|
||||
var onTime = document.getElementById('power-on-time').value;
|
||||
var offTime = document.getElementById('power-off-time').value;
|
||||
fetch('/api/v1/screens/' + slug + '/schedule', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-Token': getCsrf(),
|
||||
'X-Requested-With': 'fetch'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
schedule_enabled: enabled,
|
||||
power_on_time: onTime,
|
||||
power_off_time: offTime
|
||||
})
|
||||
}).then(function(r) {
|
||||
var ok = document.getElementById('schedule-save-ok');
|
||||
if (r.ok && ok) {
|
||||
ok.classList.add('show');
|
||||
setTimeout(function() { ok.classList.remove('show'); }, 2000);
|
||||
} else if (!r.ok) {
|
||||
showToast('Zeitplan konnte nicht gespeichert werden', 'is-danger');
|
||||
}
|
||||
}).catch(function() { showToast('Netzwerkfehler', 'is-danger'); });
|
||||
}
|
||||
|
||||
// ─── ?msg= toast ─────────────────────────────────────────────────
|
||||
(function() {
|
||||
var msg = new URLSearchParams(window.location.search).get('msg');
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue