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:
303
script.js
303
script.js
@@ -684,68 +684,25 @@ function createLiittymaRow(data = {}, index = 0) {
|
||||
<option value="36" ${data.sopimuskausi === '36' ? 'selected' : ''}>36 kk</option>
|
||||
</select></div>
|
||||
<div class="form-group"><label>Alkaen</label><input type="date" class="l-alkupvm" value="${esc(data.alkupvm || '')}"></div>
|
||||
<div class="form-group"><label>VLAN</label><select class="l-vlan"><option value="">- Ei VLANia -</option></select></div>
|
||||
<div class="form-group"><label>Laite</label><select class="l-laite"><option value="">- Ei laitetta -</option></select></div>
|
||||
<div class="form-group"><label>VLAN</label><div class="combo-wrap l-combo-vlan"><input type="text" placeholder="Hae VLANia..." autocomplete="off"><input type="hidden" class="l-vlan"><div class="combo-list"></div></div></div>
|
||||
<div class="form-group"><label>Laite</label><div class="combo-wrap l-combo-laite"><input type="text" placeholder="Hae laitetta..." autocomplete="off"><input type="hidden" class="l-laite"><div class="combo-list"></div></div></div>
|
||||
<div class="form-group"><label>Portti</label><input type="text" class="l-portti" value="${esc(data.portti || '')}" placeholder="esim. Gi0/1"></div>
|
||||
<div class="form-group"><label>IP</label><select class="l-ip"><option value="">- Ei IP:tä -</option></select></div>
|
||||
<div class="form-group"><label>IP / Verkko</label><div class="combo-wrap l-combo-ip"><input type="text" placeholder="Hae IP:tä..." autocomplete="off"><input type="hidden" class="l-ip"><div class="combo-list"></div></div></div>
|
||||
</div>`;
|
||||
div.querySelector('.btn-remove-row').addEventListener('click', () => { div.remove(); renumberLiittymaRows(); });
|
||||
// Populoi dropdownit IPAM/laite-datasta
|
||||
populateLiittymaRowDropdowns(div, data);
|
||||
// Populoi hakukentät IPAM/laite-datasta
|
||||
populateLiittymaRowCombos(div, data);
|
||||
return div;
|
||||
}
|
||||
|
||||
// Populoi yksittäisen liittymärivin VLAN/Laite/IP dropdownit
|
||||
function populateLiittymaRowDropdowns(row, data = {}) {
|
||||
const vlanSel = row.querySelector('.l-vlan');
|
||||
const laiteSel = row.querySelector('.l-laite');
|
||||
const ipSel = row.querySelector('.l-ip');
|
||||
// Käytä netadminData:a tai fallback ipamData/devicesData:an
|
||||
// Populoi liittymärivin comboboxit
|
||||
function populateLiittymaRowCombos(row, data = {}) {
|
||||
const vlans = (netadminData.vlans && netadminData.vlans.length) ? netadminData.vlans : (ipamData || []).filter(e => e.tyyppi === 'vlan');
|
||||
const ips = (netadminData.ips && netadminData.ips.length) ? netadminData.ips : (ipamData || []).filter(e => e.tyyppi === 'ip');
|
||||
const ips = (netadminData.ips && netadminData.ips.length) ? netadminData.ips : (ipamData || []).filter(e => e.tyyppi === 'ip' || e.tyyppi === 'subnet');
|
||||
const devices = (netadminData.devices && netadminData.devices.length) ? netadminData.devices : (devicesData || []);
|
||||
// VLAN
|
||||
let vlanHtml = '<option value="">- Ei VLANia -</option>';
|
||||
[...vlans].sort((a, b) => (a.vlan_id || 0) - (b.vlan_id || 0)).forEach(v => {
|
||||
const val = String(v.vlan_id || '');
|
||||
const label = val + (v.nimi ? ` — ${v.nimi}` : '');
|
||||
vlanHtml += `<option value="${esc(val)}">${esc(label)}</option>`;
|
||||
});
|
||||
if (data.vlan && !vlans.some(v => String(v.vlan_id) === String(data.vlan))) {
|
||||
vlanHtml += `<option value="${esc(data.vlan)}">${esc(data.vlan)} (manuaalinen)</option>`;
|
||||
}
|
||||
vlanSel.innerHTML = vlanHtml;
|
||||
vlanSel.value = data.vlan || '';
|
||||
// Laite
|
||||
let laiteHtml = '<option value="">- Ei laitetta -</option>';
|
||||
[...devices].sort((a, b) => (a.nimi || '').localeCompare(b.nimi || '')).forEach(d => {
|
||||
const label = d.nimi + (d.hallintaosoite ? ` (${d.hallintaosoite})` : '');
|
||||
laiteHtml += `<option value="${esc(d.nimi)}">${esc(label)}</option>`;
|
||||
});
|
||||
if (data.laite && !devices.some(d => d.nimi === data.laite)) {
|
||||
laiteHtml += `<option value="${esc(data.laite)}">${esc(data.laite)} (manuaalinen)</option>`;
|
||||
}
|
||||
laiteSel.innerHTML = laiteHtml;
|
||||
laiteSel.value = data.laite || '';
|
||||
// IP
|
||||
let ipHtml = '<option value="">- Ei IP:tä -</option>';
|
||||
const free = ips.filter(i => i.tila === 'vapaa').sort((a, b) => (a.verkko || '').localeCompare(b.verkko || ''));
|
||||
const taken = ips.filter(i => i.tila === 'varattu').sort((a, b) => (a.verkko || '').localeCompare(b.verkko || ''));
|
||||
if (free.length) {
|
||||
ipHtml += '<optgroup label="Vapaat IP:t">';
|
||||
free.forEach(i => { ipHtml += `<option value="${esc(i.verkko)}">${esc(i.verkko)}${i.nimi ? ` — ${esc(i.nimi)}` : ''}</option>`; });
|
||||
ipHtml += '</optgroup>';
|
||||
}
|
||||
if (taken.length) {
|
||||
ipHtml += '<optgroup label="Varatut IP:t">';
|
||||
taken.forEach(i => { ipHtml += `<option value="${esc(i.verkko)}">${esc(i.verkko)}${i.asiakas ? ` ← ${esc(i.asiakas)}` : ''}</option>`; });
|
||||
ipHtml += '</optgroup>';
|
||||
}
|
||||
if (data.ip && !ips.some(i => i.verkko === data.ip)) {
|
||||
ipHtml += `<option value="${esc(data.ip)}">${esc(data.ip)} (manuaalinen)</option>`;
|
||||
}
|
||||
ipSel.innerHTML = ipHtml;
|
||||
ipSel.value = data.ip || '';
|
||||
initCombo(row.querySelector('.l-combo-vlan'), getVlanComboOptions(vlans), data.vlan || '');
|
||||
initCombo(row.querySelector('.l-combo-laite'), getDeviceComboOptions(devices), data.laite || '');
|
||||
initCombo(row.querySelector('.l-combo-ip'), getIpComboOptions(ips), data.ip || '');
|
||||
}
|
||||
|
||||
function renumberLiittymaRows() {
|
||||
@@ -764,10 +721,10 @@ function collectLiittymatFromForm() {
|
||||
hinta: row.querySelector('.l-hinta').value,
|
||||
sopimuskausi: row.querySelector('.l-sopimuskausi').value,
|
||||
alkupvm: row.querySelector('.l-alkupvm').value,
|
||||
vlan: row.querySelector('.l-vlan').value,
|
||||
laite: row.querySelector('.l-laite').value,
|
||||
vlan: row.querySelector('.l-vlan')?.value || '',
|
||||
laite: row.querySelector('.l-laite')?.value || '',
|
||||
portti: row.querySelector('.l-portti').value,
|
||||
ip: row.querySelector('.l-ip').value,
|
||||
ip: row.querySelector('.l-ip')?.value || '',
|
||||
}));
|
||||
}
|
||||
|
||||
@@ -4692,72 +4649,176 @@ document.getElementById('netadmin-filter-city')?.addEventListener('change', rend
|
||||
document.getElementById('netadmin-filter-speed')?.addEventListener('change', renderNetadminTable);
|
||||
document.getElementById('netadmin-filter-device')?.addEventListener('change', renderNetadminTable);
|
||||
|
||||
// Populoi VLAN-dropdown IPAM VLANeista
|
||||
function populateVlanDropdown(selectEl, currentValue) {
|
||||
const vlans = netadminData.vlans || [];
|
||||
let html = '<option value="">- Ei VLANia -</option>';
|
||||
vlans.sort((a, b) => (a.vlan_id || 0) - (b.vlan_id || 0));
|
||||
vlans.forEach(v => {
|
||||
const val = String(v.vlan_id || '');
|
||||
const label = val + (v.nimi ? ` — ${v.nimi}` : '') + (v.site_name ? ` (${v.site_name})` : '');
|
||||
html += `<option value="${esc(val)}">${esc(label)}</option>`;
|
||||
});
|
||||
// Jos nykyinen arvo ei ole listalla, lisää se custom-optiona
|
||||
if (currentValue && !vlans.some(v => String(v.vlan_id) === String(currentValue))) {
|
||||
html += `<option value="${esc(currentValue)}">${esc(currentValue)} (manuaalinen)</option>`;
|
||||
// ---- Searchable Combobox ----
|
||||
|
||||
// Luo combobox hakukenttä wrap-elementin sisälle
|
||||
// options: [{value, label, sub, badge, badgeClass, searchStr}]
|
||||
function initCombo(wrapEl, options, currentValue) {
|
||||
const input = wrapEl.querySelector('input[type="text"]');
|
||||
const hidden = wrapEl.querySelector('input[type="hidden"]');
|
||||
const list = wrapEl.querySelector('.combo-list');
|
||||
if (!input || !hidden || !list) return;
|
||||
|
||||
wrapEl._comboOptions = options;
|
||||
hidden.value = currentValue || '';
|
||||
|
||||
// Näytä nykyinen arvo inputissa
|
||||
if (currentValue) {
|
||||
const match = options.find(o => o.value === currentValue);
|
||||
input.value = match ? match.label : currentValue;
|
||||
} else {
|
||||
input.value = '';
|
||||
}
|
||||
selectEl.innerHTML = html;
|
||||
selectEl.value = currentValue || '';
|
||||
|
||||
function renderList(query) {
|
||||
const q = (query || '').toLowerCase().trim();
|
||||
let filtered = options;
|
||||
if (q) {
|
||||
filtered = options.filter(o =>
|
||||
(o.searchStr || o.label || '').toLowerCase().includes(q) ||
|
||||
(o.value || '').toLowerCase().includes(q)
|
||||
);
|
||||
}
|
||||
if (filtered.length === 0) {
|
||||
list.innerHTML = '<div class="combo-opt" style="color:#aaa;cursor:default;">Ei tuloksia</div>';
|
||||
} else {
|
||||
let lastGroup = null;
|
||||
list.innerHTML = filtered.map(o => {
|
||||
let grpHtml = '';
|
||||
if (o.group && o.group !== lastGroup) {
|
||||
lastGroup = o.group;
|
||||
grpHtml = `<div class="combo-grp">${esc(o.group)}</div>`;
|
||||
}
|
||||
const badge = o.badge ? `<span class="combo-badge ${o.badgeClass || ''}">${esc(o.badge)}</span>` : '';
|
||||
const sub = o.sub ? `<span class="combo-sub">${esc(o.sub)}</span>` : '';
|
||||
return grpHtml + `<div class="combo-opt" data-value="${esc(o.value)}">${badge}<span>${esc(o.label)}</span>${sub}</div>`;
|
||||
}).join('');
|
||||
}
|
||||
list.classList.add('open');
|
||||
}
|
||||
|
||||
function selectValue(val) {
|
||||
hidden.value = val;
|
||||
const match = options.find(o => o.value === val);
|
||||
input.value = match ? match.label : val;
|
||||
list.classList.remove('open');
|
||||
}
|
||||
|
||||
// Poista vanhat listenerit (uudelleeninitiin)
|
||||
const newInput = input.cloneNode(true);
|
||||
input.parentNode.replaceChild(newInput, input);
|
||||
const newList = list.cloneNode(true);
|
||||
list.parentNode.replaceChild(newList, list);
|
||||
|
||||
newInput.addEventListener('focus', () => renderList(newInput.value));
|
||||
newInput.addEventListener('input', () => {
|
||||
renderList(newInput.value);
|
||||
// Jos tyhjä, tyhjennä valinta
|
||||
if (!newInput.value.trim()) hidden.value = '';
|
||||
});
|
||||
newInput.addEventListener('blur', () => {
|
||||
// Pieni viive jotta klikkaus ehtii rekisteröityä
|
||||
setTimeout(() => {
|
||||
newList.classList.remove('open');
|
||||
// Jos input ei vastaa mitään optiota, käytä vapaa teksti arvona
|
||||
if (newInput.value.trim() && !hidden.value) {
|
||||
hidden.value = newInput.value.trim();
|
||||
}
|
||||
}, 200);
|
||||
});
|
||||
newInput.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') { newList.classList.remove('open'); newInput.blur(); }
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
const active = newList.querySelector('.combo-opt.active');
|
||||
if (active && active.dataset.value !== undefined) {
|
||||
selectValue(active.dataset.value);
|
||||
} else {
|
||||
// Valitse ensimmäinen tulos
|
||||
const first = newList.querySelector('.combo-opt[data-value]');
|
||||
if (first) selectValue(first.dataset.value);
|
||||
else { hidden.value = newInput.value.trim(); newList.classList.remove('open'); }
|
||||
}
|
||||
}
|
||||
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
const items = [...newList.querySelectorAll('.combo-opt[data-value]')];
|
||||
if (!items.length) return;
|
||||
const idx = items.findIndex(i => i.classList.contains('active'));
|
||||
items.forEach(i => i.classList.remove('active'));
|
||||
let next = e.key === 'ArrowDown' ? idx + 1 : idx - 1;
|
||||
if (next < 0) next = items.length - 1;
|
||||
if (next >= items.length) next = 0;
|
||||
items[next].classList.add('active');
|
||||
items[next].scrollIntoView({ block: 'nearest' });
|
||||
}
|
||||
});
|
||||
newList.addEventListener('mousedown', (e) => {
|
||||
const opt = e.target.closest('.combo-opt[data-value]');
|
||||
if (opt) { e.preventDefault(); selectValue(opt.dataset.value); }
|
||||
});
|
||||
}
|
||||
|
||||
// Populoi laite-dropdown
|
||||
function populateDeviceDropdown(selectEl, currentValue) {
|
||||
const devices = netadminData.devices || [];
|
||||
let html = '<option value="">- Ei laitetta -</option>';
|
||||
devices.sort((a, b) => (a.nimi || '').localeCompare(b.nimi || ''));
|
||||
devices.forEach(d => {
|
||||
const label = d.nimi + (d.hallintaosoite ? ` (${d.hallintaosoite})` : '') + (d.malli ? ` — ${d.malli}` : '');
|
||||
const pingDot = d.ping_status === 'up' ? '🟢 ' : d.ping_status === 'down' ? '🔴 ' : '';
|
||||
html += `<option value="${esc(d.nimi)}">${pingDot}${esc(label)}</option>`;
|
||||
});
|
||||
// Jos nykyinen arvo ei ole listalla, lisää se custom-optiona
|
||||
if (currentValue && !devices.some(d => d.nimi === currentValue)) {
|
||||
html += `<option value="${esc(currentValue)}">${esc(currentValue)} (manuaalinen)</option>`;
|
||||
}
|
||||
selectEl.innerHTML = html;
|
||||
selectEl.value = currentValue || '';
|
||||
// Rakennetaan VLAN-combobox optiot
|
||||
function getVlanComboOptions(source) {
|
||||
const vlans = source || netadminData.vlans || [];
|
||||
return [...vlans].sort((a, b) => (a.vlan_id || 0) - (b.vlan_id || 0)).map(v => ({
|
||||
value: String(v.vlan_id || ''),
|
||||
label: String(v.vlan_id || '') + (v.nimi ? ` — ${v.nimi}` : ''),
|
||||
sub: v.site_name || '',
|
||||
searchStr: `${v.vlan_id} ${v.nimi || ''} ${v.site_name || ''}`,
|
||||
}));
|
||||
}
|
||||
|
||||
// Populoi IP-dropdown IPAM IP-osoitteista
|
||||
function populateIpDropdown(selectEl, currentValue) {
|
||||
const ips = netadminData.ips || [];
|
||||
let html = '<option value="">- Ei IP:tä -</option>';
|
||||
// Ryhmittele: vapaat ensin, sitten varatut
|
||||
const free = ips.filter(i => i.tila === 'vapaa').sort((a, b) => (a.verkko || '').localeCompare(b.verkko || ''));
|
||||
const taken = ips.filter(i => i.tila === 'varattu').sort((a, b) => (a.verkko || '').localeCompare(b.verkko || ''));
|
||||
// Rakennetaan laite-combobox optiot
|
||||
function getDeviceComboOptions(source) {
|
||||
const devices = source || netadminData.devices || [];
|
||||
return [...devices].sort((a, b) => (a.nimi || '').localeCompare(b.nimi || '')).map(d => {
|
||||
const pingDot = d.ping_status === 'up' ? '🟢' : d.ping_status === 'down' ? '🔴' : '';
|
||||
return {
|
||||
value: d.nimi,
|
||||
label: (pingDot ? pingDot + ' ' : '') + d.nimi,
|
||||
sub: [d.hallintaosoite, d.malli].filter(Boolean).join(' — '),
|
||||
searchStr: `${d.nimi} ${d.hallintaosoite || ''} ${d.malli || ''} ${d.funktio || ''} ${d.site_name || ''}`,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
if (free.length) {
|
||||
html += '<optgroup label="Vapaat IP:t">';
|
||||
free.forEach(i => {
|
||||
const label = i.verkko + (i.nimi ? ` — ${i.nimi}` : '') + (i.site_name ? ` (${i.site_name})` : '');
|
||||
html += `<option value="${esc(i.verkko)}">${esc(label)}</option>`;
|
||||
});
|
||||
html += '</optgroup>';
|
||||
}
|
||||
if (taken.length) {
|
||||
html += '<optgroup label="Varatut IP:t">';
|
||||
taken.forEach(i => {
|
||||
const label = i.verkko + (i.asiakas ? ` ← ${i.asiakas}` : '') + (i.nimi ? ` — ${i.nimi}` : '');
|
||||
html += `<option value="${esc(i.verkko)}">${esc(label)}</option>`;
|
||||
});
|
||||
html += '</optgroup>';
|
||||
}
|
||||
// Jos nykyinen arvo ei ole listalla, lisää se custom-optiona
|
||||
if (currentValue && !ips.some(i => i.verkko === currentValue)) {
|
||||
html += `<option value="${esc(currentValue)}">${esc(currentValue)} (manuaalinen)</option>`;
|
||||
}
|
||||
selectEl.innerHTML = html;
|
||||
selectEl.value = currentValue || '';
|
||||
// Rakennetaan IP/verkko -combobox optiot
|
||||
function getIpComboOptions(source) {
|
||||
const ips = source || netadminData.ips || [];
|
||||
const items = [];
|
||||
// Vapaat IP:t
|
||||
const free = ips.filter(i => i.tila === 'vapaa' && i.tyyppi === 'ip').sort((a, b) => (a.verkko || '').localeCompare(b.verkko || ''));
|
||||
free.forEach(i => items.push({
|
||||
value: i.verkko,
|
||||
label: i.verkko,
|
||||
sub: [i.nimi, i.site_name].filter(Boolean).join(' — '),
|
||||
badge: 'vapaa', badgeClass: 'free',
|
||||
group: 'Vapaat IP:t',
|
||||
searchStr: `${i.verkko} ${i.nimi || ''} ${i.site_name || ''}`,
|
||||
}));
|
||||
// Varatut IP:t
|
||||
const taken = ips.filter(i => i.tila === 'varattu' && i.tyyppi === 'ip').sort((a, b) => (a.verkko || '').localeCompare(b.verkko || ''));
|
||||
taken.forEach(i => items.push({
|
||||
value: i.verkko,
|
||||
label: i.verkko,
|
||||
sub: [i.asiakas, i.nimi].filter(Boolean).join(' — '),
|
||||
badge: 'varattu', badgeClass: 'taken',
|
||||
group: 'Varatut IP:t',
|
||||
searchStr: `${i.verkko} ${i.nimi || ''} ${i.asiakas || ''} ${i.site_name || ''}`,
|
||||
}));
|
||||
// Subnetit
|
||||
const subnets = ips.filter(i => i.tyyppi === 'subnet').sort((a, b) => (a.verkko || '').localeCompare(b.verkko || ''));
|
||||
subnets.forEach(i => items.push({
|
||||
value: i.verkko,
|
||||
label: i.verkko,
|
||||
sub: [i.nimi, i.site_name].filter(Boolean).join(' — '),
|
||||
badge: 'subnet', badgeClass: 'subnet',
|
||||
group: 'Verkot',
|
||||
searchStr: `${i.verkko} ${i.nimi || ''} ${i.site_name || ''}`,
|
||||
}));
|
||||
return items;
|
||||
}
|
||||
|
||||
async function openNetadminDetail(connId) {
|
||||
@@ -4779,10 +4840,10 @@ async function openNetadminDetail(connId) {
|
||||
speedSel.insertBefore(opt, speedSel.lastElementChild);
|
||||
}
|
||||
speedSel.value = speed;
|
||||
// Populoi VLAN, Laite ja IP dropdownit IPAM/Tekniikka-datasta
|
||||
populateVlanDropdown(document.getElementById('na-edit-vlan'), conn.vlan || '');
|
||||
populateDeviceDropdown(document.getElementById('na-edit-laite'), conn.laite || '');
|
||||
populateIpDropdown(document.getElementById('na-edit-ip'), conn.ip || '');
|
||||
// Populoi VLAN, Laite ja IP hakukentät IPAM/Tekniikka-datasta
|
||||
initCombo(document.getElementById('na-combo-vlan'), getVlanComboOptions(), conn.vlan || '');
|
||||
initCombo(document.getElementById('na-combo-laite'), getDeviceComboOptions(), conn.laite || '');
|
||||
initCombo(document.getElementById('na-combo-ip'), getIpComboOptions(), conn.ip || '');
|
||||
document.getElementById('na-edit-portti').value = conn.portti || '';
|
||||
document.getElementById('netadmin-detail-modal').style.display = '';
|
||||
} catch (e) { alert('Liittymän avaus epäonnistui: ' + e.message); }
|
||||
|
||||
Reference in New Issue
Block a user