diff --git a/dist/main.js b/dist/main.js index ac9ed8a..9e91100 100644 --- a/dist/main.js +++ b/dist/main.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\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 }\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(this.model.getProject(this.currentProjectId).getTodos());\r\n this.listenForTodos();\r\n });\r\n });\r\n }\r\n\r\n listenForProjectAdd() {\r\n this.addProjectButton.addEventListener(\"click\", () => {\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 });\r\n }\r\n\r\n listenForTodoAdd() {\r\n this.addTodoButton.addEventListener(\"click\", () => {\r\n let todoTitle = this.todoInputField.value;\r\n let todoDate = this.todoDate.value;\r\n let todoPrio = this.todoPrio.value;\r\n console.log(todoDate);\r\n console.log(todoPrio);\r\n this.model.addTodoToProject(this.currentProjectId, todoTitle, todoDate, todoPrio);\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 });\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\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 = e.target.parentNode.parentNode.previousElementSibling.getAttribute(\"id\");\r\n this.model.addDescriptionToTodo(this.currentProjectId, correspondingTodoId, 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\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 }\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 });\r\n });\r\n }\r\n\r\n listenForProjectAdd() {\r\n \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 }\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 this.model.addTodoToProject(\r\n this.currentProjectId,\r\n todoTitle,\r\n todoDate,\r\n todoPrio\r\n );\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 }\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?"); /***/ }), diff --git a/src/modules/controller.js b/src/modules/controller.js index 3dee92a..5223161 100644 --- a/src/modules/controller.js +++ b/src/modules/controller.js @@ -28,84 +28,115 @@ class Controller { this.todoDate = document.querySelector("#dateInput"); this.todoPrio = document.querySelector("#prio"); } - - initializeUI(){ + + initializeUI() { this.view.displayProjects(this.model.getProjects()); this.listenForProjects(); this.listenForProjectAdd(); this.listenForTodoAdd(); this.listenForShowPopupButton(); } - + listenForProjects() { this.allCurrentProjects = Array.from(document.querySelectorAll("li")); this.allCurrentProjects?.forEach((project) => { project.addEventListener("click", (e) => { this.currentProjectId = e.target.getAttribute("id"); // Display all todos for active project - this.view.displayTodos(this.model.getProject(this.currentProjectId).getTodos()); + this.view.displayTodos( + this.model.getProject(this.currentProjectId).getTodos() + ); this.listenForTodos(); }); }); } listenForProjectAdd() { + this.addProjectButton.addEventListener("click", () => { - let projectTitle = this.projectInputField.value; - this.model.addProject(projectTitle); - this.view.displayProjects(this.model.getProjects()); - this.listenForProjects(); - this.listenForDescriptions(); + this.addProjectHelper(); + }); + // Add keyboard listener but to the input field not to the projects themselves + this.projectInputField.addEventListener("keypress", (e) => { + if (e.key === "Enter") { + this.addProjectHelper(); + } }); } + addProjectHelper() { + let projectTitle = this.projectInputField.value; + this.model.addProject(projectTitle); + this.view.displayProjects(this.model.getProjects()); + this.listenForProjects(); + this.listenForDescriptions(); + } + listenForTodoAdd() { this.addTodoButton.addEventListener("click", () => { - let todoTitle = this.todoInputField.value; - let todoDate = this.todoDate.value; - let todoPrio = this.todoPrio.value; - console.log(todoDate); - console.log(todoPrio); - this.model.addTodoToProject(this.currentProjectId, todoTitle, todoDate, todoPrio); - this.view.displayTodos( - this.model.getProject(this.currentProjectId).getTodos() - ); - this.popup.classList.remove("active"); - this.listenForDescriptions(); - this.listenForTodos(); + this.addTodoHelper(); }); + // Listen for keypress also + this.todoInputField.addEventListener("keypress", (e)=>{ + if(e.key==="Enter"){ + this.addTodoHelper(); + } + }) + } + + addTodoHelper() { + let todoTitle = this.todoInputField.value; + let todoDate = this.todoDate.value; + let todoPrio = this.todoPrio.value; + this.model.addTodoToProject( + this.currentProjectId, + todoTitle, + todoDate, + todoPrio + ); + this.view.displayTodos( + this.model.getProject(this.currentProjectId).getTodos() + ); + this.popup.classList.remove("active"); + this.listenForDescriptions(); + this.listenForTodos(); } - listenForTodos(){ + listenForTodos() { const todos = Array.from(document.querySelectorAll("tr[id]")); - todos.forEach((todo)=>{ - todo.addEventListener("click", ()=> { + todos.forEach((todo) => { + todo.addEventListener("click", () => { todo.nextElementSibling.classList.toggle("popup"); this.listenForDescriptions(); - - }) - }) + }); + }); } listenForShowPopupButton() { - this.showPopupButton.addEventListener("click", ()=>{ + this.showPopupButton.addEventListener("click", () => { this.popup.classList.add("active"); - }) + }); } - listenForDescriptions(){ + listenForDescriptions() { const descriptions = Array.from(document.querySelectorAll("textarea")); - descriptions.forEach((description)=>{ - description.addEventListener("keypress", (e)=>{ - if(e.key==="Enter"){ + descriptions.forEach((description) => { + description.addEventListener("keypress", (e) => { + if (e.key === "Enter") { // Save the description in the corresponding todo - let correspondingTodoId = e.target.parentNode.parentNode.previousElementSibling.getAttribute("id"); - this.model.addDescriptionToTodo(this.currentProjectId, correspondingTodoId, e.target.value); + let correspondingTodoId = + e.target.parentNode.parentNode.previousElementSibling.getAttribute( + "id" + ); + this.model.addDescriptionToTodo( + this.currentProjectId, + correspondingTodoId, + e.target.value + ); } - }) - }) + }); + }); } - } export { Controller };