diff --git a/public/css/form.css b/public/css/form.css index f32dd76..e4495b6 100644 --- a/public/css/form.css +++ b/public/css/form.css @@ -78,6 +78,39 @@ .header-grid .label { background: var(--header-bg); font-weight: 600; color: #333; } .header-grid .value { background: #fff; color: #000; } +/* Type-based visibility: hide type-specific sections by default */ +.header-grid.wissel-only, +.header-grid.overweg-only, +.header-grid.spoor-only { display: none; } +body.type-wissel .header-grid.wissel-only { display: grid; } +body.type-overweg .header-grid.overweg-only { display: grid; } +body.type-spoor .header-grid.spoor-only { display: grid; } + +.wissel-overview { display: none; } +body.type-wissel .wissel-overview { display: grid; } + +.overweg-overview { display: none; } +body.type-overweg .overweg-overview { display: block; } + +.spoor-overview { display: none; } +body.type-spoor .spoor-overview { display: block; } + +.instruction-box.wissel-only, +.instruction-box.overweg-only, +.instruction-box.spoor-only { display: none; } +body.type-wissel .instruction-box.wissel-only { display: block; } +body.type-overweg .instruction-box.overweg-only { display: block; } +body.type-spoor .instruction-box.spoor-only { display: block; } + +.svg-link-row { display: none; } +body.type-wissel .svg-link-row { display: block; } + +.ov-photo-grid { + display: grid; grid-template-columns: repeat(3, 1fr); + gap: 12px; max-width: 500px; margin: 0 auto; padding: 16px 0; +} +.ov-photo-grid .capture-label { padding: 12px 8px; } + .task-section { display: grid; grid-template-columns: 180px 1fr; border-bottom: 1px solid var(--border); diff --git a/public/index.html b/public/index.html index 1a1b07b..f903e4c 100644 --- a/public/index.html +++ b/public/index.html @@ -125,32 +125,42 @@
| Nr | Locatie in wissel | DWL Score | BAL Score | Foto's | Opmerkingen / bijzonderheden | @@ -198,12 +208,24 @@||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Nr | Locatie in wissel | DWL Score | BAL Score | Foto\'s | Opmerkingen | ||||||||||||||||||||||||||||||||||||||||||||||||||||
| Locatie | Score | Foto\'s | Opmerkingen | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Nr | KM van | KM tot | Lengte | Score | Foto\'s | Opmerkingen | ${section} | `; + sr.innerHTML = '' + section + ' | '; tbody.appendChild(sr); } - const tr = document.createElement('tr'); + var tr = document.createElement('tr'); tr.dataset.nr = nr; - tr.innerHTML = ` -${nr} | -${locatie} | -- | - | - | `; + tr.innerHTML = + ' | ' + nr + ' | ' + + '' + locatie + ' | ' + + '' + + ' | ' + + ' | ' + photoButton(nr, locatie) + ' | ' + + ''; tbody.appendChild(tr); if (!A.state.formData.scores[nr]) A.state.formData.scores[nr] = { dwl: dwlScore, bal: balScore, opm: '' }; if (!A.state.formData.photos[nr]) A.state.formData.photos[nr] = []; - - const dwlSel = tr.querySelector('select[data-type="dwl"]'); + var dwlSel = tr.querySelector('select[data-type="dwl"]'); if (dwlScore) dwlSel.className = D.scoreClass(dwlScore); - const balSel = tr.querySelector('select[data-type="bal"]'); + var balSel = tr.querySelector('select[data-type="bal"]'); if (balScore) balSel.className = D.scoreClass(balScore); }); + wireAssessmentEvents(); + }; - tbody.querySelectorAll('select[data-nr]').forEach(sel => sel.addEventListener('change', () => onScoreChange(sel))); - tbody.querySelectorAll('input[data-field="opm"]').forEach(inp => inp.addEventListener('input', () => onOpmChange(inp))); - tbody.querySelectorAll('button[data-action="open-photo"]').forEach(btn => - btn.addEventListener('click', () => A.openPhotoModal(+btn.dataset.nr, btn.dataset.loc))); + A.buildOverwegAssessment = function (scoreElements) { + var tbody = document.getElementById('assessmentBody'); + tbody.innerHTML = ''; + scoreElements.forEach((el, idx) => { + var nr = idx + 1; + var locatie = el.querySelector('LOCATIE').textContent.trim(); + var score = el.querySelector('SCORE').textContent.trim(); + var tr = document.createElement('tr'); + tr.dataset.nr = nr; + tr.innerHTML = + ' | ' + locatie + ' | ' + + '' + + ' | ' + photoButton(nr, locatie) + ' | ' + + ''; + tbody.appendChild(tr); + if (!A.state.formData.scores[nr]) A.state.formData.scores[nr] = { score: score, opm: '' }; + if (!A.state.formData.photos[nr]) A.state.formData.photos[nr] = []; + var sel = tr.querySelector('select[data-type="score"]'); + if (score) sel.className = D.scoreClass(score); + }); + wireAssessmentEvents(); + }; + + A.buildSpoorAssessment = function (scoreElements) { + var tbody = document.getElementById('assessmentBody'); + tbody.innerHTML = ''; + scoreElements.forEach(el => { + var nr = parseInt(el.querySelector('NR').textContent.trim()); + var kmVan = el.querySelector('KM_VAN').textContent.trim(); + var kmTot = el.querySelector('KM_TOT').textContent.trim(); + var lengte = el.querySelector('LENGTE').textContent.trim(); + var score = el.querySelector('SCORE').textContent.trim(); + var techJaar = el.querySelector('TECH_JAAR') ? el.querySelector('TECH_JAAR').textContent.trim() : ''; + var inspJaar = el.querySelector('INSP_JAAR') ? el.querySelector('INSP_JAAR').textContent.trim() : ''; + var tr = document.createElement('tr'); + tr.dataset.nr = nr; + tr.innerHTML = + ' | ' + nr + ' | ' + + '' + kmVan + ' | ' + + '' + kmTot + ' | ' + + '' + lengte + ' m | ' + + '' + + ' | ' + photoButton(nr, 'Segment ' + nr) + ' | ' + + ''; + tbody.appendChild(tr); + if (!A.state.formData.scores[nr]) A.state.formData.scores[nr] = { score: score, kmVan: kmVan, kmTot: kmTot, lengte: lengte, techJaar: techJaar, inspJaar: inspJaar, opm: '' }; + if (!A.state.formData.photos[nr]) A.state.formData.photos[nr] = []; + var sel = tr.querySelector('select[data-type="score"]'); + if (score) sel.className = D.scoreClass(score); + }); + wireAssessmentEvents(); + }; + + A.buildAssessmentForType = function (type, scoreElements) { + if (type === D.TYPE_WISSEL) A.buildWisselAssessment(scoreElements); + else if (type === D.TYPE_OVERWEG) A.buildOverwegAssessment(scoreElements); + else if (type === D.TYPE_SPOOR) A.buildSpoorAssessment(scoreElements); }; function onScoreChange(sel) { - const nr = parseInt(sel.dataset.nr); - const type = sel.dataset.type; - const val = sel.value; - if (!A.state.formData.scores[nr]) A.state.formData.scores[nr] = { dwl: '', bal: '', opm: '' }; - A.state.formData.scores[nr][type] = val; + var nr = parseInt(sel.dataset.nr); + var field = sel.dataset.type; + var val = sel.value; + if (!A.state.formData.scores[nr]) A.state.formData.scores[nr] = {}; + A.state.formData.scores[nr][field] = val; sel.className = D.scoreClass(val); A.updateTotaalscore(); A.autoSave(); } function onOpmChange(inp) { - const nr = parseInt(inp.dataset.nr); - if (!A.state.formData.scores[nr]) A.state.formData.scores[nr] = { dwl: '', bal: '', opm: '' }; + var nr = parseInt(inp.dataset.nr); + if (!A.state.formData.scores[nr]) A.state.formData.scores[nr] = {}; A.state.formData.scores[nr].opm = inp.value; A.autoSave(); } + function onSpoorFieldChange(inp) { + var nr = parseInt(inp.dataset.nr); + var field = inp.dataset.field; + if (!A.state.formData.scores[nr]) A.state.formData.scores[nr] = {}; + A.state.formData.scores[nr][field] = inp.value; + A.autoSave(); + } + A.updateTotaalscore = function () { - const worst = D.computeWorstScore(A.state.formData.scores); - const el = document.getElementById('totaalscore'); + var type = A.state.formData.type; + var worst; + if (type === D.TYPE_WISSEL) { + worst = D.computeWorstScore(A.state.formData.scores); + } else { + var order = ['', ...D.SCORE_VALUES]; + var wIdx = 0; var wScore = ''; + for (var data of Object.values(A.state.formData.scores)) { + var s = data.score || ''; + var m = order.indexOf(s); + if (m > wIdx) { wIdx = m; wScore = order[m]; } + } + worst = wScore; + } + var el = document.getElementById('totaalscore'); el.textContent = worst || '-'; el.className = 'cell score-cell'; if (worst) el.classList.add(D.scoreClass(worst)); }; A.loadSavedData = async function (orderNr) { - const saved = await I.loadInspection(orderNr); + var saved = await I.loadInspection(orderNr); if (!saved) return; + if (saved.type) A.applyFormType(saved.type); if (saved.inspecteur) document.getElementById('inp_inspecteur').value = saved.inspecteur; if (saved.inspectiedatum) document.getElementById('inp_inspectiedatum').value = saved.inspectiedatum; if (saved.techJaar) document.getElementById('inp_techjaar').value = saved.techJaar; @@ -123,12 +237,14 @@ if (saved.opmerkingen) document.getElementById('inp_opmerkingen').value = saved.opmerkingen; if (saved.scores) { A.state.formData.scores = saved.scores; - for (const [nr, data] of Object.entries(saved.scores)) { - const dS = document.querySelector(`select[data-nr="${nr}"][data-type="dwl"]`); - const bS = document.querySelector(`select[data-nr="${nr}"][data-type="bal"]`); - const oI = document.querySelector(`input[data-nr="${nr}"][data-field="opm"]`); + for (var [nr, data] of Object.entries(saved.scores)) { + var dS = document.querySelector('select[data-nr="' + nr + '"][data-type="dwl"]'); + var bS = document.querySelector('select[data-nr="' + nr + '"][data-type="bal"]'); + var sS = document.querySelector('select[data-nr="' + nr + '"][data-type="score"]'); + var oI = document.querySelector('input[data-nr="' + nr + '"][data-field="opm"]'); if (dS && data.dwl) { dS.value = data.dwl; dS.className = D.scoreClass(data.dwl); } if (bS && data.bal) { bS.value = data.bal; bS.className = D.scoreClass(data.bal); } + if (sS && data.score) { sS.value = data.score; sS.className = D.scoreClass(data.score); } if (oI && data.opm) oI.value = data.opm; } A.updateTotaalscore(); diff --git a/src/Application/state.js b/src/Application/state.js index 8e0de94..217ba52 100644 --- a/src/Application/state.js +++ b/src/Application/state.js @@ -13,7 +13,7 @@ function emptyFormData() { return { - orderNr: '', inspecteur: '', inspectiedatum: '', techJaar: '', inspJaar: '', + orderNr: '', type: 'wissel', inspecteur: '', inspectiedatum: '', techJaar: '', inspJaar: '', opmerkingen: '', scores: {}, photos: {}, overviewPhotos: {} }; } diff --git a/src/Application/xmlImport.js b/src/Application/xmlImport.js index f2a2ad9..6a0106f 100644 --- a/src/Application/xmlImport.js +++ b/src/Application/xmlImport.js @@ -1,42 +1,64 @@ -(function (A, I) { - A.parseAndLoadXML = function (xmlText) { - const parser = new DOMParser(); - const xml = parser.parseFromString(xmlText, 'text/xml'); - const getText = (tag) => { const el = xml.querySelector(tag); return el ? el.textContent.trim() : ''; }; +(function (A, D, I) { + function setIfExists(id, value) { + var el = document.getElementById(id); + if (el && value) el.textContent = value; + } - const orderNr = getText('AUFNR_VORNR'); + A.parseAndLoadXML = function (xmlText) { + var parser = new DOMParser(); + var xml = parser.parseFromString(xmlText, 'text/xml'); + var getText = function (tag) { var el = xml.querySelector(tag); return el ? el.textContent.trim() : ''; }; + + var eqart = getText('EQART'); + var type = D.typeFromEqart(eqart); + A.applyFormType(type); + + var orderNr = getText('AUFNR_VORNR'); A.state.formData.orderNr = orderNr; A.state.currentOrderKey = orderNr; - document.getElementById('hdr_geo').textContent = getText('GEO'); - document.getElementById('hdr_geotxt').textContent = getText('GEOTXT'); - document.getElementById('hdr_equnr').textContent = getText('EQUNR'); - document.getElementById('hdr_wisselnr').textContent = getText('WISSELNR') || getText('EQFNR_EQUI'); - document.getElementById('hdr_eqart').textContent = getText('EQART'); - document.getElementById('hdr_soort').textContent = getText('SOORT'); - document.getElementById('hdr_startpoint').textContent = getText('START_POINT'); - document.getElementById('hdr_endpoint').textContent = getText('END_POINT'); - document.getElementById('hdr_hoekverhouding').textContent = getText('HOEKVERHOUDING'); - document.getElementById('hdr_omschrijving').textContent = getText('EQKTX'); - document.getElementById('hdr_orderoperatie').textContent = getText('AUFNR_VORNR'); - document.getElementById('hdr_profiel').textContent = getText('PROFIEL'); - document.getElementById('hdr_dwarsligger').textContent = getText('DWARSLIGGER') || '-'; - document.getElementById('hdr_afwijking').textContent = getText('AFWIJKING') || '-'; - document.getElementById('hdr_hergebruikt').textContent = '-'; - document.getElementById('hdr_wisselverw').textContent = '-'; - document.getElementById('hdr_spoor').textContent = getText('SPOOR'); - document.getElementById('hdr_afschr').textContent = getText('ZAFSCHR_GRP_CODE'); - document.getElementById('hdr_meetegengebogen').textContent = '-'; - document.getElementById('hdr_classificatie').textContent = '-'; - document.getElementById('hdr_voegloos').textContent = '-'; - document.getElementById('hdr_plaatsingsdatum').textContent = I.formatDate(getText('DATUM_START')); - document.getElementById('hdr_aanschafdatum').textContent = '-'; - document.getElementById('hdr_generatie').textContent = '-'; - document.getElementById('hdr_taakomschrijving').textContent = getText('LTXA1'); - document.getElementById('hdr_aanleiding').textContent = getText('KURZTEXT'); + setIfExists('hdr_geo', getText('GEO')); + setIfExists('hdr_geotxt', getText('GEOTXT')); + setIfExists('hdr_equnr', getText('EQUNR')); + setIfExists('hdr_eqart', eqart); + setIfExists('hdr_startpoint', getText('START_POINT')); + setIfExists('hdr_endpoint', getText('END_POINT')); + setIfExists('hdr_omschrijving', getText('EQKTX')); + setIfExists('hdr_orderoperatie', getText('AUFNR_VORNR')); + setIfExists('hdr_spoor', getText('SPOOR')); + setIfExists('hdr_afschr', getText('ZAFSCHR_GRP_CODE')); + setIfExists('hdr_plaatsingsdatum', I.formatDate(getText('DATUM_START'))); + setIfExists('hdr_taakomschrijving', getText('LTXA1')); + setIfExists('hdr_aanleiding', getText('KURZTEXT')); - const eqktx = getText('EQKTX'); - if (eqktx) document.getElementById('overzichtTitle').textContent = eqktx; + if (type === D.TYPE_WISSEL) { + setIfExists('hdr_wisselnr', getText('WISSELNR') || getText('EQFNR_EQUI')); + setIfExists('hdr_soort', getText('SOORT')); + setIfExists('hdr_hoekverhouding', getText('HOEKVERHOUDING')); + setIfExists('hdr_profiel', getText('PROFIEL')); + setIfExists('hdr_dwarsligger', getText('DWARSLIGGER') || '-'); + setIfExists('hdr_afwijking', getText('AFWIJKING') || '-'); + setIfExists('hdr_hergebruikt', '-'); + setIfExists('hdr_wisselverw', '-'); + setIfExists('hdr_meetegengebogen', '-'); + setIfExists('hdr_classificatie', '-'); + setIfExists('hdr_voegloos', '-'); + setIfExists('hdr_aanschafdatum', '-'); + setIfExists('hdr_generatie', '-'); + } + + if (type === D.TYPE_OVERWEG) { + setIfExists('hdr_overwegtype', getText('TYPE')); + setIfExists('hdr_overwegbasis', getText('EQUKTX_BASIS')); + } + + if (type === D.TYPE_SPOOR) { + setIfExists('hdr_spoortype', getText('TYPE')); + setIfExists('hdr_bvscode', getText('BVS_CODE')); + } + + var eqktx = getText('EQKTX'); + if (eqktx) setIfExists('overzichtTitle', eqktx); document.getElementById('formToolbarTitle').textContent = eqktx || orderNr; if (getText('INSPECTEUR')) document.getElementById('inp_inspecteur').value = getText('INSPECTEUR'); @@ -45,8 +67,11 @@ if (getText('INSP_JAAR')) document.getElementById('inp_inspjaar').value = getText('INSP_JAAR'); if (getText('OPMERKING')) document.getElementById('inp_opmerkingen').value = getText('OPMERKING'); - A.buildAssessmentTable(xml.querySelectorAll('WISSEL_SCORE')); + if (type === D.TYPE_WISSEL) A.buildWisselAssessment(xml.querySelectorAll('WISSEL_SCORE')); + else if (type === D.TYPE_OVERWEG) A.buildOverwegAssessment(xml.querySelectorAll('OVERWEG_SCORE')); + else if (type === D.TYPE_SPOOR) A.buildSpoorAssessment(xml.querySelectorAll('SPOOR_STUK')); + document.getElementById('statusOrder').textContent = 'Order: ' + orderNr + ' | ' + eqktx; A.loadSavedData(orderNr); }; -})(window.App.Application, window.App.Infrastructure); +})(window.App.Application, window.App.Domain, window.App.Infrastructure); diff --git a/src/Domain/inspectionTypes.js b/src/Domain/inspectionTypes.js new file mode 100644 index 0000000..6d6bfe7 --- /dev/null +++ b/src/Domain/inspectionTypes.js @@ -0,0 +1,32 @@ +(function (D) { + D.TYPE_WISSEL = 'wissel'; + D.TYPE_OVERWEG = 'overweg'; + D.TYPE_SPOOR = 'spoor'; + + D.EQART_TO_TYPE = { + 'WISSEL': D.TYPE_WISSEL, + 'OVERWBEVL': D.TYPE_OVERWEG, + 'SPOORDWL': D.TYPE_SPOOR + }; + + D.OBJECTSOORT_TO_TYPE = { + 'Wissel': D.TYPE_WISSEL, + 'Overwegbevloering': D.TYPE_OVERWEG, + 'Spoor': D.TYPE_SPOOR + }; + + D.typeFromEqart = function (eqart) { + return D.EQART_TO_TYPE[eqart] || D.TYPE_WISSEL; + }; + + D.typeFromObjectsoort = function (objectsoort) { + return D.OBJECTSOORT_TO_TYPE[objectsoort] || D.TYPE_WISSEL; + }; + + D.OVERWEG_LOCATIONS = [ + 'Ligging spoor', + 'Ligging bevloering', + 'Constructieve kwaliteit', + 'Wegverharding' + ]; +})(window.App.Domain); diff --git a/src/Domain/sectionMap.js b/src/Domain/sectionMap.js index 75c4ee6..c456675 100644 --- a/src/Domain/sectionMap.js +++ b/src/Domain/sectionMap.js @@ -17,6 +17,10 @@ ovz_bl: 'Overzichtsfoto LO', ovz_br: 'Overzichtsfoto RO', foto_s3_l: 'Foto Puntstuk L', foto_s3_r: 'Foto Puntstuk R', foto_s2_l: 'Foto Midden L', foto_s2_r: 'Foto Midden R', - foto_s1_l: 'Foto Tong L', foto_s1_r: 'Foto Tong R' + foto_s1_l: 'Foto Tong L', foto_s1_r: 'Foto Tong R', + ovz_ow_1: 'Overzichtsfoto 1', ovz_ow_2: 'Overzichtsfoto 2', + foto_ligging_spoor: 'Ligging spoor', foto_ligging_bevl: 'Ligging bevloering', + foto_constr_kwal: 'Constructieve kwaliteit', foto_wegverharding: 'Wegverharding', + ovz_sp_1: 'Overzichtsfoto begin', ovz_sp_2: 'Overzichtsfoto einde' }; })(window.App.Domain); | ||||||||||||||||||||||||||