Skip to content

Commit

Permalink
get back pictures restrictions modal #2294
Browse files Browse the repository at this point in the history
  • Loading branch information
@emilschn
emilschn committed Mar 11, 2024
1 parent e522e27 commit 2198d6b
Show file tree
Hide file tree
Showing 3 changed files with 189 additions and 0 deletions.
115 changes: 115 additions & 0 deletions public/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
Expand Down
73 changes: 73 additions & 0 deletions templates/_partials/_modal_pictures_restrictions.html.twig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<dialog aria-labelledby="modal-photos-restrictions-title" role="dialog"
id="modal-photos-restrictions" class="fr-modal">
<div class="fr-container fr-container--fluid fr-container-md">
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-10">
<div class="fr-modal__body">
<div class="fr-modal__header">
<a href="#" class="fr-link--close fr-link" title="Fermer la fenêtre modale"
aria-controls="modal-photos-restrictions" target="_self">Fermer
</a>
</div>
<div class="fr-modal__content">
<h1 id="modal-photos-restrictions-title" class="fr-modal__title"><span
class="fr-fi-arrow-right-line fr-fi--sm"></span>Règlementation
des photos</h1>
<div class="fr-container">
<div class="fr-grid-row">
<div class="fr-col-12">
<strong>Comment bien prendre vos photos ?</strong>
<small class="fr-hint-text">Quelques conseils pour bien prendre
vos photos</small>
<ul class="fr-list">
<li>Evitez de prendre en photo des personnes ou des objets
personnels
</li>
<li>Lorsque vous prenez votre photo, assurez-vous que la
luminosité soit suffisante.
<br> N’hésitez pas à activer le flash si besoin.
</li>
<li>Assurez-vous que votre photo n’est pas floue.</li>
<li>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.
</li>
</ul>
</div>
</div>
<div class="fr-grid-row">
<div class="fr-col-12">
<strong>Rappel concernant les interdictions de
photographie</strong>
<small class="fr-hint-text">Sont interdites les photographies
des parties communes présentant un élément
d'identification</small>
<ul class="fr-list">
<li>d'une personne</li>
<li>d'une ou plusieurs boîtes aux lettres</li>
<li>d'éléments extérieurs</li>
<li>de numéros d'appartements</li>
<li>de noms de propriétaires ou locataires de logements</li>
<li>de plaque d’immatriculation de véhicules</li>
</ul>
</div>
</div>
</div>
</div>
<div class="fr-modal__footer">
<ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left">
<li>
<a href="#" class="fr-btn fr-fi-close-line"
aria-controls="modal-photos-restrictions"
target="_self" title="Fermer la fenêtre modale">
Fermer
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</dialog>
1 change: 1 addition & 0 deletions templates/_partials/_signalement_upload.html.twig
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
{% include '_partials/_modal_pictures_restrictions.html.twig' %}
<div class="fr-form-group">
<fieldset class="fr-fieldset fr-fieldset--inline fr-pl-3v">
<legend class="fr-label fr-pl-0">Joindre des photos du/des problème(s)</legend>
Expand Down

0 comments on commit 2198d6b

Please sign in to comment.