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
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=`| ${title} | `;\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 = `${title} | `;\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
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 = `| ${title} | `;
+ return newRow;
+ }
}
-function createRow(title) {
- console.log(title);
- const newRow = document.createElement("tr");
- newRow.innerHTML=`${title} | `;
- return newRow;
-}
-
-export {display};
\ No newline at end of file
+export { View };