feat: ✨ Turnieje
Zmiana dodająca mozliwosc dodawania, edycji i usuwania turniejów
This commit is contained in:
Arek
parent
ddbcc3cb46
commit
5d6a42135b
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"livePreview.defaultPreviewPath": "/frontend/tworzenie_/index.html"
|
||||||
|
}
|
||||||
187
frontend/panel_organizatora/index.html
Normal file
187
frontend/panel_organizatora/index.html
Normal file
@ -0,0 +1,187 @@
|
|||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Todo App</title>
|
||||||
|
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
|
||||||
|
<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<p> Padel</p>
|
||||||
|
<a href="#">Wiadomości</a>
|
||||||
|
<a href="#">Kalendarz turniejów</a>
|
||||||
|
<a href="#">Ranking</a>
|
||||||
|
<a href="#">Wyniki</a>
|
||||||
|
<a href="#">Kontakt</a>
|
||||||
|
<span class="dot">JM</span>
|
||||||
|
</header>
|
||||||
|
<div class="container">
|
||||||
|
<div class="tournametns_add">
|
||||||
|
<style scoped>
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li * {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
li,
|
||||||
|
h3 {
|
||||||
|
clear: both;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
button {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.edit {
|
||||||
|
padding: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.delete {
|
||||||
|
padding: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background: none;
|
||||||
|
border: 0px;
|
||||||
|
color: #888;
|
||||||
|
font-size: 15px;
|
||||||
|
width: 60px;
|
||||||
|
font-family: Lato, sans-serif;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3,
|
||||||
|
label[for='new-task'] {
|
||||||
|
color: gray;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 15px;
|
||||||
|
border-bottom: 2px solid #333;
|
||||||
|
padding: 30px 0 10px;
|
||||||
|
margin: 0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"] {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 18px;
|
||||||
|
height: 18px;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-family: Lato, sans-serif;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"]:focus {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Nowy turniej */
|
||||||
|
label[for='new-task'] {
|
||||||
|
display: block;
|
||||||
|
margin: 0 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input#new-task {
|
||||||
|
float: left;
|
||||||
|
width: 318px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p>button:hover {
|
||||||
|
color: #0FC57C;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*lista turniejów*/
|
||||||
|
li {
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 20px 0;
|
||||||
|
border-bottom: 1px solid lightblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
li>input[type="checkbox"] {
|
||||||
|
margin: 0 10px;
|
||||||
|
position: relative;
|
||||||
|
top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li>label {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 40px;
|
||||||
|
width: 237px;
|
||||||
|
padding: 0 0 0 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li>input[type="text"] {
|
||||||
|
width: 226px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li>.delete:hover {
|
||||||
|
color: #CF2323;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li input[type=text] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li.editMode input[type=text] {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li.editMode label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<p>
|
||||||
|
<label for="new-task">Dodawanie turnieju</label>
|
||||||
|
<input id="new-task" type="text">
|
||||||
|
<button>Dodaj</button>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Turnieje</h3>
|
||||||
|
<ul id="incomplete-tasks">
|
||||||
|
<li>
|
||||||
|
<input type="checkbox">
|
||||||
|
<label>Turniej w Rzeszowie</label>
|
||||||
|
<input type="text">
|
||||||
|
<button class="edit">Edytuj</button>
|
||||||
|
<button class="delete">Usuń</button>
|
||||||
|
</li>
|
||||||
|
<li class="editMode">
|
||||||
|
<input type="checkbox">
|
||||||
|
<label>Turniej w Łodzi</label>
|
||||||
|
<input type="text" value="Turniej w">
|
||||||
|
<button class="edit">Edytuj</button>
|
||||||
|
<button class="delete">Usuń</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Rankingowe</h3>
|
||||||
|
<ul id="completed-tasks">
|
||||||
|
<li>
|
||||||
|
<input type="checkbox" checked="">
|
||||||
|
<label>Turniej w Warszawie</label>
|
||||||
|
<input type="text">
|
||||||
|
<button class="edit">Edycja</button>
|
||||||
|
<button class="delete">Usuń</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="myscript.js"></script>
|
||||||
|
|
||||||
|
</html>
|
||||||
154
frontend/panel_organizatora/myscript.js
Normal file
154
frontend/panel_organizatora/myscript.js
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
108
frontend/panel_organizatora/style.css
Normal file
108
frontend/panel_organizatora/style.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user