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
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Lista projektów
-
-
-
- edit
-
-
-
-
- delete_outline
-
-
-
-
-
-
-
-
-
-
-
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()}
-
-
-
-
-
-
-
- add
-
-
-
-
- delete_outline
-
-
-
-
-
-
-
-
-
-
- `;
-
- 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/,