From 416d26658d11ed7886eb4582a96dd81e4a96e870 Mon Sep 17 00:00:00 2001
From: Henry Feng <henryfeng21@gmail.com>
Date: Thu, 17 Nov 2022 16:17:51 -0800
Subject: [PATCH 1/3] implementation of basic image local storage

---
 source/assets/scripts/main.js | 42 +++++++++++++++++++++++++++++++++++
 source/index.html             | 11 +++++----
 2 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/source/assets/scripts/main.js b/source/assets/scripts/main.js
index 9d37c44..5fb44a4 100644
--- a/source/assets/scripts/main.js
+++ b/source/assets/scripts/main.js
@@ -43,6 +43,44 @@ function initFormHandler() {
 	//accessing form components
 	let tagContainer = document.getElementById("tag-container-form");
 	let form = document.querySelector("form");
+
+	/*
+	* change the input source of the image between local file and URL 
+	* depending on user's selection
+	*/
+	let select = document.getElementById("select");
+	select.addEventListener("change", function() {
+		const input = document.getElementById('source');
+	
+		if (select.value == "file") {
+		  input.innerHTML = `
+		  Source:
+		  <input type="file" id="mealImg" name="mealImg">
+		  `
+		}
+		else {
+		  input.innerHTML = `
+		  Source:
+		  <input type="text" id="mealImg" name="mealImg">
+		  `
+		}
+	});
+
+	//addressing sourcing image from local file
+	let imgDataURL = "";
+	document.getElementById("mealImg").addEventListener("change", function() {
+		const reader = new FileReader();
+		
+		//store image data URL after successful image load
+		reader.addEventListener("load", ()=>{
+			imgDataURL = reader.result;
+		}, false);
+		
+		//convert image file into data URL for local storage
+		reader.readAsDataURL(document.getElementById("mealImg").files[0]);
+	})
+
+
   
 	form.addEventListener("submit", function(){
 	/*
@@ -51,12 +89,16 @@ function initFormHandler() {
     */
 		let formData = new FormData(form);
 		let reviewObject = {};
+
 		for (let [key, value] of formData) {
 			console.log(`${key}`);
 			console.log(`${value}`);
 			if (`${key}` !== "tag-form") {
 				reviewObject[`${key}`] = `${value}`;
 			}
+			if (`${key}` === "mealImg" && select.value == "file") {
+				reviewObject["mealImg"] = imgDataURL;
+			}
 		}
 		reviewObject["tags"] = [];
 
diff --git a/source/index.html b/source/index.html
index 4418ea0..7708cb0 100644
--- a/source/index.html
+++ b/source/index.html
@@ -10,7 +10,6 @@
   <!-- Recipe Card Custom Element -->
   <script src="assets/scripts/ReviewCard.js" type="module"></script>
 
-
   <!-- Main Stylesheets & Scripts --> 
   <!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config-->
   <!-- <link rel="stylesheet" href="/static/reset.css" /> -->
@@ -26,9 +25,14 @@
   <!----> <form id="new-food-entry">
     <fieldset>
       <legend>Pic:</legend>
-      <label for="mealImage">
+      Choose Input type:
+      <select id="select" name="select">
+        <option value="file">File Upload</option>
+        <option value="url">From an URL</option>
+      </select>
+      <label for="mealImage" id="source">
         Source:
-        <input type="text" id="mealImg" name="mealImg">
+        <input type="file" id="mealImg" name="mealImg">
       </label>
       <label for="image-alt">
         Alt Text:
@@ -36,7 +40,6 @@
       </label>
     </fieldset>
     <fieldset>
-
       <legend> Meal: </legend>
       <label for="Meal: ">Meal:
         <input type="text" id="mealName" name="mealName" required>

From f340f3ed8234c01bba0e3e40c4da7356b40f875b Mon Sep 17 00:00:00 2001
From: Henry Feng <henryfeng21@gmail.com>
Date: Sun, 20 Nov 2022 13:51:28 -0800
Subject: [PATCH 2/3] Added local img storage to updating

---
 source/ReviewDetails.html              |  9 ++++--
 source/assets/scripts/ReviewDetails.js | 42 ++++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/source/ReviewDetails.html b/source/ReviewDetails.html
index 8c457aa..609af99 100644
--- a/source/ReviewDetails.html
+++ b/source/ReviewDetails.html
@@ -26,9 +26,14 @@
     <!----> <form id="update-food-entry" class="hidden">
       <fieldset>
         <legend>Pic:</legend>
-        <label for="mealImage">
+        Choose Input type:
+        <select id="select" name="select">
+          <option value="file">File Upload</option>
+          <option value="url">From an URL</option>
+        </select>
+        <label for="mealImage" id="source">
           Source:
-          <input type="text" id="mealImg" name="mealImg">
+          <input type="file" accept="image/*" id="mealImg" name="mealImg">
         </label>
         <label for="image-alt">
           Alt Text:
diff --git a/source/assets/scripts/ReviewDetails.js b/source/assets/scripts/ReviewDetails.js
index 2f560f7..5a8f725 100644
--- a/source/assets/scripts/ReviewDetails.js
+++ b/source/assets/scripts/ReviewDetails.js
@@ -55,6 +55,45 @@ function setupUpdate(){
 				tagContainer.append(newTag);
 			}
 		}
+
+		/*
+		* change the input source of the image between local file and URL 
+		* depending on user's selection
+		*/
+		let select = document.getElementById("select");
+		select.addEventListener("change", function() {
+			const input = document.getElementById('source');
+		
+			if (select.value == "file") {
+			input.innerHTML = `
+			Source:
+			<input type="file" accept="image/*" id="mealImg" name="mealImg">
+			`
+			}
+			//TODO: change to photo taking for sprint 3
+			else {
+			input.innerHTML = `
+			Source:
+			<input type="text" id="mealImg" name="mealImg">
+			`
+			}
+		});
+
+		//addressing sourcing image from local file
+		let imgDataURL = "";
+		document.getElementById("mealImg").addEventListener("change", function() {
+			const reader = new FileReader();
+			
+			//store image data URL after successful image load
+			reader.addEventListener("load", ()=>{
+				imgDataURL = reader.result;
+			}, false);
+			
+			//convert image file into data URL for local storage
+			reader.readAsDataURL(document.getElementById("mealImg").files[0]);
+		})
+
+		
 		//Take formdata values as newData when submit
 		form.addEventListener("submit", function(){
 			/*
@@ -69,6 +108,9 @@ function setupUpdate(){
 				if (`${key}` !== "tag-form") {
 					newData[`${key}`] = `${value}`;
 				}
+				if (`${key}` === "mealImg" && select.value == "file") {
+					newData["mealImg"] = imgDataURL;
+				}
 			}
 			newData["tags"] = [];
 		

From 3c7b5f7f4ee66c88312fd0d60103e9cb6a62cb24 Mon Sep 17 00:00:00 2001
From: Henry Feng <henryfeng21@gmail.com>
Date: Sun, 20 Nov 2022 14:27:24 -0800
Subject: [PATCH 3/3] addresses case where image is not updated

---
 source/assets/scripts/ReviewDetails.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/source/assets/scripts/ReviewDetails.js b/source/assets/scripts/ReviewDetails.js
index 5a8f725..60cb614 100644
--- a/source/assets/scripts/ReviewDetails.js
+++ b/source/assets/scripts/ReviewDetails.js
@@ -82,6 +82,7 @@ function setupUpdate(){
 		//addressing sourcing image from local file
 		let imgDataURL = "";
 		document.getElementById("mealImg").addEventListener("change", function() {
+			console.log("reading used");
 			const reader = new FileReader();
 			
 			//store image data URL after successful image load
@@ -108,7 +109,11 @@ function setupUpdate(){
 				if (`${key}` !== "tag-form") {
 					newData[`${key}`] = `${value}`;
 				}
-				if (`${key}` === "mealImg" && select.value == "file") {
+				//Account for the case where image is not updated
+				if (`${key}` === "mealImg" && document.getElementById("mealImg").value === "") {
+					newData["mealImg"] = currReview["mealImg"];
+				}
+				else if (`${key}` === "mealImg" && select.value == "file") {
 					newData["mealImg"] = imgDataURL;
 				}
 			}