180 lines
5.0 KiB
HTML
180 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>To-do CRUD</title>
|
|
<style>
|
|
input[type='submit'], button, [aria-label] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
#spoiler {
|
|
display: none;
|
|
}
|
|
|
|
table {
|
|
font-family: Arial, sans-serif;
|
|
border: 1px solid;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th {
|
|
background-color: #0066CC;
|
|
color: white;
|
|
}
|
|
|
|
td {
|
|
border: 1px solid;
|
|
padding: 5px;
|
|
}
|
|
</style>
|
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
|
|
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
|
crossorigin="anonymous"></script>
|
|
</head>
|
|
<body>
|
|
<center><h1>To-do CRUD</h1></center>
|
|
<h3>Add</h3>
|
|
<form action="javascript:void(0);" method="POST" onsubmit="addItem()">
|
|
<input type="text" id="add-name" placeholder="New to-do">
|
|
<input type="submit" value="Add">
|
|
</form>
|
|
|
|
<div id="spoiler">
|
|
<h3>Edit</h3>
|
|
<form class="my-form">
|
|
<input type="hidden" id="edit-id">
|
|
<input type="checkbox" id="edit-isComplete">
|
|
<input type="text" id="edit-name">
|
|
<input type="submit" value="Edit" /> <a onclick="closeInput()" aria-label="Close">✖</a>
|
|
</form>
|
|
</div>
|
|
|
|
<p id="counter"></p>
|
|
|
|
<table>
|
|
<tr>
|
|
<th>Is Complete</th>
|
|
<th>Name</th>
|
|
<th></th>
|
|
<th></th>
|
|
</tr>
|
|
<tbody id="todos"></tbody>
|
|
</table>
|
|
|
|
<script>
|
|
var uri = 'api/todo';
|
|
var todos = null;
|
|
function getCount(data) {
|
|
var el = $('#counter');
|
|
var name = 'to-do';
|
|
if (data) {
|
|
if (data > 1) {
|
|
name = 'to-dos';
|
|
}
|
|
el.text(data + ' ' + name);
|
|
} else {
|
|
el.html('No ' + name);
|
|
}
|
|
};
|
|
|
|
$(document).ready(function () {
|
|
getData();
|
|
});
|
|
|
|
function getData() {
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: uri,
|
|
success: function (data) {
|
|
$('#todos').empty();
|
|
getCount(data.length);
|
|
$.each(data, function (key, item) {
|
|
var checked = '';
|
|
if (item.isComplete) {
|
|
checked = 'checked';
|
|
}
|
|
|
|
$('<tr><td><input disabled=true type="checkbox" ' + checked + '></td><td>' + item.name + '</td>' +
|
|
'<td><button onclick="editItem(' + item.id + ')">Edit</button></td><td><button onclick="deleteItem(' + item.id + ')">' +
|
|
'Delete</button></td></tr>').appendTo($('#todos'));
|
|
});
|
|
|
|
todos = data;
|
|
}
|
|
});
|
|
};
|
|
|
|
function addItem() {
|
|
var item = {
|
|
'name': $('#add-name').val(),
|
|
'isComplete': false
|
|
};
|
|
|
|
$.ajax({
|
|
type: 'post',
|
|
accepts: 'application/json',
|
|
url: uri,
|
|
contentType: 'application/json',
|
|
data: JSON.stringify(item),
|
|
success: function (result) {
|
|
getData();
|
|
$('#add-name').val('');
|
|
}
|
|
});
|
|
};
|
|
|
|
function deleteItem(id) {
|
|
$.ajax({
|
|
url: uri + '/' + id,
|
|
type: 'DELETE',
|
|
success: function (result) {
|
|
getData();
|
|
}
|
|
});
|
|
};
|
|
|
|
function editItem(id) {
|
|
$.each(todos, function (key, item) {
|
|
if (item.id === id) {
|
|
var editName = $('#edit-name');
|
|
editName.val(item.name);
|
|
|
|
var editId = $('#edit-id');
|
|
editId.val(item.id);
|
|
|
|
var editIsComplete = $('#edit-isComplete');
|
|
editIsComplete.val(item.isComplete);
|
|
}
|
|
});
|
|
$('#spoiler').css({ 'display': 'block' });
|
|
};
|
|
|
|
$('.my-form').on('submit', function () {
|
|
var item = {
|
|
'name': $('#edit-name').val(),
|
|
'isComplete': $('#edit-isComplete').is(':checked'),
|
|
'id': $('#edit-id').val()
|
|
};
|
|
|
|
$.ajax({
|
|
url: uri + '/' + $('#edit-id').val(),
|
|
type: 'PUT',
|
|
accepts: 'application/json',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify(item),
|
|
success: function (result) {
|
|
getData();
|
|
}
|
|
});
|
|
closeInput();
|
|
return false;
|
|
});
|
|
|
|
function closeInput() {
|
|
$('#spoiler').css({ 'display': 'none' });
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|