-
Notifications
You must be signed in to change notification settings - Fork 249
/
form.js
166 lines (135 loc) · 4.52 KB
/
form.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
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' })
const getCurrentTime = () => {
const date = new Date();
return date.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
}
const createFormGroup = ({
autocomplete = false,
autofocus = false,
inputmode,
label,
max,
min,
maxlength,
minlength,
name,
pattern,
placeholder = '',
type = 'text',
}) => {
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,
}
const input = createElement('input', inputAttrs)
if (name === 'heuresortie') {
input.value = getCurrentTime()
}
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)
const labelAttrs = { innerHTML: reasonData.label, className: 'form-checkbox-label', for: id }
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 = {
className: 'legend titre-3',
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 = {
innerHTML: 'certifie que mon déplacement est lié au motif suivant (cocher la case) autorisé par le 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 <a class="footnote" href="#footnote1">[1]</a> :',
}
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])
}