Create working layout for new orders

views/dashboardPage/bundle.js

@@ -1710,160 +1710,36 @@ let newIngredient = {
 module.exports = newIngredient;
 },{}],12:[function(require,module,exports){
 let newOrder = {
-    isPopulated: false,
-    unused: [],
-
     display: function(Order){
-        if(!this.isPopulated){
-            let categories = merchant.categorizeIngredients();
-            let categoriesList = document.getElementById("newOrderCategories");
-            let template = document.getElementById("addIngredientsCategory").content.children[0];
-            let ingredientTemplate = document.getElementById("newOrderIngredient").content.children[0];
-    
-            for(let i = 0; i < categories.length; i++){
-                let category = template.cloneNode(true);
-    
-                category.children[0].children[0].innerText = categories[i].name;
-                category.children[0].children[1].onclick = ()=>{this.toggleAddIngredient(category)};
-                category.children[0].children[1].children[1].style.display = "none";
-                category.children[1].style.display = "none";
-                
-                categoriesList.appendChild(category);
-    
-                for(let j = 0; j < categories[i].ingredients.length; j++){
-                    let ingredientDiv = ingredientTemplate.cloneNode(true);
-    
-                    ingredientDiv.children[0].children[0].innerText = categories[i].ingredients[j].ingredient.name;
-                    ingredientDiv.children[0].children[1].onclick = ()=>{this.addOne(ingredientDiv, category.children[1])};
-                    ingredientDiv.ingredient = categories[i].ingredients[j].ingredient;
-    
-                    this.unused.push(categories[i].ingredients[j]);
-                    category.children[1].appendChild(ingredientDiv);
-                }
-            }
+        document.getElementById("sidebarDiv").classList.add("sidebarWide");
+        document.getElementById("newOrderIngredientList").style.display = "flex";
 
-            document.getElementById("submitNewOrder").onclick = ()=>{this.submit(Order)};
-
-            this.isPopulated = true;
-        }
-    },
+        let ingredientList = document.getElementById("newOrderIngredients");
 
-    addOne: function(ingredientDiv, container){
-        for(let i = 0; i < this.unused.length; i++){
-            if(this.unused[i] === ingredientDiv){
-                this.unused.splice(i, 1);
-                break;
-            }
+        for(let i = 0; i < merchant.ingredients.length; i++){
+            let ingredient = document.createElement("button");
+            ingredient.classList = "newOrderIngredient";
+            ingredient.innerText = merchant.ingredients[i].ingredient.name;
+            ingredient.onclick = ()=>{this.addIngredient(merchant.ingredients[i].ingredient, ingredient)};
+            ingredientList.appendChild(ingredient);
         }
-
-        ingredientDiv.children[0].children[1].innerText = "-";
-        ingredientDiv.children[0].children[1].onclick = ()=>{this.removeOne(ingredientDiv, container)};
-        ingredientDiv.children[1].style.display = "flex";
-
-        container.removeChild(ingredientDiv);
-        document.getElementById("newOrderAdded").appendChild(ingredientDiv);
     },
 
-    removeOne: function(ingredientDiv, container){
-        this.unused.push(ingredientDiv.ingredient);
+    addIngredient: function(ingredient, element){
+        element.style.display = "none";
 
-        ingredientDiv.children[1].style.display = "none";
-        ingredientDiv.children[0].children[1].innerText = "+";
-        ingredientDiv.children[0].children[1].onclick = ()=>{this.addOne(ingredientDiv, container)};
-        
-        ingredientDiv.parentElement.removeChild(ingredientDiv);
-        container.appendChild(ingredientDiv);
+        let div = document.getElementById("selectedIngredient").content.children[0].cloneNode(true);
+        div.children[0].children[0].innerText = `${ingredient.name} (${ingredient.unit.toUpperCase()})`;
+        div.children[0].children[1].onclick = ()=>{this.removeIngredient(div, element)};
+        div.children[1].children[0].placeholder = "QUANTITY";
+        div.children[1].children[1].placeholder = "PRICE PER UNIT";
+        document.getElementById("selectedIngredientList").appendChild(div);
     },
 
-    toggleAddIngredient: function(categoryElement){
-        let button = categoryElement.children[0].children[1];
-        let ingredientDisplay = categoryElement.children[1];
-
-        if(ingredientDisplay.style.display === "none"){
-            ingredientDisplay.style.display = "flex";
-
-            button.children[0].style.display = "none";
-            button.children[1].style.display = "block";
-        }else{
-            ingredientDisplay.style.display = "none";
-
-            button.children[0].style.display = "block";
-            button.children[1].style.display = "none";
-        }
-    },
-
-    submit: function(Order){
-        let categoriesList = document.getElementById("newOrderAdded");
-        let ingredients = [];
-
-        for(let i = 0; i < categoriesList.children.length; i++){
-            let quantity = categoriesList.children[i].children[1].children[0].value;
-            let price = categoriesList.children[i].children[1].children[1].value;
-
-            let fakeOrder = new Order(undefined, undefined, new Date(), [], undefined);
-            if(quantity !== ""  && price !== ""){
-                ingredients.push({
-                    ingredient: categoriesList.children[i].ingredient.id,
-                    quantity: controller.convertToMain(categoriesList.children[i].ingredient.unit, parseFloat(quantity)),
-                    price: categoriesList.children[i].ingredient.convert(parseInt(price * 100))
-                });
-            }
-        }
-
-        let time = document.getElementById("orderTime").value;
-        let date = document.getElementById("orderDate").value;
-        let dateTime = "";
-        if(time === "" && date === ""){
-            dateTime = undefined;
-        }else if(time === "" && date !== ""){
-            dateTime = date;
-        }else if(time !== "" && date === ""){
-            banner.createError("PLEASE ADD A DATE IF YOU WISH TO HAVE A TIME");
-        }else{
-            dateTime = `${date}T${time}:00`
-        }
-
-        let data = {
-            name: document.getElementById("orderName").value,
-            date: dateTime,
-            ingredients: ingredients
-        };
-
-        let loader = document.getElementById("loaderContainer");
-        loader.style.display = "flex";
-        
-        fetch("/order/create", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json;charset=utf-8"
-            },
-            body: JSON.stringify(data)
-        })
-            .then(response => response.json())
-            .then((response)=>{
-                if(typeof(response) === "string"){
-                    banner.createError(response);
-                }else{
-                    let order = new Order(
-                       response._id,
-                       response.name,
-                       response.date,
-                       response.ingredients,
-                       merchant 
-                    )
-
-                    merchant.editOrders([order]);
-                    merchant.editIngredients(order.ingredients, false, true);
-                    banner.createNotification("ORDER CREATED");
-                }
-            })
-            .catch((err)=>{
-                banner.createError("SOEMTHING WENT WRONG. PLEASE REFRESH THE PAGE");
-            })
-            .finally(()=>{
-                loader.style.display = "none";
-            });
-    },
+    removeIngredient: function(selectedElement, element){
+        selectedElement.parentElement.removeChild(selectedElement);
+        element.style.display = "block";
+    }
 }
 
 module.exports = newOrder;

views/dashboardPage/js/newOrder.js

@@ -1,158 +1,34 @@
 let newOrder = {
-    isPopulated: false,
-    unused: [],
-
     display: function(Order){
-        if(!this.isPopulated){
-            let categories = merchant.categorizeIngredients();
-            let categoriesList = document.getElementById("newOrderCategories");
-            let template = document.getElementById("addIngredientsCategory").content.children[0];
-            let ingredientTemplate = document.getElementById("newOrderIngredient").content.children[0];
-    
-            for(let i = 0; i < categories.length; i++){
-                let category = template.cloneNode(true);
-    
-                category.children[0].children[0].innerText = categories[i].name;
-                category.children[0].children[1].onclick = ()=>{this.toggleAddIngredient(category)};
-                category.children[0].children[1].children[1].style.display = "none";
-                category.children[1].style.display = "none";
-                
-                categoriesList.appendChild(category);
-    
-                for(let j = 0; j < categories[i].ingredients.length; j++){
-                    let ingredientDiv = ingredientTemplate.cloneNode(true);
-    
-                    ingredientDiv.children[0].children[0].innerText = categories[i].ingredients[j].ingredient.name;
-                    ingredientDiv.children[0].children[1].onclick = ()=>{this.addOne(ingredientDiv, category.children[1])};
-                    ingredientDiv.ingredient = categories[i].ingredients[j].ingredient;
-    
-                    this.unused.push(categories[i].ingredients[j]);
-                    category.children[1].appendChild(ingredientDiv);
-                }
-            }
-
-            document.getElementById("submitNewOrder").onclick = ()=>{this.submit(Order)};
+        document.getElementById("sidebarDiv").classList.add("sidebarWide");
+        document.getElementById("newOrderIngredientList").style.display = "flex";
 
-            this.isPopulated = true;
-        }
-    },
+        let ingredientList = document.getElementById("newOrderIngredients");
 
-    addOne: function(ingredientDiv, container){
-        for(let i = 0; i < this.unused.length; i++){
-            if(this.unused[i] === ingredientDiv){
-                this.unused.splice(i, 1);
-                break;
-            }
+        for(let i = 0; i < merchant.ingredients.length; i++){
+            let ingredient = document.createElement("button");
+            ingredient.classList = "newOrderIngredient";
+            ingredient.innerText = merchant.ingredients[i].ingredient.name;
+            ingredient.onclick = ()=>{this.addIngredient(merchant.ingredients[i].ingredient, ingredient)};
+            ingredientList.appendChild(ingredient);
         }
-
-        ingredientDiv.children[0].children[1].innerText = "-";
-        ingredientDiv.children[0].children[1].onclick = ()=>{this.removeOne(ingredientDiv, container)};
-        ingredientDiv.children[1].style.display = "flex";
-
-        container.removeChild(ingredientDiv);
-        document.getElementById("newOrderAdded").appendChild(ingredientDiv);
     },
 
-    removeOne: function(ingredientDiv, container){
-        this.unused.push(ingredientDiv.ingredient);
+    addIngredient: function(ingredient, element){
+        element.style.display = "none";
 
-        ingredientDiv.children[1].style.display = "none";
-        ingredientDiv.children[0].children[1].innerText = "+";
-        ingredientDiv.children[0].children[1].onclick = ()=>{this.addOne(ingredientDiv, container)};
-        
-        ingredientDiv.parentElement.removeChild(ingredientDiv);
-        container.appendChild(ingredientDiv);
+        let div = document.getElementById("selectedIngredient").content.children[0].cloneNode(true);
+        div.children[0].children[0].innerText = `${ingredient.name} (${ingredient.unit.toUpperCase()})`;
+        div.children[0].children[1].onclick = ()=>{this.removeIngredient(div, element)};
+        div.children[1].children[0].placeholder = "QUANTITY";
+        div.children[1].children[1].placeholder = "PRICE PER UNIT";
+        document.getElementById("selectedIngredientList").appendChild(div);
     },
 
-    toggleAddIngredient: function(categoryElement){
-        let button = categoryElement.children[0].children[1];
-        let ingredientDisplay = categoryElement.children[1];
-
-        if(ingredientDisplay.style.display === "none"){
-            ingredientDisplay.style.display = "flex";
-
-            button.children[0].style.display = "none";
-            button.children[1].style.display = "block";
-        }else{
-            ingredientDisplay.style.display = "none";
-
-            button.children[0].style.display = "block";
-            button.children[1].style.display = "none";
-        }
-    },
-
-    submit: function(Order){
-        let categoriesList = document.getElementById("newOrderAdded");
-        let ingredients = [];
-
-        for(let i = 0; i < categoriesList.children.length; i++){
-            let quantity = categoriesList.children[i].children[1].children[0].value;
-            let price = categoriesList.children[i].children[1].children[1].value;
-
-            let fakeOrder = new Order(undefined, undefined, new Date(), [], undefined);
-            if(quantity !== ""  && price !== ""){
-                ingredients.push({
-                    ingredient: categoriesList.children[i].ingredient.id,
-                    quantity: controller.convertToMain(categoriesList.children[i].ingredient.unit, parseFloat(quantity)),
-                    price: categoriesList.children[i].ingredient.convert(parseInt(price * 100))
-                });
-            }
-        }
-
-        let time = document.getElementById("orderTime").value;
-        let date = document.getElementById("orderDate").value;
-        let dateTime = "";
-        if(time === "" && date === ""){
-            dateTime = undefined;
-        }else if(time === "" && date !== ""){
-            dateTime = date;
-        }else if(time !== "" && date === ""){
-            banner.createError("PLEASE ADD A DATE IF YOU WISH TO HAVE A TIME");
-        }else{
-            dateTime = `${date}T${time}:00`
-        }
-
-        let data = {
-            name: document.getElementById("orderName").value,
-            date: dateTime,
-            ingredients: ingredients
-        };
-
-        let loader = document.getElementById("loaderContainer");
-        loader.style.display = "flex";
-        
-        fetch("/order/create", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json;charset=utf-8"
-            },
-            body: JSON.stringify(data)
-        })
-            .then(response => response.json())
-            .then((response)=>{
-                if(typeof(response) === "string"){
-                    banner.createError(response);
-                }else{
-                    let order = new Order(
-                       response._id,
-                       response.name,
-                       response.date,
-                       response.ingredients,
-                       merchant 
-                    )
-
-                    merchant.editOrders([order]);
-                    merchant.editIngredients(order.ingredients, false, true);
-                    banner.createNotification("ORDER CREATED");
-                }
-            })
-            .catch((err)=>{
-                banner.createError("SOEMTHING WENT WRONG. PLEASE REFRESH THE PAGE");
-            })
-            .finally(()=>{
-                loader.style.display = "none";
-            });
-    },
+    removeIngredient: function(selectedElement, element){
+        selectedElement.parentElement.removeChild(selectedElement);
+        element.style.display = "block";
+    }
 }
 
 module.exports = newOrder;

views/dashboardPage/sidebars/newOrder.ejs

@@ -1,4 +1,4 @@
-<div id="newOrder">
+<div id="newOrderIngredientList">
     <div class="sidebarIconButtons">
         <button class="iconButton" onclick="controller.closeSidebar()">
             <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -8,45 +8,41 @@
         </button>
     </div>
 
+    <h1>INGREDIENTS</h1>
+
+    <div id="newOrderIngredients"></div>
+</div>
+
+<div id="newOrder">
     <h1>NEW ORDER</h1>
 
-    <label>ID/NAME:
-        <input id="orderName" type="text">
+    <label>NAME/ID:
+        <input id="newOrderName" type="text">
     </label>
 
-    <label>Date:
-        <input id="orderDate" type="date">
+    <label>DATE:
+        <input id="newOrderDate" type="date">
     </label>
 
-    <label>Time:
-        <input id="orderTime" type="time">
+    <label>TIME:
+        <input id="newOrderTime" type="time">
     </label>
-    
-
-    <div id=newOrderCategories></div>
 
-    <div class="lineBorder"></div>
+    <div id="selectedIngredientList"></div>
 
-    <h2>INGREDIENTS</h2>
-
-    <div id="newOrderAdded"></div>
-
-    <div class="lineBorder"></div>
-
-    <button id="submitNewOrder" class="button">CREATE</button>
-
-    <template id="newOrderIngredient">
-        <div class="addIngredientsIngredient">
+    <template id="selectedIngredient">
+        <div class="selectedIngredient">
             <div>
                 <p></p>
 
-                <button class="addButton">+</button>
+                <button class="newOrderRemove">REMOVE</button>
             </div>
+            
 
-            <div style="display: none;">
-                <input type="number" min="0" step="0.01" placeholder="QUANTITY">
+            <div>
+                <input type="number" min="0" step="0.01">
 
-                <input type="number" min="0" step="0.01" placeholder="PRICE PER UNIT">
+                <input type="number" min="0" step="0.01">
             </div>
         </div>
     </template>

views/dashboardPage/sidebars/sidebars.css

@@ -147,6 +147,10 @@
     box-shadow: -1px 0px 10px gray;
 }
 
+.sidebarWide{
+    width: 40vw;
+}
+
 .sidebarHide{
     width: 0;
     transition: width 0.2s;
@@ -429,28 +433,92 @@ Add Recipe
     }
 
 /* New Order */
+#newOrderIngredientList{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 40%;
+}
+
+    #newOrderIngredients{
+        display: flex;
+        flex-direction: column;
+        width: 90%;
+        overflow-y: auto;
+    }
+
+        .newOrderIngredient{
+            background: rgb(0, 27, 45);
+            color: white;
+            font-size: 17px;
+            font-weight: bold;
+            border: none;
+            border-radius: 5px;
+            padding: 5px;
+            margin: 1px 0;
+            cursor: pointer;
+        }
+
+            .newOrderIngredient:hover{
+                background: rgb(201, 201, 201);
+                color: black;
+            }
+
 #newOrder{
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 100%;
+    width: 60%;
+    border-left: 1px solid black;
 }
 
-    #newOrderCategories{
+    #newOrder > label{
+        margin: 5px;
+    }
+
+    #selectedIngredientList{
         display: flex;
         flex-direction: column;
         align-items: center;
-        width: 100%;
-        margin-bottom: 25px;
-        max-height: 25%;
-        overflow: auto;
+        width: 75%;
     }
 
-    #newOrderAdded{
-        max-height: 25%;
-        width: 100%;
-        overflow: auto;
-    }
+        .selectedIngredient{
+            display: flex;
+            flex-direction: column;
+            background: rgb(0, 27, 45);
+            color: white;
+            border-radius: 5px;
+            margin: 5px 0;
+        }
+
+            .selectedIngredient p{
+                font-weight: bold;
+                font-size: 17px;
+            }
+
+            .selectedIngredient > div{
+                margin: 3px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center
+            }
+
+                .newOrderRemove{
+                    background: rgb(0, 27, 45);
+                    border: 1px solid white;
+                    color: white;
+                    border-radius: 5px;
+                    font-size: 13px;
+                    font-weight: bold;
+                    padding: 5px;
+                    cursor: pointer;
+                }
+
+                    .newOrderRemove:hover{
+                        background: rgb(201, 201, 201);
+                        color: black;
+                    }
 
 /* New Ingredient */
 #newIngredient{