MrMahoandClaude Opus 5.5
835d3ce998
The restart used to refuse when the panel was disabled, so it stayed reachable. Now it stops the panel (also the relay on the game port); 'panel on|off' in the console turns it on/off and saves server.json. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
1058 lines
57 KiB
JavaScript
1058 lines
57 KiB
JavaScript
"use strict";
|
||
// MSCO Server Panel. Alle Texte (Spielernamen, Log ...) werden nur als Text eingefügt, nie als HTML.
|
||
|
||
const $ = (id) => document.getElementById(id);
|
||
const ROLES = { Moderator: 1, Admin: 2, Owner: 3 };
|
||
const state = { user: null, page: "dashboard", status: null, timers: [], consoleLast: 0, history: [], historyIndex: -1 };
|
||
|
||
// ------------------------------------------------------------------ Hilfen
|
||
|
||
function h(tag, attrs, ...children) {
|
||
const el = document.createElement(tag);
|
||
for (const [k, v] of Object.entries(attrs || {})) {
|
||
if (v === null || v === undefined || v === false) continue;
|
||
if (k === "class") el.className = v;
|
||
else if (k.startsWith("on")) el.addEventListener(k.slice(2), v);
|
||
else el.setAttribute(k, v === true ? "" : v);
|
||
}
|
||
for (const c of children.flat()) {
|
||
if (c === null || c === undefined || c === false) continue;
|
||
el.append(c instanceof Node ? c : document.createTextNode(String(c)));
|
||
}
|
||
return el;
|
||
}
|
||
|
||
async function api(method, path, body) {
|
||
const res = await fetch("api/" + path, {
|
||
method,
|
||
credentials: "same-origin",
|
||
headers: { "Content-Type": "application/json", "X-MSCO-Panel": "1" },
|
||
body: body === undefined ? undefined : JSON.stringify(body),
|
||
});
|
||
let data = null;
|
||
try { data = await res.json(); } catch { /* leer */ }
|
||
if (res.status === 401 && state.user) { state.user = null; showAuth(); }
|
||
if (!res.ok) throw new Error((data && data.error) || "HTTP " + res.status);
|
||
return data;
|
||
}
|
||
|
||
function toast(text, error) {
|
||
const el = h("div", { class: "toast" + (error ? " err" : "") }, text);
|
||
$("toasts").append(el);
|
||
setTimeout(() => el.remove(), error ? 6000 : 3500);
|
||
}
|
||
|
||
async function act(promise) {
|
||
try {
|
||
const r = await promise;
|
||
if (r && r.message) toast(r.message);
|
||
return r;
|
||
} catch (e) {
|
||
toast(e.message, true);
|
||
return null;
|
||
}
|
||
}
|
||
|
||
function can(role) { return state.user && ROLES[state.user.role] >= ROLES[role]; }
|
||
|
||
function duration(seconds) {
|
||
const d = Math.floor(seconds / 86400), hr = Math.floor(seconds % 86400 / 3600), m = Math.floor(seconds % 3600 / 60);
|
||
return d > 0 ? `${d}d ${hr}h` : hr > 0 ? `${hr}h ${m}m` : `${m}m`;
|
||
}
|
||
|
||
function since(iso) {
|
||
if (!iso) return "–";
|
||
const s = Math.max(0, (Date.now() - new Date(iso).getTime()) / 1000);
|
||
return s < 60 ? "just now" : duration(s);
|
||
}
|
||
|
||
function backupDate(name) {
|
||
const m = /^(\d{4})(\d{2})(\d{2})-(\d{2})(\d{2})(\d{2})$/.exec(name);
|
||
return m ? `${m[3]}.${m[2]}.${m[1]} ${m[4]}:${m[5]}:${m[6]}` : name;
|
||
}
|
||
|
||
function every(ms, fn) {
|
||
fn();
|
||
state.timers.push(setInterval(fn, ms));
|
||
}
|
||
|
||
function clearTimers() {
|
||
state.timers.forEach(clearInterval);
|
||
state.timers = [];
|
||
}
|
||
|
||
// ------------------------------------------------------------------ Dialoge
|
||
|
||
function modal({ title, text, danger, fields = [], confirm = "OK", cancel = "Cancel" }) {
|
||
return new Promise((resolve) => {
|
||
const inputs = fields.map((f) => {
|
||
const input = f.options
|
||
? h("select", {}, f.options.map((o) => h("option", { value: o, selected: o === f.value }, o)))
|
||
: h("input", { type: f.type || "text", placeholder: f.placeholder || "", value: f.value || "", maxlength: f.max || 200, autocomplete: "off" });
|
||
return { f, input, row: h("label", {}, f.label, input) };
|
||
});
|
||
const close = (value) => { back.remove(); resolve(value); };
|
||
const form = h("form", { class: "modal" + (danger ? " danger" : "") },
|
||
h("h2", {}, title),
|
||
text ? h("p", {}, text) : null,
|
||
inputs.map((i) => i.row),
|
||
h("div", { class: "buttons" },
|
||
h("button", { class: "btn ghost", type: "button", onclick: () => close(null) }, cancel),
|
||
h("button", { class: "btn " + (danger ? "danger" : "primary"), type: "submit" }, confirm)));
|
||
form.addEventListener("submit", (e) => {
|
||
e.preventDefault();
|
||
const values = {};
|
||
inputs.forEach((i) => { values[i.f.name] = i.input.value; });
|
||
close(values);
|
||
});
|
||
const back = h("div", { class: "modal-back", onclick: (e) => { if (e.target === back) close(null); } }, form);
|
||
back.addEventListener("keydown", (e) => { if (e.key === "Escape") close(null); });
|
||
$("modalRoot").append(back);
|
||
(inputs[0] ? inputs[0].input : form.querySelector("button[type=submit]")).focus();
|
||
});
|
||
}
|
||
|
||
// ------------------------------------------------------------------ Anmeldung
|
||
|
||
let setupMode = false;
|
||
|
||
function showAuth(needsSetup, serverName) {
|
||
clearTimers();
|
||
setupMode = !!needsSetup;
|
||
$("app").classList.add("hidden");
|
||
$("auth").classList.remove("hidden");
|
||
if (serverName) $("authServer").textContent = serverName;
|
||
$("authTitle").textContent = setupMode ? "Set up the panel" : "Sign in";
|
||
$("authHint").textContent = setupMode
|
||
? "Create the owner account. The setup code is shown in the server console (docker logs msco-server)."
|
||
: "";
|
||
$("codeRow").classList.toggle("hidden", !setupMode);
|
||
$("password2Row").classList.toggle("hidden", !setupMode);
|
||
$("password").setAttribute("autocomplete", setupMode ? "new-password" : "current-password");
|
||
$("authButton").textContent = setupMode ? "Create account" : "Sign in";
|
||
$("authError").classList.add("hidden");
|
||
(setupMode ? $("code") : $("username")).focus();
|
||
}
|
||
|
||
$("authForm").addEventListener("submit", async (e) => {
|
||
e.preventDefault();
|
||
const err = $("authError");
|
||
err.classList.add("hidden");
|
||
const username = $("username").value.trim(), password = $("password").value;
|
||
try {
|
||
if (setupMode) {
|
||
if (password !== $("password2").value) throw new Error("The passwords do not match");
|
||
await api("POST", "setup", { code: $("code").value, username, password });
|
||
} else {
|
||
await api("POST", "login", { username, password });
|
||
}
|
||
$("password").value = $("password2").value = "";
|
||
await boot();
|
||
} catch (ex) {
|
||
err.textContent = ex.message;
|
||
err.classList.remove("hidden");
|
||
}
|
||
});
|
||
|
||
$("logout").addEventListener("click", async () => {
|
||
await act(api("POST", "logout"));
|
||
state.user = null;
|
||
boot();
|
||
});
|
||
|
||
$("menuToggle").addEventListener("click", () => document.querySelector(".sidebar").classList.toggle("open"));
|
||
|
||
// ------------------------------------------------------------------ Navigation
|
||
|
||
const PAGES = [
|
||
{ id: "dashboard", label: "Dashboard", icon: "◧", role: "Moderator", group: "Server", render: renderDashboard },
|
||
{ id: "players", label: "Players", icon: "☺", role: "Moderator", group: "Server", render: renderPlayers },
|
||
{ id: "console", label: "Console", icon: "›_", role: "Moderator", group: "Server", render: renderConsole },
|
||
{ id: "admins", label: "Admins", icon: "★", role: "Moderator", group: "Moderation", render: renderAdmins },
|
||
{ id: "bans", label: "Bans", icon: "⊘", role: "Moderator", group: "Moderation", render: renderBans },
|
||
{ id: "world", label: "World & Backups", icon: "⟲", role: "Admin", group: "Management", render: renderWorld },
|
||
{ id: "settings", label: "Settings", icon: "⚙", role: "Admin", group: "Management", render: renderSettings },
|
||
{ id: "update", label: "Update", icon: "⇪", role: "Admin", group: "Management", render: renderUpdate },
|
||
{ id: "users", label: "Panel Users", icon: "⚿", role: "Owner", group: "Management", render: renderUsers },
|
||
{ id: "account", label: "My Account", icon: "☻", role: "Moderator", group: null, render: renderAccount },
|
||
];
|
||
|
||
function renderNav() {
|
||
const nav = $("nav");
|
||
const items = [];
|
||
let group;
|
||
for (const p of PAGES.filter((x) => can(x.role) && x.group)) {
|
||
if (p.group !== group) { group = p.group; items.push(h("div", { class: "nav-group" }, group)); }
|
||
items.push(h("button", { type: "button", class: p.id === state.page ? "active" : "", onclick: () => go(p.id) },
|
||
h("span", { class: "ico" }, p.icon), h("span", { class: "nav-label" }, p.label),
|
||
p.id === "update" && state.updateAvailable ? h("span", { class: "nav-dot", title: "Update available", "aria-label": "Update available" }) : null));
|
||
}
|
||
nav.replaceChildren(...items);
|
||
$("meButton").classList.toggle("active", state.page === "account");
|
||
}
|
||
|
||
$("meButton").addEventListener("click", () => go("account"));
|
||
|
||
function go(pageId) {
|
||
const p = PAGES.find((x) => x.id === pageId && can(x.role)) || PAGES[0];
|
||
state.page = p.id;
|
||
try { localStorage.setItem("msco-panel-page", p.id); } catch { /* egal */ }
|
||
document.querySelector(".sidebar").classList.remove("open");
|
||
clearTimers();
|
||
every(5000, refreshTopbar);
|
||
every(30000, refreshUpdateState);
|
||
renderNav();
|
||
const page = $("page");
|
||
page.replaceChildren();
|
||
p.render(page);
|
||
}
|
||
|
||
async function refreshTopbar() {
|
||
try {
|
||
const s = await api("GET", "status");
|
||
state.status = s;
|
||
$("serverName").textContent = s.name;
|
||
const running = s.state === "running";
|
||
$("serverMeta").textContent = running
|
||
? `${s.players}/${s.maxPlayers} players · v${s.version} · up ${duration(s.uptimeSeconds)}`
|
||
: `server ${s.state} · v${s.version}`;
|
||
$("statusDot").className = "status-dot " + (running ? "ok" : s.state === "error" ? "bad" : "");
|
||
$("scName").textContent = s.name;
|
||
$("scState").textContent = running ? `${s.players} / ${s.maxPlayers} players online` : "Server " + s.state;
|
||
$("scDot").className = "sc-dot " + (running ? "ok" : s.state === "error" ? "bad" : "");
|
||
$("statusDot").title = running ? "Online" : "Server " + s.state + (s.lastError ? ": " + s.lastError : "");
|
||
document.title = `${s.name} · MSCO Panel`;
|
||
} catch {
|
||
$("statusDot").className = "status-dot bad";
|
||
}
|
||
}
|
||
|
||
// ------------------------------------------------------------------ Dashboard
|
||
|
||
function renderDashboard(page) {
|
||
const cards = h("div", { class: "cards" });
|
||
const control = h("div", { class: "section-body control" });
|
||
if (can("Admin")) page.append(h("div", { class: "section" },
|
||
h("div", { class: "section-head" }, h("h2", {}, "Server"), h("span", { class: "state-label", id: "gameState" }, "")),
|
||
control));
|
||
const recent = h("div", { class: "console small" });
|
||
page.append(
|
||
cards,
|
||
h("div", { class: "section" },
|
||
h("div", { class: "section-head" }, h("h2", {}, "Recent activity"),
|
||
h("button", { class: "btn small", type: "button", onclick: () => go("console") }, "Open console")),
|
||
recent));
|
||
|
||
const card = (label, value, sub) => h("div", { class: "card" },
|
||
h("div", { class: "stat-label" }, label), h("div", { class: "stat-value" }, value), sub ? h("div", { class: "stat-sub" }, sub) : null);
|
||
|
||
every(4000, async () => {
|
||
try {
|
||
const s = await api("GET", "status");
|
||
if (can("Admin")) renderControl(control, s);
|
||
cards.replaceChildren(
|
||
card("Players", `${s.players} / ${s.maxPlayers}`, s.isPublic ? "listed in the server browser" : "not listed (private)"),
|
||
card("Uptime", duration(s.uptimeSeconds), "version " + s.version),
|
||
card("World", s.objects.toLocaleString(), `moved objects · ${s.actions} part actions · ${s.boughtItems} bought items`),
|
||
card("Save game", s.saveSyncMinutes > 0 ? `every ${s.saveSyncMinutes} min` : "on join",
|
||
s.resetPoint ? "reset point from " + new Date(s.resetPoint).toLocaleString(window.MSCO_LANG === "de" ? "de-DE" : "en-GB") : "no reset point yet"),
|
||
card("Backups", s.backups, "save game backups"),
|
||
card("Admins / Bans", `${s.admins} / ${s.bans}`, s.steamVerification ? "Steam verification on" : "Steam verification OFF (no Web API key)"));
|
||
} catch (e) { cards.replaceChildren(h("div", { class: "card" }, e.message)); }
|
||
});
|
||
every(3000, async () => {
|
||
try {
|
||
const r = await api("GET", "console?after=0");
|
||
recent.replaceChildren(...r.lines.slice(-40).map(consoleLine));
|
||
recent.scrollTop = recent.scrollHeight;
|
||
} catch { /* Topbar zeigt den Fehler */ }
|
||
});
|
||
}
|
||
|
||
async function serverAction(action, confirmText) {
|
||
if (confirmText) {
|
||
const ok = await modal(confirmText);
|
||
if (!ok) return;
|
||
}
|
||
await act(api("POST", "server/" + action));
|
||
setTimeout(refreshTopbar, 800);
|
||
setTimeout(refreshTopbar, 2500);
|
||
}
|
||
|
||
const STATE_TEXT = {
|
||
running: "Running - players can join",
|
||
starting: "Starting …",
|
||
stopped: "Stopped - players cannot join. The panel keeps running.",
|
||
error: "Not running",
|
||
};
|
||
|
||
function renderControl(el, s) {
|
||
const label = $("gameState");
|
||
const running = s.state === "running", starting = s.state === "starting";
|
||
if (label) {
|
||
label.textContent = STATE_TEXT[s.state] || s.state;
|
||
label.className = "state-label " + s.state;
|
||
}
|
||
const buttons = h("div", { class: "row" },
|
||
running || starting
|
||
? h("button", { class: "btn", type: "button", disabled: starting, onclick: () => serverAction("stop", { title: "Stop the server?",
|
||
text: "All players are disconnected and nobody can join until you start it again. The panel keeps running.", danger: true, confirm: "Stop" }) }, "■ Stop")
|
||
: h("button", { class: "btn primary", type: "button", onclick: () => serverAction("start") }, "▶ Start"),
|
||
h("button", { class: "btn", type: "button", disabled: starting, onclick: () => serverAction("restart", { title: "Restart the server?",
|
||
text: "Settings (server.json), license and save game are loaded again. Players reconnect automatically.", confirm: "Restart" }) }, "⟳ Restart"));
|
||
|
||
// Warum läuft er nicht? Mit direktem Weg zur Lösung
|
||
let problem = null;
|
||
if (!running && s.lastError) {
|
||
const fix = s.hasLicenseKey === false ? h("button", { class: "btn small", type: "button", onclick: () => go("settings") }, "Enter license key")
|
||
: s.hasSave === false ? h("button", { class: "btn small", type: "button", onclick: () => go("world") }, "Upload save game")
|
||
: h("button", { class: "btn small ghost", type: "button", onclick: () => go("console") }, "Open console");
|
||
problem = h("div", { class: "notice " + (s.state === "error" ? "bad" : "") }, h("div", {}, h("b", {}, s.state === "error" ? "The server could not start" : "Note"), h("div", {}, s.lastError)), fix);
|
||
}
|
||
// Lizenz gerade nicht bestätigt (Master aus o.ä.) - der Server läuft weiter, aber nur noch eine Weile
|
||
const license = running && s.licenseWarning
|
||
? h("div", { class: "notice" }, h("div", {}, h("b", {}, "License not confirmed"), h("div", {}, s.licenseWarning))) : null;
|
||
el.replaceChildren(...[buttons, problem, license].filter(Boolean)); // null würde sonst als Text "null" erscheinen
|
||
}
|
||
|
||
/** Panel neu starten (Port, Unterpfad, Proxy übernehmen) und danach die (ggf. neue) Adresse laden. */
|
||
async function restartPanel() {
|
||
const ok = await modal({ title: "Restart the panel?",
|
||
text: "Applies the saved port and panel settings. If the game port changed, the game server restarts too. You stay logged in.",
|
||
confirm: "Restart panel" });
|
||
if (!ok) return;
|
||
const r = await act(api("POST", "server/restart-panel"));
|
||
if (!r) return;
|
||
if (r.disabled) {
|
||
// Panel ausgeschaltet: nicht auf ein Neuladen warten
|
||
document.body.replaceChildren(h("div", { class: "empty" }, r.message));
|
||
return;
|
||
}
|
||
const target = r.url && r.url !== location.origin + location.pathname ? r.url : location.href;
|
||
// Warten, bis das Panel wieder antwortet, dann neu laden
|
||
const started = Date.now();
|
||
const tryReload = async () => {
|
||
try {
|
||
const res = await fetch(new URL("api/session", target).href, { credentials: "include", mode: target.startsWith(location.origin) ? "same-origin" : "no-cors" });
|
||
if (res.ok || res.type === "opaque") { location.href = target; return; }
|
||
} catch { /* noch nicht da */ }
|
||
if (Date.now() - started < 30000) setTimeout(tryReload, 1000);
|
||
else location.href = target;
|
||
};
|
||
setTimeout(tryReload, 2500);
|
||
}
|
||
|
||
// ------------------------------------------------------------------ Einstellungen
|
||
|
||
function renderSettings(page) {
|
||
const box = h("div", { class: "grid-2" });
|
||
page.append(box);
|
||
load();
|
||
|
||
async function load() {
|
||
let c;
|
||
try { c = await api("GET", "config"); } catch (e) { toast(e.message, true); return; }
|
||
const env = c.environmentOverrides || [];
|
||
const fields = {};
|
||
const envNote = (name) => env.some((e) => e.replace(/_/g, "").includes(name.toUpperCase().replace("ISPUBLIC", "PUBLIC")))
|
||
? h("span", { class: "pill gray", title: "Also set by an environment variable (.env) - that value wins on restart" }, "ENV") : null;
|
||
const text = (name, label, value, opts = {}) => {
|
||
const input = h("input", { value: value ?? "", maxlength: opts.max || 100, placeholder: opts.placeholder || "", type: opts.type || "text", autocomplete: "off" });
|
||
fields[name] = () => input.value;
|
||
return h("label", {}, h("span", { class: "label-row" }, label, envNote(name), opts.restart ? h("span", { class: "pill gray" }, "restart") : null), input,
|
||
opts.hint ? h("small", { class: "hint" }, opts.hint) : null);
|
||
};
|
||
const number = (name, label, value, opts = {}) => {
|
||
const input = h("input", { type: "number", value, min: opts.min, max: opts.max });
|
||
fields[name] = () => parseInt(input.value, 10);
|
||
return h("label", {}, h("span", { class: "label-row" }, label, envNote(name), opts.restart ? h("span", { class: "pill gray" }, "restart") : null), input,
|
||
opts.hint ? h("small", { class: "hint" }, opts.hint) : null);
|
||
};
|
||
const toggle = (name, label, value, hint, restart) => {
|
||
const input = h("input", { type: "checkbox", checked: value });
|
||
fields[name] = () => input.checked;
|
||
return h("label", { class: "toggle" }, input, h("span", {},
|
||
h("span", { class: "label-row" }, label, envNote(name), restart ? h("span", { class: "pill gray" }, "restart") : null),
|
||
hint ? h("small", { class: "hint" }, hint) : null));
|
||
};
|
||
const secret = (name, label, isSet, link) => {
|
||
const input = h("input", { type: "password", placeholder: isSet ? "•••••••• (set - leave empty to keep)" : "not set", autocomplete: "new-password", disabled: !can("Owner") });
|
||
fields[name] = () => input.value;
|
||
return h("label", {}, h("span", { class: "label-row" }, label, envNote(name), h("span", { class: "pill gray" }, "restart")), input,
|
||
link ? h("small", { class: "hint" }, link) : null);
|
||
};
|
||
|
||
const save = async () => {
|
||
const body = {};
|
||
for (const [k, get] of Object.entries(fields)) {
|
||
const v = get();
|
||
if (typeof v === "number" && isNaN(v)) continue;
|
||
body[k] = v;
|
||
}
|
||
// Port geändert? Vorher warnen - sonst sperrt man sich aus (vor allem in Docker, wo der Port nicht freigegeben ist)
|
||
const warning = portChangeWarning(c, body);
|
||
if (warning && !(await modal({ title: warning.title, text: warning.text, confirm: warning.confirm }))) return;
|
||
if (await act(api("POST", "config", body))) load();
|
||
};
|
||
|
||
box.replaceChildren(
|
||
h("div", { class: "section" },
|
||
h("div", { class: "section-head" }, h("h2", {}, "General"), h("span", { class: "muted" }, "applies immediately")),
|
||
h("div", { class: "section-body form-grid wide" },
|
||
text("name", "Server name", c.name, { max: 60 }),
|
||
text("description", "Description", c.description, { max: 300 }),
|
||
text("tags", "Tags", c.tags, { max: 140, placeholder: "e.g. german, roleplay, vanilla",
|
||
hint: "Shown in the server list, comma separated (max. 6). The tag official is only given by the MSCO admins." }),
|
||
number("maxPlayers", "Max players", c.maxPlayers, { min: 1, max: 64 }),
|
||
text("publicAddress", "Public address", c.publicAddress, { max: 200, placeholder: "automatic", hint: "IP or domain players connect to (empty = automatic)" }),
|
||
toggle("isPublic", "Listed in the server browser", c.isPublic),
|
||
toggle("requireSteam", "Steam required", c.requireSteam, "Off = players without Steam can join too"))),
|
||
h("div", { class: "section" },
|
||
h("div", { class: "section-head" }, h("h2", {}, "Saving")),
|
||
h("div", { class: "section-body form-grid wide" },
|
||
number("saveSyncMinutes", "Take the save game from a player every … minutes", c.saveSyncMinutes, { min: 0, max: 240, hint: "0 = only when someone joins" }),
|
||
number("autosaveSeconds", "Write the world state every … seconds", c.autosaveSeconds, { min: 10, max: 3600 }))),
|
||
h("div", { class: "section" },
|
||
h("div", { class: "section-head" }, h("h2", {}, "Network & panel"), h("span", { class: "muted" }, "needs a restart")),
|
||
h("div", { class: "section-body form-grid wide" },
|
||
number("port", "Game port", c.port, { min: 1, max: 65535, restart: true }),
|
||
number("panelPort", "Panel port", c.panelPort, { min: 0, max: 65535, restart: true,
|
||
hint: c.inDocker ? "0 = same port as the game (recommended). Docker: another port must also be published in docker-compose.yml" : "0 = same port as the game (recommended)" }),
|
||
text("panelBindAddress", "Panel bind address", c.panelBindAddress, { max: 60, restart: true, hint: "only with an own panel port - 127.0.0.1 = only via a local reverse proxy" }),
|
||
text("panelBasePath", "Panel sub path", c.panelBasePath, { max: 60, restart: true, placeholder: "/", hint: "e.g. /panel when the proxy serves it there" }),
|
||
toggle("panelTrustProxy", "Behind a reverse proxy", c.panelTrustProxy, "Trust X-Forwarded-For / -Proto / -Prefix", true),
|
||
toggle("panelEnabled", "Web panel enabled", c.panelEnabled, "Turning it off locks you out of this panel after the next program start", true))),
|
||
h("div", { class: "section" },
|
||
h("div", { class: "section-head" }, h("h2", {}, "Keys"), h("span", { class: "muted" }, can("Owner") ? "only owners can change keys" : "owner only")),
|
||
h("div", { class: "section-body form-grid wide" },
|
||
secret("licenseKey", "License key", c.licenseKeySet),
|
||
secret("steamWebApiKey", "Steam Web API key", c.steamWebApiKeySet,
|
||
h("span", {}, "Needed for admins (verifies Steam accounts). ",
|
||
h("a", { href: "https://steamcommunity.com/dev/apikey", target: "_blank", rel: "noopener noreferrer" }, "Get your free key on Steam ↗"))))),
|
||
h("div", { class: "row" }, h("button", { class: "btn primary", type: "button", onclick: save }, "Save settings"),
|
||
h("button", { class: "btn", type: "button", onclick: () => serverAction("restart", { title: "Restart / start the server now?",
|
||
text: "Loads the saved settings. Players reconnect automatically.", confirm: "Restart" }) }, "Restart to apply"),
|
||
h("button", { class: "btn", type: "button", onclick: restartPanel }, "⟳ Restart panel")));
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Warnung, wenn Spiel- oder Panel-Port geändert werden: Ports übernimmt "Panel neu starten" (oder ein Programmneustart),
|
||
* danach ist das Panel nur noch am neuen Port - in Docker nur,
|
||
* wenn der Port in docker-compose.yml freigegeben ist. Text direkt in beiden Sprachen (enthält Zahlen).
|
||
*/
|
||
function portChangeWarning(c, body) {
|
||
const panelAt = (port, panelPort) => (panelPort > 0 ? panelPort : port);
|
||
const port = body.port ?? c.port, panelPort = body.panelPort ?? c.panelPort;
|
||
const oldPanel = panelAt(c.port, c.panelPort), newPanel = panelAt(port, panelPort);
|
||
if (port === c.port && newPanel === oldPanel) return null;
|
||
const de = window.MSCO_LANG === "de";
|
||
const lines = [];
|
||
if (newPanel !== oldPanel)
|
||
lines.push(de
|
||
? `Das Panel ist danach nur noch unter Port ${newPanel} erreichbar (http://<server>:${newPanel}/), nicht mehr unter ${oldPanel}.`
|
||
: `Afterwards the panel is only reachable on port ${newPanel} (http://<server>:${newPanel}/), no longer on ${oldPanel}.`);
|
||
if (port !== c.port)
|
||
lines.push(de ? `Spieler verbinden sich dann über Port ${port}.` : `Players then connect on port ${port}.`);
|
||
lines.push(de
|
||
? "Das gilt, sobald du unten „Panel neu starten“ drückst (oder das Programm neu startest)."
|
||
: "It applies as soon as you press “Restart panel” at the bottom (or restart the program).");
|
||
const ports = [...new Set([port, newPanel])].map((p) => `"${p}:${p}/tcp"`).join(", ");
|
||
lines.push(c.inDocker
|
||
? (de ? `Docker: trag vorher unter ports in docker-compose.yml ${ports} ein, sonst sperrst du dich aus.`
|
||
: `Docker: first add ${ports} under ports in docker-compose.yml, otherwise you lock yourself out.`)
|
||
: (de ? "Gib den Port in der Firewall frei." : "Open the port in your firewall."));
|
||
lines.push(de
|
||
? 'Rückgängig: in data/server.json "PanelPort": 0 setzen und neu starten.'
|
||
: 'To undo: set "PanelPort": 0 in data/server.json and restart.');
|
||
return { title: de ? "Port ändern?" : "Change the port?", text: lines.join(" "), confirm: de ? "Trotzdem speichern" : "Save anyway" };
|
||
}
|
||
|
||
// ------------------------------------------------------------------ Spieler
|
||
|
||
function renderPlayers(page) {
|
||
const tbody = h("tbody");
|
||
const count = h("span", { class: "pill gray" }, "…");
|
||
const say = h("input", { placeholder: "Message to all players…", maxlength: 200 });
|
||
const sendSay = async () => {
|
||
if (!say.value.trim()) return;
|
||
if (await act(api("POST", "say", { text: say.value }))) say.value = "";
|
||
};
|
||
say.addEventListener("keydown", (e) => { if (e.key === "Enter") sendSay(); });
|
||
|
||
page.append(
|
||
h("div", { class: "section" },
|
||
h("div", { class: "section-head" }, h("h2", {}, "Players"), count),
|
||
h("div", { class: "table-wrap" },
|
||
h("table", {},
|
||
h("thead", {}, h("tr", {},
|
||
h("th", {}, "ID"), h("th", {}, "Name"), h("th", {}, "SteamID"),
|
||
can("Admin") ? h("th", {}, "Address") : null, h("th", {}, "Online"), h("th", {}, ""))),
|
||
tbody))),
|
||
h("div", { class: "section" },
|
||
h("div", { class: "section-head" }, h("h2", {}, "Server message")),
|
||
h("div", { class: "section-body row" }, say, h("button", { class: "btn primary", type: "button", onclick: sendSay }, "Send"))));
|
||
|
||
every(3000, async () => {
|
||
try {
|
||
const players = await api("GET", "players");
|
||
count.textContent = players.length + (players.length === 1 ? " online" : " online");
|
||
if (players.length === 0) {
|
||
tbody.replaceChildren(h("tr", {}, h("td", { colspan: 6, class: "empty" }, "Nobody is online right now.")));
|
||
return;
|
||
}
|
||
tbody.replaceChildren(...players.map(playerRow));
|
||
} catch (e) { toast(e.message, true); }
|
||
});
|
||
}
|
||
|
||
function playerRow(p) {
|
||
const steam = /^\d{17}$/.test(p.steamId)
|
||
? h("a", { href: "https://steamcommunity.com/profiles/" + p.steamId, target: "_blank", rel: "noopener noreferrer", class: "mono" }, p.steamId)
|
||
: h("span", { class: "mono muted" }, p.steamId);
|
||
const actions = h("div", { class: "actions" },
|
||
h("button", { class: "btn small", type: "button", onclick: () => kick(p, false) }, "Kick"),
|
||
can("Admin") ? h("button", { class: "btn small danger", type: "button", onclick: () => kick(p, true) }, "Ban") : null,
|
||
can("Admin") && p.verified
|
||
? h("button", { class: "btn small ghost", type: "button", onclick: () => setAdmin(p, !p.admin) }, p.admin ? "Remove admin" : "Make admin")
|
||
: null);
|
||
return h("tr", {},
|
||
h("td", { class: "id" }, "#" + p.id),
|
||
h("td", {}, h("span", { class: "player-name" }, p.name,
|
||
p.admin ? h("span", { class: "pill" }, "ADMIN") : null,
|
||
p.verified ? null : h("span", { class: "pill gray", title: "SteamID not verified by Steam" }, "unverified"))),
|
||
h("td", {}, steam),
|
||
can("Admin") ? h("td", { class: "mono muted" }, p.address || "") : null,
|
||
h("td", { class: "muted" }, since(p.joinedAt)),
|
||
h("td", {}, actions));
|
||
}
|
||
|
||
async function kick(p, ban) {
|
||
const v = await modal({
|
||
title: (ban ? "Ban " : "Kick ") + p.name,
|
||
text: ban ? "The player is kicked and cannot join again until you unban them." : "The player sees the reason and can join again.",
|
||
danger: true,
|
||
fields: [{ name: "reason", label: "Reason (shown to the player)", placeholder: "optional", max: 100 }],
|
||
confirm: ban ? "Ban" : "Kick",
|
||
});
|
||
if (v) await act(api("POST", `players/${p.id}/${ban ? "ban" : "kick"}`, { reason: v.reason }));
|
||
}
|
||
|
||
async function setAdmin(p, admin) {
|
||
const ok = await modal({ title: (admin ? "Make " : "Remove admin: ") + p.name + (admin ? " an admin?" : ""),
|
||
text: admin ? "In-game admins can kick, ban, spawn items and reset the world." : "", confirm: admin ? "Make admin" : "Remove" });
|
||
if (ok) await act(api("POST", `players/${p.id}/${admin ? "op" : "deop"}`));
|
||
}
|
||
|
||
// ------------------------------------------------------------------ Konsole
|
||
|
||
function consoleLine(l) {
|
||
const t = l.text;
|
||
const cls = t.startsWith("[chat]") ? "l-chat" : t.startsWith("[panel]") ? "l-panel" : t.startsWith(">") ? "l-cmd"
|
||
: /error|failed|could not|cannot|warning|not reachable/i.test(t) ? "l-warn" : "";
|
||
return h("div", { class: cls }, h("span", { class: "t" }, l.time), t);
|
||
}
|
||
|
||
function renderConsole(page) {
|
||
const out = h("div", { class: "console" });
|
||
const input = h("input", { placeholder: can("Admin") ? "Command… (help for a list)" : "Only admins can enter commands", disabled: !can("Admin"), autocomplete: "off", spellcheck: "false" });
|
||
const send = async () => {
|
||
const command = input.value.trim();
|
||
if (!command) return;
|
||
state.history.push(command);
|
||
state.historyIndex = state.history.length;
|
||
input.value = "";
|
||
await act(api("POST", "console", { command }).then(() => null)); // Ausgabe erscheint im Log
|
||
poll();
|
||
};
|
||
input.addEventListener("keydown", (e) => {
|
||
if (e.key === "Enter") send();
|
||
else if (e.key === "ArrowUp" && state.history.length) {
|
||
state.historyIndex = Math.max(0, state.historyIndex - 1);
|
||
input.value = state.history[state.historyIndex] || "";
|
||
e.preventDefault();
|
||
} else if (e.key === "ArrowDown" && state.history.length) {
|
||
state.historyIndex = Math.min(state.history.length, state.historyIndex + 1);
|
||
input.value = state.history[state.historyIndex] || "";
|
||
e.preventDefault();
|
||
}
|
||
});
|
||
|
||
page.append(h("div", { class: "section" },
|
||
h("div", { class: "section-head" }, h("h2", {}, "Live console"), h("span", { class: "muted" }, "chat, joins, admin actions and command output")),
|
||
out,
|
||
h("div", { class: "console-input" }, input, h("button", { class: "btn primary", type: "button", onclick: send, disabled: !can("Admin") }, "Run"))));
|
||
|
||
let last = 0;
|
||
async function poll() {
|
||
try {
|
||
const r = await api("GET", "console?after=" + last);
|
||
if (!r.lines.length) return;
|
||
const stick = out.scrollTop + out.clientHeight >= out.scrollHeight - 30;
|
||
out.append(...r.lines.map(consoleLine));
|
||
while (out.childElementCount > 2000) out.firstChild.remove();
|
||
last = r.last;
|
||
if (stick) out.scrollTop = out.scrollHeight;
|
||
} catch { /* Topbar zeigt den Fehler */ }
|
||
}
|
||
every(1000, poll);
|
||
if (can("Admin")) input.focus();
|
||
}
|
||
|
||
// ------------------------------------------------------------------ Ingame-Admins
|
||
|
||
function renderAdmins(page) {
|
||
const list = h("tbody");
|
||
const warning = h("div");
|
||
const id = h("input", { placeholder: "SteamID64 (17 digits)", maxlength: 17, inputmode: "numeric" });
|
||
const add = async () => {
|
||
if (!/^\d{17}$/.test(id.value.trim())) { toast("Enter a SteamID64 (17 digits)", true); return; }
|
||
if (await act(api("POST", "admins/add", { id: id.value.trim() }))) { id.value = ""; load(); }
|
||
};
|
||
id.addEventListener("keydown", (e) => { if (e.key === "Enter") add(); });
|
||
page.append(
|
||
warning,
|
||
can("Admin") ? h("div", { class: "section" },
|
||
h("div", { class: "section-head" }, h("h2", {}, "Add an admin"), h("span", { class: "muted" }, "also works when the player is offline")),
|
||
h("div", { class: "section-body row" }, id, h("button", { class: "btn primary", type: "button", onclick: add }, "Add admin")),
|
||
h("div", { class: "section-body muted small-text" }, "Find a SteamID64 on the player's Steam profile or with ",
|
||
h("a", { href: "https://steamid.io", target: "_blank", rel: "noopener noreferrer" }, "steamid.io ↗"),
|
||
". Online players can also be made admin on the Players page.")) : "",
|
||
h("div", { class: "section" },
|
||
h("div", { class: "section-head" }, h("h2", {}, "In-game admins"), h("span", { class: "muted" }, "can use /admin in the game: kick, ban, teleport, items, world")),
|
||
h("div", { class: "table-wrap" }, h("table", {}, h("thead", {}, h("tr", {}, h("th", {}, "SteamID"), h("th", {}, "Player"), h("th", {}, ""))), list))));
|
||
|
||
async function load() {
|
||
try {
|
||
const r = await api("GET", "admins");
|
||
warning.replaceChildren(r.steamVerification ? "" : h("div", { class: "notice bad" },
|
||
h("div", {}, h("b", {}, "Admin rights are disabled"),
|
||
h("div", {}, "Without a Steam Web API key the server cannot verify Steam accounts - anyone could pretend to be an admin.")),
|
||
h("div", { class: "row" },
|
||
h("a", { class: "btn small primary", href: "https://steamcommunity.com/dev/apikey", target: "_blank", rel: "noopener noreferrer" }, "Get a Steam key ↗"),
|
||
can("Owner") ? h("button", { class: "btn small", type: "button", onclick: () => go("settings") }, "Enter it in Settings") : null)));
|
||
if (!r.admins.length) { list.replaceChildren(h("tr", {}, h("td", { colspan: 3, class: "empty" }, "No admins yet."))); return; }
|
||
list.replaceChildren(...r.admins.map((a) => h("tr", {},
|
||
h("td", {}, h("a", { href: "https://steamcommunity.com/profiles/" + a.steamId, target: "_blank", rel: "noopener noreferrer", class: "mono" }, a.steamId)),
|
||
h("td", {}, a.online ? h("span", { class: "player-name" }, a.name, h("span", { class: "pill green" }, "online")) : h("span", { class: "muted" }, "offline")),
|
||
h("td", {}, can("Admin") ? h("div", { class: "actions" }, h("button", { class: "btn small danger", type: "button", onclick: async () => {
|
||
const ok = await modal({ title: "Remove admin " + (a.name || a.steamId) + "?", danger: true, confirm: "Remove" });
|
||
if (ok && await act(api("POST", "admins/remove", { id: a.steamId }))) load();
|
||
} }, "Remove")) : null))));
|
||
} catch (e) { toast(e.message, true); }
|
||
}
|
||
every(10000, load);
|
||
}
|
||
|
||
// ------------------------------------------------------------------ Banns
|
||
|
||
function renderBans(page) {
|
||
const list = h("tbody");
|
||
const id = h("input", { placeholder: "SteamID64 (17 digits) or name:playername", maxlength: 60 });
|
||
page.append(
|
||
can("Admin") ? h("div", { class: "section" },
|
||
h("div", { class: "section-head" }, h("h2", {}, "Ban a SteamID"), h("span", { class: "muted" }, "also works when the player is offline")),
|
||
h("div", { class: "section-body row" }, id,
|
||
h("button", { class: "btn danger", type: "button", onclick: async () => {
|
||
if (!id.value.trim()) return;
|
||
if (await act(api("POST", "bans/add", { id: id.value.trim() }))) { id.value = ""; load(); }
|
||
} }, "Ban"))) : "",
|
||
h("div", { class: "section" },
|
||
h("div", { class: "section-head" }, h("h2", {}, "Banned players")),
|
||
h("div", { class: "table-wrap" }, h("table", {}, h("thead", {}, h("tr", {}, h("th", {}, "Identity"), h("th", {}, ""))), list))));
|
||
|
||
async function load() {
|
||
try {
|
||
const bans = await api("GET", "bans");
|
||
if (!bans.length) { list.replaceChildren(h("tr", {}, h("td", { colspan: 2, class: "empty" }, "Nobody is banned."))); return; }
|
||
list.replaceChildren(...bans.map((b) => h("tr", {},
|
||
h("td", {}, /^\d{17}$/.test(b)
|
||
? h("a", { href: "https://steamcommunity.com/profiles/" + b, target: "_blank", rel: "noopener noreferrer", class: "mono" }, b)
|
||
: h("span", { class: "mono" }, b.replace(/^name:/, "") + " (no Steam)")),
|
||
h("td", {}, can("Admin") ? h("div", { class: "actions" }, h("button", { class: "btn small", type: "button", onclick: async () => {
|
||
if (await act(api("POST", "bans/remove", { id: b }))) load();
|
||
} }, "Unban")) : null))));
|
||
} catch (e) { toast(e.message, true); }
|
||
}
|
||
every(10000, load);
|
||
}
|
||
|
||
// ------------------------------------------------------------------ Welt & Backups
|
||
|
||
function renderWorld(page) {
|
||
const backups = h("tbody");
|
||
const zipInput = h("input", { type: "file", accept: ".zip,.rar,.7z,application/zip,application/x-rar-compressed,application/vnd.rar,application/x-7z-compressed" });
|
||
const uploadZip = async () => {
|
||
const file = zipInput.files && zipInput.files[0];
|
||
if (!file) { toast("Choose a ZIP, RAR or 7z file first", true); return; }
|
||
const ok = await modal({ title: "Upload " + file.name + "?", danger: true, confirm: "Upload",
|
||
text: "The current save game is backed up, then replaced. All changes in the world are reset and everyone reconnects." });
|
||
if (!ok) return;
|
||
try {
|
||
const res = await fetch("api/save/upload", { method: "POST", credentials: "same-origin",
|
||
headers: { "Content-Type": "application/octet-stream", "X-MSCO-Panel": "1" }, body: file });
|
||
const data = await res.json().catch(() => null);
|
||
if (!res.ok) throw new Error((data && data.error) || "HTTP " + res.status);
|
||
toast(data.message);
|
||
zipInput.value = "";
|
||
loadBackups();
|
||
} catch (e) { toast(e.message, true); }
|
||
};
|
||
const worldAction = async (action, confirmText, name) => {
|
||
if (confirmText) {
|
||
const ok = await modal({ title: confirmText.title, text: confirmText.text, danger: confirmText.danger, confirm: confirmText.button });
|
||
if (!ok) return;
|
||
}
|
||
await act(api("POST", "world/" + action, name ? { name } : {}));
|
||
loadBackups();
|
||
};
|
||
|
||
page.append(
|
||
h("div", { class: "cards wide" },
|
||
h("div", { class: "card" },
|
||
h("div", { class: "stat-label" }, "Reset world"),
|
||
h("p", { class: "muted" }, "Everything goes back to the reset point (the save game as it was uploaded to the server). The current state is backed up first. Everyone reconnects."),
|
||
h("button", { class: "btn danger", type: "button", onclick: () => worldAction("reset", { title: "Reset the whole world?", text: "Moved objects, bought items, doors, vehicle values and player positions are reset to the reset point. The current state is kept as a backup.", danger: true, button: "Reset world" }) }, "Reset world")),
|
||
h("div", { class: "card" },
|
||
h("div", { class: "stat-label" }, "New game"),
|
||
h("p", { class: "muted" }, "Start a completely fresh My Summer Car game instead of an uploaded save. The current save game is backed up first. The first player to join creates the new world."),
|
||
h("button", { class: "btn danger", type: "button", onclick: () => worldAction("newgame", { title: "Start a new game?", text: "The current save game and all changes in the world are replaced by a fresh new game (the current state is kept as a backup). “Reset world” then also goes back to a new game. Everyone reconnects.", danger: true, button: "Start new game" }) }, "Start new game")),
|
||
h("div", { class: "card" },
|
||
h("div", { class: "stat-label" }, "Backup"),
|
||
h("p", { class: "muted" }, "Save a copy of the current server save game. The last 5 backups are kept."),
|
||
h("button", { class: "btn primary", type: "button", onclick: () => worldAction("backup") }, "Backup now")),
|
||
h("div", { class: "card" },
|
||
h("div", { class: "stat-label" }, "Reset point"),
|
||
h("p", { class: "muted" }, "Use the current save game as the new reset point for “Reset world”."),
|
||
h("button", { class: "btn", type: "button", onclick: () => worldAction("resetpoint", { title: "Set a new reset point?", text: "“Reset world” will go back to the save game as it is right now.", button: "Set reset point" }) }, "Set reset point")),
|
||
h("div", { class: "card" },
|
||
h("div", { class: "stat-label" }, "Upload save game"),
|
||
h("p", { class: "muted" }, "Pack the files from AppData\\LocalLow\\Amistech\\My Summer Car as ZIP, RAR or 7z. They replace the server save and become the reset point. Everyone reconnects."),
|
||
h("div", { class: "row" }, zipInput,
|
||
h("button", { class: "btn primary", type: "button", onclick: uploadZip }, "Upload"),
|
||
h("a", { class: "btn ghost", href: "api/save/download" }, "Download current"))),
|
||
h("div", { class: "card" },
|
||
h("div", { class: "stat-label" }, "Save game files"),
|
||
h("p", { class: "muted" }, "Copied new save files into data/save? Load them (they also become the reset point)."),
|
||
h("div", { class: "row" },
|
||
h("button", { class: "btn", type: "button", onclick: () => worldAction("reloadsave", { title: "Load the save game from data/save?", text: "Everyone reconnects and gets this save game.", button: "Load" }) }, "Reload save"),
|
||
h("button", { class: "btn ghost", type: "button", onclick: () => worldAction("save") }, "Save world state")))),
|
||
h("div", { class: "section" },
|
||
h("div", { class: "section-head" }, h("h2", {}, "Save game backups"), h("span", { class: "muted" }, "newest first")),
|
||
h("div", { class: "table-wrap" }, h("table", {}, h("thead", {}, h("tr", {}, h("th", {}, "Created"), h("th", {}, "Folder"), h("th", {}, ""))), backups))));
|
||
|
||
async function loadBackups() {
|
||
try {
|
||
const list = await api("GET", "backups");
|
||
if (!list.length) { backups.replaceChildren(h("tr", {}, h("td", { colspan: 3, class: "empty" }, "No backups yet."))); return; }
|
||
backups.replaceChildren(...list.map((name) => h("tr", {},
|
||
h("td", {}, backupDate(name)), h("td", { class: "mono muted" }, name),
|
||
h("td", {}, h("div", { class: "actions" }, h("button", { class: "btn small", type: "button", onclick: () =>
|
||
worldAction("restore", { title: "Restore " + backupDate(name) + "?", text: "The server goes back to this save game (the current one is backed up first). Everyone reconnects.", danger: true, button: "Restore" }, name) }, "Restore"))))));
|
||
} catch (e) { toast(e.message, true); }
|
||
}
|
||
every(15000, loadBackups);
|
||
}
|
||
|
||
// ------------------------------------------------------------------ Benutzer
|
||
|
||
function renderUsers(page) {
|
||
const tbody = h("tbody");
|
||
page.append(h("div", { class: "section" },
|
||
h("div", { class: "section-head" }, h("h2", {}, "Panel users"),
|
||
h("button", { class: "btn primary small", type: "button", onclick: addUser }, "+ Add user")),
|
||
h("div", { class: "table-wrap" }, h("table", {},
|
||
h("thead", {}, h("tr", {}, h("th", {}, "Name"), h("th", {}, "Role"), h("th", {}, "Last login"), h("th", {}, ""))), tbody))),
|
||
h("div", { class: "section" }, h("div", { class: "section-body muted" },
|
||
h("b", {}, "Moderator"), ": players, kick, server messages, read console & bans. ",
|
||
h("b", {}, "Admin"), ": everything on the server (ban, console commands, world reset, backups). ",
|
||
h("b", {}, "Owner"), ": additionally manages panel users.")));
|
||
|
||
async function load() {
|
||
try {
|
||
const users = await api("GET", "users");
|
||
tbody.replaceChildren(...users.map((u) => h("tr", {},
|
||
h("td", {}, h("span", { class: "player-name" }, u.name, u.name.toLowerCase() === state.user.name.toLowerCase() ? h("span", { class: "pill gray" }, "you") : null)),
|
||
h("td", {}, h("span", { class: "pill" + (u.role === "Owner" ? "" : u.role === "Admin" ? " green" : " gray") }, u.role)),
|
||
h("td", { class: "muted" }, u.lastLogin ? since(u.lastLogin) + " ago" : "never"),
|
||
h("td", {}, h("div", { class: "actions" },
|
||
h("button", { class: "btn small ghost", type: "button", onclick: () => changeRole(u) }, "Role"),
|
||
h("button", { class: "btn small ghost", type: "button", onclick: () => resetPassword(u) }, "Password"),
|
||
u.name.toLowerCase() === state.user.name.toLowerCase() ? null
|
||
: h("button", { class: "btn small danger", type: "button", onclick: () => removeUser(u) }, "Delete"))))));
|
||
} catch (e) { toast(e.message, true); }
|
||
}
|
||
|
||
async function addUser() {
|
||
const v = await modal({ title: "Add panel user", fields: [
|
||
{ name: "name", label: "Username", max: 32 },
|
||
{ name: "password", label: "Password (min. 8 characters)", type: "password" },
|
||
{ name: "role", label: "Role", options: ["Moderator", "Admin", "Owner"], value: "Moderator" }], confirm: "Create" });
|
||
if (v && await act(api("POST", "users", v))) load();
|
||
}
|
||
async function changeRole(u) {
|
||
const v = await modal({ title: "Role of " + u.name, fields: [{ name: "role", label: "Role", options: ["Moderator", "Admin", "Owner"], value: u.role }], confirm: "Save" });
|
||
if (v && await act(api("POST", `users/${encodeURIComponent(u.name)}/role`, v))) load();
|
||
}
|
||
async function resetPassword(u) {
|
||
const v = await modal({ title: "New password for " + u.name, text: "They are logged out everywhere.", fields: [{ name: "password", label: "New password", type: "password" }], confirm: "Set password" });
|
||
if (v && await act(api("POST", `users/${encodeURIComponent(u.name)}/password`, v))) load();
|
||
}
|
||
async function removeUser(u) {
|
||
const ok = await modal({ title: "Delete " + u.name + "?", text: "They can no longer log in to the panel.", danger: true, confirm: "Delete" });
|
||
if (ok && await act(api("POST", `users/${encodeURIComponent(u.name)}/delete`))) load();
|
||
}
|
||
load();
|
||
}
|
||
|
||
// ------------------------------------------------------------------ Konto
|
||
|
||
function renderAccount(page) {
|
||
const current = h("input", { type: "password", autocomplete: "current-password" });
|
||
const next = h("input", { type: "password", autocomplete: "new-password" });
|
||
const repeat = h("input", { type: "password", autocomplete: "new-password" });
|
||
const form = h("form", { class: "section-body form-grid" },
|
||
h("label", {}, "Current password", current),
|
||
h("label", {}, "New password (min. 8 characters)", next),
|
||
h("label", {}, "Repeat new password", repeat),
|
||
h("div", {}, h("button", { class: "btn primary", type: "submit" }, "Change password")));
|
||
form.addEventListener("submit", async (e) => {
|
||
e.preventDefault();
|
||
if (next.value !== repeat.value) { toast("The new passwords do not match", true); return; }
|
||
if (await act(api("POST", "me/password", { current: current.value, password: next.value }))) current.value = next.value = repeat.value = "";
|
||
});
|
||
page.append(h("div", { class: "section" },
|
||
h("div", { class: "section-head" }, h("h2", {}, "My account"),
|
||
h("span", { class: "muted" }, `${state.user.name} · ${state.user.role}`)), form));
|
||
}
|
||
|
||
// ------------------------------------------------------------------ Updates
|
||
|
||
const UPDATE_STEPS = [["downloading", "Download"], ["building", "Build"], ["installing", "Install"], ["restarting", "Restart"], ["done", "Done"]];
|
||
const UPDATE_BUSY = ["downloading", "building", "installing", "restarting"];
|
||
|
||
function shortDate(iso) {
|
||
if (!iso) return "–";
|
||
return new Date(iso).toLocaleString(window.MSCO_LANG === "de" ? "de-DE" : "en-GB", { dateStyle: "medium", timeStyle: "short" });
|
||
}
|
||
|
||
/** Sidebar-Hinweis "Update verfügbar" und laufendes Update (auch von einem anderen Admin gestartet) anzeigen. */
|
||
async function refreshUpdateState() {
|
||
if (!can("Admin")) return;
|
||
try {
|
||
const u = await api("GET", "update");
|
||
const available = !!u.available;
|
||
if (available !== !!state.updateAvailable) { state.updateAvailable = available; renderNav(); }
|
||
if (UPDATE_BUSY.includes(u.step)) openUpdateOverlay(u);
|
||
} catch { /* Topbar zeigt Fehler */ }
|
||
}
|
||
|
||
function renderUpdate(page) {
|
||
const body = h("div", { class: "section-body update-body" });
|
||
const changes = h("div", { class: "section-body" });
|
||
const changesBox = h("div", { class: "section hidden" }, h("div", { class: "section-head" }, h("h2", {}, "What's new")), changes);
|
||
page.append(
|
||
h("div", { class: "section" },
|
||
h("div", { class: "section-head" }, h("h2", {}, "Server update"),
|
||
h("button", { class: "btn small", type: "button", onclick: () => load(true) }, "⟳ Check for updates")),
|
||
body),
|
||
changesBox);
|
||
load(false);
|
||
|
||
async function load(check) {
|
||
let u;
|
||
try { u = check ? await api("POST", "update/check") : await api("GET", "update"); }
|
||
catch (e) { toast(e.message, true); return; }
|
||
if (check) toast(u.checkError ? u.checkError : u.available ? "Update available: " + u.latest : "The server is up to date", !!u.checkError);
|
||
state.updateAvailable = !!u.available;
|
||
renderNav();
|
||
if (UPDATE_BUSY.includes(u.step)) openUpdateOverlay(u);
|
||
|
||
const tile = (label, value, sub, cls) => h("div", { class: "card" + (cls ? " " + cls : "") },
|
||
h("div", { class: "stat-label" }, label), h("div", { class: "stat-value" }, value), sub ? h("div", { class: "stat-sub" }, sub) : null);
|
||
const tiles = h("div", { class: "cards" },
|
||
tile("Installed", u.current, u.currentCommit ? "commit " + u.currentCommit.slice(0, 8) : "for MSCO mod " + u.modVersion),
|
||
tile("Newest", u.latest || "–", u.latestDate ? shortDate(u.latestDate) : "not checked yet", u.available ? "accent" : null),
|
||
tile("Last check", u.lastCheck ? since(u.lastCheck) : "–", "automatically every 6 hours"));
|
||
|
||
const notes = [];
|
||
if (u.checkError) notes.push(h("div", { class: "notice bad" }, h("div", {}, h("b", {}, "Check failed"), h("div", {}, u.checkError))));
|
||
if (u.step === "failed" && u.error) notes.push(h("div", { class: "notice bad" }, h("div", {}, h("b", {}, "The last update failed"), h("div", {}, u.error)),
|
||
h("button", { class: "btn small ghost", type: "button", onclick: () => openUpdateOverlay(u, true) }, "Show log")));
|
||
if (u.available) {
|
||
const modChange = u.latestModVersion && u.latestModVersion !== u.modVersion;
|
||
notes.push(h("div", { class: "notice update-notice" },
|
||
h("div", {}, h("b", {}, "Version " + u.latest + " is available"),
|
||
h("div", {}, u.latestMessage || ""),
|
||
modChange ? h("div", { class: "warn-text" }, "Players then need MSCO mod " + u.latestModVersion + " (currently " + u.modVersion + ")") : null),
|
||
u.canInstall === false ? null : h("button", { class: "btn primary", type: "button", onclick: () => install(u) }, "⇪ Install update")));
|
||
if (u.canInstall === false) notes.push(h("div", { class: "notice" }, h("div", {}, h("b", {}, "Update from the panel not possible"), h("div", {}, u.cannotInstall))));
|
||
} else if (u.latest) {
|
||
notes.push(h("div", { class: "notice ok" }, h("div", {}, h("b", {}, "The server is up to date"), h("div", {}, "Version " + u.current))));
|
||
}
|
||
body.replaceChildren(tiles, ...notes,
|
||
h("p", { class: "muted small-print" }, "Source: ", h("a", { href: u.source, target: "_blank", rel: "noopener" }, u.source.replace(/^https?:\/\//, "")), " (" + u.branch + ")"));
|
||
|
||
const list = u.changes || [];
|
||
changesBox.classList.toggle("hidden", !u.available || list.length === 0);
|
||
changes.replaceChildren(h("ul", { class: "changes" }, list.map((c) =>
|
||
h("li", {}, h("span", { class: "mono change-sha" }, c.sha), h("span", { class: "change-title mono" }, c.title), h("small", { class: "muted" }, shortDate(c.date))))));
|
||
}
|
||
|
||
async function install(u) {
|
||
const ok = await modal({ title: "Install update " + u.latest + "?",
|
||
text: "The server downloads and builds the new version (takes a minute or two), then restarts. Players are warned and reconnect automatically. The panel shows the progress and reloads itself.",
|
||
confirm: "Update now" });
|
||
if (!ok) return;
|
||
const r = await act(api("POST", "update/install"));
|
||
if (r) openUpdateOverlay({ ...u, step: "downloading", progress: 0, target: u.latest, log: [] });
|
||
}
|
||
}
|
||
|
||
let updateOverlay = null;
|
||
|
||
/** Vollbild-Fortschritt: Laden, Bauen, Installieren, Neustart - übersteht den Neustart des Panels und lädt danach neu. */
|
||
function openUpdateOverlay(initial, showLogOnly) {
|
||
if (updateOverlay) return;
|
||
const stepEls = {};
|
||
const list = h("ol", { class: "us-steps" }, UPDATE_STEPS.map(([id, label]) => (stepEls[id] = h("li", {}, h("span", { class: "us-dot" }), h("span", {}, label)))));
|
||
const fill = h("div", { class: "us-fill" });
|
||
const pct = h("b", { class: "us-pct" }, "0%");
|
||
const msg = h("div", { class: "us-msg" }, "…");
|
||
const clock = h("small", { class: "muted us-clock" }, "");
|
||
const logBox = h("div", { class: "console us-log hidden" });
|
||
const logToggle = h("button", { class: "btn small ghost", type: "button", onclick: () => {
|
||
logBox.classList.toggle("hidden");
|
||
logToggle.textContent = logBox.classList.contains("hidden") ? "Show build log" : "Hide build log";
|
||
logBox.scrollTop = logBox.scrollHeight;
|
||
} }, "Show build log");
|
||
const errorBox = h("div", { class: "notice bad hidden" });
|
||
const actions = h("div", { class: "buttons" });
|
||
const versions = h("div", { class: "us-versions" });
|
||
const card = h("div", { class: "update-card" },
|
||
h("div", { class: "us-head" }, h("img", { src: "logo.png", alt: "" }), h("div", {}, h("h2", {}, "Updating the server"), versions)),
|
||
list, h("div", { class: "us-bar" }, fill), h("div", { class: "us-row" }, msg, pct), h("div", { class: "us-row" }, logToggle, clock),
|
||
logBox, errorBox, actions);
|
||
const back = h("div", { class: "update-overlay" }, card);
|
||
document.body.append(back);
|
||
updateOverlay = back;
|
||
|
||
const from = initial.current;
|
||
let target = initial.target || initial.latest;
|
||
let sawRestart = initial.step === "restarting", offlineSince = null, done = false, timer = null, lastLog = "";
|
||
const started = Date.now();
|
||
const close = () => { clearTimeout(timer); back.remove(); updateOverlay = null; };
|
||
const showVersions = (now) => versions.replaceChildren(h("span", { class: "mono" }, from || now || "?"), " → ", h("span", { class: "mono" }, target || "?"));
|
||
showVersions();
|
||
|
||
const mark = (active, failed) => {
|
||
const idx = UPDATE_STEPS.findIndex(([id]) => id === active);
|
||
UPDATE_STEPS.forEach(([id], i) => { stepEls[id].className = i < idx ? "done" : i === idx ? (failed ? "failed" : "active") : ""; });
|
||
};
|
||
const setBar = (p) => { const v = Math.max(0, Math.min(100, p || 0)); fill.style.width = v + "%"; pct.textContent = v + "%"; };
|
||
const fmt = (s) => Math.floor(s / 60) + ":" + String(Math.floor(s % 60)).padStart(2, "0");
|
||
const showLog = (lines) => {
|
||
const text = (lines || []).join("\n");
|
||
if (text === lastLog) return;
|
||
lastLog = text;
|
||
const atEnd = logBox.scrollTop + logBox.clientHeight >= logBox.scrollHeight - 30;
|
||
logBox.replaceChildren(...(lines || []).map((l) => h("div", { class: /error|FAILED/i.test(l) ? "l-warn" : l.startsWith("==") ? "l-cmd" : "" }, l)));
|
||
if (atEnd) logBox.scrollTop = logBox.scrollHeight;
|
||
};
|
||
const fail = (text, lines) => {
|
||
done = true;
|
||
const active = UPDATE_STEPS.find(([id]) => stepEls[id].className === "active");
|
||
mark(active ? active[0] : "downloading", true);
|
||
errorBox.replaceChildren(h("div", {}, h("b", {}, "The update failed - the server keeps running the old version"), h("div", {}, text)));
|
||
errorBox.classList.remove("hidden");
|
||
if (lines) showLog(lines);
|
||
logBox.classList.remove("hidden");
|
||
logToggle.textContent = "Hide build log";
|
||
msg.textContent = "Update failed";
|
||
actions.replaceChildren(h("button", { class: "btn primary", type: "button", onclick: () => { close(); go("update"); } }, "Close"));
|
||
};
|
||
const finish = (version) => {
|
||
done = true;
|
||
mark("done");
|
||
stepEls.done.className = "done";
|
||
setBar(100);
|
||
msg.textContent = "Server updated to " + version + " - reloading the panel …";
|
||
card.classList.add("success");
|
||
setTimeout(() => location.reload(), 2500);
|
||
};
|
||
|
||
if (showLogOnly) { fail(initial.error || "", initial.log); return; }
|
||
mark(initial.step || "downloading");
|
||
setBar(initial.progress);
|
||
|
||
const poll = async () => {
|
||
if (done) return;
|
||
clock.textContent = fmt((Date.now() - started) / 1000);
|
||
let u = null, unauthorized = false;
|
||
try {
|
||
const res = await fetch("api/update", { credentials: "same-origin", headers: { "X-MSCO-Panel": "1" }, cache: "no-store" });
|
||
if (res.status === 401) unauthorized = true;
|
||
else if (res.ok) u = await res.json();
|
||
} catch { /* während des Neustarts normal */ }
|
||
|
||
if (unauthorized && sawRestart) { finish(target); return; } // nach dem Neuladen neu anmelden
|
||
if (!u) {
|
||
offlineSince = offlineSince || Date.now();
|
||
const away = (Date.now() - offlineSince) / 1000;
|
||
if (away > 15) sawRestart = true; // Verbindung länger weg = Neustart läuft
|
||
if (sawRestart) {
|
||
mark("restarting");
|
||
setBar(97);
|
||
msg.textContent = away > 180
|
||
? "The server has not come back yet. Docker/systemd restart it automatically - otherwise start it again."
|
||
: "Waiting for the server to come back …";
|
||
}
|
||
timer = setTimeout(poll, 1000);
|
||
return;
|
||
}
|
||
offlineSince = null;
|
||
if (u.target) target = u.target;
|
||
showVersions(u.current);
|
||
if (u.log && u.log.length) showLog(u.log);
|
||
|
||
if (u.step === "failed") { fail(u.error || "Unknown error", u.log); return; }
|
||
if (UPDATE_BUSY.includes(u.step)) {
|
||
if (u.step === "restarting") sawRestart = true;
|
||
mark(u.step);
|
||
setBar(u.progress);
|
||
msg.textContent = u.message || "…";
|
||
} else if (target && u.current === target) {
|
||
finish(u.current); return;
|
||
} else if (sawRestart) {
|
||
fail("The server restarted but still runs version " + u.current + ". The update could not be started - see the console.");
|
||
return;
|
||
} else {
|
||
close(); return; // nichts (mehr) zu tun
|
||
}
|
||
timer = setTimeout(poll, 1000);
|
||
};
|
||
poll();
|
||
}
|
||
|
||
// ------------------------------------------------------------------ Start
|
||
|
||
async function boot() {
|
||
let session;
|
||
try { session = await api("GET", "session"); }
|
||
catch (e) { document.body.replaceChildren(h("div", { class: "empty" }, "Panel not reachable: " + e.message)); return; }
|
||
if (!session.user) { showAuth(session.needsSetup, session.serverName); return; }
|
||
state.user = session.user;
|
||
$("auth").classList.add("hidden");
|
||
$("app").classList.remove("hidden");
|
||
$("meName").textContent = session.user.name;
|
||
$("meRole").textContent = session.user.role;
|
||
$("meAvatar").textContent = session.user.name.slice(0, 1).toUpperCase();
|
||
$("scName").textContent = session.serverName;
|
||
$("serverName").textContent = session.serverName;
|
||
let page = "dashboard";
|
||
try { page = localStorage.getItem("msco-panel-page") || page; } catch { /* egal */ }
|
||
go(page);
|
||
}
|
||
|
||
boot();
|