change trackpoint format to match server expectation

public/css/editor.css

@@ -523,6 +523,19 @@
   min-width: 2.4rem;
 }
 
+.editor-icon-danger {
+  background: #b42318;
+  border-color: #b42318;
+  color: #fff;
+  font-size: 1.3rem;
+  font-weight: 900;
+}
+
+.editor-icon-danger:hover {
+  background: #8f1c13;
+  border-color: #8f1c13;
+}
+
 .editor-icon-button:disabled,
 .editor-icon-button[aria-disabled="true"] {
   cursor: not-allowed;

public/index.html

@@ -373,8 +373,8 @@
           </div>
         </form>
         <div class="editor-toolbar editor-poi-toolbar">
-          <h3>Stationen</h3>
-          <button id="editor-add-poi" class="editor-round-button" type="button" aria-label="GPX-POI hinzufügen" title="GPX-POI hinzufügen">
+          <h3>Trackpunkte</h3>
+          <button id="editor-add-poi" class="editor-round-button" type="button" aria-label="Trackpunkt hinzufügen" title="Trackpunkt hinzufügen">
             <span aria-hidden="true">+</span>
           </button>
         </div>
@@ -383,7 +383,7 @@
       <section id="editor-poi-form-view" class="editor-view" aria-labelledby="editor-poi-form-title" hidden>
         <div class="editor-toolbar editor-toolbar-back">
           <button id="editor-poi-cancel" class="editor-secondary-button" type="button">Zurück zur Strecke</button>
-          <h3 id="editor-poi-form-title">Station bearbeiten</h3>
+          <h3 id="editor-poi-form-title">Trackpunkt bearbeiten</h3>
         </div>
 
         <form id="editor-poi-form" class="editor-form">
@@ -398,7 +398,7 @@
           <input id="editor-poi-lon" type="hidden">
           <input id="editor-poi-radius" type="hidden" value="25">
 
-          <div class="editor-media-actions" aria-label="Medien zur Station hinzufügen">
+          <div class="editor-media-actions" aria-label="Medien zum Trackpunkt hinzufügen">
             <button id="editor-poi-audio-add" class="editor-media-button" type="button" title="Audio hinzufügen">
               <svg class="editor-media-icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false">
                 <path d="M18 5v15.2a5 5 0 1 1-2-4V9l10-2v9.2a5 5 0 1 1-2-4V4.6z"/>
@@ -421,10 +421,10 @@
           <p id="editor-poi-media-status" class="editor-muted" aria-live="polite"></p>
 
           <div class="editor-form-actions">
-            <button id="editor-poi-save" class="editor-primary-button" type="submit">Station speichern</button>
+            <button id="editor-poi-save" class="editor-primary-button" type="submit">Trackpunkt speichern</button>
             <button id="editor-poi-delete" class="editor-danger-button" type="button" hidden>
               <span class="editor-danger-icon" aria-hidden="true">−</span>
-              <span>POI entfernen</span>
+              <span>Trackpunkt entfernen</span>
             </button>
           </div>
         </form>

public/js/editor-ui.js

@@ -56,6 +56,7 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     formActions: 'editor-form-actions',
     form: 'editor-form',
     iconButton: 'editor-icon-button',
+    iconDanger: 'editor-icon-danger',
     iconRow: 'editor-icon-row',
     mediaActions: 'editor-media-actions',
     mediaButton: 'editor-media-button',
@@ -127,7 +128,7 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
   }
 
   function poiTitle(poi) {
-    return text(poi?.title || poi?.name || 'Unbenannte Station');
+    return text(poi?.title || poi?.name || 'Unbenannter Trackpunkt');
   }
 
   function apiBase() {
@@ -192,7 +193,7 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
   }
 
   function showPoiView() {
-    setDialogTitle(state.currentPoi ? 'POI bearbeiten' : 'POI hinzufügen');
+    setDialogTitle(state.currentPoi ? 'Trackpunkt bearbeiten' : 'Trackpunkt hinzufügen');
     setHidden(byId(ids.routeListView), true);
     setHidden(byId(ids.routeDetailView), true);
     setHidden(byId(ids.poiFormView), false);
@@ -306,9 +307,9 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     return child;
   }
 
-  function iconButton(label, symbol, action, disabled = false) {
+  function iconButton(label, symbol, action, disabled = false, danger = false) {
     const button = document.createElement('button');
-    button.className = classes.iconButton;
+    button.className = danger ? `${classes.iconButton} ${classes.iconDanger}` : classes.iconButton;
     button.dataset.editorAction = action;
     button.textContent = symbol;
     button.title = label;
@@ -335,6 +336,7 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     const actions = document.createElement('div');
     actions.className = classes.iconRow;
     actions.appendChild(iconButton('Strecke bearbeiten', '✎', 'edit-route'));
+    actions.appendChild(iconButton('Strecke löschen', '×', 'delete-route', false, true));
     item.append(label, actions);
     return item;
   }
@@ -353,12 +355,13 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     const title = poiTitle(poi);
     const label = document.createElement('div');
     appendText(label, 'strong', title);
-    appendText(label, 'small', `Position ${index + 1}`);
+    appendText(label, 'small', `Trackpunkt ${index + 1}`);
     const actions = document.createElement('div');
     actions.className = classes.iconRow;
     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'));
+    actions.appendChild(iconButton(`${title} löschen`, '×', 'delete-poi', false, true));
     item.append(label, actions);
     return item;
   }
@@ -392,7 +395,7 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     if (!state.pois.length) {
       const item = document.createElement('li');
       item.className = classes.poiItem;
-      appendText(item, 'span', 'Noch keine Stationen angelegt.');
+      appendText(item, 'span', 'Noch keine Trackpunkte angelegt.');
       list.appendChild(item);
       return;
     }
@@ -625,7 +628,7 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
   function fillPoiForm(poi) {
     resetPendingMedia();
     byId(ids.poiId).value = poiId(poi);
-    byId(ids.poiTitle).value = poiTitle(poi) === 'Unbenannte Station' ? '' : poiTitle(poi);
+    byId(ids.poiTitle).value = poiTitle(poi) === 'Unbenannter Trackpunkt' ? '' : poiTitle(poi);
     byId(ids.poiDescription).value = text(poi?.description || poi?.text);
     byId(ids.poiLat).value = text(poi?.lat ?? poi?.latitude);
     byId(ids.poiLon).value = text(poi?.lon ?? poi?.longitude);
@@ -781,7 +784,8 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     const data = new FormData();
     data.append('name', routePackage.route?.name || 'Unbenannte Strecke');
     data.append('description', routePackage.route?.description || '');
-    const gpx = new Blob([routePackage.gpx], { type: 'application/gpx+xml' });
+    const uploadGpx = ns.LocalRoutes.gpxForUpload(routePackage);
+    const gpx = new Blob([uploadGpx], { type: 'application/gpx+xml' });
     data.append('gpx', gpx, safeGpxFilename(routePackage.route?.name));
     return data;
   }
@@ -899,7 +903,7 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     const lat = Number(position?.lat);
     const lon = Number(position?.lon);
     if (!Number.isFinite(lat) || !Number.isFinite(lon)) {
-      setStatus('Für einen neuen POI muss zuerst eine aktuelle GPS-Position verfügbar sein.', true);
+      setStatus('Für einen neuen Trackpunkt muss zuerst eine aktuelle GPS-Position verfügbar sein.', true);
       return;
     }
 
@@ -910,14 +914,14 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
       lon,
       triggerRadiusM: Number.isFinite(accuracy) && accuracy > 0 ? accuracy : 25
     });
-    byId(ids.poiFormTitle).textContent = state.currentSource === 'local' ? 'GPX-POI hinzufügen' : 'Station hinzufügen';
+    byId(ids.poiFormTitle).textContent = 'Trackpunkt hinzufügen';
     showPoiView();
   }
 
   function editPoi(poi) {
     state.currentPoi = poi;
     fillPoiForm(poi);
-    byId(ids.poiFormTitle).textContent = 'Station bearbeiten';
+    byId(ids.poiFormTitle).textContent = 'Trackpunkt bearbeiten';
     showPoiView();
   }
 
@@ -957,7 +961,7 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
 
   async function saveLocalPoi(values) {
     if (!Number.isFinite(values.lat) || !Number.isFinite(values.lon)) {
-      throw new TypeError('Für einen GPX-POI sind gültige Breiten- und Längengrade erforderlich.');
+      throw new TypeError('Für einen GPX-Trackpunkt sind gültige Breiten- und Längengrade erforderlich.');
     }
     const currentId = Number(byId(ids.poiId).value);
     const identifier = Number.isSafeInteger(currentId) ? currentId : ns.LocalRoutes.createPoiId();
@@ -974,7 +978,7 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     if (index >= 0) state.pois[index] = savedPoi;
     else state.pois.push(savedPoi);
     await persistLocalCurrentRoute();
-    setStatus('GPX-POI und zugehörige JSON-Mediendaten lokal gespeichert.');
+    setStatus('Trackpunkt und zugehörige JSON-Mediendaten lokal gespeichert.');
     await loadRoute({ id: routeId(state.currentRoute), _source: 'local' });
   }
 
@@ -1007,13 +1011,13 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     const saved = payload.poi || payload;
     const savedPoiId = poiId(saved) || currentPoiId;
     if (savedPoiId) await uploadPoiMedia(currentRouteId, savedPoiId);
-    setStatus('Station gespeichert.');
+    setStatus('Trackpunkt gespeichert.');
     await loadRoute({ id: currentRouteId, _source: 'server' });
   }
 
   async function savePoi() {
     const values = poiFromForm();
-    if (!values.title) throw new Error('Der Titel der Station ist erforderlich.');
+    if (!values.title) throw new Error('Der Titel des Trackpunkts ist erforderlich.');
     if (state.currentSource === 'local') await saveLocalPoi(values);
     else await saveServerPoi(values);
   }
@@ -1058,7 +1062,7 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
   async function removeExistingServerMedia(kind, mediaId) {
     const currentRouteId = routeId(state.currentRoute);
     const currentPoiId = poiId(state.currentPoi);
-    if (!currentRouteId || !currentPoiId) throw new Error('Der POI ist noch nicht gespeichert.');
+    if (!currentRouteId || !currentPoiId) throw new Error('Der Trackpunkt ist noch nicht gespeichert.');
     const basePath = `/routes/${encodeURIComponent(currentRouteId)}/pois/${encodeURIComponent(currentPoiId)}`;
     const updated = { ...state.currentPoi };
 
@@ -1119,13 +1123,13 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
       await persistLocalCurrentRoute();
       renderPoiList();
       showRouteView();
-      setStatus('POI entfernt und lokale Strecke aktualisiert.');
+      setStatus('Trackpunkt entfernt und lokale Strecke aktualisiert.');
       return;
     }
 
     await sendDelete(`/routes/${encodeURIComponent(currentRouteId)}/pois/${encodeURIComponent(currentPoiId)}`);
     await loadRoute({ id: currentRouteId, _source: 'server' });
-    setStatus('POI entfernt.');
+    setStatus('Trackpunkt entfernt.');
   }
 
   function reorderPois(index, offset) {
@@ -1148,7 +1152,7 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     if (!currentRouteId) return;
     if (state.currentSource === 'local') {
       await persistLocalCurrentRoute();
-      setStatus('Lokale POI-Reihenfolge gespeichert.');
+      setStatus('Lokale Trackpunkt-Reihenfolge gespeichert.');
       return;
     }
     const jobs = state.pois.map((poi, index) => {
@@ -1178,18 +1182,57 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     return state.pois.findIndex(poi => poiId(poi) === item?.dataset.poiId);
   }
 
-  async function routeListAction(event) {
-    const action = event.target.closest('[data-editor-action]')?.dataset.editorAction;
-    if (action !== 'edit-route') return;
-    await guarded(() => loadRoute(routeForItem(event.target)));
+  async function deleteRouteFromList(route) {
+    const id = routeId(route);
+    if (!id) return;
+
+    if (routeSource(route) === 'local') {
+      ns.LocalRoutes.remove(id);
+    } else {
+      await sendDelete(`/routes/${encodeURIComponent(id)}`);
+    }
+
+    if (routeId(state.currentRoute) === id && state.currentSource === routeSource(route)) {
+      state.currentRoute = null;
+      state.currentSource = null;
+      state.currentPoi = null;
+      state.pois = [];
+    }
+
+    await loadRoutes();
+    showListView();
+    setStatus('Strecke gelöscht.');
   }
 
-  function poiListAction(event) {
+  async function routeListAction(event) {
+    const control = event.target.closest('[data-editor-action]');
+    const action = control?.dataset.editorAction;
+    const route = routeForItem(event.target);
+    if (!route) return;
+
+    if (action === 'edit-route') {
+      await loadRoute(route);
+      return;
+    }
+    if (action === 'delete-route') await deleteRouteFromList(route);
+  }
+
+  async function deletePoiFromList(poi) {
+    if (!poi) return;
+    state.currentPoi = poi;
+    await deleteCurrentPoi();
+  }
+
+  async function poiListAction(event) {
     const action = event.target.closest('[data-editor-action]')?.dataset.editorAction;
     if (action === 'edit-poi') {
       editPoi(poiForItem(event.target));
       return;
     }
+    if (action === 'delete-poi') {
+      await deletePoiFromList(poiForItem(event.target));
+      return;
+    }
     if (action === 'move-poi-up') {
       swapPois(poiIndexForItem(event.target), -1);
       return;
@@ -1220,7 +1263,7 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     activate(byId(ids.poiDelete), () => guarded(deleteCurrentPoi));
     activate(byId(ids.poiCancel), showRouteView);
     activate(byId(ids.routeList), event => guarded(() => routeListAction(event)));
-    activate(byId(ids.poiList), poiListAction);
+    activate(byId(ids.poiList), event => guarded(() => poiListAction(event)));
     submit(byId(ids.routeForm), () => guarded(saveRoute));
     submit(byId(ids.poiForm), () => guarded(savePoi));
   }

public/js/local-routes.js

@@ -153,33 +153,64 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     nameElement.textContent = name;
   }
 
-  function syncGpx(gpx, route, pois) {
-    const document = parseXml(gpx || emptyGpx(route?.name));
+  function ensureTrackSegment(document, routeName) {
     const root = document.documentElement;
-    updateMetadataName(document, route?.name || 'Neue Strecke');
-    Array.from(document.getElementsByTagNameNS('*', 'wpt')).forEach(node => node.remove());
+    let track = directChildrenByLocalName(root, 'trk')[0];
+    if (!track) {
+      track = createElement(document, 'trk');
+      root.appendChild(track);
+    }
 
+    let trackName = directChildrenByLocalName(track, 'name')[0];
+    if (!trackName) {
+      trackName = createElement(document, 'name');
+      track.insertBefore(trackName, track.firstChild);
+    }
+    trackName.textContent = routeName;
+
+    let segment = directChildrenByLocalName(track, 'trkseg')[0];
+    if (!segment) {
+      segment = createElement(document, 'trkseg');
+      track.appendChild(segment);
+    }
+    return segment;
+  }
+
+  function isManagedTrackPoint(node) {
+    return Boolean(firstDescendantByLocalName(node, 'poiId'));
+  }
+
+  function syncGpx(gpx, route, pois) {
+    const routeName = route?.name || 'Neue Strecke';
+    const document = parseXml(gpx || emptyGpx(routeName));
+    updateMetadataName(document, routeName);
+
+    // Wegwichtel verwaltet neue Streckenpunkte direkt als GPX-Trackpunkte.
+    // Fremde/importierte Trackpunkte ohne Wegwichtel-ID bleiben erhalten.
+    Array.from(document.getElementsByTagNameNS('*', 'wpt')).forEach(node => node.remove());
+    Array.from(document.getElementsByTagNameNS('*', 'trkpt'))
+      .filter(isManagedTrackPoint)
+      .forEach(node => node.remove());
+
+    const segment = ensureTrackSegment(document, routeName);
     const orderedPois = [...(pois || [])].sort((left, right) => Number(left.sequence) - Number(right.sequence));
     orderedPois.forEach((poi, index) => {
-      const title = poi.title || `Station ${index + 1}`;
+      const title = poi.title || `Trackpunkt ${index + 1}`;
       if (!Number.isFinite(Number(poi.lat)) || !Number.isFinite(Number(poi.lon))) {
         throw new TypeError(`Für ${title} fehlen gültige Koordinaten.`);
       }
-      const waypoint = createElement(document, 'wpt');
-      waypoint.setAttribute('lat', String(Number(poi.lat)));
-      waypoint.setAttribute('lon', String(Number(poi.lon)));
-      waypoint.appendChild(createElement(document, 'name', title));
-      if (poi.description) waypoint.appendChild(createElement(document, 'desc', poi.description));
+
+      const trackPoint = createElement(document, 'trkpt');
+      trackPoint.setAttribute('lat', String(Number(poi.lat)));
+      trackPoint.setAttribute('lon', String(Number(poi.lon)));
+      trackPoint.appendChild(createElement(document, 'name', title));
+      if (poi.description) trackPoint.appendChild(createElement(document, 'desc', poi.description));
       const extensions = createElement(document, 'extensions');
       const poiId = document.createElementNS(POI_NAMESPACE, 'wegwichtel:poiId');
       poiId.textContent = String(poi.id);
       extensions.appendChild(poiId);
-      waypoint.appendChild(extensions);
-      const routeOrTrack = directChildrenByLocalName(root, 'rte')[0]
-        || directChildrenByLocalName(root, 'trk')[0]
-        || null;
-      if (routeOrTrack) routeOrTrack.before(waypoint);
-      else root.appendChild(waypoint);
+      trackPoint.appendChild(extensions);
+      segment.appendChild(trackPoint);
     });
 
     return new XMLSerializer().serializeToString(document);
@@ -292,6 +323,14 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     }).filter(point => point.lat != null && point.lon != null);
   }
 
+  function gpxForUpload(routePackage) {
+    if (!routePackage?.gpx) throw new Error('Für die lokale Strecke ist keine GPX-Datei vorhanden.');
+    if (!routePoints(routePackage.gpx).length) {
+      throw new Error('Die lokale Strecke enthält noch keine GPX-Trackpunkte.');
+    }
+    return routePackage.gpx;
+  }
+
   function radians(value) {
     return value * (Math.PI / 180);
   }
@@ -437,6 +476,7 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     fileToDataUrl,
     get: readPackage,
     getAppRoute,
+    gpxForUpload,
     list: listPackages,
     listAppRoutes,
     parseWaypoints,