Untitled
unknown
plain_text
2 years ago
36 kB
6
Indexable
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);
});
});
Editor is loading...