Refine overview panel and compact overlay header
This commit is contained in:
larssand
162
src/app.js
162
src/app.js
@@ -65,6 +65,11 @@ const TRANSLATIONS = {
|
||||
"dashboard.recent_sessions": "Senaste sessioner",
|
||||
"dashboard.free_practice": "Fri träning",
|
||||
"dashboard.open_practice": "Open Practice",
|
||||
"dashboard.live_board": "Live Board",
|
||||
"dashboard.decoder_feed": "Decoder-feed",
|
||||
"dashboard.backend_link": "Backend-länk",
|
||||
"dashboard.audio_profile": "Ljudprofil",
|
||||
"dashboard.live_note": "Snabb driftpanel för anslutning, overlay och ljud. Djupare konfig ligger kvar under Inställningar.",
|
||||
"session.none_yet": "Inga sessioner ännu.",
|
||||
"classes.create": "Skapa klass",
|
||||
"classes.placeholder": "Klassnamn (t.ex. 2WD Buggy)",
|
||||
@@ -542,6 +547,11 @@ const TRANSLATIONS = {
|
||||
"dashboard.recent_sessions": "Recent Sessions",
|
||||
"dashboard.free_practice": "Free Practice",
|
||||
"dashboard.open_practice": "Open Practice",
|
||||
"dashboard.live_board": "Live Board",
|
||||
"dashboard.decoder_feed": "Decoder feed",
|
||||
"dashboard.backend_link": "Backend link",
|
||||
"dashboard.audio_profile": "Audio profile",
|
||||
"dashboard.live_note": "Quick operations panel for connection, overlay and audio. Deeper configuration remains under Settings.",
|
||||
"session.none_yet": "No sessions yet.",
|
||||
"classes.create": "Create Class",
|
||||
"classes.placeholder": "Class name (e.g. 2WD Buggy)",
|
||||
@@ -1961,6 +1971,14 @@ function renderDashboard() {
|
||||
(sum, x) => sum + (x.passings?.length || 0),
|
||||
0
|
||||
);
|
||||
const backendUrl = getBackendUrl();
|
||||
const decoderUrl = state.settings.wsUrl || "-";
|
||||
const audioProfile =
|
||||
state.settings.passingSoundMode === "name"
|
||||
? t("settings.passing_sound_name")
|
||||
: state.settings.passingSoundMode === "beep"
|
||||
? t("settings.passing_sound_beep")
|
||||
: t("settings.passing_sound_off");
|
||||
|
||||
dom.view.innerHTML = `
|
||||
<div class="grid cols-4">
|
||||
@@ -1989,12 +2007,35 @@ function renderDashboard() {
|
||||
|
||||
<section class="panel">
|
||||
<div class="panel-header">
|
||||
<h3>${t("dashboard.quick_actions")}</h3>
|
||||
<h3>${t("dashboard.live_board")}</h3>
|
||||
</div>
|
||||
<div class="panel-body actions">
|
||||
<button id="goEvents" class="btn btn-primary">${t("dashboard.create_event")}</button>
|
||||
<button id="goTiming" class="btn">${t("dashboard.open_timing")}</button>
|
||||
<button id="connectNow" class="btn">${t("dashboard.connect_decoder")}</button>
|
||||
<div class="panel-body dashboard-live-stack">
|
||||
<p class="hint">${t("dashboard.live_note")}</p>
|
||||
<div class="dashboard-live-grid">
|
||||
<article class="dashboard-live-card">
|
||||
<span>${t("dashboard.decoder_feed")}</span>
|
||||
<strong>${state.decoder.connected ? t("timing.connected") : t("timing.disconnected")}</strong>
|
||||
<small>${escapeHtml(decoderUrl)}</small>
|
||||
</article>
|
||||
<article class="dashboard-live-card">
|
||||
<span>${t("dashboard.backend_link")}</span>
|
||||
<strong>${backend.available ? t("settings.online") : t("settings.offline")}</strong>
|
||||
<small>${escapeHtml(backendUrl)}</small>
|
||||
</article>
|
||||
<article class="dashboard-live-card">
|
||||
<span>${t("dashboard.audio_profile")}</span>
|
||||
<strong>${state.settings.audioEnabled ? audioProfile : t("settings.passing_sound_off")}</strong>
|
||||
<small>${state.settings.finishVoiceEnabled ? t("settings.finish_voice") : "-"}</small>
|
||||
</article>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button id="goEvents" class="btn btn-primary">${t("dashboard.create_event")}</button>
|
||||
<button id="goTiming" class="btn">${t("dashboard.open_timing")}</button>
|
||||
<button id="openDashboardOverlay" class="btn">${t("timing.open_overlay")}</button>
|
||||
<button id="connectNow" class="btn">${t("dashboard.connect_decoder")}</button>
|
||||
<button id="disconnectNow" class="btn">${t("timing.disconnect")}</button>
|
||||
<button id="dashboardTestAudio" class="btn">${t("settings.test_audio")}</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@@ -2022,6 +2063,15 @@ function renderDashboard() {
|
||||
});
|
||||
|
||||
document.getElementById("connectNow")?.addEventListener("click", connectDecoder);
|
||||
document.getElementById("disconnectNow")?.addEventListener("click", disconnectDecoder);
|
||||
document.getElementById("openDashboardOverlay")?.addEventListener("click", openOverlayWindow);
|
||||
document.getElementById("dashboardTestAudio")?.addEventListener("click", () => {
|
||||
ensureAudioContext();
|
||||
playPassingBeep();
|
||||
if (state.settings.finishVoiceEnabled) {
|
||||
setTimeout(playFinishSiren, 220);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function statCard(label, value, note) {
|
||||
@@ -3984,11 +4034,18 @@ function renderOverlay() {
|
||||
active
|
||||
? `
|
||||
<header class="overlay-header">
|
||||
<div>
|
||||
<div class="overlay-header-main">
|
||||
${branding.logoDataUrl ? `<img class="overlay-logo" src="${escapeHtml(branding.logoDataUrl)}" alt="logo" />` : ""}
|
||||
<p class="overlay-kicker">${escapeHtml(getEventName(active.eventId))}</p>
|
||||
<h1>${escapeHtml(active.name)} • ${escapeHtml(getSessionTypeLabel(active.type))}</h1>
|
||||
<p>${escapeHtml(branding.brandName)} • ${escapeHtml(getStartModeLabel(active.startMode))} • ${escapeHtml(modeLabel)}</p>
|
||||
<div class="overlay-header-copy">
|
||||
<div class="overlay-kicker-row">
|
||||
<p class="overlay-kicker">${escapeHtml(getEventName(active.eventId))}</p>
|
||||
<span class="pill">${escapeHtml(getSessionTypeLabel(active.type))}</span>
|
||||
<span class="pill">${escapeHtml(getStartModeLabel(active.startMode))}</span>
|
||||
<span class="pill">${escapeHtml(modeLabel)}</span>
|
||||
</div>
|
||||
<h1>${escapeHtml(active.name)}</h1>
|
||||
<p class="overlay-header-sub">${escapeHtml(branding.brandName || "JMK RB Live Event")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overlay-meta">
|
||||
<button id="overlayFullscreen" class="btn overlay-fullscreen-btn" type="button">${t("overlay.fullscreen")}</button>
|
||||
@@ -4414,7 +4471,7 @@ function renderSettings() {
|
||||
dom.view.innerHTML = `
|
||||
<section class="panel">
|
||||
<div class="panel-header"><h3>${t("settings.decoder")}</h3></div>
|
||||
<form id="settingsForm" class="panel-body form-grid cols-5">
|
||||
<form id="settingsForm" class="panel-body form-grid cols-3">
|
||||
<input name="wsUrl" value="${escapeHtml(state.settings.wsUrl)}" placeholder="ws://127.0.0.1:9000" />
|
||||
<input name="backendUrl" value="${escapeHtml(
|
||||
state.settings.backendUrl || getDefaultBackendUrl()
|
||||
@@ -4423,50 +4480,59 @@ function renderSettings() {
|
||||
<input type="checkbox" name="autoReconnect" ${state.settings.autoReconnect ? "checked" : ""} />
|
||||
<span>${t("settings.auto_reconnect")}</span>
|
||||
</label>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" name="audioEnabled" ${state.settings.audioEnabled ? "checked" : ""} />
|
||||
<span>${t("settings.audio_enabled")}</span>
|
||||
</label>
|
||||
<select name="passingSoundMode">
|
||||
<option value="off" ${state.settings.passingSoundMode === "off" ? "selected" : ""}>${t("settings.passing_sound_off")}</option>
|
||||
<option value="beep" ${state.settings.passingSoundMode === "beep" ? "selected" : ""}>${t("settings.passing_sound_beep")}</option>
|
||||
<option value="name" ${state.settings.passingSoundMode === "name" ? "selected" : ""}>${t("settings.passing_sound_name")}</option>
|
||||
</select>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" name="finishVoiceEnabled" ${state.settings.finishVoiceEnabled ? "checked" : ""} />
|
||||
<span>${t("settings.finish_voice")}</span>
|
||||
</label>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" name="speakerPassingCueEnabled" ${state.settings.speakerPassingCueEnabled ? "checked" : ""} />
|
||||
<span>${t("settings.speaker_passing_cue")}</span>
|
||||
</label>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" name="speakerLeaderCueEnabled" ${state.settings.speakerLeaderCueEnabled ? "checked" : ""} />
|
||||
<span>${t("settings.speaker_leader_cue")}</span>
|
||||
</label>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" name="speakerFinishCueEnabled" ${state.settings.speakerFinishCueEnabled ? "checked" : ""} />
|
||||
<span>${t("settings.speaker_finish_cue")}</span>
|
||||
</label>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" name="speakerBestLapCueEnabled" ${state.settings.speakerBestLapCueEnabled ? "checked" : ""} />
|
||||
<span>${t("settings.speaker_bestlap_cue")}</span>
|
||||
</label>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" name="speakerTop3CueEnabled" ${state.settings.speakerTop3CueEnabled ? "checked" : ""} />
|
||||
<span>${t("settings.speaker_top3_cue")}</span>
|
||||
</label>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" name="speakerSessionStartCueEnabled" ${state.settings.speakerSessionStartCueEnabled ? "checked" : ""} />
|
||||
<span>${t("settings.speaker_start_cue")}</span>
|
||||
</label>
|
||||
<button class="btn btn-primary" type="submit">${t("settings.save")}</button>
|
||||
<button id="settingsConnect" class="btn" type="button">${t("settings.connect_now")}</button>
|
||||
</form>
|
||||
<div class="panel-body">
|
||||
<p>${t("settings.expected_json")}: <code>{"msg":"PASSING", "transponder":232323, "rtc_time":"..."}</code></p>
|
||||
<p>${t("settings.audio_note")}</p>
|
||||
<p class="hint">${t("dashboard.live_note")}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel mt-16">
|
||||
<div class="panel-header"><h3>${t("settings.audio")}</h3></div>
|
||||
<div class="panel-body form-grid cols-4">
|
||||
<label class="toggle">
|
||||
<input type="checkbox" name="audioEnabled" form="settingsForm" ${state.settings.audioEnabled ? "checked" : ""} />
|
||||
<span>${t("settings.audio_enabled")}</span>
|
||||
</label>
|
||||
<select name="passingSoundMode" form="settingsForm">
|
||||
<option value="off" ${state.settings.passingSoundMode === "off" ? "selected" : ""}>${t("settings.passing_sound_off")}</option>
|
||||
<option value="beep" ${state.settings.passingSoundMode === "beep" ? "selected" : ""}>${t("settings.passing_sound_beep")}</option>
|
||||
<option value="name" ${state.settings.passingSoundMode === "name" ? "selected" : ""}>${t("settings.passing_sound_name")}</option>
|
||||
</select>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" name="finishVoiceEnabled" form="settingsForm" ${state.settings.finishVoiceEnabled ? "checked" : ""} />
|
||||
<span>${t("settings.finish_voice")}</span>
|
||||
</label>
|
||||
<button id="settingsTestAudio" class="btn" type="button">${t("settings.test_audio")}</button>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" name="speakerPassingCueEnabled" form="settingsForm" ${state.settings.speakerPassingCueEnabled ? "checked" : ""} />
|
||||
<span>${t("settings.speaker_passing_cue")}</span>
|
||||
</label>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" name="speakerLeaderCueEnabled" form="settingsForm" ${state.settings.speakerLeaderCueEnabled ? "checked" : ""} />
|
||||
<span>${t("settings.speaker_leader_cue")}</span>
|
||||
</label>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" name="speakerFinishCueEnabled" form="settingsForm" ${state.settings.speakerFinishCueEnabled ? "checked" : ""} />
|
||||
<span>${t("settings.speaker_finish_cue")}</span>
|
||||
</label>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" name="speakerBestLapCueEnabled" form="settingsForm" ${state.settings.speakerBestLapCueEnabled ? "checked" : ""} />
|
||||
<span>${t("settings.speaker_bestlap_cue")}</span>
|
||||
</label>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" name="speakerTop3CueEnabled" form="settingsForm" ${state.settings.speakerTop3CueEnabled ? "checked" : ""} />
|
||||
<span>${t("settings.speaker_top3_cue")}</span>
|
||||
</label>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" name="speakerSessionStartCueEnabled" form="settingsForm" ${state.settings.speakerSessionStartCueEnabled ? "checked" : ""} />
|
||||
<span>${t("settings.speaker_start_cue")}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>${t("settings.audio_note")}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user