Save in order to checkout other branch.

views/dashboardPage/css/sidebars/newRecipe.css

@@ -6,64 +6,10 @@
     padding-bottom: 50px;
 }
 
-    .recipeBasicInfo{
-        width: 75%;
-        background: rgb(240, 252, 255);
-        padding: 15px;
-        border-radius: 5px;
-        border: 1px solid black;
+    #recipeChoices{
+        width: 40%;
     }
 
-        .recipeBasicInfo label{
-            display: flex;
-            justify-content: space-between;
-            margin: 15px 0;
-            color: black;
-        }
-
-        .recipeBasicInfo input{
-            width: 50%;
-        }
-
-    #addRecipe h2{
-        margin-top: 10px;
-    }
-
-    #recipeInputIngredients{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        box-sizing: border-box;
-        margin: 0 0 25px 0;
-        width:100%;
-        overflow-y: auto;
-        overflow-x: hidden;
-        box-shadow: 0 0 2px gray;
-        border-radius: 5px;
-    }
-
-        #recipeInputIngredients div{
-            width: 75%;
-            background: rgb(240, 252, 255);
-            border: 1px solid black;
-            padding: 10px;
-            border-radius: 5px;
-            margin: 10px 0;
-            padding: 10px 15px;
-            text-align: center;
-        }
-
-            #recipeInputIngredients div > label{
-                display: flex;
-                justify-content: space-between;
-                margin-bottom: 2px;
-                color: black;
-            }
-
-            #recipeInputIngredients input{
-                width: 100px;
-            }
-
-            #recipeInputIngredients div h4{
-                color: rgb(255, 99, 107);
-            }
+    #newRecipeData{
+        width: 60%;
+    }

views/dashboardPage/ejs/sidebars/newRecipe.ejs

@@ -8,41 +8,11 @@
         </button>
     </div>
 
-    <h1>NEW RECIPE</h1>
-
-    <div class="recipeBasicInfo">
-        <label>NAME:
-            <input id="newRecipeName" type="text">
-        </label>
-
-        <label>PRICE:
-            <input id="newRecipePrice" type="number" step="0.01" min="0">
-        </label>
-
-        <label># OF INGREDIENTS:
-            <input id="ingredientCount" type="number" step="1" min="1">
-        </label>
+    <div id="recipeChoices">
+        <div id="recipeChoicesList"></div>
     </div>
 
-    <h2>INGREDIENTS</h2>
-
-    <div id="recipeInputIngredients"></div>
+    <div id="newRecipeData">
 
-    <template id="recipeInputIngredient">
-        <div class="recipeInputIngredient">
-            <h4></h4>
-
-            <label>INGREDIENT:
-                <select></select>
-            </label>
-
-            <label>QUANTITY:
-                <input type="number" step="0.01" min="0">
-            </label>
-        </div>
-    </template>
-    
-    <button id="submitNewRecipe" class="sidebarButton">CREATE</button>
-
-    <button id="recipeFileUpload" class="linkButton">Or, upload a spreadsheet</button>
+    </div>
 </div>

views/dashboardPage/js/sidebars/newRecipe.js

@@ -1,151 +1,25 @@
 let newRecipe = {
-    display: function(){
-        document.getElementById("newRecipeName").value = "";
-        document.getElementById("newRecipePrice").value = "";
-        document.getElementById("ingredientCount").value = 1;
-
-        let categories = merchant.categorizeIngredients();
-
-        let ingredientsSelect = document.getElementById("recipeInputIngredients");
-        while(ingredientsSelect.children.length > 0){
-            ingredientsSelect.removeChild(ingredientsSelect.firstChild);
-        }
-
-        this.changeIngredientCount(categories);
-
-        document.getElementById("ingredientCount").onchange = ()=>{this.changeIngredientCount(categories)};
-        document.getElementById("submitNewRecipe").onclick = ()=>{this.submit()};
-        document.getElementById("recipeFileUpload").onclick = ()=>{controller.openModal("recipeSpreadsheet")};
-    },
-
-    //Updates the number of ingredient inputs displayed for new recipes
-    changeIngredientCount: function(categories){
-        let newCount = document.getElementById("ingredientCount").value;
-        let ingredientsDiv = document.getElementById("recipeInputIngredients");
-        let template = document.getElementById("recipeInputIngredient").content.children[0];
-        let oldCount = ingredientsDiv.children.length;
-
-        if(newCount > oldCount){
-            let newDivs = newCount - oldCount;
-
-            for(let i = 0; i < newDivs; i++){
-                let newNode = template.cloneNode(true);
-                newNode.children[0].innnerText = `INGREDIENT ${i + oldCount}`;
-                newNode.children[2].children[0].value = 0;
-
-                for(let j = 0; j < categories.length; j++){
-                    let optgroup = document.createElement("optgroup");
-                    optgroup.label = categories[j].name;
-
-                    for(let k = 0; k < categories[j].ingredients.length; k++){
-                        let option = document.createElement("option");
-                        option.innerText = categories[j].ingredients[k].ingredient.getNameAndUnit();
-                        option.ingredient = categories[j].ingredients[k];
-                        optgroup.appendChild(option);
-                    }
-
-                    newNode.children[1].children[0].appendChild(optgroup);
-                }
-
-                ingredientsDiv.appendChild(newNode);
-            }
+    unselected: [],
+    selected: [],
 
-            for(let i = 0; i < newCount; i++){
-                ingredientsDiv.children[i].children[0].innerText = `INGREDIENT ${i + 1}`;
-            }
-        }else if(newCount < oldCount){
-            let newDivs = oldCount - newCount;
-
-            for(let i = 0; i < newDivs; i++){
-                ingredientsDiv.removeChild(ingredientsDiv.children[ingredientsDiv.children.length-1]);
-            }
-        }
-    },
-
-    submit: function(){
-        let newRecipe = {
-            name: document.getElementById("newRecipeName").value,
-            price: document.getElementById("newRecipePrice").value,
-            ingredients: []
-        }
-
-        let inputs = document.getElementById("recipeInputIngredients").children;
-        for(let i = 0; i < inputs.length; i++){
-            let sel = inputs[i].children[1].children[0];
-            let ingredient = sel.options[sel.selectedIndex].ingredient;
+    display: function(){
+        document.getElementById("sidebarDiv").classList.add("sidebarWide");
 
-            let newIngredient = {
-                ingredient: ingredient.ingredient.id,
-                quantity: ingredient.convertToBase(inputs[i].children[2].children[0].value)
-            };
+        let list = document.getElementById("recipeChoicesList");
+        for(let i = 0; i < merchant.recipes.length; i++){
+            this.unselected.push(merchant.recipes[i]);
 
-            newRecipe.ingredients.push(newIngredient);
+            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);
         }
-
-        let loader = document.getElementById("loaderContainer");
-        loader.style.display = "flex";
-
-        fetch("/recipe/create", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json;charset=utf-8"
-            },
-            body: JSON.stringify(newRecipe)
-        })
-            .then((response) => response.json())
-            .then((response)=>{
-                if(typeof(response) === "string"){
-                    controller.createBanner(response, "error");
-                }else{
-                    merchant.addRecipes([response]);
-                    state.updateRecipes();
-
-                    controller.createBanner("RECIPE CREATED", "success");
-                    controller.openStrand("recipeBook");
-                }
-            })
-            .catch((err)=>{
-                controller.createBanner("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE", "error");
-            })
-            .finally(()=>{
-                loader.style.display = "none";
-            });
     },
 
-    submitSpreadsheet: function(){
-        event.preventDefault();
-        controller.closeModal();
-
-        const file = document.getElementById("spreadsheetInput").files[0];
-        let data = new FormData();
-        data.append("recipes", file);
-
-        let loader = document.getElementById("loaderContainer");
-        loader.style.display = "flex";
-
-        fetch("/recipes/create/spreadsheet", {
-            method: "post",
-            body: data
-        })
-            .then(response => response.json())
-            .then((response)=>{
-                if(typeof(response) === "string"){
-                    controller.createBanner(response, "error");
-                }else{
-                    merchant.addRecipes(response);
-                    state.updateRecipes();
-
-                    controller.createBanner("ALL RECIPES SUCCESSFULLY CREATED", "success");
-                    controller.openStrand("recipeBook");
-                }
-            })
-            .catch((err)=>{
-                controller.createBanner("UNABLE TO DISPLAY NEW RECIPES.  PLEASE REFRESH THE PAGE", "error");
-            })
-            .finally(()=>{
-                loader.style.display = "none";
-            });
+    add: function(recipe, element){
+        console.log("adding");
     }
-}
+};
 
 module.exports = newRecipe;