minor optimization

public/css/editor.css

@@ -218,6 +218,12 @@
   min-width: 2.4rem;
 }
 
+.editor-icon-button:disabled,
+.editor-icon-button[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: .45;
+}
+
 .editor-poi-toolbar {
   margin-top: .5rem;
 }

public/index.html

@@ -102,7 +102,7 @@
             <h2 id="editor-entry-title">Strecken verwalten</h2>
             <p>Strecken, Stationen, Bilder und Audiodateien bearbeiten.</p>
           </div>
-          <button id="editor-button" class="editor-button" type="button" aria-label="Streckeneditor öffnen" title="Streckeneditor öffnen">
+          <button id="editor-button" class="editor-button" type="button" aria-label="Streckeneditor öffnen" title="Streckeneditor öffnen" aria-haspopup="dialog" aria-expanded="false" aria-controls="editor-dialog">
             <span aria-hidden="true">+</span>
           </button>
         </section>

public/js/editor-ui.js

@@ -124,6 +124,20 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     if (element) element.hidden = hidden;
   }
 
+  function setExpanded(element, expanded) {
+    if (element) element.setAttribute('aria-expanded', String(expanded));
+  }
+
+  function setDialogExpanded(expanded) {
+    setExpanded(byId(ids.button), expanded);
+  }
+
+  function setDisabled(element, disabled) {
+    if (!element) return;
+    element.disabled = disabled;
+    element.setAttribute('aria-disabled', String(disabled));
+  }
+
   function setStatus(message, isError = false) {
     const status = byId(ids.status);
     if (!status) return;
@@ -247,7 +261,7 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     return child;
   }
 
-  function iconButton(label, symbol, action) {
+  function iconButton(label, symbol, action, disabled = false) {
     const button = document.createElement('button');
     button.className = classes.iconButton;
     button.dataset.editorAction = action;
@@ -255,6 +269,7 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     button.title = label;
     button.type = 'button';
     button.setAttribute('aria-label', label);
+    setDisabled(button, disabled);
     return button;
   }
 
@@ -280,15 +295,16 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     item.className = classes.poiItem;
     item.dataset.poiId = poiId(poi);
 
+    const title = poiTitle(poi);
     const label = document.createElement('div');
-    appendText(label, 'strong', poiTitle(poi));
+    appendText(label, 'strong', title);
     appendText(label, 'small', `Position ${index + 1}`);
 
     const actions = document.createElement('div');
     actions.className = classes.iconRow;
-    actions.appendChild(iconButton('Station nach oben schieben', '↑', 'move-poi-up'));
-    actions.appendChild(iconButton('Station nach unten schieben', '↓', 'move-poi-down'));
-    actions.appendChild(iconButton('Station bearbeiten', '✎', 'edit-poi'));
+    actions.appendChild(iconButton(`${title} nach oben schieben`, '↑', 'move-poi-up', index === 0));
+    actions.appendChild(iconButton(`${title} nach unten schieben`, '↓', 'move-poi-down', index === state.pois.length - 1));
+    actions.appendChild(iconButton(`${title} bearbeiten`, '✎', 'edit-poi'));
 
     item.append(label, actions);
     return item;
@@ -337,6 +353,7 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
       if (typeof dialog.showModal === 'function') dialog.showModal();
       else dialog.setAttribute('open', '');
     }
+    setDialogExpanded(true);
     showListView();
     await guarded(loadRoutes);
   }
@@ -345,13 +362,12 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     const dialog = byId(ids.dialog);
     if (dialog?.open && typeof dialog.close === 'function') dialog.close();
     else if (dialog?.open) dialog.removeAttribute('open');
+    setDialogExpanded(false);
     setStatus('');
   }
 
   function routeFromForm() {
     return {
-      activatedAt: null,
-      activated_at: null,
       description: byId(ids.routeDescription)?.value.trim() || '',
       name: byId(ids.routeName)?.value.trim() || ''
     };
@@ -419,7 +435,6 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     const file = byId(ids.routeGpx)?.files?.[0];
     data.append('name', values.name);
     data.append('description', values.description);
-    data.append('activated_at', '');
     if (file) data.append('file', file);
     return data;
   }
@@ -533,8 +548,14 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
 
   function poiListAction(event) {
     const action = event.target.closest('[data-editor-action]')?.dataset.editorAction;
-    if (action === 'edit-poi') editPoi(poiForItem(event.target));
-    if (action === 'move-poi-up') swapPois(poiIndexForItem(event.target), -1);
+    if (action === 'edit-poi') {
+      editPoi(poiForItem(event.target));
+      return;
+    }
+    if (action === 'move-poi-up') {
+      swapPois(poiIndexForItem(event.target), -1);
+      return;
+    }
     if (action === 'move-poi-down') swapPois(poiIndexForItem(event.target), 1);
   }
 
@@ -590,6 +611,8 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
       savePoi,
       sendForm,
       sendJson,
+      setDialogExpanded,
+      setDisabled,
       setStatus,
       savePoiOrder,
       saveRoute,