Enregistrement en session storage + affichage des données
Fermé
Frank_N
Messages postés
42
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
8 août 2019
-
Modifié le 13 févr. 2019 à 18:15
Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019 - 14 févr. 2019 à 13:19
Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019 - 14 févr. 2019 à 13:19
A voir également:
- Enregistrement en session storage + affichage des données
- Usb disk storage format tool - Télécharger - Stockage
- Validation des données excel - Guide
- Enregistrer en pdf - Guide
- Enregistrement vidéo écran - Guide
- Effacer les données de navigation - Guide
1 réponse
Frank_N
Messages postés
42
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
8 août 2019
14 févr. 2019 à 13:19
14 févr. 2019 à 13:19
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");
