|
|
@@ -1,69 +1,80 @@
|
|
|
-console.log(ingredients);
|
|
|
-
|
|
|
-//Populate all ingredients into the table
|
|
|
-let table = document.querySelector("#ingredient-display");
|
|
|
-let createDiv = document.querySelector("#new-ingredient");
|
|
|
-createDiv.style.display = "none";
|
|
|
-
|
|
|
-let existingIngredients = [];
|
|
|
-let newIngredients = [];
|
|
|
+let state = 0;
|
|
|
let data = {};
|
|
|
|
|
|
-for(let ingredient of ingredients){
|
|
|
- let row = document.createElement("tr");
|
|
|
- row.id = ingredient._id;
|
|
|
+let addIngredients = document.querySelector("#addIngredients");
|
|
|
+let newIngredients = document.querySelector("#newIngredients");
|
|
|
+let existingIngredientElements = [];
|
|
|
+let newIngredientElements = [];
|
|
|
+
|
|
|
+let updateState = (num)=>{
|
|
|
+ state += num;
|
|
|
+ if(state === 0){
|
|
|
+ addIngredients.style.display = "flex";
|
|
|
+ newIngredients.style.display = "none";
|
|
|
+ populateIngredients();
|
|
|
+ }else if(state === 1){
|
|
|
+ collectIngredients();
|
|
|
+ addIngredients.style.display = "none";
|
|
|
+ newIngredients.style.display = "flex";
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- let add = document.createElement("td");
|
|
|
- let checkbox = document.createElement("input");
|
|
|
- checkbox.type = "checkbox";
|
|
|
- add.appendChild(checkbox);
|
|
|
- row.appendChild(add);
|
|
|
+let populateIngredients = ()=>{
|
|
|
+ let table = document.querySelector("#ingredient-display");
|
|
|
+ console.log(ingredients);
|
|
|
|
|
|
- let name = document.createElement("td");
|
|
|
+ for(let ingredient of ingredients){
|
|
|
+ let row = document.createElement("tr");
|
|
|
+ row.id = ingredient._id;
|
|
|
|
|
|
- name.innerText = ingredient.name;
|
|
|
- row.appendChild(name);
|
|
|
-
|
|
|
- let category = document.createElement("td");
|
|
|
- category.innerText = ingredient.category;
|
|
|
- row.appendChild(category);
|
|
|
-
|
|
|
- let quantity = document.createElement("td");
|
|
|
- let quantityInput = document.createElement("input");
|
|
|
- quantityInput.type = "number";
|
|
|
- quantityInput.step = "0.01";
|
|
|
- quantityInput.min = "0";
|
|
|
- quantity.appendChild(quantityInput);
|
|
|
- row.appendChild(quantity);
|
|
|
-
|
|
|
- let unit = document.createElement("td");
|
|
|
- unit.innerText = ingredient.unitType;
|
|
|
- row.appendChild(unit);
|
|
|
-
|
|
|
- let idField = document.createElement("input");
|
|
|
- console.log(ingredient);
|
|
|
- idField.type = "hidden";
|
|
|
- idField.value = ingredient._id;
|
|
|
-
|
|
|
- table.appendChild(row);
|
|
|
- existingIngredients.push(row);
|
|
|
+ let add = document.createElement("td");
|
|
|
+ let checkbox = document.createElement("input");
|
|
|
+ checkbox.type = "checkbox";
|
|
|
+ add.appendChild(checkbox);
|
|
|
+ row.appendChild(add);
|
|
|
+
|
|
|
+ let name = document.createElement("td");
|
|
|
+
|
|
|
+ name.innerText = ingredient.name;
|
|
|
+ row.appendChild(name);
|
|
|
+
|
|
|
+ let category = document.createElement("td");
|
|
|
+ category.innerText = ingredient.category;
|
|
|
+ row.appendChild(category);
|
|
|
+
|
|
|
+ let quantity = document.createElement("td");
|
|
|
+ let quantityInput = document.createElement("input");
|
|
|
+ quantityInput.type = "number";
|
|
|
+ quantityInput.step = "0.01";
|
|
|
+ quantityInput.min = "0";
|
|
|
+ quantity.appendChild(quantityInput);
|
|
|
+ row.appendChild(quantity);
|
|
|
+
|
|
|
+ let unit = document.createElement("td");
|
|
|
+ unit.innerText = ingredient.unitType;
|
|
|
+ row.appendChild(unit);
|
|
|
+
|
|
|
+ let idField = document.createElement("input");
|
|
|
+ idField.type = "hidden";
|
|
|
+ idField.value = ingredient._id;
|
|
|
+
|
|
|
+ table.appendChild(row);
|
|
|
+ existingIngredientElements.push(row);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-//Gather all data from both forms and submit
|
|
|
-let subData = ()=>{
|
|
|
- data.existing = [];
|
|
|
- for(let ingredient of existingIngredients){
|
|
|
+let collectIngredients = ()=>{
|
|
|
+ let selectedIngredients = []
|
|
|
+ for(let ingredient of existingIngredientElements){
|
|
|
if(ingredient.childNodes[0].firstChild.checked){
|
|
|
- data.existing.push(ingredient.id);
|
|
|
+ selectedIngredients.push(ingredient.id);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- table.style.display = "none";
|
|
|
- createDiv.style.display = "block";
|
|
|
+ data.existing = selectedIngredients;
|
|
|
}
|
|
|
|
|
|
-//Add a field for inputing a new ingredient
|
|
|
-let addField = ()=>{
|
|
|
+let newIngredientField = ()=>{
|
|
|
let ingredient = document.createElement("div");
|
|
|
ingredient.classList += "input-new";
|
|
|
|
|
|
@@ -85,5 +96,7 @@ let addField = ()=>{
|
|
|
ingredient.appendChild(unit);
|
|
|
|
|
|
div.appendChild(ingredient);
|
|
|
- newIngredients.push(ingredient);
|
|
|
-}
|
|
|
+ newIngredientElements.push(ingredient);
|
|
|
+}
|
|
|
+
|
|
|
+updateState(0);
|
Lee Morgan