Discussion :

[Kasya]

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 :

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

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

[mathieu]

La première étape pour résoudre ce genre de problème est d'afficher le contenu des variables utilisées. Si elles ne contiennent pas l'information attendue, il faut ensuite remonter à l'endroit où la variable a été modifiée et continuer l'affichage de la même façon.

En JavaScript, le plus simple actuellement est d'utiliser la console de développement. Vous pouvez y afficher le contenu d'une variable avec le code console.log(variable);

[Kasya]

Merci pour la réponse.
J'ai réussi à régler quelques soucis avec les console.log mais j'étais vraiment bloquée quand j'ai écrit mon message. Depuis j'ai eu quelques pistes, notamment un soucis au niveau de ma logique et ce que je veux faire. Je travaille encore dessus pour l'instant.