diff --git a/.github/workflows/js-unittest.yml b/.github/workflows/js-unittest.yml
index 5c07e35..918ce70 100644
--- a/.github/workflows/js-unittest.yml
+++ b/.github/workflows/js-unittest.yml
@@ -24,6 +24,6 @@ jobs:
- name: Install dependencies
run: sudo npm install
- name: Start local http server
- run: sudo npm run http-server
+ run: sudo npm run http-server &
- name: Run tests
run: sudo npm test
\ No newline at end of file
diff --git a/source/CreatePage.html b/source/CreatePage.html
index 64dfe78..bc37e7a 100644
--- a/source/CreatePage.html
+++ b/source/CreatePage.html
@@ -14,12 +14,13 @@
-
-
+
+
+
diff --git a/source/ReviewDetails.html b/source/ReviewDetails.html
index 74b6365..c790b4e 100644
--- a/source/ReviewDetails.html
+++ b/source/ReviewDetails.html
@@ -19,6 +19,7 @@
+
diff --git a/source/assets/scripts/CreatePage.js b/source/assets/scripts/CreatePage.js
new file mode 100644
index 0000000..c5c641f
--- /dev/null
+++ b/source/assets/scripts/CreatePage.js
@@ -0,0 +1,66 @@
+import { newReviewToStorage } from "./localStorage.js";
+
+window.addEventListener("DOMContentLoaded", init);
+
+function init() {
+ // get next id
+
+ // creates the key
+ initFormHandler();
+
+}
+
+function initFormHandler() {
+
+ //accessing form components
+ let tagContainer = document.getElementById("tag-container-form");
+ let form = document.querySelector("form");
+
+ form.addEventListener("submit", function(e){
+ /*
+ * User submits the form for their review.
+ * We create reviewCard and put in storage
+ */
+ e.preventDefault();
+ 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}`;
+ }
+ }
+ reviewObject["tags"] = [];
+
+ let tags = document.querySelectorAll(".tag");
+ for(let i = 0; i < tags.length; i ++) {
+ reviewObject["tags"].push(tags[i].innerHTML);
+ tagContainer.removeChild(tags[i]);
+ }
+
+ let nextReviewId = newReviewToStorage(reviewObject);
+ sessionStorage.setItem("currID", JSON.stringify(nextReviewId));
+
+ window.location.assign("./ReviewDetails.html");
+
+ });
+
+ let tagAddBtn = document.getElementById("tagAdd");
+ tagAddBtn.addEventListener("click", ()=> {
+ let tagField = document.getElementById("tag-form");
+ if (tagField.value.length > 0) {
+ let tagLabel = document.createElement("label");
+ tagLabel.innerHTML = tagField.value;
+ tagLabel.setAttribute("class","tag");
+ tagLabel.addEventListener("click",()=> {
+ tagContainer.removeChild(tagLabel);
+ });
+
+ tagContainer.append(tagLabel);
+ tagField.value = "";
+
+ }
+ });
+
+}
diff --git a/source/assets/scripts/ReviewCard.js b/source/assets/scripts/ReviewCard.js
index 07df6a6..70a0660 100644
--- a/source/assets/scripts/ReviewCard.js
+++ b/source/assets/scripts/ReviewCard.js
@@ -6,7 +6,6 @@ class ReviewCard extends HTMLElement {
constructor() {
super();
-
let shadowEl = this.attachShadow({mode:"open"});
let articleEl = document.createElement("article");
@@ -88,9 +87,9 @@ class ReviewCard extends HTMLElement {
//attach event listener to each recipe-card
this.addEventListener("click", (event) => {
console.log(event.target);
- console.log(event.target.data);
+ console.log(event.target.reviewId);
//Option 1: sending current data to second html page using localStorage (could also just store index)
- sessionStorage.setItem("current", JSON.stringify(event.target.data));
+ sessionStorage.setItem("currID", JSON.stringify(event.target.data.reviewID));
window.location.assign("./ReviewDetails.html");
/*
//Option 2: sending current data to second html page using string query w/ url (currently not storing value)
@@ -133,12 +132,18 @@ class ReviewCard extends HTMLElement {
let articleEl = this.shadowEl.querySelector("article");
// setting the article elements for the review card
+ this.reviewID = data["reviewID"];
//image setup
let mealImg = document.createElement("img");
mealImg.setAttribute("id", "a-mealImg");
- mealImg.setAttribute("src",data["mealImg"]);
mealImg.setAttribute("alt",data["imgAlt"]);
+ if(data["mealImg"] != ""){
+ mealImg.setAttribute("src",data["mealImg"]);
+ }
+ else{
+ mealImg.setAttribute("src", "./assets/images/icons/plate_with_cutlery.png");
+ }
//meal name setup
let mealLabel = document.createElement("label");
@@ -147,26 +152,6 @@ class ReviewCard extends HTMLElement {
mealLabel.innerHTML = data["mealName"];
//restaurant name setup
- /*
- //review page link
- //giving it functionality to save the review card's info to session storage for loading the review page
- let reviewLink = document.createElement('a');
- reviewLink.setAttribute('href','./review.html')
- reviewLink.innerHTML = 'review page'
- reviewLink.addEventListener('click', () => {
- sessionStorage.clear();
- let currReview = {
- "imgSrc": data['imgSrc'],
- "imgAlt": data['imgAlt'],
- "mealName": data['mealName'],
- "restaurant": data['restaurant'],
- "comments": data['comments'],
- "rating": data['rating'],
- "tags": data['tags']
- }
- sessionStorage.setItem('currReview', JSON.stringify(currReview));
- });
-*/
let restaurantLabel = document.createElement("label");
restaurantLabel.setAttribute("id", "a-restaurant");
restaurantLabel.setAttribute("class","restaurant-name");
@@ -197,14 +182,15 @@ class ReviewCard extends HTMLElement {
for (let i = 0; i < data["tags"].length; i++) {
let newTag = document.createElement("label");
newTag.setAttribute("class","tag");
- newTag.innerHTML = data["tags"][i] + " ";
+ newTag.innerHTML = data["tags"][i];
tagContainer.append(newTag);
}
}
+ //adding final ID to data!
+
articleEl.append(mealImg);
articleEl.append(mealLabel);
- //articleEl.append(reviewLink)
articleEl.append(restaurantLabel);
articleEl.append(ratingDiv);
articleEl.append(tagContainer);
@@ -237,6 +223,7 @@ class ReviewCard extends HTMLElement {
let dataContainer = {};
// getting the article elements for the review card
+ dataContainer["reviewID"] = this.reviewID;
//get image
let mealImg = this.shadowEl.getElementById("a-mealImg");
diff --git a/source/assets/scripts/ReviewDetails.js b/source/assets/scripts/ReviewDetails.js
index 8447ebe..2f560f7 100644
--- a/source/assets/scripts/ReviewDetails.js
+++ b/source/assets/scripts/ReviewDetails.js
@@ -1,5 +1,5 @@
//reviewDetails.js
-import {getReviewsFromStorage, saveReviewsToStorage} from "./localStorage.js";
+import {deleteReviewFromStorage, getReviewFromStorage, updateReviewToStorage} from "./localStorage.js";
// Run the init() function when the page has loaded
window.addEventListener("DOMContentLoaded", init);
@@ -11,114 +11,95 @@ function init(){
function setupDelete(){
let deleteBtn = document.getElementById("delete-btn");
- let reviews = getReviewsFromStorage();
- let current = JSON.parse(sessionStorage.getItem("current"));
+ let currID = JSON.parse(sessionStorage.getItem("currID"));
deleteBtn.addEventListener("click", function(){
if(window.confirm("Are you sure you want to delete this entry?")){
- //delete function
- if(current){
- console.log(current);
- for(let i = 0; i < reviews.length; i++){
- console.log(reviews[i]);
- if(reviews[i]["mealName"] == current["mealName"] && reviews[i]["restaurant"] == current["restaurant"]){
- console.log("match found");
- reviews.splice(i,1);
- saveReviewsToStorage(reviews);
- sessionStorage.removeItem("current");
- window.location.assign("./index.html");
- break;
- }
- }
- }
+ deleteReviewFromStorage(currID);
+ sessionStorage.removeItem("currID");
+ window.location.assign("./index.html");
}
});
}
function setupUpdate(){
let updateBtn = document.getElementById("update-btn");
- let reviews = getReviewsFromStorage();
- let current = JSON.parse(sessionStorage.getItem("current"));
+ let currID = JSON.parse(sessionStorage.getItem("currID"));
+ let currReview = getReviewFromStorage(currID);
let form = document.getElementById("update-food-entry");
updateBtn.addEventListener("click", function(){
//update function
- if(current){
- console.log(current);
- form.style.display = "block";
- let tagContainer = document.getElementById("tag-container-form");
- console.log(document.querySelectorAll("#update-food-entry input"));
- //Set value of each input element to current's values
- document.getElementById("mealImg").defaultValue = current["mealImg"];
- document.getElementById("imgAlt").defaultValue = current["imgAlt"];
- document.getElementById("mealName").defaultValue = current["mealName"];
- document.getElementById("comments").textContent = current["comments"];
- document.getElementById("rating-" + `${current["rating"]}`).checked = true;
- document.getElementById("restaurant").defaultValue = current["restaurant"];
+ //form.style.display = "block";
+ form.classList.remove("hidden");
+ let tagContainer = document.getElementById("tag-container-form");
- if(current["tags"]){
- for (let i = 0; i < current["tags"].length; i++) {
- let newTag = document.createElement("label");
- newTag.setAttribute("class","tag");
- newTag.innerHTML = current["tags"][i] + " ";
- newTag.addEventListener("click",()=> {
- tagContainer.removeChild(newTag);
- });
- tagContainer.append(newTag);
+ //Set value of each input element to current's values
+ document.getElementById("mealImg").defaultValue = currReview["mealImg"];
+ document.getElementById("imgAlt").defaultValue = currReview["imgAlt"];
+ 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"];
+
+ if(currReview["tags"]){
+ while (tagContainer.firstChild) {
+ tagContainer.removeChild(tagContainer.firstChild);
+ }
+ for (let i = 0; i < currReview["tags"].length; i++) {
+ let newTag = document.createElement("label");
+ newTag.setAttribute("class","tag");
+ newTag.innerHTML = currReview["tags"][i];
+ newTag.addEventListener("click",()=> {
+ tagContainer.removeChild(newTag);
+ });
+ tagContainer.append(newTag);
+ }
+ }
+ //Take formdata values as newData when submit
+ form.addEventListener("submit", function(){
+ /*
+ * User submits the form for their review.
+ * We create reviewCard and put in storage
+ */
+ let formData = new FormData(form);
+ let newData = {};
+ for (let [key, value] of formData) {
+ console.log(`${key}`);
+ console.log(`${value}`);
+ if (`${key}` !== "tag-form") {
+ newData[`${key}`] = `${value}`;
}
}
- //Take formdata values as newData when submit
- form.addEventListener("submit", function(){
- /*
- * User submits the form for their review.
- * We create reviewCard and put in storage
- */
- let formData = new FormData(form);
- let newData = {};
- for (let [key, value] of formData) {
- console.log(`${key}`);
- console.log(`${value}`);
- if (`${key}` !== "tag-form") {
- newData[`${key}`] = `${value}`;
- }
- }
- 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["tags"] = [];
+
+ let tags = document.querySelectorAll(".tag");
+ for(let i = 0; i < tags.length; i ++) {
+ newData["tags"].push(tags[i].innerHTML);
+ tagContainer.removeChild(tags[i]);
+ }
- for(let i = 0; i < reviews.length; i++){
- console.log(reviews[i]);
- if(reviews[i]["mealName"] == current["mealName"] && reviews[i]["restaurant"] == current["restaurant"]){
- console.log("match found");
- reviews.splice(i,1,newData);
- saveReviewsToStorage(reviews);
- sessionStorage.setItem("current", JSON.stringify(newData));
- break;
- }
- }
+ newData["reviewID"] = currID;
- form.style.display = "none";
+ updateReviewToStorage(currID, newData);
- });
+ form.style.display = "none";
- let tagAddBtn = document.getElementById("tag-add-btn");
- tagAddBtn.addEventListener("click", ()=> {
- let tagField = document.getElementById("tag-form");
- if (tagField.value.length > 0) {
- let tagLabel = document.createElement("label");
- tagLabel.innerHTML = tagField.value;
- tagLabel.setAttribute("class","tag");
- tagLabel.addEventListener("click",()=> {
- tagContainer.removeChild(tagLabel);
- });
-
- tagContainer.append(tagLabel);
- tagField.value = "";
- }
- });
- }
+ });
+
+ let tagAddBtn = document.getElementById("tag-add-btn");
+ tagAddBtn.addEventListener("click", ()=> {
+ let tagField = document.getElementById("tag-form");
+ if (tagField.value.length > 0) {
+ let tagLabel = document.createElement("label");
+ tagLabel.innerHTML = tagField.value;
+ tagLabel.setAttribute("class","tag");
+ tagLabel.addEventListener("click",()=> {
+ tagContainer.removeChild(tagLabel);
+ });
+
+ tagContainer.append(tagLabel);
+ tagField.value = "";
+ }
+ });
});
}
diff --git a/source/assets/scripts/ReviewPage.js b/source/assets/scripts/ReviewPage.js
deleted file mode 100644
index 89cd440..0000000
--- a/source/assets/scripts/ReviewPage.js
+++ /dev/null
@@ -1,13 +0,0 @@
-// Run the init() function when the page has loaded
-window.addEventListener("DOMContentLoaded", init);
-
-function init() {
- let result = sessionStorage.getItem("currReview");
-
- let main = document.querySelector("main");
-
- main.innerHTML = result;
- let p = document.createElement("p");
- p.innerHTML = JSON.parse(result)["comments"];
- main.append(p);
-}
diff --git a/source/assets/scripts/localStorage.js b/source/assets/scripts/localStorage.js
index 48fc891..20be650 100644
--- a/source/assets/scripts/localStorage.js
+++ b/source/assets/scripts/localStorage.js
@@ -1,19 +1,79 @@
/**
- * @returns {Array