Untitled

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;
    });
});