fixrefresh in mbil prof

src/public_training.js

@@ -347,7 +347,19 @@ function renderPaceChart(points) {
   const path = coordinates.map((point) => `${point.x.toFixed(1)},${point.y.toFixed(1)}`).join(" ");
   return `<div class="profile-pace-chart"><svg viewBox="0 0 ${width} ${height}" role="img" aria-label="${escapeHtml(t("paceChart"))}"><polyline class="profile-pace-line" points="${path}" />${coordinates.map((item) => `<circle cx="${item.x.toFixed(1)}" cy="${item.y.toFixed(1)}" r="5"><title>${escapeHtml(item.point.dateKey)}: ${escapeHtml(formatLap(item.point.averageLapMs))}</title></circle>`).join("")}</svg><div class="profile-chart-labels"><span>${escapeHtml(values[0].dateKey)}</span><strong>${escapeHtml(formatLap(values.at(-1).averageLapMs))}</strong><span>${escapeHtml(values.at(-1).dateKey)}</span></div></div>`;
 }
+const markerDrafts = new Map();
+
+function profileIsBeingEdited() {
+  return (root.contains(document.activeElement) && document.activeElement.matches("input, select, textarea"))
+    || Boolean(root.querySelector("#publicTrainingMarkerForm button:disabled"));
+}
+
 function renderProfile(data) {
+  const previousForm = root.querySelector("#publicTrainingMarkerForm");
+  if (previousForm) {
+    const values = new FormData(previousForm);
+    markerDrafts.set(previousForm.dataset.classId, { type: values.get("type"), note: values.get("note") });
+  }
   const openSections = new Set([...root.querySelectorAll("details[data-persist-open][open]")].map((element) => element.dataset.persistOpen));
   profileData = data;
   const { profile, branding } = data;
@@ -531,7 +543,7 @@ function renderProfile(data) {
 
     <details class="profile-card profile-disclosure profile-performance ${visibility.performance ? "" : "is-hidden"}" data-persist-open="performance" ${openSections.has("performance") ? "open" : ""} style="margin-top:14px">
       <summary class="profile-card-head"><h2>${escapeHtml(t("performance"))}</h2><span>+</span></summary>
-      <form id="publicTrainingMarkerForm" class="profile-marker-form">
+      <form id="publicTrainingMarkerForm" class="profile-marker-form" data-class-id="${escapeHtml(selectedClassId)}">
         <div><h3>${escapeHtml(t("markerTitle"))}</h3><p>${escapeHtml(t("markerHint"))}</p></div>
         <label><span>${escapeHtml(t("markerType"))}</span><select name="type"><option value="setup">${escapeHtml(t("markerSetup"))}</option><option value="tires">${escapeHtml(t("markerTires"))}</option><option value="suspension">${escapeHtml(t("markerSuspension"))}</option><option value="car">${escapeHtml(t("markerCar"))}</option><option value="note">${escapeHtml(t("markerNoteType"))}</option></select></label>
         <label><span>${escapeHtml(t("markerNote"))}</span><input name="note" maxlength="160" /></label>
@@ -576,6 +588,12 @@ function renderProfile(data) {
       </div>
     </details>
   `;
+  const markerForm = document.getElementById("publicTrainingMarkerForm");
+  const draft = markerDrafts.get(selectedClassId);
+  if (markerForm && draft) {
+    markerForm.elements.namedItem("type").value = draft.type;
+    markerForm.elements.namedItem("note").value = draft.note;
+  }
   document.getElementById("publicTrainingMarkerForm")?.addEventListener("submit", async (event) => {
     event.preventDefault();
     const form = event.currentTarget;
@@ -770,7 +788,8 @@ function speak(text) {
   window.speechSynthesis.speak(utterance);
 }
 
-async function loadProfile() {
+async function loadProfile(background = false) {
+  if (background && profileIsBeingEdited()) return;
   try {
     const timerState = readTimerState();
     const apiUrl = new URL(`/public-training/api/${encodeURIComponent(shareToken)}`, window.location.origin);
@@ -784,13 +803,16 @@ async function loadProfile() {
     }
     const response = await fetch(apiUrl, { cache: "no-store" });
     if (!response.ok) throw new Error(`HTTP ${response.status}`);
-    renderProfile(await response.json());
+    const data = await response.json();
+    if (background && profileIsBeingEdited()) return;
+    renderProfile(data);
   } catch {
+    if (background && profileData) return;
     root.innerHTML = `<section class="public-training-error"><div class="profile-brand-mark">RC</div><h1>${escapeHtml(t("loadError"))}</h1></section>`;
   }
 }
 
 loadProfile();
 setInterval(() => {
-  if (!document.hidden) loadProfile();
+  if (!document.hidden) loadProfile(true);
 }, 10000);