Remove uneeded template
This commit is contained in:
parent
19c79427ed
commit
814c114dcd
1 changed files with 0 additions and 146 deletions
|
|
@ -1,146 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<link rel="stylesheet" type="text/css"
|
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" />
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
||||||
<title>Kanban Board</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class="container mt-4">
|
|
||||||
<h1>Kanban Board</h1>
|
|
||||||
<form action="/update-task-status" method="POST" class="my-4">
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="title" class="form-label">Task Title</label>
|
|
||||||
<input type="text" class="form-control" id="title" name="title" required>
|
|
||||||
</div>
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="description" class="form-label">Task Description</label>
|
|
||||||
<textarea class="form-control" id="description" name="description" required></textarea>
|
|
||||||
</div>
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="status" class="form-label">Status</label>
|
|
||||||
<select class="form-select" id="status" name="status" required>
|
|
||||||
<option value="todo">To Do</option>
|
|
||||||
<option value="in_progress">In Progress</option>
|
|
||||||
<option value="done">Done</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<input type="hidden" name="task_id" id="task_id">
|
|
||||||
<button type="submit" class="btn btn-primary" onclick="updateTaskStatus(event)">Add Task</button>
|
|
||||||
</form>
|
|
||||||
<h2>Tasks:</h2>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col" id="todo">
|
|
||||||
<h3>To Do</h3>
|
|
||||||
<div class="sortable" data-status="todo">
|
|
||||||
{{ range .Tasks }}
|
|
||||||
{{ if eq .Status "todo" }}
|
|
||||||
<div class="card my-2" data-id="{{ .ID }}">
|
|
||||||
<div class="card-body">
|
|
||||||
<h5 class="card-title">{{ .Title }}</h5>
|
|
||||||
<p class="card-text">{{ .Description }}</p>
|
|
||||||
<p class="card-text"><strong>Status:</strong> {{ .Status }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col" id="in-progress">
|
|
||||||
<h3>In Progress</h3>
|
|
||||||
<div class="sortable" data-status="in_progress">
|
|
||||||
{{ range .Tasks }}
|
|
||||||
{{ if eq .Status "in_progress" }}
|
|
||||||
<div class="card my-2" data-id="{{ .ID }}">
|
|
||||||
<div class="card-body">
|
|
||||||
<h5 class="card-title">{{ .Title }}</h5>
|
|
||||||
<p class="card-text">{{ .Description }}</p>
|
|
||||||
<p class="card-text"><strong>Status:</strong> {{ .Status }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col" id="done">
|
|
||||||
<h3>Done</h3>
|
|
||||||
<div class="sortable" data-status="done">
|
|
||||||
{{ range .Tasks }}
|
|
||||||
{{ if eq .Status "done" }}
|
|
||||||
<div class="card my-2" data-id="{{ .ID }}">
|
|
||||||
<div class="card-body">
|
|
||||||
<h5 class="card-title">{{ .Title }}</h5>
|
|
||||||
<p class="card-text">{{ .Description }}</p>
|
|
||||||
<p class="card-text"><strong>Status:</strong> {{ .Status }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.13.0/Sortable.min.js"></script>
|
|
||||||
<script>
|
|
||||||
function updateTaskStatus(event) {
|
|
||||||
event.preventDefault();
|
|
||||||
var form = event.target.closest('form');
|
|
||||||
var taskId = form.querySelector('#task_id').value;
|
|
||||||
var newStatus = form.querySelector('#status').value;
|
|
||||||
fetch(form.action, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json'
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ id: taskId, status: newStatus })
|
|
||||||
}).then(function () {
|
|
||||||
// Update the task status in the card
|
|
||||||
var card = form.closest('.card');
|
|
||||||
card.querySelector('.card-text:last-child').innerHTML = '<strong>Status:</strong> ' + newStatus;
|
|
||||||
}).catch(function (error) {
|
|
||||||
console.error('Error:', error);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
|
||||||
var sortableContainers = [].slice.call(document.querySelectorAll('.sortable'));
|
|
||||||
sortableContainers.forEach(function (container) {
|
|
||||||
new Sortable(container, {
|
|
||||||
group: 'kanban',
|
|
||||||
draggable: '.card',
|
|
||||||
animation: 150,
|
|
||||||
handle: '.card',
|
|
||||||
onEnd: function (evt) {
|
|
||||||
var taskId = evt.item.getAttribute('data-id');
|
|
||||||
var newStatus = evt.to.getAttribute('data-status');
|
|
||||||
|
|
||||||
// Update the task status in the backend
|
|
||||||
fetch('/update-task-status', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json'
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ id: taskId, status: newStatus })
|
|
||||||
}).then(function (response) {
|
|
||||||
if (response.ok) {
|
|
||||||
// Update the task status in the card
|
|
||||||
evt.item.querySelector('.card-text:last-child').innerHTML = '<strong>Status:</strong> ' + newStatus;
|
|
||||||
} else {
|
|
||||||
console.error('Failed to update task status:', response.status);
|
|
||||||
}
|
|
||||||
}).catch(function (error) {
|
|
||||||
console.error('Error:', error);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in a new issue