Conserver les données du formulaire après un refresh

**Lunesti** · 24/07/2020, 10h24

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** · 24/07/2020, 13h45

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** · 24/07/2020, 15h02

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** · 24/07/2020, 15h10

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** · 24/07/2020, 15h35

Envoyé par SpaceFrog

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** · 24/07/2020, 16h56

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

**NoSmoking** · 26/07/2020, 09h46

Bonjour,

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)
...
- Le temps restant avant la fin de votre réservation est de : xx minutes xx secondes.

tu persistes dans ton erreur ce n'est pas le temps restant qu'il te faut sauvegarder, il change tout le temps, mais la date/heure de fin prévue de ton compte à rebours.

Ta classe chrono devrait travailler avec cette donnée et non pas avec un simple décompte sur base d'un setInterval, mais il me semble te l'avoir déjà dit !

**Lunesti** · 26/07/2020, 09h57

Envoyé par SpaceFrog

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

C'est bien ca. Dans un premier temps, je dois vérifier si les données existe sur le formulaire. S'ils existent, je dois les conserver après un refresh. Je travail dessus demain et je reviens si je ne trouve pas la solution...

**Lunesti** · 26/07/2020, 10h02

Envoyé par NoSmoking

Bonjour,

tu persistes dans ton erreur ce n'est pas le temps restant qu'il te faut sauvegarder, il change tout le temps, mais la date/heure de fin prévue de ton compte à rebours.

Il me faut sauvegarder le nom et le prénom de la personne qui réserve (les éléments input) dans le formulaire ainsi que le chrono. Autrement dit les données doivent toujours resté affiché dans le formulaire même après un refresh.

**NoSmoking** · 26/07/2020, 17h40

Cela on l'a bien compris, je te parle de la partie Chrono à storer, relis mon message.

**Lunesti** · 27/07/2020, 10h33

J'ai essayé ceci, mais cela ne fonctionne pas :

Code :

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

1
2
3
4
5
6
    refresh() {
        window.addEventListener('onbeforeunload', () => {
            Dom.mapElement.style.width = '60%';
            Dom.firstNameElement.value = Storage.getUser();
        });
    }

Class 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
18
19
class Storage {
 
    static dataRecord(station) {
        sessionStorage.setItem("station", station); 
        localStorage.setItem("user", Dom.firstNameElement + '' + Dom.surnameElement);
    }
 
    static clear() {
        return sessionStorage.clear();
    }
 
    static getStation() {
        return sessionStorage.getItem("station");
    }
 
    static getUser() {
        return localStorage.getItem("user");
    }
};

(Dom.firstNameElement correspond au champs textuel du formulaire)

Normalement, avec getItem nous pouvons récupérer les données stockées, mais cela ne fonctionne pas...

Une idée ?

**Lunesti** · 27/07/2020, 10h38

Envoyé par NoSmoking

Bonjour,

tu persistes dans ton erreur ce n'est pas le temps restant qu'il te faut sauvegarder, il change tout le temps, mais la date/heure de fin prévue de ton compte à rebours.

Oui effectivement ! Je vais m'en occuper.
Mais pour l'instant je cherche la méthode pour récupérer les données enregistré. J'ai proposé un code ci dessus qui ne fonctionne pas ...

**Lunesti** · 27/07/2020, 11h36

J'ai ajouté ce code pour storer mon chrono

Code :

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

 sessionStorage.setItem("Chrono : ", Dom.stopWatchElement)

Dans la console :

Code :

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

1
2
sessionStorage
Storage*{station: "[object Object]", "Chrono : ": "[object HTMLSpanElement]", length: 2}

Mon mentor m'a spécifié qu'il n'est pas nécessaire d'afficher les éléments dans la console, les laisser en tant qu'Object suffit.

**NoSmoking** · 27/07/2020, 11h53

refresh()

elle sort d'où cette méthode, quand est-elle appelée ?

Sur le window.addEventListener("onbeforeunload" on écrit dans le Storage, il va falloir que tu te décides entre localStorage et sessionStorage, donc on ne fait pas un getItem(item) mais un setItem(item, value);.

Sur le window.addEventListener("load" on lit les données et si existent on les affiche.

**Lunesti** · 28/07/2020, 13h34

Envoyé par NoSmoking

elle sort d'où cette méthode, quand est-elle appelée ?

C'était un test, je l'ai retiré donc nous pouvons l'oublier.

La où je bloque c'est que je n'arrive pas à formuler en js ceci : "si les données existent, on les conserve lors du rafraîchissement du navigateur"...

Je vois quelque chose de ce type :

Code :

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

1
2
3
4
5
 
window.addEventListener('load', () => {
if(les données existent)
        les données sont conservé
});

**NoSmoking** · 30/07/2020, 10h55

je n'arrive pas à formuler en js ...

le plus simplement du monde !

Code :

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

1
2
3
4
const datas = sessionStrorage.getItem("itemDatas");
if( datas) {
  // mettre à jour la page avec les données lues, Attention c'est une chaîne de caractères
}

**Lunesti** · 30/07/2020, 12h09

Après quelques recherches et avec l'aide de mon mentor j'ai pu récupérer les données du formulaire grâce à la méthode check();

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
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
/*------------------------------------------
MAP
------------------------------------------*/
 
class Map {
    constructor() {
        this.map = L.map('map').setView([49.8941708, 2.2956951], 13);
        this.stations = [{ "number": 2, "contract_name": "amiens", "name": "02- LES HALLES", "address": "Rue J Natiere", "position": { "lat": 49.896032388592566, "lng": 2.295043974872919 }, "banking": true, "bonus": false, "bike_stands": 20, "available_bike_stands": 11, "available_bikes": 9, "status": "OPEN", "last_update": 1586940960000 }, { "number": 10, "contract_name": "amiens", "name": "10- PALAIS DE JUSTICE", "address": "Place D' Aguesseau", "position": { "lat": 49.8933588618336, "lng": 2.301314220716614 }, "banking": true, "bonus": false, "bike_stands": 20, "available_bike_stands": 12, "available_bikes": 8, "status": "OPEN", "last_update": 1586940816000 }, { "number": 4, "contract_name": "amiens", "name": "04- PLACE AU FEURRE", "address": "Place au Feurre", "position": { "lat": 49.89729029741273, "lng": 2.297864452413288 }, "banking": true, "bonus": false, "bike_stands": 20, "available_bike_stands": 10, "available_bikes": 10, "status": "OPEN", "last_update": 1586941186000 }, { "number": 24, "contract_name": "amiens", "name": "24- COLISEUM", "address": "Boulevard Faidherbe", "position": { "lat": 49.89413492763881, "lng": 2.287054048660281 }, "banking": true, "bonus": false, "bike_stands": 20, "available_bike_stands": 11, "available_bikes": 9, "status": "OPEN", "last_update": 1586941064000 }, { "number": 25, "contract_name": "amiens", "name": "25- LA HOTOIE", "address": "Bd des Fédérés", "position": { "lat": 49.896862536806346, "lng": 2.282867747579433 }, "banking": true, "bonus": false, "bike_stands": 20, "available_bike_stands": 9, "available_bikes": 11, "status": "OPEN", "last_update": 1586940925000 }, { "number": 8, "contract_name": "amiens", "name": "08- VANMARCKE", "address": "Rue Edouard David", "position": { "lat": 49.896851505866685, "lng": 2.301575828797199 }, "banking": true, "bonus": false, "bike_stands": 13, "available_bike_stands": 6, "available_bikes": 7, "status": "OPEN", "last_update": 1586940912000 }, { "number": 9, "contract_name": "amiens", "name": "09- CATHEDRALE", "address": "Rue Flatters", "position": { "lat": 49.89508211905397, "lng": 2.299395003901743 }, "banking": true, "bonus": false, "bike_stands": 17, "available_bike_stands": 8, "available_bikes": 9, "status": "OPEN", "last_update": 1586941378000 }, { "number": 3, "contract_name": "amiens", "name": "03- VOGEL", "address": "Bd du jardin des plantes", "position": { "lat": 49.898124385191046, "lng": 2.295195128091815 }, "banking": true, "bonus": false, "bike_stands": 20, "available_bike_stands": 12, "available_bikes": 8, "status": "OPEN", "last_update": 1586940960000 }, { "number": 26, "contract_name": "amiens", "name": "26- MARCHE AUX CHEVAUX", "address": "Rue du Marché aux Chevaux", "position": { "lat": 49.897251288573926, "lng": 2.289247027835661 }, "banking": true, "bonus": false, "bike_stands": 20, "available_bike_stands": 9, "available_bikes": 11, "status": "OPEN", "last_update": 1586941348000 }, { "number": 16, "contract_name": "amiens", "name": "16- JOFFRE", "address": "Place du Maréchal Joffre", "position": { "lat": 49.88779293086959, "lng": 2.30361108882717 }, "banking": true, "bonus": false, "bike_stands": 20, "available_bike_stands": 13, "available_bikes": 7, "status": "OPEN", "last_update": 1586941170000 }, { "number": 15, "contract_name": "amiens", "name": "15- JACOBINS", "address": "Rue des Jacobins", "position": { "lat": 49.8909435451942, "lng": 2.300843419403305 }, "banking": true, "bonus": false, "bike_stands": 20, "available_bike_stands": 13, "available_bikes": 7, "status": "OPEN", "last_update": 1586941111000 }, { "number": 14, "contract_name": "amiens", "name": "14- GARE CINEMA", "address": "Passage Alphonse Fiquet", "position": { "lat": 49.89028092622952, "lng": 2.307375584272146 }, "banking": true, "bonus": false, "bike_stands": 20, "available_bike_stands": 9, "available_bikes": 11, "status": "OPEN", "last_update": 1586941009000 }, { "number": 19, "contract_name": "amiens", "name": "19- REPUBLIQUE", "address": "République Gambetta", "position": { "lat": 49.892720073260215, "lng": 2.297075819641891 }, "banking": true, "bonus": false, "bike_stands": 20, "available_bike_stands": 8, "available_bikes": 12, "status": "OPEN", "last_update": 1586941239000 }, { "number": 12, "contract_name": "amiens", "name": "12- AMIENS 2", "address": "Bd Alsace Lorraine", "position": { "lat": 49.89223828665915, "lng": 2.30769408025555 }, "banking": true, "bonus": false, "bike_stands": 18, "available_bike_stands": 10, "available_bikes": 8, "status": "OPEN", "last_update": 1586941005000 }, { "number": 20, "contract_name": "amiens", "name": "20- BRANLY", "address": "Bd Maignan Larivière", "position": { "lat": 49.89001551426808, "lng": 2.291227264216073 }, "banking": true, "bonus": false, "bike_stands": 20, "available_bike_stands": 12, "available_bikes": 8, "status": "OPEN", "last_update": 1586940982000 }, { "number": 22, "contract_name": "amiens", "name": "22- QUATRE CHENES", "address": "Avenue du Général Foy", "position": { "lat": 49.890242, "lng": 2.282163 }, "banking": true, "bonus": false, "bike_stands": 20, "available_bike_stands": 11, "available_bikes": 9, "status": "OPEN", "last_update": 1586940914000 }, { "number": 23, "contract_name": "amiens", "name": "23- ST ROCH", "address": "Foch", "position": { "lat": 49.893442525890926, "lng": 2.284525283004338 }, "banking": true, "bonus": false, "bike_stands": 20, "available_bike_stands": 11, "available_bikes": 9, "status": "OPEN", "last_update": 1586940913000 }, { "number": 11, "contract_name": "amiens", "name": "11- PORT D' AMONT", "address": "Bd Du Port D' Amont", "position": { "lat": 49.89557785209512, "lng": 2.306191079777315 }, "banking": true, "bonus": false, "bike_stands": 20, "available_bike_stands": 10, "available_bikes": 10, "status": "OPEN", "last_update": 1586941248000 }, { "number": 1, "contract_name": "amiens", "name": "01 - SAINT PIERRE", "address": "Rue Eloi Morel angle bd baraban", "position": { "lat": 49.901646, "lng": 2.303244 }, "banking": true, "bonus": false, "bike_stands": 20, "available_bike_stands": 13, "available_bikes": 7, "status": "OPEN", "last_update": 1586940910000 }, { "number": 13, "contract_name": "amiens", "name": "13- GARE JULES BARNI", "address": "Rue Jules Barni", "position": { "lat": 49.889774, "lng": 2.3091 }, "banking": true, "bonus": false, "bike_stands": 18, "available_bike_stands": 7, "available_bikes": 11, "status": "OPEN", "last_update": 1586941230000 }, { "number": 7, "contract_name": "amiens", "name": "07- COLLEGE SAINT-MARTIN", "address": "68 rue Delpech à proximité du Collège St Martin", "position": { "lat": 49.8842726, "lng": 2.294836 }, "banking": true, "bonus": false, "bike_stands": 15, "available_bike_stands": 8, "available_bikes": 7, "status": "OPEN", "last_update": 1586941257000 }, { "number": 21, "contract_name": "amiens", "name": "21- MAISON DE LA CULTURE", "address": "Place Léon Gontier", "position": { "lat": 49.89392165574068, "lng": 2.292724729098195 }, "banking": true, "bonus": false, "bike_stands": 20, "available_bike_stands": 9, "available_bikes": 11, "status": "OPEN", "last_update": 1586940846000 }, { "number": 17, "contract_name": "amiens", "name": "17- CIRQUE", "address": "Mail Albert 1er", "position": { "lat": 49.8887, "lng": 2.2973 }, "banking": true, "bonus": false, "bike_stands": 20, "available_bike_stands": 11, "available_bikes": 8, "status": "OPEN", "last_update": 1586941259000 }, { "number": 27, "contract_name": "amiens", "name": "27- CITÉ SCOLAIRE", "address": "", "position": { "lat": 49.879239, "lng": 2.296116 }, "banking": false, "bonus": false, "bike_stands": 40, "available_bike_stands": 25, "available_bikes": 15, "status": "OPEN", "last_update": 1586940824000 }, { "number": 5, "contract_name": "amiens", "name": "05- ST LEU", "address": "66 Rue St Leu", "position": { "lat": 49.8990979, "lng": 2.3005394 }, "banking": true, "bonus": false, "bike_stands": 20, "available_bike_stands": 12, "available_bikes": 8, "status": "OPEN", "last_update": 1586941076000 }, { "number": 6, "contract_name": "amiens", "name": "06- CITADELLE MONTRESCU", "address": "Avenue du général du Gaulle", "position": { "lat": 49.904325, "lng": 2.30082 }, "banking": true, "bonus": false, "bike_stands": 50, "available_bike_stands": 42, "available_bikes": 8, "status": "OPEN", "last_update": 1586940966000 }];
        this.layer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(this.map);
        this.iconBleue = L.icon({
            iconUrl: 'img/marker_bleu.png',
            iconSize: [38, 38],
        });
        this.iconRouge = L.icon({
            iconUrl: '../img/marker_rouge.png',
            iconSize: [38, 38],
        });
 
        this.check();
    }
 
 
    //Ajouter Markers
    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", this.clickEvent.bind(this, data));
 
        });
    }
 
    clickEvent(data) {
        const formulaire = new Formulaire(new Station(data));
        formulaire.showForm();
        formulaire.statusOfReservation();
        // formulaire.checkForm();
 
        Dom.cancelElement.style.display = "none";
        Dom.reserveElement.style.display = "flex";
        Dom.textChronoAnnulerElement.style.display = 'none';
 
 
        //Si la station est OPEN, marker couleur bleue. Sinon, couleur rouge
        if (data.status === "OPEN" && data.available_bikes > 0) {
            L.marker({ icon: this.iconBleue })
        } else {
            L.marker({ icon: this.iconRouge })
        }
    }
 
    check() {
        if (Storage.hasStationInfo()) {
            console.log('Les données existent');
            const data = Storage.getStation();
            this.clickEvent(data);
            console.log("Station: ", data);
        }
    }
};
 
const myMap = new Map();
myMap.addMarkers();

Class Formulaire

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 Formulaire {
 
    constructor(station) {
        this.station = station;
        this.requiredFields();
        this.changeButton();
        this.validateForm();
        this.cancelReservation();
        this.check();
 
    }
    check() {
        if (Storage.hasUserInfo()) {
            console.log('User');
            Dom.firstNameElement.value = Storage.getFirstname();
            Dom.lastnameElement.value = Storage.getLastname();
        }
    }
...

class 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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
    class Storage {
 
        static dataRecord(station) {
            sessionStorage.setItem("station", JSON.stringify(station)); //La méthode JSON.stringify est une méthode JS qui convertit un objet en chaîne de caractère
            localStorage.setItem("firstname", Dom.firstNameElement.value);
            localStorage.setItem('lastname', Dom.lastnameElement.value);a
        }
 
        static clear() {
            return sessionStorage.clear();
        }
 
        static getStation() {
            return JSON.parse(sessionStorage.getItem("station"));
        }
 
        static getFirstname() {
            return localStorage.getItem("firstname");
        }
 
        static getLastname() {
            return localStorage.getItem("lastname");
        }
 
        static hasUserInfo() {
            return localStorage.getItem('firstname') !== null && localStorage.getItem('lastname') !== null;
        }
 
        static hasStationInfo() {
            return sessionStorage.getItem('station') !== null;
        }
    };

Ceci est une partie du travail fait maintenant il me reste à afficher le chrono dans le storage puis le récupérer dans le HTML lors d'un refresh ! Je repasserai ici si besoin ^^

**NoSmoking** · 30/07/2020, 18h38

As tout vouloir mettre dans tes « class » tu en oublie qu'une « classe » est une abstraction qui représente « un modéle » et qui est indépendant des données en cours. Elle doit pouvoir être réutilisable.

Si j'ai bon souvenir tu as le même soucis que celui que je t'avais dit concernant ta « classe » Dom.

maintenant il me reste à afficher le chrono dans le storage

Relis bien la discussion pour savoir ce qu'il y a à stoker

**Lunesti** · 31/07/2020, 10h29

Bonjour,

Oui je me rappel.

Le plus gros défaut que j'y trouve est qu'à chaque appel tu refais un document.getElementById, ou autres, et qu'à chaque fois que tu vas définir un nouvel élément dans le DOM tu vas ajouter une méthode, là c'est très moyen.

J'y tiens compte, je vais essayer de proposer quelque chose de plus correct.

En attendant j'ai réussi à récupérer les données de l'utilisateur (nom et prénom) lorsqu'on rafraîchit le navigateur. Mais pour le chrono cela me renvoit 'undefined'. J'ai pourtant effectué exactement le même procédé que pour les données de l'utilisateur :

Class 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
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
    class Storage {
 
        static dataRecord(station) {
            sessionStorage.setItem("min", Dom.minElement.value);
            sessionStorage.setItem("sec", Dom.secElement.value);
            sessionStorage.setItem("station", JSON.stringify(station));
            localStorage.setItem("firstname", Dom.firstNameElement.value);
            localStorage.setItem('lastname', Dom.lastnameElement.value);
        }
 
        static getMin() {
            return sessionStorage.getItem("min");
        }
 
        static getSec() {
            return sessionStorage.getItem("sec");
        }
 
        static clear() {
            return sessionStorage.clear();
        }
 
        static getStation() {
            return JSON.parse(sessionStorage.getItem("station"));
        }
 
        static getFirstname() {
            return localStorage.getItem("firstname");
        }
 
        static getLastname() {
            return localStorage.getItem("lastname");
        }
 
        static hasUserInfo() {
            return localStorage.getItem('firstname') !== null && localStorage.getItem('lastname') !== null;
        }
 
        static hasStationInfo() {
            return sessionStorage.getItem('station') !== null;
        }
    };

Dans ma class Formulaire ma méthode check() vérifie si les données et le chrono ont une valeur différente de null et undefined, dans ce cas je dis que l'ID du DOM est égal aux données stocké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
class Formulaire {
 
    constructor(station) {
        this.station = station;
        this.requiredFields();
        this.changeButton();
        this.validateForm();
        this.cancelReservation();
        this.check();
 
    }
    check() {
        if (Storage.hasUserInfo()) {
            console.log('User');
            Dom.firstNameElement.value = Storage.getFirstname();
            Dom.lastnameElement.value = Storage.getLastname();
        }
 
        if (typeof Storage.getMin() !== 'undefined' &&
            typeof Storage.getSec() !== 'undefined' &&
            Storage.getMin() != null &&
            Storage.getSec() != null) {
            Dom.textChronoElement.style.display = 'inline';
            Dom.minElement.innerHTML = Storage.getMin();
            Dom.secElement.innerHTML = Storage.getSec();;
        }

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
41
42
43
44
class Chrono {
 
    constructor(minutes = 0, secondes = 0) {
 
        //this.elem = document.querySelector('#time');
        this.min = Dom.minElement;
        this.sec = Dom.secElement;
 
        this.duree = ((minutes * 60) + secondes) * 1000;
 
        this.iTimer = null;
 
        this.timeEnd;
    }
 
    startTimer() {
 
        this.timeEnd = Date.now() + this.duree;
 
        this.iTimer = setInterval(() => {
            this.decompteTimer();
        }, 1000);
        this.decompteTimer();
    }
 
    stopTimer() {
        clearInterval(this.iTimer);
    }
 
    decompteTimer() {
 
        const reste = Math.ceil((this.timeEnd - Date.now()) / 1000);
        if (reste > 0) {
            const h = ("00" + parseInt(reste / 3600, 10)).slice(-2);
            const m = ("00" + parseInt((reste % 3600) / 60, 10)).slice(-2);
            const s = ("00" + parseInt((reste % 3600) % 60, 10)).slice(-2);
            this.min.innerHTML = m + ":";
            this.sec.innerHTML = s;
        } else {
            clearInterval(this.iTimer);
            Dom.textChronoElement.textContent = "Comptage terminé !";
        }
    }
}

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<p>
    <label for="yourFirstName"> </label>
     <input id="firstname" class='input' type="text" placeholder="Name" required />
     <br><br>
     <label for="yourSurname"> </label>
     <input id="surname" class='input' type="text" placeholder="Surname" required />
</p>
<p class='btn signature'>Réserver</p>
 <!--------CHRONO-------->
<p class='text_chrono animate__shakeX'>Réservation validée ! le temps restant est de <span id="min"></span> <span id='sec'></span> minutes.</p> <br>
<p class='text_chrono_annuler'>Réservation annulée. Vous pouvez si vous le souhaitez réserver un nouveau vélo.</p>
<p class='btn cancel'>Annuler</p>

Je vois pas où est le problème car j'ai pourtant fait la même chose, j'ai même essayé avec

Code :

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

1
2
            sessionStorage.setItem("min", JSON.stringify(Dom.minElement.value));
            sessionStorage.setItem("sec", JSON.stringify(Dom.secElement.value));

Mais ça ne marche toujours pas , merci de bien vouloir m'aider ^^

**NoSmoking** · 01/08/2020, 12h08

Comme je te l'ai déjà dit il est plus judicieux de storer la date/time de fin du chrono et c'est sur cette base que je vais poursuivre.

Je suis reparti de la classe Chrono que je t'avais fournie dans ton autre discussion à savoir :

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(minutes = 0, secondes = 0) {
    this.elem = document.querySelector('#time');
    this.duree = ((minutes * 60) + secondes) * 1000;
    this.iTimer = null;
    this.timeEnd;
  }
 
  startTimer(timeEnd) {
    if( timeEnd) {
      this.timeEnd = timeEnd;
    }
    else{
      this.timeEnd = Date.now() + this.duree;
    }
 
    this.iTimer = setInterval(() => {
      this.decompteTimer();
    }, 1000);
    this.decompteTimer();
  }
 
  stopTimer() {
    clearInterval(this.iTimer);
  }
 
  decompteTimer() {
    const reste = Math.ceil((this.timeEnd - Date.now()) / 1000);
    if (reste > 0) {
      const h = ("00" + parseInt(reste / 3600, 10)).slice(-2);
      const m = ("00" + parseInt((reste % 3600) / 60, 10)).slice(-2);
      const s = ("00" + parseInt((reste % 3600) % 60, 10)).slice(-2);
      this.elem.textContent = h + ":" + m + ":" + s;
    }
    else {
      clearInterval(this.iTimer);
      this.elem.textContent = "Comptage terminé !";
    }
  }
}

seule la méthode startTimer a été modifiée pour tenir compte de ce qui va suivre, elle accepte un paramètre qui permet d'éviter le re-calcul du temps restant.

Au préalable ton chrono aura été déclaré comme suit :

Code :

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

1
2
const chrono = new Chrono(20);
chrono.startTimer();    // pas de paramètre à startTimer

Concernant le storage :
• sur le beforeunload il suffit de faire :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
window.addEventListener("beforeunload", function (event) {
  // récup. du temps restant
  const tempsRestant = chrono.timeEnd - Date.now();
  if (tempsRestant > 0){
    // store date de fin du chrono en millisecondes
    sessionStorage.setItem( "timeEnd", chrono.timeEnd);
    // juste pour voir clairement la date dans le storage
    sessionStorage.setItem( "dateEnd", new Date( chrono.timeEnd));
  }
  else {
    sessionStorage.clear();
  }
});

• et sur le load

Code :

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

1
2
3
4
5
6
7
8
9
10
window.addEventListener("load", function (event) {
  // read date de fin du chrono en millisecondes
  // Attention cast string to number avec l'unary plus (+)
  const timeEnd = +sessionStorage.getItem( "timeEnd");
  const tempsRestant = timeEnd - Date.now();
  if( tempsRestant > 0){
    // relance timer avec date de fin de chrono
    chrono.startTimer(timeEnd);
  }
});

là on note le paramètre sur la méthode startTimer.

Voilà ta page pourra mettre une minute pour ce recharger cela sera quand même opérationnel.
Teste en mettant un alert("Wait") sur ta page pour t'en rendre compte.

Conserver les données du formulaire après un refresh

JavaScript

Discussions similaires

Partager

Partager