Discussion :

[superLKN]

Bonjour à tous,

Je débute en Javascript et j'ai un projet à faire dans le cadre de mes études, il est quasiment finit mais il me reste quelque chose a faire et j'avoue pas mal galérer depuis maintenant quelques jours.
J'ai un timer en minutes et secondes enregistrer dans un sessionStorage afin de faire une réservation, et j'aimerais que ce timer, quand il est lancé reste afficher sur la page même après actualisation de la page.
J'ai penser à faire un addEventListener Load en récupérant les minutes de mon timer dans mon storage comme ceci ( ligne 97 dans reservation.js ) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
window.addEventListener("load", function () {
                if (sessionStorage.getItem("mins") < 20) {
                    that.mydiv.style.display = "block";
                    that.maStation.style.display = "block";
                } 
             });

mais malheureusement ça ne marche pas. Si quelqu'un avait une solution a mon problème, ou même une piste ça serait très sympa!

Le github : https://github.com/superlkN/projet3OC


Merci d'avance

[NoSmoking]

Bonjour et bienvenue sur DVP.
Tu sors d'où tes variables that.mydiv et that.maStation, que vaut that ?

Regarde dans la console, F12, si tu as des erreurs.

[superLKN]

Merci de ta réponse!

Alors "that.mydiv" correspond à la div de mon timer qui apparait au moment de la réservation, et pareil pour "that.maStation" qui équivaut à une phrase qui apparait avec le timer avec diverse information sur la réservation en cours!
Le "that" correspond à ma class Reservation, et il n'y a pas d'erreur dans la console.

[superLKN]

Voici ce que contient mon fichier reservation.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
 class Reservation {
     constructor() {
         this.secs = 0;
         this.mydiv = document.getElementById("timer");
         this.launchCount = false;
         this.boutonEnvoi = document.getElementById("bouton_envoi");
         this.champNom = document.getElementById("nom");
         this.champPrenom = document.getElementById("prenom");
         this.divReservation = document.getElementById("reservation");
         this.boutonEffacer = document.getElementById("erase");
         this.boutonRetour = document.getElementById("retour");
         this.boutonCancel = document.getElementById("cancel");
         this.boutonReservation = document.getElementById("reserver");
         this.maStation = document.getElementById("maStation");
         this.infoStations = document.getElementById("infoStations");
         this.infoReservation = document.getElementById("infoReservation");
         this.textVeloV = document.getElementById("velovText");
         this.canvas = document.getElementById("canvas");
         this.lancementTimer = "";
 
         this.storage();
 
     }
 
     count() {
         var that = this;
 
         var mins = Math.floor(this.secs / 60);
 
         var remsec = this.secs % 60;
 
         mins %= 60;
         this.secs -= 1
 
         if (mins < 10) {
             mins = "0" + mins;
         }
 
         if (remsec < 10) {
             remsec = "0" + remsec;
         }
 
         if (this.secs < 0) {
             clearInterval(this.lancementTimer);
             this.mydiv.style.display = "none";
             this.maStation.textContent = "Votre réservation a expiré, veuillez sélectionner une nouvelle station ! :)";
            // this.lancementTimer = setInterval(this.count.bind(this), 1000);
 
         }
 
         if (this.launchCount === false) {
             this.launchCount = true;
             this.lancementTimer = setInterval(this.count.bind(this), 1000);
         }
 
         this.mydiv.textContent = "Temps restant : " + mins + " : " + remsec;
 
         sessionStorage.setItem("mins", mins);
         sessionStorage.setItem("remsec", remsec);
     }
 
     storage() {
         let that = this;
 
         that.champNom.value = localStorage.getItem("nom");
         that.champPrenom.value = localStorage.getItem("prenom");
 
         this.boutonEnvoi.onclick = function () {
             that.boutonEnvoi.style.display = "none";
             that.boutonEffacer.style.display = "none";
             that.boutonRetour.style.display = "none";
             that.canvas.style.display = "block";
             that.textVeloV.style.display = "none";
             that.mydiv.style.display = "block";
 
 
             let storageNom = localStorage.setItem("nom", that.champNom.value);
             let storagePrenom = localStorage.setItem("prenom", that.champPrenom.value);
 
             let index = document.getElementById("index").innerHTML;
             var stations = JSON.parse(LeafletMap.listeStation);
 
             sessionStorage.setItem("valeurTitreStation", stations[index].name);
             sessionStorage.setItem("valeurEtatStation", stations[index].status);
             sessionStorage.setItem("valeurAdresseStation", stations[index].address);
             sessionStorage.setItem("valeurPlaceStation", stations[index].available_bike_stands);
             sessionStorage.setItem("valeurVeloStation", stations[index].available_bikes);
 
             that.maStation.textContent = "Vélo réservé à la station " + stations[index].name + " par " + that.champNom.value + " " + that.champPrenom.value + ".";
 
             that.secs = 1200;
             that.count();
 
         }
 
         document.addEventListener("load", function () {
                if (sessionStorage.getItem("mins") < 20) {
                    that.mydiv.style.display = "block";
                    that.maStation.style.display = "block";
                } 
             }); 
     }
 }
 
 let reservation = new Reservation();

[danielhagnoul]

Qu'est-ce qu'un gestionnaire d'événement fait dans une méthode de classe ?

C'est window pas document !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
document.addEventListener("load", function () {
                if (sessionStorage.getItem("mins") < 20) {
                    that.mydiv.style.display = "block";
                    that.maStation.style.display = "block";
                } 
             });

Chaque fois que la méthode storage() sera appelée vous créerez un doublon du gestionnaire d'événement !

L'objet let reservation = new Reservation(); sera créer avant que le gestionnaire d'événement ne soit exécuter.

[superLKN]

Salut merci pour la réponse !

Effectivement c'est une erreur de ma part, avant de poster le message j'avais bien ce "window" mais ça ne fonctionnait pas non plus, et sans me donner d'erreur dans la console :/

[danielhagnoul]

Il faut tester le code suivant en dehors de la classe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
window.addEventListener("load", function () {
    if (sessionStorage.getItem("mins") < 20)){
        // un code pour modifier les propriétés de la classe
    }
 
    let reservation = new Reservation();
});

[superLKN]

J'ai mis ceci en dehors de class mais toujours rien qui s'affiche :/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
  window.addEventListener("load", function () {
    if (sessionStorage.getItem("mins") < "20") {
       let monTimer = document.getElementById("timer");
        monTimer.style.display = "block";
    }
});
 
let reservation = new Reservation();

[NoSmoking]

Il y a plusieurs choses qui me semble étrange dans ton code.
• sur le onlaod :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
window.addEventListener("load", function () {
        if (sessionStorage.getItem("mins") < 20) {
            that.mydiv.style.display = "block";
            that.maStation.style.display = "block";
        } 
     });

Ton élément sera bien affiché, à condition que tu entres dans le if, mais si rien n'est mis dedans difficile de voir quelque chose !

• dans ta fonction count() :
Pourquoi relancer le décompte lorsque tu atteins if (this.secs < 0), tu engendres des valeurs bizarres par la suite qui peuvent être représentées sous la forme 0-5 par exemple.
Pour la condition if, vue juste avant , la comparaison ne sera pas terrible. Pourquoi ne pas se contenter de gérer uniquement la variable secs ?

• lorsque tu recharges la page, ton compteur en cours meurt, pas sûr que cela soit ce que tu souhaites.

[superLKN]

J'ai plus ou moins réussi à faire ce que je voulais en faisant ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 window.addEventListener("load", function () {
            if (sessionStorage.mins < 20) {
                that.mydivTimer.style.visibility = "visible";
                that.mydivTimer.textContent = " Votre vélo est toujours disponible à la station " + sessionStorage.valeurTitreStation + " pour une durée de : " + sessionStorage.mins + ":" + sessionStorage.remsec;
 
                that.lancementTimer = setInterval(that.count, 1000);
            }
 
        });

Les secondes et minutes sont bien récupérés et s'affiche correctement, mais mon setInterval ( ligne 107 ) me donne une erreur " this.mydivTimer is undefined " ( ligne 55 ) chaque seconde dans la console après le chargement de ma page, surement un problème de portée ? Mais je ne suis pas un expert, une idée ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
  class Reservation {
    constructor() {
        this.secs = 1200;
        this.mydivTimer = document.getElementById("timer");
        this.launchCount = false;
        this.boutonEnvoi = document.getElementById("bouton_envoi");
        this.champNom = document.getElementById("nom");
        this.champPrenom = document.getElementById("prenom");
        this.divReservation = document.getElementById("reservation");
        this.boutonEffacer = document.getElementById("erase");
        this.boutonRetour = document.getElementById("retour");
        this.boutonCancel = document.getElementById("cancel");
        this.boutonReservation = document.getElementById("reserver");
        this.maStation = document.getElementById("maStation");
        this.infoStations = document.getElementById("infoStations");
        this.infoReservation = document.getElementById("infoReservation");
        this.textVeloV = document.getElementById("velovText");
        this.canvas = document.getElementById("canvas");
        this.lancementTimer = "";
 
        this.storage();
        this.timerOnLoad();
 
    }
 
    count() {
        var that = this;
 
        var mins = Math.floor(this.secs / 60);
 
        var remsec = this.secs % 60;
 
        mins %= 60;
        this.secs -= 1
 
        if (mins < 10) {
            mins = "0" + mins;
        }
 
        if (remsec < 10) {
            remsec = "0" + remsec;
        }
 
        if (this.secs < 0) {
            clearInterval(this.lancementTimer);
            this.mydivTimer.style.display = "none";
            this.maStation.textContent = "Votre réservation a expiré, veuillez sélectionner une nouvelle station ! :)";
        }
 
        if (this.launchCount === false) {
            this.launchCount = true;
            this.lancementTimer = setInterval(this.count.bind(this), 1000);
        }
 
        this.mydivTimer.textContent = "Temps restant : " + mins + " : " + remsec;
 
        sessionStorage.setItem("mins", mins);
        sessionStorage.setItem("remsec", remsec);
 
 
    }
 
    storage() {
        let that = this;
 
        that.champNom.value = localStorage.getItem("nom");
        that.champPrenom.value = localStorage.getItem("prenom");
 
        this.boutonEnvoi.onclick = function () {
 
            that.boutonEnvoi.style.display = "none";
            that.boutonEffacer.style.display = "none";
            that.boutonRetour.style.display = "none";
            that.canvas.style.display = "block";
            that.textVeloV.style.display = "none";
            that.mydivTimer.style.display = "block";
            that.maStation.style.display = "block";
 
 
            let storageNom = localStorage.setItem("nom", that.champNom.value);
            let storagePrenom = localStorage.setItem("prenom", that.champPrenom.value);
 
            let index = document.getElementById("index").innerHTML;
            var stations = JSON.parse(LeafletMap.listeStation);
 
            sessionStorage.setItem("valeurTitreStation", stations[index].name);
            sessionStorage.setItem("valeurEtatStation", stations[index].status);
            sessionStorage.setItem("valeurAdresseStation", stations[index].address);
            sessionStorage.setItem("valeurPlaceStation", stations[index].available_bike_stands);
            sessionStorage.setItem("valeurVeloStation", stations[index].available_bikes);
 
            that.maStation.textContent = "Vélo réservé à la station " + stations[index].name + " par " + that.champNom.value + " " + that.champPrenom.value + ".";
 
            that.secs = 1200;
 
            that.count();
        }  
    }
 
    timerOnLoad() {
        var that = this;
        window.addEventListener("load", function () {
            if (sessionStorage.mins < 20) {
                that.mydivTimer.style.visibility = "visible";
                that.mydivTimer.textContent = " Votre vélo est toujours disponible à la station " + sessionStorage.valeurTitreStation + " pour une durée de : " + sessionStorage.mins + ":" + sessionStorage.remsec;
 
                that.lancementTimer = setInterval(that.count, 1000);
            }
 
        });
    } 
}
 
let reservation = new Reservation();

[NoSmoking]

...surement un problème de portée...

oui sur cette ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

that.lancementTimer = setInterval(that.count, 1000);

pourquoi n'as tu pas repris ce que tu a écris plus haut, à savoir :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.lancementTimer = setInterval(this.count.bind(this), 1000);

je parle de la forme, précision du contexte, pas du this

[superLKN]

Donc je devrais refaire un bind sur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 that.lancementTimer = setInterval(that.count, 1000);

, si je comprend bien ? Par contre que doi-je mettre en parasynthèse de mon bind ? Je ne vois pas du tout...

[NoSmoking]

Donc je devrais refaire un bind sur

Oui.

Par contre que doi-je mettre en parasynthèse de mon bind ? Je ne vois pas du tout...

L'objet à qui appartient la méthode attendu que tu utilises le mot clé this dans celle-ci, qui doit être en l’occurrence l'objet Reservation.
Dans ton écriture, sans le bind c'est l'objet window qui est représenté par le this donc cela ne fonctionne pas.
Il te faut donc écrire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

that.lancementTimer = setInterval(that.count.bind(that), 1000);

D'une façon générale tu as quand même un problème de conceptualisation du déroulement à suivre.
Ce qui t’intéresse c'est le temps restant, le nombre de secondes donc, alors c'est cette variable que tu devrais gérer et non pas mins qui dès que tu auras lancé ton timer sera toujours inférieur à 20.

Il serait donc plus judicieux de tester le temps restant plutôt que des variables mins et remsec qui ne sont que des sorties écran.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
if (sessionStorage.reste > 0) {
  // code
}

[superLKN]

Merci pour la réponse, ça m'a vachement aidé ! Voici ce que j'ai fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 var that = this;
        window.addEventListener("load", function () {
            if (sessionStorage.secs < 1200 ) {
                that.launchCount = true;
                that.mydivTimer.style.visibility = "visible";
                that.mydivTimer.style.display = "block";
                that.lancementTimer = setInterval(that.count.bind(that), 1000);
            }
        });

Par contre il y a juste un problème, quand j'actualise ma page, mon timer s'affiche bien ect, mais au lieu de repartir de ma valeur stockée, il recommence à 1200 ma valeur initial. Surement du a ma méthode count() ? :/

[superLKN]

Nevermind ! J'ai finalement rajouté

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 that.secs = sessionStorage.secs;

après le setInterval de mon addEventListener Load et ça marche ! Merci pour tout