diff --git a/app/projekty/index.html b/app/projekty/index.html index 5e23737..070e57e 100644 --- a/app/projekty/index.html +++ b/app/projekty/index.html @@ -40,7 +40,7 @@

your badass productivity app

Lista projektów

-
+
diff --git a/app/projekty/index.js b/app/projekty/index.js index 0973810..5e79e5b 100644 --- a/app/projekty/index.js +++ b/app/projekty/index.js @@ -44,8 +44,7 @@ const loadDataFromLocalStorage = () => { } } -const saveData = () => { - +const saveDataToLocalStorage = () => { localStorage.setItem("appData", JSON.stringify(appData)); } @@ -55,16 +54,30 @@ const loadTasksFromLocalStorage = () => { const { name } = appData.projects[project]; - if (name !== "") addTaskElement(name, project) + if (name !== "") addProjectElement(name, project) }); } -const validateAddTaskInput = () => { +const validateProjectInputData = () => Boolean(elements.taskInputField.value); + + + +const createProjectEntryInAppData = () => { + + if (!validateProjectInputData()) return; + + appData.projects[projectsID] = { + name: elements.taskInputField.value, + subtasks: { + active: [], + checked: [] + }, + log: [] // Po arrayu, czy obiekcie? + } - if (elements.taskInputField.value) addTaskElement() } -const addTaskElement = (name, project) => { +const addProjectElement = (name, project) => { const element = document.createElement("article"); element.classList.add("task", "flex", "between"); @@ -75,17 +88,15 @@ const addTaskElement = (name, project) => { element.innerHTML = `

${value}

- + ` - /** while powinno sprawdzać, czy dany klucz istnieje, a jeśli nie, to powinno pozostawiać wolny klucz do wykonania następnej operacji**/ while (appData.projects[projectsID]) { projectsID++; } - element.dataset.taskId = project ? project : projectsID @@ -93,8 +104,6 @@ const addTaskElement = (name, project) => { elements.mainTasksContainer.append(element); - - /** dla wolnego klucza projectsID tworzony jest nowy obiekt konkretnego taska **/ if (elements.taskInputField.value !== "") { appData.projects[projectsID] = { name: elements.taskInputField.value, @@ -106,13 +115,21 @@ const addTaskElement = (name, project) => { } } - elements.taskInputField.value = null; - saveData(); + saveDataToLocalStorage(); } + + + + + + + + + const addSubtaskElement = (name, state) => { const projectID = elements.taskDialog.dataset.taskId; @@ -133,9 +150,9 @@ const addSubtaskElement = (name, state) => { element.innerHTML = `

${value}

- + ` container.append(input); @@ -161,7 +178,7 @@ const addSubtaskElement = (name, state) => { } elements.subtaskInputField.value = null; - saveData(); + saveDataToLocalStorage(); } const validateAddSubtaskInput = () => { @@ -259,7 +276,7 @@ const addLogElement = (e) => { const logArr = [`${date} ${time}`, content] appData.projects[projectID]["log"].push(logArr) - saveData(); + saveDataToLocalStorage(); } @@ -267,10 +284,10 @@ const addLogElement = (e) => { const initializeEventListeners = () => { - elements.addTaskButton.addEventListener("click", () => validateAddTaskInput()); + elements.addTaskButton.addEventListener("click", createProjectEntryInAppData); elements.taskInputField.addEventListener("keydown", (e) => e.key === "Enter" - ? validateAddTaskInput() + ? validateProjectInputData() : undefined ); @@ -320,7 +337,7 @@ const initializeEventListeners = () => { appData.projects[projectID].subtasks.checked = []; elements.checkedSubtasksContainer.innerHTML = ""; - saveData(); + saveDataToLocalStorage(); } }) @@ -353,7 +370,7 @@ const initializeEventListeners = () => { appData.projects[projectID].subtasks[oppositeState].push(content); e.target.closest(".subtask-container").remove(); - saveData(); + saveDataToLocalStorage(); } }); @@ -415,7 +432,7 @@ initializeFunctionalities(); /*const clearProjectsData = () => { appData.projects = {}; - saveData(); + saveDataToLocalStorage(); } clearProjectsData();*/ diff --git a/app/projekty/index.old.html b/app/projekty/index.old.html deleted file mode 100644 index efb2f1d..0000000 --- a/app/projekty/index.old.html +++ /dev/null @@ -1,75 +0,0 @@ - - - - Supreme Pomodoro - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- click on item to enter full-screen mode & hold on item to mark for deletion -
- -
-
- - -
-
-
-
-
-
-

Lista projektów

-
- - -
-
- -
- -
-
- - diff --git a/app/projekty/index.old.js b/app/projekty/index.old.js deleted file mode 100644 index 25900d9..0000000 --- a/app/projekty/index.old.js +++ /dev/null @@ -1,373 +0,0 @@ -const elements = { - addTaskButton: document.querySelector(".add-task-button"), - editTasksButton: document.querySelector(".edit-tasks-button"), - taskInputField: document.querySelector(".task-input-field"), - mainTasksContainer: document.querySelector(".tasks"), - clearTasksButton: document.querySelector(".clear-tasks-data") -} - -const makeSureAllModalsAreClosed = () => { - - document.querySelectorAll("dialog").forEach(dialog => { - dialog.removeAttribute("open") - }) -} - -function loadDataFromLocalStorage() { - - if (localStorage.getItem("tasksData") !== null) { - elements.mainTasksContainer.innerHTML = localStorage.getItem("tasksData"); - - makeSureAllModalsAreClosed(); - } -} - -function saveData() { - localStorage.setItem("tasksData", elements.mainTasksContainer.innerHTML); -} - -const getTaskInputData = () => { - return elements.taskInputField.value; -} - -const addTaskEventListeners = () => { - - elements.addTaskButton.addEventListener("click", createTaskComponent); - - elements.taskInputField.addEventListener("keydown", (e) => { - if (e.key === "Enter") { - return createTaskComponent(); - } - }); - -} - -const clearTasksListEventListener = () => { - elements.clearTasksButton.addEventListener("click", () => { - - if(confirm("Czy jesteś pewien?")) { - - document.querySelectorAll(".to-remove").forEach(item => { - - item.remove(); - saveData(); - }); - - elements.editTasksButton.querySelector("span").textContent = "edit"; - } - }); -} - - - - - -function stopPropagationOnDragIcon(task) { - - task.querySelector(".drag-icon").addEventListener("click", (e) => { - e.stopPropagation(); - }); - - task.querySelector(".drag-icon").addEventListener("mousedown", (e) => { - e.stopPropagation(); - }); -} - -function editTextsInTasks(task) { - - return changeTextToInput(task); -} - -function changeTextToInput(task) { - - const texts = task.querySelectorAll(".editable"); - - texts.forEach(text => { - - text.addEventListener("dblclick", () => { - - if (text.querySelector("input") === null) { - - text.innerHTML = ``; - - changeInputToText(text); - } - }); - }); -} - -function changeInputToText(text) { - - const input = text.querySelector("input"); - - input.addEventListener("keydown", (e) => { - - if (e.key === "Enter") { - - const inputValue = input.value; - - text.innerHTML = `${inputValue}`; - saveData(); - } - }); - - document.querySelector("html").addEventListener("click", (e) => { - - if (!e.target.classList.contains("editable")) { - - text.innerHTML = input.value; - saveData(); - } - }); - - input.addEventListener("click", (e) => { - e.stopPropagation(); - }); -} - - - - - - -const editTasksButtonEventListener = () => { - - elements.editTasksButton.addEventListener("click", () => { - - console.log(elements.editTasksButton.dataset.editMode); - - if (elements.editTasksButton.dataset.editMode === "false") { - elements.editTasksButton.dataset.editMode = "true"; - editTasksModeOn(); - } else { - elements.editTasksButton.dataset.editMode = "false"; - editTasksModeOff(); - } - - }); -} - -function editTasksModeOn() { - - elements.editTasksButton.querySelector("span").textContent = "thumb_up"; -} - -function editTasksModeOff() { - - elements.editTasksButton.querySelector("span").textContent = "edit"; - - const tasks = document.querySelectorAll(".task"); - - tasks.forEach(task => { - - task.classList.remove("to-remove"); - }); -} - - -function addInitialEventListeners() { - - addTaskEventListeners(); - clearTasksListEventListener(); - editTasksButtonEventListener(); -} - - - - -/** NEW!!! --> ONE EVENT LISTENER WITH SWITCH instead of A LOT OF LISTENERS **/ - -const tasks = document.querySelectorAll(".task"); - -tasks.forEach(task => { - - task.addEventListener("click", () => { - task.classList.toggle("to-remove"); - }) -}); - -elements.mainTasksContainer.addEventListener("click", (e) => { - - let subtasks; - - switch (e.target.className) { - - case "task-container": - - if (elements.editTasksButton.dataset.editMode === "false") { - - console.log(e.target.closest(".task-element")) - - e.target.querySelector("dialog").setAttribute("open", "true"); - } else { - - e.target.closest(".task-element").classList.toggle("to-remove"); - } - - break; - - case "close contrast": - //dialog - e.target.closest("dialog").removeAttribute("open"); - break; - - case "add-subtask-button": - - const subtaskInput = e.target.closest(".flex").querySelector(".subtask-input-field"); - subtasks = e.target.closest("article").querySelector(".subtasks"); - createSubtaskComponent(subtaskInput, subtasks); - break; - - case "clear-subtasks-data warning": - - subtasks = e.target.closest("article").querySelector(".subtasks"); - - if(confirm("Czy jesteś pewien?")) { - subtasks.querySelectorAll(".to-remove").forEach(subtask => { - subtask.remove(); - }); - } - - saveData(); - break; - } -}); - -elements.mainTasksContainer.addEventListener("dblclick", (e) => { - - console.log(e.target.className); - switch (e.target.className) { - - case "article subtask-container": - e.target.closest(".subtask").classList.toggle("to-remove"); - break; - } -}) - -const toggleEditClass = (task) => { - - task.classList.toggle("to-remove"); -}; - - -function createTaskComponent() { - - const taskContainer = document.createElement("div"); - taskContainer.classList.add("task"); - taskContainer.classList.add("task-element"); - - taskContainer.innerHTML = ` -
-
-
-

${getTaskInputData()}

- - drag_indicator - -
-
- -
- double click on text to edit & hold on item to mark for deletion - -

${getTaskInputData()}

-
- -
-
- - - -
-
- -
- -
-
-
- `; - - stopPropagationOnDragIcon(taskContainer); - editTextsInTasks(taskContainer); - - if (getTaskInputData() !== "") { - elements.mainTasksContainer.append(taskContainer); - } - - saveData(); - elements.taskInputField.value = null; -} - -export function createSubtaskComponent(subtaskInput, subtasks) { - - const subtaskContainer = document.createElement("div"); - subtaskContainer.classList.add("subtask"); - subtaskContainer.classList.add("task-element"); - - subtaskContainer.innerHTML = ` -
-
-

${subtaskInput.value}

- - drag_indicator - -
-
- `; - - if (subtaskInput.value !== "") { - subtasks.append(subtaskContainer); - subtaskInput.value = null; - saveData(); - } - - stopPropagationOnDragIcon(subtaskContainer); - editTextsInTasks(subtaskContainer); - -} - -function addDragAndDropFunctionalities() { - - const tasksDragArea = document.querySelector(".tasks"); - const subtasksDragArea = document.querySelectorAll(".subtasks"); - - new Sortable(tasksDragArea, { - animation: 175, - onEnd: saveData, - //draggable: ".task-element", - //filter: "dialog", - handle: ".drag-icon" - }); - - subtasksDragArea.forEach(subtaskElement => { - new Sortable(subtaskElement, { - animation: 175, - onEnd: saveData, - handle: ".drag-icon" - }); - }); -} - - - -function initializeBuild() { - - loadDataFromLocalStorage(); - addInitialEventListeners(); - //addInitialTaskAndSubtaskListeners(); - addDragAndDropFunctionalities(); -} - -initializeBuild(); - diff --git a/app/projekty/js/addDragAndDropFunctionalities.js b/app/projekty/js/addDragAndDropFunctionalities.js new file mode 100644 index 0000000..b48a000 --- /dev/null +++ b/app/projekty/js/addDragAndDropFunctionalities.js @@ -0,0 +1,21 @@ +export default function addDragAndDropFunctionalities() { + + const tasksDragArea = document.querySelector(".tasks"); + const subtasksDragArea = document.querySelectorAll(".subtasks"); + + new Sortable(tasksDragArea, { + animation: 175, + onEnd: saveData, + //draggable: ".task-element", + //filter: "dialog", + handle: ".drag-icon" + }); + + subtasksDragArea.forEach(subtaskElement => { + new Sortable(subtaskElement, { + animation: 175, + onEnd: saveData, + handle: ".drag-icon" + }); + }); +} \ No newline at end of file diff --git a/app/projekty/js/functionalities/localStorage.js b/app/projekty/js/functionalities/localStorage.js new file mode 100644 index 0000000..e69de29 diff --git a/future-development.md b/future-development.md index b98ada3..1cd6c85 100644 --- a/future-development.md +++ b/future-development.md @@ -30,9 +30,9 @@ ### Październik - wykonane funkcjonalności w obrębie części "inbox"; -- przebudowa części "projekty", tak by taski i subtaski ładowały się z obiektu appData ("!important; ale ohyda, żeby do localStorage ładować zawartość (kod) HTML. Przemienić "projekty", by subtaski i taski były zapisywane do obiektu - podobnie, jak przy funkcjonalnościach "inbox": jeden dialog, w którym dane będą wyświetlane dynamicznie!!!"); -- - Po wykonaniu zadania przekreślić tekst i umieścić zadanie gdzieś na samym dole/ (np. po lewej stronie zadania dodać checkbox z możliwością zaznaczenia zadania jako zrobione); -- Dodana opcja dodawania notatek i przemyśleń do projektów z czasem automatycznie zbieranym; +- przebudowa części "projekty", tak by taski i subtaski ładowały się z obiektu appData; +- Po wykonaniu zadania przekreślić tekst i umieścić zadanie gdzieś na samym dole/ (np. po lewej stronie zadania dodać checkbox z możliwością zaznaczenia zadania jako zrobione); +- Dodana opcja dodawania notatek i przemyśleń do projektów z czasem automatycznie pobieranym po stronie użytkownika; ### 13.09.2023 - ikonki podmienione na bardziej prywatne rozwiązanie: https://fonts.coollabs.io/,