diff --git a/css/styles.css b/css/styles.css
index d53f8915751ff1b814dd5700d804db7bb2bec92e..ccd49adaed36b3307d052687b427057508e33d97 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -23,8 +23,8 @@ iframe {
background-color: #53bdbd;
color: #005555;
position: relative;
- left: 300px;
- bottom: 27px;
+ left: 828px;
+ bottom: 45px;
font-size: 30px;
font-weight: bold;
border: none;
@@ -157,6 +157,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;
@@ -171,6 +202,7 @@ iframe {
text-decoration: none;
color:black;
margin-top:1em;
+ position: relative;
}
.grey-label{
@@ -217,6 +249,15 @@ iframe {
top: 12px;
}
+.img-dispo{
+ position: absolute;
+ width: 40px;
+ height: 39px;
+ top: 29px;
+ left: 842px;
+}
+
+
.insc {
width: 418px;
@@ -270,16 +311,18 @@ iframe {
outline: none;
}
-.listeRepas {
- height: 500px;
+.listeRepas{
+ height: 495px;
overflow-y: scroll;
}
.mealOutline {
border-radius: 25px;
background-color: #F2F2F2;
- padding: 10px;
- width: 960px;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ padding-left: 50px;
+ width: 930px;
height: 55px;
margin-left: 119px;
margin-top:1em;
@@ -354,6 +397,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;
@@ -510,6 +565,7 @@ iframe {
padding-top: 22px;
margin: auto;
width: 292px;
+ margin-top: 30px;
}
.top-content {
@@ -574,6 +630,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 5882f41c13df9717becc5b74de3764a75ccb09cc..8961a268c0f824827a44d34becf5665544719998 100644
--- a/html/chercherUnRepas.html
+++ b/html/chercherUnRepas.html
@@ -44,7 +44,7 @@
'<span class="bold">' + obj.array[index].repas[i].nom + '</span><br>' +
obj.array[index].repas[i].type + '<br>' +
'Quantité : ' + obj.array[index].repas[i].qt + ' disponibles<br>' +
- '<button class = "addButton" onclick="addToPanier(event,'+i+')"> + </button>' +
+ '<button class = "addButton" onclick="addToPanier(event,'+i+', '+index+')"> + </button>' +
'</div>';
}
builtUpHTML += '</div>';
@@ -53,5 +53,24 @@
}
}
+ function addToPanier(event, repas, frigoIndex) {
+ if(sessionStorage.getItem("panier") != null){
+ var prev = sessionStorage.getItem("panier");
+ sessionStorage.setItem("panier", prev+" "+frigoIndex+"-"+repas);
+ }
+ 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 3603b4e4494599148161193fe5992e2f152a90fb..2f0ac687dd335ef238f72382ee8d096128cf37f4 100644
--- a/html/listeFrigos.html
+++ b/html/listeFrigos.html
@@ -6,7 +6,11 @@
<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>
@@ -16,11 +20,14 @@
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);
@@ -28,6 +35,7 @@
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;
}
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 c98623b7d726d3a0979dd59082de0d15aa9222e2..d1e22b4b4fcd881b3d289f2255c8430d4f36a598 100644
--- a/html/panier.html
+++ b/html/panier.html
@@ -5,28 +5,28 @@
<meta charset="UTF-8">
<title>Mon Panier</title>
</head>
-<body>
-<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');
- console.log(index)
+ var builtUpHTML="<br>" +
+ "<p class=\"titleSection\">Mon panier</p><div class='listeRepas'>";
if(panierElems != null){
var obj = httpGetJson();
var items = panierElems.split(" ");
for (let i = 0; i < items.length; i++){
- var repasCombFrigo = items[i].split("-");
- builtUpHTML += '<div class="panierOutline">' +
- '<span class="bold">' + obj.array[repasCombFrigo[0]].repas[repasCombFrigo[1]].nom + '</span><br>' +
- 'Provenance: '+obj.array[repasCombFrigo[0]] + '<br>' +
- '</div>';
+ if(items[i].length!=0){
+ var repasCombFrigo = items[i].split("-");
+ builtUpHTML += '<div class="panierOutline">' +
+ '<span class="bold">' + obj.array[repasCombFrigo[0]].repas[repasCombFrigo[1]].nom + '</span><br>' +
+ 'Provenance: '+obj.array[repasCombFrigo[0]].nom + '<br>' +
+ '</div>';
+ }
+
}
- builtUpHTML += '</div>';
- document.getElementById('listeRepas').innerHTML = builtUpHTML;
+ document.getElementById('listePanier').innerHTML = builtUpHTML + '</div>';
sessionStorage.removeItem('frigoIndex');
}
}