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

273 lines
8.5 KiB
JavaScript
Raw Normal View History

2022-11-12 22:16:03 +00:00
//reviewDetails.js
import { deleteReviewFromStorage, getReviewFromStorage, updateReviewToStorage } from "./localStorage.js";
2022-11-12 22:16:03 +00:00
// Run the init() function when the page has loaded
window.addEventListener("DOMContentLoaded", init);
2022-11-12 22:16:03 +00:00
2022-11-30 00:13:58 +00:00
/**
* Populates the relevant data to the details from local storage review.
*/
function init() {
setupInfo();
setupDelete();
setupUpdate();
2022-11-12 22:16:03 +00:00
}
2022-11-27 23:48:00 +00:00
/**
* 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");
2022-11-21 20:29:06 +00:00
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);
}
}
}
2022-11-30 00:13:58 +00:00
/**
* 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);
2022-11-18 07:56:07 +00:00
sessionStorage.removeItem("currID");
window.location.assign("./index.html");
}
});
2022-11-12 22:16:03 +00:00
}
2022-11-30 00:13:58 +00:00
/**
* 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
2022-11-12 22:16:03 +00:00
updateDiv.classList.remove("hidden");
let tagContainer = document.getElementById("tag-container-form");
2022-11-12 22:16:03 +00:00
//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"];
2022-11-29 02:48:55 +00:00
//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++) {
2022-12-03 02:31:26 +00:00
tagSetVal = currReview["tags"][i].toLocaleLowerCase();
2022-11-29 22:16:17 +00:00
tagSet.add(tagSetVal);
let newTag = document.createElement("label");
newTag.setAttribute("class", "tag");
newTag.innerHTML = currReview["tags"][i];
newTag.addEventListener("click", () => {
tagContainer.removeChild(newTag);
2022-11-29 22:16:17 +00:00
tagSet.delete(tagSetVal);
});
tagContainer.append(newTag);
}
}
2022-11-30 23:59:43 +00:00
// 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");
2022-11-30 23:59:43 +00:00
// Event listener for the photo taking/reset button
photoButton.addEventListener("click", () => {
2022-11-30 23:59:43 +00:00
// capturing the current video frame
if (videoMode) {
videoMode = false;
2022-11-30 23:59:43 +00:00
// 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", "");
}
});
2022-11-20 21:51:28 +00:00
/*
* change the input source of the image between local file and taking photo
* depending on user's selection
*/
2022-11-20 21:51:28 +00:00
let select = document.getElementById("select");
2022-11-30 23:59:43 +00:00
const input = document.getElementById("mealImg");
select.addEventListener("change", function () {
2022-11-30 23:59:43 +00:00
console.log("1");
// Select a photo with HTML file selector
2022-11-20 21:51:28 +00:00
if (select.value == "file") {
2022-11-30 23:59:43 +00:00
// enabling file upload components and hiding photo taking components
input.removeAttribute("hidden", "");
player.setAttribute("hidden", "");
canvas.setAttribute("hidden", "");
photoButton.setAttribute("hidden", "");
2022-11-30 23:59:43 +00:00
// stopping the video stream
player.srcObject.getVideoTracks()[0].stop();
2022-11-20 21:51:28 +00:00
}
2022-11-30 23:59:43 +00:00
// Take a photo
2022-11-20 21:51:28 +00:00
else {
2022-11-30 23:59:43 +00:00
// enabling photo taking components and hiding file upload components
videoMode = true;
photoButton.innerText = "Take Photo";
input.setAttribute("hidden", "");
player.removeAttribute("hidden", "");
photoButton.removeAttribute("hidden", "");
2022-11-30 23:59:43 +00:00
// getting video stream from user's camera then displaying it on a video element
navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
2022-11-30 23:59:43 +00:00
player.srcObject = stream;
});
2022-11-20 21:51:28 +00:00
}
});
//addressing sourcing image from local file
document.getElementById("mealImg").addEventListener("change", function () {
console.log("reading used");
2022-11-20 21:51:28 +00:00
const reader = new FileReader();
2022-11-20 21:51:28 +00:00
//store image data URL after successful image load
reader.addEventListener(
"load",
() => {
imgDataURL = reader.result;
},
false
);
2022-11-20 21:51:28 +00:00
//convert image file into data URL for local storage
reader.readAsDataURL(document.getElementById("mealImg").files[0]);
});
2022-11-20 21:51:28 +00:00
//Take formdata 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 = {};
2022-11-27 23:48:00 +00:00
//iterate through formData and add to newData
for (let [key, value] of formData) {
console.log(`${key}`);
console.log(`${value}`);
if (`${key}` !== "tag-form") {
newData[`${key}`] = `${value}`;
}
2022-11-30 00:13:58 +00:00
// Account for the case where image is not updated
2022-11-30 23:59:43 +00:00
if (`${key}` === "mealImg" && imgDataURL === "") {
newData["mealImg"] = currReview["mealImg"];
} else if (`${key}` === "mealImg") {
2022-11-20 21:51:28 +00:00
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]);
}
2022-11-12 22:16:03 +00:00
newData["reviewID"] = currID;
updateReviewToStorage(currID, newData);
2022-11-12 22:16:03 +00:00
updateDiv.classList.add("hidden");
});
2022-11-12 22:16:03 +00:00
2022-11-30 00:13:58 +00:00
// 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) {
2022-12-03 02:31:26 +00:00
let tagSetVal = tagField.value.toLocaleLowerCase();
if (!tagSet.has(tagSetVal)) {
2022-11-29 02:48:55 +00:00
let tagLabel = document.createElement("label");
tagLabel.innerHTML = tagField.value;
tagLabel.setAttribute("class", "tag");
2022-11-29 22:16:17 +00:00
tagSet.add(tagSetVal);
tagLabel.addEventListener("click", () => {
2022-11-29 02:48:55 +00:00
tagContainer.removeChild(tagLabel);
2022-11-29 22:16:17 +00:00
tagSet.delete(tagSetVal);
2022-11-29 02:48:55 +00:00
});
2022-11-29 02:48:55 +00:00
tagContainer.append(tagLabel);
} else {
window.alert("No duplicate tags allowed");
}
tagField.value = "";
}
});
});
2022-11-12 22:16:03 +00:00
}