alu/cse110-fa22-group29
1
0
Fork 0
mirror of https://github.com/cse110-fa22-group29/cse110-fa22-group29.git synced 2024-12-28 01:39:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

reviewDetails+Update+Delete

Browse Source
This commit is contained in:
Kara Hoagland 2022-11-12 14:16:03 -08:00
parent d72e8ea601
commit 17bea4c21c
6 changed files with 419 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
CreatePage.html Normal file
View File

@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Food Journal</title>
<!-- Recipe Card Custom Element -->
<script src="/source/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" /> -->
<link rel="stylesheet" href="./static/ReviewCard.css" />
<script src="/source/assets/scripts/main.js" type="module"></script>
</head>
<body>
<form id="new-food-entry">
<fieldset>
<legend>Pic:</legend>
<label for="mealImage">
Source:
<input type="text" id="mealImg" name="mealImg">
</label>
<label for="image-alt">
Alt Text:
<input type="text" id="imgAlt" name="imgAlt">
</label>
</fieldset>
<fieldset>
<legend> Meal: </legend>
<label for="Meal: ">Meal:
<input type="text" id="mealName" name="mealName" required>
</label>
<label for="comments">Comments:
<br>
<textarea name="comments" id="comments"></textarea>
</label>
</fieldset>
<fieldset>
<legend>Rating</legend>
<label for="rating-0">
0<input type="radio" id="rating-0" value="0" name="rating" required>
</label>
<label for="rating-1">
1<input type="radio" id="rating-1" value="1" name="rating">
</label>
<label for="rating-2">
2<input type="radio" id="rating-2" value="2" name="rating">
</label>
<label for="rating-3">
3<input type="radio" id="rating-3" value="3" name="rating">
</label>
<label for="rating-4">
4<input type="radio" id="rating-4" value="4" name="rating">
</label>
<label for="rating-5">
5<input type="radio" id="rating-5" value="5" name="rating">
</label>
</fieldset>
<fieldset>
<legend>Other Info:</legend>
<label for="restaurant">
Restaurant:
<input type="text" id="restaurant" name="restaurant" required>
</label>
<label for="tag-form">
Tags:
<input type="text" id="tag-form" name="tag-form">
<div class='tag-container' id="tag-container-form">
</div>
<button type="button" id="tagAdd">Add Tag</button>
</label>
</fieldset>
<button type="submit" value="Submit">Add Review</button>
<button type="button" class="danger">Clear Review Journal</button>
</form>
</body>
</html>

89
ReviewDetails.html Normal file
View File

@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Food Journal</title>
<!-- Recipe Card Custom Element -->
<script src="/source/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" /> -->
<link rel="stylesheet" href="./static/ReviewCard.css" />
<script src="/source/assets/scripts/ReviewDetails.js" type="module"></script>
</head>
<body>
<main>
<button type="button" id="update">Update</button>
<button type="button" id="delete" class="danger">Delete</button>
</main>
<!----> <form id="update-food-entry" class="hidden">
<fieldset>
<legend>Pic:</legend>
<label for="mealImage">
Source:
<input type="text" id="mealImg" name="mealImg">
</label>
<label for="image-alt">
Alt Text:
<input type="text" id="imgAlt" name="imgAlt">
</label>
</fieldset>
<fieldset>
<legend> Meal: </legend>
<label for="Meal: ">Meal:
<input type="text" id="mealName" name="mealName" required>
</label>
<label for="comments">Comments:
<br>
<textarea name="comments" id="comments"></textarea>
</label>
</fieldset>
<fieldset>
<legend>Rating</legend>
<label for="rating-0">
0<input type="radio" id="rating-0" value="0" name="rating" required>
</label>
<label for="rating-1">
1<input type="radio" id="rating-1" value="1" name="rating">
</label>
<label for="rating-2">
2<input type="radio" id="rating-2" value="2" name="rating">
</label>
<label for="rating-3">
3<input type="radio" id="rating-3" value="3" name="rating">
</label>
<label for="rating-4">
4<input type="radio" id="rating-4" value="4" name="rating">
</label>
<label for="rating-5">
5<input type="radio" id="rating-5" value="5" name="rating">
</label>
</fieldset>
<fieldset>
<legend>Other Info:</legend>
<label for="restaurant">
Restaurant:
<input type="text" id="restaurant" name="restaurant" required>
</label>
<label for="tag-form">
Tags:
<input type="text" id="tag-form" name="tag-form">
<div class='tag-container' id="tag-container-form">
</div>
<button type="button" id="tagAdd">Add Tag</button>
</label>
</fieldset>
<button type="submit" value="Submit">Add Review</button>
</form>
</body>
</html>

15
index.html
View File

@ -22,12 +22,13 @@
<main> <main>
<!-- Add Food Entries Here --> <!-- Add Food Entries Here -->
</main> </main>
<form id="new-food-entry"> <button type="button" id="create">CREATE</button>
<!----> <form id="new-food-entry">
<fieldset> <fieldset>
<legend>Photo:</legend> <legend>Pic:</legend>
<label for="image-src"> <label for="mealImage">
Source: Source:
<input type="text" id="imgSrc" name="imgSrc"> <input type="text" id="mealImg" name="mealImg">
</label> </label>
<label for="image-alt"> <label for="image-alt">
Alt Text: Alt Text:
@ -40,7 +41,7 @@
<label for="Meal: ">Meal: <label for="Meal: ">Meal:
<input type="text" id="mealName" name="mealName" required> <input type="text" id="mealName" name="mealName" required>
</label> </label>
<label for="comments">Description: <label for="comments">Comments:
<br> <br>
<textarea name="comments" id="comments"></textarea> <textarea name="comments" id="comments"></textarea>
</label> </label>
@ -83,8 +84,8 @@
</label> </label>
</fieldset> </fieldset>
<button type="submit">Add Review</button> <button type="submit" value="Submit">Add Review</button>
<button type="button" class="danger">Clear Review Journal</button> <button type="button" class="danger">Clear Review Journal</button>
</form> </form> <!---->
</body> </body>
</html> </html>

99
source/assets/scripts/ReviewCard.js
View File

@ -85,6 +85,25 @@ class ReviewCard extends HTMLElement {
articleEl.append(styleEl); articleEl.append(styleEl);
shadowEl.append(articleEl); shadowEl.append(articleEl);
this.shadowEl = shadowEl; this.shadowEl = shadowEl;
//attach event listener to each recipe-card
this.addEventListener('click', (event) => {
console.log(event.target);
console.log(event.target.data);
//Option 1: sending current data to second html page using localStorage (could also just store index)
sessionStorage.setItem('current', JSON.stringify(event.target.data));
window.location.assign("./ReviewDetails.html");
/*
//Option 2: sending current data to second html page using string query w/ url (currently not storing value)
let reviewFields = window.location.search.slice(1).split("&");
for(let i = 0; i < reviewFields.length; i++) {
let kv = reviewFields[i].split("=");
let key = kv[0];
let value = kv[1];
console.log(key);
console.log(value);
// What you want to do with name and value...
}*/
});
} }
/** /**
@ -97,11 +116,12 @@ class ReviewCard extends HTMLElement {
* @param {Object} data - The data to pass into the <review-card>, must be of the * @param {Object} data - The data to pass into the <review-card>, must be of the
* following format: * following format:
* { * {
* "imgSrc": "string", * "comments": "string",
* "imgAlt": "string", * "imgAlt": "string",
* "mealImg": "string",
* "mealName": "string", * "mealName": "string",
* "restaurant": "string", * "restaurant": "string",
* "rating": number * "rating": number,
* "tags": string array * "tags": string array
* } * }
*/ */
@ -116,43 +136,114 @@ class ReviewCard extends HTMLElement {
//image setup //image setup
let mealImg = document.createElement('img'); let mealImg = document.createElement('img');
mealImg.setAttribute('src',data['imgSrc']); mealImg.setAttribute('id', 'a-mealImg');
mealImg.setAttribute('src',data['mealImg']);
mealImg.setAttribute('alt',data['imgAlt']); mealImg.setAttribute('alt',data['imgAlt']);
//meal name setup //meal name setup
let mealLabel = document.createElement('label'); let mealLabel = document.createElement('label');
mealLabel.setAttribute('id', 'a-mealName');
mealLabel.setAttribute('class','meal-name'); mealLabel.setAttribute('class','meal-name');
mealLabel.innerHTML = data['mealName']; mealLabel.innerHTML = data['mealName'];
//restaurant name setup
let restaurantLabel = document.createElement('label'); let restaurantLabel = document.createElement('label');
restaurantLabel.setAttribute('id', 'a-restaurant');
restaurantLabel.setAttribute('class','restaurant-name'); restaurantLabel.setAttribute('class','restaurant-name');
restaurantLabel.innerHTML = data['restaurant']; restaurantLabel.innerHTML = data['restaurant'];
//comment section setup (display set to none)
let comments = document.createElement('p');
comments.setAttribute('id', 'a-comments');
comments.style.display = 'none';
comments.innerText = data['comments'];
//other info: rating //other info: rating
let ratingDiv = document.createElement('div'); let ratingDiv = document.createElement('div');
ratingDiv.setAttribute('class', 'rating'); ratingDiv.setAttribute('class', 'rating');
let starsImg = document.createElement('img'); let starsImg = document.createElement('img');
starsImg.setAttribute('id', 'a-rating');
starsImg.setAttribute('src', './source/assets/images/icons/'+data['rating']+'-star.svg'); starsImg.setAttribute('src', './source/assets/images/icons/'+data['rating']+'-star.svg');
starsImg.setAttribute('alt', data['rating'] +' stars'); starsImg.setAttribute('alt', data['rating'] +' stars');
starsImg.setAttribute('num', data['rating']);
ratingDiv.append(starsImg); ratingDiv.append(starsImg);
//added tags //added tags
let tagContainer = document.createElement('div') let tagContainer = document.createElement('div');
tagContainer.setAttribute('class', 'tag-container'); tagContainer.setAttribute('class', 'tag-container');
tagContainer.setAttribute('id', 'a-tags');
tagContainer.setAttribute('list', data['tags']);
if(data['tags']){
for (let i = 0; i < data['tags'].length; i++) { for (let i = 0; i < data['tags'].length; i++) {
let newTag = document.createElement('label'); let newTag = document.createElement('label');
newTag.setAttribute('class','tag'); newTag.setAttribute('class','tag');
newTag.innerHTML = data['tags'][i] + " "; newTag.innerHTML = data['tags'][i] + " ";
tagContainer.append(newTag); tagContainer.append(newTag);
} }
}
articleEl.append(mealImg); articleEl.append(mealImg);
articleEl.append(mealLabel); articleEl.append(mealLabel);
articleEl.append(restaurantLabel); articleEl.append(restaurantLabel);
articleEl.append(ratingDiv); articleEl.append(ratingDiv);
articleEl.append(tagContainer); articleEl.append(tagContainer);
articleEl.append(comments);
}
/**
* Called when getting the .data property of this element.
*
* For Example:
* let reviewCard = document.createElement('review-card');
* reviewCard.data = { foo: 'bar' }
*
* @return {Object} data - The data from the <review-card>, of the
* following format:
* {
* "comments": "string",
* "imgAlt": "string",
* "mealImg": "string",
* "mealName": "string",
* "restaurant": "string",
* "rating": number,
* "tags": string array
* }
*/
get data() {
let dataContainer = {};
// getting the article elements for the review card
//get image
let mealImg = this.shadowEl.getElementById('a-mealImg');
dataContainer['mealImg'] = mealImg.getAttribute('src');
dataContainer['imgAlt'] = mealImg.getAttribute('alt');
//get meal name
let mealLabel = this.shadowEl.getElementById('a-mealName');
dataContainer['mealName'] = mealLabel.innerHTML;
//get comment section
let comments = this.shadowEl.getElementById('a-comments');
console.log(comments);
dataContainer['comments'] = comments.innerText;
//get other info: rating
let starsImg = this.shadowEl.getElementById('a-rating');
dataContainer['rating'] = starsImg.getAttribute('num');
//get restaurant name
let restaurantLabel = this.shadowEl.getElementById('a-restaurant');
dataContainer['restaurant'] = restaurantLabel.innerHTML;
//get tags
let tagContainer = this.shadowEl.getElementById('a-tags');
dataContainer['tags'] = tagContainer.getAttribute('list').split(",");
return dataContainer;
} }
} }
customElements.define('review-card', ReviewCard); customElements.define('review-card', ReviewCard);

127
source/assets/scripts/ReviewDetails.js Normal file
View File

@ -0,0 +1,127 @@
//reviewDetails.js
import {getReviewsFromStorage, saveReviewsToStorage} from './localStorage.js';
// Run the init() function when the page has loaded
window.addEventListener('DOMContentLoaded', init);
function init(){
let main = document.querySelector('main');
let reviews = getReviewsFromStorage();
setupDelete();
setupUpdate();
}
function setupDelete(){
let deleteBtn = document.getElementById('delete');
let reviews = getReviewsFromStorage();
let current = JSON.parse(sessionStorage.getItem('current'));
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;
}
};
}
}
});
}
function setupUpdate(){
let updateBtn = document.getElementById('update');
let reviews = getReviewsFromStorage();
let current = JSON.parse(sessionStorage.getItem('current'));
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'];
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);
}
}
//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]);
}
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;
}
};
form.style.display = 'none';
});
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 = '';
}
});
}
});
}

13
source/assets/scripts/main.js
View File

@ -18,13 +18,9 @@ function init() {
*/ */
function addReviewsToDocument(reviews) { function addReviewsToDocument(reviews) {
let mainEl = document.querySelector('main'); let mainEl = document.querySelector('main');
reviews.forEach(review=> { reviews.forEach(review => {
let newReview = document.createElement('review-card'); let newReview = document.createElement('review-card');
newReview.data = review; newReview.data = review;
newReview.addEventListener('click', function(){
//TODO: create a separate file for specs - frontend
var newWin = window.open('about:blank','_self');
});
//TODO: want to append it to whatever the box is in layout //TODO: want to append it to whatever the box is in layout
mainEl.append(newReview); mainEl.append(newReview);
}); });
@ -36,6 +32,13 @@ function addReviewsToDocument(reviews) {
* <button>. * <button>.
*/ */
function initFormHandler() { function initFormHandler() {
//btn to create form (could be its own function?)
let createBtn = document.getElementById('create');
createBtn.addEventListener('click', function(){
window.location.assign('./CreatePage.html');
});
//accessing form components //accessing form components
let tagContainer = document.getElementById('tag-container-form'); let tagContainer = document.getElementById('tag-container-form');
let form = document.querySelector('form'); let form = document.querySelector('form');