2020-10-30 10:12:32 +01:00
|
|
|
|
import 'bootstrap/dist/css/bootstrap.min.css'
|
|
|
|
|
|
|
|
|
|
import '../css/main.css'
|
|
|
|
|
|
|
|
|
|
import formData from '../form-data.json'
|
|
|
|
|
|
|
|
|
|
import { $, appendTo, createElement } from './dom-utils'
|
|
|
|
|
|
|
|
|
|
const createTitle = () => {
|
|
|
|
|
const h2 = createElement('h2', { className: 'titre-2', innerHTML: 'Remplissez en ligne votre déclaration numérique : ' })
|
|
|
|
|
const p = createElement('p', { className: 'msg-info', innerHTML: 'Tous les champs sont obligatoires.' })
|
|
|
|
|
return [h2, p]
|
|
|
|
|
}
|
|
|
|
|
// createElement('div', { className: 'form-group' })
|
|
|
|
|
|
2020-10-30 15:42:41 +01:00
|
|
|
|
const getCurrentTime = () => {
|
2020-10-30 13:05:10 +01:00
|
|
|
|
const date = new Date();
|
2020-10-30 15:42:41 +01:00
|
|
|
|
return date.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
|
2020-10-30 13:05:10 +01:00
|
|
|
|
}
|
|
|
|
|
|
2020-10-30 10:12:32 +01:00
|
|
|
|
const createFormGroup = ({
|
|
|
|
|
autocomplete = false,
|
|
|
|
|
autofocus = false,
|
|
|
|
|
inputmode,
|
|
|
|
|
label,
|
|
|
|
|
max,
|
|
|
|
|
min,
|
|
|
|
|
maxlength,
|
|
|
|
|
minlength,
|
|
|
|
|
name,
|
|
|
|
|
pattern,
|
|
|
|
|
placeholder = '',
|
|
|
|
|
type = 'text',
|
2020-11-01 22:53:35 +01:00
|
|
|
|
value = '',
|
2020-10-30 10:12:32 +01:00
|
|
|
|
}) => {
|
|
|
|
|
const formGroup = createElement('div', { className: 'form-group' })
|
|
|
|
|
const labelAttrs = {
|
|
|
|
|
for: `field-${name}`,
|
|
|
|
|
id: `field-${name}-label`,
|
|
|
|
|
innerHTML: label,
|
|
|
|
|
}
|
|
|
|
|
const labelEl = createElement('label', labelAttrs)
|
|
|
|
|
|
|
|
|
|
const inputGroup = createElement('div', { className: 'input-group align-items-center' })
|
|
|
|
|
const inputAttrs = {
|
|
|
|
|
autocomplete,
|
|
|
|
|
autofocus,
|
|
|
|
|
className: 'form-control',
|
|
|
|
|
id: `field-${name}`,
|
|
|
|
|
inputmode,
|
|
|
|
|
min,
|
|
|
|
|
max,
|
|
|
|
|
minlength,
|
|
|
|
|
maxlength,
|
|
|
|
|
name,
|
|
|
|
|
pattern,
|
|
|
|
|
placeholder,
|
|
|
|
|
required: true,
|
|
|
|
|
type,
|
2020-11-01 22:53:35 +01:00
|
|
|
|
value,
|
2020-10-30 10:12:32 +01:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const input = createElement('input', inputAttrs)
|
|
|
|
|
|
2020-10-30 13:05:10 +01:00
|
|
|
|
if (name === 'heuresortie') {
|
2020-10-30 15:42:50 +01:00
|
|
|
|
input.value = getCurrentTime()
|
2020-10-30 13:05:10 +01:00
|
|
|
|
}
|
|
|
|
|
|
2020-10-30 10:12:32 +01:00
|
|
|
|
const validityAttrs = {
|
|
|
|
|
className: 'validity',
|
|
|
|
|
}
|
|
|
|
|
const validity = createElement('span', validityAttrs)
|
|
|
|
|
|
|
|
|
|
const appendToFormGroup = appendTo(formGroup)
|
|
|
|
|
appendToFormGroup(labelEl)
|
|
|
|
|
appendToFormGroup(inputGroup)
|
|
|
|
|
|
|
|
|
|
const appendToInputGroup = appendTo(inputGroup)
|
|
|
|
|
appendToInputGroup(input)
|
|
|
|
|
appendToInputGroup(validity)
|
|
|
|
|
|
|
|
|
|
return formGroup
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const createReasonField = (reasonData) => {
|
|
|
|
|
const formReasonAttrs = { className: 'form-checkbox align-items-center' }
|
|
|
|
|
const formReason = createElement('div', formReasonAttrs)
|
|
|
|
|
const appendToReason = appendTo(formReason)
|
|
|
|
|
|
|
|
|
|
const id = `checkbox-${reasonData.code}`
|
|
|
|
|
const inputReasonAttrs = {
|
|
|
|
|
className: 'form-check-input',
|
|
|
|
|
type: 'checkbox',
|
|
|
|
|
id,
|
|
|
|
|
name: 'field-reason',
|
|
|
|
|
value: reasonData.code,
|
|
|
|
|
}
|
|
|
|
|
const inputReason = createElement('input', inputReasonAttrs)
|
|
|
|
|
|
2020-11-01 23:34:28 +01:00
|
|
|
|
const realLabel = '<span title="' + reasonData.label + '">' + reasonData.short + '</span>'
|
|
|
|
|
const labelAttrs = { innerHTML: realLabel, className: 'form-checkbox-label', for: id }
|
2020-10-30 10:12:32 +01:00
|
|
|
|
const label = createElement('label', labelAttrs)
|
|
|
|
|
|
|
|
|
|
appendToReason([inputReason, label])
|
|
|
|
|
return formReason
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const createReasonFieldset = (reasonsData) => {
|
|
|
|
|
const fieldsetAttrs = {
|
|
|
|
|
id: 'reason-fieldset',
|
|
|
|
|
className: 'fieldset',
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const fieldset = createElement('fieldset', fieldsetAttrs)
|
|
|
|
|
const appendToFieldset = appendTo(fieldset)
|
|
|
|
|
|
|
|
|
|
const legendAttrs = {
|
2020-10-30 15:41:15 +01:00
|
|
|
|
className: 'legend titre-3',
|
2020-10-30 10:12:32 +01:00
|
|
|
|
innerHTML: 'Choisissez un motif de déplacement',
|
|
|
|
|
}
|
|
|
|
|
const legend = createElement('legend', legendAttrs)
|
|
|
|
|
|
|
|
|
|
const textAlertAttrs = { className: 'msg-alert hidden', innerHTML: 'Veuillez choisir un motif' }
|
|
|
|
|
const textAlert = createElement('p', textAlertAttrs)
|
|
|
|
|
|
|
|
|
|
const textSubscribeReasonAttrs = {
|
2020-11-01 23:34:28 +01:00
|
|
|
|
innerHTML: 'Je certifie que… toussa.',
|
2020-10-30 10:12:32 +01:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const textSubscribeReason = createElement('p', textSubscribeReasonAttrs)
|
|
|
|
|
|
|
|
|
|
const reasonsFields = reasonsData.items.map(createReasonField)
|
|
|
|
|
|
|
|
|
|
appendToFieldset([legend, textAlert, textSubscribeReason, ...reasonsFields])
|
|
|
|
|
// Créer un form-checkbox par motif
|
|
|
|
|
return fieldset
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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)
|
|
|
|
|
if (form.innerHTML !== '') {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const appendToForm = appendTo(form)
|
|
|
|
|
|
|
|
|
|
const formFirstPart = formData
|
|
|
|
|
.flat(1)
|
|
|
|
|
.filter(field => field.key !== 'reason')
|
|
|
|
|
.filter(field => !field.isHidden)
|
|
|
|
|
.map((field,
|
|
|
|
|
index) => {
|
|
|
|
|
const formGroup = createFormGroup({
|
|
|
|
|
autofocus: index === 0,
|
|
|
|
|
...field,
|
|
|
|
|
name: field.key,
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
return formGroup
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const reasonsData = formData
|
|
|
|
|
.flat(1)
|
|
|
|
|
.find(field => field.key === 'reason')
|
|
|
|
|
|
|
|
|
|
const reasonFieldset = createReasonFieldset(reasonsData)
|
|
|
|
|
appendToForm([...createTitle(), ...formFirstPart, reasonFieldset])
|
|
|
|
|
}
|