Procházet zdrojové kódy

Banner notifications and errors added

Lee Morgan před 6 roky
rodič
revize
dd565cdee9

+ 2 - 0
views/inventory/inventory.ejs

@@ -7,6 +7,8 @@
     <body>
         <% include ../shared/header %>
 
+        <% include ../shared/banner %>
+
         <div class="container">
             <h1><%= merchant.name %> inventory</h1>
 

+ 9 - 4
views/inventory/inventory.js

@@ -98,31 +98,34 @@ let updateOne = (id, row)=>{
         id: id,
         quantity: quantity
     })
-        .then((ingredient)=>{})
+        .then((ingredient)=>{
+            banner.createNotification("The ingredient has been successfully updated");
+        })
         .catch((err)=>{
+            banner.createError("There was an error and the ingredient was not updated");
             console.log(err);
         });
 }
 
 let removeIngredient = (id, row)=>{
     axios.post("/ingredients/remove", {id: id})
-        .then((result)=>{
+        .then((merchant)=>{
             for(let i = 0; i < items.length; i++){
                 if(id === items[i].id){
                     items.splice(i, 1);
                 }
             }
-        
+            banner.createNotification("The ingredient has been removed from your inventory");
             renderIngredients();
         })
         .catch((err)=>{
+            banner.createError("There was an error and the ingredient has not been removed from your inventory");
             console.log(err);
         });
 }
 
 let displayAdd = ()=>{
     let modal = document.querySelector(".add-ingredient");
-    let content = document.querySelector(".modal-content");
 
     let removeModal = (modal)=>{modal.style.visibility = "hidden";}
 
@@ -155,8 +158,10 @@ let addIngredient = ()=>{
             
             sortIngredients("name");
             renderIngredients();
+            banner.createNotification("The new ingredient has been successfully added to your inventory");
         })
         .catch((err)=>{
+            banner.createError("There was an error and the ingredient could not be added to your inventory");
             console.log(err);
         });
 

+ 2 - 0
views/merchantSetupPage/merchantSetup.ejs

@@ -7,6 +7,8 @@
     <body>
         <% include ../shared/header %>
 
+        <% include ../shared/banner %>
+
         <div id="addIngredients" class="container">
             <h1>Add your first set of ingredients to your pantry</h1>
 

+ 2 - 0
views/merchantSetupPage/merchantSetup.js

@@ -174,9 +174,11 @@ let createIngredientsList = ()=>{
 
                 data.ingredients.push(newIngredient);
             }
+            banner.createNotification("All ingredients have been created and added to your inventory");
             showRecipe();
         })
         .catch((err)=>{
+            banner.createError("There has been an error and your ingredients have not been saved");
             console.log(err);
         });
 }

+ 31 - 0
views/shared/banner.ejs

@@ -0,0 +1,31 @@
+<div class="banner">
+    <p></p>
+</div>
+
+<script>
+    let banner = {
+        createNotification: (val)=>{
+            let currentBanner = document.querySelector(".banner");
+            let bannerText = document.querySelector(".banner p");
+            currentBanner.style.display = "inline-block";
+            bannerText.innerText = val;
+            bannerText.classList = "notification";
+
+            setTimeout(()=>{
+                currentBanner.style.display = "none";
+            }, 10000);
+        },
+
+        createError: (val)=>{
+            let currentBanner = document.querySelector(".banner");
+            let bannerText = document.querySelector(".banner p");
+            currentBanner.style.display = "inline-block";
+            bannerText.innerText = val;
+            bannerText.classList = "error";
+
+            setTimeout(()=>{
+                currentBanner.style.display = "none";
+            }, 10000);
+        }
+    }
+</script>

+ 22 - 0
views/shared/shared.css

@@ -22,4 +22,26 @@
     .header h1{
         display: inline-block;
         color: #ff626b;
+    }
+
+.banner{
+    width: 100%;
+    text-align: center;
+    display: none;
+}
+
+    .banner .notification{
+        background: green;
+        color: white;
+        padding: 10px;
+        margin: 5px;
+        font-weight: bold;
+    }
+
+    .banner .error{
+        background: red;
+        color: white;
+        padding: 10px;
+        margin: 5px;
+        font-weight: bold;
     }