fixa dok och helper i event

src/app.js

@@ -108,6 +108,12 @@ const TRANSLATIONS = {
     "events.create": "Skapa event",
     "events.create_race": "Skapa race",
     "events.name_placeholder": "Eventnamn",
+    "events.field_name": "Eventnamn",
+    "events.field_name_hint": "Namnet som visas i listor, overlay och resultat.",
+    "events.field_date": "Datum",
+    "events.field_date_hint": "Tävlings- eller eventdatum för planering och sortering.",
+    "events.field_class": "Klass",
+    "events.field_class_hint": "Den klass som eventet eller sponsorupplägget tillhör.",
     "events.add": "Lägg till event",
     "events.add_race": "Lägg till race",
     "events.mode_race_option": "Race (förare med egen transponder)",
@@ -891,6 +897,12 @@ const TRANSLATIONS = {
     "events.create": "Create Event",
     "events.create_race": "Create Race",
     "events.name_placeholder": "Event name",
+    "events.field_name": "Event name",
+    "events.field_name_hint": "Name shown in lists, overlays and results.",
+    "events.field_date": "Date",
+    "events.field_date_hint": "Event or race date used for planning and sorting.",
+    "events.field_class": "Class",
+    "events.field_class_hint": "Class used for this event or sponsor format.",
     "events.add": "Add Event",
     "events.add_race": "Add Race",
     "events.mode_race_option": "Race (driver transponders)",
@@ -3903,10 +3915,24 @@ function renderEventWorkspace(mode) {
           `
           : `
             <form id="eventForm" class="panel-body form-grid cols-4">
-              <input required name="name" placeholder="${t("events.name_placeholder")}" />
+              <label>
-              <input required type="date" name="date" />
+                ${t("events.field_name")}
-              <select name="classId">${classOptions}</select>
+                <input required name="name" placeholder="${t("events.name_placeholder")}" />
-              <button class="btn btn-primary" type="submit">${t("events.add")}</button>
+                <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>
           `
       }
@@ -3950,16 +3976,28 @@ function renderEventWorkspace(mode) {
                   <button class="btn" id="eventEditCancel">${t("common.cancel")}</button>
                 </div>
                 <form id="eventEditForm" class="panel-body form-grid cols-3">
-                  <input name="name" required value="${escapeHtml(editingEvent.name)}" placeholder="${t("events.name_placeholder")}" />
+                  <label>
-                  <input name="date" required type="date" value="${escapeHtml(editingEvent.date || "")}" />
+                    ${t("events.field_name")}
-                  <select name="classId">
+                    <input name="name" required value="${escapeHtml(editingEvent.name)}" placeholder="${t("events.name_placeholder")}" />
-                    ${state.classes
+                    <small>${t("events.field_name_hint")}</small>
-                      .map(
+                  </label>
-                        (item) =>
+                  <label>
-                          `<option value="${item.id}" ${item.id === editingEvent.classId ? "selected" : ""}>${escapeHtml(item.name)}</option>`
+                    ${t("events.field_date")}
-                      )
+                    <input name="date" required type="date" value="${escapeHtml(editingEvent.date || "")}" />
-                      .join("")}
+                    <small>${t("events.field_date_hint")}</small>
-                  </select>
+                  </label>
+                  <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>

src/styles.css

@@ -2281,3 +2281,7 @@ select:focus {
 .overlay-obs-tower-trail span {
   display: inline-block;
 }
+
+.align-end {
+  align-self: end;
+}