84 lines
2.4 KiB
HTML
84 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>TODO LIST</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<h1>TODO List - Kubernetes</h1>
|
|
|
|
<input id="task" placeholder="napis ulohu">
|
|
<input id="due" type="datetime-local">
|
|
<button onclick="addTask()">Pridaj</button>
|
|
|
|
<div id="list"></div>
|
|
</div>
|
|
|
|
<script>
|
|
async function loadTasks() {
|
|
const res = await fetch('http://localhost:30007/tasks');
|
|
const data = await res.json();
|
|
|
|
const list = document.getElementById('list');
|
|
list.innerHTML = "";
|
|
|
|
data.forEach(t => {
|
|
const li = document.createElement('div');
|
|
li.className = "task";
|
|
|
|
li.innerHTML = `
|
|
<span>
|
|
${t.text} |
|
|
${t.due ? t.due.split('T')[0] : ""} |
|
|
${t.due ? t.due.split('T')[1] : ""}
|
|
</span>
|
|
<div class="buttons">
|
|
<button class="delete" onclick="deleteTask('${t._id}')">X</button>
|
|
<button class="edit" onclick="editTask('${t._id}', '${t.text}', '${t.due}')">Edit</button>
|
|
</div>
|
|
`;
|
|
|
|
list.appendChild(li);
|
|
});
|
|
}
|
|
|
|
async function addTask() {
|
|
const text = document.getElementById('task').value;
|
|
const due = document.getElementById('due').value;
|
|
|
|
await fetch('http://localhost:30007/tasks', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({text, due})
|
|
});
|
|
|
|
loadTasks();
|
|
}
|
|
|
|
async function deleteTask(id) {
|
|
await fetch(`http://localhost:30007/tasks/${id}`, {
|
|
method: 'DELETE'
|
|
});
|
|
loadTasks();
|
|
}
|
|
|
|
async function editTask(id, oldText, oldDue) {
|
|
const text = prompt("novy text:", oldText);
|
|
const due = prompt("novy datum:", oldDue);
|
|
|
|
await fetch(`http://localhost:30007/tasks/${id}`, {
|
|
method: 'PUT',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({text, due})
|
|
});
|
|
|
|
loadTasks();
|
|
}
|
|
|
|
loadTasks();
|
|
</script>
|
|
</body>
|
|
</html>
|