diff --git a/css/styles.css b/css/styles.css
index ccd49adaed36b3307d052687b427057508e33d97..71b20de7e03a8657d30f6baad5f9cf8207618d49 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -11,26 +11,30 @@ iframe {
border: none;
}
-.bold {
- font-weight: bold;
-}
-
-
-
.addButton {
height: 40px;
width: 40px;
background-color: #53bdbd;
color: #005555;
- position: relative;
+ position: absolute;
left: 828px;
- bottom: 45px;
+ bottom: 108px;
font-size: 30px;
font-weight: bold;
border: none;
border-radius: 5px;
}
+.addButton:focus {
+ outline: none;
+ animation: gotAdded;
+ animation-duration: 1s;
+}
+
+.bold {
+ font-weight: bold;
+}
+
.bold-btn {
position: absolute;
color: white;
@@ -233,6 +237,7 @@ iframe {
left: 10px;
top: 8px;
}
+
.icone-profil{
position: absolute;
width:26px;
@@ -257,8 +262,6 @@ iframe {
left: 842px;
}
-
-
.insc {
width: 418px;
display: block;
@@ -312,11 +315,27 @@ iframe {
}
.listeRepas{
- height: 495px;
+ height: 390px;
overflow-y: scroll;
}
+.mealInfo {
+ position: relative;
+ text-align: center;
+ padding: 2px;
+ width: 380px;
+ height: 16px;
+ left: 300px;
+ bottom: 57px;
+ margin: 4px;
+ border: 3px;
+ border-color: #005555;
+ border-style: solid;
+ border-radius: 10px;
+}
+
.mealOutline {
+ position: relative;
border-radius: 25px;
background-color: #F2F2F2;
padding-top: 10px;
@@ -538,11 +557,17 @@ iframe {
}
.tealBackground{
+ position: absolute;
width: 1200px;
- height: 624px;
+ height: 553px;
background-color: #008C8C;
}
+.thicc {
+ font-size: 30px;
+ font-weight: bolder;
+}
+
.titleBar{
height: 28px;
padding: 12px;
@@ -655,6 +680,21 @@ iframe {
to {opacity: 1;}
}
+@keyframes gotAdded {
+ 0% {
+ left: 828px;
+ bottom: 108px;
+ }
+ 50% {
+ height: 55px;
+ width: 55px;
+ left: 821px;
+ bottom : 101px;
+ }
+ 100% {
+ }
+}
+
@media only screen and (min-width:1200px) {
.app{
margin: auto;
diff --git a/html/chercherUnRepas.html b/html/chercherUnRepas.html
index 6855074eee08e517258818e9bb47c4b7e476f69e..6f750325ce9a197dd25d089668592113b5ae7194 100644
--- a/html/chercherUnRepas.html
+++ b/html/chercherUnRepas.html
@@ -63,21 +63,41 @@
var item = document.createElement("div");
var nom = document.createElement("span");
var add = document.createElement("button");
+ var bb = document.createElement("div");
+ var allergene = document.createElement("div")
var breakElement = document.createElement("br");
+ console.log(indexFrigo);
item.className= "mealOutline";
nom.className = "bold";
add.className = "addButton";
add.onclick = (()=>{addToPanier(event,indexRepas, indexFrigo)});
+ bb.className = "mealInfo";
+ allergene.className = "mealInfo";
nom.appendChild(document.createTextNode(repas.nom));
add.appendChild(document.createTextNode("+"));
+ bb.appendChild(document.createTextNode("BB : " + repas.bb));
item.appendChild(nom);
item.appendChild(breakElement);
item.appendChild(document.createTextNode(repas.type));
item.appendChild(breakElement.cloneNode(false));
item.appendChild(document.createTextNode("Quantité : " + repas.qt + " disponibles"));
item.appendChild(breakElement.cloneNode(false));
+ item.appendChild(bb);
+
+ var listeAllergene = "";
+ if(repas.allergenes.length == 0) {
+ listeAllergene = "Sans allergènes";
+ } else {
+ listeAllergene += repas.allergenes[0];
+ for (let a = 1; a < repas.allergenes.length; a++) {
+ listeAllergene += ', ' + repas.allergenes[a];
+ }
+ }
+ allergene.appendChild(document.createTextNode(listeAllergene));
+ item.appendChild(allergene);
+
item.appendChild(add);
return item;
@@ -98,14 +118,16 @@
container.className = "listeRepas";
obj.array[index].repas.forEach(repas => {
- container.appendChild(buildRepas(repas));
+ container.appendChild(buildRepas(repas,index));
})
-
sessionStorage.removeItem('frigoIndex');
}
}
function addToPanier(event, repas, frigoIndex) {
+ event.target.innerHTML = "<span class = 'thicc'>✓</span>";
+ setTimeout(() => {event.target.innerHTML = "+"},750);
+ setTimeout(() => {document.activeElement.blur()},769);
if(sessionStorage.getItem("panier") != null){
var prev = sessionStorage.getItem("panier");
sessionStorage.setItem("panier", prev+" "+frigoIndex+"-"+repas);
diff --git a/html/membres.html b/html/membres.html
index 8836112aee702c8d35a0c2cee14d17cc5f028e1b..5de4b470979c505f6215f79d020d88a96c35a185 100644
--- a/html/membres.html
+++ b/html/membres.html
@@ -41,7 +41,7 @@
<div id="listeFrigos" class="tabcontent-members active tealBackground">
- <iframe id="mbrcontent" src="listeFrigos.html" width="100%" height="800"></iframe>
+ <iframe id="mbrcontent" src="listeFrigos.html" width="100%" height="554"></iframe>
</div>
</div>
</body>
diff --git a/html/panier.html b/html/panier.html
index d1e22b4b4fcd881b3d289f2255c8430d4f36a598..43908436d41535511aae34c7288593c7118dc5a4 100644
--- a/html/panier.html
+++ b/html/panier.html
@@ -9,24 +9,44 @@
<script src="../scripts/readJson.js"></script>
<script>
+ function buildReserve(indexes, frigo){
+ var indexRepas = indexes.split('-')[1];
+ var item = document.createElement("div");
+ var nom = document.createElement("span");
+ var breakElement = document.createElement("br");
+
+ item.className = "panierOutline";
+ nom.className = "bold";
+
+ nom.appendChild(document.createTextNode(frigo.repas[indexRepas].nom));
+ item.appendChild(nom);
+ item.appendChild(breakElement);
+ item.appendChild(document.createTextNode("Provenance: " + frigo.nom));
+ item.appendChild(breakElement.cloneNode(false));
+
+ return item;
+ }
+
function retrievePanier(){
var panierElems = sessionStorage.getItem('panier');
- var builtUpHTML="<br>" +
- "<p class=\"titleSection\">Mon panier</p><div class='listeRepas'>";
+ var container = document.getElementById('listePanier');
+ var title = document.createElement("p");
+ title.className = "titleSection";
+ title.appendChild(document.createTextNode("Mon panier"));
+ container.appendChild(title);
+ container.appendChild(document.createElement("div"));
+ container = container.lastChild;
+ container.className = "listeRepas";
+
if(panierElems != null){
var obj = httpGetJson();
var items = panierElems.split(" ");
- for (let i = 0; i < items.length; i++){
- 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>';
+ items.forEach(item =>{
+ if(item.length!=0){
+ container.appendChild(buildReserve(item,obj.array[item.split('-')[0]]));
}
+ })
- }
- document.getElementById('listePanier').innerHTML = builtUpHTML + '</div>';
sessionStorage.removeItem('frigoIndex');
}
}