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

v0.4.1: UI opgeschoond — tabbladen, iconen, uniforme labels, T-cyclus

Browse Source 
- core/ui-kit.js: gedeelde velden/schakelaars/tabs/specificatiekaarten
- Bootstrap Icons lokaal (css/vendor, font ingebed)
- Woning- en unit-instellingen in tabbladen, labels gestandaardiseerd
- Specificaties onder 3D als kaarten
- T: standaard -> 3D groot -> alleen render -> standaard

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Machiel
2026-09-30 11:51:18 +02:00
co-authored by Claude Opus 5.5
parent c690e72d13
commit 3591fad220
11 changed files with 597 additions and 426 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/floor/floor.js
+67 -73
View File
@@ -32,11 +32,11 @@ const FLOOR_TEMPLATE = `
<div id="floor-left-column">
<div id="floor-pane-2d-container">
<div class="pane-2d-sub" id="floor-pane-top">
<div class="pane-label">2D BOVENAANZICHT</div>
<div class="pane-label">BOVENAANZICHT</div>
<canvas id="floor-canvas-top"></canvas>
</div>
<div class="pane-2d-sub" id="floor-pane-section">
<div class="pane-label">DOORSNEDE (BALKPROFIEL)</div>
<div class="pane-label">DOORSNEDE</div>
<canvas id="floor-canvas-section"></canvas>
</div>
</div>
@@ -46,59 +46,59 @@ const FLOOR_TEMPLATE = `
<span id="f-io-status" class="io-status"></span>
</div>
<div class="tab-bar">
<button class="tab-btn active" data-tab="floor-tab-main">1. Vloer Opbouw</button>
<button class="tab-btn" data-tab="floor-tab-openings">2. Doorvoeren</button>
<button class="tab-btn" data-tab="floor-tab-chassis">3. Chassis</button>
<button class="tab-btn active" data-tab="floor-tab-main"><i class="bi bi-rulers"></i> Opbouw</button>
<button class="tab-btn" data-tab="floor-tab-openings"><i class="bi bi-bullseye"></i> Doorvoeren</button>
<button class="tab-btn" data-tab="floor-tab-chassis"><i class="bi bi-truck"></i> Chassis</button>
</div>
<div id="floor-tab-main" class="tab-content active">
<div class="controls-grid">
<div>
<h1>Vloer Dimensies (mm)</h1>
<div class="control-group"><label>Breedte:</label>
<h1><i class="bi bi-rulers"></i> Afmetingen</h1>
<div class="control-group"><label>Breedte</label>
<div><input type="number" id="f-inp-width" value="2000" step="50"><span class="unit">mm</span></div></div>
<div class="control-group"><label>Diepte:</label>
<div class="control-group"><label>Diepte</label>
<div><input type="number" id="f-inp-depth" value="2000" step="50"><span class="unit">mm</span></div></div>
<div class="divider"></div>
<h1>Vloerbalken</h1>
<div class="control-group"><label>Balk Breedte:</label>
<h1><i class="bi bi-columns-gap"></i> Vloerbalken</h1>
<div class="control-group"><label>Breedte</label>
<div><input type="number" id="f-inp-joist-w" value="70" step="5"><span class="unit">mm</span></div></div>
<div class="control-group"><label>Balk Hoogte:</label>
<div class="control-group"><label>Hoogte</label>
<div><input type="number" id="f-inp-joist-h" value="220" step="5"><span class="unit">mm</span></div></div>
<div class="divider"></div>
<h1>Onderlaag (OSB-plaat)</h1>
<div class="control-group"><label>Dikte:</label>
<h1><i class="bi bi-layers"></i> Onderlaag OSB</h1>
<div class="control-group"><label>Dikte</label>
<div><input type="number" id="f-inp-underlay-t" value="22" step="1" min="3" max="40"><span class="unit">mm</span></div></div>
</div>
<div>
<h1>Regelwerk Afstand (h.o.h.)</h1>
<div class="control-group"><label>Min. h.o.h.:</label>
<h1><i class="bi bi-arrows"></i> Regelwerk</h1>
<div class="control-group"><label>Afstand min.</label>
<div><input type="number" id="f-inp-min-sp" value="300" step="10"><span class="unit">mm</span></div></div>
<div class="control-group"><label>Max. h.o.h.:</label>
<div class="control-group"><label>Afstand max.</label>
<div><input type="number" id="f-inp-max-sp" value="600" step="10"><span class="unit">mm</span></div></div>
<div class="divider"></div>
<div class="result-row"><span>Totaal vloerbalken:</span><span data-spec="joist-count" class="highlight">-</span></div>
<div class="result-row"><span>Vloeroppervlak:</span><span data-spec="floor-area" class="highlight">-</span></div>
<div class="result-row"><span>Volume balkhout:</span><span data-spec="joist-m3" class="highlight">-</span></div>
<div class="result-row"><span>Gewicht balkhout:</span><span data-spec="joist-kg" class="highlight">-</span></div>
<div class="result-row"><span>Vloerbalken</span><span data-spec="joist-count" class="highlight">-</span></div>
<div class="result-row"><span>Vloeroppervlak</span><span data-spec="floor-area" class="highlight">-</span></div>
<div class="result-row"><span>Volume balkhout</span><span data-spec="joist-m3" class="highlight">-</span></div>
<div class="result-row"><span>Gewicht balkhout</span><span data-spec="joist-kg" class="highlight">-</span></div>
<div class="divider"></div>
<div class="result-row"><span>OSB-plaat oppervlak:</span><span data-spec="osb-m2" class="highlight">-</span></div>
<div class="result-row"><span>OSB-plaat volume:</span><span data-spec="osb-m3" class="highlight">-</span></div>
<div class="result-row"><span>OSB-plaat gewicht:</span><span data-spec="osb-kg" class="highlight">-</span></div>
<div class="result-row"><span>OSB oppervlak</span><span data-spec="osb-m2" class="highlight">-</span></div>
<div class="result-row"><span>OSB volume</span><span data-spec="osb-m3" class="highlight">-</span></div>
<div class="result-row"><span>OSB gewicht</span><span data-spec="osb-kg" class="highlight">-</span></div>
<div class="divider"></div>
<div class="result-row"><span>Isolatie-inhoud (leegte):</span><span data-spec="void-m3" class="highlight">-</span></div>
<div class="result-row"><span>Totaal gewicht vloer:</span><span data-spec="total-kg" class="highlight">-</span></div>
<div class="result-row"><span>Isolatie</span><span data-spec="void-m3" class="highlight">-</span></div>
<div class="result-row"><span>Totaal gewicht</span><span data-spec="total-kg" class="highlight">-</span></div>
</div>
</div>
</div>
<div id="floor-tab-openings" class="tab-content">
<button id="f-btn-add-opening" class="add-opening-btn">+ Doorvoer Toevoegen</button>
<button id="f-btn-add-opening" class="add-opening-btn"><i class="bi bi-plus-lg"></i> Doorvoer toevoegen</button>
<div id="f-openings-global-warn" class="global-warning" style="display:none;"></div>
<div id="f-openings-list"></div>
</div>
@@ -109,13 +109,13 @@ const FLOOR_TEMPLATE = `
</div>
<div class="controls-grid">
<div>
<div class="control-group"><label>Wieldiameter:</label>
<div class="control-group"><label>Wieldiameter</label>
<div><input type="number" id="f-inp-wheel-d" value="400" step="10" min="50"><span class="unit">mm</span></div></div>
</div>
<div>
<div class="control-group"><label>Spoorbreedte (X):</label>
<div class="control-group"><label>Spoorbreedte</label>
<div><input type="number" id="f-inp-track" value="1200" step="50" min="100"><span class="unit">mm</span></div></div>
<div class="control-group"><label>Wielbasis (Y):</label>
<div class="control-group"><label>Wielbasis</label>
<div><input type="number" id="f-inp-wheelbase" value="1200" step="50" min="100"><span class="unit">mm</span></div></div>
</div>
</div>
@@ -126,7 +126,7 @@ const FLOOR_TEMPLATE = `
<div id="floor-right-column">
<div id="floor-pane-3d">
<div class="pane-label">3D PERSPECTIEF</div>
<div class="pane-label">3D</div>
<div class="toolbar-3d" id="floor-toolbar-3d"></div>
</div>
@@ -134,27 +134,27 @@ const FLOOR_TEMPLATE = `
<div class="controls-grid">
<div>
<div class="spec-section">
<h1>Balken</h1>
<div class="result-row"><span>Vloerbalken:</span><span data-spec="joist-count" class="highlight">-</span></div>
<div class="result-row"><span>Vloeroppervlak:</span><span data-spec="floor-area" class="highlight">-</span></div>
<h1><i class="bi bi-columns-gap"></i> Balken</h1>
<div class="result-row"><span>Vloerbalken</span><span data-spec="joist-count" class="highlight">-</span></div>
<div class="result-row"><span>Vloeroppervlak</span><span data-spec="floor-area" class="highlight">-</span></div>
</div>
<div class="spec-section">
<h1>Houtwerk</h1>
<div class="result-row"><span>Volume balkhout:</span><span data-spec="joist-m3" class="highlight">-</span></div>
<div class="result-row"><span>Gewicht balkhout:</span><span data-spec="joist-kg" class="highlight">-</span></div>
<h1><i class="bi bi-tree"></i> Houtwerk</h1>
<div class="result-row"><span>Volume balkhout</span><span data-spec="joist-m3" class="highlight">-</span></div>
<div class="result-row"><span>Gewicht balkhout</span><span data-spec="joist-kg" class="highlight">-</span></div>
</div>
</div>
<div>
<div class="spec-section">
<h1>OSB-plaat (onderlaag, 22mm)</h1>
<div class="result-row"><span>Oppervlak:</span><span data-spec="osb-m2" class="highlight">-</span></div>
<div class="result-row"><span>Volume:</span><span data-spec="osb-m3" class="highlight">-</span></div>
<div class="result-row"><span>Gewicht:</span><span data-spec="osb-kg" class="highlight">-</span></div>
<h1><i class="bi bi-layers"></i> OSB onderlaag</h1>
<div class="result-row"><span>Oppervlak</span><span data-spec="osb-m2" class="highlight">-</span></div>
<div class="result-row"><span>Volume</span><span data-spec="osb-m3" class="highlight">-</span></div>
<div class="result-row"><span>Gewicht</span><span data-spec="osb-kg" class="highlight">-</span></div>
</div>
<div class="spec-section">
<h1>Isolatie &amp; totaal</h1>
<div class="result-row"><span>Inhoud leegtes:</span><span data-spec="void-m3" class="highlight">-</span></div>
<div class="result-row"><span>Totaal gewicht vloer:</span><span data-spec="total-kg" class="highlight">-</span></div>
<h1><i class="bi bi-speedometer2"></i> Isolatie en gewicht</h1>
<div class="result-row"><span>Isolatie</span><span data-spec="void-m3" class="highlight">-</span></div>
<div class="result-row"><span>Totaal gewicht</span><span data-spec="total-kg" class="highlight">-</span></div>
</div>
</div>
</div>
@@ -170,23 +170,23 @@ const FLOOR_TEMPLATE = `
</div>
<div class="controls-grid">
<div>
<div class="control-group"><label for="inp-proj-naam">Projectnaam:</label>
<div class="control-group"><label for="inp-proj-naam">Projectnaam</label>
<div><input type="text" id="inp-proj-naam" value=""></div></div>
<div class="control-group"><label for="inp-proj-plaats">Plaats:</label>
<div class="control-group"><label for="inp-proj-plaats">Plaats</label>
<div><input type="text" id="inp-proj-plaats" value=""></div></div>
<div class="control-group"><label for="inp-proj-straat">Straat:</label>
<div class="control-group"><label for="inp-proj-straat">Straat</label>
<div><input type="text" id="inp-proj-straat" value=""></div></div>
<div class="control-group"><label for="inp-proj-nummer">Projectnummer:</label>
<div class="control-group"><label for="inp-proj-nummer">Projectnummer</label>
<div><input type="text" id="inp-proj-nummer" value=""></div></div>
</div>
<div>
<div class="control-group"><label for="inp-proj-tekenaar">Tekenaar:</label>
<div class="control-group"><label for="inp-proj-tekenaar">Tekenaar</label>
<div><input type="text" id="inp-proj-tekenaar" value=""></div></div>
<div class="control-group"><label for="inp-proj-titel">Titel:</label>
<div class="control-group"><label for="inp-proj-titel">Titel</label>
<div><input type="text" id="inp-proj-titel" value="Vloer"></div></div>
<div class="control-group"><label for="inp-proj-element">Element nummer:</label>
<div class="control-group"><label for="inp-proj-element">Elementnummer</label>
<div><input type="text" id="inp-proj-element" value=""></div></div>
<div class="control-group"><label for="inp-proj-opmerking">Opmerking:</label>
<div class="control-group"><label for="inp-proj-opmerking">Opmerking</label>
<div><input type="text" id="inp-proj-opmerking" value=""></div></div>
</div>
</div>
@@ -203,18 +203,16 @@ const FLOOR_TEMPLATE = `
// (RoofModel). Zelfde editor, andere teksten + gespiegelde doorsnede/3D.
function floorTemplateForRoof() {
const r = [
['1. Vloer Opbouw', '1. Dak Opbouw'],
['Vloer Dimensies (mm)', 'Dak Dimensies (mm)'],
['<h1>Vloerbalken</h1>', '<h1>Dakbalken</h1>'],
['Onderlaag (OSB-plaat)', 'Plafondplaat (OSB, onderzijde)'],
['Totaal vloerbalken:', 'Totaal dakbalken:'],
['OSB-plaat (onderlaag, 22mm)', 'OSB-plaat (plafond)'],
['<button class="tab-btn" data-tab="floor-tab-chassis">3. Chassis</button>', ''],
['<h1>Isolatie &amp; totaal</h1>', '<h1>Dakleer, isolatie &amp; totaal</h1>\n <div class="result-row"><span>Dakleer oppervlak:</span><span data-spec="dakleer-m2" class="highlight">-</span></div>\n <div class="result-row"><span>Dakleer gewicht:</span><span data-spec="dakleer-kg" class="highlight">-</span></div>']
[' Vloerbalken</h1>', ' Dakbalken</h1>'],
['<span>Vloerbalken</span>', '<span>Dakbalken</span>'],
[' Onderlaag OSB</h1>', ' Plafondplaat OSB</h1>'],
[' OSB onderlaag</h1>', ' OSB plafond</h1>'],
['<button class="tab-btn" data-tab="floor-tab-chassis"><i class="bi bi-truck"></i> Chassis</button>', ''],
[' Isolatie en gewicht</h1>', ' Dakleer, isolatie en gewicht</h1>\n <div class="result-row"><span>Dakleer oppervlak</span><span data-spec="dakleer-m2" class="highlight">-</span></div>\n <div class="result-row"><span>Dakleer gewicht</span><span data-spec="dakleer-kg" class="highlight">-</span></div>']
];
let t = FLOOR_TEMPLATE;
r.forEach(([a, b]) => { t = t.split(a).join(b); });
return t.split('Vloeroppervlak:').join('Dakoppervlak:').split('Totaal gewicht vloer:').join('Totaal gewicht dak:');
return t.split('Vloeroppervlak').join('Dakoppervlak');
}
function mountFloorEditor(container, callbacks) {
@@ -262,9 +260,9 @@ function mountFloorEditor(container, callbacks) {
});
function anchorLabel(a) {
if (a === 'right') return 'Afstand vanaf oostzijde (X)';
if (a === 'middle') return 'Verschuiving t.o.v. midden (X)';
return 'Afstand vanaf westzijde (X)';
if (a === 'right') return 'Afstand tot oostzijde';
if (a === 'middle') return 'Verschuiving t.o.v. midden';
return 'Afstand tot westzijde';
}
function renderOpeningsList() {
@@ -277,13 +275,13 @@ function mountFloorEditor(container, callbacks) {
</div>
<div class="controls-grid">
<div>
<div class="control-group"><label>Diameter:</label>
<div class="control-group"><label>Diameter</label>
<div><input type="number" data-field="diameter" data-id="${op.id}" value="${op.diameter}" step="5" min="10"><span class="unit">mm</span></div></div>
<div class="control-group"><label>Afstand vanaf noordzijde (Y):</label>
<div class="control-group"><label>Afstand tot noordzijde</label>
<div><input type="number" data-field="offsetY" data-id="${op.id}" value="${op.offsetY}" step="50"><span class="unit">mm</span></div></div>
</div>
<div>
<div class="control-group"><label>Anker (X):</label>
<div class="control-group"><label>Anker</label>
<div>
<select data-field="anchorX" data-id="${op.id}">
<option value="left" ${op.anchorX === 'left' ? 'selected' : ''}>West</option>
@@ -292,7 +290,7 @@ function mountFloorEditor(container, callbacks) {
</select>
</div>
</div>
<div class="control-group"><label>${anchorLabel(op.anchorX)}:</label>
<div class="control-group"><label>${anchorLabel(op.anchorX)}</label>
<div><input type="number" data-field="offsetX" data-id="${op.id}" value="${op.offsetX}" step="50"><span class="unit">mm</span></div></div>
</div>
</div>
@@ -778,15 +776,11 @@ function mountFloorEditor(container, callbacks) {
window.addEventListener('resize', onWindowResize);
function toggleFullscreen3D() {
const el = document.getElementById('floor-app');
el.classList.remove('fullscreen-2d');
el.classList.toggle('fullscreen-3d');
UI.cycle3D(document.getElementById('floor-app')); // T: standaard -> 3D groot -> alleen render
requestAnimationFrame(onWindowResize);
}
function toggleFullscreen2D() {
const el = document.getElementById('floor-app');
el.classList.remove('fullscreen-3d');
el.classList.toggle('fullscreen-2d');
UI.toggle2D(document.getElementById('floor-app'));
requestAnimationFrame(onWindowResize);
}