initial

hack-rpi · Mar 30, 2024 · 7c10f2d · 7c10f2d
1 parent d740db0
commit 7c10f2d
Show file tree

Hide file tree

Showing 3 changed files with 197 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<html>
+    <head>
+        <meta charset="UTF-8">        
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <div id="list-menu">
+            <div id="status"></div>
+            <input id="new-list-input" type="text">
+            <button id="add-list">Add</button>
+        </div>
+
+        <!-- <h2 class="list-header"></h2>
+                <input type="text">
+                <button>Add</button>
+                <button>Delete List</button>
+                <div class="item-list">
+                    <div class="item">
+                        <input type="text">
+                        <button>Delete Item</button>
+                        <label>
+                            <input id="" type="checkbox">
+                        </label>
+                    </div>
+
+                </div> -->
+
+        <div id="list-container">
+            <div class="list">
+
+            </div>
+        </div>
+        <script src="index.js"></script>
+    </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,161 @@
+const endpoint = "https://todo.hackrpi.com";
+const addListElement = document.getElementById("add-list");
+
+
+addListElement.addEventListener("click", function(){
+    addList();
+});
+
+const listContainerElement = document.getElementById('list-container');
+const newListInputElement = document.getElementById('new-list-input');
+
+async function fetchLists() {
+    try {
+        const response = await fetch(endpoint+'/GetLists', {headers:{"authorization":"4b07c4ccaf003eb706298571326bda19"}});
+        const lists = await response.json();
+        renderLists(lists);
+    } catch (error) {
+        console.error('Error fetching lists:', error);
+    }
+}
+
+async function addList() {
+    const title = newListInputElement.value.trim();
+    if (title) {
+        try {
+            const response = await fetch(endpoint+'/AddList', {
+                method: 'POST',
+                headers:{"authorization":"4b07c4ccaf003eb706298571326bda19"},
+                body: {
+                    listName: title
+                },
+            });
+            const newList = await response.json();
+            renderList(newList);
+            newListInputElement.value = '';
+        } catch (error) {
+            console.error('Error adding list:', error);
+        }
+    }
+}
+
+async function deleteList(listIdParam) {
+    try {
+    await fetch(`${endpoint}/DeleteList` + new URLSearchParams({
+        listId: listIdParam,
+    }), {
+        method: 'DELETE',
+    });
+    const listElement = document.getElementById(`list-${listIdParam}`);
+    listContainerElement.removeChild(listElement);
+    } catch (error) {
+    console.error('Error deleting list:', error);
+    }
+}
+
+function renderLists(lists) {
+    listContainerElement.innerHTML = '';
+    lists.forEach(renderList);
+}
+
+const listHTML = `
+<div class="list">
+    <h2 class="list-header"></h2>
+    <input type="text">
+    <button>Add</button>
+    <button>Delete List</button>
+    <div class="item-list"></div>
+</div>
+`;
+
+function renderList(list) {
+    let tempHTML = `
+    <div id="list-${list.id}" class="list">
+        <h2 class="list-header">${list.title}</h2>
+        <input type="text">
+        <button>Add</button>
+        <button id="delete-list-${list.id}">Delete List</button>
+        <div class="item-list"></div>
+    </div>
+    `;
+
+    document.getElementById("list-container").insertAdjacentHTML("beforeend", tempHTML);
+    document.getElementById(`delete-list-${list.id}`).onclick = () => deleteList(list.id);
+
+    list.tasks.forEach(task => {
+        createTaskElement(task, list.id);
+    });
+
+}
+
+function createTaskElement(task, listId) {
+    let tempHTML = `
+    <div id="task-${task.id}" class="item ${task.completed ? "completed":""}">
+        <input type="text" value=${task.description}>
+        <button id="delete-${task.id}">Delete Item</button>
+        <label>
+            <input id="checkbox-${task.id}" type="checkbox" ${task.completed ? "checked":""}>
+        </label>
+    </div>
+    `;
+
+    document.getElementById("list-container").insertAdjacentHTML("beforeend", tempHTML);
+
+    document.getElementById(`checkbox-${task.id}`).onclick = () => updateTask(listId, task.id, !task.completed);
+    document.getElementById(`delete-${task.id}`).onclick = () => deleteTask(listId, task.id);
+
+}
+
+async function addTask(listId) {
+    const taskInput = document.getElementById(`newTaskInput-${listId}`);
+    const description = taskInput.value.trim();
+    if (description) {
+    try {
+        const response = await fetch(`/api/lists/${listId}/tasks`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ description }),
+        });
+        const newTask = await response.json();
+        const listElement = document.getElementById(`list-${listId}`);
+        const taskList = listElement.querySelector('ul');
+        const taskElement = createTaskElement(newTask, listId);
+        taskList.appendChild(taskElement);
+        taskInput.value = '';
+    } catch (error) {
+        console.error('Error adding task:', error);
+    }
+    }
+}
+
+async function updateTask(listId, taskId, completed) {
+    try {
+    await fetch(`/api/lists/${listId}/tasks/${taskId}`, {
+        method: 'PUT',
+        headers:{"authorization":"4b07c4ccaf003eb706298571326bda19"},
+        body: JSON.stringify({ completed }),
+    });
+    const taskElement = document.getElementById(`task-${taskId}`);
+    taskElement.classList.toggle('completed', completed);
+    } catch (error) {
+    console.error('Error updating task:', error);
+    }
+}
+
+async function deleteTask(listId, taskId) {
+    try {
+    await fetch(`/api/lists/${listId}/tasks/${taskId}`, {
+        method: 'DELETE',
+    });
+    const taskElement = document.getElementById(`task-${taskId}`);
+    const listElement = document.getElementById(`list-${listId}`);
+    const taskList = listElement.querySelector('.item-list');
+    taskList.remove(taskElement);
+    } catch (error) {
+        console.error('Error deleting task:', error);
+    }
+}
+
+fetchLists();
diff --git a/style.css b/style.css