Discussion :

[Lunesti]

Bonjour, je viens de nouveau demander de l'aide, malgré mes quelques mois de pratique déjà avec le javascript... ce que je demande ne semble pas compliqué mais tout ne me semble pas encore évident.

Lorsque j'actualise le navigateur, les données du formulaire doivent toujours être présent (nom, prénom), ainsi que le chrono qui continue de tourner.
Je dois garder en mémoire ces éléments tant que le navigateur est ouvert (donc même après un refresh. Donc lorsque je refresh le navigateur je dois toujours voir ceci (c'est un exemple)

- nom : Doe
- Prénom :John
- Le temps restant avant la fin de votre réservation est de : xx minutes xx secondes.




Ma class Chrono :

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
 
class Chrono {
 
    constructor(min, sec, time, storage) {
        this.min = min;
        this.sec = sec;
        this.time = time;
        this.stopWatchElt = Dom.stopWatchElement;
        this.storage = storage;
    }
 
    init() {
        this.stopWatchElt.innerHTML = this.min + " : " + this.sec;
        this.timer = setInterval(this.tick.bind(this), this.time);
    }
 
    clearMe() {
        console.log('clear')
        clearInterval(this.timer);
        Dom.textChronoElement.style.display = 'none';
        Dom.textChronoAnnulerElement.style.display = 'block';
        Dom.cancelElement.style.display = 'none';
        if (Dom.cancelElement.style.display = 'none') {
            this.clearStorage();
        }
    }
 
    tick() {
 
        this.sec--;
        if (this.sec == 0) {
            this.min--;
            this.sec = 59;
 
        } else if (this.min === 0 && this.sec === 1) {
            this.clearMe();
        }
        this.stopWatchElt.innerHTML = this.min + " : " + this.sec;
    }
};

Ma classe Storage

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
class Storage {
    constructor(station, storage) {
        this.station = station;
        this.localStorage;
        this.storage = storage;
    }
 
    dataRecord() {
        this.storage = sessionStorage.setItem("infos : ", JSON.stringify(this.station)); //La méthode JSON.stringify est une méthode JS qui convertit un objet en chaîne de caractère
        this.storage = sessionStorage.setItem('chrono : ' /*Ma méthode this.init qui déclenche le chrono */ );
        this.localStorage = localStorage.setItem("nom et prénom: ", Dom.firstNameElement.value + '' + Dom.surnameElement.value + '');
    }
 
    clearStorage() {
        this.sessionStorage.clear();
    }
}

Ma class Reservation

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
class Reservation {
 
    constructor(station, storage) {
        this.station = station;
        this.status = Dom.textChronoElement;
        this.storage = storage;
    }
 
    storeDatas() {
        this.storage = new Storage(this.station);
        this.storage.dataRecord();
    }
 
    startReservation() {
        console.log('chrono');
        const myChrono = new Chrono(19, 59, 1000, this.storage);
        myChrono.init();
    };
}

J'ai réussi à stocker les données du navigateur dans le cache avec sessionStorage, mais dans la page elle même je n'ai pas trouvé comment faire...

Je vous remercie par avance de votre aide

[SpaceFrog]

Qui dit rechargement de page dit rechargement du js.
Ensuite tout dépend de ce que tu veux prendre en compte comme temps pour le chrono…
Soit tu chronomètres tout depuis le lancement …
Soit tu chronomètre uniquement le temps pendant lequel la page est ouverte

Cela passera soit par des cookies, soit par du localstorage ou encore un stockage de temps sur le serveur ...

[Lunesti]

Merci pour ton aide.

J'ai modifié l'intitulé de mon post car j'ai oublié un élément, il ne s'agit pas que du chrono mais aussi des données du formulaire.
Le temps de mon chrono est de 20 minutes qui s'écoulent jusque 0.

Toute ces données (chrono qui tourne + données du formulaire) doivent rester apparent après un refresh. J'ai su utiliser sessionStorage() pour stocker les données dans le cache du navigateur mais pas dans la page elle même...

[SpaceFrog]

Tu dois récupérer les données de la page pour les mettre également dans le storage …
Par exemple sur le onbeforeunload de ta page
Dans quoi sont contenues tes données ? Un formulaire ? Tu pourrais faire un serialize ...

[Lunesti]

Dans quoi sont contenues tes données ?

Mes données sont contenu dans this.station. La démarche est içi

Class Map

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
 addMarkers() {
        this.stations.forEach((data) => {
            L.marker(Object.values(data.position), {
                    "data": data, // on garde ici les données intéressantes
                    icon: this.iconBleue
                })
                .addTo(this.map)
                .on("click", function() {
 
                    const formulaire = new Formulaire(new Station(data));
                    formulaire.showForm();
                    formulaire.statusOfReservation();
                    // formulaire.checkForm();
 
        });
    }

Quand je clique sur un marker, j'appel ma class Formulaire et je lui passe en paramètre mon objet Station , auquel je passe en paramètre mes données
(car c'est la classe Station seul qui contient mes données)

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
 
 
class Formulaire {
 
    constructor(station) {
        this.station = station;
        this.requiredFields();
        this.clearFields();
        this.changeButton();
        this.validateForm();
        this.cancelReservation();
    }
 
    showForm() {
        //On fait apparaitre le formulaire sur le côté en réduisant la taille de la map
        Dom.mapElement.style.width = '60%';
        Dom.mapElement.style.transitionDuration = "1000ms";
        if (window.matchMedia("(max-width: 768px)").matches) {
            Dom.mapElement.style.width = '100%';
            Dom.mapElement.style.transitionDuration = "0ms";
        }
    }
 
    requiredFields() {
        //Si le formulaire est vide, on laisse cacher le canvas
        Dom.reserveElement.addEventListener('click', () => {
            console.log('Ok')
            if (Dom.firstNameElement.value == '' && Dom.surnameElement.value == '') {
                alert('Veuillez renseigner votre nom et votre prénom');
            } else {
                Dom.canvasElement.style.visibility = 'visible';
                Dom.canvasElement.style.transitionDuration == "500ms";
                Dom.signElement.style.display = 'flex';
                Dom.formElement.style.height = "auto";
            }
        });
    }
 
    changeButton() {
        //Lorsqu'on clique sur le canvas, on switch le bouton réserver par le bouton valider
        Dom.canvasElement.addEventListener('click', () => {
            Dom.reserveElement.style.display = 'none';
            Dom.signElement.style.display = "none";
            Dom.validateElement.style.display = 'flex';
        });
 
        Dom.canvasElement.addEventListener('touchend', () => {
            Dom.reserveElement.style.display = 'none';
            Dom.signElement.style.display = "none";
            Dom.validateElement.style.display = 'flex';
        });
    }
 
    validateForm() {
            Dom.validateElement.addEventListener('click', () => {
                const resa = new Reservation(this.station);
                //console.log('infos:', this.station);
                resa.storeDatas();
                resa.startReservation();
                //Dom.modalElement.style.display = "none";
                Dom.validateElement.style.display = "none";
                Dom.cancelElement.style.display = 'flex';
                Dom.textChronoElement.style.display = 'inline';
                this.station.removeBike();
                Dom.availableBikesElement.innerHTML = this.station.getAvailableBikes();
                Dom.canvasElement.style.visibility = 'hidden';
                Dom.formElement.style.height = "500px";
                const canvas = new Canvas();
                canvas.clearCanvas();
            });
        }
        //Lorsqu'on clique sur le bouton "Annuler", on cache celui-ci, on cache le texte du chrono, on affiche le texte annuler
    cancelReservation() {
        Dom.cancelElement.addEventListener('click', () => {
            Dom.textChronoElement.style.display = 'none'; //On fait disparaitre le texte du chrono
            Dom.textChronoAnnulerElement.style.display = 'block'; //On fait apparaitre le texte "Réservation annulée"
            Dom.cancelElement.style.display = 'none'; // On cache le bouton annuler
            this.station.addBike();
            Dom.availableBikesElement.innerHTML = this.station.getAvailableBikes();
            Dom.firstNameElement.value = '';
            Dom.surnameElement.value = '';
            const stopChrono = new Chrono();
            stopChrono.clearMe();
        });
    }
 
    statusOfReservation() {
        //Tant que le texte du chrono est affiché, on ne peut pas effectuer d'autres réservations.
        if (Dom.textChronoElement.style.display === 'flex') {
            alert('Vous avez déjà une réservation en cours. Veuillez annulez la précédente')
        }
    }
 
    clearFields() {
        Dom.firstNameElement.value = '';
        Dom.surnameElement.value = '';
    }
}

Class Station :

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
 
 
class Station {
    constructor(data) {
        this.status = data.status;
        this.name = data.name;
        this.address = data.address;
        this.available_bikes = data.available_bikes;
        this.bike_stands = data.bike_stands;
        this.display();
    }
 
    display() {
        const elements = Dom.stationsElement.querySelectorAll('[id]');
        for (let elem of elements) {
            elem.style.fontWeight = "bold";
        }
 
        Dom.statusElement.innerHTML = this.status;
        //Dom.getEtat().style.fontWeight = 'bold';
        Dom.nameElement.innerHTML = this.name;
        Dom.addressElement.innerHTML = this.address;
        Dom.availableBikesElement.innerHTML = this.available_bikes;
        Dom.bikeStandsElement.innerHTML = this.bike_stands;
    };
 
    removeBike() {
        this.available_bikes--;
    }
 
    addBike() {
        this.available_bikes++;
    }
 
    getAvailableBikes() {
        return this.available_bikes;
    }
}

Ensuite, dans ma class Formulaire, lorsque je clique sur "Valider", j'appel ma class Reservation qui contient une instance de ma class Storage et une Instance de ma class Chrono:

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
 
class Reservation {
 
    constructor(station, storage) {
        this.station = station;
        this.status = Dom.textChronoElement;
        this.storage = storage;
    }
 
    storeDatas() {
        this.storage = new Storage(this.station);
        this.storage.dataRecord();
    }
 
    startReservation() {
        console.log('chrono');
        const myChrono = new Chrono(19, 59, 1000, this.storage);
        myChrono.init();
    };
}

Mes données sont contenu dans:

Code :

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

this.station = station

Tu dois récupérer les données de la page pour les mettre également dans le storage …

J'ai pour cela créé une class Storage dans laquelle je récupère les données

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
 
class Storage {
    constructor(station, storage) {
        this.station = station;
        this.localStorage;
        this.storage = storage;
    }
 
    dataRecord() {
        this.storage = sessionStorage.setItem("infos : ", JSON.stringify(this.station)); //La méthode JSON.stringify est une méthode JS qui convertit un objet en chaîne de caractère
        this.storage = sessionStorage.setItem('chrono : ' Dom.firstNameElement.value == '' && Dom.surnameElement.value );
        this.localStorage = localStorage.setItem("nom et prénom: ", Dom.firstNameElement.value + '' + Dom.surnameElement.value + '');
    }
 
    clearStorage() {
        this.sessionStorage.clear();
    }
}

Mais lors d'un refresh, j'aimerais savoir comment cela fonctionne pour que les données du formulaire et le chrono reste apparent ^^

[SpaceFrog]

Non ils ne resteront pas apparents juste parce que tu les as mis en localstorage !

TU dois sur le load de la page aller les chercher pour les restituer sur la page