[feat](trx-frontend-http): align scheduler entry form with bookmark modal

Replace the inline always-visible add-row with a modal overlay (same fixed + blurred-backdrop pattern as the bookmark add/edit form). The "+ Add Entry" button opens the modal; each row now has Edit and Remove buttons. Edit pre-fills the modal and updates the entry in-place on save. CSS reuses the existing bookmark modal selectors rather than duplicating rules. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Stanislaw Grams <stanislawgrams@gmail.com>
2026-03-17 01:40:37 +01:00
parent fc423d9958
commit 8da4c49d1d
3 changed files with 159 additions and 90 deletions
@@ -850,40 +850,50 @@
              </label>
              <small style="color:var(--text-muted);align-self:flex-end;padding-bottom:0.35rem;">When multiple entries overlap, spend this many minutes at each before cycling. Leave blank to disable.</small>
            </div>
+            <button id="scheduler-ts-add-btn" class="sch-write" type="button" style="margin-bottom:0.75rem;">+ Add Entry</button>
            <table class="sch-ts-table">
              <thead>
                <tr><th>Start</th><th>End</th><th>Center freq</th><th>Primary bookmark</th><th>Extra channels</th><th>Label</th><th>Interleave (min)</th><th></th></tr>
              </thead>
              <tbody id="scheduler-ts-tbody"></tbody>
            </table>
-            <div class="sch-row sch-add-row">
-              <label class="sch-label">Start (UTC)
-                <input type="time" id="scheduler-ts-start" class="status-input" title="Set both to 00:00 for all-day" />
-              </label>
-              <label class="sch-label">End (UTC)
-                <input type="time" id="scheduler-ts-end" class="status-input" title="Set both to 00:00 for all-day" />
-              </label>
-              <label class="sch-label" id="scheduler-ts-center-hz-wrap" title="SDR only — sets center frequency before tuning">Center freq (Hz, SDR)
-                <input type="number" id="scheduler-ts-center-hz" class="status-input" min="0" placeholder="optional" style="width:9rem;" />
-              </label>
-              <label class="sch-label">Primary bookmark
-                <select id="scheduler-ts-bookmark" class="status-input" aria-label="Entry bookmark"></select>
-              </label>
-              <label class="sch-label">Extra channels (virtual)
-                <div id="scheduler-ts-extra-bm-list" class="sch-extra-bm-list"></div>
-                <div style="display:flex;gap:0.4rem;margin-top:0.3rem;">
-                  <select id="scheduler-ts-extra-bm-pick" class="status-input" aria-label="Extra bookmark"></select>
-                  <button id="scheduler-ts-extra-bm-add" type="button" class="sch-write" style="padding:0 0.7rem;">+</button>
-                </div>
-              </label>
-              <label class="sch-label">Label (optional)
-                <input type="text" id="scheduler-ts-label" class="status-input" placeholder="e.g. 40m FT8" />
-              </label>
-              <label class="sch-label">Interleave (min, optional)
-                <input type="number" id="scheduler-ts-entry-interleave" class="status-input" min="1" max="60" placeholder="default" style="width:6rem;" />
-              </label>
-              <button id="scheduler-ts-add-btn" class="sch-write" type="button">+ Add</button>
-            </div>
+          </div>
+
+          <div id="sch-entry-form-wrap" style="display:none;">
+            <form id="sch-entry-form" class="bm-form">
+              <div class="bm-form-title" id="sch-entry-form-title">Add Entry</div>
+              <div class="bm-form-grid">
+                <label class="bm-label">Start (UTC)
+                  <input type="time" id="scheduler-ts-start" class="status-input" title="Set both to 00:00 for all-day" />
+                </label>
+                <label class="bm-label">End (UTC)
+                  <input type="time" id="scheduler-ts-end" class="status-input" title="Set both to 00:00 for all-day" />
+                </label>
+                <label class="bm-label" id="scheduler-ts-center-hz-wrap" title="SDR only — sets center frequency before tuning">Center freq (Hz, SDR)
+                  <input type="number" id="scheduler-ts-center-hz" class="status-input" min="0" placeholder="optional" />
+                </label>
+                <label class="bm-label">Primary bookmark
+                  <select id="scheduler-ts-bookmark" class="status-input" aria-label="Entry bookmark"></select>
+                </label>
+                <label class="bm-label bm-label-wide">Extra channels (virtual)
+                  <div id="scheduler-ts-extra-bm-list" class="sch-extra-bm-list"></div>
+                  <div style="display:flex;gap:0.4rem;margin-top:0.3rem;">
+                    <select id="scheduler-ts-extra-bm-pick" class="status-input" aria-label="Extra bookmark"></select>
+                    <button id="scheduler-ts-extra-bm-add" type="button" class="sch-write" style="padding:0 0.7rem;">+</button>
+                  </div>
+                </label>
+                <label class="bm-label">Label (optional)
+                  <input type="text" id="scheduler-ts-label" class="status-input" placeholder="e.g. 40m FT8" />
+                </label>
+                <label class="bm-label">Interleave (min, optional)
+                  <input type="number" id="scheduler-ts-entry-interleave" class="status-input" min="1" max="60" placeholder="default" />
+                </label>
+              </div>
+              <div class="bm-form-actions">
+                <button type="submit" class="bm-save-btn">Save</button>
+                <button type="button" id="sch-entry-form-cancel">Cancel</button>
+              </div>
+            </form>
          </div>

          <!-- Actions -->
@@ -18,6 +18,7 @@
  let statusInterval = null;
  let interleaveTicker = null;
  let schedulerStepPending = false;
+  let schEntryEditIdx = null;     // null = adding, number = editing that index

  // -------------------------------------------------------------------------
  // Init
@@ -443,6 +444,100 @@
    return hz + " Hz";
  }

+  // -------------------------------------------------------------------------
+  // Entry form (modal — mirrors bookmark add/edit modal)
+  // -------------------------------------------------------------------------
+  function schOpenEntryForm(entry, idx) {
+    schEntryEditIdx = (idx != null) ? idx : null;
+
+    const titleEl = document.getElementById("sch-entry-form-title");
+    if (titleEl) titleEl.textContent = entry ? "Edit Entry" : "Add Entry";
+
+    const startEl = document.getElementById("scheduler-ts-start");
+    const endEl = document.getElementById("scheduler-ts-end");
+    const bmEl = document.getElementById("scheduler-ts-bookmark");
+    const labelEl = document.getElementById("scheduler-ts-label");
+    const ilEl = document.getElementById("scheduler-ts-entry-interleave");
+    const centerHzEl = document.getElementById("scheduler-ts-center-hz");
+
+    if (startEl) startEl.value = entry ? minToHHMM(entry.start_min) : "";
+    if (endEl) endEl.value = entry ? minToHHMM(entry.end_min) : "";
+    if (bmEl) bmEl.value = entry ? (entry.bookmark_id || "") : "";
+    if (labelEl) labelEl.value = entry ? (entry.label || "") : "";
+    if (ilEl) ilEl.value = entry && entry.interleave_min ? entry.interleave_min : "";
+    if (centerHzEl) centerHzEl.value = entry && entry.center_hz ? entry.center_hz : "";
+
+    pendingExtraBmIds = entry && Array.isArray(entry.bookmark_ids) ? entry.bookmark_ids.slice() : [];
+    renderExtraBmList();
+
+    const wrap = document.getElementById("sch-entry-form-wrap");
+    if (wrap) {
+      wrap.style.display = "flex";
+      if (startEl) startEl.focus();
+    }
+  }
+
+  function schCloseEntryForm() {
+    const wrap = document.getElementById("sch-entry-form-wrap");
+    if (wrap) wrap.style.display = "none";
+    schEntryEditIdx = null;
+    pendingExtraBmIds = [];
+  }
+
+  function schEntryFormSubmit(e) {
+    e.preventDefault();
+
+    const startEl = document.getElementById("scheduler-ts-start");
+    const endEl = document.getElementById("scheduler-ts-end");
+    const bmEl = document.getElementById("scheduler-ts-bookmark");
+    const labelEl = document.getElementById("scheduler-ts-label");
+    const ilEl = document.getElementById("scheduler-ts-entry-interleave");
+    const centerHzEl = document.getElementById("scheduler-ts-center-hz");
+    if (!startEl || !endEl || !bmEl) return;
+
+    const bmId = bmEl.value;
+    if (!bmId) {
+      alert("Please select a primary bookmark.");
+      return;
+    }
+
+    const startMin = hhmmToMin(startEl.value);
+    const endMin = hhmmToMin(endEl.value);
+    const label = labelEl ? labelEl.value.trim() : "";
+    const ilVal = ilEl ? parseInt(ilEl.value, 10) : NaN;
+    const entryInterleave = !isNaN(ilVal) && ilVal > 0 ? ilVal : null;
+    const centerHzRaw = centerHzEl ? parseInt(centerHzEl.value, 10) : NaN;
+    const centerHz = !isNaN(centerHzRaw) && centerHzRaw > 0 ? centerHzRaw : null;
+    const extraBmIds = pendingExtraBmIds.slice();
+
+    if (!currentConfig) {
+      currentConfig = { rig_id: currentRigId, mode: "time_span", entries: [] };
+    }
+    if (!currentConfig.entries) currentConfig.entries = [];
+
+    const entryData = {
+      start_min: startMin,
+      end_min: endMin,
+      bookmark_id: bmId,
+      label: label || null,
+      interleave_min: entryInterleave,
+      center_hz: centerHz,
+      bookmark_ids: extraBmIds,
+    };
+
+    if (schEntryEditIdx !== null) {
+      const existing = currentConfig.entries[schEntryEditIdx];
+      entryData.id = existing ? existing.id : ("ts_" + Date.now().toString(36));
+      currentConfig.entries[schEntryEditIdx] = entryData;
+    } else {
+      entryData.id = "ts_" + Date.now().toString(36);
+      currentConfig.entries.push(entryData);
+    }
+
+    schCloseEntryForm();
+    renderTimespanEntries();
+  }
+
  // -------------------------------------------------------------------------
  // TimeSpan entries table
  // -------------------------------------------------------------------------
@@ -471,9 +566,19 @@
        '<td>' + extraCell + '</td>' +
        '<td>' + escHtml(entry.label || "") + '</td>' +
        '<td>' + il + '</td>' +
-        '<td><button class="sch-write sch-remove-btn" data-idx="' + idx + '" type="button">Remove</button></td>';
+        '<td>' +
+          '<button class="sch-write sch-edit-btn" data-idx="' + idx + '" type="button">Edit</button>' +
+          '<button class="sch-write sch-remove-btn" data-idx="' + idx + '" type="button">Remove</button>' +
+        '</td>';
      tbody.appendChild(tr);
    });
+    tbody.querySelectorAll(".sch-edit-btn").forEach(function (btn) {
+      btn.addEventListener("click", function () {
+        const i = parseInt(btn.dataset.idx, 10);
+        const entry = currentConfig && currentConfig.entries ? currentConfig.entries[i] : null;
+        if (entry) schOpenEntryForm(entry, i);
+      });
+    });
    tbody.querySelectorAll(".sch-remove-btn").forEach(function (btn) {
      btn.addEventListener("click", function () {
        removeEntry(parseInt(btn.dataset.idx, 10));
@@ -550,62 +655,6 @@
    renderTimespanEntries();
  }

-  // -------------------------------------------------------------------------
-  // Add entry
-  // -------------------------------------------------------------------------
-  function addEntry() {
-    const startEl = document.getElementById("scheduler-ts-start");
-    const endEl = document.getElementById("scheduler-ts-end");
-    const bmEl = document.getElementById("scheduler-ts-bookmark");
-    const labelEl = document.getElementById("scheduler-ts-label");
-    const ilEl = document.getElementById("scheduler-ts-entry-interleave");
-    const centerHzEl = document.getElementById("scheduler-ts-center-hz");
-    if (!startEl || !endEl || !bmEl) return;
-
-    const startMin = hhmmToMin(startEl.value);
-    const endMin = hhmmToMin(endEl.value);
-    const bmId = bmEl.value;
-    const label = labelEl ? labelEl.value.trim() : "";
-    const ilVal = ilEl ? parseInt(ilEl.value, 10) : NaN;
-    const entryInterleave = !isNaN(ilVal) && ilVal > 0 ? ilVal : null;
-    const centerHzRaw = centerHzEl ? parseInt(centerHzEl.value, 10) : NaN;
-    const centerHz = !isNaN(centerHzRaw) && centerHzRaw > 0 ? centerHzRaw : null;
-    const extraBmIds = pendingExtraBmIds.slice();
-
-    if (!bmId) {
-      alert("Please select a primary bookmark.");
-      return;
-    }
-
-    if (!currentConfig) {
-      currentConfig = { rig_id: currentRigId, mode: "time_span", entries: [] };
-    }
-    if (!currentConfig.entries) currentConfig.entries = [];
-
-    const id = "ts_" + Date.now().toString(36);
-    currentConfig.entries.push({
-      id,
-      start_min: startMin,
-      end_min: endMin,
-      bookmark_id: bmId,
-      label: label || null,
-      interleave_min: entryInterleave,
-      center_hz: centerHz,
-      bookmark_ids: extraBmIds,
-    });
-
-    startEl.value = "";
-    endEl.value = "";
-    bmEl.value = "";
-    if (labelEl) labelEl.value = "";
-    if (ilEl) ilEl.value = "";
-    if (centerHzEl) centerHzEl.value = "";
-    pendingExtraBmIds = [];
-    renderExtraBmList();
-
-    renderTimespanEntries();
-  }
-
  // -------------------------------------------------------------------------
  // Save
  // -------------------------------------------------------------------------
@@ -720,7 +769,13 @@
    if (resetBtn) resetBtn.addEventListener("click", resetScheduler);

    const addBtn = document.getElementById("scheduler-ts-add-btn");
-    if (addBtn) addBtn.addEventListener("click", addEntry);
+    if (addBtn) addBtn.addEventListener("click", function () { schOpenEntryForm(null, null); });
+
+    const entryForm = document.getElementById("sch-entry-form");
+    if (entryForm) entryForm.addEventListener("submit", schEntryFormSubmit);
+
+    const cancelBtn = document.getElementById("sch-entry-form-cancel");
+    if (cancelBtn) cancelBtn.addEventListener("click", schCloseEntryForm);

    const prevBtn = document.getElementById("scheduler-prev-btn");
    if (prevBtn) prevBtn.addEventListener("click", function () {
@@ -3426,7 +3426,8 @@ button:focus-visible, input:focus-visible, select:focus-visible {
  white-space: nowrap;
 }

-#bm-form-wrap {
+#bm-form-wrap,
+#sch-entry-form-wrap {
  position: fixed;
  inset: 0;
  z-index: 120;
@@ -3492,7 +3493,8 @@ button:focus-visible, input:focus-visible, select:focus-visible {
 }

 .bm-save-btn,
-#bm-form-cancel {
+#bm-form-cancel,
+#sch-entry-form-cancel {
  background: var(--accent-green);
  color: #fff;
  border: none;
@@ -3503,11 +3505,13 @@ button:focus-visible, input:focus-visible, select:focus-visible {
 }

 .bm-save-btn:hover,
-#bm-form-cancel:hover {
+#bm-form-cancel:hover,
+#sch-entry-form-cancel:hover {
  opacity: 0.88;
 }

-#bm-form-cancel {
+#bm-form-cancel,
+#sch-entry-form-cancel {
  background: var(--btn-bg);
  color: var(--text);
  border: 1px solid var(--btn-border);