added css reference and test case

public/js/editor-ui.js

@@ -6,6 +6,7 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
   const ids = Object.freeze({
     addPoi: 'editor-add-poi',
     button: 'editor-button',
+    coordinateGrid: 'editor-coordinate-grid',
     close: 'editor-close',
     dialog: 'editor-dialog',
     entryTitle: 'editor-entry-title',
@@ -41,6 +42,31 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     title: 'editor-dialog-title'
   });
 
+
+  const classes = Object.freeze({
+    button: 'editor-button',
+    dialog: 'editor-dialog',
+    dialogHeader: 'editor-dialog-header',
+    dialogShell: 'editor-dialog-shell',
+    entryPanel: 'editor-entry-panel',
+    form: 'editor-form',
+    iconButton: 'editor-icon-button',
+    iconRow: 'editor-icon-row',
+    muted: 'editor-muted',
+    poiItem: 'editor-poi-item',
+    poiList: 'editor-poi-list',
+    poiToolbar: 'editor-poi-toolbar',
+    primaryButton: 'editor-primary-button',
+    routeItem: 'editor-route-item',
+    routeList: 'editor-route-list',
+    roundButton: 'editor-round-button',
+    secondaryButton: 'editor-secondary-button',
+    status: 'editor-status',
+    toolbar: 'editor-toolbar',
+    toolbarBack: 'editor-toolbar-back',
+    view: 'editor-view'
+  });
+
   const state = {
     currentPoi: null,
     currentRoute: null,
@@ -223,7 +249,7 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
 
   function iconButton(label, symbol, action) {
     const button = document.createElement('button');
-    button.className = 'editor-icon-button';
+    button.className = classes.iconButton;
     button.dataset.editorAction = action;
     button.textContent = symbol;
     button.title = label;
@@ -234,7 +260,7 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
 
   function routeItem(route) {
     const item = document.createElement('li');
-    item.className = 'editor-route-item';
+    item.className = classes.routeItem;
     item.dataset.routeId = routeId(route);
 
     const label = document.createElement('div');
@@ -242,7 +268,7 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     appendText(label, 'small', route?.activatedAt || route?.activated_at ? 'aktiviert' : 'Entwurf oder ohne Aktivierungsdatum');
 
     const actions = document.createElement('div');
-    actions.className = 'editor-icon-row';
+    actions.className = classes.iconRow;
     actions.appendChild(iconButton('Strecke bearbeiten', '✎', 'edit-route'));
 
     item.append(label, actions);
@@ -251,7 +277,7 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
 
   function poiItem(poi, index) {
     const item = document.createElement('li');
-    item.className = 'editor-poi-item';
+    item.className = classes.poiItem;
     item.dataset.poiId = poiId(poi);
 
     const label = document.createElement('div');
@@ -259,7 +285,7 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     appendText(label, 'small', `Position ${index + 1}`);
 
     const actions = document.createElement('div');
-    actions.className = 'editor-icon-row';
+    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'));
@@ -274,7 +300,7 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     list.textContent = '';
     if (!state.routes.length) {
       const item = document.createElement('li');
-      item.className = 'editor-route-item';
+      item.className = classes.routeItem;
       appendText(item, 'span', 'Noch keine Strecken gefunden.');
       list.appendChild(item);
       return;
@@ -288,7 +314,7 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     list.textContent = '';
     if (!state.pois.length) {
       const item = document.createElement('li');
-      item.className = 'editor-poi-item';
+      item.className = classes.poiItem;
       appendText(item, 'span', 'Noch keine Stationen angelegt.');
       list.appendChild(item);
       return;
@@ -533,10 +559,16 @@ globalThis.Wegwichtel = globalThis.Wegwichtel || {};
     submit(byId(ids.poiForm), () => guarded(savePoi));
   }
 
+
+  function classNames() {
+    return Object.values(classes);
+  }
+
   function init() {
     bind();
     ns.EditorUi = Object.freeze({
       close: closeEditor,
+      classNames,
       open: openEditor,
       refresh: loadRoutes
     });