Timer qui reste affiché après actualisation de la page

Version imprimable

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:

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 :)

02/06/2019, 09h06
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.
02/06/2019, 13h15
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.

Voici ce que contient mon fichier reservation.js :

Code:

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

:salut:

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

C'est window pas document !
Code:

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.

03/06/2019, 18h35
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 :/

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

Code:

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

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

Code:

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

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

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.

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

Code:

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:

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

04/06/2019, 19h14
NoSmoking

Citation:

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

oui sur cette ligne

Code:

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

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

Code:

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

je parle de la forme, précision du contexte, pas du this ;)
04/06/2019, 19h29
superLKN

Donc je devrais refaire un bind sur

Code:

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...
05/06/2019, 10h32
NoSmoking
Citation:

Donc je devrais refaire un bind sur

Oui.

Citation:

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:

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:

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

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

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() ? :/

05/06/2019, 16h13
superLKN

Nevermind ! J'ai finalement rajouté

Code:

that.secs = sessionStorage.secs;

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