Timer POO en Javascript Pur
Bonjour à tous et à toutes !
J'essaie de m'appuyer sur une base de code afin de ne pas partir de zéro pour créer mon timer JS en POO (avec stockage des infos dans le storage) car je ne sais pas trop par où commencer... seulement, je m'arrache un peu les cheveux.. si quelqu'un peut me filer un petit coup de main pour savoir où je me plante svp :?
Voici mon 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 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150
| class Location {
constructor () {
this.formElt = document.querySelector("form");
this.tableElt = document.getElementById("station");
this.reservedP = document.getElementById("reserved");
this.errorP = document.getElementById("error");
this.firstnameElt = document.getElementById("prenom");
this.spanElt = document.createElement("span");
this.interval = null;
this.form = document.getElementById("form-sign");
this.asideElt = document.getElementById("station");
this.buttonYes = document.createElement("button");
this.buttonNo = document.createElement("button");
this.reservationButton = document.getElementById("validerresa");
this.nameElt = document.getElementById("nom");
}
// Methode : Ajoute le texte et l'ID aux nouveaux boutons
showButton(){
this.buttonYes.textContent = "Oui";
this.buttonYes.id = "yes";
this.buttonNo.id = "no";
this.buttonNo.textContent = "Non";
}
// Méthode : Affiche la reservation au chargement (s'il y en a une)
showReservation(){
if (sessionStorage.getItem("station-statut") === null){
sessionStorage.setItem("station-statut","0");
}
if (parseInt(sessionStorage.getItem("station-statut"),10) === 1) {
this.timeLocation(parseInt(sessionStorage.getItem("timeLeft"),10));
this.reservedP.innerText = "Merci " + this.firstnameElt.value + " ! Vous avez réservé un vélo à la station : " + sessionStorage.getItem("location") + ". \n Votre réservation se terminera dans ";
this.reservedP.appendChild(this.spanElt);
this.spanElt.id = "time";
this.formElt.style.display = "none";
this.asideElt.style.display = "none";
} else {
// Sinon, indique aucune réservation
this.reservedP.innerHTML = "Vous n'avez pas de réservation en cours. Suivez les étapes pour réserver un Vélov' !";
}
}
// Méthode : Afficher nom et prénom dans le formulaire
showName(){
if (localStorage.getItem("nom") != null) {
this.nameElt.value = localStorage.getItem("nom");
}
if (localStorage.getItem("prenom") != null) {
this.firstnameElt.value = localStorage.getItem("prenom");
}
}
// Méthode : Temps réservation
timeLocation(time){
let that = this;
// Init Time sur la résa actuelle
function intervalTime() {
if (time > 0) {
let minLeft = Math.floor(time / 60);
let secLeft = time - minLeft * 60;
document.getElementById("time").textContent = minLeft + " minutes et " + secLeft + " secondes.";
time--;
sessionStorage.setItem("timeLeft", time);
} else {
clearInterval(that.interval);
sessionStorage.setItem('station-statut', "0");
that.reservedP.textContent = "Votre réservation a expiré.";
}
}
this.interval = setInterval(intervalTime, 1000);
}
// Méthode : Affiche la réservation si tout est ok
reservationOk() {
sessionStorage.setItem("station-statut", "1");
this.timeLocation(1200);
sessionStorage.setItem("location", document.getElementById("station-adresse").textContent);
localStorage.setItem("nom", document.getElementById("nom").value);
localStorage.setItem("prenom", document.getElementById("prenom").value);
this.reservedP.innerHTML = "Merci " + this.firstnameElt.value + " ! Vous avez réservé un vélo à la station : " + sessionStorage.getItem("location") + ". <br>Votre réservation se terminera dans ";
this.reservedP.appendChild(this.spanElt);
this.spanElt.id = "time";
this.formElt.style.display = "none";
this.asideElt.style.display = "none";
this.errorP.style.display = "none";
}
// Méthode : Event au clic
event() {
let that = this;
//Au clic sur le bouton de validation, création d'un réservation
that.reservationButton.addEventListener("click", function(e){
/*document.getElementById("validerresa").onclick = function(e){*/
if (location.available_bikes > 0) {
if (parseInt(sessionStorage.getItem("station-statut"),10) === 0) {
if (sign.empty === 1) {
that.reservationOk();
} else {
that.errorP.style.display = "block";
that.errorP.textContent = "La signature est obligatoire pour valider";
setTimeout(function () {
that.errorP.textContent = "";
that.errorP.style.display = "none";
}, 5000);
}
// Demander si on annule la résa précédente pour en faire une nouvelle
} else if (sign.empty === 1) {
that.errorP.style.display = "block";
that.errorP.innerHTML = "vous avez déjà une réservation en cours, voulez-vous l'annuler et réserver ce vélo? <br>";
that.errorP.appendChild(that.buttonYes);
that.errorP.appendChild(that.buttonNo);
that.buttonYes.addEventListener("click", function(){
clearInterval(that.interval);
sessionStorage.clear();
that.reservationOk();
});
that.buttonNo.addEventListener("click", function(){
// Si le bouton non est cliqué, on ne fait rien
that.errorP.textContent = "";
that.errorP.style.display = "none";
});
} else {
that.errorP.style.display = "block";
that.errorP.textContent = "La signature est obligatoire pour valider";
setTimeout(function () {
that.errorP.textContent = "";
that.errorP.style.display = "none";
}, 1500);
}
}
});
}
}
let reservation = new Location();
reservation.showReservation();
reservation.showButton();
reservation.showName();
reservation.event(); |
Et voici le html associé :
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
| <section class ="sectionmap">
<div id="map-cont">
<div id="map"></div>
<aside id="station">
<div id="adresse">
<div id="infos-station">
<table class="table table-striped">
<thead>
<tr>
<th colspan="2" class="header-station">Station sélectionnée</th>
</tr>
</thead>
<tbody>
<tr>
<td class="station-titre">Statut</td>
<td id="station-statut"><span></span></td>
</tr>
<tr>
<td class="station-titre">Nom</td>
<td id="station-nom"></td>
</tr>
<tr>
<td class="station-titre">Adresse</td>
<td id="station-adresse"></td>
</tr>
<tr>
<td class="station-titre">Capacité d'accueil</td>
<td id="station-capacite"></td>
</tr>
<tr>
<td class="station-titre">Vélo(s) disponible(s)</td>
<td id="station-dispo"><span></span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="formulaire">
<form id="form-sign">
<div id="divnom">
<label for="name" required>Nom :</label>
<input type="text" id="nom" name="user_name">
</div>
<div id="divprenom">
<label for="name">Prénom :</label>
<input type="name" id="prenom" name="user_prenom">
</div>
<input type="button" id="reserver" value="Réserver">
<p id="legendeformulaire">Vos informations personnelles ne seront pas conservées dans notre base de données.</p>
</form>
<div id="canvascadre">
<p id="legcanvas">Signez dans le cadre prévu à cet effet </p>
<canvas id="canvas"></canvas>
<div id="boutonsducanvas">
<input type="button" id="effacer" value="Effacer">
<input type="button" id="validerresa" value="Valider la réservation">
</div>
</div>
</div>
</aside>
</div>
<div id="reservation">
<div id="base_resa">
<i class="fa fa-info-circle" aria-hidden="true"></i>
<h1>Informations sur la réservation</h1>
</div>
<div id="resa_infos">
<!-- <p id="noReservation">Vous n'avez pas de réservation en cours. Suivez les étapes pour réserver un Vélov' !</p> -->
<p id="reserved"></p>
<p id="error"></p>
</div>
</div>
</section> |
(Pis je CSS tant qu'à faire !) :
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 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168
| /*Aside*/
#station {
width: 38%;
justify-content: space-between;
margin-left: 10px;
}
#infos-station{
background-color: floralwhite;
}
.header-station {
text-align: center;
font-size: 20px;
}
table {
margin: auto;
background-color: white;
}
.table td, .table th {
padding: .75rem;
border-top : 1px solid #e9ecef;
}
.table tr:nth-child(odd){
background-color:#e9ecef;
}
.station-titre {
width: 37%;
font-size: 15px;
}
#station-statut, #station-nom, #station-adresse, #station-capacite, #station-dispo {
text-align: center;
}
/*Formulaire*/
#nom, #prenom {
width : 100px;
margin: 10px;
}
#nom {
margin-left: 25px;
}
form {
padding: 15px;
}
#formulaire{
text-align: center;
background-color: floralwhite;
}
#reserver{
display: none;
}
#reserver, #resa{
margin : auto;
margin-top : 15px;
width : 105px;
height: 25px;
border: 2px solid #d20025;
background-color: #d20025;
border-radius: 5px;
font-size : 15px;
font-weight: 700;
color: azure
}
#legendeformulaire {
margin-top: 20px;
font-size: 9px;
}
#canvascadre{
background-color: lightslategray;
margin: auto;
display: none;
padding: 10px;
height: 250px;
}
#legcanvas{
color: azure;
}
#boutonsducanvas{
display: flex;
justify-content: center;
}
#validerresa{
margin : auto;
margin-top : 15px;
width : 157px;
height: 30px;
border: 2px solid #d20025;
background-color: #d20025;
border-radius: 5px;
display: block;
font-size : 14px;
font-weight: 500;
text-align: center;
color: floralwhite;
margin-left: 5px;
}
#effacer{
margin : auto;
margin-top : 15px;
width : 80px;
height: 30px;
border: 2px solid #d20025;
background-color: #d20025;
border-radius: 5px;
display: block;
font-size : 14px;
font-weight: 500;
text-align: center;
color: floralwhite;
margin-right: 5px;
}
#canvas{
margin: auto;
width: 200;
height: 150px;
background-color: white;
border-radius: 25px;
border:1px solid #000;
}
/*Réservation*/
#reservation {
background-image: linear-gradient(to right, #d20025,#d20025, #ffffff);
margin-top: 10px;
height: 160px;
color: white;
}
#base_resa {
display: flex;
/*flex-wrap: wrap;*/
width: 90%;
align-items: center;
margin: auto;
}
#resa_infos {
text-align: center;
padding-left: 8px;
padding-right: 8px;
}
#reserved {
display: none;
}
#error {
display: none;
} |
Je link directement mon projet pour avoir un aperçu général et pour voir le reste du code en ligne :
http://velocdwj.eu3.biz/
Merci beaucoup :D