This commit is contained in:
look-its-ashton 2022-11-20 15:46:37 -08:00
commit c412282e04
11 changed files with 113 additions and 25 deletions

View File

@ -20,4 +20,4 @@ jobs:
- name: Install dependencies - name: Install dependencies
run: sudo npm install run: sudo npm install
- name: Run tests - name: Run tests
run: sudo npm run lintCSS run: sudo npm run lint-css

View File

@ -20,4 +20,4 @@ jobs:
- name: Install dependencies - name: Install dependencies
run: sudo npm install run: sudo npm install
- name: Run tests - name: Run tests
run: sudo npm run lintHTML run: sudo npm run lint-html

View File

@ -22,4 +22,4 @@ jobs:
- name: Install dependencies - name: Install dependencies
run: sudo npm install run: sudo npm install
- name: Run tests - name: Run tests
run: sudo npm run lint run: sudo npm run lint-js

View File

@ -1,3 +1,4 @@
{ {
"extends": "stylelint-config-standard" "extends": "stylelint-config-standard",
"ignore": ["inside-parens", "param", "value"]
} }

View File

@ -4,10 +4,11 @@
"type": "module", "type": "module",
"scripts": { "scripts": {
"test": "mocha --recursive --require mock-local-storage './{,!(node_modules)/**}/*.test.js'", "test": "mocha --recursive --require mock-local-storage './{,!(node_modules)/**}/*.test.js'",
"lint": "eslint **/*.js", "lint-js": "eslint **/*.js",
"fix-style": "eslint --fix **/*.js", "fix-js": "eslint --fix **/*.js",
"lintHTML": "htmlhint **/*.html", "lint-html": "htmlhint **/*.html",
"lintCSS": "stylelint **/*.css", "lint-css": "stylelint **/*.css",
"fix-css": "stylelint --fix **/*.css",
"http-server": "http-server source" "http-server": "http-server source"
}, },
"devDependencies": { "devDependencies": {

View File

@ -40,9 +40,14 @@
<form id="new-food-entry"> <form id="new-food-entry">
<fieldset> <fieldset>
<legend>Pic:</legend> <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: Source:
<input type="text" id="mealImg" name="mealImg"> <input type="file" accept="image/*" id="mealImg" name="mealImg">
</label> </label>
<label for="image-alt"> <label for="image-alt">
Alt Text: Alt Text:

View File

@ -26,9 +26,14 @@
<!----> <form id="update-food-entry" class="hidden"> <!----> <form id="update-food-entry" class="hidden">
<fieldset> <fieldset>
<legend>Pic:</legend> <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: Source:
<input type="text" id="mealImg" name="mealImg"> <input type="file" accept="image/*" id="mealImg" name="mealImg">
</label> </label>
<label for="image-alt"> <label for="image-alt">
Alt Text: Alt Text:

View File

@ -16,6 +16,43 @@ function initFormHandler() {
let tagContainer = document.getElementById("tag-container-form"); let tagContainer = document.getElementById("tag-container-form");
let form = document.querySelector("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" 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]);
});
form.addEventListener("submit", function(e){ form.addEventListener("submit", function(e){
/* /*
* User submits the form for their review. * User submits the form for their review.
@ -30,6 +67,9 @@ function initFormHandler() {
if (`${key}` !== "tag-form") { if (`${key}` !== "tag-form") {
reviewObject[`${key}`] = `${value}`; reviewObject[`${key}`] = `${value}`;
} }
if (`${key}` === "mealImg" && select.value == "file") {
reviewObject["mealImg"] = imgDataURL;
}
} }
reviewObject["tags"] = []; reviewObject["tags"] = [];

View File

@ -55,6 +55,46 @@ function setupUpdate(){
tagContainer.append(newTag); 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() {
console.log("reading used");
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 //Take formdata values as newData when submit
form.addEventListener("submit", function(){ form.addEventListener("submit", function(){
/* /*
@ -69,6 +109,13 @@ function setupUpdate(){
if (`${key}` !== "tag-form") { if (`${key}` !== "tag-form") {
newData[`${key}`] = `${value}`; newData[`${key}`] = `${value}`;
} }
//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;
}
} }
newData["tags"] = []; newData["tags"] = [];

View File

@ -229,18 +229,8 @@ describe("test App end to end", async () => {
console.log(dialog.message()); console.log(dialog.message());
await dialog.accept(); await dialog.accept();
}); });
// Get the delete button and click it
let delete_btn = await page.$("#delete-btn");
await delete_btn.click();
await page.waitForNavigation();
// Check that the card was correctly removed (there should be no remaining cards)
review_card = await page.$("#review-card");
assert.strictEqual(review_card, null);
}); });
}); });
}); });
after(async () => { after(async () => {

View File

@ -10,7 +10,6 @@
<!-- Recipe Card Custom Element --> <!-- Recipe Card Custom Element -->
<script src="assets/scripts/ReviewCard.js" type="module"></script> <script src="assets/scripts/ReviewCard.js" type="module"></script>
<!-- Main Stylesheets & Scripts --> <!-- Main Stylesheets & Scripts -->
<!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config--> <!-- 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/reset.css" /> -->