meal property editing tweaks

coding24seven · coding24seven · commit 881edce9611d · 2019-06-22T20:57:40.000+02:00
diff --git a/README.md b/README.md
@@ -7,6 +7,9 @@
 to watch the demo:  
 Visit: https://mums-meals.herokuapp.com
 
+to edit a meal name, date, or count:  
+Click it. Alter the text. Press enter or click out. Confirm the change.  
+
 to run on your own machine:  
 Have: node.js installed  
 Clone or download this project  
diff --git a/public-source/js/elements.js b/public-source/js/elements.js
@@ -30,17 +30,17 @@ export const mealsElement = {
   allMealBoxes: document.querySelectorAll(".meal-box"),
 
   // ALL MEAL NAMES
-  allMealNames: document.querySelectorAll(".meal-box__heading"),
+  allNames: document.querySelectorAll(".meal-box__heading"),
 
   // ALL 'DATE' KEYS
   allDateKeys: document.querySelectorAll(".date-key"),
   // ALL 'DATE' VALUES
   allDateValues: document.querySelectorAll(".date-value"),
 
   // ALL 'COUNT' KEYS
-  allHadCountKeys: document.querySelectorAll(".had-count-key"),
+  allCountKeys: document.querySelectorAll(".had-count-key"),
   // ALL 'COUNT' VALUES
-  allHadCountValues: document.querySelectorAll(".had-count-value"),
+  allCountValues: document.querySelectorAll(".count-value"),
 
   // ALL 'MEAL MADE TODAY' BUTTONS
   allTodayButtons: document.querySelectorAll(".meal-box__button")
diff --git a/public-source/js/lang/languages.js b/public-source/js/lang/languages.js
@@ -25,7 +25,7 @@ const text = {
 
   // ADD A MEAL IN THE HEADER 
   headerAddMeal: {
-    pl: "Ustawienia",
+    pl: "Opcje",
     en: "Settings"
   },
 
@@ -42,7 +42,7 @@ const text = {
   },
 
   // MESSAGE FOR THE MEAL COOKED CONFIRM POPUP
-  mealCookedConfirmMessage: {
+  mealTodayConfirmMessage: {
     pl: "Na pewno ugotowałaś? Potwierdź:",
     en: "Are you sure you made this meal today?"
   },
diff --git a/public-source/js/lang/update-language.js b/public-source/js/lang/update-language.js
@@ -16,7 +16,7 @@ export default function updateLanguage() {
   document.title = text.title[language];
 
   //. MESSAGE FOR THE MEAL-COOKED-CONFIRM ALERT POPUP
-  state.mealCookedConfirmMessage = text.mealCookedConfirmMessage[language];
+  state.mealTodayConfirmMessage = text.mealTodayConfirmMessage[language];
 
   //. THE BRAND NAME IN THE HEADER
   // check if the element(s) exists on the currently loaded page before you place any text in it
@@ -59,8 +59,8 @@ export default function updateLanguage() {
   }
 
   //. 'COOKED COUNT' PHRASE
-  if (mealsElement.allHadCountKeys) {
-    mealsElement.allHadCountKeys.forEach(phrase => {
+  if (mealsElement.allCountKeys) {
+    mealsElement.allCountKeys.forEach(phrase => {
       phrase.innerHTML = text.cookedCountPhrase[language];
     })
   }
diff --git a/public-source/js/meals/eventify-editable-property.js b/public-source/js/meals/eventify-editable-property.js
@@ -1,7 +1,15 @@
 import state from '../state';
 import sendEditRequest from './send-edit-request';
+import sanitizeString from '../../../shared/sanitize-string';
+
+export default function eventifyEditableProperty(allMealSpecifiedProperty, type) {
+
+  const updateType = {
+    'name update': text => sanitizeString(text, 16, 22),
+    'date update': state.editedPropertyOfMeal,
+    'count update': state.editedPropertyOfMeal
+  }
 
-export default function eventifyMealProperty(allMealSpecifiedProperty, type) {
   allMealSpecifiedProperty.forEach(element => {
     element.onfocus = handleFocus;
     element.onblur = handleBlur;
@@ -28,10 +36,13 @@ export default function eventifyMealProperty(allMealSpecifiedProperty, type) {
   }
 
   function handleKeyDown(e) {
-    console.log("KEYDOWN ON:", e.target.innerText)
+
     const kC = e.keyCode;
     const element = e.target;
 
+    // end, home, arrows
+    if (kC >= 35 && kC <= 40) return;
+
     // F5 || enter || escape
     if (kC == 116 || kC == 13 || kC == 27) {
       e.preventDefault();
@@ -44,7 +55,7 @@ export default function eventifyMealProperty(allMealSpecifiedProperty, type) {
     const payload = {
       type, // 'name update' or 'date update' or 'count update'
       id: element.dataset.mealId, // meal id
-      value: element.innerText // meal name or meal date or meal count
+      value: element.innerText.trim() // meal name or meal date or meal count
     }
     sendEditRequest(payload);
   } // sendPayload() ends
diff --git a/public-source/js/meals/meals.js b/public-source/js/meals/meals.js
@@ -4,9 +4,9 @@ import eventifyTodayButtonAnimation from './eventify-today-button-animation';
 import getDate from '../../../shared/get-date';
 import state from '../state';
 import { screenLoader, headerElement, mealsElement } from '../elements';
-import prepareTodayButtons from "./prepare-today-buttons";
+import todayButtons from "./prepare-today-buttons";
 import { eventifySearchMealsInput, focusOrUnfocusSearchMealsInput } from './search-input';
-import eventifyMealProperty from './edit-meal-property';
+import eventifyEditableProperty from './eventify-editable-property';
 
 /// unique page identifier: page-id-meals
 
@@ -26,7 +26,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
   //. SET UP 'TODAY' BUTTON ON EACH MEAL
   const todaysDate = getDate();
-  prepareTodayButtons(mealsElement.allTodayButtons, state.mealCookedConfirmMessage, todaysDate);
+  todayButtons(mealsElement.allTodayButtons, state.mealTodayConfirmMessage, todaysDate);
 
   //. SEARCH INPUT
   headerElement.searchInput.value = "";
@@ -39,18 +39,18 @@ document.addEventListener("DOMContentLoaded", function () {
       createMasonryLayout(noOfColumnsDisplayed);
     })
 
-  //. MEAL NAME
-  eventifyMealProperty(mealsElement.allMealNames, 'name update');
-  eventifyMealProperty(mealsElement.allDateValues, 'date update');
-  eventifyMealProperty(mealsElement.allHadCountValues, 'count update');
+  //. SET UP EVENTS FOR MEAL NAME OR DATE OR COUNT
+  eventifyEditableProperty(mealsElement.allNames, 'name update');
+  eventifyEditableProperty(mealsElement.allDateValues, 'date update');
+  eventifyEditableProperty(mealsElement.allCountValues, 'count update');
 
-  //. ANY KEY PRESSED ANYWHERE ON THE PAGE
+  //. ANY KEY PRESSED FOCUSES SEARCH INPUT IF NO ELEMENT IS BEING EDITED
   document.onkeydown = (e) => {
 
     // let meal properties be edited without interference from the search input
-    const allMealNameElements = Array.from(mealsElement.allMealNames);
+    const allMealNameElements = Array.from(mealsElement.allNames);
     const allDateValuesElements = Array.from(mealsElement.allDateValues);
-    const allCountValuesElements = Array.from(mealsElement.allHadCountValues);
+    const allCountValuesElements = Array.from(mealsElement.allCountValues);
     if (allMealNameElements.includes(e.target)
       || allDateValuesElements.includes(e.target)
       || allCountValuesElements.includes(e.target)) {
diff --git a/public-source/js/meals/prepare-today-buttons.js b/public-source/js/meals/prepare-today-buttons.js
@@ -1,6 +1,6 @@
 import sendEditRequest from './send-edit-request';
 
-export default function prepareTodayButtons(allTodayButtons, mealCookedConfirmMessage, todaysDate) {
+export default function todayButtons(allTodayButtons, mealTodayConfirmMessage, todaysDate) {
 
   for (let button of allTodayButtons) {
     if (button.dataset.mealDate === todaysDate) {
@@ -9,7 +9,7 @@ export default function prepareTodayButtons(allTodayButtons, mealCookedConfirmMe
       button.addEventListener("click", function (event) {
         event.preventDefault();
         if (!this.getAttribute("disabled")) {
-          const confirmed = confirm(mealCookedConfirmMessage);
+          const confirmed = confirm(mealTodayConfirmMessage);
           if (confirmed) {
             const payload = {
               type: "today update",
diff --git a/public-source/js/meals/send-edit-request.js b/public-source/js/meals/send-edit-request.js
@@ -4,7 +4,7 @@ export default function sendEditRequest(payload) {
   const url = '/meals/edit';
 
   fetch(url, {
-    method: 'POST',
+    method: 'PUT',
     headers: { 'Content-Type': 'application/json' },
     body: stringPayload // body data type must match "Content-Type" header
   })
diff --git a/public-source/js/state.js b/public-source/js/state.js
@@ -30,7 +30,7 @@ const state = {
   },
 
   // MESSAGE PLACEHOLDER FOR THE MEAL-COOKED TODAY CONFIRM POPUP
-  mealCookedConfirmMessage: "",
+  mealTodayConfirmMessage: "",
 
   // MEAL NAME THAT IS BEING CURRENTLY EDITED
   editedPropertyOfMeal: "",
diff --git a/public-source/sass/_meals.scss b/public-source/sass/_meals.scss
@@ -123,10 +123,12 @@
   &__heading {
     padding: 1.3rem 0.7rem 0.6rem;
     color: $color-meal-box-heading;
+    caret-color: red;
     font-weight: 300;
     font-size: 2.2rem;
     text-align: center;
     outline: none;
+    cursor: text;
   }
 
   // <p> LAST HAD IT DATE
@@ -137,8 +139,11 @@
 
     // <span> date displayed
     & .date-value {
+      display: inline-block;
       color: #f38745;
+      caret-color: black;
       outline: none;
+      cursor: text;
     }
   }
 
@@ -150,9 +155,12 @@
     font-size: 1.6rem;
 
     // <span> count displayed
-    & .had-count-value {
+    & .count-value {
+      display: inline-block;
       color: #22962f;
+      caret-color: red;
       outline: none;
+      cursor: text;
     }
 
     // <span> if count == 0
diff --git a/server-source/app.js b/server-source/app.js
@@ -15,8 +15,8 @@ import latestClients from "./latest-clients.js"; // a list of clients connected
 import upload from './multer.js'; // handle file uploads from a client
 import color from '../shared/console-log-colors'; // color console.log
 import sanitizeString from '../shared/sanitize-string';
-import checkDate from '../shared/check-date';
-import checkCount from '../shared/check-count';
+import sanitizeDate from '../shared/sanitize-date';
+import sanitizeCount from '../shared/sanitize-count';
 import getDate from '../shared/get-date';
 import getTime from '../shared/get-time';
 
@@ -142,8 +142,8 @@ app.post("/meals", function (req, res, next) {
   })
 });
 
-//. GET ROUTE TO EDIT MEAL DATA
-app.post("/meals/edit", function (req, res) {
+//. PUT ROUTE TO EDIT MEAL PROPERTIES SUCH AS NAME, DATE, COUNT
+app.put("/meals/edit", function (req, res) {
   const min = 0;
   const max = meals.length - 1;
   const payload = req.body;
@@ -152,7 +152,7 @@ app.post("/meals/edit", function (req, res) {
   // meal id must be valid
   if (Number.isInteger(id) && id >= min && id <= max) {
 
-    const type = {
+    const updateType = {
       "today update": function () {
         const clientDate = payload.todaysDate;
         if (meals[id].date != clientDate) {
@@ -183,8 +183,8 @@ app.post("/meals/edit", function (req, res) {
         logUpdate(id, prevName, meals[id].name);
       },
       "date update": function () {
-        const newDate = payload.value;
-        if (checkDate(newDate)) {
+        const newDate = sanitizeDate(payload.value);
+        if (newDate) {
           const prevDate = meals[id].date;
           meals[id].date = newDate;
           res.status(200).send({
@@ -199,8 +199,8 @@ app.post("/meals/edit", function (req, res) {
         }
       },
       "count update": function () {
-        const newCount = payload.value;
-        if (checkCount(newCount)) {
+        const newCount = sanitizeCount(payload.value);
+        if (newCount) {
           const prevCount = meals[id].count;
           meals[id].count = newCount;
           res.status(200).send({
@@ -215,7 +215,7 @@ app.post("/meals/edit", function (req, res) {
       },
       "default": function () { console.log("unknown request type"); }
     }
-    type.hasOwnProperty(payload.type) ? type[payload.type]() : type['default']();
+    updateType.hasOwnProperty(payload.type) ? updateType[payload.type]() : updateType['default']();
 
     storage.writeDatabase(meals, databaseFile);
   }
diff --git a/server-source/views/meals.ejs b/server-source/views/meals.ejs
@@ -34,7 +34,7 @@
 			<% if (meal.count > 0) { %>
 			<p class="meal-box__had-count">
 				<span class="had-count-key">count: </span>
-				<span class="had-count-value"
+				<span class="count-value"
 					data-meal-id="<%= meal.id %>"
 					contenteditable="true"
 					spellcheck="false">
diff --git a/shared/check-count.js b/shared/check-count.js
diff --git a/shared/check-date.js b/shared/check-date.js
diff --git a/shared/sanitize-count.js b/shared/sanitize-count.js
@@ -0,0 +1,15 @@
+/*
+* returns the argument if the argument can be a number within the specified range
+* returns false otherwise
+*/
+
+export default function sanitizeCount(count) {
+
+  count = parseInt(count);
+
+  if (!isNaN(count) && count >= 0 && count <= 99999) {
+    return count;
+  } else {
+    return false;
+  }
+}
diff --git a/shared/sanitize-date.js b/shared/sanitize-date.js
@@ -0,0 +1,34 @@
+/*
+* returns a copy of the argument if the argument is a date within the specified range
+* returns false otherwise
+*/
+
+export default function sanitizeDate(date) {
+
+  // try for something like [ 23, 11, 2019 ]
+  const periodArray = date.split('.');
+
+  if (periodArray.length != 3) return false;
+
+  // make sure each period is convertible to a number
+  for (const period of periodArray) {
+    if (isNaN(period)) return false;
+  }
+
+  // periods
+  let day = parseInt(periodArray[0]);
+  let month = parseInt(periodArray[1]);
+  let year = parseInt(periodArray[2]);
+
+  // make sure periods fit in their numeric range
+  if ((day < 1 || day > 31)
+    || (month < 1 || month > 12)
+    || (year < 2000 || year > 2099)
+  ) return false;
+
+  // prepend each single-digit day and month with a '0'
+  day = day < 10 ? '0' + day.toString() : day;
+  month = month < 10 ? '0' + month.toString() : month;
+
+  return [day, month, year].join('.');
+}
diff --git a/shared/sanitize-string.js b/shared/sanitize-string.js
