az/morz-infoboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): Zeitplan-Formular in Playlist-Verwaltung

Browse source
This commit is contained in:
Jesko Anschütz 2026-03-27 07:23:38 +01:00
parent 6cabaeca58
commit 588045ac04
1 changed files with 60 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
server/backend/internal/httpapi/manage/templates.go
View file

@ -783,6 +783,10 @@ const manageTmpl = `<!DOCTYPE html>
.display-state-badge.on { background:#dcfce7; color:#166534; } .display-state-badge.on { background:#dcfce7; color:#166534; }
.display-state-badge.off { background:#fee2e2; color:#991b1b; } .display-state-badge.off { background:#fee2e2; color:#991b1b; }
.display-state-badge.unknown { background:#f3f4f6; color:#6b7280; } .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> </style>
</head> </head>
<body> <body>
@ -951,6 +955,33 @@ const manageTmpl = `<!DOCTYPE html>
onclick="sendDisplayCmd('off')">Ausschalten</button> onclick="sendDisplayCmd('off')">Ausschalten</button>
</div> </div>
</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) --> <!-- Upload (collapsed) -->
<div class="box mb-3"> <div class="box mb-3">
<details id="upload-details"> <details id="upload-details">
@ -1129,6 +1160,35 @@ function sendDisplayCmd(state) {
}).catch(function() { showToast('Netzwerkfehler', 'is-danger'); }); }).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 ───────────────────────────────────────────────── // ─── ?msg= toast ─────────────────────────────────────────────────
(function() { (function() {
var msg = new URLSearchParams(window.location.search).get('msg'); var msg = new URLSearchParams(window.location.search).get('msg');