Affichage des données stockées dans sessionStorage
Bonjour à tous,
je suis débutante en JavaScript et je dois réaliser un projet en programmation orientation objet dans le cadre de ma formation. Il faut que je crée une carte interactive de réservation de vélo, j'ai vu plusieurs sujets concernant ce projet ici. J'espère pouvoir obtenir de l'aide et je remercie les personnes qui vont me donner de leur temps.
J'ai pratiquement fini mais je bloque sur une des fonctionnalités attendues au niveau du timer : il doit s'afficher même si l'onglet a été rafraichi/fermé.
Pour l'instant ma logique est que lorsque l'utilisateur clique sur un marqueur, un formulaire à remplir s'affiche. Lorsque le formulaire est rempli et que l'utilisateur confirme, un récapitulatif s'affiche avec le timer.
Je voudrais que ce récapitulatif s'affiche de nouveau si la page est rafraichie ou fermée mais je pense que ma condition est mal écrite parce que ça ne fonctionne pas comme prévu. Et j'ai aussi remarqué que depuis que je récupère ce les minutes et les secondes depuis le sessionStorage, le décompte se fait de 2 secondes au lieu d'1.
Voici le code de ma classe pour le timer :
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
| class Booking {
constructor(){
this.cancelBooking = document.getElementById('cancel');
this.canvas = document.getElementById('to-sign');
this.confirm = document.getElementById('confirm');
this.reset = -1;
}
showTimer() {
this.confirm.addEventListener('click', () => {
let clientData = {
firstname: localStorage.getItem('firstname'),
lastname: localStorage.getItem('lastname'),
}
let storedStation = sessionStorage.getItem('stationName')
document.getElementById('station-to-book').style.display = 'none';
document.getElementById('booking-summary').style.display = 'block';
document.getElementById('client-info').textContent = clientData.firstname+' '+clientData.lastname;
document.getElementById('selected-station').textContent = storedStation;
let twentyMinutes = 60 * 20,
display = document.getElementById('timer');
this.startTimer(twentyMinutes, display);
this.stopTimer();
})
};
startTimer(duration, display) {
console.log('timer starts')
let timer = duration, minutes, seconds;
this.reset = setInterval(function() {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
sessionStorage.setItem('minutes', minutes);
sessionStorage.setItem('seconds', seconds);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
let countdown = {
minutes : sessionStorage.getItem('minutes'),
seconds : sessionStorage.getItem('seconds'),
}
display.textContent = countdown.minutes + ':' + countdown.seconds;//
if (--timer < 0) {
timer = duration;
} else if (--timer === 0) {
clearInterval(this.reset);
sessionStorage.clear();
document.getElementById('notification').innerHTML = 'Votre réservation a expiré'
}
}, 1000);
}
stopTimer(){
this.cancelBooking.addEventListener('click', () => {
clearInterval(this.reset);
sessionStorage.clear();
document.getElementById('booking-summary').style.display = 'none';
document.getElementById('station-to-book').style.display = 'block';
document.getElementById('canvas-container').style.display = 'none';
this.canvas.getContext('2d').clearRect(0,0, this.canvas.width, this.canvas.height);
document.getElementById('notification').innerHTML = 'Vous avez annulé votre réservation'
setTimeout(function(){
document.getElementById('notification').innerHTML = ''
},5000)
})
}
}; |
Et un morceau du code où j'utilise cette classe :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| marker.addEventListener('click', (e) => {
this.zoomOnClick(e);
let currentStation = document.getElementById('station-name');
if (currentStation.value != null) {
this.bookingInProgress.showTimer();
document.getElementById('booking-summary').style.display = 'block';
document.getElementById('station-to-book').style.display = 'nonea';
} else {
document.getElementById('info-container').classList.add('to-flex');
document.getElementById('info-container').classList.remove('to-hide');
document.getElementById('station-name').textContent = 'Vous avez choisi la station ' + stationName;
document.getElementById('status').textContent = ' ' + stationStatus;
document.getElementById('address').textContent = ' ' + stationAddress;
document.getElementById('available-bikes').textContent = ' ' + availableBikes + ' vélos disponibles';
document.getElementById('available-stands').textContent = ' ' + availableBikeStands + ' places disponibles';}
this.bookingInProgress.showTimer();
sessionStorage.setItem('stationName', stationName);
}); |
