Ajout de boutons rapide pour des attestations en un clic

src/css/main.css

@@ -356,6 +356,10 @@ input[type=number] {
   background-color: #3031C1;
 }
 
+.btn-quick {
+  width: 100%;
+}
+
 .btn-clear-data {
     margin: 30px auto;
     max-width: 400px;
@@ -672,4 +676,4 @@ input[type=number] {
 
 .fieldset-error {
   border: 3px solid red;
-}
+}

src/form-data.json

@@ -103,38 +103,47 @@
       "items": [
         {
           "code": "travail",
+          "labelShort": "💼 🔧 Travail",
           "label": "Déplacements entre le domicile et le lieu d’exercice de l’activité professionnelle ou un établissement d’enseignement ou de formation, déplacements professionnels ne pouvant être différés <a class=\"footnote\" href=\"#footnote2\">[2]</a> , déplacements pour un concours ou un examen."
         },
         {
-          "code": "achats",
-          "label": "Déplacements pour effectuer des achats de fournitures nécessaires à l'activité professionnelle, des achats de première nécessité <a class=\"footnote\" href=\"#footnote3\">[3]</a> dans des établissements dont les activités demeurent autorisées, le retrait de commande et les livraisons à domicile ;"
+          "code": "achats_culturel_cultuel",
+          "labelShort": "🛒 📖 Achats, Culture",
+          "label": "Déplacements pour se rendre dans un établissement culturel autorisé ou un lieu de culte ; déplacements pour effectuer des achats de biens, pour des services dont la fourniture est autorisée, pour les retraits de commandes et les livraisons à domicile ;"
         },
         {
           "code": "sante",
+          "labelShort": "🏥 Santé",
           "label": "Consultations, examens et soins ne pouvant être assurés à distance et l’achat de médicaments ;"
         },
         {
           "code": "famille",
+          "labelShort": "👵 👶 Famille",
           "label": " Déplacements pour motif familial impérieux, pour l'assistance aux personnes vulnérables et précaires ou la garde d'enfants ;"
         },
         {
           "code": "handicap",
+          "labelShort": "🦽 Handicap",
           "label": "Déplacement des personnes en situation de handicap et leur accompagnant ;"
         },
         {
           "code": "sport_animaux",
+          "labelShort": "👟 🐶 Sport, promenade, animaux",
           "label": "Déplacements brefs, dans la limite d'une heure quotidienne et dans un rayon maximal d'un kilomètre autour du domicile, liés soit à l'activité physique individuelle des personnes, à l'exclusion de toute pratique sportive collective et de toute proximité avec d'autres personnes, soit à la promenade avec les seules personnes regroupées dans un même domicile, soit aux besoins des animaux de compagnie ;"
         },
         {
           "code": "convocation",
+          "labelShort": "Convocation",
           "label": " Convocation judiciaire ou administrative et pour se rendre dans un service public ;"
         },
         {
           "code": "missions",
+          "labelShort": "Mission d'intérêt général",
           "label": " Participation à des missions d'intérêt général sur demande de l'autorité administrative ;"
         },
         {
           "code": "enfants",
+          "labelShort": "🚸 Accompagnement enfants",
           "label": "Déplacement pour chercher les enfants à l’école et à l’occasion de leurs activités périscolaires."
         }
       ]

src/index.html

@@ -46,8 +46,8 @@ <h1 class="flex flex-wrap">
                 </span>
             </h1>
             <p class="text-desc">
-                En application du décret n°2020-1310 du 29 octobre 2020 prescrivant les mesures générales 
-                nécessaires pour faire face à l'épidémie de Covid19 dans le cadre de l'état d'urgence sanitaire 
+                En application du décret n°2020-1310 du 29 octobre 2020 prescrivant les mesures générales
+                nécessaires pour faire face à l'épidémie de Covid19 dans le cadre de l'état d'urgence sanitaire
             </p>
 
         </div>

src/js/form-util.js

@@ -137,7 +137,7 @@ export function prepareInputs (formInputs, reasonInputs, reasonFieldset, reasonA
   const lsProfile = secureLS.get('profile')
 
   // Continue to store data if already stored
-  storeDataInput.checked = !!lsProfile
+  storeDataInput.checked = true
   formInputs.forEach((input) => {
     if (input.name && lsProfile && input.name !== 'datesortie' && input.name !== 'heuresortie' && input.name !== 'field-reason') {
       input.value = lsProfile[input.name]
@@ -180,7 +180,7 @@ export function prepareInputs (formInputs, reasonInputs, reasonFieldset, reasonA
   $('#field-storedata').addEventListener('click', () => {
     updateSecureLS(formInputs)
   })
-  $('#generate-btn').addEventListener('click', async (event) => {
+  const generate = async (event) => {
     event.preventDefault()
 
     const reasons = getReasons(reasonInputs)
@@ -206,6 +206,21 @@ export function prepareInputs (formInputs, reasonInputs, reasonFieldset, reasonA
 
     downloadBlob(pdfBlob, `attestation-${creationDate}_${creationHour}.pdf`)
     showSnackbar(snackbar, 6000)
+  }
+  $('#generate-btn').addEventListener('click', generate)
+  $$('.btn-quick').forEach(b => {
+    b.addEventListener('click', (event) => {
+      event.preventDefault()
+
+      $$('input[name="field-reason"]').forEach(input => {
+        input.checked = false
+      })
+      $('#checkbox-' + b.getAttribute('value')).checked = true
+      const now = new Date()
+      $('#field-datesortie').valueAsDate = now
+      $('#field-heuresortie').value = now.toTimeString().substring(0, 5)
+      generate(event)
+    })
   })
 }
 

src/js/form.js

@@ -127,6 +127,23 @@ const createReasonFieldset = (reasonsData) => {
   return fieldset
 }
 
+const createQuickBtns = (reasonData) => {
+  const res = []
+  res.push(createElement('p', {
+    innerHTML: 'Ces boutons rapides remplissent les champs date, heure et motif et génèrent l\'attestation (remplir les autres champs la première fois) :',
+  }))
+  reasonData.items.forEach((reason) => {
+    const p = createElement('p')
+    p.append(createElement('button', {
+      innerHTML: reason.labelShort || reason.code,
+      value: reason.code,
+      className: 'btn btn-primary btn-quick',
+    }))
+    res.push(p)
+  })
+  return res
+}
+
 export function createForm () {
   const form = $('#form-profile')
   // Évite de recréer le formulaire s'il est déjà créé par react-snap (ou un autre outil de prerender)
@@ -143,7 +160,7 @@ export function createForm () {
     .map((field,
       index) => {
       const formGroup = createFormGroup({
-        autofocus: index === 0,
+        // autofocus: index === 0,
         ...field,
         name: field.key,
       })
@@ -156,5 +173,6 @@ export function createForm () {
     .find(field => field.key === 'reason')
 
   const reasonFieldset = createReasonFieldset(reasonsData)
-  appendToForm([...createTitle(), ...formFirstPart, reasonFieldset])
+  const quickBtns = createQuickBtns(reasonsData)
+  appendToForm([...quickBtns, ...createTitle(), ...formFirstPart, reasonFieldset])
 }

src/js/pdf-util.js

@@ -2,15 +2,15 @@ import { generateQR } from './util'
 import { PDFDocument, rgb, StandardFonts } from 'pdf-lib'
 
 const ys = {
-  travail: 488,
-  achats: 417,
-  sante: 347,
-  famille: 325,
-  handicap: 291,
-  sport_animaux: 269,
-  convocation: 199,
-  missions: 178,
-  enfants: 157,
+  travail: 553,
+  achats_culturel_cultuel: 482,
+  sante: 434,
+  famille: 410,
+  handicap: 373,
+  sport_animaux: 349,
+  convocation: 276,
+  missions: 252,
+  enfants: 228,
 }
 
 export async function generatePdf (profile, reasons, pdfBase) {
@@ -70,16 +70,14 @@ export async function generatePdf (profile, reasons, pdfBase) {
     page1.drawText(text, { x, y, size, font })
   }
 
-  drawText(`${firstname} ${lastname}`, 107, 657)
-  drawText(birthday, 107, 627)
-  drawText(placeofbirth, 240, 627)
-  drawText(`${address} ${zipcode} ${city}`, 124, 596)
+  drawText(`${firstname} ${lastname}`, 92, 702)
+  drawText(birthday, 92, 684)
+  drawText(placeofbirth, 214, 684)
+  drawText(`${address} ${zipcode} ${city}`, 104, 665)
 
-  reasons
-    .split(', ')
-    .forEach(reason => {
-      drawText('x', 59, ys[reason], 12)
-    })
+  reasons.split(', ').forEach((reason) => {
+    drawText('x', 47, ys[reason], 12)
+  })
 
   let locationSize = getIdealFontSize(font, profile.city, 83, 7, 11)
 
@@ -91,9 +89,9 @@ export async function generatePdf (profile, reasons, pdfBase) {
     locationSize = 7
   }
 
-  drawText(profile.city, 93, 122, locationSize)
-  drawText(`${profile.datesortie}`, 76, 92, 11)
-  drawText(`${profile.heuresortie}`, 246, 92, 11)
+  drawText(profile.city, 78, 76, locationSize)
+  drawText(`${profile.datesortie}`, 63, 58, 11)
+  drawText(`${profile.heuresortie}`, 227, 58, 11)
 
   // const shortCreationDate = `${creationDate.split('/')[0]}/${
   //   creationDate.split('/')[1]
@@ -111,7 +109,14 @@ export async function generatePdf (profile, reasons, pdfBase) {
 
   const qrImage = await pdfDoc.embedPng(generatedQR)
 
-  page1.drawText(qrTitle1 + '\n' + qrTitle2, { x: 415, y: 135, size: 9, font, lineHeight: 10, color: rgb(1, 1, 1) })
+  page1.drawText(`${qrTitle1}\n${qrTitle2}`, {
+    x: 440,
+    y: 130,
+    size: 6,
+    font,
+    lineHeight: 10,
+    color: rgb(1, 1, 1),
+  })
 
   page1.drawImage(qrImage, {
     x: page1.getWidth() - 156,
@@ -122,7 +127,13 @@ export async function generatePdf (profile, reasons, pdfBase) {
 
   pdfDoc.addPage()
   const page2 = pdfDoc.getPages()[1]
-  page2.drawText(qrTitle1 + qrTitle2, { x: 50, y: page2.getHeight() - 70, size: 11, font, color: rgb(1, 1, 1) })
+  page2.drawText(qrTitle1 + qrTitle2, {
+    x: 50,
+    y: page2.getHeight() - 70,
+    size: 11,
+    font,
+    color: rgb(1, 1, 1),
+  })
   page2.drawImage(qrImage, {
     x: 50,
     y: page2.getHeight() - 390,