From 889367787200ceb865ee0e6e69a2cbd29d19c3d5 Mon Sep 17 00:00:00 2001 From: Benjamin-Re Date: Thu, 14 Apr 2022 13:04:11 +0200 Subject: [PATCH] Refactor modules to use classes --- dist/index.html | 8 +++++- dist/main.js | 10 +++---- src/index.html | 8 +++++- src/index.js | 8 ++++-- src/modules/controller.js | 57 ++++++++++++++++++++++++++++++------- src/modules/entities.js | 60 ++++++++++++++++++++++++++------------- src/modules/model.js | 36 ++++++++++++++++++----- src/modules/view.js | 53 +++++++++++++++++++++++----------- 8 files changed, 178 insertions(+), 62 deletions(-) diff --git a/dist/index.html b/dist/index.html index fc15285..4a2308b 100644 --- a/dist/index.html +++ b/dist/index.html @@ -8,12 +8,18 @@
TODOs
+

Todos

diff --git a/dist/main.js b/dist/main.js index b38e724..e9a07b3 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\nwindow.addEventListener(\"load\", () => {\r\n (0,_modules_controller__WEBPACK_IMPORTED_MODULE_3__.listenForAdd)();\r\n});\r\n\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.listenForProjectAdd();\r\n controller.listenForTodoAdd();\r\n controller.listenForProjects();\r\n});\r\n\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 */ \"listenForAdd\": () => (/* binding */ listenForAdd)\n/* harmony export */ });\n/* harmony import */ var _model_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./model.js */ \"./src/modules/model.js\");\n/* harmony import */ var _view_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./view.js */ \"./src/modules/view.js\");\n\r\n\r\n\r\nlet todoInputField = document.querySelector(\"#todoInputField\");\r\nconst addButton = document.querySelector(\".addTodoButton\");\r\n\r\nfunction listenForAdd() {\r\n console.log(addButton);\r\n addButton.addEventListener(\"click\", () => {\r\n let todoTitle = todoInputField.value;\r\n (0,_view_js__WEBPACK_IMPORTED_MODULE_1__.display)((0,_model_js__WEBPACK_IMPORTED_MODULE_0__.addTodo)(todoTitle));\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\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.allCurrentProjects = document.querySelector(\"li\");\r\n }\r\n\r\n listenForProjects() {\r\n this.allCurrentProjects?.forEach((project) => {\r\n project.addEventListener(\"click\", (e) => {\r\n this.currentProjectId = e.target.getAttribute(\"id\");\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 });\r\n }\r\n\r\n listenForTodoAdd() {\r\n this.addTodoButton.addEventListener(\"click\", () => {\r\n let todoTitle = this.todoInputField.value;\r\n this.model.addTodoToProject(this.currentProjectId);\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\r\n\n\n//# sourceURL=webpack://todo/./src/modules/controller.js?"); /***/ }), @@ -168,7 +168,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__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 */ \"Todo\": () => (/* binding */ Todo)\n/* harmony export */ });\nclass Todo {\r\n title;\r\n description;\r\n dueDate;\r\n priority;\r\n\r\n constructor(title, description, dueDate, priority) {\r\n this.title = title;\r\n this.description = description;\r\n this.dueDate = dueDate;\r\n this.priority = priority;\r\n }\r\n\r\n setTitle(title) {\r\n this.title = title;\r\n }\r\n\r\n getTitle() {\r\n return this.title;\r\n }\r\n\r\n setDescription(description) {\r\n this.description = description;\r\n }\r\n\r\n getDescription() {\r\n return this.description;\r\n }\r\n\r\n setDueDate(dueDate) {\r\n this.dueDate = dueDate;\r\n }\r\n\r\n getDueDate() {\r\n return this.dueDate;\r\n }\r\n\r\n setPriority(priority) {\r\n this.priority = priority;\r\n }\r\n\r\n getPriority() {\r\n return this.priority;\r\n }\r\n}\r\n\r\n\n\n//# sourceURL=webpack://todo/./src/modules/entities.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Project\": () => (/* binding */ Project),\n/* harmony export */ \"Todo\": () => (/* binding */ Todo)\n/* harmony export */ });\nclass Todo {\r\n title;\r\n due;\r\n prio;\r\n\r\n constructor(title, due, prio) {\r\n this.title = title;\r\n this.due = due;\r\n this.prio = prio;\r\n }\r\n\r\n setTitle(title) {\r\n this.title = title;\r\n }\r\n\r\n getTitle() {\r\n return this.title;\r\n }\r\n\r\n\r\n setDue(due) {\r\n this.due = due;\r\n }\r\n\r\n getDue() {\r\n return this.due;\r\n }\r\n\r\n setPriority(prio) {\r\n this.prio = prio;\r\n }\r\n\r\n getPrio() {\r\n return this.prio;\r\n }\r\n}\r\n\r\nclass Project {\r\n title;\r\n todoList = [];\r\n\r\n constructor(title){\r\n this.title = title;\r\n }\r\n\r\n setTitle(title){\r\n this.title = title;\r\n }\r\n\r\n getTitle(){\r\n return this.title;\r\n }\r\n\r\n addTodo(title,due,prio){\r\n this.todoList.push(new Todo(title,due,prio));\r\n }\r\n\r\n getTodo(id){\r\n return this.todoList[id];\r\n }\r\n\r\n getTodos(){\r\n return this.todoList;\r\n }\r\n}\r\n\r\n\n\n//# sourceURL=webpack://todo/./src/modules/entities.js?"); /***/ }), @@ -179,7 +179,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__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 */ \"addTodo\": () => (/* binding */ addTodo)\n/* harmony export */ });\n/* harmony import */ var _entities__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./entities */ \"./src/modules/entities.js\");\n\r\n\r\nconst todoList = [];\r\n\r\nfunction addTodo(title, due, prio){\r\n let newTodo = new _entities__WEBPACK_IMPORTED_MODULE_0__.Todo(title, due, prio);\r\n todoList.push(newTodo);\r\n return todoList;\r\n}\r\n\r\n\n\n//# sourceURL=webpack://todo/./src/modules/model.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Model\": () => (/* binding */ Model)\n/* harmony export */ });\n/* harmony import */ var _entities__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./entities */ \"./src/modules/entities.js\");\n\r\n\r\nclass Model {\r\n projectList;\r\n\r\n constructor(){\r\n const defaultProject = new _entities__WEBPACK_IMPORTED_MODULE_0__.Project(\"default\");\r\n this.projectList = [defaultProject];\r\n }\r\n\r\n addProject(title){\r\n console.log(\"inside model: add project\");\r\n this.projectList.push(new _entities__WEBPACK_IMPORTED_MODULE_0__.Project(title));\r\n }\r\n \r\n getProject(id){\r\n console.log(this.projectList[id]);\r\n return this.projectList[id];\r\n }\r\n \r\n getProjects(){\r\n console.log(\"inside model: get projects\");\r\n return this.projectList;\r\n }\r\n \r\n addTodoToProject(id, title, due, prio){\r\n this.projectList[id].addTodo(title,due,prio);\r\n }\r\n\r\n}\r\n\r\n\r\n\n\n//# sourceURL=webpack://todo/./src/modules/model.js?"); /***/ }), @@ -190,7 +190,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__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 */ \"display\": () => (/* binding */ display)\n/* harmony export */ });\nconst todoTable = document.querySelector(\"table\");\r\n\r\nfunction display(currentTodoArray){\r\n // Wipeout current list\r\n todoTable.innerHTML = \"\";\r\n // loop through list\r\n currentTodoArray.forEach((todo)=>{\r\n // Create and add a new row to the table\r\n todoTable.appendChild(createRow(todo.title));\r\n })\r\n}\r\n\r\nfunction createRow(title) {\r\n console.log(title);\r\n const newRow = document.createElement(\"tr\");\r\n newRow.innerHTML=``;\r\n return newRow;\r\n}\r\n\r\n\n\n//# sourceURL=webpack://todo/./src/modules/view.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"View\": () => (/* binding */ View)\n/* harmony export */ });\nclass View {\r\n todoTable;\r\n projectList;\r\n constructor(){\r\n this.todoTable = document.querySelector(\"table\");\r\n this.projectList = document.querySelector(\".projectList\");\r\n }\r\n\r\n displayProjects(currentProjectsList) {\r\n this.projectList.innerHTML = \"\";\r\n currentProjectsList.forEach((project) => {\r\n this.projectList.appendChild(this.createLi(project.title));\r\n });\r\n }\r\n \r\n createLi(projectTitle) {\r\n const newLi = document.createElement(\"li\");\r\n newLi.textContent = projectTitle;\r\n let id = parseInt(newLi.previousElementSibling?.getAttribute(\"id\")) +1 || 0;\r\n newLi.setAttribute(\"id\", id);\r\n return newLi;\r\n }\r\n \r\n displayTodos(currentTodoArray) {\r\n // Wipeout current list\r\n this.todoTable.innerHTML = \"\";\r\n // loop through list\r\n currentTodoArray.forEach((todo) => {\r\n // Create and add a new row to the table\r\n this.todoTable.appendChild(createRow(todo.title));\r\n });\r\n }\r\n \r\n createRow(title) {\r\n const newRow = document.createElement(\"tr\");\r\n newRow.innerHTML = ``;\r\n return newRow;\r\n }\r\n}\r\n\r\n\r\n\n\n//# sourceURL=webpack://todo/./src/modules/view.js?"); /***/ }) diff --git a/src/index.html b/src/index.html index 735e040..723ad57 100644 --- a/src/index.html +++ b/src/index.html @@ -8,12 +8,18 @@
TODOs
+

Todos

${title}${title}
diff --git a/src/index.js b/src/index.js index 20b778e..7fde005 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,12 @@ import css from "./style.css"; import '@fortawesome/fontawesome-free/js/fontawesome' import '@fortawesome/fontawesome-free/js/solid' -import {listenForAdd} from "./modules/controller"; +import {Controller} from "./modules/controller"; + window.addEventListener("load", () => { - listenForAdd(); + const controller = new Controller(); + controller.listenForProjectAdd(); + controller.listenForTodoAdd(); + controller.listenForProjects(); }); diff --git a/src/modules/controller.js b/src/modules/controller.js index 597a1c3..59bbc58 100644 --- a/src/modules/controller.js +++ b/src/modules/controller.js @@ -1,15 +1,52 @@ -import {addTodo} from "./model.js"; -import {display} from "./view.js"; +import { View } from "./view"; +import { Model } from "./model.js"; -let todoInputField = document.querySelector("#todoInputField"); -const addButton = document.querySelector(".addTodoButton"); +class Controller { + model; + view; + todoInputField; + addTodoButton; + projectInputField; + addProjectButton; + currentProjectId; + allCurrentProjects; -function listenForAdd() { - console.log(addButton); - addButton.addEventListener("click", () => { - let todoTitle = todoInputField.value; - display(addTodo(todoTitle)); + constructor() { + this.model = new Model(); + this.view = new View(); + this.todoInputField = document.querySelector("#todoInputField"); + this.addTodoButton = document.querySelector(".addTodoButton"); + this.projectInputField = document.querySelector("#projectsInputField"); + this.addProjectButton = document.querySelector(".addProjectButton"); + this.currentProjectId = 0; + this.allCurrentProjects = document.querySelector("li"); + } + + listenForProjects() { + this.allCurrentProjects?.forEach((project) => { + project.addEventListener("click", (e) => { + this.currentProjectId = e.target.getAttribute("id"); + }); + }); + } + + listenForProjectAdd() { + this.addProjectButton.addEventListener("click", () => { + let projectTitle = this.projectInputField.value; + this.model.addProject(projectTitle); + this.view.displayProjects(this.model.getProjects()); + }); + } + + listenForTodoAdd() { + this.addTodoButton.addEventListener("click", () => { + let todoTitle = this.todoInputField.value; + this.model.addTodoToProject(this.currentProjectId); + this.view.displayTodos( + this.model.getProject(this.currentProjectId).getTodos() + ); }); + } } -export {listenForAdd}; \ No newline at end of file +export { Controller }; diff --git a/src/modules/entities.js b/src/modules/entities.js index 6a31b30..0646b09 100644 --- a/src/modules/entities.js +++ b/src/modules/entities.js @@ -1,14 +1,12 @@ class Todo { title; - description; - dueDate; - priority; + due; + prio; - constructor(title, description, dueDate, priority) { + constructor(title, due, prio) { this.title = title; - this.description = description; - this.dueDate = dueDate; - this.priority = priority; + this.due = due; + this.prio = prio; } setTitle(title) { @@ -19,29 +17,51 @@ class Todo { return this.title; } - setDescription(description) { - this.description = description; + + setDue(due) { + this.due = due; + } + + getDue() { + return this.due; + } + + setPriority(prio) { + this.prio = prio; } - getDescription() { - return this.description; + getPrio() { + return this.prio; } +} + +class Project { + title; + todoList = []; - setDueDate(dueDate) { - this.dueDate = dueDate; + constructor(title){ + this.title = title; + } + + setTitle(title){ + this.title = title; + } + + getTitle(){ + return this.title; } - getDueDate() { - return this.dueDate; + addTodo(title,due,prio){ + this.todoList.push(new Todo(title,due,prio)); } - setPriority(priority) { - this.priority = priority; + getTodo(id){ + return this.todoList[id]; } - getPriority() { - return this.priority; + getTodos(){ + return this.todoList; } } -export {Todo}; \ No newline at end of file +export {Todo, Project}; \ No newline at end of file diff --git a/src/modules/model.js b/src/modules/model.js index b578353..074649e 100644 --- a/src/modules/model.js +++ b/src/modules/model.js @@ -1,11 +1,33 @@ -import {Todo} from "./entities"; +import {Project} from "./entities"; -const todoList = []; +class Model { + projectList; + + constructor(){ + const defaultProject = new Project("default"); + this.projectList = [defaultProject]; + } + + addProject(title){ + console.log("inside model: add project"); + this.projectList.push(new Project(title)); + } + + getProject(id){ + console.log(this.projectList[id]); + return this.projectList[id]; + } + + getProjects(){ + console.log("inside model: get projects"); + return this.projectList; + } + + addTodoToProject(id, title, due, prio){ + this.projectList[id].addTodo(title,due,prio); + } -function addTodo(title, due, prio){ - let newTodo = new Todo(title, due, prio); - todoList.push(newTodo); - return todoList; } -export {addTodo}; \ No newline at end of file + +export {Model}; \ No newline at end of file diff --git a/src/modules/view.js b/src/modules/view.js index 805ae9d..32eff00 100644 --- a/src/modules/view.js +++ b/src/modules/view.js @@ -1,20 +1,41 @@ -const todoTable = document.querySelector("table"); +class View { + todoTable; + projectList; + constructor(){ + this.todoTable = document.querySelector("table"); + this.projectList = document.querySelector(".projectList"); + } -function display(currentTodoArray){ - // Wipeout current list - todoTable.innerHTML = ""; - // loop through list - currentTodoArray.forEach((todo)=>{ + displayProjects(currentProjectsList) { + this.projectList.innerHTML = ""; + currentProjectsList.forEach((project) => { + this.projectList.appendChild(this.createLi(project.title)); + }); + } + + createLi(projectTitle) { + const newLi = document.createElement("li"); + newLi.textContent = projectTitle; + let id = parseInt(newLi.previousElementSibling?.getAttribute("id")) +1 || 0; + newLi.setAttribute("id", id); + return newLi; + } + + displayTodos(currentTodoArray) { + // Wipeout current list + this.todoTable.innerHTML = ""; + // loop through list + currentTodoArray.forEach((todo) => { // Create and add a new row to the table - todoTable.appendChild(createRow(todo.title)); - }) + this.todoTable.appendChild(createRow(todo.title)); + }); + } + + createRow(title) { + const newRow = document.createElement("tr"); + newRow.innerHTML = ``; + return newRow; + } } -function createRow(title) { - console.log(title); - const newRow = document.createElement("tr"); - newRow.innerHTML=``; - return newRow; -} - -export {display}; \ No newline at end of file +export { View };
${title}${title}