Live_RC/src/event_views.js

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) => `<option value="${c.id}">${escapeHtml(c.name)}</option>`).join("");
  const wizardClassOptions = state.classes
    .map((c) => `<option value="${c.id}" ${c.id === raceWizardDraft?.classId ? "selected" : ""}>${escapeHtml(c.name)}</option>`)
    .join("");

  return `
    ${
      isRaceMode
        ? `
          <section class="panel open-practice-quickstart">
            <div class="panel-header panel-header-with-pill">
              <div>
                <h3>${t("events.quick_open_practice_title")}</h3>
                <p class="hint">${t("events.quick_open_practice_intro")}</p>
              </div>
              <span class="pill pill-green">${t("events.open_practice_untimed")}</span>
            </div>
            <div class="panel-body open-practice-quickstart-body">
              <div class="open-practice-benefits">
                <span>${t("events.open_practice_all_transponders")}</span>
                <span>${t("events.open_practice_no_registration")}</span>
                <span>${t("events.open_practice_until_stopped")}</span>
              </div>
              <form id="quickOpenPracticeForm" class="open-practice-quickstart-form">
                <label>
                  ${t("events.session_name")}
                  <input name="name" required value="${escapeHtml(t("events.quick_open_practice_default"))}" />
                </label>
                <button class="btn btn-primary" type="submit">${t("events.quick_open_practice_create")}</button>
              </form>
            </div>
          </section>
        `
        : ""
    }

    <section class="panel">
      <div class="panel-header"><h3>${t(isRaceMode ? "events.create_competition_race" : "events.create")}</h3></div>
      <div class="panel-body">
        <p>${t(isRaceMode ? "events.race_only_intro" : "events.track_only_intro")}</p>
        ${isRaceMode ? `<p class="hint">${t("events.wizard_hint")}</p>` : ""}
      </div>
      ${
        isRaceMode
          ? `
            <div class="panel-body race-wizard-steps">
              ${renderRaceWizardStepsView()}
            </div>
            <div class="panel-body">
              ${renderRaceWizardContentView(raceWizardDraft, wizardClassOptions, getDriversForClass(raceWizardDraft.classId), getRaceWizardPreset(raceWizardDraft.presetId))}
            </div>
            <div class="panel-body race-wizard-footer">
              <button id="raceWizardReset" class="btn" type="button">${t("common.reset")}</button>
              <div class="actions-inline">
                ${raceWizardStep > 1 ? `<button id="raceWizardPrev" class="btn" type="button">${t("common.previous")}</button>` : ""}
                ${raceWizardStep < 4 ? `<button id="raceWizardNext" class="btn btn-primary" type="button">${t("common.next")}</button>` : `<button id="raceWizardCreate" class="btn btn-primary" type="button">${t("events.wizard_create")}</button>`}
              </div>
            </div>
          `
          : `
            <form id="eventForm" class="panel-body form-grid cols-4">
              <label>
                ${t("events.field_name")}
                <input required name="name" placeholder="${t("events.name_placeholder")}" />
                <small>${t("events.field_name_hint")}</small>
              </label>
              <label>
                ${t("events.field_date")}
                <input required type="date" name="date" />
                <small>${t("events.field_date_hint")}</small>
              </label>
              <label>
                ${t("events.field_class")}
                <select name="classId">${classOptions}</select>
                <small>${t("events.field_class_hint")}</small>
              </label>
              <div class="actions-inline align-end">
                <button class="btn btn-primary" type="submit">${t("events.add")}</button>
              </div>
            </form>
          `
      }
    </section>

    <section class="panel">
      <div class="panel-header"><h3>${t(isRaceMode ? "events.race_title" : "events.title")}</h3></div>
      <div class="panel-body">
        ${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 `
              <tr>
                <td>${escapeHtml(e.name)}</td>
                <td>${escapeHtml(e.date)}</td>
                <td>${e.raceConfig?.practiceOnly ? escapeHtml(t("events.open_practice_all_transponders")) : escapeHtml(getClassName(e.classId))}</td>
                <td>${e.raceConfig?.practiceOnly ? escapeHtml(t("events.quick_open_practice_title")) : getModeLabel(e.mode)}</td>
                <td>${sessions.length}</td>
                <td class="actions-inline">
                  <button id="event-edit-${e.id}" class="btn">${t("events.edit")}</button>
                  ${
                    e.raceConfig?.practiceOnly
                      ? `<button id="event-timing-${e.id}" class="btn btn-primary">${t("events.open_timing")}</button>`
                      : `<button id="event-manage-${e.id}" class="btn">${t("events.manage")}</button>`
                  }
                  <button id="event-delete-${e.id}" class="btn btn-danger">${t("common.delete")}</button>
                </td>
              </tr>
            `;
          })
        )}
      </div>
    </section>

    <section id="eventManageArea"></section>

    ${
      editingEvent
        ? `
            <div class="modal-overlay" id="eventEditModalOverlay">
              <div class="modal-card">
                <div class="panel-header">
                  <h3>${t("common.edit")}</h3>
                  <button class="btn" id="eventEditCancel">${t("common.cancel")}</button>
                </div>
                <form id="eventEditForm" class="panel-body form-grid cols-3">
                  <label>
                    ${t("events.field_name")}
                    <input name="name" required value="${escapeHtml(editingEvent.name)}" placeholder="${t("events.name_placeholder")}" />
                    <small>${t("events.field_name_hint")}</small>
                  </label>
                  <label>
                    ${t("events.field_date")}
                    <input name="date" required type="date" value="${escapeHtml(editingEvent.date || "")}" />
                    <small>${t("events.field_date_hint")}</small>
                  </label>
                  ${
                    editingEvent.raceConfig?.practiceOnly
                      ? `<input type="hidden" name="classId" value="" />`
                      : `<label>
                          ${t("events.field_class")}
                          <select name="classId">
                            ${state.classes
                              .map((item) => `<option value="${item.id}" ${item.id === editingEvent.classId ? "selected" : ""}>${escapeHtml(item.name)}</option>`)
                              .join("")}
                          </select>
                          <small>${t("events.field_class_hint")}</small>
                        </label>`
                  }
                  <p class="form-error" id="eventEditError" hidden></p>
                  <div class="actions-inline">
                    <button class="btn btn-primary" type="submit">${t("common.save")}</button>
                    <button class="btn" id="eventEditCancelFooter" type="button">${t("common.cancel")}</button>
                  </div>
                </form>
              </div>
            </div>
          `
        : ""
    }
  `;
}