cse110-fa22-group29/source/assets/scripts/ReviewDetails.js

//reviewDetails.js
import { deleteReviewFromStorage, getReviewFromStorage, updateReviewToStorage } from "./localStorage.js";

// Run the init() function when the page has loaded
window.addEventListener("DOMContentLoaded", init);

/**
 * Populates the relevant data to the details from local storage review.
 */
function init() {
	setupInfo();
	setupDelete();
	setupUpdate();
}

/**
 * Populates the relevant data to the details from local storage review
 */
function setupInfo() {
	let currID = JSON.parse(sessionStorage.getItem("currID"));
	let currReview = getReviewFromStorage(currID);

	//meal image
	let mealImg = document.getElementById("d-meal-img");
	mealImg.setAttribute("src", currReview["mealImg"]);
	mealImg.addEventListener("error", function (e) {
		mealImg.setAttribute("src", "./assets/images/default_plate.png");
		e.onerror = null;
	});

	//meal name
	let mealLabel = document.getElementById("d-meal-name");
	mealLabel.innerHTML = currReview["mealName"];

	//restaurant name
	let restaurantLabel = document.getElementById("d-restaurant");
	restaurantLabel.innerHTML = currReview["restaurant"];

	//comments
	let comments = document.getElementById("d-comments");
	comments.innerText = currReview["comments"];

	//rating
	let starsImg = document.getElementById("d-rating");
	starsImg.setAttribute("src", "./assets/images/" + currReview["rating"] + "-star.svg");
	starsImg.setAttribute("alt", currReview["rating"] + " stars");

	//tags
	let tagContainer = document.getElementById("d-tags");
	if (currReview["tags"]) {
		for (let i = 0; i < currReview["tags"].length; i++) {
			let newTag = document.createElement("label");
			newTag.setAttribute("class", "d-tag");
			newTag.innerHTML = currReview["tags"][i];
			tagContainer.append(newTag);
		}
	}
}

/**
 * Sets up delete button to delete reveiw from storage and switch to homepage.
 */
function setupDelete() {
	let deleteBtn = document.getElementById("delete-btn");
	let currID = JSON.parse(sessionStorage.getItem("currID"));
	deleteBtn.addEventListener("click", function () {
		if (window.confirm("Are you sure you want to delete this entry?")) {
			deleteReviewFromStorage(currID);
			sessionStorage.removeItem("currID");
			window.location.assign("./index.html");
		}
	});
}

/**
 * Sets up update button to reveal form and update info in storage and the current page.
 */
function setupUpdate() {
	let updateBtn = document.getElementById("update-btn");
	let currID = JSON.parse(sessionStorage.getItem("currID"));
	let currReview = getReviewFromStorage(currID);
	let form = document.getElementById("new-food-entry");
	let updateDiv = document.getElementById("update-form");
	updateBtn.addEventListener("click", function () {
		//update function

		updateDiv.classList.remove("hidden");

		let tagContainer = document.getElementById("tag-container-form");

		//Set value of each input element to current's values
		document.getElementById("mealImg").defaultValue = currReview["mealImg"];
		document.getElementById("mealName").defaultValue = currReview["mealName"];
		document.getElementById("comments").textContent = currReview["comments"];
		document.getElementById("s" + `${currReview["rating"]}`).checked = true;
		document.getElementById("restaurant").defaultValue = currReview["restaurant"];

		//Set used to track tags and ensure no duplicates
		let tagSet = new Set();

		if (currReview["tags"]) {
			while (tagContainer.firstChild) {
				tagContainer.removeChild(tagContainer.firstChild);
			}

			let tagSetVal;
			for (let i = 0; i < currReview["tags"].length; i++) {
				tagSetVal = currReview["tags"][i].toLocaleLowerCase();
				tagSet.add(tagSetVal);
				let newTag = document.createElement("label");
				newTag.setAttribute("class", "tag");
				newTag.innerHTML = currReview["tags"][i];
				newTag.addEventListener("click", () => {
					tagContainer.removeChild(newTag);
					tagSet.delete(tagSetVal);
				});
				tagContainer.append(newTag);
			}
		}

		// Declaring variable storing image data url
		let imgDataURL = "";

		// Accessing components related to taking photo
		let videoMode = true;
		let player = document.getElementById("player");
		let canvas = document.getElementById("photoCanvas");
		let photoButton = document.getElementById("photoButton");
		let context = canvas.getContext("2d");

		// Event listener for the photo taking/reset button
		photoButton.addEventListener("click", () => {
			// capturing the current video frame
			if (videoMode) {
				videoMode = false;

				// setting up the appropriate components for displaying the photo preview
				photoButton.innerText = "Retake";
				player.setAttribute("hidden", "");
				canvas.removeAttribute("hidden", "");

				// displaying the captured snapshot on a canvas and saving it as a data url
				context.drawImage(player, 0, 0, canvas.width, canvas.height);
				imgDataURL = canvas.toDataURL();
			}
			// returning to displaying the video stream
			else {
				videoMode = true;

				// setting up the appropriate components for the video stream
				photoButton.innerText = "Take Photo";
				canvas.setAttribute("hidden", "");
				player.removeAttribute("hidden", "");
			}
		});

		/*
		 * change the input source of the image between local file and taking photo
		 * depending on user's selection
		 */
		let select = document.getElementById("select");
		const input = document.getElementById("mealImg");
		select.addEventListener("change", function () {
			// Select a photo with HTML file selector
			if (select.value == "file") {
				// enabling file upload components and hiding photo taking components
				input.removeAttribute("hidden", "");
				player.setAttribute("hidden", "");
				canvas.setAttribute("hidden", "");
				photoButton.setAttribute("hidden", "");

				// stopping the video stream
				player.srcObject.getVideoTracks()[0].stop();
			}

			// Take a photo
			else {
				// enabling photo taking components and hiding file upload components
				videoMode = true;
				photoButton.innerText = "Take Photo";
				input.setAttribute("hidden", "");
				player.removeAttribute("hidden", "");
				photoButton.removeAttribute("hidden", "");

				// getting video stream from user's camera then displaying it on a video element
				navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
					player.srcObject = stream;
				});
			}
		});

		//addressing sourcing image from local file
		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]);
		});

		//cancel button on update form hids form not making any changes
		let cancelBtn = document.getElementById("cancel-btn");
		cancelBtn.addEventListener("click", function(){
			updateDiv.classList.add("hidden");
		})

		//Take form data values as newData when submit
		form.addEventListener("submit", function () {
			/*
			 *  User submits the form for their review.
			 *  We create reviewCard data, replace in storage, and update tags
			 */
			let formData = new FormData(form);
			let newData = {};
			//iterate through formData and add to newData
			for (let [key, value] of formData) {
				if (`${key}` !== "tag-form") {
					newData[`${key}`] = `${value}`;
				}
				// Account for the case where image is not updated
				if (`${key}` === "mealImg" && imgDataURL === "") {
					newData["mealImg"] = currReview["mealImg"];
				} else if (`${key}` === "mealImg") {
					newData["mealImg"] = imgDataURL;
				}
			}
			newData["tags"] = [];

			let tags = document.querySelectorAll(".tag");
			for (let i = 0; i < tags.length; i++) {
				newData["tags"].push(tags[i].innerHTML);
				tagContainer.removeChild(tags[i]);
			}

			newData["reviewID"] = currID;

			updateReviewToStorage(currID, newData);

			updateDiv.classList.add("hidden");
		});

		// Adding tag to form functionality
		let tagAddBtn = document.getElementById("tag-add-btn");
		tagAddBtn.addEventListener("click", () => {
			let tagField = document.getElementById("tag-form");
			if (tagField.value.length > 0) {
				let tagSetVal = tagField.value.toLocaleLowerCase();
				if (!tagSet.has(tagSetVal)) {
					let tagLabel = document.createElement("label");
					tagLabel.innerHTML = tagField.value;
					tagLabel.setAttribute("class", "tag");
					tagSet.add(tagSetVal);
					tagLabel.addEventListener("click", () => {
						tagContainer.removeChild(tagLabel);
						tagSet.delete(tagSetVal);
					});

					tagContainer.append(tagLabel);
				} else {
					window.alert("No duplicate tags allowed");
				}
				tagField.value = "";
			}
		});
	});
}