Refactor modules to use classes

Benjamin-Re · Apr 14, 2022 · 8893677 · 8893677
1 parent 116bfba
commit 8893677
Show file tree

Hide file tree

Showing 8 changed files with 178 additions and 62 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -8,12 +8,18 @@
   <body>
     <header>TODOs</header>
     <aside>
-      Projects
+      <h1>Projects</h1>
+      <input type="text" name="projectsInputField" id="projectsInputField">
+      <button class="addProjectButton">+</button>
+      <ul class="projectList">
+
+      </ul>
     </aside>
     <main>
       <input type="text" name="todoInputField" id="todoInputField">
       <button class="addTodoButton">+</button>
       <div class="content">
+        <h1>Todos</h1>
         <table>
           <thead>
             <tr>

diff --git a/dist/main.js b/dist/main.js
diff --git a/src/index.html b/src/index.html
@@ -8,12 +8,18 @@
   <body>
     <header>TODOs</header>
     <aside>
-      Projects
+      <h1>Projects</h1>
+      <input type="text" name="projectsInputField" id="projectsInputField">
+      <button class="addProjectButton">+</button>
+      <ul class="projectList">
+
+      </ul>
     </aside>
     <main>
       <input type="text" name="todoInputField" id="todoInputField">
       <button class="addTodoButton">+</button>
       <div class="content">
+        <h1>Todos</h1>
         <table>
           <thead>
             <tr>

diff --git 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
@@ -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};
+export { Controller };
diff --git 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};
+export {Todo, Project};
diff --git 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};
+
+export {Model};