svg editor gut

app/assets/js/device-type-shape-editor.js

@@ -8,6 +8,8 @@
         '10': { width: 420, height: 80 }
     };
 
+    let portOptionsInput = null;
+
     function initEditor() {
         const editor = document.getElementById('device-type-shape-editor');
         const svg = document.getElementById('shape-canvas');
@@ -36,6 +38,7 @@
             portNameLabel: document.getElementById('shape-port-name-label'),
             deleteButton: document.getElementById('shape-delete')
         };
+        portOptionsInput = document.getElementById('shape-port-options');
 
         const metaInputs = {
             formFactor: document.getElementById('shape-meta-form-factor'),
@@ -68,6 +71,7 @@
         let selectedShapeId = null;
         let shapes = [];
         let meta = getDefaultMeta();
+        let portNameOptions = readPortOptions();
 
         const definition = readDefinition(hiddenInput.value);
         shapes = normalizeShapeList(definition.shapes);
@@ -78,6 +82,7 @@
         bindOverlayEvents(overlay);
         bindMetaEvents();
         applyFormFactorPreset();
+        populatePortSelect();
         applyMetaToInputs();
         persist();
         render();
@@ -250,6 +255,20 @@
             });
         }
 
+        function populatePortSelect() {
+            if (!overlay.portName) {
+                return;
+            }
+            portNameOptions = readPortOptions();
+            overlay.portName.innerHTML = '<option value="">- Port wählen -</option>';
+            portNameOptions.forEach((name) => {
+                const option = document.createElement('option');
+                option.value = name;
+                option.textContent = name;
+                overlay.portName.appendChild(option);
+            });
+        }
+
         function handleMetaInputChange(event) {
             const targetId = event?.target?.id;
             applyMetaFromInputs();
@@ -402,6 +421,8 @@
                 return;
             }
 
+            populatePortSelect();
+
             overlay.type.value = selected.type;
             overlay.x.value = selected.x;
             overlay.y.value = selected.y;
@@ -662,6 +683,27 @@
         }
     }
 
+    function readPortOptions() {
+        if (!portOptionsInput) {
+            return [];
+        }
+
+        const raw = String(portOptionsInput.value || '').trim();
+        if (!raw) {
+            return [];
+        }
+
+        try {
+            const parsed = JSON.parse(raw);
+            if (!Array.isArray(parsed)) {
+                return [];
+            }
+            return parsed.filter((value) => typeof value === 'string');
+        } catch (error) {
+            return [];
+        }
+    }
+
     function readDefinition(raw) {
         const parsed = readJson(raw);
         if (Array.isArray(parsed)) {

app/assets/js/network-view.js

@@ -12,6 +12,7 @@
  * -> bewusst simpel & erweiterbar
  */
 
+(() => {
 /* =========================
  * Konfiguration
  * ========================= */
@@ -287,3 +288,4 @@ document.addEventListener('keydown', (e) => {
 
     // TODO: Delete -> Gerät entfernen?
 });
+})();

app/assets/js/svg-editor.js

@@ -12,6 +12,7 @@
  * Abhängigkeiten: keine (Vanilla JS)
  */
 
+(() => {
 /* =========================
  * Konfiguration
  * ========================= */
@@ -256,3 +257,4 @@ document.addEventListener('keydown', (e) => {
         deleteSelectedPort();
     }
 });
+})();

app/modules/device_types/edit.php

@@ -234,7 +234,9 @@ $pageTitle = $isEdit ? "Gerätetyp bearbeiten: " . htmlspecialchars($deviceType[
                             </label>
                             <label id="shape-port-name-label" hidden>
                                 Port-Name
-                                <input type="text" id="shape-param-port-name" placeholder="z.B. Gi1/0/1">
+                                <select id="shape-param-port-name">
+                                    <option value="">- Port wählen -</option>
+                                </select>
                             </label>
                         </div>
 
@@ -299,6 +301,7 @@ $pageTitle = $isEdit ? "Gerätetyp bearbeiten: " . htmlspecialchars($deviceType[
                         <?php endif; ?>
                     </tbody>
                 </table>
+                <input type="hidden" id="shape-port-options" value="<?php echo htmlspecialchars(json_encode(array_values(array_column($ports, 'name'))), ENT_QUOTES); ?>">
 
                 <div class="port-actions">
                     <button type="button" class="button" id="add-port-row">+ Port hinzufügen</button>