Untitled

mail@pastecode.io avatarunknown
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);
        });
});