Jukka Lampikoski
695d8c6545
- Refactor data model: each customer now has a liittymat array (auto-migration from old format) - Add sopimuskausi (1/12/24/36 kk) and alkupvm fields per connection - Form supports adding/removing multiple connection rows per company - Add "use same as installation address" checkbox for billing address - Move stat cards to compact sidebar on the right - Place search bar above customer table Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
702 lines
28 KiB
JavaScript
702 lines
28 KiB
JavaScript
const API = 'api.php';
|
|
let customers = [];
|
|
let sortField = 'yritys';
|
|
let sortAsc = true;
|
|
let currentDetailId = null;
|
|
|
|
// Elements
|
|
const loginScreen = document.getElementById('login-screen');
|
|
const dashboard = document.getElementById('dashboard');
|
|
const loginForm = document.getElementById('login-form');
|
|
const loginError = document.getElementById('login-error');
|
|
const searchInput = document.getElementById('search-input');
|
|
const tbody = document.getElementById('customer-tbody');
|
|
const noCustomers = document.getElementById('no-customers');
|
|
const customerCount = document.getElementById('customer-count');
|
|
const totalBilling = document.getElementById('total-billing');
|
|
const customerModal = document.getElementById('customer-modal');
|
|
const detailModal = document.getElementById('detail-modal');
|
|
const customerForm = document.getElementById('customer-form');
|
|
|
|
// API helpers
|
|
async function apiCall(action, method = 'GET', body = null) {
|
|
const opts = { method, credentials: 'include' };
|
|
if (body) {
|
|
opts.headers = { 'Content-Type': 'application/json' };
|
|
opts.body = JSON.stringify(body);
|
|
}
|
|
const res = await fetch(`${API}?action=${action}`, opts);
|
|
const data = await res.json();
|
|
if (!res.ok) throw new Error(data.error || 'Virhe');
|
|
return data;
|
|
}
|
|
|
|
// Auth
|
|
async function checkAuth() {
|
|
try {
|
|
const data = await apiCall('check_auth');
|
|
if (data.authenticated) showDashboard();
|
|
} catch (e) { /* not logged in */ }
|
|
}
|
|
|
|
loginForm.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const password = document.getElementById('login-password').value;
|
|
try {
|
|
await apiCall('login', 'POST', { password });
|
|
loginError.style.display = 'none';
|
|
showDashboard();
|
|
} catch (err) {
|
|
loginError.textContent = err.message;
|
|
loginError.style.display = 'block';
|
|
}
|
|
});
|
|
|
|
document.getElementById('btn-logout').addEventListener('click', async () => {
|
|
await apiCall('logout');
|
|
dashboard.style.display = 'none';
|
|
loginScreen.style.display = 'flex';
|
|
document.getElementById('login-password').value = '';
|
|
});
|
|
|
|
async function showDashboard() {
|
|
loginScreen.style.display = 'none';
|
|
dashboard.style.display = 'block';
|
|
await loadCustomers();
|
|
}
|
|
|
|
// Customers
|
|
async function loadCustomers() {
|
|
customers = await apiCall('customers');
|
|
renderTable();
|
|
}
|
|
|
|
// Helper: flatten customers into rows (one row per liittymä)
|
|
function flattenRows(customerList) {
|
|
const rows = [];
|
|
customerList.forEach(c => {
|
|
const liittymat = c.liittymat || [];
|
|
if (liittymat.length === 0) {
|
|
rows.push({ customer: c, liittyma: { asennusosoite: '', postinumero: '', kaupunki: '', liittymanopeus: '', hinta: 0, sopimuskausi: '', alkupvm: '' }, index: 0 });
|
|
} else {
|
|
liittymat.forEach((l, i) => {
|
|
rows.push({ customer: c, liittyma: l, index: i });
|
|
});
|
|
}
|
|
});
|
|
return rows;
|
|
}
|
|
|
|
function renderTable() {
|
|
const query = searchInput.value.toLowerCase().trim();
|
|
let filtered = customers;
|
|
if (query) {
|
|
filtered = customers.filter(c => {
|
|
const liittymat = c.liittymat || [];
|
|
const inLiittymat = liittymat.some(l =>
|
|
(l.asennusosoite || '').toLowerCase().includes(query) ||
|
|
(l.postinumero || '').toLowerCase().includes(query) ||
|
|
(l.kaupunki || '').toLowerCase().includes(query) ||
|
|
(l.liittymanopeus || '').toLowerCase().includes(query)
|
|
);
|
|
return c.yritys.toLowerCase().includes(query) ||
|
|
(c.yhteyshenkilö || '').toLowerCase().includes(query) ||
|
|
inLiittymat;
|
|
});
|
|
}
|
|
|
|
const rows = flattenRows(filtered);
|
|
|
|
// Sort
|
|
rows.sort((a, b) => {
|
|
let va, vb;
|
|
if (['asennusosoite', 'postinumero', 'kaupunki', 'liittymanopeus', 'hinta', 'sopimuskausi'].includes(sortField)) {
|
|
va = a.liittyma[sortField] ?? '';
|
|
vb = b.liittyma[sortField] ?? '';
|
|
} else {
|
|
va = a.customer[sortField] ?? '';
|
|
vb = b.customer[sortField] ?? '';
|
|
}
|
|
if (sortField === 'hinta') {
|
|
va = parseFloat(va) || 0;
|
|
vb = parseFloat(vb) || 0;
|
|
} else {
|
|
va = String(va).toLowerCase();
|
|
vb = String(vb).toLowerCase();
|
|
}
|
|
if (va < vb) return sortAsc ? -1 : 1;
|
|
if (va > vb) return sortAsc ? 1 : -1;
|
|
return 0;
|
|
});
|
|
|
|
if (rows.length === 0) {
|
|
tbody.innerHTML = '';
|
|
noCustomers.style.display = 'block';
|
|
document.getElementById('customer-table').style.display = 'none';
|
|
} else {
|
|
noCustomers.style.display = 'none';
|
|
document.getElementById('customer-table').style.display = 'table';
|
|
let prevCustomerId = null;
|
|
tbody.innerHTML = rows.map(r => {
|
|
const c = r.customer;
|
|
const l = r.liittyma;
|
|
const isFirst = c.id !== prevCustomerId;
|
|
prevCustomerId = c.id;
|
|
const sopimus = l.sopimuskausi ? l.sopimuskausi + ' kk' : '';
|
|
const alkupvm = l.alkupvm ? ' (' + esc(l.alkupvm) + ')' : '';
|
|
return `
|
|
<tr data-id="${c.id}" class="${isFirst ? '' : 'sub-row'}">
|
|
<td>${isFirst ? '<strong>' + esc(c.yritys) + '</strong>' : '<span class="sub-marker">↳</span>'}</td>
|
|
<td>${esc(l.asennusosoite)}${l.postinumero ? ', ' + esc(l.postinumero) : ''}</td>
|
|
<td>${esc(l.kaupunki)}</td>
|
|
<td>${esc(l.liittymanopeus)}</td>
|
|
<td class="price-cell">${formatPrice(l.hinta)}</td>
|
|
<td>${sopimus}${alkupvm}</td>
|
|
<td class="actions-cell">
|
|
${isFirst ? `
|
|
<button onclick="event.stopPropagation(); editCustomer('${c.id}')" title="Muokkaa">✎</button>
|
|
<button onclick="event.stopPropagation(); deleteCustomer('${c.id}', '${esc(c.yritys)}')" title="Poista">🗑</button>
|
|
` : ''}
|
|
</td>
|
|
</tr>`;
|
|
}).join('');
|
|
}
|
|
|
|
updateSummary();
|
|
}
|
|
|
|
function getAllLiittymat() {
|
|
const all = [];
|
|
customers.forEach(c => (c.liittymat || []).forEach(l => all.push(l)));
|
|
return all;
|
|
}
|
|
|
|
function updateSummary() {
|
|
const liittymat = getAllLiittymat();
|
|
const count = customers.length;
|
|
const connCount = liittymat.length;
|
|
const total = liittymat.reduce((sum, l) => sum + (parseFloat(l.hinta) || 0), 0);
|
|
|
|
customerCount.textContent = `${count} asiakasta, ${connCount} liittymää`;
|
|
totalBilling.textContent = `Laskutus yhteensä: ${formatPrice(total)}/kk`;
|
|
|
|
setText('stat-count', count);
|
|
setText('stat-connections', connCount);
|
|
setText('stat-billing', formatPrice(total));
|
|
setText('stat-yearly', formatPrice(total * 12));
|
|
|
|
updateTrivia(liittymat, connCount);
|
|
}
|
|
|
|
function updateTrivia(liittymat, connCount) {
|
|
if (connCount === 0) {
|
|
setTrivia('stat-top-zip', '-', '');
|
|
setText('stat-avg-price', '-');
|
|
const st = document.getElementById('stat-speed-table');
|
|
if (st) st.innerHTML = '<span style="color:#aaa;font-size:0.85rem;">-</span>';
|
|
return;
|
|
}
|
|
|
|
// Suosituin postinumero
|
|
const zipCounts = {};
|
|
liittymat.forEach(l => {
|
|
const zip = (l.postinumero || '').trim();
|
|
if (zip) zipCounts[zip] = (zipCounts[zip] || 0) + 1;
|
|
});
|
|
const topZip = Object.entries(zipCounts).sort((a, b) => b[1] - a[1])[0];
|
|
if (topZip) {
|
|
const city = liittymat.find(l => (l.postinumero || '').trim() === topZip[0]);
|
|
setTrivia('stat-top-zip', topZip[0], `${topZip[1]} liittymää` + (city && city.kaupunki ? ` (${city.kaupunki})` : ''));
|
|
} else {
|
|
setTrivia('stat-top-zip', '-', '');
|
|
}
|
|
|
|
// Nopeus-jakauma
|
|
const speedCounts = {};
|
|
liittymat.forEach(l => {
|
|
const speed = (l.liittymanopeus || '').trim();
|
|
if (speed) speedCounts[speed] = (speedCounts[speed] || 0) + 1;
|
|
});
|
|
const speedTable = document.getElementById('stat-speed-table');
|
|
if (speedTable) {
|
|
const sorted = Object.entries(speedCounts).sort((a, b) => b[1] - a[1]);
|
|
const maxCount = sorted.length > 0 ? sorted[0][1] : 0;
|
|
if (sorted.length === 0) {
|
|
speedTable.innerHTML = '<span style="color:#aaa;font-size:0.85rem;">-</span>';
|
|
} else {
|
|
speedTable.innerHTML = sorted.map(([speed, cnt]) => {
|
|
const isTop = cnt === maxCount;
|
|
const barWidth = Math.max(15, (cnt / maxCount) * 50);
|
|
return `<span class="speed-item ${isTop ? 'top' : ''}">${esc(speed)} (${cnt})<span class="speed-bar" style="width:${barWidth}px"></span></span>`;
|
|
}).join('');
|
|
}
|
|
}
|
|
|
|
// Keskihinta
|
|
const total = liittymat.reduce((sum, l) => sum + (parseFloat(l.hinta) || 0), 0);
|
|
setText('stat-avg-price', formatPrice(total / connCount));
|
|
}
|
|
|
|
function setTrivia(id, value, sub) {
|
|
const el = document.getElementById(id);
|
|
const subEl = document.getElementById(id + '-detail');
|
|
if (el) el.textContent = value;
|
|
if (subEl) subEl.textContent = sub;
|
|
}
|
|
|
|
function setText(id, value) {
|
|
const el = document.getElementById(id);
|
|
if (el) el.textContent = value;
|
|
}
|
|
|
|
function formatPrice(val) {
|
|
return parseFloat(val || 0).toFixed(2).replace('.', ',') + ' €';
|
|
}
|
|
|
|
function esc(str) {
|
|
if (!str) return '';
|
|
const div = document.createElement('div');
|
|
div.textContent = str;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
// Search
|
|
searchInput.addEventListener('input', () => renderTable());
|
|
|
|
// Sort
|
|
document.querySelectorAll('th[data-sort]').forEach(th => {
|
|
th.addEventListener('click', () => {
|
|
const field = th.dataset.sort;
|
|
if (sortField === field) {
|
|
sortAsc = !sortAsc;
|
|
} else {
|
|
sortField = field;
|
|
sortAsc = true;
|
|
}
|
|
renderTable();
|
|
});
|
|
});
|
|
|
|
// Row click -> detail
|
|
tbody.addEventListener('click', (e) => {
|
|
const row = e.target.closest('tr');
|
|
if (!row) return;
|
|
showDetail(row.dataset.id);
|
|
});
|
|
|
|
function detailVal(val) {
|
|
return val ? esc(val) : '<span class="empty">-</span>';
|
|
}
|
|
|
|
function detailLink(val, type) {
|
|
if (!val) return '<span class="empty">-</span>';
|
|
if (type === 'tel') return `<a href="tel:${esc(val)}">${esc(val)}</a>`;
|
|
if (type === 'email') return `<a href="mailto:${esc(val)}">${esc(val)}</a>`;
|
|
return esc(val);
|
|
}
|
|
|
|
function showDetail(id) {
|
|
const c = customers.find(x => x.id === id);
|
|
if (!c) return;
|
|
currentDetailId = id;
|
|
|
|
const liittymat = c.liittymat || [];
|
|
const fullBillingAddress = [c.laskutusosoite, c.laskutuspostinumero, c.laskutuskaupunki].filter(Boolean).join(', ');
|
|
|
|
const liittymatHtml = liittymat.map((l, i) => {
|
|
const fullAddr = [l.asennusosoite, l.postinumero, l.kaupunki].filter(Boolean).join(', ');
|
|
const sopimus = l.sopimuskausi ? l.sopimuskausi + ' kk' : '-';
|
|
const alku = l.alkupvm || '-';
|
|
return `
|
|
<div class="liittyma-card">
|
|
${liittymat.length > 1 ? `<div class="liittyma-num">Liittymä ${i + 1}</div>` : ''}
|
|
<div class="detail-grid">
|
|
<div class="detail-item">
|
|
<div class="detail-label">Osoite</div>
|
|
<div class="detail-value">${detailVal(fullAddr)}</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">Nopeus</div>
|
|
<div class="detail-value">${detailVal(l.liittymanopeus)}</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">Hinta / kk</div>
|
|
<div class="detail-value price-cell">${formatPrice(l.hinta)}</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">Sopimuskausi</div>
|
|
<div class="detail-value">${sopimus}</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">Alkaen</div>
|
|
<div class="detail-value">${detailVal(alku)}</div>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}).join('');
|
|
|
|
const totalHinta = liittymat.reduce((s, l) => s + (parseFloat(l.hinta) || 0), 0);
|
|
|
|
document.getElementById('detail-title').textContent = c.yritys;
|
|
document.getElementById('detail-body').innerHTML = `
|
|
<div class="detail-section">
|
|
<h3>Perustiedot</h3>
|
|
<div class="detail-grid">
|
|
<div class="detail-item">
|
|
<div class="detail-label">Yritys</div>
|
|
<div class="detail-value">${detailVal(c.yritys)}</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">Y-tunnus</div>
|
|
<div class="detail-value">${detailVal(c.ytunnus)}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="detail-section">
|
|
<h3>Liittymät (${liittymat.length})</h3>
|
|
${liittymatHtml}
|
|
${liittymat.length > 1 ? `<div class="liittyma-total">Yhteensä: ${formatPrice(totalHinta)}/kk</div>` : ''}
|
|
</div>
|
|
<div class="detail-section">
|
|
<h3>Yhteystiedot</h3>
|
|
<div class="detail-grid">
|
|
<div class="detail-item">
|
|
<div class="detail-label">Yhteyshenkilö</div>
|
|
<div class="detail-value">${detailVal(c.yhteyshenkilö)}</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">Puhelin</div>
|
|
<div class="detail-value">${detailLink(c.puhelin, 'tel')}</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">Sähköposti</div>
|
|
<div class="detail-value">${detailLink(c.sahkoposti, 'email')}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="detail-section">
|
|
<h3>Laskutustiedot</h3>
|
|
<div class="detail-grid">
|
|
<div class="detail-item">
|
|
<div class="detail-label">Laskutusosoite</div>
|
|
<div class="detail-value">${detailVal(fullBillingAddress)}</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">Laskutussähköposti</div>
|
|
<div class="detail-value">${detailLink(c.laskutussahkoposti, 'email')}</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">E-laskuosoite</div>
|
|
<div class="detail-value">${detailVal(c.elaskuosoite)}</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">E-laskuvälittäjä</div>
|
|
<div class="detail-value">${detailVal(c.elaskuvalittaja)}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
${c.lisatiedot ? `
|
|
<div class="detail-section">
|
|
<h3>Lisätiedot</h3>
|
|
<p style="white-space:pre-wrap;color:#555;">${esc(c.lisatiedot)}</p>
|
|
</div>` : ''}
|
|
<div class="detail-section">
|
|
<h3>Tiedostot</h3>
|
|
<div class="file-upload-area">
|
|
<label class="file-upload-btn btn-primary" style="display:inline-block;cursor:pointer;font-size:0.85rem;padding:8px 16px;">
|
|
+ Lisää tiedosto
|
|
<input type="file" id="file-upload-input" style="display:none" multiple>
|
|
</label>
|
|
<span class="file-upload-hint" style="font-size:0.8rem;color:#999;margin-left:8px;">Max 20 MB / tiedosto</span>
|
|
</div>
|
|
<div id="file-list" class="file-list" style="margin-top:0.75rem;"></div>
|
|
</div>
|
|
`;
|
|
|
|
detailModal.style.display = 'flex';
|
|
loadFiles(id);
|
|
|
|
const fileInput = document.getElementById('file-upload-input');
|
|
fileInput.addEventListener('change', async () => {
|
|
for (const file of fileInput.files) {
|
|
const formData = new FormData();
|
|
formData.append('customer_id', id);
|
|
formData.append('file', file);
|
|
try {
|
|
const res = await fetch(`${API}?action=file_upload`, {
|
|
method: 'POST',
|
|
credentials: 'include',
|
|
body: formData,
|
|
});
|
|
const data = await res.json();
|
|
if (!res.ok) alert(data.error || 'Virhe');
|
|
} catch (e) {
|
|
alert('Tiedoston lähetys epäonnistui');
|
|
}
|
|
}
|
|
fileInput.value = '';
|
|
loadFiles(id);
|
|
});
|
|
}
|
|
|
|
async function loadFiles(customerId) {
|
|
const fileList = document.getElementById('file-list');
|
|
if (!fileList) return;
|
|
try {
|
|
const files = await apiCall(`file_list&customer_id=${customerId}`);
|
|
if (files.length === 0) {
|
|
fileList.innerHTML = '<p style="color:#aaa;font-size:0.85rem;">Ei tiedostoja.</p>';
|
|
return;
|
|
}
|
|
fileList.innerHTML = files.map(f => `
|
|
<div class="file-item">
|
|
<div class="file-info">
|
|
<a href="${API}?action=file_download&customer_id=${customerId}&filename=${encodeURIComponent(f.filename)}"
|
|
class="file-name" target="_blank">${esc(f.filename)}</a>
|
|
<span class="file-meta">${formatFileSize(f.size)} · ${f.modified}</span>
|
|
</div>
|
|
<button class="file-delete-btn" onclick="deleteFile('${customerId}', '${esc(f.filename)}')" title="Poista">✕</button>
|
|
</div>
|
|
`).join('');
|
|
} catch (e) {
|
|
fileList.innerHTML = '<p style="color:#e74c3c;font-size:0.85rem;">Virhe ladattaessa tiedostoja.</p>';
|
|
}
|
|
}
|
|
|
|
function formatFileSize(bytes) {
|
|
if (bytes < 1024) return bytes + ' B';
|
|
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
|
|
return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
|
|
}
|
|
|
|
async function deleteFile(customerId, filename) {
|
|
if (!confirm(`Poistetaanko tiedosto "${filename}"?`)) return;
|
|
await apiCall('file_delete', 'POST', { customer_id: customerId, filename });
|
|
loadFiles(customerId);
|
|
}
|
|
|
|
// Detail modal actions
|
|
document.getElementById('detail-close').addEventListener('click', () => detailModal.style.display = 'none');
|
|
document.getElementById('detail-cancel').addEventListener('click', () => detailModal.style.display = 'none');
|
|
document.getElementById('detail-edit').addEventListener('click', () => {
|
|
detailModal.style.display = 'none';
|
|
editCustomer(currentDetailId);
|
|
});
|
|
document.getElementById('detail-delete').addEventListener('click', () => {
|
|
const c = customers.find(x => x.id === currentDetailId);
|
|
if (c) {
|
|
detailModal.style.display = 'none';
|
|
deleteCustomer(currentDetailId, c.yritys);
|
|
}
|
|
});
|
|
|
|
// ============ FORM: Liittymät (add/remove rows) ============
|
|
|
|
let formLiittymat = [];
|
|
|
|
function createLiittymaRow(data = {}, index = 0) {
|
|
const div = document.createElement('div');
|
|
div.className = 'liittyma-row';
|
|
div.dataset.index = index;
|
|
div.innerHTML = `
|
|
<div class="liittyma-row-header">
|
|
<span class="liittyma-row-title">Liittymä ${index + 1}</span>
|
|
<button type="button" class="btn-remove-row" title="Poista liittymä">✕</button>
|
|
</div>
|
|
<div class="form-grid form-grid-liittyma">
|
|
<div class="form-group">
|
|
<label>Osoite</label>
|
|
<input type="text" class="l-asennusosoite" value="${esc(data.asennusosoite || '')}" placeholder="esim. Kauppakatu 5">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Postinumero</label>
|
|
<input type="text" class="l-postinumero" value="${esc(data.postinumero || '')}" placeholder="20100">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Kaupunki</label>
|
|
<input type="text" class="l-kaupunki" value="${esc(data.kaupunki || '')}" placeholder="Turku">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Nopeus</label>
|
|
<input type="text" class="l-liittymanopeus" value="${esc(data.liittymanopeus || '')}" placeholder="esim. 100/100">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Hinta €/kk</label>
|
|
<input type="number" class="l-hinta" step="0.01" min="0" value="${data.hinta || ''}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Sopimuskausi</label>
|
|
<select class="l-sopimuskausi">
|
|
<option value="">- Valitse -</option>
|
|
<option value="1" ${data.sopimuskausi === '1' ? 'selected' : ''}>1 kk</option>
|
|
<option value="12" ${data.sopimuskausi === '12' ? 'selected' : ''}>12 kk</option>
|
|
<option value="24" ${data.sopimuskausi === '24' ? 'selected' : ''}>24 kk</option>
|
|
<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>
|
|
`;
|
|
div.querySelector('.btn-remove-row').addEventListener('click', () => {
|
|
div.remove();
|
|
renumberLiittymaRows();
|
|
});
|
|
return div;
|
|
}
|
|
|
|
function renumberLiittymaRows() {
|
|
const container = document.getElementById('liittymat-container');
|
|
container.querySelectorAll('.liittyma-row').forEach((row, i) => {
|
|
row.dataset.index = i;
|
|
row.querySelector('.liittyma-row-title').textContent = `Liittymä ${i + 1}`;
|
|
});
|
|
}
|
|
|
|
function collectLiittymatFromForm() {
|
|
const container = document.getElementById('liittymat-container');
|
|
const rows = container.querySelectorAll('.liittyma-row');
|
|
return Array.from(rows).map(row => ({
|
|
asennusosoite: row.querySelector('.l-asennusosoite').value,
|
|
postinumero: row.querySelector('.l-postinumero').value,
|
|
kaupunki: row.querySelector('.l-kaupunki').value,
|
|
liittymanopeus: row.querySelector('.l-liittymanopeus').value,
|
|
hinta: row.querySelector('.l-hinta').value,
|
|
sopimuskausi: row.querySelector('.l-sopimuskausi').value,
|
|
alkupvm: row.querySelector('.l-alkupvm').value,
|
|
}));
|
|
}
|
|
|
|
document.getElementById('btn-add-liittyma').addEventListener('click', () => {
|
|
const container = document.getElementById('liittymat-container');
|
|
const count = container.querySelectorAll('.liittyma-row').length;
|
|
container.appendChild(createLiittymaRow({}, count));
|
|
});
|
|
|
|
// Billing "same as" checkbox
|
|
document.getElementById('form-billing-same').addEventListener('change', function () {
|
|
const billingFields = document.getElementById('billing-fields');
|
|
if (this.checked) {
|
|
billingFields.style.display = 'none';
|
|
// Copy first liittymä address into billing fields
|
|
const firstRow = document.querySelector('.liittyma-row');
|
|
if (firstRow) {
|
|
document.getElementById('form-laskutusosoite').value = firstRow.querySelector('.l-asennusosoite').value;
|
|
document.getElementById('form-laskutuspostinumero').value = firstRow.querySelector('.l-postinumero').value;
|
|
document.getElementById('form-laskutuskaupunki').value = firstRow.querySelector('.l-kaupunki').value;
|
|
}
|
|
} else {
|
|
billingFields.style.display = 'block';
|
|
}
|
|
});
|
|
|
|
// Add/Edit modal
|
|
document.getElementById('btn-add').addEventListener('click', () => openCustomerForm());
|
|
document.getElementById('modal-close').addEventListener('click', () => customerModal.style.display = 'none');
|
|
document.getElementById('form-cancel').addEventListener('click', () => customerModal.style.display = 'none');
|
|
|
|
function openCustomerForm(customer = null) {
|
|
const c = customer;
|
|
document.getElementById('modal-title').textContent = c ? 'Muokkaa asiakasta' : 'Lisää asiakas';
|
|
document.getElementById('form-submit').textContent = c ? 'Päivitä' : 'Tallenna';
|
|
document.getElementById('form-id').value = c ? c.id : '';
|
|
document.getElementById('form-yritys').value = c ? c.yritys : '';
|
|
document.getElementById('form-ytunnus').value = c ? (c.ytunnus || '') : '';
|
|
document.getElementById('form-yhteyshenkilo').value = c ? (c.yhteyshenkilö || '') : '';
|
|
document.getElementById('form-puhelin').value = c ? (c.puhelin || '') : '';
|
|
document.getElementById('form-sahkoposti').value = c ? (c.sahkoposti || '') : '';
|
|
document.getElementById('form-laskutusosoite').value = c ? (c.laskutusosoite || '') : '';
|
|
document.getElementById('form-laskutuspostinumero').value = c ? (c.laskutuspostinumero || '') : '';
|
|
document.getElementById('form-laskutuskaupunki').value = c ? (c.laskutuskaupunki || '') : '';
|
|
document.getElementById('form-laskutussahkoposti').value = c ? (c.laskutussahkoposti || '') : '';
|
|
document.getElementById('form-elaskuosoite').value = c ? (c.elaskuosoite || '') : '';
|
|
document.getElementById('form-elaskuvalittaja').value = c ? (c.elaskuvalittaja || '') : '';
|
|
document.getElementById('form-lisatiedot').value = c ? (c.lisatiedot || '') : '';
|
|
|
|
// Reset billing checkbox
|
|
document.getElementById('form-billing-same').checked = false;
|
|
document.getElementById('billing-fields').style.display = 'block';
|
|
|
|
// Liittymät
|
|
const container = document.getElementById('liittymat-container');
|
|
container.innerHTML = '';
|
|
const liittymat = c ? (c.liittymat || []) : [{}];
|
|
liittymat.forEach((l, i) => container.appendChild(createLiittymaRow(l, i)));
|
|
|
|
customerModal.style.display = 'flex';
|
|
document.getElementById('form-yritys').focus();
|
|
}
|
|
|
|
function editCustomer(id) {
|
|
const c = customers.find(x => x.id === id);
|
|
if (c) openCustomerForm(c);
|
|
}
|
|
|
|
async function deleteCustomer(id, name) {
|
|
if (!confirm(`Poistetaanko asiakas "${name}"?`)) return;
|
|
await apiCall('customer_delete', 'POST', { id });
|
|
await loadCustomers();
|
|
}
|
|
|
|
customerForm.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const id = document.getElementById('form-id').value;
|
|
|
|
// If "same as" checked, sync billing from first liittymä
|
|
if (document.getElementById('form-billing-same').checked) {
|
|
const firstRow = document.querySelector('.liittyma-row');
|
|
if (firstRow) {
|
|
document.getElementById('form-laskutusosoite').value = firstRow.querySelector('.l-asennusosoite').value;
|
|
document.getElementById('form-laskutuspostinumero').value = firstRow.querySelector('.l-postinumero').value;
|
|
document.getElementById('form-laskutuskaupunki').value = firstRow.querySelector('.l-kaupunki').value;
|
|
}
|
|
}
|
|
|
|
const data = {
|
|
yritys: document.getElementById('form-yritys').value,
|
|
ytunnus: document.getElementById('form-ytunnus').value,
|
|
yhteyshenkilö: document.getElementById('form-yhteyshenkilo').value,
|
|
puhelin: document.getElementById('form-puhelin').value,
|
|
sahkoposti: document.getElementById('form-sahkoposti').value,
|
|
laskutusosoite: document.getElementById('form-laskutusosoite').value,
|
|
laskutuspostinumero: document.getElementById('form-laskutuspostinumero').value,
|
|
laskutuskaupunki: document.getElementById('form-laskutuskaupunki').value,
|
|
laskutussahkoposti: document.getElementById('form-laskutussahkoposti').value,
|
|
elaskuosoite: document.getElementById('form-elaskuosoite').value,
|
|
elaskuvalittaja: document.getElementById('form-elaskuvalittaja').value,
|
|
lisatiedot: document.getElementById('form-lisatiedot').value,
|
|
liittymat: collectLiittymatFromForm(),
|
|
};
|
|
|
|
if (id) {
|
|
data.id = id;
|
|
await apiCall('customer_update', 'POST', data);
|
|
} else {
|
|
await apiCall('customer', 'POST', data);
|
|
}
|
|
|
|
customerModal.style.display = 'none';
|
|
await loadCustomers();
|
|
});
|
|
|
|
// Close modals on backdrop click
|
|
customerModal.addEventListener('click', (e) => {
|
|
if (e.target === customerModal) customerModal.style.display = 'none';
|
|
});
|
|
detailModal.addEventListener('click', (e) => {
|
|
if (e.target === detailModal) detailModal.style.display = 'none';
|
|
});
|
|
|
|
// ESC to close modals
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') {
|
|
customerModal.style.display = 'none';
|
|
detailModal.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// Init
|
|
checkAuth();
|