Enregistrement en session storage + affichage des données

Frank_N Messages postés 43 Statut Membre -  
Frank_N Messages postés 43 Statut Membre -
Bonjour à tous !
Je bute depuis un bon moment sur un projet et ne trouvant pas de solutions je viens demander votre aide.
Pour commencer voici un petit template que j'ai preparé pour que vous puissiez comprendre les tâches à éffectuer :


Ensuite voici mon code
HTML: 
<html lang="fr">

<head>
    <meta charset="utf-8">
    <title>Location de vélo à Marseille</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
    integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
    crossorigin=""/>
    <link rel="stylesheet" href="styles/index.scss" />
</head>

<body>
    <!-- HEADER -->
    
    <!-- MAP + INFOS + RESERVATION -->
    <section id="google">
        <!-- GOOGLE MAP -->
        <div id="map"></div>

        <!-- CADRE INFOS + RESERVATION VELO-->
        <aside id="velo">
            <!-- Infos de la station -->
            <div class="infos-station">
                <h2>Détails de la station</h2>
                <hr />
                <p class="nom-station">Sélectionnez une station</p>
                <hr />
                <p class="adresse-station"></p>
                <hr />
                <p class="place-libre"></p>
                <p class="velo-dispo"></p>
                <button type="button" class="reserver">Réserver</button>
            </div>

                <!-- Reservation à la signature -->
            <div class="reservation" id="reservation">
                <h3>Informations personnelles</h3>
                <hr />
                <form>
                    <p>
                        <label for="nom">Nom :</label><br />
                        <input type="text" name="nom" id="nom" required>
                    </p>
                    <p>
                        <label for="prenom">Prénom :</label><br />
                        <input type="text" name="prenom" id="prenom" required><br />
                        <input type="submit" value="réserver" class="submit">
                    </p>
                    <div class="canvas">
                        <label for="signature">Signature</label><br />
                        <canvas id="canvas" width="250" height="125"></canvas><br />
                        <button type="button" class="effacer">Effacer</button>
                        <button type="button" class ="valider" disabled>Valider</button>
                    </div>
                </form>
            </div>
        </aside>
    </section>
    <!-- FIN MAP + INFOS + RESERVATION -->
    <hr class="separator" />

    <!-- RESERVATION EN COURS-->
    <footer id="enCours">
        <h3>Réservations :</h3>
        <span class="footer-text">Aucune réservation en cours</span>
        <p class="timer">
            <span class="minutes"></span>
            <span class="secondes"></span>
        </p>
        <button type="button" class="annuler">Annuler</button>
    </footer>
    <!-- FIN RESERVATION EN COURS-->

    
   <!-- SCRIPT -->
  <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCqnxFvFgM65KUz95VJooEIHHLT071f5z8&callback=initMap" type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
</body>

</html>


Code JS: 
// Exécute un appel AJAX GET
// Prend en paramètres l'URL cible et la fonction callback appelée en cas de succès
function ajaxGet(url, callback) {
  var req = new XMLHttpRequest();
  req.open("GET", url);
  req.addEventListener("load", function() {
    if (req.status >= 200 && req.status < 400) {
      // Appelle la fonction callback en lui passant la réponse de la requête
      callback(req.responseText);
    } else {
      console.error(req.status + " " + req.statusText + " " + url);
    }
  });
  req.addEventListener("error", function() {
    console.error("Erreur réseau avec l'URL " + url);
  });
  req.send(null);
}

function afficher(reponse) {
  console.log(reponse);
}

// Exécute un appel AJAX POST
// Prend en paramètres l'URL cible, la donnée à envoyer et la fonction callback appelée en cas de succès
// Le paramètre isJson permet d'indiquer si l'envoi concerne des données JSON
function ajaxPost(url, data, callback, isJson) {
  var req = new XMLHttpRequest();
  req.open("POST", url);
  req.addEventListener("load", function() {
    if (req.status >= 200 && req.status < 400) {
      // Appelle la fonction callback en lui passant la réponse de la requête
      callback(req.responseText);
    } else {
      console.error(req.status + " " + req.statusText + " " + url);
    }
  });
  req.addEventListener("error", function() {
    console.error("Erreur réseau avec l'URL " + url);
  });
  if (isJson) {
    // Définit le contenu de la requête comme étant du JSON
    req.setRequestHeader("Content-Type", "application/json");
    // Transforme la donnée du format JSON vers le format texte avant l'envoi
    data = JSON.stringify(data);
  }
  req.send(data);
}
//---------------------------------------------------------------------------------------//
//*****CANVAS*****//
//----------------//
var canvas= document.getElementById("canvas");
var ctx= canvas.getContext("2d");

var Signature = {
  draw: false,

  // INITIALISE CANVAS
  initCanvas: function () {
    // Taille et couleur du trait de la signature
    ctx.strokeStyle = "blue";
    ctx.lineWidth = 2;

    Signature.sourisEvent();
    Signature.touchEvent();
    Signature.dessiner();
    Signature.effacer();
  },



  // METHODE: EVENEMENT SOURIS
  // -------------------------
  sourisEvent: function () {

    // EVENT: Bouton de la souris enfoncé
    $("#canvas").on("mousedown", function (e) {
      Signature.draw = true;
      ctx.beginPath();
      ctx.moveTo(e.offsetX, e.offsetY);

    });

    // EVENT: Déplacement de la souris
    $("#canvas").on("mousemove", function (e) {
      // Si le bouton est enfoncé, dessine
      if (Signature.draw === true) {
        Signature.dessiner(e.offsetX, e.offsetY);
        // Active le bouton "valider" et change la couleur
        $(".valider").prop("disabled", false);
        $(".valider").css("background-color", "green");
      }
    });

    // EVENT: Bouton de la souris relâché
    $("#canvas").on("mouseup", function (e) {
      Signature.draw = false;
    });
  },



  // METHODE: GERE LES EVENEMENTS TACTILE SUR MOBILE
  // -----------------------------------------------
  touchEvent: function () {
    // EVENT: touché
    $("#canvas").on("touchstart", function (e) {
      var touchX = e.touches[0].pageX - e.touches[0].target.offsetLeft;
      var touchY = e.touches[0].pageY - e.touches[0].target.offsetTop;

      Signature.draw = true;
      ctx.beginPath();
      ctx.moveTo(touchX, touchY);
      // Empêche le scrolling de l'écran
      e.preventDefault();
    });

    // EVENT: Déplacement du touché
    $("#canvas").on("touchmove", function (e) {
      var touchX = e.touches[0].pageX - e.touches[0].target.offsetLeft;
      var touchY = e.touches[0].pageY - e.touches[0].target.offsetTop;

      if (Signature.draw === true) {
        Signature.dessiner(touchX, touchY);
        // Active le bouton "valider" et change la couleur
        $(".valider").prop("disabled", false);
        $(".valider").css("background-color", "red");
      }
      // Empêche le scrolling de l'écran
      e.preventDefault();
    });

    // EVENT: fin du touché
    $("#canvas").on("touchend", function (e) {
      Signature.draw = false;
    });
  },



  // METHODE: DESSINER
  // -----------------
  dessiner: function (x,y) {
    ctx.lineTo(x,y);
    ctx.stroke();
  },



  // METHODE: EFFACER LA SIGNATURE
  // -----------------------------
  effacer: function () {
    $(".effacer").on("click", function(){
        // Efface la signature
        ctx.clearRect(0,0,250,125);
        // Désactive le bouton "valider" et change la couleur
        $(".valider").prop("disabled", true);
        $(".valider").css("background-color", "grey");
    })
}
};

Signature.initCanvas();

//************************************************//
//-------------------------------------------------------------//


let mapVelo ={
    velo: 0,
    place: 0,

    initMap: function(lat, lng, api){
        $(document).ready(function () {
        $(".reservation").hide();
        $(".reserver").hide();});
        let map = null;
        let iconBase = 'img/';
        // Créer l'objet "map" et l'insèrer dans l'élément HTML qui a l'ID "map"
        map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(lat, lng), 
            // Nous définissons le zoom par défaut
            zoom: 13, 
            // Nous définissons le type de carte (ici carte routière)
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        });

        //Recupération des données de l'api JCdeceaux
        ajaxGet(api, function (reponse){
            let stations = JSON.parse(reponse);
            //Tableau des marqueurs
            let markers = [];
            //Création d'une boucle pour récupérer les différentes stations
            for (let i = 0; i < stations.length; i++){
                //Définition des variables pour les informations de la station
                let nomStation = stations[i].name;
                let adresseStation = stations[i].address;
                let placeDispo = stations[i].available_bike_stands;
                let veloDispo = stations[i].available_bikes;
                let position = stations[i].position;

                //Création des marqueurs
                let marker = new google.maps.Marker({
                    position: position,
                    map: map,
                    title: nomStation,
                    //icon: iconBase + "gmarker.png"
                })
                if (stations[i].status === "CLOSE"){
                    marker.icon = iconBase + "rmarker.png"
                }

                //Evnmt click sur marqueurs qui affiche les infos de la station cliquée
                marker.addListener("click", function(){
                    mapVelo.afficherInfos(nomStation, adresseStation, placeDispo, veloDispo)
                })

                //Ajout des marqueurs au tableau des marqueurs
                markers.push(marker);


                $(".reserver").on("click", function(){
                    $(".reservation").show();
                    $(".canvas").hide();
                })
                $(".submit").on("click", function(e){
                    e.preventDefault();
                    let firstName = $("#prenom").value;
                    let name = $("#nom").value;
                    $(".canvas").show();
                })
                $(".valider").on("click", function(){
                    mapVelo.validerResa(nomStation);
                })
            }
            var markerCluster = new MarkerClusterer(map, markers, {imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"});
        });
    },

    //Méthode pour afficher les infos
    //******************************//
    afficherInfos: function(station, adresse, place, velo){
    $(".nom-station").text(station);
    $(".adresse-station").text(adresse);
    $(".place-libre").text("il y a " + place + " places libres");
    $(".velo-dispo").text("il y a " + velo + " vélos de disponibles");
    $(".reservation").hide();
    
    if (velo > 0){
        $(".reserver").show();
    } else {
        $(".reserver").hide();
      }
    },

    //Méthode de réservation
    //**********************//
    validerResa: function(station) {
    // Efface la station en mémoire
    sessionStorage.clear();
    // Enregistre le nom de la station de la réservation
    sessionStorage.setItem("station", station);
    
    //Cache le bouton et le panneau de réservation.
    $(".reserver").fadeOut("slow");
    $(".reservation").fadeOut("slow");

    // Affiche la réservation et le timer
    $(".footer-text").text("Vélo réservé à la station " + sessionStorage.station + " par ");
    }
}

mapVelo.initMap(43.276793, 5.378024, "https://api.jcdecaux.com/vls/v1/stations?contract=Marseille&apiKey=b99f44179c5f85e238b9e0ce1c1fe18c862433ec");


Ce que j'aimerais c'est réussir à enregistrer les inputs de mon formulaire ainsi que la station qui a été cliquée, et les afficher dans le footer, mais pour le moment je n'arrive qu'a afficher une station qui n'est pas la bonne et toujours la même..
Si vous pouviez m'inquider les démarches et les éxplications pour me sortir de là s'il vous plait ? :)
A voir également:

1 réponse

Réponse 1 / 1
Frank_N Messages postés 43 Statut Membre
 
J'ai réussi à afficher les bonnes stations, mais impossible de récupérer les values de mon formulaire avec le sessionStorage.. (lignes 222 et 260) : 

// Exécute un appel AJAX GET
// Prend en paramètres l'URL cible et la fonction callback appelée en cas de succès
function ajaxGet(url, callback) {
  var req = new XMLHttpRequest();
  req.open("GET", url);
  req.addEventListener("load", function() {
    if (req.status >= 200 && req.status < 400) {
      // Appelle la fonction callback en lui passant la réponse de la requête
      callback(req.responseText);
    } else {
      console.error(req.status + " " + req.statusText + " " + url);
    }
  });
  req.addEventListener("error", function() {
    console.error("Erreur réseau avec l'URL " + url);
  });
  req.send(null);
}

function afficher(reponse) {
  console.log(reponse);
}

// Exécute un appel AJAX POST
// Prend en paramètres l'URL cible, la donnée à envoyer et la fonction callback appelée en cas de succès
// Le paramètre isJson permet d'indiquer si l'envoi concerne des données JSON
function ajaxPost(url, data, callback, isJson) {
  var req = new XMLHttpRequest();
  req.open("POST", url);
  req.addEventListener("load", function() {
    if (req.status >= 200 && req.status < 400) {
      // Appelle la fonction callback en lui passant la réponse de la requête
      callback(req.responseText);
    } else {
      console.error(req.status + " " + req.statusText + " " + url);
    }
  });
  req.addEventListener("error", function() {
    console.error("Erreur réseau avec l'URL " + url);
  });
  if (isJson) {
    // Définit le contenu de la requête comme étant du JSON
    req.setRequestHeader("Content-Type", "application/json");
    // Transforme la donnée du format JSON vers le format texte avant l'envoi
    data = JSON.stringify(data);
  }
  req.send(data);
}
//---------------------------------------------------------------------------------------//
//*****CANVAS*****//
//----------------//
var canvas= document.getElementById("canvas");
var ctx= canvas.getContext("2d");

var Signature = {
  draw: false,

  // INITIALISE CANVAS
  initCanvas: function () {
    // Taille et couleur du trait de la signature
    ctx.strokeStyle = "blue";
    ctx.lineWidth = 2;

    Signature.sourisEvent();
    Signature.touchEvent();
    Signature.dessiner();
    Signature.effacer();
  },



  // METHODE: EVENEMENT SOURIS
  // -------------------------
  sourisEvent: function () {

    // EVENT: Bouton de la souris enfoncé
    $("#canvas").on("mousedown", function (e) {
      Signature.draw = true;
      ctx.beginPath();
      ctx.moveTo(e.offsetX, e.offsetY);

    });

    // EVENT: Déplacement de la souris
    $("#canvas").on("mousemove", function (e) {
      // Si le bouton est enfoncé, dessine
      if (Signature.draw === true) {
        Signature.dessiner(e.offsetX, e.offsetY);
        // Active le bouton "valider" et change la couleur
        $(".valider").prop("disabled", false);
        $(".valider").css("background-color", "green");
      }
    });

    // EVENT: Bouton de la souris relâché
    $("#canvas").on("mouseup", function (e) {
      Signature.draw = false;
    });
  },



  // METHODE: GERE LES EVENEMENTS TACTILE SUR MOBILE
  // -----------------------------------------------
  touchEvent: function () {
    // EVENT: touché
    $("#canvas").on("touchstart", function (e) {
      var touchX = e.touches[0].pageX - e.touches[0].target.offsetLeft;
      var touchY = e.touches[0].pageY - e.touches[0].target.offsetTop;

      Signature.draw = true;
      ctx.beginPath();
      ctx.moveTo(touchX, touchY);
      // Empêche le scrolling de l'écran
      e.preventDefault();
    });

    // EVENT: Déplacement du touché
    $("#canvas").on("touchmove", function (e) {
      var touchX = e.touches[0].pageX - e.touches[0].target.offsetLeft;
      var touchY = e.touches[0].pageY - e.touches[0].target.offsetTop;

      if (Signature.draw === true) {
        Signature.dessiner(touchX, touchY);
        // Active le bouton "valider" et change la couleur
        $(".valider").prop("disabled", false);
        $(".valider").css("background-color", "red");
      }
      // Empêche le scrolling de l'écran
      e.preventDefault();
    });

    // EVENT: fin du touché
    $("#canvas").on("touchend", function (e) {
      Signature.draw = false;
    });
  },



  // METHODE: DESSINER
  // -----------------
  dessiner: function (x,y) {
    ctx.lineTo(x,y);
    ctx.stroke();
  },



  // METHODE: EFFACER LA SIGNATURE
  // -----------------------------
  effacer: function () {
    $(".effacer").on("click", function(){
        // Efface la signature
        ctx.clearRect(0,0,250,125);
        // Désactive le bouton "valider" et change la couleur
        $(".valider").prop("disabled", true);
        $(".valider").css("background-color", "grey");
    })
}
};

Signature.initCanvas();

//************************************************//
//-------------------------------------------------------------//

var mapVelo ={
    velo: 0,
    place: 0,

    initMap: function(lat, lng, api){
        $(document).ready(function () {
        $(".reservation").hide();
        $(".reserver").hide();});
        var map = null;
        var iconBase = 'img/';
        // Créer l'objet "map" et l'insèrer dans l'élément HTML qui a l'ID "map"
        map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(lat, lng), 
            // Nous définissons le zoom par défaut
            zoom: 13, 
            // Nous définissons le type de carte (ici carte routière)
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        });

        //Recupération des données de l'api JCdeceaux
        ajaxGet(api, function (reponse){
            var stations = JSON.parse(reponse);
            //Tableau des marqueurs
            var markers = [];
            //Création d'une boucle pour récupérer les différentes stations
            stations.forEach(function (station){
                var nomStation = station.name;
                var adresseStation = station.address;
                var placeDispo = station.available_bike_stands;
                var veloDispo = station.available_bikes;
                var position = station.position;

                //Création des marqueurs
                var marker = new google.maps.Marker({
                    position: position,
                    map: map,
                    title: nomStation,
                    icon: iconBase + "gmarker.png"
                })
                if (station.status === "CLOSE"){
                    marker.icon = iconBase + "rmarker.png"
                }

                //Evnmt click sur marqueurs qui affiche les infos de la station cliquée
                marker.addListener("click", function(){
                    mapVelo.afficherInfos(nomStation, adresseStation, placeDispo, veloDispo)
                    $(".reserver").on("click", function(){
                        $(".reservation").show();
                        $(".canvas").hide();
                    })
                    $(".submit").on("click", function(e){
                        e.preventDefault();
                    
                        $(".canvas").show();
                        $(".valider").on("click", function(){
                            mapVelo.validerResa(nomStation);
                            mapVelo.effacer();
                        })
                    })
                })

                //Ajout des marqueurs au tableau des marqueurs
                markers.push(marker);
            })
            // for (let i = 0; i < stations.length; i++){
            //     //Définition des variables pour les informations de la station
                
            // }
            let markerCluster = new MarkerClusterer(map, markers, {imagePath: "img/m"});
        });
    },

    

    //Méthode pour afficher les infos
    //******************************//
    afficherInfos: function(station, adresse, place, velo){
    $(".nom-station").text(station);
    $(".adresse-station").text(adresse);
    $(".place-libre").text("il y a " + place + " places libres");
    $(".velo-dispo").text("il y a " + velo + " vélos de disponibles");
    $(".reservation").hide();
    
    if (velo > 0){
        $(".reserver").show();
    } else {
        $(".reserver").hide();
      }
    },

    //Méthode de réservation
    //**********************//
    validerResa: function(station) {
    // Efface la station en mémoire
    sessionStorage.clear();
    // Enregistre le nom de la station de la réservation
    var firstName = $("#prenom").value;
    var name = $("#nom").value;
    sessionStorage.setItem("station", station);
    sessionStorage.setItem("prenom", firstName);
    sessionStorage.setItem("nom", name);
    
    //Cache le bouton et le panneau de réservation.
    $(".reserver").fadeOut("slow");
    $(".reservation").fadeOut("slow");

    // Affiche la réservation et le timer
    $(".footer-text").text("Vélo réservé à la station " + sessionStorage.station + " par " + sessionStorage.prenom + " " + sessionStorage.nom);
    },

    // METHODE: EFFACER LA SIGNATURE
    //**********************//
    effacer: function () {
    $(".valider").on("click", function(){
        // Efface la signature
        ctx.clearRect(0,0,250,125);
        // Désactive le bouton "valider" et change la couleur
        $(".valider").prop("disabled", true);
        $(".valider").css("background-color", "grey");
        })
    }
}

mapVelo.initMap(43.276793, 5.378024, "https://api.jcdecaux.com/vls/v1/stations?contract=Marseille&apiKey=b99f44179c5f85e238b9e0ce1c1fe18c862433ec");
0

Discussions similaires

Comment supprimer Removable Storage Devices du bureau ?
francoisepetitdemange -
brucine -

3 réponses
Comment supprimer un contact
Lilou -
Lilou -

2 réponses