added editor

public/js/editor-ui.js

@@ -0,0 +1,546 @@
+globalThis.Wegwichtel = globalThis.Wegwichtel || {};
+
+(function (ns) {
+  'use strict';
+
+  const ids = Object.freeze({
+    addPoi: 'editor-add-poi',
+    button: 'editor-button',
+    close: 'editor-close',
+    dialog: 'editor-dialog',
+    entryTitle: 'editor-entry-title',
+    newRoute: 'editor-new-route',
+    poiAudio: 'editor-poi-audio',
+    poiCancel: 'editor-poi-cancel',
+    poiDescription: 'editor-poi-description',
+    poiForm: 'editor-poi-form',
+    poiFormTitle: 'editor-poi-form-title',
+    poiFormView: 'editor-poi-form-view',
+    poiId: 'editor-poi-id',
+    poiImages: 'editor-poi-images',
+    poiLat: 'editor-poi-lat',
+    poiList: 'editor-poi-list',
+    poiLon: 'editor-poi-lon',
+    poiRadius: 'editor-poi-radius',
+    poiSave: 'editor-poi-save',
+    poiTitle: 'editor-poi-title',
+    routeActivated: 'editor-route-activated',
+    routeBack: 'editor-route-back',
+    routeDescription: 'editor-route-description',
+    routeDetailTitle: 'editor-route-detail-title',
+    routeDetailView: 'editor-route-detail-view',
+    routeForm: 'editor-route-form',
+    routeGpx: 'editor-route-gpx',
+    routeId: 'editor-route-id',
+    routeList: 'editor-route-list',
+    routeListTitle: 'editor-route-list-title',
+    routeListView: 'editor-route-list-view',
+    routeName: 'editor-route-name',
+    routeSave: 'editor-route-save',
+    status: 'editor-status',
+    title: 'editor-dialog-title'
+  });
+
+  const state = {
+    currentPoi: null,
+    currentRoute: null,
+    pois: [],
+    routes: []
+  };
+
+  function ready(callback) {
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', callback, { once: true });
+      return;
+    }
+    callback();
+  }
+
+  function byId(id) {
+    return document.getElementById(id);
+  }
+
+  function text(value) {
+    return String(value ?? '');
+  }
+
+  function numberOrNull(value) {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+
+  function routeId(route) {
+    return text(route?.id ?? route?.routeId);
+  }
+
+  function poiId(poi) {
+    return text(poi?.id ?? poi?.poiId);
+  }
+
+  function routeName(route) {
+    return text(route?.name || route?.title || 'Unbenannte Strecke');
+  }
+
+  function poiTitle(poi) {
+    return text(poi?.title || poi?.name || 'Unbenannte Station');
+  }
+
+  function apiBase() {
+    const base = ns.Config?.apiBase || '/api';
+    return base.endsWith('/') ? base.slice(0, -1) : base;
+  }
+
+  function apiUrl(path) {
+    return `${apiBase()}${path}`;
+  }
+
+  function setHidden(element, hidden) {
+    if (element) element.hidden = hidden;
+  }
+
+  function setStatus(message, isError = false) {
+    const status = byId(ids.status);
+    if (!status) return;
+    status.textContent = message;
+    status.hidden = !message;
+    status.dataset.kind = isError ? 'error' : 'notice';
+  }
+
+  function showListView() {
+    setHidden(byId(ids.routeListView), false);
+    setHidden(byId(ids.routeDetailView), true);
+    setHidden(byId(ids.poiFormView), true);
+  }
+
+  function showRouteView() {
+    setHidden(byId(ids.routeListView), true);
+    setHidden(byId(ids.routeDetailView), false);
+    setHidden(byId(ids.poiFormView), true);
+  }
+
+  function showPoiView() {
+    setHidden(byId(ids.routeListView), true);
+    setHidden(byId(ids.routeDetailView), true);
+    setHidden(byId(ids.poiFormView), false);
+  }
+
+  function isActivation(event) {
+    if (event.type === 'pointerup') {
+      if (event.isPrimary === false) return false;
+      return event.pointerType !== 'mouse' || event.button === 0;
+    }
+    return event.type === 'keydown' && (event.key === 'Enter' || event.key === ' ');
+  }
+
+  function activate(element, handler) {
+    if (!element) return;
+    element.addEventListener('pointerup', event => {
+      if (!isActivation(event)) return;
+      event.preventDefault();
+      handler(event);
+    });
+    element.addEventListener('keydown', event => {
+      if (!isActivation(event)) return;
+      event.preventDefault();
+      handler(event);
+    });
+  }
+
+  function submit(form, handler) {
+    if (!form) return;
+    form.addEventListener('submit', event => {
+      event.preventDefault();
+      handler(event);
+    });
+  }
+
+  async function readJson(path) {
+    const response = await fetch(apiUrl(path), {
+      credentials: 'same-origin',
+      headers: { Accept: 'application/json' }
+    });
+    return handleResponse(response);
+  }
+
+  async function sendJson(path, method, body) {
+    const response = await fetch(apiUrl(path), {
+      body: JSON.stringify(body),
+      credentials: 'same-origin',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      method
+    });
+    return handleResponse(response);
+  }
+
+  async function sendForm(path, method, formData) {
+    const response = await fetch(apiUrl(path), {
+      body: formData,
+      credentials: 'same-origin',
+      headers: { Accept: 'application/json' },
+      method
+    });
+    return handleResponse(response);
+  }
+
+  async function handleResponse(response) {
+    if (response.ok) return parseJson(response);
+    const message = await response.text();
+    throw new Error(message || `HTTP ${response.status}`);
+  }
+
+  async function parseJson(response) {
+    const raw = await response.text();
+    if (!raw.trim()) return {};
+    try {
+      return JSON.parse(raw);
+    } catch {
+      return {};
+    }
+  }
+
+  function routeArray(payload) {
+    if (Array.isArray(payload)) return payload;
+    if (Array.isArray(payload?.routes)) return payload.routes;
+    if (Array.isArray(payload?.items)) return payload.items;
+    return [];
+  }
+
+  function poiArray(route) {
+    if (Array.isArray(route?.pois)) return route.pois;
+    if (Array.isArray(route?.pointsOfInterest)) return route.pointsOfInterest;
+    return [];
+  }
+
+  function appendText(parent, tagName, value) {
+    const child = document.createElement(tagName);
+    child.textContent = value;
+    parent.appendChild(child);
+    return child;
+  }
+
+  function iconButton(label, symbol, action) {
+    const button = document.createElement('button');
+    button.className = 'editor-icon-button';
+    button.dataset.editorAction = action;
+    button.textContent = symbol;
+    button.title = label;
+    button.type = 'button';
+    button.setAttribute('aria-label', label);
+    return button;
+  }
+
+  function routeItem(route) {
+    const item = document.createElement('li');
+    item.className = 'editor-route-item';
+    item.dataset.routeId = routeId(route);
+
+    const label = document.createElement('div');
+    appendText(label, 'strong', routeName(route));
+    appendText(label, 'small', route?.activatedAt || route?.activated_at ? 'aktiviert' : 'Entwurf oder ohne Aktivierungsdatum');
+
+    const actions = document.createElement('div');
+    actions.className = 'editor-icon-row';
+    actions.appendChild(iconButton('Strecke bearbeiten', '✎', 'edit-route'));
+
+    item.append(label, actions);
+    return item;
+  }
+
+  function poiItem(poi, index) {
+    const item = document.createElement('li');
+    item.className = 'editor-poi-item';
+    item.dataset.poiId = poiId(poi);
+
+    const label = document.createElement('div');
+    appendText(label, 'strong', poiTitle(poi));
+    appendText(label, 'small', `Position ${index + 1}`);
+
+    const actions = document.createElement('div');
+    actions.className = 'editor-icon-row';
+    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'));
+
+    item.append(label, actions);
+    return item;
+  }
+
+  function renderRouteList() {
+    const list = byId(ids.routeList);
+    if (!list) return;
+    list.textContent = '';
+    if (!state.routes.length) {
+      const item = document.createElement('li');
+      item.className = 'editor-route-item';
+      appendText(item, 'span', 'Noch keine Strecken gefunden.');
+      list.appendChild(item);
+      return;
+    }
+    state.routes.forEach(route => list.appendChild(routeItem(route)));
+  }
+
+  function renderPoiList() {
+    const list = byId(ids.poiList);
+    if (!list) return;
+    list.textContent = '';
+    if (!state.pois.length) {
+      const item = document.createElement('li');
+      item.className = 'editor-poi-item';
+      appendText(item, 'span', 'Noch keine Stationen angelegt.');
+      list.appendChild(item);
+      return;
+    }
+    state.pois.forEach((poi, index) => list.appendChild(poiItem(poi, index)));
+  }
+
+  async function loadRoutes() {
+    setStatus('Strecken werden geladen …');
+    const payload = await readJson('/routes');
+    state.routes = routeArray(payload);
+    renderRouteList();
+    setStatus('');
+  }
+
+  async function openEditor() {
+    const dialog = byId(ids.dialog);
+    if (!dialog) return;
+    if (!dialog.open) {
+      if (typeof dialog.showModal === 'function') dialog.showModal();
+      else dialog.setAttribute('open', '');
+    }
+    showListView();
+    await guarded(loadRoutes);
+  }
+
+  function closeEditor() {
+    const dialog = byId(ids.dialog);
+    if (dialog?.open && typeof dialog.close === 'function') dialog.close();
+    else if (dialog?.open) dialog.removeAttribute('open');
+    setStatus('');
+  }
+
+  function routeFromForm() {
+    return {
+      activatedAt: null,
+      activated_at: null,
+      description: byId(ids.routeDescription)?.value.trim() || '',
+      name: byId(ids.routeName)?.value.trim() || ''
+    };
+  }
+
+  function poiFromForm() {
+    return {
+      description: byId(ids.poiDescription)?.value.trim() || '',
+      lat: numberOrNull(byId(ids.poiLat)?.value),
+      latitude: numberOrNull(byId(ids.poiLat)?.value),
+      lon: numberOrNull(byId(ids.poiLon)?.value),
+      longitude: numberOrNull(byId(ids.poiLon)?.value),
+      radiusM: numberOrNull(byId(ids.poiRadius)?.value) || 25,
+      sortOrder: state.currentPoi?.sortOrder ?? state.pois.length,
+      title: byId(ids.poiTitle)?.value.trim() || ''
+    };
+  }
+
+  function fillRouteForm(route) {
+    byId(ids.routeId).value = routeId(route);
+    byId(ids.routeName).value = routeName(route) === 'Unbenannte Strecke' ? '' : routeName(route);
+    byId(ids.routeDescription).value = text(route?.description);
+    byId(ids.routeGpx).value = '';
+    byId(ids.routeActivated).textContent = route?.activatedAt || route?.activated_at
+      ? `Aktiviert am ${route.activatedAt || route.activated_at}. Änderung der Freigabe erfolgt weiterhin manuell in der Datenbank.`
+      : 'Nicht veröffentlicht: activated_at ist leer und wird durch den Editor nicht gesetzt.';
+  }
+
+  function fillPoiForm(poi) {
+    byId(ids.poiId).value = poiId(poi);
+    byId(ids.poiTitle).value = poiTitle(poi) === 'Unbenannte Station' ? '' : 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);
+    byId(ids.poiRadius).value = text(poi?.radiusM ?? poi?.radius ?? 25);
+    byId(ids.poiAudio).value = '';
+    byId(ids.poiImages).value = '';
+  }
+
+  async function loadRoute(route) {
+    const id = routeId(route);
+    if (!id) return;
+    setStatus('Streckendetails werden geladen …');
+    const payload = await readJson(`/routes/${encodeURIComponent(id)}`);
+    const detail = payload.route || payload;
+    state.currentRoute = detail;
+    state.pois = poiArray(detail);
+    fillRouteForm(detail);
+    renderPoiList();
+    showRouteView();
+    setStatus('');
+  }
+
+  function newRoute() {
+    state.currentRoute = null;
+    state.currentPoi = null;
+    state.pois = [];
+    fillRouteForm({});
+    renderPoiList();
+    showRouteView();
+  }
+
+  function formDataFromRoute(values) {
+    const data = new FormData();
+    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;
+  }
+
+  async function saveRoute() {
+    const values = routeFromForm();
+    if (!values.name) throw new Error('Der Name der Strecke ist erforderlich.');
+    const id = byId(ids.routeId).value;
+    const file = byId(ids.routeGpx)?.files?.[0];
+    const path = id ? `/routes/${encodeURIComponent(id)}` : '/routes';
+    const method = id ? 'PUT' : 'POST';
+    const payload = file ? await sendForm(path, method, formDataFromRoute(values)) : await sendJson(path, method, values);
+    const saved = payload.route || payload;
+    state.currentRoute = Object.keys(saved).length ? saved : { ...values, id };
+    setStatus('Strecke gespeichert. Neue Strecken bleiben bis zur manuellen Aktivierung unveröffentlicht.');
+    await loadRoutes();
+    if (routeId(state.currentRoute)) await loadRoute(state.currentRoute);
+  }
+
+  function newPoi() {
+    state.currentPoi = null;
+    fillPoiForm({ radiusM: 25 });
+    showPoiView();
+  }
+
+  function editPoi(poi) {
+    state.currentPoi = poi;
+    fillPoiForm(poi);
+    showPoiView();
+  }
+
+  async function savePoi() {
+    const route = state.currentRoute;
+    const currentRouteId = routeId(route);
+    if (!currentRouteId) throw new Error('Speichere zuerst die Strecke.');
+    const values = poiFromForm();
+    if (!values.title) throw new Error('Der Titel der Station ist erforderlich.');
+
+    const currentPoiId = byId(ids.poiId).value;
+    const path = currentPoiId
+      ? `/routes/${encodeURIComponent(currentRouteId)}/pois/${encodeURIComponent(currentPoiId)}`
+      : `/routes/${encodeURIComponent(currentRouteId)}/pois`;
+    const method = currentPoiId ? 'PUT' : 'POST';
+    const payload = await sendJson(path, method, values);
+    const saved = payload.poi || payload;
+    const savedPoiId = poiId(saved) || currentPoiId;
+
+    if (savedPoiId) await uploadPoiMedia(currentRouteId, savedPoiId);
+    setStatus('Station gespeichert.');
+    await loadRoute(route);
+  }
+
+  async function uploadPoiMedia(currentRouteId, currentPoiId) {
+    const audio = byId(ids.poiAudio)?.files?.[0];
+    const images = Array.from(byId(ids.poiImages)?.files || []);
+    if (audio) await uploadOne(`/routes/${encodeURIComponent(currentRouteId)}/pois/${encodeURIComponent(currentPoiId)}/audio`, audio);
+    for (const image of images) {
+      await uploadOne(`/routes/${encodeURIComponent(currentRouteId)}/pois/${encodeURIComponent(currentPoiId)}/images`, image);
+    }
+  }
+
+  async function uploadOne(path, file) {
+    const data = new FormData();
+    data.append('file', file);
+    return sendForm(path, 'POST', data);
+  }
+
+  function swapPois(index, offset) {
+    const target = index + offset;
+    if (target < 0 || target >= state.pois.length) return;
+    const reordered = [...state.pois];
+    [reordered[index], reordered[target]] = [reordered[target], reordered[index]];
+    state.pois = reordered;
+    renderPoiList();
+    guarded(savePoiOrder);
+  }
+
+  async function savePoiOrder() {
+    const currentRouteId = routeId(state.currentRoute);
+    if (!currentRouteId) return;
+    const jobs = state.pois.map((poi, index) => {
+      const currentPoiId = poiId(poi);
+      if (!currentPoiId) return null;
+      const path = `/routes/${encodeURIComponent(currentRouteId)}/pois/${encodeURIComponent(currentPoiId)}`;
+      return sendJson(path, 'PUT', { ...poi, position: index, sortOrder: index });
+    }).filter(Boolean);
+    await Promise.all(jobs);
+    setStatus('Reihenfolge gespeichert.');
+  }
+
+  function routeForItem(target) {
+    const item = target.closest('[data-route-id]');
+    return state.routes.find(route => routeId(route) === item?.dataset.routeId);
+  }
+
+  function poiForItem(target) {
+    const item = target.closest('[data-poi-id]');
+    return state.pois.find(poi => poiId(poi) === item?.dataset.poiId);
+  }
+
+  function poiIndexForItem(target) {
+    const item = target.closest('[data-poi-id]');
+    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)));
+  }
+
+  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 === 'move-poi-down') swapPois(poiIndexForItem(event.target), 1);
+  }
+
+  async function guarded(action) {
+    try {
+      await action();
+    } catch (error) {
+      setStatus(error.message || 'Die Aktion konnte nicht ausgeführt werden.', true);
+    }
+  }
+
+  function bind() {
+    activate(byId(ids.button), () => guarded(openEditor));
+    activate(byId(ids.close), closeEditor);
+    activate(byId(ids.newRoute), newRoute);
+    activate(byId(ids.routeBack), () => guarded(loadRoutes).then(showListView));
+    activate(byId(ids.addPoi), newPoi);
+    activate(byId(ids.poiCancel), showRouteView);
+    activate(byId(ids.routeList), event => guarded(() => routeListAction(event)));
+    activate(byId(ids.poiList), poiListAction);
+    submit(byId(ids.routeForm), () => guarded(saveRoute));
+    submit(byId(ids.poiForm), () => guarded(savePoi));
+  }
+
+  function init() {
+    bind();
+    ns.EditorUi = Object.freeze({
+      close: closeEditor,
+      open: openEditor,
+      refresh: loadRoutes
+    });
+  }
+
+  ready(init);
+}(globalThis.Wegwichtel));