Ajout de boutons pour choisir le contexte

Author: betalabmi

CHANGELOG.md

@@ -1,15 +1,28 @@
 # Changelog
 
+## [2.2.0]
+
+- Ajout de boutons pour choisir le contexte
+- Correction de liens erronés, et informations manquantes
+
+## [2.1.0]
+
+- Correction de motif
+- Reconstruction du formulaire
+- Modification du pdf (certificate.pdf)
+- Repositionnement des textes ajoutés
+
 ## [2.0.0]
 
 - Reconstruction du formulaire
 - Modification du pdf
 - Repositionnement des textes ajoutés
+
 ## [1.1.0]
 
 - Modification du pdf (certificate.pdf)
 - Repositionnement des textes ajoutés
-- Accessibilité : ajout d'un texte (en blanc) pour indiquer aux lecteurs de pdf audio la présence d'un QR-code dans le document généré
+- Accessibilité : ajout d'un texte (en blanouton pour choisir le contextec) pour indiquer aux lecteurs de pdf audio la présence d'un QR-code dans le document généré
 
 ## [1.1.1]
 

README.md

@@ -39,6 +39,8 @@ Les projets open source suivants ont été utilisés pour le développement de c
 service :
 
 - [PDF-LIB](https://pdf-lib.js.org/)
+- [remove-accents](https://github.com/tyxla/remove-accents)
+- [secure-ls](https://github.com/softvar/secure-ls)
 - [qrcode](https://github.com/soldair/node-qrcode)
 - [Bootstrap](https://getbootstrap.com/)
 - [Font Awesome](https://fontawesome.com/license)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "attestation-derogatoire-de-deplacement",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "Générateur d'attestation de déplacement dérogatoire'",
   "main": "certificate.js",
   "scripts": {

package.json

@@ -129,6 +129,34 @@ a {
   }
 }
 
+@media (prefers-color-scheme: dark) {
+  a.curfew-button {
+    color: white;
+    background-color: #43436B;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  #curfew-reason-fieldset.targeted {
+    color: white;
+    background-color: #43436B;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  #curfew-reason-fieldset.targeted.in-quarantine {
+    color: white;
+    background-color: #6B0B0B;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  #quarantine-reason-fieldset.targeted {
+    color: white;
+    background-color: #6B0B0B;
+  }
+}
+
 p {
   color: black;
 }
@@ -664,10 +692,10 @@ input[type=number] {
 }
 
 .fieldset {
-  margin-left: -1.25em;
-  margin-right: -1.25em;
-  padding-left: 1.25em;
-  padding-right: 1.25em;
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
   border: 3px solid transparent;
 }
 
@@ -678,3 +706,89 @@ input[type=number] {
 .fieldset-error {
   border: 3px solid red;
 }
+
+.sanitary-context ~ * {
+  display: none
+}
+
+.sanitary-context ~ label {
+  display: block
+} 
+
+.sanitary-context:checked ~ * {
+  display: block;
+}
+
+#curfew-reason-fieldset {
+  display: none;
+  background: #DDF;
+}
+#curfew-reason-fieldset.targeted,
+#quarantine-reason-fieldset.targeted  {
+  display: block;
+}
+#quarantine-reason-fieldset {
+  display: none;
+  background: #FEE;
+}
+
+.curfew-button {
+  display: block;
+  width: 40%;
+  text-decoration: none;
+  background: #DDF;
+}
+
+.quarantine-button {
+  display: block;
+  width: 40%;
+  text-decoration: none;
+  background: #FEE;
+}
+
+#formgroup-storedata {
+  clear: both;
+  padding-top: 2rem !important;
+}
+
+.context-title {
+  font-size: 1.2em;
+  font-weight: bold;
+}
+.context-subtitle {
+  font-size: 0.8rem;
+}
+
+.context-wrapper-error {
+  border: 1px solid red;
+  padding: 1%;
+}
+
+.context-wrapper-error .context-title {
+  color: red;
+}
+
+.button-wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+
+#curfew-reason-fieldset.in-quarantine {
+  background: #FEE;
+}
+
+#curfew-reason-fieldset.targeted {
+  display: block;
+}
+
+.fieldset-wrapper.fieldset-error {
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.quarantine-subtitle,
+.curfew-subtitle {
+  padding: 1rem 0;
+}

src/certificate.pdf

@@ -103,7 +103,7 @@
       "items": [
         {
           "code": "travail",
-          "label": "<strong> 1. Activité professionnelle enseignement et formation </strong> <br> Déplacements entre le domicile et le lieu d’exercice de l’activité professionnelle ou le lieu d’enseignement et de formation, déplacements professionnels ne pouvant être différés ;"
+          "label": "<strong> 1. Activité professionnelle, enseignement et formation </strong> <br> Déplacements entre le domicile et le lieu d’exercice de l’activité professionnelle ou le lieu d’enseignement et de formation, déplacements professionnels ne pouvant être différés ;"
         },
         {
           "code": "sante",
@@ -119,7 +119,7 @@
         },
         {
           "code": "judiciaire",
-          "label": "<strong> 5. Convocation judiciaire ou administrative </strong> <br> Déplacements pour répondre à une convocation judiciaire ou administrative. ;"
+          "label": "<strong> 5. Convocation judiciaire ou administrative </strong> <br> Déplacements pour répondre à une convocation judiciaire ou administrative, déplacements pour se rendre chez un professionnel du droit, pour un acte ou une démarche qui ne peuvent être réalisés à distance ;"
         },
         {
           "code": "missions",
@@ -132,7 +132,7 @@
         {
           "code": "animaux",
           "label": "<strong> 8. Animaux de compagnie </strong> <br>Déplacements brefs autour du domicile pour les besoins des animaux de compagnie <a class=\"footnote\" href=\"#footnote2\">[2]</a> ;"
-        },
+        }
       ]
     },
     {
@@ -153,7 +153,7 @@
         },
         {
           "code": "demarche",
-          "label": "<strong> 12. Démarches administratives ou juridiques </strong> <br> Déplacements pour se rendre dans un service public ou chez un professionnel du droit, pour un acte ou une démarche qui ne peuvent être réalisés à distance."
+          "label": "<strong> 12. Démarches administratives ou juridiques </strong> <br> Déplacements pour se rendre dans un service public."
         }
       ]
     }

src/css/main.css

@@ -15,8 +15,8 @@
     <meta property="og:title" content="Générateur d'attestation de déplacement dérogatoire  - COVID-19" />
     <meta property="og:locale" content="fr_FR" />
     <meta property="og:description" content="Ce service officiel génère une version numérique de la déclaration de déplacement covid-19 à présenter aux forces de sécurité lors d’un contrôle." />
-    <link rel="canonical" href="https://media.interieur.gouv.fr{{ PUBLIC_URL || '/deplacement-covid-19' }}" />
-    <meta property="og:url" content="https://media.interieur.gouv.fr{{ PUBLIC_URL || '/deplacement-covid-19' }}" />
+    <link rel="canonical" href="https://media.interieur.gouv.fr{{ PUBLIC_URL || '/attestation-deplacement-derogatoire-covid-19' }}" />
+    <meta property="og:url" content="https://media.interieur.gouv.fr{{ PUBLIC_URL || '/attestation-deplacement-derogatoire-covid-19' }}" />
     <meta property="og:site_name" content="Générateur d'attestation de déplacement dérogatoire  - COVID-19" />
     <script type='application/ld+json'>{"@context":"http://www.schema.org","@type":"GovernmentOrganization","name":"Générateur d'attestation de déplacement dérogatoire  - COVID-19","description":"Ce service officiel génère une version numérique de la déclaration de déplacement covid-19 à présenter aux forces de sécurité lors d’un contrôle.","address":{"@type":"PostalAddress","addressCountry":"France"}}</script>
 

src/form-data.json

@@ -133,7 +133,7 @@ export function getReasons (reasonInputs) {
   return reasons
 }
 
-export function prepareInputs (formInputs, reasonInputs, reasonFieldset, reasonAlert, snackbar, releaseDateInput) {
+export function prepareInputs (formInputs, reasonInputs, reasonFieldsetsWrapper, reasonAlerts, snackbar, releaseDateInput, contextWrapper) {
   const lsProfile = secureLS.get('profile')
 
   // Continue to store data if already stored
@@ -167,8 +167,8 @@ export function prepareInputs (formInputs, reasonInputs, reasonFieldset, reasonA
   reasonInputs.forEach(radioInput => {
     radioInput.addEventListener('change', function (event) {
       const isInError = reasonInputs.every(input => !input.checked)
-      reasonFieldset.classList.toggle('fieldset-error', isInError)
-      reasonAlert.classList.toggle('hidden', !isInError)
+      reasonFieldsetsWrapper.classList.toggle('fieldset-error', isInError)
+      reasonAlerts.map(reasonAlert => reasonAlert.classList.toggle('hidden', !isInError))
     })
   })
   $('#cleardata').addEventListener('click', () => {
@@ -183,11 +183,15 @@ export function prepareInputs (formInputs, reasonInputs, reasonFieldset, reasonA
   $('#generate-btn').addEventListener('click', async (event) => {
     event.preventDefault()
 
+    if ($$('.targeted').length === 0) {
+      contextWrapper.classList.add('context-wrapper-error')
+    }
+
     const reasons = getReasons(reasonInputs)
     if (!reasons) {
-      reasonFieldset.classList.add('fieldset-error')
-      reasonAlert.classList.remove('hidden')
-      reasonFieldset.scrollIntoView && reasonFieldset.scrollIntoView()
+      reasonFieldsetsWrapper.classList.add('fieldset-error')
+      reasonAlerts.map(reasonAlert => reasonAlert.classList.remove('hidden'))
+      // reasonFieldsetsWrapper.scrollIntoView && reasonFieldsetsWrapper.scrollIntoView()
       return
     }
 
@@ -207,15 +211,39 @@ export function prepareInputs (formInputs, reasonInputs, reasonFieldset, reasonA
     downloadBlob(pdfBlob, `attestation-${creationDate}_${creationHour}.pdf`)
     showSnackbar(snackbar, 6000)
   })
+
+  const curfewFieldset = $('#curfew-reason-fieldset')
+  const quarantineFieldset = $('#quarantine-reason-fieldset')
+  const curfewSubtitle = $('.curfew-subtitle')
+  const quarantineSubtitle = $('.quarantine-subtitle')
+  $$('.context-button').map(anchor => anchor.addEventListener('click', (event) => {
+    contextWrapper.classList.remove('context-wrapper-error')
+    reasonFieldsetsWrapper.classList.toggle('hidden', false)
+    if (event.target.className.includes('curfew-button')) {
+      curfewFieldset.classList.toggle('in-quarantine', false)
+      curfewFieldset.classList.toggle('targeted', true)
+      quarantineFieldset.classList.toggle('targeted', false)
+      curfewSubtitle.classList.toggle('hidden', false)
+      quarantineSubtitle.classList.toggle('hidden', true)
+    }
+    if (event.target.className.includes('quarantine-button')) {
+      curfewFieldset.classList.toggle('in-quarantine', true)
+      curfewFieldset.classList.toggle('targeted', true)
+      quarantineFieldset.classList.toggle('targeted', true)
+      curfewSubtitle.classList.toggle('hidden', true)
+      quarantineSubtitle.classList.toggle('hidden', false)
+    }
+  }))
 }
 
 export function prepareForm () {
   const formInputs = $$('#form-profile input')
   const snackbar = $('#snackbar')
   const reasonInputs = [...$$('input[name="field-reason"]')]
-  const reasonFieldset = $('#reason-fieldset')
-  const reasonAlert = reasonFieldset.querySelector('.msg-alert')
+  const reasonFieldsetsWrapper = $('.fieldset-wrapper')
+  const reasonAlerts = $$('.msg-alert')
   const releaseDateInput = $('#field-datesortie')
+  const contextWrapper = $('.context-wrapper')
   setReleaseDateTime(releaseDateInput)
-  prepareInputs(formInputs, reasonInputs, reasonFieldset, reasonAlert, snackbar, releaseDateInput)
+  prepareInputs(formInputs, reasonInputs, reasonFieldsetsWrapper, reasonAlerts, snackbar, releaseDateInput, contextWrapper)
 }