mirror of
https://github.com/radio95-rnt/RadioPlayer.git
synced 2026-07-29 15:29:14 +02:00
262 lines
8.5 KiB
HTML
262 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>FSDB Editor</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
font-family: sans-serif;
|
|
background: #111;
|
|
color: #eee;
|
|
}
|
|
|
|
.controls {
|
|
padding: 8px 10px;
|
|
border-bottom: 1px solid #333;
|
|
background: #161616;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.picker-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.picker-label {
|
|
font-size: 12px;
|
|
color: #888;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.seg-row {
|
|
display: flex;
|
|
gap: 3px;
|
|
}
|
|
|
|
.seg-btn {
|
|
font-size: 12px;
|
|
padding: 4px 9px;
|
|
border-radius: 5px;
|
|
border: 1px solid #444;
|
|
background: #1e1e1e;
|
|
color: #ccc;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: background 0.1s;
|
|
}
|
|
|
|
.seg-btn:hover { background: #2a2a2a; }
|
|
|
|
.seg-btn.active {
|
|
background: #1a3a5c;
|
|
color: #7ab8f5;
|
|
border-color: #2a5a8c;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.playlist-display {
|
|
font-family: monospace;
|
|
font-size: 13px;
|
|
color: #777;
|
|
padding: 4px 8px;
|
|
border: 1px solid #333;
|
|
border-radius: 5px;
|
|
background: #1a1a1a;
|
|
}
|
|
|
|
.playlist-display span {
|
|
color: #eee;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn {
|
|
font-size: 12px;
|
|
padding: 4px 10px;
|
|
border-radius: 5px;
|
|
border: 1px solid #444;
|
|
background: #222;
|
|
color: #eee;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn:hover { background: #333; }
|
|
|
|
.container {
|
|
display: flex;
|
|
height: calc(100vh - 52px);
|
|
}
|
|
|
|
.panel {
|
|
flex: 1;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
border-right: 1px solid #333;
|
|
}
|
|
|
|
.panel:last-child { border-right: none; }
|
|
|
|
h2 {
|
|
margin-top: 0;
|
|
font-size: 13px;
|
|
color: #777;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.item {
|
|
padding: 5px 7px;
|
|
margin: 2px 0;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.item:hover { background: #1e1e1e; }
|
|
.dir { color: #6cf; }
|
|
.file { color: #ccc; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="controls">
|
|
<div class="picker-group">
|
|
<span class="picker-label">Day</span>
|
|
<div class="seg-row" id="dayPicker"></div>
|
|
</div>
|
|
<div class="picker-group">
|
|
<span class="picker-label">Part</span>
|
|
<div class="seg-row" id="partPicker"></div>
|
|
</div>
|
|
<div class="playlist-display">playlist: <span id="playlistVal">friday/day</span></div>
|
|
<button class="btn" onclick="refreshPlaylist()">Refresh</button>
|
|
<button class="btn" onclick="reloadPlaylist()">Reload on Player</button>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="panel">
|
|
<h2>Ref Dir</h2>
|
|
<div id="ref"></div>
|
|
</div>
|
|
<div class="panel">
|
|
<h2>Playlist</h2>
|
|
<div id="playlistView"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const DAYS = ["monday","tuesday","wednesday","thursday","friday","saturday","sunday"];
|
|
const PARTS = ["day","morning","night","late_night"];
|
|
|
|
let selectedDay = "friday";
|
|
let selectedPart = "day";
|
|
|
|
function buildPicker(containerId, items, getCurrent, setCurrent) {
|
|
const el = document.getElementById(containerId);
|
|
el.innerHTML = "";
|
|
items.forEach(val => {
|
|
const btn = document.createElement("button");
|
|
btn.className = "seg-btn" + (getCurrent() === val ? " active" : "");
|
|
btn.textContent = val.replace("_", " ");
|
|
btn.onclick = () => {
|
|
setCurrent(val);
|
|
buildPicker(containerId, items, getCurrent, setCurrent);
|
|
updateDisplay();
|
|
refreshPlaylist();
|
|
};
|
|
el.appendChild(btn);
|
|
});
|
|
}
|
|
|
|
function updateDisplay() {
|
|
document.getElementById("playlistVal").textContent = selectedDay + "/" + selectedPart;
|
|
}
|
|
|
|
function getPlaylistName() {
|
|
return selectedDay + "/" + selectedPart;
|
|
}
|
|
|
|
buildPicker("dayPicker", DAYS, () => selectedDay, v => { selectedDay = v; });
|
|
buildPicker("partPicker", PARTS, () => selectedPart, v => { selectedPart = v; });
|
|
|
|
const ws = new WebSocket("/ws");
|
|
|
|
ws.onopen = () => {
|
|
console.log("WS connected");
|
|
refreshPlaylist();
|
|
};
|
|
|
|
ws.onmessage = (ev) => {
|
|
const msg = JSON.parse(ev.data);
|
|
if (msg.event === "state") renderRef(msg.data.dirs);
|
|
if (msg.event === "fsdb_list") renderPlaylist(msg.data);
|
|
};
|
|
|
|
function renderRef(data) {
|
|
const el = document.getElementById("ref");
|
|
el.innerHTML = "";
|
|
data.dirs.forEach(d => {
|
|
const div = document.createElement("div");
|
|
div.className = "item dir";
|
|
div.textContent = d + "/";
|
|
div.onclick = () => addDir(d);
|
|
el.appendChild(div);
|
|
});
|
|
data.files.forEach(f => {
|
|
const div = document.createElement("div");
|
|
div.className = "item file";
|
|
div.textContent = f;
|
|
div.onclick = () => addFile(f);
|
|
el.appendChild(div);
|
|
});
|
|
}
|
|
|
|
function renderPlaylist(data) {
|
|
const el = document.getElementById("playlistView");
|
|
el.innerHTML = "";
|
|
data.dirs.forEach(d => {
|
|
const div = document.createElement("div");
|
|
div.className = "item dir";
|
|
div.textContent = d + "/";
|
|
div.onclick = () => removeEntry(d);
|
|
el.appendChild(div);
|
|
});
|
|
data.files.forEach(f => {
|
|
const div = document.createElement("div");
|
|
div.className = "item file";
|
|
div.textContent = f;
|
|
div.onclick = () => removeEntry(f);
|
|
el.appendChild(div);
|
|
});
|
|
}
|
|
|
|
function addFile(name) {
|
|
ws.send(JSON.stringify({ action: "fsdb_add", name, playlist: getPlaylistName() }));
|
|
setTimeout(refreshPlaylist, 100);
|
|
}
|
|
|
|
function addDir(name) {
|
|
ws.send(JSON.stringify({ action: "fsdb_add_dir", name, playlist: getPlaylistName() }));
|
|
setTimeout(refreshPlaylist, 100);
|
|
}
|
|
|
|
function removeEntry(name) {
|
|
if (!confirm("Remove " + name + "?")) return;
|
|
ws.send(JSON.stringify({ action: "fsdb_remove", name, playlist: getPlaylistName() }));
|
|
setTimeout(refreshPlaylist, 100);
|
|
}
|
|
|
|
function refreshPlaylist() {
|
|
ws.send(JSON.stringify({ action: "fsdb_list", playlist: getPlaylistName() }));
|
|
}
|
|
|
|
function reloadPlaylist() {
|
|
ws.send(JSON.stringify({ action: "fsdb_add", name: "reload" }));
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |