feat(ui): Screen-Übersicht neu gestaltet
This commit is contained in:
Alwin
parent
0aedf61569
commit
8bf142b5b1
1 changed files with 64 additions and 20 deletions
|
|
@ -1228,28 +1228,47 @@ function startUpload() {
|
|||
</html>`
|
||||
|
||||
const screenOverviewTmpl = `<!DOCTYPE html>
|
||||
<html lang="de" data-theme="light">
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="color-scheme" content="light">
|
||||
<title>Bildschirme – morz infoboard</title>
|
||||
<title>Meine Bildschirme – MORZ Infoboard</title>
|
||||
<link rel="stylesheet" href="/static/bulma.min.css">
|
||||
<style>
|
||||
body { background: #f5f5f5; }
|
||||
:root { --morz-red:#E30613; --morz-red-dark:#B8000F; --nav-bg:#1A1A2E; --bg:#F7F8FA; --surface:#FFFFFF; --shadow-sm:0 1px 4px rgba(0,0,0,.08); --shadow-md:0 4px 16px rgba(0,0,0,.12); --radius:8px; --radius-btn:6px; }
|
||||
body { background:var(--bg); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; min-height:100vh; }
|
||||
.navbar { background:var(--nav-bg) !important; }
|
||||
.navbar-item { color:rgba(255,255,255,.85) !important; }
|
||||
.morz-brand .accent { color:var(--morz-red); font-weight:800; }
|
||||
.screen-card { background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:box-shadow .15s, transform .15s; }
|
||||
.screen-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
|
||||
.screen-thumb-wrap { position:relative; }
|
||||
.screen-thumb { width:100%; height:180px; object-fit:cover; background:#1e293b; display:block; }
|
||||
.screen-status-dot { position:absolute; top:.65rem; right:.65rem; width:12px; height:12px; border-radius:50%; border:2px solid rgba(255,255,255,.8); background:#9ca3af; }
|
||||
.screen-status-dot.online { background:#22c55e; }
|
||||
.screen-status-dot.stale { background:#f59e0b; }
|
||||
.screen-status-dot.offline { background:#ef4444; }
|
||||
.screen-card-body { padding:1rem; }
|
||||
.screen-card-name { font-weight:700; font-size:1rem; margin-bottom:.25rem; display:flex; align-items:center; gap:.4rem; }
|
||||
.screen-card-sub { font-size:.8rem; color:#6b7280; margin-bottom:.85rem; }
|
||||
.button.is-primary { background:var(--morz-red) !important; border-color:var(--morz-red) !important; border-radius:var(--radius-btn); }
|
||||
.button.is-primary:hover { background:var(--morz-red-dark) !important; }
|
||||
.morz-toast { position:fixed; top:1rem; right:1rem; z-index:9999; max-width:380px; border-radius:24px; box-shadow:var(--shadow-md); padding:.75rem 1.25rem; display:flex; align-items:center; gap:.75rem; font-size:.9rem; transform:translateX(120%); transition:transform .25s ease; }
|
||||
.morz-toast.show { transform:translateX(0); }
|
||||
.morz-toast.is-success { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
|
||||
<nav class="navbar" role="navigation">
|
||||
<div class="navbar-brand">
|
||||
<span class="navbar-item"><strong>morz infoboard</strong></span>
|
||||
<span class="navbar-item morz-brand"><span class="accent">MORZ</span> Infoboard</span>
|
||||
</div>
|
||||
<div class="navbar-menu">
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<form method="POST" action="/logout">
|
||||
<input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
|
||||
<button class="button is-white is-outlined is-small" type="submit">Abmelden</button>
|
||||
<button class="button is-outlined is-small" style="color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.35)" type="submit">Abmelden</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1262,14 +1281,18 @@ const screenOverviewTmpl = `<!DOCTYPE html>
|
|||
<div class="columns is-multiline">
|
||||
{{range .Cards}}
|
||||
<div class="column is-one-third-desktop is-half-tablet">
|
||||
<div class="box" style="padding:0;overflow:hidden">
|
||||
<img class="screen-thumb"
|
||||
data-src="/api/v1/screens/{{.Screen.Slug}}/screenshot"
|
||||
alt="{{.Screen.Name}}"
|
||||
style="width:100%;height:180px;object-fit:cover;background:#222;display:block">
|
||||
<div style="padding:1rem">
|
||||
<p class="title is-5 mb-3">{{.Screen.Name}}</p>
|
||||
<a class="button is-primary is-fullwidth" href="/manage/{{.Screen.Slug}}">Verwalten</a>
|
||||
<div class="screen-card">
|
||||
<div class="screen-thumb-wrap">
|
||||
<img class="screen-thumb" data-src="/api/v1/screens/{{.Screen.Slug}}/screenshot" alt="{{.Screen.Name}}">
|
||||
<span class="screen-status-dot unknown" id="status-{{.Screen.Slug}}" title="Unbekannt"></span>
|
||||
</div>
|
||||
<div class="screen-card-body">
|
||||
<div class="screen-card-name">
|
||||
{{if eq .Screen.Orientation "portrait"}}📱{{else}}🖥{{end}}
|
||||
{{.Screen.Name}}
|
||||
</div>
|
||||
<div class="screen-card-sub">{{orientationLabel .Screen.Orientation}} · {{.Screen.Slug}}</div>
|
||||
<a class="button is-primary is-fullwidth" href="/manage/{{.Screen.Slug}}">Verwalten →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1282,13 +1305,34 @@ const screenOverviewTmpl = `<!DOCTYPE html>
|
|||
(function() {
|
||||
document.querySelectorAll('.screen-thumb').forEach(function(img) {
|
||||
img.src = img.dataset.src;
|
||||
setTimeout(function() { img.src = img.dataset.src + '?t=' + Date.now(); }, 4000);
|
||||
});
|
||||
setTimeout(function() {
|
||||
document.querySelectorAll('.screen-thumb').forEach(function(img) {
|
||||
img.src = img.dataset.src + '?t=' + Date.now();
|
||||
});
|
||||
}, 4000);
|
||||
})();
|
||||
|
||||
(function() {
|
||||
function update() {
|
||||
fetch('/api/v1/screens/status').then(function(r) { return r.ok ? r.json() : null; }).then(function(data) {
|
||||
if (!data || !data.screens) return;
|
||||
data.screens.forEach(function(s) {
|
||||
var el = document.getElementById('status-' + s.screen_id);
|
||||
if (!el) return;
|
||||
var st = s.derived_state || 'unknown';
|
||||
el.className = 'screen-status-dot ' + (st === 'online' ? 'online' : st === 'degraded' ? 'stale' : 'offline');
|
||||
el.title = st;
|
||||
});
|
||||
}).catch(function(){});
|
||||
}
|
||||
update(); setInterval(update, 30000);
|
||||
})();
|
||||
|
||||
function getCsrf() { var m = document.cookie.match('(?:^|; )morz_csrf=([^;]*)'); return m ? decodeURIComponent(m[1]) : ''; }
|
||||
function injectCSRF() {
|
||||
var t = getCsrf(); if (!t) return;
|
||||
document.querySelectorAll('form[method="POST"],form[method="post"]').forEach(function(f) {
|
||||
if (!f.querySelector('input[name="csrf_token"]')) { var i=document.createElement('input');i.type='hidden';i.name='csrf_token';i.value=t;f.appendChild(i); }
|
||||
});
|
||||
}
|
||||
if (document.readyState==='loading') document.addEventListener('DOMContentLoaded',injectCSRF); else injectCSRF();
|
||||
</script>
|
||||
</body>
|
||||
</html>`
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue