Construire une chaîne avec des variables

Résolu/Fermé
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 - Modifié le 22 nov. 2022 à 14:40
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 - 22 nov. 2022 à 19:58

Bonjour à tous,

J'ai crée 2 INPUT de type DATE pour que l'utilisateur saisisse une date de début et de fin de séjour.
Quand les 2 informations sont remplies, une DIV apparaît avec autant de lignes qu'il y a de jours dans le séjour.
L'utilisateur peut ainsi renseigner sur chaque ligne dans cette DIV, en face de chaque date, le nombre d'adultes et le nombre d'exo.

Toute cette mécanique fonctionne mais ce que j'aimerai maintenant c'est construire une chaîne de ce type : 
chaine_taxe = |18/04/2022;18;5|19/04/2022;15;5
avec le | pour découper les jours, le ; pour délimiter les champs date, adultes, exo. Le problème c'est que je n'ai aucun idée sur la manière de procéder pour faire cette opération !

J'avais comme idée de construire un Array avec les jours et des 0 pour les adultes et les exo at quand l'utilisateur renseigne un INPUT, un appel de fonction viendrait remplacer ces 0 par la valeur saisie... J'ai fais de nombreux essais, mais rien ne fonctionne ! Auriez vous une piste à me donner ?

Merci d'avance pour vos suggestions !

Voici où j'en suis : 

//############### CONTRÔLE DES DATES DÉBUT/FIN DU CALENDRIER ##############
const dateDebut = document.querySelector('#date_debut');
const dateFin = document.querySelector('#date_fin');
const repas = document.querySelector('#repas');
var dureeSejour;
var chaine_taxe = [];

dateDebut.addEventListener('change', () => {
    // Si la date de début est supérieur à celle de fin :
    if (dateFin.valueAsNumber < dateDebut.valueAsNumber) {
        // On vide le champ date_fin
        dateFin.value = null;
    }
    // S'il y a bien une valeur dans date_debut : 
    if (dateDebut.value) {
        // On défini la date minimum de date_fin à celle de date_debut
        dateFin.min = dateDebut.value;
    } else {
        // Sinon on retire cette limite minimum
        dateFin.min = null;
    }
    // Si hébergement est choisi, on peut calculer le nbre jour séjour :
    if (!$('#repas').is(':checked')) {
        calculSejour();
    }
});
dateFin.addEventListener('change', () => {
    if (!$('#repas').is(':checked')) {
        calculSejour();
    }
});

function calculSejour() {
    // Calcul du nombre de jour du séjour :
    if (dateDebut.value !== null && dateFin.value !== null) {
        var x = new Date(dateDebut.value);
        var y = new Date(dateFin.value);

        // secondes = millisecondes/1000
        // minutes = secondes/60
        // heures = minutes/60
        // Jours = heures/24

        dureeSejour = Math.floor((y - x) / (1000 * 60 * 60 * 24));
        if (isNaN(dureeSejour)) dureeSejour = 0;

        console.log('Début : ' + dateDebut.value);
        console.log('Fin : ' + dateFin.value);
        console.log('Durée séjour : ' + dureeSejour);
    }
    // Création de la zone de saisie des taxes journalières : 
    if (dureeSejour >= 1) {

        // On retire un jour à la date de début pour la gestion de x dans la boucle : 
        x.setDate(x.getDate() - 1);


        // On vide la zone taxe pour repartir propre : 
        document.getElementById('composition-ts').innerHTML = "";
        for (i = 1; i <= dureeSejour; i++) {
            // CRÉATION D'UNE DIV PAR JOUR : 
            var div = document.createElement('div');
            div.setAttribute('id', 'div' + i);
            // On passe au jour suivant : 
            x.setDate(x.getDate() + 1);
            var jourJ = x.toLocaleDateString();
            div.appendChild(document.createTextNode(jourJ));
            document.getElementById("composition-ts").appendChild(div);

            // INPUT ADULTES :
            var input1 = document.createElement('input');
            input1.setAttribute('id', 'adultes');
            input1.setAttribute('name', jourJ + ';adultes');
            input1.setAttribute('required', 'required');
            input1.setAttribute('type', 'number');
            input1.setAttribute('onchange', 'calculTs(this)');
            input1.setAttribute('class', i);
            input1.setAttribute('placeholder', 'Adultes');

            // INPUT EXO : 
            var input2 = document.createElement('input');
            input2.setAttribute('id', 'exo');
            input2.setAttribute('name', 'exo');
            input2.setAttribute('required', 'required');
            input2.setAttribute('type', 'number');
            input2.setAttribute('onchange', 'calculTs(this)');
            input2.setAttribute('class', jourJ);
            input2.setAttribute('placeholder', 'Exo');

            document.getElementById('div' + i).appendChild(input1);
            document.getElementById('div' + i).appendChild(input2);

            // Construction de l'array vide :
            chaine_taxe = {
                "index": i,
                "jour": jourJ,
                "adultes": 0,
                "exo": 0
            };
        }

        // BUTTON D'AJOUT DE TS AU CONTRAT : 
        var submit = document.createElement('button');
        submit.setAttribute('id', 'button-ts');
        submit.setAttribute('class', 'btn-forumulaire btn-vert-disabled facturer');
        submit.setAttribute('disabled', 'disabled');
        submit.setAttribute('onclick', 'plus_contrat();');
        submit.appendChild(document.createTextNode('AJOUTER TS'));
        document.getElementById("composition-ts").appendChild(submit);
        console.log(chaine_taxe[1]);
        activeBtnTs();
    }
    // Séjour < 1 : Suppression zone de saisie des TS : 
    else {
        document.getElementById('composition-ts').innerHTML = "";
    }
}

// ############## ACTIVATION/DÉSACTIVATION BOUTON AJOUTER TS ###################
function activeBtnTs() {
    var btnTs = document.getElementById("button-ts");
    if (btnTs) {
        btnTs.classList.remove("btn-vert-disabled");
        btnTs.classList.add("btn-vert");
        btnTs.disabled = false;
    }
}

function desactiveBtnTs() {
    var btnTs = document.getElementById("button-ts");
    if (btnTs) {
        btnTs.classList.add("btn-vert-disabled");
        btnTs.classList.remove("btn-vert");
        btnTs.disabled = true;
    }
}

// ############## CUMUL DES TS SELON TYPE ######################################
function calculTs(combien) {


    console.log(chaine_taxe);
    /*console.log('Type : ' + combien.name);*/
    /*console.log('Nbre : ' + combien.value);*/
    /*console.log('Jour : ' + combien.className);*/

}


 


Linux / Chrome 107.0.0.0

1 réponse

emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
Modifié le 22 nov. 2022 à 20:21

J'ai avancé :
Voila un truc qui fonctionne mais j'ai l'impression d'être un peu parti sur une solution usine à gaz : 
 

// ############## CUMUL DES TS SELON TYPE ######################################
function modifTs(combien) {
    // On récupère les infos de l'input :
    var saisie = combien.value; // valeur entrée par l'utilisateur
    var type = combien.name; // adultes ou exo
    var jour = combien.className; // Jour modifié

    // On cherche dans la chaine la place de la date changée : 
    /*console.log (tableau_taxe);*/
    var emplacement = tableau_taxe.indexOf(jour);
    if (type == 'adultes') {
        emplacement = emplacement + 1;
    } else {
        emplacement = emplacement + 2;
    }
    // On remplace la valeur par la saisie utilisateur : 
    tableau_taxe.splice(emplacement, 1, parseInt(saisie));

    // Vérifications : 
    console.log('Emplacement : ' + emplacement);
    console.log('Saisie : ' + saisie);
    console.log('Type : ' + type);
    console.log('Jour : ' + jour);
    console.log(tableau_taxe);
}
1