diff --git a/public/js/app.js b/public/js/app.js index bf73b370db..54123fdfb1 100755 --- a/public/js/app.js +++ b/public/js/app.js @@ -25,6 +25,121 @@ forms.forEach((form) => { }) }) }) + form?.querySelectorAll('input[type="file"]')?.forEach((file) => { + file.addEventListener('change', (event) => { + if (event.target.files.length > 0) { + let resTextEl = event.target.parentElement.nextElementSibling; + let fileData = new FormData(); + let deleter = event.target.parentElement.parentElement.querySelector('.signalement-uploadedfile-delete'), + /*src = URL.createObjectURL(event.target.files[0]),*/ + preview = event.target?.parentElement?.querySelector('img'), + fileIsOk = false, file = event.target.files[0]; + let id = event.target.id; + let progress = document.querySelector("#progress_" + id); + let totalProgress = document.querySelector('#form_global_file_progress'); + if (preview) { + if (event.target.files[0].type === 'image/heic' || event.target.files[0].type === 'image/heif') { + event.target.value = ""; + resTextEl.innerHTML = "Les fichiers de format HEIC/HEIF ne sont pas pris en charge, merci de convertir votre image en JPEG ou en PNG avant de l'envoyer."; + resTextEl.classList.remove('fr-hidden') + } else if (event.target.files[0].size > 10 * 1024 * 1024) { + event.target.value = ""; + resTextEl.innerHTML = "L'image dépasse 10MB"; + resTextEl.classList.remove('fr-hidden') + } else { + preview.src = URL.createObjectURL(file); + ['fr-icon-camera-fill', 'fr-py-7v', 'fr-icon-refresh-line', 'fr-disabled'].map(v => event.target.parentElement.classList.toggle(v)); + fileIsOk = true; + } + } else if (event.target.parentElement.classList.contains('fr-icon-attachment-fill')) { + if (event.target.files[0].type === 'image/heic' || event.target.files[0].type === 'image/heif') { + event.target.value = ""; + resTextEl.innerHTML = "Les fichiers de format HEIC/HEIF ne sont pas pris en charge, merci de convertir votre image en JPEG ou en PNG avant de l'envoyer."; + resTextEl.classList.remove('fr-hidden') + } else if (event.target.files[0].size > 10 * 1024 * 1024) { + event.target.value = ""; + resTextEl.innerHTML = "Le document dépasse 10MB"; + resTextEl.classList.remove('fr-hidden') + } else { + resTextEl.classList.add('fr-hidden') + fileIsOk = true; + ['fr-icon-attachment-fill', 'fr-icon-refresh-line', 'fr-disabled'].map(v => event.target.parentElement.classList.toggle(v)); + } + } + if (fileIsOk) { + // [preview, deleter].forEach(el => el?.classList?.remove('fr-hidden')) + deleter.addEventListeners('click touchdown', (e) => { + e.preventDefault(); + if (preview) { + preview.src = '#'; + event.target.parentElement.classList.add('fr-icon-camera-fill') + } else if (event.target.parentElement.classList.contains('fr-icon-checkbox-circle-fill')) { + ['fr-icon-attachment-fill', 'fr-icon-checkbox-circle-fill'].map(v => event.target.parentElement.classList.toggle(v)); + } else { + event.target.parentElement.classList.add('fr-icon-attachment-fill'); + } + event.target.value = ''; + fileData.delete(event.target.name); + delete uploadedFiles[event.target.id]; + [preview, deleter].forEach(el => el?.classList.add('fr-hidden')); + event.target.parentElement.classList.remove('fr-disabled') + resTextEl.innerText = ''; + }) + fileData.append(event.target.name, file) + let request = new XMLHttpRequest(); + let finish_submit_btn = document.querySelector('#form_finish_submit'); + request.open('POST', event.target.getAttribute('data-handle-url')); + request.upload.addEventListener('progress', function (e) { + console.log('progress'); + console.log(e); + totalProgress.classList.remove('fr-hidden') + finish_submit_btn.disabled = true; + finish_submit_btn.innerHTML = 'Téléversement en cours, veuillez patienter....'; + let activeProgresses = document.querySelectorAll('progress:not(.fr-hidden,.final-progress)'); + let percent_completed = (e.loaded / e.total) * 100; + let total_percent_completed = 0; + activeProgresses.forEach(acp => { + total_percent_completed += acp.value; + }) + totalProgress.value = total_percent_completed / activeProgresses.length; + progress.value = percent_completed; + }); + request.addEventListener('load', function (e) { + console.log('load'); + console.log(e); + event.target.parentElement.classList.remove('fr-icon-refresh-line'); + [preview, deleter].forEach(el => el?.classList?.remove('fr-hidden')); + progress.value = 0; + let jsonRes = JSON.parse(request.response) + if (request.status !== 200) { + progress.value = 0; + deleter.click(); + resTextEl.innerText = jsonRes.error; + resTextEl.classList.remove('fr-hidden'); + resTextEl.classList.add('fr-text-label--red-marianne'); + } else { + resTextEl.innerText = jsonRes.titre + resTextEl.classList.remove('fr-hidden'); + resTextEl.classList.add('fr-text-label--green-emeraude'); + if (!preview) + ['fr-icon-checkbox-circle-fill'].map(v => event.target.parentElement.classList.toggle(v)); + uploadedFiles[event.target.id] = request.response; + } + progress.classList.add('fr-hidden'); + event.target.value = ''; + if (document.querySelectorAll('progress:not(.fr-hidden,.final-progress)').length < 1) { + totalProgress.classList.add('fr-hidden') + finish_submit_btn.innerHTML = 'Confirmer'; + finish_submit_btn.disabled = false; + } + }); + progress.classList.remove('fr-hidden') + request.send(fileData); + event.target.parentElement.classList.add('fr-disabled') + } + } + }) + }) }) document?.querySelectorAll(".fr-pagination__link").forEach((e => { let t, r, a, n = document.querySelector(".fr-pagination__link--prev"), diff --git a/templates/_partials/_modal_pictures_restrictions.html.twig b/templates/_partials/_modal_pictures_restrictions.html.twig new file mode 100755 index 0000000000..c3a0aeec0a --- /dev/null +++ b/templates/_partials/_modal_pictures_restrictions.html.twig @@ -0,0 +1,73 @@ + +
+
+
+
+
+ Fermer + +
+
+

Règlementation + des photos

+
+
+
+ Comment bien prendre vos photos ? + Quelques conseils pour bien prendre + vos photos +
    +
  • Evitez de prendre en photo des personnes ou des objets + personnels +
    • +
  • Lorsque vous prenez votre photo, assurez-vous que la + luminosité soit suffisante. +
    N’hésitez pas à activer le flash si besoin. +
    • +
  • Assurez-vous que votre photo n’est pas floue.
    • +
  • Votre photo doit permettre de rendre compte de la + situation globale. Évitez donc les photos prises en gros + plan ou les photos qui ne permettent pas de bien évaluer + la situation. +
    • +
+
+
+
+
+ Rappel concernant les interdictions de + photographie + Sont interdites les photographies + des parties communes présentant un élément + d'identification +
    +
  • d'une personne
    • +
  • d'une ou plusieurs boîtes aux lettres
    • +
  • d'éléments extérieurs
    • +
  • de numéros d'appartements
    • +
  • de noms de propriétaires ou locataires de logements
    • +
  • de plaque d’immatriculation de véhicules
    • +
+
+
+
+
+
+ +
+
+
+
+
+ \ No newline at end of file diff --git a/templates/_partials/_signalement_upload.html.twig b/templates/_partials/_signalement_upload.html.twig index 9689a574d6..f56fabe386 100755 --- a/templates/_partials/_signalement_upload.html.twig +++ b/templates/_partials/_signalement_upload.html.twig @@ -1,3 +1,4 @@ +{% include '_partials/_modal_pictures_restrictions.html.twig' %}
Joindre des photos du/des problème(s)