Add deleteProject function & add nicer CSS

Benjamin-Re · Apr 23, 2022 · 4b8a7af · 4b8a7af
1 parent 1299946
commit 4b8a7af
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 52 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -4,22 +4,23 @@
     <meta charset="utf-8" />
     <title>Output Management</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
   <script defer src="./main.js"></script></head>
   <body>
-    <header>TODOs</header>
+    <header><h1><i class="fa-solid fa-check"></i>TODOs Manager</h1></header>
     <aside>
-      <h1>Projects</h1>
+      <h3>Projects</h3>
       <input type="text" name="projectsInputField" id="projectsInputField">
-      <button class="addProjectButton">+</button>
-      <ul class="projectList">
+      <button class="addProjectButton btn btn-secondary">+</button>
+      <ul class="projectList list-group">
 
       </ul>
     </aside>
-    <main>
+
       <div class="content">
-        <h1>Todos</h1>
+        <h3>Todos</h3>
 
-        <button class="showPopupButton">+</button>
+        <button class="showPopupButton btn btn-secondary">+</button>
         <div class="popup">
           <label for="todoInputField">Title</label>
           <input type="text" name="todoInputField" id="todoInputField">
@@ -33,7 +34,7 @@ <h1>Todos</h1>
           </select>
           <button class="addTodoButton">Add</button>
         </div>
-        <table>
+        <table class="table">
           <thead>
             <tr>
               <th>Title</th>
@@ -45,7 +46,7 @@ <h1>Todos</h1>
           </tbody>
         </table>
       </div>
-    </main>
+
     <footer>Made by Benjamin-Re</footer>
   </body>
 </html>
diff --git a/dist/main.js b/dist/main.js
diff --git a/src/index.html b/src/index.html
@@ -4,22 +4,23 @@
     <meta charset="utf-8" />
     <title>Output Management</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
   </head>
   <body>
-    <header>TODOs</header>
+    <header><h1><i class="fa-solid fa-check"></i>TODOs Manager</h1></header>
     <aside>
-      <h1>Projects</h1>
+      <h3>Projects</h3>
       <input type="text" name="projectsInputField" id="projectsInputField">
-      <button class="addProjectButton">+</button>
-      <ul class="projectList">
+      <button class="addProjectButton btn btn-secondary">+</button>
+      <ul class="projectList list-group">
 
       </ul>
     </aside>
-    <main>
+
       <div class="content">
-        <h1>Todos</h1>
+        <h3>Todos</h3>
 
-        <button class="showPopupButton">+</button>
+        <button class="showPopupButton btn btn-secondary">+</button>
         <div class="popup">
           <label for="todoInputField">Title</label>
           <input type="text" name="todoInputField" id="todoInputField">
@@ -33,7 +34,7 @@ <h1>Todos</h1>
           </select>
           <button class="addTodoButton">Add</button>
         </div>
-        <table>
+        <table class="table">
           <thead>
             <tr>
               <th>Title</th>
@@ -45,7 +46,7 @@ <h1>Todos</h1>
           </tbody>
         </table>
       </div>
-    </main>
+
     <footer>Made by Benjamin-Re</footer>
   </body>
 </html>
diff --git a/src/modules/controller.js b/src/modules/controller.js
@@ -37,7 +37,7 @@ class Controller {
   initializeUI() {
     // Load stored data when the page is first loaded
     let data = this.getData();
-    if(data){
+    if (data) {
       console.log("There is data");
       this.model.revive(data);
     } else {
@@ -60,17 +60,22 @@ class Controller {
   }
 
   getData() {
-    let data = localStorage.getItem("projects");    
+    let data = localStorage.getItem("projects");
     return JSON.parse(data);
   }
 
-
-
   listenForProjects() {
     this.allCurrentProjects = Array.from(document.querySelectorAll("li"));
     this.allCurrentProjects?.forEach((project) => {
       project.addEventListener("click", (e) => {
-        this.currentProjectId = e.target.getAttribute("id");
+        // Check if user clicked on delete div
+        if (e.target.tagName === "svg") {
+          this.model.deleteProject(this.currentProjectId);
+          this.view.displayProjects(this.model.getProjects());
+          this.listenForProjects();
+          this.saveData();
+        }
+        this.currentProjectId = e.currentTarget.getAttribute("id");
         // Display all todos for active project
         this.view.displayTodos(
           this.model.getProject(this.currentProjectId).getTodos()
@@ -121,13 +126,22 @@ class Controller {
     let todoTitle = this.todoInputField.value;
     let todoDate = this.todoDate.value;
     let todoPrio = this.todoPrio.value;
-    if(this.isUpdate){
+    if (this.isUpdate) {
       // If we update dont create a new todo but overwrite the old one
       // The id of the todo to update is saved in a global variable
       // Also get the description as the popup is showing at this flow
-      let todoDescription = document.querySelector(`tr[id='${this.idToUpdate}']`).nextElementSibling.firstElementChild.firstElementChild.value;
-      this.model.updateTodo(this.currentProjectId, this.idToUpdate, todoTitle, todoDate, todoPrio, todoDescription);      
-      this.isUpdate=false;
+      let todoDescription = document.querySelector(
+        `tr[id='${this.idToUpdate}']`
+      ).nextElementSibling.firstElementChild.firstElementChild.value;
+      this.model.updateTodo(
+        this.currentProjectId,
+        this.idToUpdate,
+        todoTitle,
+        todoDate,
+        todoPrio,
+        todoDescription
+      );
+      this.isUpdate = false;
     } else {
       this.model.addTodoToProject(
         this.currentProjectId,
@@ -161,24 +175,26 @@ class Controller {
         this.view.displayTodos(
           this.model.getProject(this.currentProjectId).getTodos()
         );
-      this.saveData();
+        this.listenForTodos();
+        this.listenForEdit();
+        this.saveData();
       });
     });
   }
 
-  listenForEdit(){
+  listenForEdit() {
     const editIcons = Array.from(document.querySelectorAll(".edit-icon"));
-    editIcons.forEach((icon)=>{
-      icon.addEventListener("click", ()=>{
-        // Set the global update flag to true so the add button handlers can know. 
-        this.isUpdate=true;
+    editIcons.forEach((icon) => {
+      icon.addEventListener("click", () => {
+        // Set the global update flag to true so the add button handlers can know.
+        this.isUpdate = true;
         // Get id of todo to edit and save it in global variable
         this.idToUpdate =
           +icon.parentNode.parentNode.previousElementSibling.getAttribute("id");
         // Get data from the popup + descr
         this.popup.classList.add("active");
-      })
-    })
+      });
+    });
   }
 
   listenForTodos() {
@@ -212,15 +228,12 @@ class Controller {
             correspondingTodoId,
             e.target.value
           );
-        // Save the description
-        this.saveData();
+          // Save the description
+          this.saveData();
         }
       });
     });
   }
-
-
-
 }
 
 export { Controller };
diff --git a/src/modules/entities.js b/src/modules/entities.js
@@ -22,7 +22,6 @@ class Todo {
 
     setDescription(text){
         this.description=text;
-        console.log(this.description);
     }
 
     getDescription(){
@@ -57,10 +56,20 @@ class Todo {
 
 class Project {
     title;
+    static id = 0;
     todoList = [];
 
     constructor(title){
         this.title = title;
+        this.id = ++Project.id;
+    }
+
+    setId(id){
+        this.id = id;
+    }
+
+    getId(){
+        return this.id;
     }
 
     setTitle(title){

diff --git a/src/modules/model.js b/src/modules/model.js
@@ -50,7 +50,6 @@ class Model {
 
   addTodoToProject(id, title, due, prio) {
     this.projectList[id].addTodo(title, due, prio);
-
   }
 
   addDescriptionToTodo(projectId, todoId, text) {
@@ -60,6 +59,10 @@ class Model {
   updateTodo(projectId, todoId, title, due, prio, description) {
     this.projectList[projectId].setTodo(todoId, title, due, prio, description);
   }
+
+  deleteProject(id){
+    this.projectList.splice(id, 1);
+  }
 }
 
 export { Model };
diff --git a/src/modules/view.js b/src/modules/view.js
@@ -17,6 +17,7 @@ class View {
     createLi(projectTitle, id) {
       const newLi = document.createElement("li");
       newLi.textContent = projectTitle;
+      newLi.innerHTML = `${projectTitle} <div class="projectDel"><i class="fa-solid fa-x"></div>`;
       newLi.setAttribute("id", id);
       return newLi;
     }

diff --git a/src/style.css b/src/style.css
@@ -1,30 +1,72 @@
+:root {
+  --body-color: #e63946;
+  --header-color: #1d3557;
+  --footer-color: #1d3557 ;
+  --aside-color: #f1faee;
+  --content-color: #f1faee;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
 body {
-  background-color: red;
+  background-color: var(--body-color);
   height: 100vh;
+  width: 100vw;
   display: grid;
   grid-template-columns: 1fr 4fr;
-  grid-template-rows: 1fr 3fr 1fr;
+  grid-template-rows: .5fr 3fr .5fr;
   font-family: monospace;
 }
 
+header, aside, .content, footer {
+  padding: 0;
+}
+
+
+
+button {
+  padding: 10px;
+  border: none;
+}
+
 header {
-  background-color: aliceblue;
+  color: white;
+  background-color: var(--header-color);
+  font-size: x-large;
   grid-column: 1/3;
   grid-row: 1/2;
 }
 
 aside {
+  background-color: var(--aside-color);
   grid-column: 1/2;
   grid-row: 2/3;
 }
+
+ul {
+  list-style-type: none;
+}
+
+li {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
 .content {
-  background-color: coral;
+  padding-left: 1rem;
+  background-color: var(--content-color);
   grid-column: 2/3;
   grid-row: 2/3;
 }
 
 footer {
-  background-color: aqua;
+  color: white;
+  background-color: var(--footer-color);
   grid-column: 1/3;
   grid-row: 3/4;
 }