Machiel/Tectum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.6.0: ruimtes (verfemmer: functie, netto m², vloerafwerking, FIBO-wandpanelen, eigen verfkleur, vals plafond, ruimtestaat op de PDF), inrichting (sanitair, keuken, kookeiland, kasten, bed, zithoek, boiler; slepen met snappen op het wandvlak, draaien, kosten), kozijnen met deurrichting, glasdeur en schuifdeuren (inbouw/opbouw, deuren open in de loopmodus) plus dagkanten, gevel stucwerk en wandstukken splitsen met eigen gevel, dak over de hele woning met overkapping, geschilderd plafond, model Amstel als nieuw ontwerp, kosten en prijzen uit kosten/intern.csv en kosten/leveranciers.csv (CostCsv); easter egg verwijderd; overbodige comments opgeschoond (alleen copyright, uitzonderingen en valkuilen blijven)

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Machiel
2026-10-11 00:34:27 +02:00
co-authored by Claude Opus 5.5
parent b5510d56c7
commit ceda0b554d
45 changed files with 4117 additions and 3700 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/cost/cost-settings.js
+85 -36
View File
@@ -4,18 +4,12 @@
* Alle rechten voorbehouden. Gebruik uitsluitend met schriftelijke toestemming.
* Zie LICENTIE.md.
*/
// ============================================================
// cost/cost-settings.js — CostSettings: venster "Kosten & tijden". Bouwt
// het formulier automatisch uit COST_DEFAULTS (elk item een invoerveld),
// opslaan via CostModel.saveSettings (localStorage). Exporteren/importeren
// als JSON-bestand; "Standaard" zet alle velden terug op cost-defaults.js.
// Alleen UI; de rekenregels staan in CostModel.
// ============================================================
window.CostSettings = (() => {
let overlay = null;
const esc = UI.esc;
const SJABLOON_BALKEN = [[38, 235], [70, 220]];
function build() {
overlay = document.createElement('div');
@@ -26,17 +20,20 @@ window.CostSettings = (() => {
<h2>Kosten &amp; tijden</h2>
<button type="button" class="modal-close-x" data-cs="cancel">&times;</button>
</div>
<div class="cs-pricelist"></div>
<div class="cs-body"></div>
<div class="material-info">Bedragen excl. btw. Opslaan bewaart in deze browser én downloadt een JSON-bestand; een gewijzigd veld is gemarkeerd. Standaardwaarden staan in js/cost/cost-defaults.js.</div>
<div class="material-info">Bedragen excl. btw. De CSV's in kosten/ zijn leidend: Toepassen geldt tot herladen; om een wijziging te houden "intern.csv downloaden" en het bestand in kosten/ vervangen, of met "Wijzigingen downloaden" alleen de aangepaste velden (met de standaardwaarde ernaast) opslaan. Prijzen pas je aan in leveranciers.csv (CSV = daaruit, anders noodwaarde). Een veld dat afwijkt van intern.csv is gemarkeerd.</div>
<div class="modal-footer">
<button type="button" class="io-btn" data-cs="reset">Standaard</button>
<button type="button" class="io-btn" data-cs="export">Exporteren&hellip;</button>
<button type="button" class="io-btn" data-cs="export">intern.csv downloaden</button>
<button type="button" class="io-btn" data-cs="export-changes" title="Alleen de velden die afwijken van intern.csv">Wijzigingen downloaden</button>
<button type="button" class="io-btn" data-cs="import">Importeren&hellip;</button>
<span style="flex:1"></span>
<button type="button" class="io-btn" data-cs="cancel">Annuleren</button>
<button type="button" class="material-toggle-btn active" data-cs="save" style="flex:none; padding:6px 18px;">Opslaan</button>
<button type="button" class="material-toggle-btn active" data-cs="save" style="flex:none; padding:6px 18px;">Toepassen</button>
</div>
<input type="file" accept=".json,application/json" style="display:none">
<input type="file" data-file="import" accept=".csv,.json,text/csv,application/json,text/plain" style="display:none">
<input type="file" data-file="leveranciers" accept=".csv,text/csv,text/plain" style="display:none">
</div>`;
document.body.appendChild(overlay);
overlay.addEventListener('click', (e) => {
@@ -45,39 +42,93 @@ window.CostSettings = (() => {
if (!btn) return;
const a = btn.dataset.cs;
if (a === 'cancel') close();
else if (a === 'save') { // ook als JSON-bestand (om te delen/bewaren)
const v = readForm();
CostModel.saveSettings(v);
download(CostModel.exportJson(v));
else if (a === 'save') {
CostModel.saveSettings(readForm());
close();
}
else if (a === 'reset') fill(CostModel.defaultValues());
else if (a === 'export') download(CostModel.exportJson(readForm()));
else if (a === 'import') overlay.querySelector('input[type=file]').click();
else if (a === 'reset') fill(withLeveranciers(CostModel.defaultValues()));
else if (a === 'export') exportIntern();
else if (a === 'export-changes') exportChanges();
else if (a === 'import') overlay.querySelector('[data-file=import]').click();
else if (a === 'lev-load') overlay.querySelector('[data-file=leveranciers]').click();
else if (a === 'lev-clear') CostCsv.reload('leveranciers');
else if (a === 'lev-template') saveFile(CostCsv.template('leveranciers', readForm(), SJABLOON_BALKEN), 'leveranciers.csv');
});
overlay.addEventListener('input', markChanged);
overlay.querySelector('input[type=file]').addEventListener('change', (e) => {
overlay.querySelector('[data-file=import]').addEventListener('change', (e) => {
const file = e.target.files[0];
e.target.value = '';
if (!file) return;
file.text().then(txt => fill(CostModel.importJson(JSON.parse(txt))))
file.text().then(txt => fill(withLeveranciers(CostModel.importFile(txt))))
.catch(err => alert('Importeren mislukt: ' + err.message));
});
overlay.querySelector('[data-file=leveranciers]').addEventListener('change', (e) => {
const file = e.target.files[0];
e.target.value = '';
if (!file) return;
file.text().then(txt => CostCsv.loadText('leveranciers', txt, file.name))
.catch(err => alert('Leverancierslijst laden mislukt: ' + err.message));
});
CostCsv.onChange(() => {
if (!overlay.classList.contains('open')) return;
const v = readForm();
renderForm();
fill(withLeveranciers(v));
});
overlay.addEventListener('input', markChanged);
}
const levEntry = (g, k) => CostCsv.entry('leveranciers', `${g}.${k}`);
const withLeveranciers = (values) => CostCsv.overlay('leveranciers', values);
function exportIntern() {
saveFile(CostCsv.template('intern', readForm(CostModel.getSettings({ leveranciers: false }))), 'intern.csv');
}
function exportChanges() {
const text = CostCsv.changes(readForm(CostModel.getSettings({ leveranciers: false })), CostModel.defaultValues());
if (!text) return alert('Geen wijzigingen ten opzichte van intern.csv.');
const d = new Date(), p = (n) => String(n).padStart(2, '0');
saveFile(text, `wijzigingen-intern-${d.getFullYear()}${p(d.getMonth() + 1)}${p(d.getDate())}-${p(d.getHours())}${p(d.getMinutes())}.csv`);
}
function renderStatus() {
const when = (st) => st.loadedAt ? new Date(st.loadedAt).toLocaleString('nl-NL', { dateStyle: 'short', timeStyle: 'short' }) : '';
const block = (list, extra) => {
const st = CostCsv.status(list);
const head = !st.source
? `<b>${esc(st.label)}:</b> geen ${esc(st.url)} gevonden`
: `<b>${esc(st.label)}:</b> ${esc(st.name || '')}${st.source === 'tijdelijk' ? ' (tijdelijk ingeladen, tot herladen)' : ''} · ${st.count} waarden · ${esc(when(st))}`;
const issues = st.errors.map(e => `<li class="err">${esc(e)}</li>`)
.concat(st.unknown.map(u => `<li>regel ${u.line}: code ${esc(u.code)}${u.label ? ` (${esc(u.label)})` : ''} wordt (nog) niet gebruikt</li>`));
return `<div class="cs-list"><div>${head}${extra ? extra(st) : ''}</div>`
+ (issues.length ? `<details><summary>${st.errors.length} fout(en), ${st.unknown.length} onbekende code(s)</summary><ul>${issues.join('')}</ul></details>` : '') + '</div>';
};
overlay.querySelector('.cs-pricelist').innerHTML = block('intern')
+ block('leveranciers', (st) => ` <button type="button" class="io-btn" data-cs="lev-load">Tijdelijk laden&hellip;</button>`
+ `<button type="button" class="io-btn" data-cs="lev-template">Sjabloon</button>`
+ (st.source === 'tijdelijk' ? `<button type="button" class="io-btn" data-cs="lev-clear">Terug naar server</button>` : ''));
}
function renderForm() {
renderStatus();
const body = overlay.querySelector('.cs-body');
body.innerHTML = Object.entries(window.COST_DEFAULTS).map(([g, grp]) => `
<section class="cs-group">
<h3>${esc(grp.label)}</h3>
${Object.entries(grp.items).map(([k, it]) => `
<label class="cs-row">
<span class="cs-label">${esc(it.label)}</span>
${Object.entries(grp.items).map(([k, it]) => {
const lev = levEntry(g, k), int = CostCsv.entry('intern', `${g}.${k}`), price = CostCsv.isPrice(it);
const tip = lev ? `Uit leveranciers.csv${lev.supplier ? ': ' + lev.supplier : ''}${lev.article ? ', art. ' + lev.article : ''}${lev.updated ? ', ' + lev.updated : ''} (regel ${lev.line})`
: price ? `${g}.${k}: niet in leveranciers.csv, noodwaarde uit cost-defaults.js`
: `code ${g}.${k}${int ? ` (intern.csv regel ${int.line})` : ': niet in intern.csv, noodwaarde uit cost-defaults.js'}`;
return `
<label class="cs-row${lev ? ' from-list' : ''}" title="${esc(tip)}">
<span class="cs-label">${esc(CostCsv.labelOf(`${g}.${k}`, it.label))}</span>
${it.options
? `<select data-g="${g}" data-k="${k}">${Object.entries(it.options).map(([v, t]) => `<option value="${esc(v)}">${esc(t)}</option>`).join('')}</select>`
: `<input type="number" step="any" data-g="${g}" data-k="${k}">`}
: `<input type="number" step="any" data-g="${g}" data-k="${k}"${price ? ' disabled' : ''}>`}
<span class="cs-unit">${esc(it.unit || '')}</span>
</label>`).join('')}
</label>`;
}).join('')}
</section>`).join('');
}
@@ -85,36 +136,34 @@ window.CostSettings = (() => {
overlay.querySelectorAll('[data-g]').forEach(el => { el.value = values[el.dataset.g][el.dataset.k]; });
markChanged();
}
function readForm() {
const v = CostModel.getSettings();
overlay.querySelectorAll('[data-g]').forEach(el => {
function readForm(base) {
const v = base || CostModel.getSettings();
overlay.querySelectorAll('[data-g]:not(:disabled)').forEach(el => {
const it = window.COST_DEFAULTS[el.dataset.g].items[el.dataset.k];
const val = it.options ? el.value : parseFloat(el.value);
if (it.options || isFinite(val)) v[el.dataset.g][el.dataset.k] = val;
});
return v;
}
// Afwijkend van de standaard: gemarkeerd.
function markChanged() {
const def = CostModel.defaultValues();
overlay.querySelectorAll('[data-g]').forEach(el => {
const d = def[el.dataset.g][el.dataset.k];
el.closest('.cs-row').classList.toggle('changed', typeof d === 'number' ? parseFloat(el.value) !== d : el.value !== d);
el.closest('.cs-row').classList.toggle('changed', !el.disabled && typeof d === 'number' ? parseFloat(el.value) !== d : el.value !== d);
});
}
function download(obj) {
const blob = new Blob([JSON.stringify(obj, null, 2)], { type: 'application/json' });
function saveFile(text, name) {
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = `tectum-kosten-${new Date().toISOString().slice(0, 10)}.json`;
a.href = URL.createObjectURL(new Blob([text], { type: 'text/csv' }));
a.download = name;
a.click();
setTimeout(() => URL.revokeObjectURL(a.href), 1000);
}
function open() {
if (!overlay) build();
renderForm(); // opnieuw: nieuwe items in cost-defaults.js verschijnen vanzelf
renderForm();
fill(CostModel.getSettings());
overlay.classList.add('open');
}