From defb37c06ab90b8d2ea295a5c2806f326d023579 Mon Sep 17 00:00:00 2001
From: Erdnusschokolade <96622762+Erdnusschokolade@users.noreply.github.com>
Date: Thu, 21 May 2026 17:38:33 +0200
Subject: [PATCH] Add VLAN selector dropdown to VLAN configuration page

A new <select> element above the VLAN ID input lets users pick an
existing VLAN by name instead of typing the ID. Options are loaded
from /vlanlist on page load and re-loaded after successful
Update/Create operations.

Selection triggers the existing fetchVLAN() flow.

Falls back gracefully if /vlanlist returns an empty list or fails:
the dropdown is hidden and the existing ID input remains functional.
---
 html/vlan.html   |  7 +++++++
 html/vlan.js     | 31 +++++++++++++++++++++++++++++++
 html/vlan_sub.js |  1 +
 3 files changed, 39 insertions(+)

diff --git a/html/vlan.html b/html/vlan.html
index 7962776..353e20e 100644
--- a/html/vlan.html
+++ b/html/vlan.html
@@ -10,6 +10,13 @@
     <div id="ports"></div>
     <h1>VLAN Configuration</h1>
     <form id="vform" action="/vlan.html">
+      <div>
+        <label for="vlanSelect">VLAN auswählen:</label>
+        <select id="vlanSelect" style="margin: 0 0 0 8px">
+          <option value="" disabled selected>— VLAN wählen —</option>
+        </select>
+      </div>
+      <br/>
       <div>
         <label for="vid">VLAN ID:</label>
         <input type="number" min="1" max="4094" id="vid" name="vid">
diff --git a/html/vlan.js b/html/vlan.js
index 4a481e6..803db36 100644
--- a/html/vlan.js
+++ b/html/vlan.js
@@ -83,9 +83,40 @@ function fetchVLAN() {
   sendXHTTP(xhttp);
 }
 
+function loadVlanList() {
+  var xhttp = new XMLHttpRequest();
+  xhttp.onreadystatechange = function() {
+    if (this.readyState !== 4) return;
+    var sel = document.getElementById('vlanSelect');
+    if (this.status !== 200) {
+      sel.style.display = 'none';
+      return;
+    }
+    var vlans = JSON.parse(this.responseText);
+    if (!vlans.length) {
+      sel.style.display = 'none';
+      return;
+    }
+    sel.options.length = 1;
+    for (var i = 0; i < vlans.length; i++) {
+      var opt = document.createElement('option');
+      opt.value = vlans[i].id;
+      opt.text = vlans[i].name ? vlans[i].id + ' — ' + vlans[i].name : String(vlans[i].id);
+      sel.appendChild(opt);
+    }
+  };
+  xhttp.open('GET', '/vlanlist', true);
+  sendXHTTP(xhttp);
+}
+
 window.addEventListener("load", function() {
   update( () => {
     vlanForm();
+    loadVlanList();
+    document.getElementById('vlanSelect').onchange = function() {
+      document.getElementById('vid').value = this.value;
+      fetchVLAN();
+    };
     const interval = setInterval(update, 2000);
   });
 });
diff --git a/html/vlan_sub.js b/html/vlan_sub.js
index ea14c95..974dfd5 100644
--- a/html/vlan_sub.js
+++ b/html/vlan_sub.js
@@ -28,6 +28,7 @@ async function vlanSub() {
       });
       console.log('Completed!', response);
     }
+    loadVlanList();
   } catch(err) {
     console.error(`Error: ${err}`);
   }