duimstok.prorail.nl/src/Application/inspectionForm.js

(function (A, D, I) {
  A.switchTab = function (tabId) {
    document.querySelectorAll('.tab-btn').forEach(btn =>
      btn.classList.toggle('active', btn.dataset.tab === tabId));
    document.querySelectorAll('.tab-panel').forEach(panel =>
      panel.classList.toggle('active', panel.id === 'panel-' + tabId));
  };

  A.resetForm = function () {
    A.state.formData = A.emptyFormData();
    document.querySelectorAll('.header-grid .value').forEach(el => el.textContent = '');
    document.querySelectorAll('#hdr_taakomschrijving, #hdr_aanleiding').forEach(el => el.textContent = '');
    document.getElementById('inp_inspecteur').value = '';
    document.getElementById('inp_inspectiedatum').value = '';
    document.getElementById('inp_techjaar').value = '';
    document.getElementById('inp_inspjaar').value = '';
    document.getElementById('inp_opmerkingen').value = '';
    document.getElementById('assessmentBody').innerHTML = '';
    const totaal = document.getElementById('totaalscore');
    totaal.textContent = '-';
    totaal.className = 'cell score-cell';
    document.getElementById('totaal_fotonummers').textContent = '';
    document.getElementById('statusFotos').textContent = "Foto's: 0";
    document.getElementById('statusSaved').textContent = '';
    document.getElementById('statusOrder').textContent = '';
    A.updateOverviewBadges();
    A.renderOverviewThumbs();
    A.switchTab('inspectie');
  };

  A.prefillFromOrder = function (order) {
    A.state.formData.orderNr = order.orderKey;
    document.getElementById('hdr_omschrijving').textContent = order.omschrijving;
    document.getElementById('hdr_eqart').textContent = order.objectsoort;
    document.getElementById('hdr_startpoint').textContent = order.startpunt;
    document.getElementById('hdr_endpoint').textContent = order.eindpunt;
    document.getElementById('hdr_orderoperatie').textContent = order.orderKey;
    document.getElementById('inp_inspecteur').value = order.inspecteur || '';
    document.getElementById('statusOrder').textContent = 'Order: ' + order.orderKey + ' | ' + order.omschrijving;
    document.getElementById('formToolbarTitle').textContent = order.omschrijving;
  };

  function buildScoreOptions(selected) {
    return '<option value="">-</option>' +
      D.SCORE_VALUES.map(v => `<option value="${v}" ${selected === v ? 'selected' : ''}>${v}</option>`).join('');
  }

  A.buildAssessmentTable = function (scoreElements) {
    const tbody = document.getElementById('assessmentBody');
    tbody.innerHTML = '';
    let currentSection = '';
    scoreElements.forEach(el => {
      const nr = parseInt(el.querySelector('NR').textContent.trim());
      const locatie = el.querySelector('LOCATIE').textContent.trim();
      const dwlScore = el.querySelector('DWL_SCORE').textContent.trim();
      const balScore = el.querySelector('BAL_SCORE').textContent.trim();
      const section = D.getSectionForNr(nr);
      if (section && section !== currentSection) {
        currentSection = section;
        const sr = document.createElement('tr');
        sr.className = 'section-row';
        sr.innerHTML = `<td colspan="6">${section}</td>`;
        tbody.appendChild(sr);
      }
      const tr = document.createElement('tr');
      tr.dataset.nr = nr;
      tr.innerHTML = `
        <td class="nr-col">${nr}</td>
        <td class="loc-col">${locatie}</td>
        <td class="score-col editable-cell"><select data-nr="${nr}" data-type="dwl">${buildScoreOptions(dwlScore)}</select></td>
        <td class="score-col editable-cell"><select data-nr="${nr}" data-type="bal">${buildScoreOptions(balScore)}</select></td>
        <td class="foto-col"><button class="foto-btn" data-action="open-photo" data-nr="${nr}" data-loc="${locatie.replace(/"/g, '&quot;')}"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>Foto's<span class="badge" id="badge_${nr}"></span></button></td>
        <td class="opm-col editable-cell"><input type="text" data-nr="${nr}" data-field="opm" placeholder=""></td>`;
      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"]');
      if (dwlScore) dwlSel.className = D.scoreClass(dwlScore);
      const balSel = tr.querySelector('select[data-type="bal"]');
      if (balScore) balSel.className = D.scoreClass(balScore);
    });

    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)));
  };

  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;
    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: '' };
    A.state.formData.scores[nr].opm = inp.value;
    A.autoSave();
  }

  A.updateTotaalscore = function () {
    const worst = D.computeWorstScore(A.state.formData.scores);
    const 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);
    if (!saved) return;
    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;
    if (saved.inspJaar) document.getElementById('inp_inspjaar').value = saved.inspJaar;
    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"]`);
        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 (oI && data.opm) oI.value = data.opm;
      }
      A.updateTotaalscore();
    }
    if (saved.photos) { A.state.formData.photos = saved.photos; A.updatePhotoBadges(); }
    if (saved.overviewPhotos) {
      A.state.formData.overviewPhotos = saved.overviewPhotos;
      A.updateOverviewBadges();
      A.renderOverviewThumbs();
    }
    document.getElementById('statusSaved').textContent = 'Eerder opgeslagen data hersteld';
  };
})(window.App.Application, window.App.Domain, window.App.Infrastructure);