Recreating new recipe sidebar.

Ingredients can be added/removed to the recipe.

views/dashboardPage/css/sidebars/newRecipe.css

@@ -6,10 +6,25 @@
     padding-bottom: 50px;
 }
 
-    #recipeChoices{
-        width: 40%;
+    /* #addRecipe .choosable{
+        background: rgb(240, 252, 255);
+    } */
+
+    #newRecipeContent{
+        display: flex;
+        width: 100%;
+        padding: 10px;
     }
 
-    #newRecipeData{
-        width: 60%;
-    }
+        #recipeChoices{
+            width: 40%;
+            border-right: 1px solid rgb(255, 99, 107);
+            height: 100%;
+            overflow-y: auto;
+            padding: 10px;
+        }
+
+        #newRecipeData{
+            width: 60%;
+            padding: 10px;
+        }

views/dashboardPage/ejs/sidebars/newRecipe.ejs

@@ -8,11 +8,33 @@
         </button>
     </div>
 
-    <div id="recipeChoices">
-        <div id="recipeChoicesList"></div>
-    </div>
+    <div id="newRecipeContent">
+        <div id="recipeChoices">
+            <div id="recipeChoicesList"></div>
+        </div>
+
+        <div id="newRecipeData">
+            <div>
+                <input id="newRecipeName" type="text" placeholder="NAME">
+
+                <input id="newRecipePrice" type="number" step="0.01" min="0" placeholder="PRICE">
+            </div>
 
-    <div id="newRecipeData">
+            <div id="newRecipeChosenList"></div>
 
+            <button id="submitNewRecipe" class="sidebarButton">CREATE</button>
+        </div>
     </div>
+
+    <template id="newRecipeChosenIngredient">
+        <div class="newRecipeChosenIngredient">
+            <div>
+                <p></p>
+
+                <button class="sidebarButton">REMOVE</button>
+            </div>
+
+            <input type="number" step="0.01" min="0">
+        </div>
+    </template>
 </div>

views/dashboardPage/js/sidebars/newRecipe.js

@@ -1,25 +1,48 @@
 let newRecipe = {
-    unselected: [],
-    selected: [],
+    unchosen: [],
 
     display: function(){
         document.getElementById("sidebarDiv").classList.add("sidebarWide");
 
+        for(let i = 0; i < merchant.ingredients.length; i++){
+            this.unchosen.push(merchant.ingredients[i].ingredient);
+        }
+
+        this.populateChoices();
+    },
+
+    populateChoices: function(){
+        this.unchosen.sort((a, b) => (a.name > b.name) ? 1 : -1);
+
         let list = document.getElementById("recipeChoicesList");
-        for(let i = 0; i < merchant.recipes.length; i++){
-            this.unselected.push(merchant.recipes[i]);
-
-            let recipe = document.createElement("button");
-            recipe.innerText = merchant.recipes[i];
-            recipe.classList.add("choosable");
-            recipe.onclick = ()=>{this.add(merchant.recipes[i], recipe)};
-            list.appendChild(recipe);
+        while(list.children.length > 0){
+            list.removeChild(list.firstChild);
+        }
+
+        for(let i = 0; i < this.unchosen.length; i++){
+            let ingredient = document.createElement("button");
+            ingredient.innerText = this.unchosen[i].name;
+            ingredient.classList.add("choosable");
+            ingredient.onclick = ()=>{
+                this.add(this.unchosen[i]);
+                this.unchosen.splice(i, 1);
+                this.populateChoices();
+            };
+            list.appendChild(ingredient);
         }
     },
 
-    add: function(recipe, element){
-        console.log("adding");
-    }
+    add: function(ingredient){
+        let element = document.getElementById("newRecipeChosenIngredient").content.children[0].cloneNode(true);
+        element.children[0].children[0].innerText = ingredient.name;
+        element.children[0].children[1].onclick = ()=>{
+            this.unchosen.push(ingredient);
+            element.parentElement.removeChild(element);
+            this.populateChoices();
+        };
+        element.children[1].placeholder = `UNIT (${ingredient.unit.toUpperCase()})`;
+        document.getElementById("newRecipeChosenList").appendChild(element);
+    },
 };
 
 module.exports = newRecipe;