Add sweet URI fragments support

src/form-data.json

@@ -2,6 +2,7 @@
   [
     {
       "key": "firstname",
+      "alias": "prenom",
       "type": "text",
       "contentType": "firstname",
       "label": "Prénom",
@@ -10,6 +11,7 @@
     },
     {
       "key": "lastname",
+      "alias": "nom",
       "type": "text",
       "contentType": "lastname",
       "label": "Nom",
@@ -18,6 +20,7 @@
     },
     {
       "key": "birthday",
+      "alias": "date-de-naissance",
       "type": "text",
       "contentType": "birthday",
       "label": "Date de naissance",
@@ -30,6 +33,7 @@
   [
     {
       "key": "placeofbirth",
+      "alias": "lieu-de-naissance",
       "type": "text",
       "contentType": "cityofbirth",
       "label": "Lieu de naissance",
@@ -38,6 +42,7 @@
     },
     {
       "key": "address",
+      "alias": "adresse",
       "type": "text",
       "contentType": "address",
       "label": "Adresse",
@@ -46,6 +51,7 @@
     },
     {
       "key": "city",
+      "alias": "ville",
       "type": "text",
       "contentType": "city",
       "label": "Ville",
@@ -54,6 +60,7 @@
     },
     {
       "key": "zipcode",
+      "alias": "code-postal",
       "type": "number",
       "contentType": "zipcode",
       "label": "Code Postal",
@@ -84,6 +91,7 @@
     },
     {
       "key": "datesortie",
+      "alias": "date",
       "type": "date",
       "contentType": "datesortie",
       "label": "Date de sortie",
@@ -92,13 +100,15 @@
     },
     {
       "key": "heuresortie",
+      "alias": "heure",
       "type": "time",
       "contentType": "heuresortie",
       "label": "Heure de sortie",
       "autocomplete": ""
     },
     {
       "key": "reason",
+      "alias": "raisons",
       "type": "list",
       "items": [
         {
@@ -123,6 +133,7 @@
         },
         {
           "code": "sport_animaux",
+          "alias": "sport-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 ;"
         },
         {

src/js/form-util.js

@@ -1,8 +1,12 @@
 import { $, $$, downloadBlob } from './dom-utils'
-import { addSlash, getFormattedDate } from './util'
+import { addSlash, getFormattedDate, setParam, getParam, cleanParams } from './util'
 import pdfBase from '../certificate.pdf'
 import { generatePdf } from './pdf-util'
 
+const formData = require('../form-data')
+
+let params = new URLSearchParams(window.location.hash.substr(1))
+
 const conditions = {
   '#field-firstname': {
     length: 1,
@@ -127,7 +131,7 @@ export function prepareInputs (formInputs, reasonInputs, reasonFieldset, reasonA
       return
     }
 
-    console.log(getProfile(formInputs), reasons)
+    // console.log(getProfile(formInputs), reasons)
 
     const pdfBlob = await generatePdf(getProfile(formInputs), reasons, pdfBase)
 
@@ -159,3 +163,70 @@ export function prepareForm () {
   setReleaseDateTime(releaseDateInput)
   prepareInputs(formInputs, reasonInputs, reasonFieldset, reasonAlert, snackbar)
 }
+/**
+ * Modifie les entrées du formulaire en fonction des paramètres spécifiés sous forme d'URI fragments
+ */
+export function followParams (watch = true) {
+  const auto = params.has('auto')
+  // Remplit les entrées du formulaire
+  formData.flat(1)
+    .filter(field => field.key !== 'reason')
+    .filter(field => !field.isHidden)
+    .forEach(data => {
+      const name = data.alias || data.key
+      const field = $('#field-' + data.key)
+      if (params.has(name)) field.value = params.get(name)
+    })
+
+  // Coche les raisons
+  const reasonsObj = formData.flat(1).find(field => field.key === 'reason')
+  reasonsObj.items.forEach(data => {
+    const name = data.alias || data.code
+    const field = $('#checkbox-' + data.code)
+    if (params.get(reasonsObj.alias || 'raisons' || reasonsObj.key)?.split(',').includes(name) && !field.checked) field.click()
+  })
+
+  // Génère automatiquement le PDF si besoin
+  if (auto) $('#generate-btn').click()
+
+  if (!watch || auto) return false
+
+  window.addEventListener('hashchange', () => {
+    params = new URLSearchParams(window.location.hash.substr(1))
+    followParams(false)
+  })
+}
+
+export function listenToInputChanges () {
+  // Champs
+  formData.flat(1)
+    .filter(field => field.key !== 'reason')
+    .filter(field => !field.isHidden)
+    .forEach(data => {
+      const name = data.alias || data.key
+      const input = document.getElementById('field-' + data.key)
+      input.addEventListener('input', (e) => {
+        window.location.hash = cleanParams()
+        setParam(name, e.target.value)
+        params = new URLSearchParams(window.location.hash.substr(1))
+      })
+    })
+
+  // Raisons
+  const reasonsObj = formData.flat(1).find(field => field.key === 'reason')
+  reasonsObj.items.forEach(data => {
+    const name = data.alias || data.code
+    const checkbox = $('#checkbox-' + data.code)
+    checkbox.addEventListener('click', (e) => {
+      let reasons = getParam(reasonsObj.alias || 'raisons')?.split(',')
+      if (!reasons) return setParam(reasonsObj.alias || 'raisons', name)
+      if (checkbox.checked && !reasons.includes(name)) {
+        reasons.push(name)
+      } else if (!checkbox.checked && reasons.includes(name)) {
+        reasons = reasons.filter(elem => elem !== name)
+      }
+      setParam(reasonsObj.alias || 'raisons', reasons.toString())
+    })
+  })
+  params = new URLSearchParams(window.location.hash.substr(1))
+}

src/js/form.js

@@ -22,7 +22,7 @@ const createFormGroup = ({
   min,
   maxlength,
   minlength,
-  name,
+  name, // here the 'key' value
   pattern,
   placeholder = '',
   type = 'text',
@@ -85,7 +85,6 @@ const createReasonField = (reasonData) => {
     value: reasonData.code,
   }
   const inputReason = createElement('input', inputReasonAttrs)
-
   const labelAttrs = { innerHTML: reasonData.label, className: 'form-checkbox-label', for: id }
   const label = createElement('label', labelAttrs)
 

src/js/main.js

@@ -4,7 +4,7 @@ import '../css/main.css'
 
 import './icons'
 import './check-updates'
-import { prepareForm } from './form-util'
+import { prepareForm, followParams, listenToInputChanges } from './form-util'
 import { warnFacebookBrowserUserIfNecessary } from './facebook-util'
 import { addVersion } from './util'
 import { createForm } from './form'
@@ -13,3 +13,5 @@ warnFacebookBrowserUserIfNecessary()
 createForm()
 prepareForm()
 addVersion(process.env.VERSION)
+followParams()
+listenToInputChanges()

src/js/util.js

@@ -1,4 +1,5 @@
 import QRCode from 'qrcode'
+const formData = require('../form-data.json')
 
 export function generateQR (text) {
   const opts = {
@@ -33,3 +34,70 @@ export function addVersion (version) {
     'version',
   ).innerHTML = `${new Date().getFullYear()} - ${version}`
 }
+
+export function setParam (key, value) {
+  const oldParams = window.location.hash.substr(1)
+
+  // Remplace les params si existants
+  const newParams = oldParams.split('&').map(part => {
+    if (part.startsWith(`${key}=`)) {
+      return (key + '=' + value)
+    }
+    return part
+  })
+
+  // Crée un param si inexistant
+  if (!newParams.includes(key + '=' + value)) {
+    newParams.push(key + '=' + value)
+  }
+
+  // Nettoie les paramètres
+  const newParamsStr = cleanParams('#' + newParams.join('&'))
+
+  // Définit
+  window.location.hash = newParamsStr
+  return newParamsStr
+}
+
+export function getParam (key) {
+  const params = window.location.hash.substr(1).split('&')
+  const param = params?.find((val) => val.startsWith(key + '='))
+  return param?.substr((key + '=').length)
+}
+
+export function cleanParams (params = window.location.hash) {
+  const oldParams = params.substr(1)
+  let newParams = oldParams.split('&')
+
+  // Supprime les doublons
+  const alreadySeen = []
+  newParams = newParams.filter(param => {
+    if (!param?.includes('=')) return false
+    const split = param.split('=')
+    const key = split[0]
+    const value = split[1]
+    if (!value) return false
+    if (alreadySeen.includes(key)) return false
+    alreadySeen.push(key)
+    return true
+  })
+
+  // Met dans l'ordre
+  const rightOrder = formData.flat(1).filter(data => !data.isHidden).map(data => data.alias || data.key)
+  console.log(rightOrder)
+  newParams = rightOrder.map((elem, index) => {
+    const peer = newParams.find((param) => {
+      return param.split('=')[0] === elem
+    })
+    if (!peer) return false
+    console.log('peer', peer)
+    return elem + '=' + peer.split('=')[1]
+  })
+
+  // Supprime les cadavres
+  newParams = newParams.filter((elem) => elem)
+
+  // Retourne les params nettoyés
+  console.log(newParams)
+  return '#' + newParams.join('&')
+}