From dd54b51a9d208f6f1efa1d65fc991edbb686e755 Mon Sep 17 00:00:00 2001
From: Tommy Gomez <tomgom@google.com>
Date: Wed, 5 Aug 2020 02:27:44 +0000
Subject: [PATCH] link recipe.html and create-recipe-blank

---
 src/main/webapp/create-recipe-blank.html |  2 +-
 src/main/webapp/recipe.html              |  3 +-
 src/main/webapp/script.js                | 53 ++++++++++--------------
 3 files changed, 25 insertions(+), 33 deletions(-)
diff --git a/src/main/webapp/create-recipe-blank.html b/src/main/webapp/create-recipe-blank.html
index 4396dad..5123e71 100644
--- a/src/main/webapp/create-recipe-blank.html
+++ b/src/main/webapp/create-recipe-blank.html
@@ -36,7 +36,7 @@
     <title>shef</title>
   </head>
 
-  <body class="page-container" onload="protectPage(); navBarSetup(); getRecipeImageUploadUrl();">
+  <body class="page-container" onload="protectPage(); navBarSetup(); getRecipeImageUploadUrl(); getOriginalRecipe();">
     <template>
       <span>
         <svg class="bi bi-plus-circle bootstrap-icon" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
diff --git a/src/main/webapp/recipe.html b/src/main/webapp/recipe.html
index da40da1..6a3946b 100644
--- a/src/main/webapp/recipe.html
+++ b/src/main/webapp/recipe.html
@@ -47,6 +47,7 @@
       });
     </script>
 
+    <button type="button" onclick="spinOff()">Create a Spin-Off!</button>
     <div class="jumbotron text-center">
       <!-- Modal -->
       <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
@@ -82,7 +83,7 @@ <h5 class="modal-title" id="exampleModalLongTitle">Share</h5>
           </div>
         </div>
       </div>
-      <img src="assets/images/strawberry_sc.jpg" class="feed-img-prof" alt="...">
+      <img src="assets/images/strawberry_sc.jpg" id="recipe-image" class="feed-img-prof" alt="...">
       <div class="small-sep">
         <h2 id="recipe-title"></h2>
         <p id="recipe-author"></p>
diff --git a/src/main/webapp/script.js b/src/main/webapp/script.js
index cd52515..efd1ebc 100644
--- a/src/main/webapp/script.js
+++ b/src/main/webapp/script.js
@@ -183,6 +183,7 @@ function getRecipeInfo() {
   fetch('/new-recipe?' + key).then(response => response.json()).then(recipe => {
     document.getElementById('recipe-title').innerHTML = recipe.name;
     document.getElementById('recipe-description').innerHTML = recipe.description;
+    document.getElementById('recipe-image').src = '/blob?blob-key=' + recipe.imageKey;
     displayTags(recipe.tags);
     displayIngredients(recipe.ingredients);
     displaySteps(recipe.steps);
@@ -202,6 +203,11 @@ function displayTags(tagsList) {
   });
 }
 
+function spinOff() {
+  var key = window.location.href.split('=')[1];
+  window.location.href = 'create-recipe-blank.html?key=' + key;
+}
+
 /** Formats and displays ingredients, with corresponding checkboxes, on the page. */
 function displayIngredients(ingredList) {
   var ingredElements = {};  // ingredElements used to dynamically name divs of class form-check small-sep, for a single ingredient.
@@ -245,7 +251,7 @@ function displaySteps(stepList) {
     // Create and format the step text.
     var stepTextElement = document.createElement("p");
     stepTextElement.class = "col-sm-10 col-md-10 col-lg-10";
-    stepTextElement.innerText = step.instruction;
+    stepTextElement.innerText = step;
 
     rowVars['stepElement' + stepCount].appendChild(stepNumElement);
     rowVars['stepElement' + stepCount].appendChild(stepTextElement);
@@ -599,11 +605,14 @@ function updateIndices(fieldName, startIndex) {
 
 /** Gets a parent recipe's data from Datastore. */
 function getOriginalRecipe() {
-  const key = document.getElementById('key').value;
-  if (key) {
+  let key;
+  try {
+    key = window.location.href.split('=')[1];
     fetch('/new-recipe?key=' + key).then(response => response.json()).then((recipe) => {
       populateRecipeCreationForm(recipe);
     });
+  } catch(err) {
+    return;
   }
 }
 
@@ -615,7 +624,7 @@ function populateRecipeCreationForm(recipe) {
   document.getElementById('servingsInput').value = recipe.servings;
   document.getElementById('recipe-image').src = '/blob?blob-key=' + recipe.imageKey;
   populateFormField('Tag', recipe.tags);
-  populateIngredients(recipe.ingredients);
+  populateFormField('Ingredient', recipe.ingredients);
   populateFormField('Equipment', recipe.equipment);
   populateFormField('Step', recipe.steps);
 }
@@ -624,35 +633,17 @@ function populateRecipeCreationForm(recipe) {
 function populateFormField(fieldName, data) {
   for (var i = 0; i < data.length; i++) {
     var parameter = document.getElementById(fieldName + i);
-    if (parameter !== null) {
-      parameter.text = getText(data[i]);
-    } else {
-      var newParameter = createParameterInput(fieldName, i);
-      newParameter.text = getText(data[i]);
-      appendParameterInput(fieldName + 's', newParameter);
-    }
-  }
-}
-
-function populateIngredients(data) {
-  for (var i = 0; i < data.length; i++) {
-    var parameter = document.getElementById('Ingredient' + i);
     if (!parameter) {
-      var parameter = createIngredientInput('Ingredient', i);
+      parameter = fieldName == 'Ingredient' ? createIngredientInput(fieldName, i) : createParameterInput(fieldName, i);
     }
-    parameter.amount = data[i].amount;
-    parameter.unit = data[i].unit;
-    parameter.text = data[i].name;
-    appendParameterInput('Ingredients', parameter);
-  }
-}
-
-/** Gets the text of a tag, ingredient, or step. */
-function getText(data) {
-  if (typeof data == 'string') {
-    return data;
-  } else {
-    return data.instruction;
+    if (fieldName == 'Ingredient') {
+      parameter.amount = data[i].amount;
+      parameter.unit = data[i].unit;
+      parameter.text = data[i].name;
+    } else {
+      parameter.text = data[i];
+    }
+    appendParameterInput(fieldName + 's', parameter);
   }
 }
 
