From a898da119e2a3992559c675d8ccb11ef7288dbc4 Mon Sep 17 00:00:00 2001
From: Jukka Lampikoski <jukka@lampikoski.com>
Date: Wed, 11 Mar 2026 12:32:55 +0200
Subject: [PATCH] =?UTF-8?q?Laitteiden=20Tyyppi=20ja=20Funktio=20kent=C3=A4?=
 =?UTF-8?q?t=20muutettu=20dropdown-valikoiksi?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Vapaa tekstikenttä → select-dropdown valmiilla vaihtoehdoilla:
- Tyyppi: Reititin, Kytkin, Palomuuri, Tukiasema, Palvelin, OLT, ONT, Mediamuunnin, Muu
- Funktio: PE/EDGE/CPE Reititin, Core/Aggregaatio/Access-kytkin, WAN GW, WLAN Controller, Asiakaslaite, Muu
- Tyyppi-sarake siirretty ennen Funktio-saraketta
- setSelectValue helper: lisää puuttuvan option automaattisesti muokatessa vanhaa dataa

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 index.html | 33 ++++++++++++++++++++++++++++-----
 script.js  | 19 ++++++++++++++++---
 2 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index c6a72e8..488a72c 100644
--- a/index.html
+++ b/index.html
@@ -218,8 +218,8 @@
                                     <th>Hallintaosoite</th>
                                     <th>Serial</th>
                                     <th>Sijainti</th>
-                                    <th>Funktio</th>
                                     <th>Tyyppi</th>
+                                    <th>Funktio</th>
                                     <th>Malli</th>
                                     <th>Ping</th>
                                     <th>Toiminnot</th>
@@ -1065,12 +1065,35 @@
                         </select>
                     </div>
                     <div class="form-group">
-                        <label for="device-form-funktio">Funktio</label>
-                        <input type="text" id="device-form-funktio" placeholder="esim. Reititin, Kytkin, AP">
+                        <label for="device-form-tyyppi">Tyyppi</label>
+                        <select id="device-form-tyyppi">
+                            <option value="">— Valitse tyyppi —</option>
+                            <option value="Reititin">Reititin</option>
+                            <option value="Kytkin">Kytkin</option>
+                            <option value="Palomuuri">Palomuuri</option>
+                            <option value="Tukiasema">Tukiasema</option>
+                            <option value="Palvelin">Palvelin</option>
+                            <option value="OLT">OLT</option>
+                            <option value="ONT">ONT</option>
+                            <option value="Mediamuunnin">Mediamuunnin</option>
+                            <option value="Muu">Muu</option>
+                        </select>
                     </div>
                     <div class="form-group">
-                        <label for="device-form-tyyppi">Tyyppi</label>
-                        <input type="text" id="device-form-tyyppi" placeholder="esim. L3-kytkin">
+                        <label for="device-form-funktio">Funktio</label>
+                        <select id="device-form-funktio">
+                            <option value="">— Valitse funktio —</option>
+                            <option value="PE Reititin">PE Reititin</option>
+                            <option value="EDGE Reititin">EDGE Reititin</option>
+                            <option value="CPE Reititin">CPE Reititin</option>
+                            <option value="Core-kytkin">Core-kytkin</option>
+                            <option value="Aggregaatiokytkin">Aggregaatiokytkin</option>
+                            <option value="Accesskytkin">Accesskytkin</option>
+                            <option value="WAN Gateway">WAN Gateway</option>
+                            <option value="WLAN Controller">WLAN Controller</option>
+                            <option value="Asiakaslaite">Asiakaslaite</option>
+                            <option value="Muu">Muu</option>
+                        </select>
                     </div>
                     <div class="form-group">
                         <label for="device-form-malli">Malli</label>
diff --git a/script.js b/script.js
index 90099b8..4679c20 100644
--- a/script.js
+++ b/script.js
@@ -2714,8 +2714,8 @@ function renderDevices() {
                 <td><code style="font-size:0.82rem;">${esc(d.hallintaosoite || '-')}</code></td>
                 <td style="font-size:0.85rem;">${esc(d.serial || '-')}</td>
                 <td>${d.site_name ? esc(d.site_name) : '<span style="color:#ccc;">-</span>'}</td>
-                <td>${esc(d.funktio || '-')}</td>
                 <td>${esc(d.tyyppi || '-')}</td>
+                <td>${esc(d.funktio || '-')}</td>
                 <td>${esc(d.malli || '-')}</td>
                 <td style="text-align:center;">${pingIcon}</td>
                 <td class="actions-cell">
@@ -2728,6 +2728,19 @@ function renderDevices() {
     document.getElementById('device-count').textContent = filtered.length + ' laitetta' + (query ? ` (${devicesData.length} yhteensä)` : '');
 }
 
+function setSelectValue(selectId, val) {
+    const sel = document.getElementById(selectId);
+    if (!val) { sel.value = ''; return; }
+    const exists = Array.from(sel.options).some(o => o.value === val);
+    if (!exists) {
+        const opt = document.createElement('option');
+        opt.value = val;
+        opt.textContent = val;
+        sel.appendChild(opt);
+    }
+    sel.value = val;
+}
+
 async function editDevice(id) {
     const d = devicesData.find(x => x.id === id);
     if (!d) return;
@@ -2735,8 +2748,8 @@ async function editDevice(id) {
     document.getElementById('device-form-nimi').value = d.nimi || '';
     document.getElementById('device-form-hallintaosoite').value = d.hallintaosoite || '';
     document.getElementById('device-form-serial').value = d.serial || '';
-    document.getElementById('device-form-funktio').value = d.funktio || '';
-    document.getElementById('device-form-tyyppi').value = d.tyyppi || '';
+    setSelectValue('device-form-tyyppi', d.tyyppi || '');
+    setSelectValue('device-form-funktio', d.funktio || '');
     document.getElementById('device-form-malli').value = d.malli || '';
     document.getElementById('device-form-ping-check').checked = d.ping_check || false;
     document.getElementById('device-form-lisatiedot').value = d.lisatiedot || '';