tykayn
/
funky-framadate-front
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

Usage du localStorage 

Une fonction  permet d'afficher le contenu

Tous les valeurs des champs  sont stocké en local
This commit is contained in:
Yannick Francois 2018-10-08 23:49:04 +02:00
parent 0f6abfa7b9
commit affb5500e7
3 changed files with 79 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
public/index.html
View File

@ -1,41 +1,40 @@
<!doctype html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head>
<meta charset="utf-8">
<meta name="referrer" content="same-origin">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<head> <title>Framadate</title>
<meta charset="utf-8">
<meta name="referrer" content="same-origin">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Framadate</title> <meta name="description" content=" ">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content=" "> <link crossorigin="anonymous" rel="stylesheet" href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap-reboot.css">
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css">
</head>
<link crossorigin="anonymous" rel="stylesheet" href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap-reboot.css"> <body>
<link rel="stylesheet" href="style.css">
</head>
<body> <section>
<h1>Créer un sondage</h1>
<section> <p>Framadate est un service en ligne permettant de planifier un rendez-vous ou prendre des décisions rapidement et
<h1>Créer un sondage</h1>
<p>Framadate est un service en ligne permettant de planifier un rendez-vous ou prendre des décisions rapidement et
simplement</p> simplement</p>
<a href="parametres.html" class="btn">C'est parti</a> <a href="parametres.html" class="btn" id="startButton">C'est parti</a>
</section> </section>
<section> <section>
<h1>Où sont mes sondages ?</h1> <h1>Où sont mes sondages ?</h1>
<form> <form>
<label for="email">Je cherche les sondages qui correspondent au mail</label> <label for="email">Je cherche les sondages qui correspondent au mail</label>
<input type="email" name="email" id="email"> <input type="email" name="email" id="email">
<input type="submit" value="Retrouver mes sondages"> <input type="submit" value="Retrouver mes sondages">
</form> </form>
</section> </section>
</body>
<script src="script.js"></script> <script src="script.js"></script>
</body>
</html> </html>

52
public/parametres.html
View File

@ -1,46 +1,44 @@
<!doctype html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="referrer" content="same-origin"> <meta name="referrer" content="same-origin">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Framadate</title> <title>Framadate</title>
<meta name="description" content=" "> <meta name="description" content=" ">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link crossorigin="anonymous" rel="stylesheet" href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap-reboot.css"> <link crossorigin="anonymous" rel="stylesheet" href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap-reboot.css">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<section> <section>
<p> <p>
Je m'appelle Je m'appelle <input name="nom">
<input name="nom" data-group="record" />
et le titre de ce sondage et le titre de ce sondage
<select id="type_sondage" data-group="record"> <select id="type_sondage">
<option>classique</option> <option>classique</option>
<option>special dates</option> <option>special dates</option>
</select> </select>
est est <input name="titre">.
<input name="titre" data-group="record"/>. </p>
</p> <p>
<p>
Si je devais le décrire pour les autres personnes, je dirais Si je devais le décrire pour les autres personnes, je dirais
<textarea></textarea> <textarea></textarea>
</p> </p>
</section> </section>
<nav> <nav>
<a href="reponses.html" class="btn" id="next">Continuer</a> <a href="reponses.html" class="btn" id="next">Continuer</a>
</nav> </nav>
</body>
<script src="script.js"></script> <script src="script.js"></script>
</body>
</html> </html>

43
public/script.js
View File

@ -1,21 +1,34 @@
window.onload = () => { const debugStorage = () => {
if(localStorage.getItem('type_sondage') == null) { for(var i = 0; i < localStorage.length; i++) {
localStorage.setItem('type_sondage', 'classique'); let key = localStorage.key(i)
console.debug(key, " = ", localStorage[key])
} }
}
console.debug(localStorage) document.querySelectorAll('input').forEach((inputElement) => {
inputElement.addEventListener("change", () => {
localStorage[inputElement.name] = inputElement.value
});
});
let typeSondageElement = document.querySelectorAll("*[data-group='record']") if(document.getElementById("type_sondage")) {
typeSondageElement.forEach((currentElement) => { type_sondage.addEventListener('change', function() {
currentElement.addEventListener('change', function() { let typeSondage = this.options[this.selectedIndex].text;
const selectedType = this.options[this.selectedIndex].text; if(typeSondage == "classique") {
localStorage.setItem('type_sondage', type_sondage); localStorage.setItem('type_sondage', this.options[this.selectedIndex].text);
if(selectedType == "classique") { document.querySelector('#next').href = "reponses.html";
document.querySelector('#next').href = "reponses.html"; } else {
} else { localStorage.setItem('type_sondage', 'dates');
document.querySelector('#next').href = "dates.html"; document.querySelector('#next').href = "dates.html";
} }
}) debugStorage()
})
}
if(document.getElementById("startButton")) {
startButton.addEventListener('click', function () {
localStorage.clear()
localStorage.setItem('type_sondage', 'classique');
}); });
} }