Update look of add ingredients sidebar to be easier to use

controllers/orderData.js

@@ -78,7 +78,7 @@ module.exports = {
                     }
                 }
             }},
-            {$sort: {date: 1}}
+            {$sort: {date: -1}}
         ])
             .then((orders)=>{
                 return res.json(orders);

controllers/renderer.js

@@ -43,7 +43,7 @@ module.exports = {
             req.session.error = "MUST BE LOGGED IN TO DO THAT";
             return res.redirect("/");
         }
-        let activity = new Activity({
+        new Activity({
             ipAddr: req.headers['x-forwarded-for'] || req.connection.remoteAddress,
             merchant: req.session.user,
             route: "dashboard",
@@ -142,7 +142,7 @@ module.exports = {
 
                             merchant.lastUpdatedTime = updatedTime;
 
-                            //Remove any existing orders so that they can ber replaced
+                            //Remove any existing orders so that they can be replaced
                             let ids = [];
                             for(let i = 0; i < transactions.length; i++){
                                 ids.push(transactions[i].posId);
@@ -168,7 +168,7 @@ module.exports = {
                         merchant: new ObjectId(req.session.user),
                         date: {$gte: firstDay},
                     }},
-                    {$sort: {date: 1}},
+                    {$sort: {date: -1}},
                     {$project: {
                         date: 1,
                         recipes: 1

controllers/transactionData.js

@@ -42,7 +42,7 @@ module.exports = {
                     }
                 }
             }},
-            {$sort: {date: 1}}
+            {$sort: {date: -1}}
         ])
             .then((transactions)=>{
                 return res.json(transactions);

views/dashboardPage/bundle.js

@@ -648,8 +648,8 @@ module.exports = {
             
             for(let j = 0; j < categories[i].ingredients.length; j++){
                 let ingredientDiv = ingredientTemplate.content.children[0].cloneNode(true);
-                ingredientDiv.children[0].innerText = categories[i].ingredients[j].ingredient.name;
-                ingredientDiv.children[2].onclick = ()=>{this.addOne(ingredientDiv)};
+                ingredientDiv.children[0].children[0].innerText = categories[i].ingredients[j].ingredient.name;
+                ingredientDiv.children[0].children[1].onclick = ()=>{this.addOne(ingredientDiv)};
                 ingredientDiv.ingredient = categories[i].ingredients[j].ingredient;
 
                 categoryDiv.children[1].appendChild(ingredientDiv);
@@ -688,6 +688,7 @@ module.exports = {
         element.parentElement.removeChild(element);
         document.getElementById("myIngredients").appendChild(element);
         document.getElementById("myIngredientsDiv").style.display = "flex";
+        element.children[1].style.display = "flex";
 
         for(let i = 0; i < this.fakeMerchant.ingredients.length; i++){
             if(this.fakeMerchant.ingredients[i].ingredient === element.ingredient){
@@ -697,15 +698,7 @@ module.exports = {
             }
         }
 
-        let input = document.createElement("input");
-        input.type = "number";
-        input.min = "0";
-        input.step = "0.01";
-        input.placeholder = "QUANTITY";
-        element.insertBefore(input, element.children[1]);
-
-        let select = element.children[2];
-        select.style.display = "block";
+        let select = element.children[1].children[1];
         let units = merchant.units[element.ingredient.unitType];
         for(let i = 0; i < units.length; i++){
             let option = document.createElement("option");
@@ -715,23 +708,21 @@ module.exports = {
             select.appendChild(option);
         }
 
-        element.children[3].innerText = "-";
-        element.children[3].onclick = ()=>{this.removeOne(element)};
+        element.children[0].children[1].innerText = "-";
+        element.children[0].children[1].onclick = ()=>{this.removeOne(element)};
     },
 
     removeOne: function(element){
         element.parentElement.removeChild(element);
+        element.children[1].style.display = "none";
 
-        element.removeChild(element.children[1]);
-
-        let select = element.children[1];
+        let select = element.children[0].children[1];
         while(select.children.length > 0){
             select.removeChild(select.firstChild);
         }
-        select.style.display = "none";
 
-        element.children[2].innerText = "+";
-        element.children[2].onclick = ()=>{this.addOne(element)};
+        element.children[0].children[1].innerText = "+";
+        element.children[0].children[1].onclick = ()=>{this.addOne(element)};
 
         if(document.getElementById("myIngredients").children.length === 0){
             document.getElementById("myIngredientsDiv").style.display = "none";
@@ -756,8 +747,8 @@ module.exports = {
         let fetchable = [];
 
         for(let i = 0; i < ingredients.length; i++){
-            let quantity = ingredients[i].children[1].value;
-            let unit = ingredients[i].children[2].value;
+            let quantity = ingredients[i].children[1].children[0].value;
+            let unit = ingredients[i].children[1].children[1].value;
 
             if(quantity === ""){
                 banner.createError("PLEASE ENTER A QUANTITY FOR EACH INGREDIENT YOU WANT TO ADD TO YOUR INVENTORY");

views/dashboardPage/js/addIngredients.js

@@ -69,8 +69,8 @@ module.exports = {
             
             for(let j = 0; j < categories[i].ingredients.length; j++){
                 let ingredientDiv = ingredientTemplate.content.children[0].cloneNode(true);
-                ingredientDiv.children[0].innerText = categories[i].ingredients[j].ingredient.name;
-                ingredientDiv.children[2].onclick = ()=>{this.addOne(ingredientDiv)};
+                ingredientDiv.children[0].children[0].innerText = categories[i].ingredients[j].ingredient.name;
+                ingredientDiv.children[0].children[1].onclick = ()=>{this.addOne(ingredientDiv)};
                 ingredientDiv.ingredient = categories[i].ingredients[j].ingredient;
 
                 categoryDiv.children[1].appendChild(ingredientDiv);
@@ -109,6 +109,7 @@ module.exports = {
         element.parentElement.removeChild(element);
         document.getElementById("myIngredients").appendChild(element);
         document.getElementById("myIngredientsDiv").style.display = "flex";
+        element.children[1].style.display = "flex";
 
         for(let i = 0; i < this.fakeMerchant.ingredients.length; i++){
             if(this.fakeMerchant.ingredients[i].ingredient === element.ingredient){
@@ -118,15 +119,7 @@ module.exports = {
             }
         }
 
-        let input = document.createElement("input");
-        input.type = "number";
-        input.min = "0";
-        input.step = "0.01";
-        input.placeholder = "QUANTITY";
-        element.insertBefore(input, element.children[1]);
-
-        let select = element.children[2];
-        select.style.display = "block";
+        let select = element.children[1].children[1];
         let units = merchant.units[element.ingredient.unitType];
         for(let i = 0; i < units.length; i++){
             let option = document.createElement("option");
@@ -136,23 +129,21 @@ module.exports = {
             select.appendChild(option);
         }
 
-        element.children[3].innerText = "-";
-        element.children[3].onclick = ()=>{this.removeOne(element)};
+        element.children[0].children[1].innerText = "-";
+        element.children[0].children[1].onclick = ()=>{this.removeOne(element)};
     },
 
     removeOne: function(element){
         element.parentElement.removeChild(element);
+        element.children[1].style.display = "none";
 
-        element.removeChild(element.children[1]);
-
-        let select = element.children[1];
+        let select = element.children[0].children[1];
         while(select.children.length > 0){
             select.removeChild(select.firstChild);
         }
-        select.style.display = "none";
 
-        element.children[2].innerText = "+";
-        element.children[2].onclick = ()=>{this.addOne(element)};
+        element.children[0].children[1].innerText = "+";
+        element.children[0].children[1].onclick = ()=>{this.addOne(element)};
 
         if(document.getElementById("myIngredients").children.length === 0){
             document.getElementById("myIngredientsDiv").style.display = "none";
@@ -177,8 +168,8 @@ module.exports = {
         let fetchable = [];
 
         for(let i = 0; i < ingredients.length; i++){
-            let quantity = ingredients[i].children[1].value;
-            let unit = ingredients[i].children[2].value;
+            let quantity = ingredients[i].children[1].children[0].value;
+            let unit = ingredients[i].children[1].children[1].value;
 
             if(quantity === ""){
                 banner.createError("PLEASE ENTER A QUANTITY FOR EACH INGREDIENT YOU WANT TO ADD TO YOUR INVENTORY");

views/dashboardPage/sidebars/addIngredients.ejs

@@ -48,11 +48,17 @@
 
     <template id="addIngredientsIngredient">
         <div class="addIngredientsIngredient">
-            <p></p>
+            <div>
+                <p></p>
 
-            <select style="display: none;"></select>
-            
-            <button class="addButton">+</button>
+                <button class="addButton">+</button>
+            </div>
+
+            <div style="display: none;">
+                <input type="number" min="0" step="0.01" placeholder="QUANTITY">
+
+                <select></select>
+            </div>
         </div>
     </template>
 </div>

views/dashboardPage/sidebars/sidebars.css

@@ -281,17 +281,39 @@ Add Ingredients
 
             .addIngredientsIngredient{
                 display: flex;
-                justify-content: space-between;
+                flex-direction: column;
                 align-items: center;
                 margin: 5px;
+                border: 1px solid black;
+                background: rgb(240, 252, 255);
+                padding: 1px 3px;
+                border-radius: 5px;
             }
 
+                .addIngredientsIngredient div{
+                    display: flex;
+                    width: 100%;
+                    align-items: center;
+                }
+
+                .addIngredientsIngredient div:first-of-type{
+                    justify-content: space-around;
+                }
+
+                .addIngredientsIngredient div:last-of-type > *{
+                    margin: 0 5px;
+                }
+
+                .addIngredientsIngredient div:last-of-type{
+                    justify-content: center;
+                }
+
                 .addIngredientsIngredient input[type=number]{
                     width: 100px;
                 }
 
                 .addIngredientsIngredient select{
-                    width: 60px;
+                    width: 100px;
                 }
 
                 .addButton{
@@ -301,7 +323,7 @@ Add Ingredients
                     font-size: 25px;
                     font-weight: bold;
                     background: none;
-                    border: 1px solid black;
+                    border: none;
                     border-radius: 5px;
                     width: 30px;
                     cursor: pointer;