From 66f15ffe4dc4f2e5f9fcfc83ee758e3923a3841b Mon Sep 17 00:00:00 2001 From: Benjamin-Re Date: Wed, 20 Apr 2022 20:47:53 +0200 Subject: [PATCH] Todo find a way to revive POJSO methods --- dist/index.html | 2 +- dist/main.js | 4 ++-- src/index.html | 2 +- src/index.js | 2 +- src/modules/controller.js | 25 ++++++++++++++++++++++++- 5 files changed, 29 insertions(+), 6 deletions(-) diff --git a/dist/index.html b/dist/index.html index c9d21f7..bf66122 100644 --- a/dist/index.html +++ b/dist/index.html @@ -18,7 +18,7 @@

Projects

Todos

- What is going on? +
diff --git a/dist/main.js b/dist/main.js index bdee41d..d531833 100644 --- a/dist/main.js +++ b/dist/main.js @@ -146,7 +146,7 @@ eval("\n\n/* istanbul ignore next */\nfunction styleTagTransform(css, styleElem /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./style.css */ \"./src/style.css\");\n/* harmony import */ var _fortawesome_fontawesome_free_js_fontawesome__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @fortawesome/fontawesome-free/js/fontawesome */ \"./node_modules/@fortawesome/fontawesome-free/js/fontawesome.js\");\n/* harmony import */ var _fortawesome_fontawesome_free_js_fontawesome__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_fortawesome_fontawesome_free_js_fontawesome__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _fortawesome_fontawesome_free_js_solid__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @fortawesome/fontawesome-free/js/solid */ \"./node_modules/@fortawesome/fontawesome-free/js/solid.js\");\n/* harmony import */ var _fortawesome_fontawesome_free_js_solid__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_fortawesome_fontawesome_free_js_solid__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _modules_controller__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules/controller */ \"./src/modules/controller.js\");\n\r\n\r\n\r\n\r\n\r\n\r\nwindow.addEventListener(\"load\", () => {\r\n const controller = new _modules_controller__WEBPACK_IMPORTED_MODULE_3__.Controller();\r\n controller.initializeUI();\r\n});\r\n\r\n/* Next step: Enable update function */\n\n//# sourceURL=webpack://todo/./src/index.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./style.css */ \"./src/style.css\");\n/* harmony import */ var _fortawesome_fontawesome_free_js_fontawesome__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @fortawesome/fontawesome-free/js/fontawesome */ \"./node_modules/@fortawesome/fontawesome-free/js/fontawesome.js\");\n/* harmony import */ var _fortawesome_fontawesome_free_js_fontawesome__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_fortawesome_fontawesome_free_js_fontawesome__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _fortawesome_fontawesome_free_js_solid__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @fortawesome/fontawesome-free/js/solid */ \"./node_modules/@fortawesome/fontawesome-free/js/solid.js\");\n/* harmony import */ var _fortawesome_fontawesome_free_js_solid__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_fortawesome_fontawesome_free_js_solid__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _modules_controller__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules/controller */ \"./src/modules/controller.js\");\n\r\n\r\n\r\n\r\n\r\n\r\nwindow.addEventListener(\"load\", () => {\r\n const controller = new _modules_controller__WEBPACK_IMPORTED_MODULE_3__.Controller();\r\n controller.initializeUI();\r\n});\r\n\r\n/* Next step: Add persistence */\n\n//# sourceURL=webpack://todo/./src/index.js?"); /***/ }), @@ -157,7 +157,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _sty /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Controller\": () => (/* binding */ Controller)\n/* harmony export */ });\n/* harmony import */ var _view__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./view */ \"./src/modules/view.js\");\n/* harmony import */ var _model_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./model.js */ \"./src/modules/model.js\");\n\r\n\r\n\r\nclass Controller {\r\n model;\r\n view;\r\n todoInputField;\r\n addTodoButton;\r\n projectInputField;\r\n addProjectButton;\r\n currentProjectId;\r\n allCurrentProjects;\r\n showPopupButton;\r\n popup;\r\n todoDate;\r\n todoPrio;\r\n isUpdate;\r\n idToUpdate;\r\n\r\n constructor() {\r\n this.model = new _model_js__WEBPACK_IMPORTED_MODULE_1__.Model();\r\n this.view = new _view__WEBPACK_IMPORTED_MODULE_0__.View();\r\n this.todoInputField = document.querySelector(\"#todoInputField\");\r\n this.addTodoButton = document.querySelector(\".addTodoButton\");\r\n this.projectInputField = document.querySelector(\"#projectsInputField\");\r\n this.addProjectButton = document.querySelector(\".addProjectButton\");\r\n this.currentProjectId = 0;\r\n this.showPopupButton = document.querySelector(\".showPopupButton\");\r\n this.popup = document.querySelector(\".popup\");\r\n this.todoDate = document.querySelector(\"#dateInput\");\r\n this.todoPrio = document.querySelector(\"#prio\");\r\n this.isUpdate = false;\r\n this.idToUpdate = -1;\r\n }\r\n\r\n initializeUI() {\r\n this.view.displayProjects(this.model.getProjects());\r\n this.listenForProjects();\r\n this.listenForProjectAdd();\r\n this.listenForTodoAdd();\r\n this.listenForShowPopupButton();\r\n }\r\n\r\n listenForProjects() {\r\n this.allCurrentProjects = Array.from(document.querySelectorAll(\"li\"));\r\n this.allCurrentProjects?.forEach((project) => {\r\n project.addEventListener(\"click\", (e) => {\r\n this.currentProjectId = e.target.getAttribute(\"id\");\r\n // Display all todos for active project\r\n this.view.displayTodos(\r\n this.model.getProject(this.currentProjectId).getTodos()\r\n );\r\n this.listenForTodos();\r\n this.listenForEdit();\r\n this.listenForDelete();\r\n });\r\n });\r\n }\r\n\r\n listenForProjectAdd() {\r\n this.addProjectButton.addEventListener(\"click\", () => {\r\n this.addProjectHelper();\r\n });\r\n // Add keyboard listener but to the input field not to the projects themselves\r\n this.projectInputField.addEventListener(\"keypress\", (e) => {\r\n if (e.key === \"Enter\") {\r\n this.addProjectHelper();\r\n }\r\n });\r\n }\r\n\r\n addProjectHelper() {\r\n let projectTitle = this.projectInputField.value;\r\n this.model.addProject(projectTitle);\r\n this.view.displayProjects(this.model.getProjects());\r\n this.listenForProjects();\r\n this.listenForDescriptions();\r\n this.listenForEdit();\r\n }\r\n\r\n listenForTodoAdd() {\r\n this.addTodoButton.addEventListener(\"click\", () => {\r\n this.addTodoHelper();\r\n });\r\n // Listen for keypress also\r\n this.todoInputField.addEventListener(\"keypress\", (e) => {\r\n if (e.key === \"Enter\") {\r\n this.addTodoHelper();\r\n }\r\n });\r\n }\r\n\r\n addTodoHelper() {\r\n let todoTitle = this.todoInputField.value;\r\n let todoDate = this.todoDate.value;\r\n let todoPrio = this.todoPrio.value;\r\n if(this.isUpdate){\r\n // If we update dont create a new todo but overwrite the old one\r\n // The id of the todo to update is saved in a global variable\r\n // Also get the description as the popup is showing at this flow\r\n let todoDescription = document.querySelector(`tr[id='${this.idToUpdate}']`).nextElementSibling.firstElementChild.firstElementChild.value;\r\n this.model.updateTodo(this.currentProjectId, this.idToUpdate, todoTitle, todoDate, todoPrio, todoDescription); \r\n this.isUpdate=false;\r\n } else {\r\n this.model.addTodoToProject(\r\n this.currentProjectId,\r\n todoTitle,\r\n todoDate,\r\n todoPrio\r\n );\r\n }\r\n // Display all todos after the change\r\n this.view.displayTodos(\r\n this.model.getProject(this.currentProjectId).getTodos()\r\n );\r\n this.popup.classList.remove(\"active\");\r\n this.listenForDescriptions();\r\n this.listenForTodos();\r\n this.listenForDelete();\r\n this.listenForEdit();\r\n }\r\n\r\n // Listen for delete icon\r\n listenForDelete() {\r\n const deleteIcons = Array.from(document.querySelectorAll(\".trash-icon\"));\r\n deleteIcons.forEach((icon) => {\r\n icon.parentNode.addEventListener(\"click\", () => {\r\n // Get id of corresponding todo\r\n let thisTodoId =\r\n +icon.parentNode.parentNode.previousElementSibling.getAttribute(\"id\");\r\n this.model.getProject(this.currentProjectId).deleteTodo(thisTodoId);\r\n this.view.displayTodos(\r\n this.model.getProject(this.currentProjectId).getTodos()\r\n );\r\n });\r\n });\r\n }\r\n\r\n listenForEdit(){\r\n const editIcons = Array.from(document.querySelectorAll(\".edit-icon\"));\r\n editIcons.forEach((icon)=>{\r\n icon.addEventListener(\"click\", ()=>{\r\n // Set the global update flag to true so the add button handlers can know. \r\n this.isUpdate=true;\r\n // Get id of todo to edit and save it in global variable\r\n this.idToUpdate =\r\n +icon.parentNode.parentNode.previousElementSibling.getAttribute(\"id\");\r\n // Get data from the popup + descr\r\n this.popup.classList.add(\"active\");\r\n })\r\n })\r\n }\r\n\r\n listenForTodos() {\r\n const todos = Array.from(document.querySelectorAll(\"tr[id]\"));\r\n todos.forEach((todo) => {\r\n todo.addEventListener(\"click\", () => {\r\n todo.nextElementSibling.classList.toggle(\"popup\");\r\n this.listenForDescriptions();\r\n });\r\n });\r\n }\r\n\r\n listenForShowPopupButton() {\r\n this.showPopupButton.addEventListener(\"click\", () => {\r\n this.popup.classList.add(\"active\");\r\n });\r\n }\r\n\r\n listenForDescriptions() {\r\n const descriptions = Array.from(document.querySelectorAll(\"textarea\"));\r\n descriptions.forEach((description) => {\r\n description.addEventListener(\"keypress\", (e) => {\r\n if (e.key === \"Enter\") {\r\n // Save the description in the corresponding todo\r\n let correspondingTodoId =\r\n e.target.parentNode.parentNode.previousElementSibling.getAttribute(\r\n \"id\"\r\n );\r\n this.model.addDescriptionToTodo(\r\n this.currentProjectId,\r\n correspondingTodoId,\r\n e.target.value\r\n );\r\n }\r\n });\r\n });\r\n }\r\n}\r\n\r\n\r\n\n\n//# sourceURL=webpack://todo/./src/modules/controller.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Controller\": () => (/* binding */ Controller)\n/* harmony export */ });\n/* harmony import */ var _view__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./view */ \"./src/modules/view.js\");\n/* harmony import */ var _model_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./model.js */ \"./src/modules/model.js\");\n\r\n\r\n\r\nclass Controller {\r\n model;\r\n view;\r\n todoInputField;\r\n addTodoButton;\r\n projectInputField;\r\n addProjectButton;\r\n currentProjectId;\r\n allCurrentProjects;\r\n showPopupButton;\r\n popup;\r\n todoDate;\r\n todoPrio;\r\n isUpdate;\r\n idToUpdate;\r\n\r\n constructor() {\r\n this.model = new _model_js__WEBPACK_IMPORTED_MODULE_1__.Model();\r\n this.view = new _view__WEBPACK_IMPORTED_MODULE_0__.View();\r\n this.todoInputField = document.querySelector(\"#todoInputField\");\r\n this.addTodoButton = document.querySelector(\".addTodoButton\");\r\n this.projectInputField = document.querySelector(\"#projectsInputField\");\r\n this.addProjectButton = document.querySelector(\".addProjectButton\");\r\n this.currentProjectId = 0;\r\n this.showPopupButton = document.querySelector(\".showPopupButton\");\r\n this.popup = document.querySelector(\".popup\");\r\n this.todoDate = document.querySelector(\"#dateInput\");\r\n this.todoPrio = document.querySelector(\"#prio\");\r\n this.isUpdate = false;\r\n this.idToUpdate = -1;\r\n }\r\n\r\n initializeUI() {\r\n // Load stored data when the page is first loaded\r\n let data = this.getData();\r\n console.log(data);\r\n console.log(this.model.getProjects());\r\n this.view.displayProjects(data); \r\n \r\n // this.view.displayProjects(this.model.getProjects());\r\n this.listenForProjects();\r\n this.listenForProjectAdd();\r\n this.listenForTodoAdd();\r\n this.listenForShowPopupButton();\r\n }\r\n\r\n listenForProjects() {\r\n this.allCurrentProjects = Array.from(document.querySelectorAll(\"li\"));\r\n this.allCurrentProjects?.forEach((project) => {\r\n project.addEventListener(\"click\", (e) => {\r\n this.currentProjectId = e.target.getAttribute(\"id\");\r\n // Display all todos for active project\r\n this.view.displayTodos(\r\n this.model.getProject(this.currentProjectId).getTodos()\r\n );\r\n this.listenForTodos();\r\n this.listenForEdit();\r\n this.listenForDelete();\r\n });\r\n });\r\n }\r\n\r\n listenForProjectAdd() {\r\n this.addProjectButton.addEventListener(\"click\", () => {\r\n this.addProjectHelper();\r\n });\r\n // Add keyboard listener but to the input field not to the projects themselves\r\n this.projectInputField.addEventListener(\"keypress\", (e) => {\r\n if (e.key === \"Enter\") {\r\n this.addProjectHelper();\r\n }\r\n });\r\n }\r\n\r\n addProjectHelper() {\r\n let projectTitle = this.projectInputField.value;\r\n this.model.addProject(projectTitle);\r\n this.view.displayProjects(this.model.getProjects());\r\n // Save your current data\r\n this.saveData();\r\n this.listenForProjects();\r\n this.listenForDescriptions();\r\n this.listenForEdit();\r\n }\r\n\r\n listenForTodoAdd() {\r\n this.addTodoButton.addEventListener(\"click\", () => {\r\n this.addTodoHelper();\r\n });\r\n // Listen for keypress also\r\n this.todoInputField.addEventListener(\"keypress\", (e) => {\r\n if (e.key === \"Enter\") {\r\n this.addTodoHelper();\r\n }\r\n });\r\n }\r\n\r\n addTodoHelper() {\r\n let todoTitle = this.todoInputField.value;\r\n let todoDate = this.todoDate.value;\r\n let todoPrio = this.todoPrio.value;\r\n if(this.isUpdate){\r\n // If we update dont create a new todo but overwrite the old one\r\n // The id of the todo to update is saved in a global variable\r\n // Also get the description as the popup is showing at this flow\r\n let todoDescription = document.querySelector(`tr[id='${this.idToUpdate}']`).nextElementSibling.firstElementChild.firstElementChild.value;\r\n this.model.updateTodo(this.currentProjectId, this.idToUpdate, todoTitle, todoDate, todoPrio, todoDescription); \r\n this.isUpdate=false;\r\n } else {\r\n this.model.addTodoToProject(\r\n this.currentProjectId,\r\n todoTitle,\r\n todoDate,\r\n todoPrio\r\n );\r\n }\r\n // Display all todos after the change\r\n this.view.displayTodos(\r\n this.model.getProject(this.currentProjectId).getTodos()\r\n );\r\n this.popup.classList.remove(\"active\");\r\n this.listenForDescriptions();\r\n this.listenForTodos();\r\n this.listenForDelete();\r\n this.listenForEdit();\r\n // Save the current data\r\n this.saveData();\r\n }\r\n\r\n // Listen for delete icon\r\n listenForDelete() {\r\n const deleteIcons = Array.from(document.querySelectorAll(\".trash-icon\"));\r\n deleteIcons.forEach((icon) => {\r\n icon.parentNode.addEventListener(\"click\", () => {\r\n // Get id of corresponding todo\r\n let thisTodoId =\r\n +icon.parentNode.parentNode.previousElementSibling.getAttribute(\"id\");\r\n this.model.getProject(this.currentProjectId).deleteTodo(thisTodoId);\r\n this.view.displayTodos(\r\n this.model.getProject(this.currentProjectId).getTodos()\r\n );\r\n });\r\n });\r\n }\r\n\r\n listenForEdit(){\r\n const editIcons = Array.from(document.querySelectorAll(\".edit-icon\"));\r\n editIcons.forEach((icon)=>{\r\n icon.addEventListener(\"click\", ()=>{\r\n // Set the global update flag to true so the add button handlers can know. \r\n this.isUpdate=true;\r\n // Get id of todo to edit and save it in global variable\r\n this.idToUpdate =\r\n +icon.parentNode.parentNode.previousElementSibling.getAttribute(\"id\");\r\n // Get data from the popup + descr\r\n this.popup.classList.add(\"active\");\r\n })\r\n })\r\n }\r\n\r\n listenForTodos() {\r\n const todos = Array.from(document.querySelectorAll(\"tr[id]\"));\r\n todos.forEach((todo) => {\r\n todo.addEventListener(\"click\", () => {\r\n todo.nextElementSibling.classList.toggle(\"popup\");\r\n this.listenForDescriptions();\r\n });\r\n });\r\n }\r\n\r\n listenForShowPopupButton() {\r\n this.showPopupButton.addEventListener(\"click\", () => {\r\n this.popup.classList.add(\"active\");\r\n });\r\n }\r\n\r\n listenForDescriptions() {\r\n const descriptions = Array.from(document.querySelectorAll(\"textarea\"));\r\n descriptions.forEach((description) => {\r\n description.addEventListener(\"keypress\", (e) => {\r\n if (e.key === \"Enter\") {\r\n // Save the description in the corresponding todo\r\n let correspondingTodoId =\r\n e.target.parentNode.parentNode.previousElementSibling.getAttribute(\r\n \"id\"\r\n );\r\n this.model.addDescriptionToTodo(\r\n this.currentProjectId,\r\n correspondingTodoId,\r\n e.target.value\r\n );\r\n }\r\n });\r\n });\r\n }\r\n\r\n // Store data whenever a project or todo is added\r\n saveData() {\r\n let data = JSON.stringify(this.model.getProjects());\r\n console.log(`stringified data: ${data}`);\r\n localStorage.setItem(\"projects\", data);\r\n }\r\n\r\n getData() {\r\n let data = localStorage.getItem(\"projects\");\r\n return JSON.parse(data);\r\n }\r\n\r\n}\r\n\r\n\r\n\n\n//# sourceURL=webpack://todo/./src/modules/controller.js?"); /***/ }), diff --git a/src/index.html b/src/index.html index aaeac00..4197b57 100644 --- a/src/index.html +++ b/src/index.html @@ -18,7 +18,7 @@

Projects

Todos

- What is going on? +
diff --git a/src/index.js b/src/index.js index 7581d5a..b9cdcad 100644 --- a/src/index.js +++ b/src/index.js @@ -9,4 +9,4 @@ window.addEventListener("load", () => { controller.initializeUI(); }); -/* Next step: Enable update function */ \ No newline at end of file +/* Next step: Add persistence */ \ No newline at end of file diff --git a/src/modules/controller.js b/src/modules/controller.js index a996dc8..79da060 100644 --- a/src/modules/controller.js +++ b/src/modules/controller.js @@ -34,7 +34,13 @@ class Controller { } initializeUI() { - this.view.displayProjects(this.model.getProjects()); + // Load stored data when the page is first loaded + let data = this.getData(); + console.log(data); + console.log(this.model.getProjects()); + this.view.displayProjects(data); + + // this.view.displayProjects(this.model.getProjects()); this.listenForProjects(); this.listenForProjectAdd(); this.listenForTodoAdd(); @@ -73,6 +79,8 @@ class Controller { let projectTitle = this.projectInputField.value; this.model.addProject(projectTitle); this.view.displayProjects(this.model.getProjects()); + // Save your current data + this.saveData(); this.listenForProjects(); this.listenForDescriptions(); this.listenForEdit(); @@ -118,6 +126,8 @@ class Controller { this.listenForTodos(); this.listenForDelete(); this.listenForEdit(); + // Save the current data + this.saveData(); } // Listen for delete icon @@ -186,6 +196,19 @@ class Controller { }); }); } + + // Store data whenever a project or todo is added + saveData() { + let data = JSON.stringify(this.model.getProjects()); + console.log(`stringified data: ${data}`); + localStorage.setItem("projects", data); + } + + getData() { + let data = localStorage.getItem("projects"); + return JSON.parse(data); + } + } export { Controller };