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

feat(ui): Display-Steuerbox in Playlist-Verwaltung

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jesko Anschütz 2026-03-27 07:10:23 +01:00
parent 2a312cd61a
commit 68fc0bf4cf
1 changed files with 49 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -777,6 +777,12 @@ const manageTmpl = `<!DOCTYPE html>
.morz-toast.show { transform:translateX(0); } .morz-toast.show { transform:translateX(0); }
.morz-toast.is-success { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; } .morz-toast.is-success { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.morz-toast.is-danger { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; } .morz-toast.is-danger { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
/* Display control box */
.display-ctrl { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.display-state-badge { font-size:.75rem; padding:.2em .65em; border-radius:99px; font-weight:700; }
.display-state-badge.on { background:#dcfce7; color:#166534; }
.display-state-badge.off { background:#fee2e2; color:#991b1b; }
.display-state-badge.unknown { background:#f3f4f6; color:#6b7280; }
</style> </style>
</head> </head>
<body> <body>
@ -932,6 +938,19 @@ const manageTmpl = `<!DOCTYPE html>
<!-- RIGHT: Library + Upload --> <!-- RIGHT: Library + Upload -->
<div> <div>
<!-- Display control -->
<div class="box mb-3">
<h3 class="title is-6 mb-3">Display</h3>
<div class="display-ctrl">
<span id="display-state-badge" class="display-state-badge {{.DisplayState}}">
{{if eq .DisplayState "on"}}An{{else if eq .DisplayState "off"}}Aus{{else}}Unbekannt{{end}}
</span>
<button class="button is-small is-success is-light" type="button"
onclick="sendDisplayCmd('on')">Einschalten</button>
<button class="button is-small is-danger is-light" type="button"
onclick="sendDisplayCmd('off')">Ausschalten</button>
</div>
</div>
<!-- Upload (collapsed) --> <!-- Upload (collapsed) -->
<div class="box mb-3"> <div class="box mb-3">
<details id="upload-details"> <details id="upload-details">
@ -1085,6 +1104,31 @@ function showToast(msg, type) {
setTimeout(function() { t.classList.remove('show'); setTimeout(function() { t.remove(); }, 300); }, 3500); setTimeout(function() { t.classList.remove('show'); setTimeout(function() { t.remove(); }, 300); }, 3500);
} }
// ─── Display control ─────────────────────────────────────────────
function sendDisplayCmd(state) {
var slug = {{.Screen.Slug | printf "%q"}};
fetch('/api/v1/screens/' + slug + '/display', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': getCsrf(),
'X-Requested-With': 'fetch'
},
body: JSON.stringify({state: state})
}).then(function(r) {
if (r.ok) {
var badge = document.getElementById('display-state-badge');
if (badge) {
badge.className = 'display-state-badge ' + state;
badge.textContent = state === 'on' ? 'An' : 'Aus';
}
showToast('Display ' + (state === 'on' ? 'eingeschaltet' : 'ausgeschaltet'), 'is-success');
} else {
showToast('Fehler beim Schalten', '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');
@ -1158,7 +1202,11 @@ if (sortableEl) {
var ids = Array.from(sortableEl.querySelectorAll('.pl-item[data-id]')).map(function(el) { return el.dataset.id; }); var ids = Array.from(sortableEl.querySelectorAll('.pl-item[data-id]')).map(function(el) { return el.dataset.id; });
fetch('/manage/' + SCREEN_SLUG + '/reorder', { fetch('/manage/' + SCREEN_SLUG + '/reorder', {
method: 'POST', method: 'POST',
headers: {'Content-Type':'application/json'}, headers: {
'Content-Type':'application/json',
'X-CSRF-Token': getCsrf(),
'X-Requested-With': 'fetch'
},
body: JSON.stringify(ids) body: JSON.stringify(ids)
}).then(function(r) { }).then(function(r) {
if (!r.ok) { showToast('⚠ Reihenfolge nicht gespeichert.','is-danger'); window.location.reload(); } if (!r.ok) { showToast('⚠ Reihenfolge nicht gespeichert.','is-danger'); window.location.reload(); }