Untitled
plain_text
2 months ago
36 kB
2
Indexable
Never
import {Formio} from 'formiojs'; import {getCookie, deleteCookie} from '../../../scripts/utilities'; let apiUrl = window.location.protocol + "//" + window.location.host; let department_pool = ""; async function getDep() { await fetch('/dep', { method: 'GET', headers: { 'Content-Type': 'application/json' }, }).then(function (response) { return response.json(); }).then(function (data) { // console.log(data); // console.log(data.department); department_pool = Object.entries(data.department).map(([key, value]) => { // console.log(key); // console.log(value); return {value: key, label: value }; }).sort((a, b) => { const numA = parseInt(a.label.substr(0, 2)); // Extract the numeric part const numB = parseInt(b.label.substr(0, 2)); // Extract the numeric part return numA - numB; }); }); const form = Formio.createForm(document.getElementById('pac-piscine-step1'), { components: [ { components: [ { "input": false, "html": "<span>Informations générales</span>", "type": "content", "key": "content", "customClass": "red-block--title", }, { components: [ { "columns": [ { components: [ { tabindex: "1", type: 'textfield', key: 'nom', label: 'Nom de projet', input: true, defaultValue: getCookie("pac_piscine_step1") !== undefined ? JSON.parse(getCookie("pac_piscine_step1"))?.nom : "", validate: { required: true, maxLength: '30' } } ], "width": 6, "offset": 0, "push": 0, "pull": 0, "size": "md", "currentWidth": 6 }, { components: [ { type: "select", label: "Département", key: "departement", defaultValue: getCookie("pac_piscine_step1") !== undefined ? JSON.parse(getCookie("pac_piscine_step1"))?.departement : "", placeholder: "Veuillez sélectionner une option", data: { values: department_pool }, validate: { required: true }, template: "<span>{{ item.label }}</span>", input: true } ], "width": 6, "offset": 0, "push": 0, "pull": 0, "size": "md", "currentWidth": 6 } ], "type": "columns", "conditional": { "show": "", "when": null, "eq": "" }, "key": "columns" }, { label: "Piscine Hors Sol", optionsLabelPosition: "right", inline: true, tableView: false, values: [ { "label": "Oui", "value": "1" }, { "label": "Non", "value": "0" } ], validate: { required: true }, key: "hors_sol", defaultValue: JSON.parse(getCookie("pac_piscine_step1")) !== null && JSON.parse(getCookie("pac_piscine_step1")).hors_sol != undefined ? JSON.parse(getCookie("pac_piscine_step1")).hors_sol : "1", type: "radio", inputType: "radio", input: true } ], "customClass": "red-block" } ] }, { components: [ { "input": false, "html": "<span>Dimensions de la piscine</span>", "type": "content", "key": "content", "customClass": "red-block--title", }, { components: [ { "columns": [ { components: [ { type: 'number', key: 'longueur', label: 'Longueur (en m)', input: true, defaultValue: getCookie("pac_piscine_step1") !== undefined ? JSON.parse(getCookie("pac_piscine_step1"))?.longueur : "", validate: { required: true, maxLength: '5' } }, { type: 'number', key: 'largeur', label: 'Largeur (en m)', input: true, defaultValue: getCookie("pac_piscine_step1") !== undefined ? JSON.parse(getCookie("pac_piscine_step1"))?.largeur : "", validate: { required: true, maxLength: '5' } }, { type: 'number', key: 'profondeur', label: 'Profondeur (en m)', input: true, defaultValue: getCookie("pac_piscine_step1") !== undefined ? JSON.parse(getCookie("pac_piscine_step1"))?.profondeur : "", validate: { required: true, maxLength: '3' } }, { type: 'number', key: 'volume', label: 'Volume (en m<sup>3</sup>)', input: true, defaultValue: getCookie("pac_piscine_step1") !== undefined ? JSON.parse(getCookie("pac_piscine_step1"))?.volume : "", disabled: true, calculateValue: { "*": [ {var: 'data.longueur'}, {var: 'data.largeur'}, {var: 'data.profondeur'} ] } } ], "width": 6, "offset": 0, "push": 0, "pull": 0, "size": "md", "currentWidth": 6 }, { components: [ { "input": false, "html": "<img src='/bundles/thermorprosite/icons/piscine.svg'></img>", "type": "content", "key": "content", } ], "width": 6, "offset": 0, "push": 0, "pull": 0, "size": "md", "currentWidth": 6 } ], "type": "columns", "conditional": { "show": "", "when": null, "eq": "" }, "key": "columns" }, { "columns": [ { components: [{ type: "select", label: "Date d'ouverture", key: "mois_debut", placeholder: "Veuillez sélectionner une option", defaultValue: JSON.parse(getCookie("pac_piscine_step1")) !== null ? JSON.parse(getCookie("pac_piscine_step1")).mois_debut !== undefined ? JSON.parse(getCookie("pac_piscine_step1")).mois_debut : "4" : "4", data: { values: [ {value: '4', label: 'Avril'}, {value: '5', label: 'Mai'}, {value: '6', label: 'Juin'}, {value: '7', label: 'Juillet'}, {value: '8', label: 'Août'}, {value: '9', label: 'Septembre'} ] }, validate: { required: true }, dataSrc: "values", template: "<span>{{ item.label }}</span>", input: true, customClass: 'mois_debut' }], "width": 6, "offset": 0, "push": 0, "pull": 0, "size": "md", "currentWidth": 6 }, { components: [{ type: "select", label: "Date de fermeture", key: "mois_fin", placeholder: "Veuillez sélectionner une option", defaultValue: JSON.parse(getCookie("pac_piscine_step1")) !== null ? JSON.parse(getCookie("pac_piscine_step1")).mois_fin !== undefined ? JSON.parse(getCookie("pac_piscine_step1")).mois_fin : "10" : "10", data: { values: [ {value: '5', label: 'Mai'}, {value: '6', label: 'Juin'}, {value: '7', label: 'Juillet'}, {value: '8', label: 'Août'}, {value: '9', label: 'Septembre'}, {value: '10', label: 'Octobre'} ] }, validate: { required: true }, dataSrc: "values", template: "<span>{{ item.label }}</span>", input: true, customClass: 'mois_fin' }], "width": 6, "offset": 0, "push": 0, "pull": 0, "size": "md", "currentWidth": 6 } ], "type": "columns", "conditional": { "show": "", "when": null, "eq": "" }, "key": "columns" }, { "columns": [ { components: [{ label: "Bâche ou volet", optionsLabelPosition: "right", inline: true, tableView: false, values: [ { "label": "Oui", "value": "1" }, { "label": "Non", "value": "0" } ], validate: { required: true }, key: "volet", defaultValue: JSON.parse(getCookie("pac_piscine_step1")) !== null && JSON.parse(getCookie("pac_piscine_step1")).volet != undefined ? JSON.parse(getCookie("pac_piscine_step1")).volet : "0", type: "radio", inputType: "radio", input: true }], "width": 6, "offset": 0, "push": 0, "pull": 0, "size": "md", "currentWidth": 6 }, { components: [{ label: "Abri Bas", optionsLabelPosition: "right", inline: true, tableView: false, values: [ { "label": "Oui", "value": "1" }, { "label": "Non", "value": "0" } ], validate: { required: true }, key: "abris_bas", defaultValue: JSON.parse(getCookie("pac_piscine_step1")) !== null && JSON.parse(getCookie("pac_piscine_step1")).abris_bas != undefined ? JSON.parse(getCookie("pac_piscine_step1")).abris_bas : "0", type: "radio", inputType: "radio", input: true }], "width": 6, "offset": 0, "push": 0, "pull": 0, "size": "md", "currentWidth": 6 } ], "type": "columns", "conditional": { "show": "", "when": null, "eq": "" }, "key": "columns" }, { "columns": [ { components: [{ type: "select", label: "T°d'eau souhaitée", key: "t_souhaitee", defaultValue: getCookie("pac_piscine_step1") !== undefined ? JSON.parse(getCookie("pac_piscine_step1"))?.t_souhaitee : "", placeholder: "Veuillez sélectionner une option", data: { values: [ {value: '24', label: '24'}, {value: '25', label: '25'}, {value: '26', label: '26'}, {value: '27', label: '27'}, {value: '28', label: '28'}, {value: '29', label: '29'}, {value: '30', label: '30'}, {value: '31', label: '31'}, {value: '32', label: '32'} ] }, validate: { required: true }, template: "<span>{{ item.label }}</span>", input: true }], "width": 6, "offset": 0, "push": 0, "pull": 0, "size": "md", "currentWidth": 6 }, { components: [{ type: "select", label: "Exposition au vente", key: "expo_vent", defaultValue: getCookie("pac_piscine_step1") !== undefined ? JSON.parse(getCookie("pac_piscine_step1"))?.expo_vent : "", placeholder: "Veuillez sélectionner une option", data: { values: [ {value: '1', label: 'Faible'}, {value: '4', label: 'Forte'} ] }, validate: { required: true }, template: "<span>{{ item.label }}</span>", input: true }], "width": 6, "offset": 0, "push": 0, "pull": 0, "size": "md", "currentWidth": 6 } ], "type": "columns", "conditional": { "show": "", "when": null, "eq": "" }, "key": "columns" } ], "customClass": "red-block" } ] }, { components: [ { "columns": [ { components: [{ "input": false, "html": '<button class="Link PrimaryButton PrimaryButton--full PrimaryButton--transparent"><img src="/bundles/thermorprosite/icons/reload.svg" /><span>Réinitialiser le formulaire</span></button>', "type": "content", "key": "content", "customClass": "pac-piscine--reload" }], "width": 6, "offset": 0, "push": 0, "pull": 0, "size": "md", "currentWidth": 6 }, { components: [{ type: 'button', action: 'submit', label: 'VOIR LES RÉSULTATS', theme: 'primary', customClass: "pac-piscine--submit", data: apiUrl + '/step1' }], "width": 6, "offset": 0, "push": 0, "pull": 0, "size": "md", "currentWidth": 6 } ], "type": "columns", "conditional": { "show": "", "when": null, "eq": "" }, "key": "columns" }] } ] }, { language: 'en-US', decimalSeparator: '.', delimiter: ',', i18n: { 'en-US': { required: 'Ce champ est obligatoire*', max: 'ne peut pas être supérieur à {{max}} .', maxLength: 'ne peut pas être supérieur à {{length}} caractère.', 'No results found': 'Aucun résultat pour cette recherche', 'Type to search': 'Écrivez pour lancer une recherche' } } }) .then(function (form) { let newOption = { value: 'new_option_value', label: 'New Option Label' }; let submitBtn = document.querySelector('.formio-component-submit').querySelector('button'); submitBtn.addEventListener('click', function () { const errors = document.querySelectorAll('.formio-errors'); let brk = true; errors.forEach(error => { if (error.querySelector('.form-text.error')?.isConnected && brk) { error.parentNode.scrollIntoView(); brk = false; } }) }) document.querySelector('.mois_debut').querySelector('select').addEventListener('change', function () { form.getComponent('mois_fin').setValue((parseInt(this.value) + 1).toString()); }) document.querySelector('.pac-piscine--reload').querySelector('button').addEventListener('click', function () { if (getCookie("pac_piscine_step1")) { deleteCookie('pac_piscine_step1', false, '/') } location.reload(); }) document.querySelector('.pac-piscine--submit').querySelector('button').addEventListener('click', function () { // Gather form data var dataToSend = { nameProject: document.querySelector('.formio-component-nom input').value, department: document.querySelector('.formio-component-departement select').value, hors_sol: document.querySelector('.formio-component-hors_sol input').value, length: document.querySelector("input[name='data[longueur]']").value, width: document.querySelector('.formio-component-largeur input').value, depth: document.querySelector('.formio-component-profondeur input').value, volume: document.querySelector('.formio-component-volume input').value, dateStart: document.querySelector('.formio-component-mois_debut select').value, dateEnd: document.querySelector('.formio-component-mois_fin select').value, tarpaulin: document.querySelector('.formio-component-volet input').value, temperature: document.querySelector('.formio-component-t_souhaitee select').value, expo_vent: document.querySelector('.formio-component-expo_vent select').value, abris_bas: document.querySelector('.formio-component-abris_bas input').value }; // Make a POST request fetch('/sendInfos', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(dataToSend) }) .then(function (response) { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); // Parse the JSON response }) .then(function (data) { // console.log(data); // Handle the parsed JSON data window.location.href = '/recommandation'; }) .catch(function (error) { console.error('Fetch error:', error); }); }); }); let data =document.querySelector('#data_update').value; // form =document.getElementById('pac-piscine-step1'); // Step 1: Get a reference to the Form.io form instance // Assuming the 'firstName' field is a text input field // document.querySelector('.formio-component-nom input').value = "sssssssss" ; // document.querySelector('.formio-component-departement select').value = "d" ; // document.querySelector('.formio-component-hors_sol input').value = "a" ; // document.querySelector("input[name='data[longueur]']").value = "5" ; // document.querySelector('.formio-component-largeur input').value = "" ; // document.querySelector('.formio-component-profondeur input').value = "" ; // document.querySelector('.formio-component-volume input').value = "" ; // document.querySelector('.formio-component-mois_debut select').value = "" ; // document.querySelector('.formio-component-mois_fin select').value = "" ; // document.querySelector('.formio-component-volet input').value = "" ; // document.querySelector('.formio-component-t_souhaitee select').value = "" ; // document.querySelector('.formio-component-expo_vent select').value = "" ; // document.querySelector('.formio-component-abris_bas input').value = "" ; let elementsToSelect = Object.keys(JSON.parse(data)); elementsToSelect.forEach((element)=>{ const formFields = document.querySelector(`[name='data[${element}]']`); formFields.value='tt'; // console.log(element,JSON.parse(data)[element]); console.log(formFields); }) } getDep(); document.querySelector('.ProjectSynthese--content .save-pool').addEventListener('click', function (e) { e.preventDefault(); // Make a POST request fetch('/createProject', { method: 'POST', headers: { 'Content-Type': 'application/json' }, }) .then(function (response) { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); // Parse the JSON response }) .then(function (data) { if (data.success){ document.querySelector(".successSave").style.display = "flex"; setTimeout(() => { document.querySelector(".successSave").style.display = "none"; }, 3000); } // console.log(data); // Handle the parsed JSON data }) .catch(function (error) { console.error('Fetch error:', error); }); });