205 lines
6.0 KiB
HTML
205 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Radiosender</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
background: #111;
|
|
color: #eee;
|
|
font-family: Arial, sans-serif;
|
|
padding: 20px;
|
|
}
|
|
h1 { margin-top: 0; }
|
|
a.back { color: #6fbf73; text-decoration: none; font-size: 14px; }
|
|
a.back:hover { text-decoration: underline; }
|
|
|
|
.panel {
|
|
background: #1a1a1a;
|
|
border: 1px solid #333;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
margin-top: 16px;
|
|
max-width: 700px;
|
|
}
|
|
|
|
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
|
|
th, td {
|
|
text-align: left;
|
|
padding: 8px;
|
|
border-bottom: 1px solid #333;
|
|
font-size: 14px;
|
|
}
|
|
th { color: #aaa; font-weight: normal; }
|
|
|
|
input {
|
|
background: #222;
|
|
border: 1px solid #444;
|
|
color: #eee;
|
|
padding: 6px 8px;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
button {
|
|
background: #2c7a3d;
|
|
border: none;
|
|
color: white;
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
button.danger { background: #a83232; }
|
|
button:hover { opacity: 0.85; }
|
|
|
|
.form-row { display: flex; gap: 8px; margin-top: 12px; }
|
|
.form-row input:first-child { width: 200px; }
|
|
.form-row input:last-of-type { flex: 1; }
|
|
|
|
.msg { font-size: 13px; color: #6fbf73; min-height: 18px; margin-top: 8px; }
|
|
.empty-hint { color: #666; padding: 10px 0; }
|
|
.hidden { display: none !important; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<a class="back" href="/index.html">← zurück zur Startseite</a>
|
|
<h1>📻 Radiosender</h1>
|
|
|
|
<div class="panel">
|
|
<p style="color:#888; font-size:13px; margin-top:0;">
|
|
Trag hier Internet-Radio-Streams ein (direkte MP3/AAC-Stream-URLs, z.B. von öffentlichen Shoutcast/Icecast-Streams).
|
|
Spieler wechseln im Auto mit der Taste <strong>R</strong> durch, "Aus" ist immer als erste Option mit dabei.
|
|
</p>
|
|
|
|
<table>
|
|
<thead><tr><th>Name</th><th>Stream-URL</th><th></th></tr></thead>
|
|
<tbody id="stationsTableBody"></tbody>
|
|
</table>
|
|
<div class="empty-hint hidden" id="stationsEmpty">Noch keine Sender eingetragen.</div>
|
|
|
|
<h3>Sender hinzufügen</h3>
|
|
<div class="form-row">
|
|
<input id="stationName" placeholder="Name (z.B. Radio XY)">
|
|
<input id="stationUrl" placeholder="https://stream.beispiel.de/live.mp3">
|
|
<button onclick="addStation()">Hinzufügen</button>
|
|
</div>
|
|
<div class="msg" id="stationMsg"></div>
|
|
</div>
|
|
|
|
<script>
|
|
const token = localStorage.getItem("token");
|
|
// Voll-Admin ODER passende Gruppen-Berechtigung reicht jetzt aus - der
|
|
// Server prüft das bei jedem Aufruf ohnehin final ab (siehe requireAdmin);
|
|
// hier reicht ein simpler Login-Check, authFetch() fängt fehlende Rechte
|
|
// beim ersten echten API-Aufruf sauber ab (Meldung + Weiterleitung)
|
|
let isAdmin = localStorage.getItem("isAdmin") === "true";
|
|
|
|
if (!token) {
|
|
alert("Bitte zuerst einloggen.");
|
|
location.href = "/index.html";
|
|
}
|
|
|
|
async function authFetch(url, options = {}) {
|
|
options.headers = { ...(options.headers || {}), "Authorization": "Bearer " + token };
|
|
const res = await fetch(url, options);
|
|
if (res.status === 401 || res.status === 403) {
|
|
alert("Sitzung abgelaufen oder kein Admin-Zugriff. Bitte erneut einloggen.");
|
|
location.href = "/index.html";
|
|
throw new Error("Nicht autorisiert");
|
|
}
|
|
return res;
|
|
}
|
|
|
|
function escapeHtml(str) {
|
|
const div = document.createElement("div");
|
|
div.textContent = str;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
let allStations = [];
|
|
|
|
async function loadStations() {
|
|
const res = await authFetch("/api/admin/radio_stations");
|
|
const data = await res.json();
|
|
allStations = data.stations || [];
|
|
renderStations();
|
|
}
|
|
|
|
function renderStations() {
|
|
const body = document.getElementById("stationsTableBody");
|
|
const empty = document.getElementById("stationsEmpty");
|
|
body.innerHTML = "";
|
|
|
|
if (allStations.length === 0) {
|
|
empty.classList.remove("hidden");
|
|
return;
|
|
}
|
|
empty.classList.add("hidden");
|
|
|
|
allStations.forEach(s => {
|
|
const tr = document.createElement("tr");
|
|
tr.innerHTML = `
|
|
<td>${escapeHtml(s.name)}</td>
|
|
<td style="word-break:break-all; color:#999; font-size:12px;">${escapeHtml(s.url)}</td>
|
|
<td><button class="danger" onclick="deleteStation(${s.id})">Löschen</button></td>
|
|
`;
|
|
body.appendChild(tr);
|
|
});
|
|
}
|
|
|
|
async function addStation() {
|
|
const name = document.getElementById("stationName").value.trim();
|
|
const url = document.getElementById("stationUrl").value.trim();
|
|
|
|
if (!name || !url) {
|
|
showMsg("Name und Stream-URL sind Pflicht.", true);
|
|
return;
|
|
}
|
|
|
|
const res = await authFetch("/api/admin/radio_stations", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ name, url })
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (data.ok) {
|
|
showMsg("Sender hinzugefügt.");
|
|
document.getElementById("stationName").value = "";
|
|
document.getElementById("stationUrl").value = "";
|
|
await loadStations();
|
|
} else {
|
|
showMsg("Fehler: " + (data.error || "unbekannt"), true);
|
|
}
|
|
}
|
|
|
|
async function deleteStation(id) {
|
|
if (!confirm("Diesen Sender wirklich löschen?")) return;
|
|
|
|
const res = await authFetch("/api/admin/radio_stations/" + id, { method: "DELETE" });
|
|
const data = await res.json();
|
|
|
|
if (data.ok) {
|
|
showMsg("Sender gelöscht.");
|
|
await loadStations();
|
|
} else {
|
|
showMsg("Löschen fehlgeschlagen.", true);
|
|
}
|
|
}
|
|
|
|
function showMsg(text, isError) {
|
|
const el = document.getElementById("stationMsg");
|
|
el.style.color = isError ? "#e06c6c" : "#6fbf73";
|
|
el.textContent = text;
|
|
setTimeout(() => { el.textContent = ""; }, 4000);
|
|
}
|
|
|
|
loadStations();
|
|
</script>
|
|
|
|
</body>
|
|
</html> |