feat(series): run each round from the series page
Step 3 becomes a rounds table: pick drivers inline (copy from the previous round, add a late entry), set qualifying rounds/finals/max cars per heat per round, see the status, and create qualifying and finals from there. Qualifying heats are now split evenly so nobody drives alone. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
larssand
@@ -62,19 +62,65 @@ function renderSeriesForm(series, { t, escapeHtml, state }) {
|
||||
</form>`;
|
||||
}
|
||||
|
||||
function renderEventPicker(series, { t, escapeHtml, state, getClassName }) {
|
||||
const candidates = state.events
|
||||
.filter((event) => event.mode === "race" && !event.raceConfig?.practiceOnly && (!series.classIds.length || series.classIds.includes(event.classId)))
|
||||
.sort((a, b) => String(a.date || "").localeCompare(String(b.date || "")) || String(getClassName(a.classId)).localeCompare(String(getClassName(b.classId)), undefined, { numeric: true }) || String(a.name).localeCompare(String(b.name)));
|
||||
let expandedRoundId = "";
|
||||
|
||||
function renderRoundParticipants(round, { t, escapeHtml }) {
|
||||
return `
|
||||
<div class="series-event-list">
|
||||
${candidates.length ? candidates.map((event) => `
|
||||
<label class="series-class-row series-event-row ${series.eventIds.includes(event.id) ? "is-selected" : ""}"><input type="checkbox" data-series-event="${escapeHtml(event.id)}" ${series.eventIds.includes(event.id) ? "checked" : ""} />
|
||||
<span class="series-event-date">${escapeHtml(event.date || t("series.no_date"))}</span><strong>${escapeHtml(event.name)}</strong><span class="series-event-class">${escapeHtml(getClassName(event.classId))}</span></label>`).join("")
|
||||
: `<p class="hint">${t("series.no_events")}</p>`}
|
||||
<div class="series-round-participants" data-round-participants="${escapeHtml(round.event.id)}">
|
||||
<div class="series-classes-head"><span>${t("series.round_participants", { count: round.participantIds.length, total: round.classDrivers.length })}</span>
|
||||
<span class="actions-inline">
|
||||
<button class="btn btn-mini" type="button" data-round-action="all">${t("series.classes_all")}</button>
|
||||
<button class="btn btn-mini" type="button" data-round-action="none">${t("series.classes_none")}</button>
|
||||
<button class="btn btn-mini" type="button" data-round-action="copy">${t("series.copy_previous")}</button>
|
||||
</span></div>
|
||||
${round.classDrivers.length ? `<div class="series-class-list">${round.classDrivers.map((driver) => `
|
||||
<label class="series-class-row ${round.participantIds.includes(driver.id) ? "is-selected" : ""}"><input type="checkbox" data-round-driver="${escapeHtml(driver.id)}" ${round.participantIds.includes(driver.id) ? "checked" : ""} /><span>${escapeHtml(driver.name)}${driver.transponder ? ` <small>${escapeHtml(driver.transponder)}</small>` : ""}</span></label>`).join("")}</div>`
|
||||
: `<p class="hint">${t("series.no_class_drivers")}</p>`}
|
||||
<form class="series-add-driver" data-round-add-driver>
|
||||
<input name="name" required placeholder="${escapeHtml(t("series.new_driver_name"))}" />
|
||||
<input name="transponder" placeholder="${escapeHtml(t("drivers.transponder_placeholder"))}" inputmode="numeric" />
|
||||
<button class="btn btn-mini" type="submit">${t("series.add_driver")}</button>
|
||||
</form>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function renderRoundsTable(rounds, { t, escapeHtml }) {
|
||||
if (!rounds.length) return `<p class="hint">${t("series.no_rounds")}</p>`;
|
||||
const number = (round, name, value, min) => `<input class="series-round-number" type="number" min="${min}" name="${name}" value="${value}" ${round.status === "not_started" ? "" : "disabled"} />`;
|
||||
return `
|
||||
<div class="table-wrap"><table class="series-rounds-table">
|
||||
<thead><tr><th>${t("series.col_date")}</th><th>${t("series.col_race")}</th><th>${t("series.col_drivers")}</th><th title="${escapeHtml(t("series.col_qual_hint"))}">${t("series.col_qual_short")}</th><th>${t("series.col_finals")}</th><th>${t("series.col_per_heat")}</th><th>${t("series.col_status")}</th><th></th></tr></thead>
|
||||
<tbody>${rounds.map((round) => {
|
||||
const config = round.event.raceConfig || {};
|
||||
const action = round.status === "not_started"
|
||||
? `<button class="btn btn-primary btn-mini" type="button" data-round-action="qualifying" ${round.participantIds.length ? "" : "disabled"}>${t("series.make_qualifying")}</button>`
|
||||
: round.status === "qual_done" ? `<button class="btn btn-primary btn-mini" type="button" data-round-action="finals">${t("series.make_finals")}</button>` : "";
|
||||
return `
|
||||
<tr data-round="${escapeHtml(round.event.id)}" class="${expandedRoundId === round.event.id ? "is-expanded" : ""}">
|
||||
<td>${escapeHtml(round.event.date || t("series.no_date"))}</td>
|
||||
<td><strong>${escapeHtml(round.event.name)}</strong><br><small>${escapeHtml(round.className)}</small></td>
|
||||
<td><button class="btn btn-mini" type="button" data-round-action="toggle">${round.participantIds.length} ${expandedRoundId === round.event.id ? "▲" : "▼"}</button></td>
|
||||
<td>${number(round, "qualifyingRounds", config.qualifyingRounds || 1, 1)}</td>
|
||||
<td>${number(round, "finalLegs", config.finalLegs || 1, 1)}</td>
|
||||
<td>${number(round, "carsPerHeat", config.carsPerHeat || 8, 2)}</td>
|
||||
<td><span class="pill series-status-${round.status}">${t(`series.status_${round.status}`)}</span>${round.qualHeatCount ? `<br><small>${t("series.heats_made", { heats: round.qualHeatCount })}</small>` : ""}</td>
|
||||
<td><div class="series-round-actions">${action}<button class="btn btn-mini" type="button" data-round-action="open">${t("series.open_race")}</button><button class="btn btn-mini" type="button" data-round-action="remove" title="${escapeHtml(t("series.remove_round"))}">✕</button></div></td>
|
||||
</tr>
|
||||
${expandedRoundId === round.event.id ? `<tr class="series-round-detail"><td colspan="8">${renderRoundParticipants(round, { t, escapeHtml })}</td></tr>` : ""}`;
|
||||
}).join("")}</tbody>
|
||||
</table></div>`;
|
||||
}
|
||||
|
||||
function renderAddExistingRace(series, rounds, { t, escapeHtml, state, getClassName }) {
|
||||
const candidates = state.events
|
||||
.filter((event) => event.mode === "race" && !event.raceConfig?.practiceOnly && !series.eventIds.includes(event.id) && (!series.classIds.length || series.classIds.includes(event.classId)))
|
||||
.sort((a, b) => String(a.date || "").localeCompare(String(b.date || "")));
|
||||
if (!candidates.length) return "";
|
||||
return `
|
||||
<label class="series-add-existing"><span>${t("series.add_existing")}</span>
|
||||
<select data-series-add-existing><option value="">${t("series.add_existing_pick")}</option>${candidates.map((event) => `<option value="${escapeHtml(event.id)}">${escapeHtml(`${event.date || t("series.no_date")} · ${event.name} · ${getClassName(event.classId)}`)}</option>`).join("")}</select></label>`;
|
||||
}
|
||||
|
||||
function renderStandingsTable(table, { t, escapeHtml }) {
|
||||
const head = table.events.map((event, index) => `<th title="${escapeHtml(`${event.date || ""} ${event.name}`)}">${index + 1}</th>`).join("");
|
||||
const cells = (row) => table.events.map((event) => {
|
||||
@@ -95,11 +141,15 @@ function renderStandingsTable(table, { t, escapeHtml }) {
|
||||
}
|
||||
|
||||
export function renderSeriesView(deps) {
|
||||
const { state, dom, t, escapeHtml, saveState, renderView, uid, getClassName, getSeriesStandings, createSeriesEvents, getRaceFormatPresets, exportSeriesPdf, printSeries } = deps;
|
||||
const {
|
||||
state, dom, t, escapeHtml, saveState, renderView, uid, getClassName, getSeriesStandings, createSeriesEvents, getRaceFormatPresets, exportSeriesPdf, printSeries,
|
||||
getSeriesRounds, setSeriesRoundFormat, setSeriesRoundParticipants, copySeriesRoundParticipants, addDriverToSeriesRound, generateSeriesRoundQualifying, generateSeriesRoundFinals, openSeriesRound,
|
||||
} = deps;
|
||||
const list = state.series || [];
|
||||
if (!list.some((item) => item.id === selectedSeriesId)) selectedSeriesId = list[0]?.id || "";
|
||||
const series = list.find((item) => item.id === selectedSeriesId) || null;
|
||||
const tables = series ? getSeriesStandings(series) : [];
|
||||
const rounds = series ? getSeriesRounds(series) : [];
|
||||
|
||||
dom.view.innerHTML = `
|
||||
<section class="panel">
|
||||
@@ -114,13 +164,17 @@ export function renderSeriesView(deps) {
|
||||
<section class="panel mt-16">
|
||||
<div class="panel-header"><div><h3>${t("series.step3", { count: series.eventIds.length })}</h3><p class="hint">${t("series.events_hint")}</p></div></div>
|
||||
<div class="panel-body">
|
||||
${renderEventPicker(series, { t, escapeHtml, state, getClassName })}
|
||||
<form id="seriesCreateEvents" class="form-grid cols-3 settings-grid mt-16">
|
||||
<label><span>${t("series.create_dates")}</span><textarea name="dates" rows="4" placeholder="2026-11-01 2026-11-15 2026-11-29"></textarea><small>${t("series.create_dates_hint")}</small></label>
|
||||
<label><span>${t("events.race_preset")}</span><select name="presetId">${getRaceFormatPresets().map((preset) => `<option value="${escapeHtml(preset.id)}">${escapeHtml(preset.label || preset.name)}</option>`).join("")}</select></label>
|
||||
<form id="seriesCreateEvents" class="series-create">
|
||||
<label><span>${t("series.create_dates")}</span><textarea name="dates" rows="3" placeholder="2026-11-01 2026-11-15 2026-11-29"></textarea><small>${t("series.create_dates_hint")}</small></label>
|
||||
<label><span>${t("series.col_qual")}</span><input type="number" min="1" name="qualifyingRounds" value="3" /></label>
|
||||
<label><span>${t("series.col_finals")}</span><input type="number" min="1" name="finalLegs" value="3" /></label>
|
||||
<label><span>${t("series.col_per_heat")}</span><input type="number" min="2" name="carsPerHeat" value="6" /></label>
|
||||
<label><span>${t("series.base_format")}</span><select name="presetId">${getRaceFormatPresets().map((preset) => `<option value="${escapeHtml(preset.id)}">${escapeHtml(preset.label || preset.name)}</option>`).join("")}</select></label>
|
||||
<div class="series-create-actions"><button class="btn btn-primary" type="submit" ${series.classIds.length ? "" : "disabled"}>${t("series.create_events")}</button></div>
|
||||
</form>
|
||||
${series.classIds.length ? "" : `<p class="hint">${t("series.pick_classes_first")}</p>`}
|
||||
<div class="mt-16">${renderRoundsTable(rounds, { t, escapeHtml })}</div>
|
||||
${renderAddExistingRace(series, rounds, { t, escapeHtml, state, getClassName })}
|
||||
</div>
|
||||
</section>
|
||||
<section class="panel mt-16">
|
||||
@@ -185,20 +239,60 @@ export function renderSeriesView(deps) {
|
||||
saveState();
|
||||
renderView();
|
||||
});
|
||||
dom.view.querySelectorAll("[data-series-event]").forEach((box) => box.addEventListener("change", () => {
|
||||
const id = box.dataset.seriesEvent;
|
||||
series.eventIds = box.checked ? [...new Set([...series.eventIds, id])] : series.eventIds.filter((item) => item !== id);
|
||||
saveState();
|
||||
renderView();
|
||||
}));
|
||||
document.getElementById("seriesCreateEvents")?.addEventListener("submit", (event) => {
|
||||
event.preventDefault();
|
||||
const data = new FormData(event.currentTarget);
|
||||
const dates = String(data.get("dates") || "").split(/[\s,;]+/).map((value) => value.trim()).filter((value) => /^\d{4}-\d{2}-\d{2}$/.test(value));
|
||||
if (!dates.length) { window.alert(t("series.create_dates_invalid")); return; }
|
||||
createSeriesEvents(series, dates, String(data.get("presetId") || "custom"));
|
||||
createSeriesEvents(series, dates, String(data.get("presetId") || "custom"), {
|
||||
qualifyingRounds: data.get("qualifyingRounds"), finalLegs: data.get("finalLegs"), carsPerHeat: data.get("carsPerHeat"),
|
||||
});
|
||||
renderView();
|
||||
});
|
||||
dom.view.querySelector("[data-series-add-existing]")?.addEventListener("change", (event) => {
|
||||
if (!event.target.value) return;
|
||||
series.eventIds = [...new Set([...series.eventIds, event.target.value])];
|
||||
saveState();
|
||||
renderView();
|
||||
});
|
||||
dom.view.querySelectorAll("tr[data-round]").forEach((row) => {
|
||||
const eventId = row.dataset.round;
|
||||
row.querySelectorAll(".series-round-number").forEach((input) => input.addEventListener("change", () => {
|
||||
setSeriesRoundFormat(eventId, { [input.name]: input.value });
|
||||
renderView();
|
||||
}));
|
||||
row.querySelectorAll("[data-round-action]").forEach((button) => button.addEventListener("click", () => {
|
||||
const action = button.dataset.roundAction;
|
||||
if (action === "toggle") expandedRoundId = expandedRoundId === eventId ? "" : eventId;
|
||||
if (action === "open") { openSeriesRound(eventId); return; }
|
||||
if (action === "qualifying" && !generateSeriesRoundQualifying(eventId)) window.alert(t("series.no_participants"));
|
||||
if (action === "finals") generateSeriesRoundFinals(eventId);
|
||||
if (action === "remove") {
|
||||
if (!window.confirm(t("series.remove_round_confirm"))) return;
|
||||
series.eventIds = series.eventIds.filter((id) => id !== eventId);
|
||||
saveState();
|
||||
}
|
||||
renderView();
|
||||
}));
|
||||
});
|
||||
const detail = dom.view.querySelector("[data-round-participants]");
|
||||
if (detail) {
|
||||
const eventId = detail.dataset.roundParticipants;
|
||||
const ticked = () => [...detail.querySelectorAll("[data-round-driver]:checked")].map((box) => box.dataset.roundDriver);
|
||||
detail.querySelectorAll("[data-round-driver]").forEach((box) => box.addEventListener("change", () => { setSeriesRoundParticipants(eventId, ticked()); renderView(); }));
|
||||
detail.querySelectorAll("[data-round-action]").forEach((button) => button.addEventListener("click", () => {
|
||||
const action = button.dataset.roundAction;
|
||||
if (action === "all") setSeriesRoundParticipants(eventId, [...detail.querySelectorAll("[data-round-driver]")].map((box) => box.dataset.roundDriver));
|
||||
if (action === "none") setSeriesRoundParticipants(eventId, []);
|
||||
if (action === "copy" && !copySeriesRoundParticipants(series, eventId)) window.alert(t("series.no_previous_round"));
|
||||
renderView();
|
||||
}));
|
||||
detail.querySelector("[data-round-add-driver]")?.addEventListener("submit", (event) => {
|
||||
event.preventDefault();
|
||||
const data = new FormData(event.currentTarget);
|
||||
if (addDriverToSeriesRound(series, eventId, { name: data.get("name"), transponder: data.get("transponder") })) renderView();
|
||||
});
|
||||
}
|
||||
document.getElementById("seriesPrint")?.addEventListener("click", () => printSeries(series, tables));
|
||||
document.getElementById("seriesPdf")?.addEventListener("click", () => exportSeriesPdf(series, tables));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user