Liittymien VLAN/Laite/IP-kentät hakukentiksi + IP/verkko-tuki

- Korvattu select-dropdownit hakukentillä (searchable combobox)
  - Kirjoittamalla suodattaa tuloksia nimellä, IP:llä, sijainnilla jne.
  - Nuolinäppäimillä navigointi, Enter valitsee, Esc sulkee
  - Vapaan tekstin syöttö mahdollista jos IPAM:sta ei löydy
- IP-kenttä tukee nyt myös verkkoja (subnet/prefix) IP-osoitteiden lisäksi
  - Vapaat IP:t, varatut IP:t ja verkot ryhmitelty omiin osioihinsa
  - Badge-värit: vihreä (vapaa), punainen (varattu), sininen (subnet)
- Sama hakukenttä-komponentti sekä netadmin-modalissa että asiakasformissa
- API palauttaa nyt subnetit IP-listan mukana

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-12 00:29:05 +02:00
parent f913a87b14
commit 2cacea2a2c
4 changed files with 229 additions and 133 deletions

View File

@@ -1105,25 +1105,31 @@
</div>
<div class="form-group">
<label>VLAN</label>
<select id="na-edit-vlan">
<option value="">- Ei VLANia -</option>
</select>
<div class="combo-wrap" id="na-combo-vlan">
<input type="text" placeholder="Hae VLANia..." autocomplete="off">
<input type="hidden" id="na-edit-vlan">
<div class="combo-list"></div>
</div>
</div>
<div class="form-group">
<label>Laite</label>
<select id="na-edit-laite">
<option value="">- Ei laitetta -</option>
</select>
<div class="combo-wrap" id="na-combo-laite">
<input type="text" placeholder="Hae laitetta..." autocomplete="off">
<input type="hidden" id="na-edit-laite">
<div class="combo-list"></div>
</div>
</div>
<div class="form-group">
<label>Portti</label>
<input type="text" id="na-edit-portti">
</div>
<div class="form-group">
<label>IP</label>
<select id="na-edit-ip">
<option value="">- Ei IP:tä -</option>
</select>
<label>IP / Verkko</label>
<div class="combo-wrap" id="na-combo-ip">
<input type="text" placeholder="Hae IP:tä tai verkkoa..." autocomplete="off">
<input type="hidden" id="na-edit-ip">
<div class="combo-list"></div>
</div>
</div>
</div>
<div style="margin-top:1rem;display:flex;gap:0.5rem;justify-content:flex-end;">