From a4a40454aa47df2938db9749358fa683906cff07 Mon Sep 17 00:00:00 2001 From: larssand Date: Thu, 26 Mar 2026 19:48:53 +0100 Subject: [PATCH] Extract event and race workspace markup into module --- src/app.js | 144 ++++++--------------------------------------- src/event_views.js | 143 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 160 insertions(+), 127 deletions(-) create mode 100644 src/event_views.js diff --git a/src/app.js b/src/app.js index 65e63f9..ea58f27 100644 --- a/src/app.js +++ b/src/app.js @@ -12,6 +12,7 @@ import { renderDashboardView, renderClassesView, renderDriversView, renderCarsVi import { renderGuideView, renderOverlayPageView } from "./misc_views.js"; import { getSessionsForEventHelper, getModeLabelHelper, normalizeStartModeHelper, getStartModeLabelHelper, getClassNameHelper, getEventNameHelper, renderAssignmentListView, renderSessionsTableView } from "./event_common.js"; +import { renderEventWorkspaceMarkup } from "./event_views.js"; import { createDefaultAmmcConfigHelper, getManagedWsUrlHelper, loadAmmcConfigFromBackendHelper, saveAmmcConfigToBackendHelper, refreshAmmcStatusHelper, startManagedAmmcHelper, stopManagedAmmcHelper, applyPersistedStateHelper, hydrateFromBackendHelper, scheduleBackendSyncHelper, syncStateToBackendHelper, pingBackendHelper, checkAppVersionHelper, startAppVersionPollingHelper, startOverlaySyncHelper, startOverlayRotationHelper, startOverlayLiveRefreshHelper, ensureAudioContextHelper, playPassingBeepHelper, playFinishSirenHelper, playLeaderCueHelper, playStartCueHelper, playBestLapCueHelper, pushOverlayEventHelper, speakTextHelper, announcePassingHelper, announceRaceFinishedHelper, handleSessionTimerTickHelper, tickClockHelper } from "./runtime_services.js"; import { connectDecoderHelper, disconnectDecoderHelper, processDecoderMessageHelper } from "./decoder_runtime.js"; @@ -2815,135 +2816,24 @@ function renderEventWorkspace(mode) { ensureRaceWizardDraft(); } const filteredEvents = state.events.filter((event) => event.mode === mode); - const classOptions = state.classes - .map((c) => ``) - .join(""); - const wizardClassOptions = state.classes - .map((c) => ``) - .join(""); const editingEvent = filteredEvents.find((event) => event.id === selectedEventEditId) || null; - dom.view.innerHTML = ` -
-

${t(isRaceMode ? "events.create_race" : "events.create")}

-
-

${t(isRaceMode ? "events.race_only_intro" : "events.track_only_intro")}

- ${isRaceMode ? `

${t("events.wizard_hint")}

` : ""} -
- ${ - isRaceMode - ? ` -
- ${renderRaceWizardStepsView()} -
-
- ${renderRaceWizardContentView(raceWizardDraft, wizardClassOptions, getDriversForClass(raceWizardDraft.classId), getRaceWizardPreset(raceWizardDraft.presetId))} -
-
- -
- ${raceWizardStep > 1 ? `` : ""} - ${raceWizardStep < 4 ? `` : ``} -
-
- ` - : ` -
- - - -
- -
-
- ` - } -
- -
-

${t(isRaceMode ? "events.race_title" : "events.title")}

-
- ${renderTable( - [t("table.name"), t("table.date"), t("table.class"), t("table.mode"), t("events.sessions"), t("events.actions")], - filteredEvents.map((e) => { - const sessions = getSessionsForEvent(e.id); - return ` - - ${escapeHtml(e.name)} - ${escapeHtml(e.date)} - ${escapeHtml(getClassName(e.classId))} - ${getModeLabel(e.mode)} - ${sessions.length} - - - - - - - `; - }) - )} -
-
- -
- - ${ - editingEvent - ? ` - - ` - : "" - } - `; + dom.view.innerHTML = renderEventWorkspaceMarkup(mode, { + state, + t, + escapeHtml, + renderTable, + renderRaceWizardStepsView, + renderRaceWizardContentView, + raceWizardDraft, + raceWizardStep, + getDriversForClass, + getRaceWizardPreset, + getSessionsForEvent, + getClassName, + getModeLabel, + editingEvent, + }); if (isRaceMode) { const persistWizardStepOne = () => { diff --git a/src/event_views.js b/src/event_views.js new file mode 100644 index 0000000..1ec400f --- /dev/null +++ b/src/event_views.js @@ -0,0 +1,143 @@ +export function renderEventWorkspaceMarkup(mode, deps) { + const { + state, + t, + escapeHtml, + renderTable, + renderRaceWizardStepsView, + renderRaceWizardContentView, + raceWizardDraft, + raceWizardStep, + getDriversForClass, + getRaceWizardPreset, + getSessionsForEvent, + getClassName, + getModeLabel, + editingEvent, + } = deps; + const isRaceMode = mode === "race"; + const filteredEvents = state.events.filter((event) => event.mode === mode); + const classOptions = state.classes.map((c) => ``).join(""); + const wizardClassOptions = state.classes + .map((c) => ``) + .join(""); + + return ` +
+

${t(isRaceMode ? "events.create_race" : "events.create")}

+
+

${t(isRaceMode ? "events.race_only_intro" : "events.track_only_intro")}

+ ${isRaceMode ? `

${t("events.wizard_hint")}

` : ""} +
+ ${ + isRaceMode + ? ` +
+ ${renderRaceWizardStepsView()} +
+
+ ${renderRaceWizardContentView(raceWizardDraft, wizardClassOptions, getDriversForClass(raceWizardDraft.classId), getRaceWizardPreset(raceWizardDraft.presetId))} +
+
+ +
+ ${raceWizardStep > 1 ? `` : ""} + ${raceWizardStep < 4 ? `` : ``} +
+
+ ` + : ` +
+ + + +
+ +
+
+ ` + } +
+ +
+

${t(isRaceMode ? "events.race_title" : "events.title")}

+
+ ${renderTable( + [t("table.name"), t("table.date"), t("table.class"), t("table.mode"), t("events.sessions"), t("events.actions")], + filteredEvents.map((e) => { + const sessions = getSessionsForEvent(e.id); + return ` + + ${escapeHtml(e.name)} + ${escapeHtml(e.date)} + ${escapeHtml(getClassName(e.classId))} + ${getModeLabel(e.mode)} + ${sessions.length} + + + + + + + `; + }) + )} +
+
+ +
+ + ${ + editingEvent + ? ` + + ` + : "" + } + `; +}