From 5d6a42135b3b5ca95a2f9d58ed1516c7e501a3f6 Mon Sep 17 00:00:00 2001 From: Arek Date: Thu, 19 May 2022 20:57:29 +0200 Subject: [PATCH] feat: :sparkles: Turnieje MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Zmiana dodająca mozliwosc dodawania, edycji i usuwania turniejów --- .vscode/settings.json | 3 + frontend/panel_organizatora/index.html | 187 ++++++++++++++++++++++++ frontend/panel_organizatora/myscript.js | 154 +++++++++++++++++++ frontend/panel_organizatora/style.css | 108 ++++++++++++++ 4 files changed, 452 insertions(+) create mode 100644 .vscode/settings.json create mode 100644 frontend/panel_organizatora/index.html create mode 100644 frontend/panel_organizatora/myscript.js create mode 100644 frontend/panel_organizatora/style.css diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..667aff2 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "livePreview.defaultPreviewPath": "/frontend/tworzenie_/index.html" +} \ No newline at end of file diff --git a/frontend/panel_organizatora/index.html b/frontend/panel_organizatora/index.html new file mode 100644 index 0000000..f73b0a9 --- /dev/null +++ b/frontend/panel_organizatora/index.html @@ -0,0 +1,187 @@ + + + + Todo App + + + + + +
+

Padel

+ Wiadomości + Kalendarz turniejów + Ranking + Wyniki + Kontakt + JM +
+
+
+ +

+ + + +

+ +

Turnieje

+
    +
  • + + + + + +
    • +
  • + + + + + +
    • +
+ +

Rankingowe

+
    +
  • + + + + + +
    • +
+
+
+ + + + + \ No newline at end of file diff --git a/frontend/panel_organizatora/myscript.js b/frontend/panel_organizatora/myscript.js new file mode 100644 index 0000000..fd93c89 --- /dev/null +++ b/frontend/panel_organizatora/myscript.js @@ -0,0 +1,154 @@ +//Problem: user interaction doesn't provide desired results +//Solution: add interactivity so the user can manage daily tasks. + +var taskInput = document.getElementById("new-task"); // new-task +var addButton = document.getElementsByTagName("button")[0];//first button +var incompleteTasksHolder = document.getElementById("incomplete-tasks"); //incomplete-tasks +var completedTasksHolder = document.getElementById("completed-tasks"); //completed-tasks + +//New Task List item + +var createNewTaskElement = function (taskString) { + // create List Item + var listItem = document.createElement("li"); + // input checkbox + var checkBox = document.createElement("input"); + // label + var label = document.createElement("label"); + // input (text) + var editInput = document.createElement("input"); + // button.edit + var editButton = document.createElement("button"); + // button.delete + var deleteButton = document.createElement("button"); + + //Each element needs modified + + checkBox.type = "checkBox"; + editInput.type = "text"; + + editButton.innerText = "Edytuj"; + editButton.className = "edit"; + deleteButton.innerText = "Usuń"; + deleteButton.className = "delete"; + + label.innerText = taskString; + + // Each element needs appending + listItem.appendChild(checkBox); + listItem.appendChild(label); + listItem.appendChild(editInput); + listItem.appendChild(editButton); + listItem.appendChild(deleteButton); + + return listItem; +} + + +//Add a new task +var addTask = function () { + console.log("Add Task..."); + //Create a new list item with the text from the #new-task: + var listItem = createNewTaskElement(taskInput.value); + //Append listItem to incompleteTaskHolder + incompleteTasksHolder.appendChild(listItem); + bindTaskEvents(listItem, taskCompleted); + taskInput.value = ""; +} + +//Edit an existing task +var editTask = function () { + console.log("Edit Task..."); + + var listItem = this.parentNode; + + var editInput = listItem.querySelector("input[type=text]"); + var label = listItem.querySelector("label"); + + var containsClass = listItem.classList.contains("editMode"); + + + // if class of the parent is .editMode + if (containsClass) { + //Switch from .editMode + //label text become the input's value + label.innerText = editInput.value; + } else { + //Switch to .editMode + //input value becomes the labels text + editInput.value = label.innerText; + } + //Toggle .editMode on the parent + listItem.classList.toggle("editMode"); +} + +//Delete an existing task +var deleteTask = function () { + console.log("Delete Task..."); + //Remove the parent list item from the ul + var listItem = this.parentNode; + var ul = listItem.parentNode; + + ul.removeChild(listItem); +} + +//Mark a task as complete +var taskCompleted = function () { + console.log("Task Complete..."); + //When the Checkbox is checked + //Append the task list item to the #completed-tasks ul + var listItem = this.parentNode; + completedTasksHolder.appendChild(listItem); + bindTaskEvents(listItem, taskIncomplete); +} + + +//Mark a task as incomplete +var taskIncomplete = function () { + console.log("Task Incomplete..."); + //When the checkbox is unchecked appendTo #incomplete-tasks + var listItem = this.parentNode; + incompleteTasksHolder.appendChild(listItem); + bindTaskEvents(listItem, taskCompleted); +} + + +//Set the click handler to the addTask function +addButton.addEventListener("click", addTask); + + +var bindTaskEvents = function (taskListItem, checkBoxEventHandler) { + console.log("Bind List item events"); + // select listitems chidlren + var checkBox = taskListItem.querySelector('input[type="checkbox"]'); + var editButton = taskListItem.querySelector("button.edit"); + var deleteButton = taskListItem.querySelector("button.delete"); + //bind editTask to edit button + editButton.onclick = editTask; + //bind deleteTask to delete button + deleteButton.onclick = deleteTask; + //bind checkBoxEventHandler to checkbox + checkBox.onchange = checkBoxEventHandler; + +} + +//cycle over incompleteTaskHolder ul list items +for (var i = 0; i < incompleteTasksHolder.children.length; i++) { + //bind events to list item's children (taskCompleted) + bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted); +} + +//cycle over completedTaskHolder ul list items +for (var i = 0; i < completedTasksHolder.children.length; i++) { + //bind events to list item's children (taskCompleted) + bindTaskEvents(completedTasksHolder.children[i], taskIncomplete); +} + + + + + + + + + diff --git a/frontend/panel_organizatora/style.css b/frontend/panel_organizatora/style.css new file mode 100644 index 0000000..e9437bb --- /dev/null +++ b/frontend/panel_organizatora/style.css @@ -0,0 +1,108 @@ +* { + /* border: solid; */ +} + +a { + text-align: center; + line-height: 2; + color: white; + text-decoration: none; +} + + +header { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + background-color: #0f64f2; + margin: auto; + padding-top: 10px; + padding-bottom: 10px; + padding-right: 30px; + padding-left: 30px; + +} + +header>p { + text-align: center; + line-height: 0; +} + +.container { + height: 100%; + width: 100%; + display: flex; + justify-content: center; + +} + +.eventHeader { + text-align: center; + padding-top: 5px; + padding-bottom: 5px; +} + +.event { + background-color: #0f64f2; + color: white; + border-style: solid; + border-width: 2px; + margin-top: 25px; + margin-right: 25px; + flex-direction: column; + flex-wrap: wrap; + height: auto; + + +} + +.eventInside { + background-color: white; + color: #4C8BF5; + height: auto; + border: solid; + border-color: lightgray; + padding: 10px; + +} + +.eventInside>p { + color: lightgray; +} + +.myButton { + background-color: #4C8BF5; + border-radius: 28px; + border: 1px solid #4C8BF5; + display: inline-block; + cursor: pointer; + color: #ffffff; + font-family: Arial; + font-size: 9px; + padding: 8px 13px; + text-decoration: none; +} + +.dot { + height: 30px; + width: 30px; + color: white; + background-color: skyblue; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; +} + + +@media all and (max-width: 800px) { + header { + justify-content: space-around; + } +} + +@media all and (max-width: 800px) { + header { + flex-direction: colum; + } +} \ No newline at end of file