Untitled
unknown
plain_text
a year ago
16 kB
2
Indexable
Never
import { Formio } from 'formiojs';
import utilities, {getCookie, setCookie} from "../../../scripts/utilities";
let urlParams = new URLSearchParams(window.location.search);
let apiUrl = window.location.protocol + "//" + window.location.host;
function addRemoveCasseOnElement(element, visible = true) {
element.visible = visible;
if (visible) {
element.element.classList.remove('d-none');
} else {
element.element.classList.add('d-none');
}
}
if(getCookie("new_installation") !== null) {
var myCookieNewInstallation = JSON.parse(getCookie("new_installation"));
}
// Function to show/hide the "Type de solution" select dropdown based on the selected value of "Position"
function toggleTypeSolutionField(form) {
const besoinField = form.getComponent('besoin');
const pieceField = form.getComponent('piece');
const chauffeEauField = form.getComponent('chauffe_eau');
const confortField = form.getComponent('confort');
const positionField = form.getComponent('position');
const typeSolutionField = form.getComponent('type_solution');
const nbPersonneField = form.getComponent('nb_personne');
const selectedChauffeEau = chauffeEauField.dataValue;
let allowedOptions;
if (chauffeEauField && selectedChauffeEau === 'appoint') {
//hide/unhide piece
if (pieceField) {
const showPieceField = false;
addRemoveCasseOnElement(pieceField, showPieceField);
}
//hide/unhide Besoin
if (besoinField) {
const showBesoinField = true;
addRemoveCasseOnElement(besoinField, showBesoinField);
}
//hide/unhide position
if (positionField) {
const showPositionField = true;
addRemoveCasseOnElement(positionField, showPositionField);
}
//hide/unhide confort
if (confortField) {
const showConfortField = true;
addRemoveCasseOnElement(confortField, showConfortField);
}
if (typeSolutionField) {
const showTypeSolutionField = true;
addRemoveCasseOnElement(typeSolutionField, showTypeSolutionField);
}
//hide/unhide nbPersonne
if (nbPersonneField) {
const showNbPersonne = false;
addRemoveCasseOnElement(nbPersonneField, showNbPersonne);
}
if (positionField && (positionField.dataValue === "sur_evier" || positionField.dataValue === "")) {
allowedOptions = ['design', 'gain_place', 'standard'];
// Filter and set the available options based on the allowedOptions
typeSolutionField.component.data.values = typeSolutionField.component.data.values.filter(option => allowedOptions.includes(option.value));
} else if (positionField && positionField.dataValue === "sous_evier") {
allowedOptions = ['design', 'gain_place'];
// Filter and set the available options based on the allowedOptions
typeSolutionField.component.data.values = typeSolutionField.component.data.values.filter(option => allowedOptions.includes(option.value));
}
} else if (chauffeEauField && selectedChauffeEau === 'principal') {
//hide/unhide piece
if (pieceField) {
const showPieceField = true;
addRemoveCasseOnElement(pieceField, showPieceField);
}
//hide/unhide Besoin
if (besoinField) {
const showBesoinField = false;
addRemoveCasseOnElement(besoinField, showBesoinField);
}
//hide/unhide position
if (positionField) {
const showPositionField = false;
addRemoveCasseOnElement(positionField, showPositionField);
}
//hide/unhide confort
if (confortField) {
const showConfortField = true;
addRemoveCasseOnElement(confortField, showConfortField);
}
if (typeSolutionField) {
const showTypeSolutionField = true;
addRemoveCasseOnElement(typeSolutionField, showTypeSolutionField);
}//hide/unhide nbPersonne
if (nbPersonneField) {
const showNbPersonne = true;
addRemoveCasseOnElement(nbPersonneField, showNbPersonne);
}
if (pieceField && pieceField.dataValue === "chauffee") {
allowedOptions = ['standard', 'gain_place', 'economie', 'design'];
// Filter and set the available options based on the allowedOptions
typeSolutionField.component.data.values = typeSolutionField.component.data.values.filter(option => allowedOptions.includes(option.value));
}
} else if (chauffeEauField && selectedChauffeEau === 'professionnel') {
//hide/unhide piece
if (pieceField) {
const showPieceField = false;
addRemoveCasseOnElement(pieceField, showPieceField);
}
//hide/unhide Besoin
if (besoinField) {
const showBesoinField = false;
addRemoveCasseOnElement(besoinField, showBesoinField);
}
//hide/unhide position
if (positionField) {
const showPositionField = false;
addRemoveCasseOnElement(positionField, showPositionField);
}
//hide/unhide confort
if (confortField) {
const showConfortField = false;
addRemoveCasseOnElement(confortField, showConfortField);
}//hide/unhide TypeSolution
if (typeSolutionField) {
const showTypeSolutionField = false;
addRemoveCasseOnElement(typeSolutionField, showTypeSolutionField);
}//hide/unhide nbPersonne
if (nbPersonneField) {
const showNbPersonne = false;
addRemoveCasseOnElement(nbPersonneField, showNbPersonne);
}
allowedOptions = ['standard'];
typeSolutionField.component.data.values = typeSolutionField.component.data.values.filter(option => allowedOptions.includes(option.value));
}
}
Formio.createForm(document.getElementById('new-installation-form'),{
components : [
{
"input": false,
"html": "<span>Bien choisir son chauffe-eau</span>",
"type": "content",
"key": "content",
"customClass": "red-block--title",
},
{
components: [
{
type: 'textfield',
key: 'projectName',
label: 'Nom du projet',
placeholder: 'Saisir le nom du projet',
defaultValue: myCookieNewInstallation?.projectName || "",
input: true,
validate: {
required: true,
maxLength: '30'
}
},
{
"label": "Chauffe-eau",
"optionsLabelPosition": "right",
"inline": true,
"tableView": false,
"values": [
{
"label": "Appoint",
"value": "appoint"
},
{
"label": "Principal",
"value": "principal"
}
// {
// "label": "Professionnel",
// "value": "professionnel"
// }
],
"key": "chauffe_eau",
"type": "radio",
"inputType": "radio",
"validate": {
required: true
},
defaultValue: myCookieNewInstallation?.chauffe_eau || "",
"input": true,
"customClass": "border-bottom"
},
{
"label": "Pièce",
defaultValue: myCookieNewInstallation?.piece || "",
"optionsLabelPosition": "right",
"inline": true,
"tableView": false,
"values": [
{
"label": "Chauffée",
"value": "chauffee"
},
{
"label": "Non chauffée < 20m<sup>3</sup>",
"value": "non_chauffe"
},
{
"label": "Non chauffée > 20m<sup>3</sup>",
"value": "non_chauffee_sup20m<sup>3</sup>"
}
],
"key": "piece",
"type": "radio",
"inputType": "radio",
"validate": {
required: true
},
"input": true,
"customClass": "border-bottom"
},
{
"label": "Besoin",
defaultValue: myCookieNewInstallation?.besoin || "",
"optionsLabelPosition": "right",
"inline": true,
"tableView": false,
"values": [
{
"label": "Mains",
"value": "mains"
},
{
"label": "Vaisselle/mains",
"value": "vaisselle_mains"
}
],
"key": "besoin",
"type": "radio",
"inputType": "radio",
"validate": {
required: true
},
"input": true,
"customClass": "border-bottom"
},
{
"label": "Position",
defaultValue: myCookieNewInstallation?.position || "",
"optionsLabelPosition": "right",
"inline": true,
"tableView": false,
"values": [
{
"label": "Sous évier",
"value": "sous_evier"
},
{
"label": "Sur évier",
"value": "sur_evier"
}
],
"key": "position",
"type": "radio",
"inputType": "radio",
"validate": {
required: true
},
"input": true,
"customClass": "border-bottom"
},
{
type: "select",
defaultValue: myCookieNewInstallation?.nb_personne || "",
label: "Nombre de personnes composant le foyer",
key: "nb_personne",
placeholder: "Veuillez sélectionner une option",
data: {
values: [
{value: '1', label: '1'},
{value: '2', label: '2'},
{value: '3', label: '3'},
{value: '4', label: '4'},
{value: '5', label: '5'}
]
},
validate: {
required: true
},
dataSrc: "values",
template: "<span>{{ item.label }}</span>",
input: true,
"customClass": "border-bottom"
},
{
"label": "Confort souhaité",
defaultValue: myCookieNewInstallation?.confort || "",
"optionsLabelPosition": "right",
"inline": true,
"tableView": false,
"values": [
{
"label": "Confort",
"value": "0"
},
{
"label": "Grand confort",
"value": "1"
}
],
"key": "confort",
"type": "radio",
"inputType": "radio",
"validate": {
required: true
},
"input": true,
"customClass": "border-bottom"
},
{
type: "select",
label: "Type de solution",
key: "type_solution",
defaultValue: myCookieNewInstallation?.type_solution || "",
placeholder: "Veuillez sélectionner une option",
data: {
values: [
{value: 'standard', label: 'Standard'},
{value: 'gain_place', label: 'Gain de Place'},
{value: 'economie', label: "Economies d'énergie"},
{value: 'design', label: 'Design'}
]
},
validate: {
required: true
},
dataSrc: "values",
template: "<span>{{ item.label }}</span>",
input: true
},
],
customClass: "red-block"
},
{
type: 'button',
action: 'submit',
label: 'VOIR LA RÉPONSE THERMOR',
theme: 'primary'
}
]
},{language: 'fr', i18n: { 'fr': { required: 'Ce champ est obligatoire', 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) {
toggleTypeSolutionField(form);
form.on('render', function() {
toggleTypeSolutionField(form);
});
form.on('change', function(event) {
toggleTypeSolutionField(form);
});
form.on('submit', function(submission) {
let idDim = 0;
let canBeSaved = true;
let jsonSubmissionData = submission.data;
if(utilities.getCookie("new_installation") !== undefined && utilities.getCookie("new_installation") !== null) {
var oldCookie = getCookie("new_installation");
let jsonOldCookie = JSON.parse(oldCookie);
idDim = jsonOldCookie['idDim'];
delete jsonOldCookie['canBeSaved'];
delete jsonOldCookie['idDim'];
if (_.isEqual(jsonOldCookie, jsonSubmissionData)) {
canBeSaved = false;
}
}
jsonSubmissionData['canBeSaved'] = canBeSaved;
jsonSubmissionData['idDim'] = idDim;
let objectString = JSON.stringify(submission.data);
document.cookie = "new_installation=" + objectString + "; expires="+ (new Date(Date.now()+ 3600*1000)).toUTCString();
let idDimUrl = idDim !==0 ? '?id='+idDim : '';
window.location.href = apiUrl + "/synthese-nouvelle-installation" + idDimUrl;
});
});