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

(function (A, D, I) {
  A.openPhotoModal = function (nr, loc) {
    A.state.currentPhotoRow = nr;
    document.getElementById('photoModalTitle').textContent = `Foto's - Nr ${nr}: ${loc}`;
    document.getElementById('photoModal').classList.add('active');
    A.renderPhotoGrid();
  };

  A.closePhotoModal = function () {
    document.getElementById('photoModal').classList.remove('active');
    A.state.currentPhotoRow = null;
  };

  A.handlePhotoCapture = async function (e) {
    if (!e.target.files.length || A.state.currentPhotoRow === null) return;
    const row = A.state.currentPhotoRow;
    for (const file of e.target.files) {
      if (!A.state.formData.photos[row]) A.state.formData.photos[row] = [];
      A.state.formData.photos[row].push({
        dataUrl: await I.readFileAsDataUrl(file),
        timestamp: new Date().toISOString(),
        gps: await I.getGPS(),
        filename: file.name
      });
    }
    e.target.value = '';
    A.renderPhotoGrid();
    A.updatePhotoBadges();
    A.autoSave();
  };

  A.renderPhotoGrid = function () {
    const grid = document.getElementById('photoGrid');
    const row = A.state.currentPhotoRow;
    const photos = A.state.formData.photos[row] || [];
    if (!photos.length) {
      grid.innerHTML = '<p class="empty">Nog geen foto\'s.</p>';
      return;
    }
    grid.innerHTML = photos.map((p, i) => `
      <div class="photo-thumb">
        <img src="${p.dataUrl}" data-r="${row}" data-i="${i}">
        <button class="delete-btn" data-action="delete-photo" data-r="${row}" data-i="${i}">&times;</button>
        <div class="photo-time">${new Date(p.timestamp).toLocaleTimeString('nl-NL', { hour: '2-digit', minute: '2-digit' })}${p.gps ? ' \u2316' : ''}</div>
      </div>`).join('');

    grid.querySelectorAll('img[data-r]').forEach(img => img.addEventListener('click', () => {
      const ph = A.state.formData.photos[img.dataset.r]?.[+img.dataset.i];
      if (ph) A.openLightbox(ph.dataUrl);
    }));
    grid.querySelectorAll('button[data-action="delete-photo"]').forEach(btn => btn.addEventListener('click', (ev) => {
      ev.stopPropagation();
      A.deletePhoto(+btn.dataset.r, +btn.dataset.i);
    }));
  };

  A.deletePhoto = function (nr, i) {
    if (!confirm('Foto verwijderen?')) return;
    A.state.formData.photos[nr].splice(i, 1);
    A.renderPhotoGrid();
    A.updatePhotoBadges();
    A.autoSave();
  };

  A.updatePhotoBadges = function () {
    let total = 0;
    for (const [nr, photos] of Object.entries(A.state.formData.photos)) {
      const b = document.getElementById('badge_' + nr);
      if (b) b.textContent = photos.length || '';
      total += photos.length;
    }
    for (const photos of Object.values(A.state.formData.overviewPhotos)) total += photos.length;
    document.getElementById('statusFotos').textContent = `Foto's: ${total}`;
    const sum = [];
    for (const [nr, photos] of Object.entries(A.state.formData.photos)) {
      if (photos.length) sum.push(`Loc${nr}(${photos.length})`);
    }
    document.getElementById('totaal_fotonummers').textContent = sum.join(', ');
  };

  A.handleOverviewCapture = async function (e) {
    const pos = e.target.dataset.pos;
    if (!e.target.files.length || !pos) return;
    if (!A.state.formData.overviewPhotos[pos]) A.state.formData.overviewPhotos[pos] = [];
    for (const file of e.target.files) {
      A.state.formData.overviewPhotos[pos].push({
        dataUrl: await I.readFileAsDataUrl(file),
        timestamp: new Date().toISOString(),
        gps: await I.getGPS(),
        filename: file.name
      });
    }
    e.target.value = '';
    A.updateOverviewBadges();
    A.renderOverviewThumbs();
    A.autoSave();
  };

  A.updateOverviewBadges = function () {
    let tot = 0;
    for (const [pos, photos] of Object.entries(A.state.formData.overviewPhotos)) {
      const b = document.getElementById('cbadge_' + pos);
      if (b) b.textContent = photos.length || '';
      tot += photos.length;
    }
    const tb = document.getElementById('tabBadgeOvz');
    tb.textContent = tot;
    tb.classList.toggle('visible', tot > 0);
    A.updatePhotoBadges();
  };

  A.renderOverviewThumbs = function () {
    const grid = document.getElementById('overviewThumbGrid');
    const all = [];
    for (const [pos, photos] of Object.entries(A.state.formData.overviewPhotos)) {
      photos.forEach((p, i) => all.push({ pos, index: i, photo: p, label: D.overviewPositions[pos] || pos }));
    }
    if (!all.length) {
      grid.innerHTML = '<div class="no-photos">Nog geen foto\'s gemaakt.</div>';
      return;
    }
    grid.innerHTML = all.map(it => `
      <div class="thumb-item">
        <img src="${it.photo.dataUrl}" data-pos="${it.pos}" data-idx="${it.index}">
        <button class="thumb-del" data-action="delete-ov-photo" data-pos="${it.pos}" data-idx="${it.index}">&times;</button>
        <div class="thumb-label">${it.label}</div>
      </div>`).join('');

    grid.querySelectorAll('img[data-pos]').forEach(img => img.addEventListener('click', ev => {
      ev.stopPropagation();
      const ph = A.state.formData.overviewPhotos[img.dataset.pos]?.[+img.dataset.idx];
      if (ph) A.openLightbox(ph.dataUrl);
    }));
    grid.querySelectorAll('button[data-action="delete-ov-photo"]').forEach(btn => btn.addEventListener('click', ev => {
      ev.stopPropagation();
      A.deleteOvPhoto(btn.dataset.pos, +btn.dataset.idx);
    }));
  };

  A.deleteOvPhoto = function (pos, i) {
    if (!confirm('Foto verwijderen?')) return;
    A.state.formData.overviewPhotos[pos].splice(i, 1);
    if (!A.state.formData.overviewPhotos[pos].length) delete A.state.formData.overviewPhotos[pos];
    A.updateOverviewBadges();
    A.renderOverviewThumbs();
    A.autoSave();
  };

  A.initOverviewCapture = function () {
    document.querySelectorAll('.capture-label input[type="file"]').forEach(inp =>
      inp.addEventListener('change', A.handleOverviewCapture));
  };

  A.openLightbox = function (src) {
    document.getElementById('lightboxImg').src = src;
    document.getElementById('lightbox').classList.add('active');
  };

  A.closeLightbox = function () {
    document.getElementById('lightbox').classList.remove('active');
    document.getElementById('lightboxImg').src = '';
  };
})(window.App.Application, window.App.Domain, window.App.Infrastructure);