feat: add table for todolist rendering

todo/src/components/navbar.js

@@ -2,9 +2,14 @@ function navbar(projects) {
     let nav = document.createElement('nav');
     nav.classList.add('nav');
 
+    let heading = document.createElement('h1');
+    heading.classList.add(['project-heading']);
+    heading.textContent = 'Projects';
+
     let projectsDiv = projectButtons(projects);
     let addProjectBtn = addProject();
 
+    nav.appendChild(heading);
     nav.appendChild(projectsDiv);
     nav.appendChild(addProjectBtn);
     
@@ -16,12 +21,10 @@ function projectButtons(projects) {
     projectsDiv.classList.add(['projects']);
 
     projects.forEach(e => {
-        if (e.name !== 'default') {
             let btn = document.createElement('button');
             btn.classList.add(['btn', 'project-btn']);
             btn.textContent = e.name; 
             projectsDiv.append(btn);
-        };
     });
     return projectsDiv;
 }

todo/src/components/todo.js

@@ -24,7 +24,7 @@ class todoHandler {
     constructor(projects=null) {
         if (projects) {
             this.projects = projects;
-        } else {
+        } else if (!this.projects) {
             this.projects = [new createProject('default')];
         }
     }
@@ -35,6 +35,10 @@ class todoHandler {
     getTodos() {
         return this.projects.map(item => item.todos);
     }    
+
+    getTodosFromProject(project) {
+        return this.projects.filter((item) => item.name === project)[0].todos;
+    }
     
     addTodo(project = 'default', title, description, dueDate, pomodoros) {
         let index = this.projects.findIndex(x => x.name === project);

todo/src/components/todoComponent.js

@@ -0,0 +1,43 @@
+function todoTableComponent(todos) {
+    const div = document.createElement('div');
+    div.classList.add('todos');
+
+    if (todos.length > 0) {
+        const table = document.createElement('table');
+        table.classList.add(['table']);
+
+        todos.forEach(element => {
+            const tr = document.createElement('tr');
+            const tdTitle = document.createElement('td');
+            const tdDesc = document.createElement('td');
+            const tdDueDate = document.createElement('td');
+            const tdPomodoro = document.createElement('td');
+            const tdCompleted = document.createElement('td');
+
+            tdTitle.textContent = element.title;
+            tdDesc.textContent = element.description;
+            tdDueDate.textContent = element.dueDate;
+            tdPomodoro.textContent = element.pomodoros;
+            tdCompleted.textContent = element.completed;
+
+            tr.appendChild(tdTitle);
+            tr.appendChild(tdDesc);
+            tr.appendChild(tdDueDate);
+            tr.appendChild(tdPomodoro);
+            tr.appendChild(tdCompleted);
+
+            table.appendChild(tr);
+        });
+        
+        div.appendChild(table);
+    } else {
+        div.textContent = 'All tasks completed';
+    }
+    return div;
+}
+
+function addTodo() {
+
+}
+
+export { todoTableComponent }

todo/src/index.js

@@ -1,3 +1,4 @@
+import { todoTableComponent } from "./components/todoComponent";
 import { navbar } from "./components/navbar";
 import { todoHandler } from "./components/todo";
 import { save, load } from "./components/storage";
@@ -13,13 +14,30 @@ if (data) {
     todos = new todoHandler();
 }
 
-// todoHandler().addTodo('default', 'test', 'some stuff', 'today', 5);
+let projects = todos.getProjects();
+
+// starter test data to remove
 todos.addProject('job');
 todos.addTodo('default', 'test default 2', 'some stuff', 'today', 5);
 todos.addTodo('default', 'default 2', 'some stuff', 'today', 5);
 
+const defaultProject = todos.getTodosFromProject('default');
 
-document.body.appendChild(navbar(todos.getProjects()));
+function website() {
+    const div = document.createElement('div');
+    div.classList.add('container');
+
+    const _navbar = navbar(projects);
+    const _todos = todoTableComponent(defaultProject);
+
+    div.appendChild(_navbar);
+    div.appendChild(_todos);
+
+    document.body.appendChild(div);
+
+}
+
+website();
 
 // todos.addTodo('chores', 'choretest', 'some stuff', 'today', 5);
 // todos.delProject('de');