diff --git a/css/styles.css b/css/styles.css
index acc5b72f8a360c5f790850ce4f23c348bf23ffd7..a417af859d22b3c6671aabee8655f825d78da4c2 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -161,6 +161,37 @@ iframe {
margin: 3px 0px -3px -10px;
}
+.filter-button{
+ width: 46px;
+ height: 43px;
+ border-radius: 5px;
+ background-color: #53bdbd;
+ border: none;
+ position: absolute;
+ top: 12px;
+ left: 145px;
+ outline:none;
+ cursor: pointer;
+}
+
+.filter-button img{
+ width: 19px;
+ height: 19px;
+ position: absolute;
+ top: 3px;
+ left: 14px;
+}
+
+.filter-button span{
+ position: absolute;
+ color: white;
+ font-weight: bold;
+ text-align: center;
+ font-size: 13px;
+ top: 25px;
+ left: 4px;
+}
+
.fridgeOutline {
border-radius: 25px;
background-color: #F2F2F2;
@@ -175,6 +206,7 @@ iframe {
text-decoration: none;
color:black;
margin-top:1em;
+ position: relative;
}
.grey-label{
@@ -221,6 +253,14 @@ iframe {
top: 12px;
}
+.img-dispo{
+ position: absolute;
+ width: 40px;
+ height: 39px;
+ top: 29px;
+ left: 842px;
+}
+
.insc {
width: 418px;
display: block;
@@ -374,6 +414,18 @@ iframe {
margin-top:1em;
}
+.pastille {
+ height: 15px;
+ width: 15px;
+ background-color: red;
+ border-radius: 50%;
+ position: absolute;
+ left: 210px;
+ bottom: 35px;
+ color: white;
+ font-size: 12.5px;
+}
+
.search-button{
border-radius: 5px;
border-width: 0px;
@@ -535,6 +587,7 @@ iframe {
padding-top: 22px;
margin: auto;
width: 292px;
+ margin-top: 30px;
}
.top-content {
@@ -599,6 +652,10 @@ iframe {
font-size: 12px;
}
+#listeFrigo{
+ position: relative;
+}
+
#memberSectionTab{
background-color: white;
color: #008C8C;
diff --git a/html/chercherUnRepas.html b/html/chercherUnRepas.html
index b0ffefd46a69c09c4024f3d8e7ee31f9e1310f06..c84b77b88f8812f091e52baa9070378ca97bde88 100644
--- a/html/chercherUnRepas.html
+++ b/html/chercherUnRepas.html
@@ -75,7 +75,16 @@
else {
sessionStorage.setItem("panier", frigoIndex+"-"+repas);
}
+ parentPastille();
}
+ function parentPastille() {
+ if(sessionStorage.getItem("panier") != null){
+ console.log("slt")
+ var event = new CustomEvent('pastilleChanged')
+ window.parent.document.dispatchEvent(event)
+ }
+ console.log("allo")
+ }
</script>
</html>
\ No newline at end of file
diff --git a/html/listeFrigos.html b/html/listeFrigos.html
index 5ac8c461ed67f76e9f59604a54447a20a669c522..2f0ac687dd335ef238f72382ee8d096128cf37f4 100644
--- a/html/listeFrigos.html
+++ b/html/listeFrigos.html
@@ -6,25 +6,50 @@
<title>Liste des frigos</title>
</head>
<body id="listeFrigo" onload="retrieveFrigos()">
- <p class="titleSection">Mon profil</p>
+ <p class="titleSection">Liste des frigos</p>
+ <button class="filter-button">
+ <img src="../filtre.png"><br>
+ <span>Filtres</span>
+ </button>
</body>
<script src="../scripts/readJson.js"></script>
<script>
+ var i = 0;
+ function buildFrigo(frigo){
+ var index = i++;
+ var item = document.createElement("a");
+ var nom = document.createElement("span");
+ var breakElement = document.createElement("br");
+ var imgDispo = document.createElement("img");
+
+ item.className = "fridgeOutline";
+ item.onclick = (() => {saveFrigoIndex(index)});
+ item.href = "chercherUnRepas.html";
+ nom.className = "bold";
+ imgDispo.className = "img-dispo";
+ imgDispo.src = frigo.dispo ? "../dispo.png" : "../nondispo.png";
+
+ nom.appendChild(document.createTextNode(frigo.nom));
+ item.appendChild(nom);
+ item.appendChild(breakElement);
+ item.appendChild(document.createTextNode(frigo.addresse));
+ item.appendChild(breakElement.cloneNode(false));
+ item.appendChild(document.createTextNode("Situé à " + frigo.distance + " mètres\n"));
+ item.appendChild(imgDispo);
+
+ return item;
+ }
+
function retrieveFrigos(){
var obj = httpGetJson();
- var builtUpHTML = "";
- for(let i = 0; i<obj.array.length; i++) {
- builtUpHTML += '<a class="fridgeOutline" onclick="saveFrigoIndex(event,'+i+')" href="chercherUnRepas.html" >' +
- ' <span class="bold">' +
- obj.array[i].nom +
- ' </span><br>' +
- obj.array[i].addresse +
- ' <br>Situé à '+obj.array[i].distance+' mètres\n' +
- ' </a>'
- }
- document.getElementById("listeFrigo").innerHTML+= builtUpHTML;
+
+ var liste = document.getElementById("listeFrigo");
+
+ obj.array.forEach(x => {
+ liste.appendChild(buildFrigo(x));
+ })
}
- function saveFrigoIndex(event, index){
+ function saveFrigoIndex(index){
sessionStorage.setItem('frigoIndex', index);
}
</script>
diff --git a/html/membres.html b/html/membres.html
index 2ff52a1033264a73fae9dad0e0f3136ab33b4c35..8836112aee702c8d35a0c2cee14d17cc5f028e1b 100644
--- a/html/membres.html
+++ b/html/membres.html
@@ -32,6 +32,7 @@
<span class="bold-btn">Mon profil</span>
</button>
<button class="tablinks" onclick="openTab(event, 'panier')">
+ <div id="pastilleRouge" class="pastille hidden">0</div>
<img src="../panier.png" class="icone-panier">
<span class="bold-btn">Mon panier</span>
</button>
@@ -47,10 +48,18 @@
</html>
<script src="../scripts/tabsAndErrors.js"></script>
<script>
- /*var test = document.getElementById('test');
-
-
- for (var i = 1; i < 15 ; i++) {
- test.innerHTML += "<div id=\"button_"+i+"\">" + i + "</div>";
- };*/
+ managePastille();
+ window.document.addEventListener('pastilleChanged', handleEvent, false)
+ function handleEvent(e) {
+ managePastille();
+ }
+ function managePastille() {
+ if(sessionStorage.getItem("panier") != null){
+ var count = 0;
+ var items = sessionStorage.getItem("panier").split(" ");
+ for (count; count < items.length; count++){}
+ document.getElementById("pastilleRouge").classList.remove("hidden");
+ document.getElementById("pastilleRouge").innerHTML = count;
+ }
+ }
</script>
\ No newline at end of file
diff --git a/html/panier.html b/html/panier.html
index bae0f061c4c3ac6d02cf10b2ae1e7aeba6585b4a..d1e22b4b4fcd881b3d289f2255c8430d4f36a598 100644
--- a/html/panier.html
+++ b/html/panier.html
@@ -5,16 +5,14 @@
<meta charset="UTF-8">
<title>Mon Panier</title>
</head>
-<body id="listePanier" onload="retrievePanier()">
-<br>
-<p class="titleSection">Mon panier</p>
-</body>
+<body id="listePanier" onload="retrievePanier()"></body>
<script src="../scripts/readJson.js"></script>
<script>
function retrievePanier(){
var panierElems = sessionStorage.getItem('panier');
- var builtUpHTML="";
+ var builtUpHTML="<br>" +
+ "<p class=\"titleSection\">Mon panier</p><div class='listeRepas'>";
if(panierElems != null){
var obj = httpGetJson();
var items = panierElems.split(" ");
@@ -28,7 +26,7 @@
}
}
- document.getElementById('listePanier').innerHTML = builtUpHTML;
+ document.getElementById('listePanier').innerHTML = builtUpHTML + '</div>';
sessionStorage.removeItem('frigoIndex');
}
}