Merge cb9336b into f2b39a9

UI/assets/css/attendantdashboard.css

@@ -13,6 +13,10 @@ body {
     overflow: visible;
 }
 
+main {
+    margin-top: 100px;
+}
+
 .row {
     margin-top: 10px;
 }

UI/assets/css/lib/form.css

@@ -60,7 +60,7 @@
 	position: relative 
 }
 
-.login-form form input[type="text"],
+.login-form form input[type="email"],
 .login-form input[type="password"] {
 	border-radius: 3px;
 	box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;

UI/assets/css/lib/snackbar.css

@@ -1,20 +1,21 @@
 #status-msg {
     display: none;
-    max-width: 50px;
+    max-width: 70%;
     height: 40px;
     margin: auto;
-    padding-top: 20px;
+    vertical-align: middle; 
+    line-height: 40px;
     background-color: #7c0000;
     color: #fff;
-    font-size: 17px;
+    font-size: 1.1em;
     text-align: center;
-    border-radius: 2px;
     position: fixed;
     z-index: 22;
     left: 0;
     right:0;
     top: 150px;
     animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s;
 }
 
 @keyframes fadein {

UI/assets/css/main.css

@@ -22,6 +22,10 @@ main {
   margin-bottom: 60px;
 }
 
+#login-tag{
+  margin-top: -50px;
+}
+
 .container {
   position: absolute;
   text-align: center;

UI/assets/css/products.css

@@ -14,6 +14,10 @@ body {
     font-weight: 700;
 }
 
+main {
+    margin-top: 0;
+}
+
 .row {
     position: absolute;
     width: 100%;

UI/assets/js/admindashboard.js

@@ -1,8 +1,8 @@
 /* eslint-disable no-plusplus */
 const url = 'https://newstoremanager.herokuapp.com/api/v1';
 // eslint-disable-next-line no-unused-vars
-const saveProductId = (id) => {
-  localStorage.setItem('productId', id);
+const saveId = (nameOfId, id) => {
+  localStorage.setItem(nameOfId, id);
 };
 
 const getCurrentUser = () => {
@@ -25,6 +25,8 @@ const getCurrentUser = () => {
         </figure>
       `;
       document.getElementById('user-profile').innerHTML += output;
+      // eslint-disable-next-line no-undef
+      statusMessage(`Hello ${data.fullname.split(' ')[0]}!`, 'darkgreen', '110px');
     });
 };
 
@@ -40,7 +42,7 @@ const getUsers = () => {
       let output;
       for (let i = 0; i < 4; i++) {
         output = `
-          <li><a href="attendantdashboard.html">${data[i].fullname}</a></li>
+          <li><a href="attendantsales.html" onClick='saveId("attendantId", ${data[i].id})'>${data[i].fullname}</a></li>
       `;
         document.getElementById('userlist').innerHTML += output;
       }
@@ -56,6 +58,7 @@ const getSales = () => {
   })
     .then(res => res.json())
     .then((data) => {
+      data.reverse();
       let output;
       for (let i = 0; i < 4; i += 1) {
         output = `
@@ -75,10 +78,11 @@ const getProducts = () => {
   })
     .then(res => res.json())
     .then((data) => {
+      data.reverse();
       let output;
       for (let i = 0; i < 4; i += 1) {
         output = `
-            <a href="product-item.html" onClick='saveProductId(${data[i].id})'>
+            <a href="product-item.html" onClick='saveId("productId", ${data[i].id})'>
               <img src='${data[i].productimage}'
                 width='300'>
             </a>

UI/assets/js/attendantdashboard.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 /* eslint-disable no-plusplus */
 const url = 'https://newstoremanager.herokuapp.com/api/v1';
 // eslint-disable-next-line no-unused-vars
@@ -25,6 +26,13 @@ const getMyProfile = () => {
         </figure>
       `;
       document.getElementById('user-profile').innerHTML += output;
+      // eslint-disable-next-line no-undef
+      statusMessage(`Hello ${data.fullname.split(' ')[0]}!`, 'darkgreen', '110px');
+    })
+    .catch((err) => {
+      // eslint-disable-next-line no-undef
+      statusMessage('There was an error in processing your request');
+      console.log(err);
     });
 };
 
@@ -45,7 +53,8 @@ const getSales = () => {
         `;
         document.getElementById('sale-list').innerHTML += output;
       }
-    });
+    })
+    .catch(err => console.log(err));
 };
 
 const getProducts = () => {

UI/assets/js/login.js

@@ -1,15 +1,4 @@
-const addStatusMessageDiv = () => {
-  document.body.innerHTML += '<div id="status-msg"></div>';
-};
-
-const snackbar = (text) => {
-  const statusMessageDiv = document.getElementById('status-msg');
-  statusMessageDiv.innerHTML = text;
-  statusMessageDiv.style.display = 'block';
-  // eslint-disable-next-line no-return-assign
-  setTimeout(() => statusMessageDiv.style.display = 'none', 4000);
-};
-
+/* eslint-disable no-undef */
 const loginUser = (e) => {
   e.preventDefault();
   const loginDetails = {
@@ -36,14 +25,13 @@ const loginUser = (e) => {
         }
         window.location.replace('./pages/attendantdashboard.html');
       }
-      snackbar(data.message);
+      statusMessage(data.message);
       console.log(data);
     })
     .catch((err) => {
       console.log(err);
-      snackbar('There was an error. Can you try again?');
+      statusMessage('There was an error. Can you try again?');
     });
 };
 
-window.onload = addStatusMessageDiv();
 document.getElementById('login').addEventListener('submit', loginUser);

UI/assets/js/main.js

@@ -6,12 +6,4 @@ const checkLoginstatus = () => {
   }
 };
 
-const snackbar = (text) => {
-  document.body.innerHTML += '<div id="status-msg"></div>';
-  const statusMessageDiv = document.getElementById('status-msg');
-  statusMessageDiv.innerHTML = text;
-  statusMessageDiv.style.display = 'block';
-  setTimeout(() => statusMessageDiv.style.display = 'none', 4000);
-};
-
 window.onload = checkLoginstatus();

UI/assets/js/products.js

@@ -32,7 +32,7 @@ const getProducts = () => {
     .then(res => res.json())
     .then((data) => {
       let output;
-      data.forEach((product) => {
+      data.reverse().forEach((product) => {
         output = `
           <div class='product'>
             <div class='product-item hover-effect'>
@@ -111,7 +111,11 @@ const getProducts = () => {
                 console.log('Edit Product successful!');
               } else { console.log('Edit Product Not successful!'); }
             })
-            .catch(err => alert(err));
+            .catch((err) => {
+              alert(err);
+              // eslint-disable-next-line no-undef
+              statusMessage('There was an error in processing your request.');
+            });
         };
 
         confirmDeleteModal = (productId) => {
@@ -132,14 +136,31 @@ const getProducts = () => {
           };
           fetch(`${url}/${productId}`, options)
             .then(res => res.json())
-            .then((data) => {
-              if (data.success === true) {
+            .then((resData) => {
+              if (resData.success === true) {
                 console.log(`Product with id ${productId} deleted!`);
-              } else { console.log('Not successful!'); }
+                // eslint-disable-next-line no-undef
+                statusMessage('The product has been deleted successfully!', 'green');
+                productsList.innerHTML = '';
+                getProducts();
+              } else {
+                // eslint-disable-next-line no-undef
+                statusMessage(resData.message);
+                console.log('Not successful!'); 
+              }
             })
-            .catch(err => console.log(err));
+            .catch((err) => {
+              // eslint-disable-next-line no-undef
+              statusMessage('There was an error in processing your request');
+              console.log(err);
+            });
         };
       });
+    })
+    .catch((err) => {
+      // eslint-disable-next-line no-undef
+      statusMessage('An error occured while trying to get products');
+      console.log(err);
     });
 };
 
@@ -169,9 +190,17 @@ const postProduct = (e) => {
     .then((data) => {
       if (data.success === true) {
         console.log('Product created!');
+        // eslint-disable-next-line no-undef
+        statusMessage('The product has been added successfully!', 'green');
+        productsList.innerHTML = '';
+        getProducts();
       } else { console.log('Not successful!'); }
     })
-    .catch(err => console.log(err));
+    .catch((err) => {
+      // eslint-disable-next-line no-undef
+      statusMessage('There was an error in processing your request');
+      console.log(err);
+    });
 };
 
 addProductBtn.addEventListener('click', addProductModal);
@@ -182,5 +211,5 @@ window.onload = getProducts();
 
 if (localStorage.role === 'attendant') {
   addProductBtn.style.display = 'none';
-  productsList.style.marginTop = '150px';
+  productsList.style.marginTop = '100px';
 }

UI/assets/js/sales.js

@@ -25,7 +25,12 @@ const getSales = () => {
           `;
         document.getElementById('sales-record').innerHTML += output;
       });
+    })
+    .catch((err) => {
+      // eslint-disable-next-line no-undef
+      statusMessage('There was an error in loading sales record');
+      console.log(err);
     });
 };
 
-window.onload = getSales();
+window.onload = getSales();

UI/assets/js/statusmessage.js

@@ -0,0 +1,16 @@
+/* eslint-disable no-unused-vars */
+const addStatusMessageDiv = () => {
+  document.getElementsByTagName('main')[0].innerHTML += '<div id="status-msg"></div>';
+  /* document.body.innerHTML += '<div id="status-msg"></div>'; */
+};
+
+const statusMessage = (text, color, top) => {
+  const statusMessageDiv = document.getElementById('status-msg');
+  statusMessageDiv.innerHTML = text;
+  statusMessageDiv.style.background = color;
+  statusMessageDiv.style.top = top;
+  statusMessageDiv.style.display = 'block';
+  setTimeout(() => { statusMessageDiv.style.display = 'none'; }, 4000);
+};
+
+window.body.onload = addStatusMessageDiv();