commits
tags
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kiosk Admin</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<div class="container">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem">
<h1 style="margin:0">Kiosk Admin</h1>
<a href="/logout" style="font-size:.85rem;color:#94a3b8;text-decoration:none;padding:.35rem .75rem;border:1px solid #334155;border-radius:5px" onmouseover="this.style.color='#f87171'" onmouseout="this.style.color='#94a3b8'">Logga ut</a>
</div>
<!-- Föreslagna uppspelningar från chatten -->
<div id="play-suggestions" style="display:none; margin-bottom:.75rem; flex-direction:column; gap:.4rem;"></div>
<!-- Sektion: Visa nu -->
<section>
<h2>Visa nu</h2>
<div class="row">
<input id="url-input" type="url" placeholder="https://example.com eller YouTube-länk">
<button onclick="visaAdress()">Visa</button>
</div>
<div class="row">
<label class="upload-label">
<input id="upload-input" type="file" accept="video/*,image/*,.html,.htm,.pdf,.pptx,.ppt,.odp" onchange="laddaUpp()">
Ladda upp fil
</label>
<button class="secondary" onclick="openBrowser(visaLokalFil)">Välj lokal fil</button>
</div>
<div id="upload-progress" style="display:none">
<div class="progress-bar"><div id="progress-fill"></div></div>
<span id="upload-status"></span>
</div>
<div class="row">
<button class="secondary" onclick="tomSkarm()">Töm skärm</button>
<button class="secondary" onclick="laddaOmDisplay()">Ladda om display</button>
</div>
</section>
<!-- Sektion: Schema -->
<section>
<h2>Schema</h2>
<!-- Spelar nu-banner (visas när musik spelas) -->
<div id="now-playing-banner" style="display:none; margin-bottom:.75rem; padding:.45rem .85rem; background:rgba(139,92,246,0.12); border:1px solid rgba(139,92,246,0.3); border-radius:7px; display:flex; align-items:center; gap:.6rem; font-size:.88rem; color:#c4b5fd;">
<span style="font-size:1rem;">♪</span>
<span id="np-banner-text" style="flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">Spelar nu...</span>
</div>
<table id="jobs-table">
<thead>
<tr>
<th>Namn</th>
<th>Tid</th>
<th>Typ</th>
<th>Källa</th>
<th>Chat</th>
<th>Aktiv</th>
<th></th>
</tr>
</thead>
<tbody id="jobs-body">
<tr><td colspan="7" class="empty">Laddar...</td></tr>
</tbody>
</table>
<form id="job-form" onsubmit="laggTillJobb(event)">
<h3>Lägg till schemalagt jobb</h3>
<div class="form-grid">
<input name="label" type="text" placeholder="Namn" required>
<input name="duration" type="number" min="0.01" step="any" placeholder="Minuter (ex. 0.5)" required>
<select name="type" onchange="_jobTypeChanged('job-form','job-extract-wrap','job-extract-status','job-emu-wrap')">
<option value="url">URL / HTML</option>
<option value="youtube">YouTube (video)</option>
<option value="youtube_playlist">YouTube-spellista (video)</option>
<option value="video">Video (lokal)</option>
<option value="image">Bild</option>
<option value="pdf">PDF / Presentation</option>
<option value="kiosk_chat">Kiosk Livechat</option>
<option value="emulator">Emulator (spel)</option>
</select>
<div class="source-with-browse">
<input name="source" type="text" placeholder="URL eller välj fil" required>
<button type="button" class="secondary" onclick="openBrowser(setSchemaCalla)">Bläddra</button>
</div>
<div id="job-extract-wrap" style="display:none;grid-column:1/-1;flex-direction:column;gap:.25rem">
<button type="button" class="secondary" onclick="extractJobPlaylist('job-form')">Extrahera spellista</button>
<span id="job-extract-status" style="font-size:.75rem;color:#444"></span>
</div>
<div id="job-shuffle-wrap" style="display:none;grid-column:1/-1">
<label style="display:flex;align-items:center;gap:.5rem;color:#aaa;font-size:.9rem">
<input type="checkbox" name="shuffle"> Slumpa ordning
</label>
</div>
<div id="job-emu-wrap" style="display:none;grid-column:1/-1;flex-direction:column;gap:.25rem">
<button type="button" class="secondary" onclick="openEmuBrowser('job-form')">Välj ROM-fil</button>
<span id="job-emu-name" style="font-size:.8rem;color:#94a3b8;font-family:monospace"></span>
</div>
<label style="display:flex;align-items:center;gap:.5rem;color:#aaa;font-size:.9rem">
<input type="checkbox" name="show_chat"> Visa livechat (YouTube)
</label>
<div style="grid-column:1/-1;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap">
<label style="color:#aaa;font-size:.9rem;white-space:nowrap">Övergång</label>
<select name="transition_type" style="flex:1;min-width:130px">
<option value="">Använd global</option>
<option value="none">Ingen (direkt)</option>
<option value="fade">Fade</option>
<option value="slide-left">Slide vänster</option>
<option value="slide-right">Slide höger</option>
<option value="slide-up">Slide upp</option>
<option value="slide-down">Slide ner</option>
<option value="zoom">Zoom</option>
<option value="wipe">Wipe</option>
<option value="blur">Blur/dissolve</option>
<option value="pixel">Pixel-effekt</option>
</select>
<input name="transition_duration" type="number" min="0" max="3000" step="50" placeholder="ms (tom=global)" style="width:120px">
</div>
<button type="submit">Lägg till</button>
</div>
</form>
<!-- Edit modal (re-uses job form fields) -->
<div id="edit-modal" class="modal-overlay" style="display:none" onclick="editModalClick(event)">
<div class="modal">
<div class="modal-header">
<strong>Redigera jobb</strong>
<button class="secondary" onclick="closeEditModal()">✕</button>
</div>
<div style="padding:1rem">
<form id="edit-form" onsubmit="saveEdit(event)">
<input name="id" type="hidden">
<div class="form-grid">
<input name="label" type="text" placeholder="Namn" required>
<input name="duration" type="number" min="0.01" step="any" placeholder="Minuter" required>
<select name="type" onchange="_jobTypeChanged('edit-form','edit-extract-wrap','edit-extract-status','edit-emu-wrap')">
<option value="url">URL / HTML</option>
<option value="youtube">YouTube (video)</option>
<option value="youtube_playlist">YouTube-spellista (video)</option>
<option value="video">Video (lokal)</option>
<option value="image">Bild</option>
<option value="pdf">PDF / Presentation</option>
<option value="kiosk_chat">Kiosk Livechat</option>
<option value="emulator">Emulator (spel)</option>
</select>
<input name="source" type="text" placeholder="URL eller filväg" required>
<div id="edit-extract-wrap" style="display:none;grid-column:1/-1;flex-direction:column;gap:.25rem">
<button type="button" class="secondary" onclick="extractJobPlaylist('edit-form')">Extrahera spellista</button>
<span id="edit-extract-status" style="font-size:.75rem;color:#444"></span>
</div>
<div id="edit-shuffle-wrap" style="display:none;grid-column:1/-1">
<label style="display:flex;align-items:center;gap:.5rem;color:#aaa;font-size:.9rem">
<input type="checkbox" name="shuffle"> Slumpa ordning
</label>
</div>
<div id="edit-emu-wrap" style="display:none;grid-column:1/-1;flex-direction:column;gap:.25rem">
<button type="button" class="secondary" onclick="openEmuBrowser('edit-form')">Välj ROM-fil</button>
<span id="edit-emu-name" style="font-size:.8rem;color:#94a3b8;font-family:monospace"></span>
</div>
<div style="grid-column:1/-1;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap">
<label style="color:#aaa;font-size:.9rem;white-space:nowrap">Övergång</label>
<select name="transition_type" style="flex:1;min-width:130px">
<option value="">Använd global</option>
<option value="none">Ingen (direkt)</option>
<option value="fade">Fade</option>
<option value="slide-left">Slide vänster</option>
<option value="slide-right">Slide höger</option>
<option value="slide-up">Slide upp</option>
<option value="slide-down">Slide ner</option>
<option value="zoom">Zoom</option>
<option value="wipe">Wipe</option>
<option value="blur">Blur/dissolve</option>
<option value="pixel">Pixel-effekt</option>
</select>
<input name="transition_duration" type="number" min="0" max="3000" step="50" placeholder="ms (tom=global)" style="width:120px">
</div>
</div>
<div style="margin-top:.6rem"><button type="submit">Spara</button></div>
</form>
</div>
</div>
</div>
</section>
<!-- Addon-paneler (inlästa dynamiskt baserat på aktiverade addons) -->
{% for addon in addon_panels %}
{% include 'addons/' + addon.name + '/panel.html' ignore missing %}
{% endfor %}
<!-- Sektion: Övergångar -->
<section>
<h2>Övergångar</h2>
<div class="form-row">
<label for="tx-type">Typ</label>
<select id="tx-type">
<option value="none">Ingen (direkt)</option>
<option value="fade">Fade</option>
<option value="slide-left">Slide vänster</option>
<option value="slide-right">Slide höger</option>
<option value="slide-up">Slide upp</option>
<option value="slide-down">Slide ner</option>
<option value="zoom">Zoom</option>
<option value="wipe">Wipe</option>
<option value="blur">Blur/dissolve</option>
<option value="pixel">Pixel-effekt</option>
</select>
</div>
<div class="form-row">
<label for="tx-duration">Längd (ms)</label>
<input type="number" id="tx-duration" min="100" max="3000" step="50" value="600">
</div>
<button onclick="saveTransition()">Spara övergång</button>
<span id="tx-status" style="margin-left:.75rem;font-size:.85rem;color:#6c757d;"></span>
</section>
<!-- Sektion: Systeminfo -->
<section>
<h2>Systeminfo</h2>
<div id="sysinfo" class="sysinfo-grid">
<div class="stat"><span class="label">CPU</span><span id="cpu">—</span></div>
<div class="stat"><span class="label">RAM</span><span id="ram">—</span></div>
<div class="stat"><span class="label">Disk</span><span id="disk">—</span></div>
<div class="stat"><span class="label">Uptime</span><span id="uptime">—</span></div>
<div class="stat wide"><span class="label">Aktiv källa</span><span id="active-source">—</span></div>
</div>
</section>
</div>
<!-- Filbläddrare -->
<div id="browser-modal" class="modal-overlay" style="display:none" onclick="browserOverlayClick(event)">
<div class="modal">
<div class="modal-header">
<span class="modal-path" id="browser-path"></span>
<button class="secondary" onclick="closeBrowser()">✕</button>
</div>
<div class="modal-shortcuts">
<button class="secondary" onclick="browseTo('/home/mrfox')">Hem</button>
<button class="secondary" onclick="browseTo('/media')">USB (/media)</button>
<button class="secondary" onclick="browseTo('/mnt')">Monterat (/mnt)</button>
</div>
<div id="browser-list" class="browser-list"></div>
</div>
</div>
<script src="/static/socket.io.min.js"></script>
<script src="/static/admin.js"></script>
</body>
</html>