Notes

@{
ViewData["Title"] = "Home Page";
}

<div class="row mt-5">
<div class="col-4 border rounded shadow-sm pt-2 pb-2">
<form id="frm">

<input type="hidden" id="Id" value="" />
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" id="Name" />
</div>

<div class="form-group">
<div class="custom-control custom-checkbox my-1 mr-sm-2">
<input type="checkbox" class="custom-control-input" id="IsComplete">
<label class="custom-control-label" for="IsComplete">Statu</label>
</div>
</div>

<div class="form-group mt-5">
<input type="button" class="btn btn-dark btn-sm float-right" value="Save" id="save" />
<input type="button" class="btn btn-warning btn-sm float-right ml-1 mr-1" value="Update" id="edit" />
<input type="button" class="btn btn-danger btn-sm float-left" value="Cancel" id="cancel" />
</div>
</form>
</div>

<div class="col ml-1 border rounded shadow-sm pt-2 pb-2">
<table class="table table-hover" id="todo">
<thead>
<tr>
<th>Name</th>
<th>Result</th>
<th>Options</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>



<div class="row mt-5">
<div class="col border rounded shadow-sm pt-2 pb-2">
<table class="table table-hover" id="example">
<thead></thead>
<tbody></tbody>
</table>
</div>
</div>


@section Scripts{


<script>// https://www.jqueryscript.net/demo/Highly-Customizable-jQuery-Toast-Message-Plugin-Toastr/

toastr.options = {
"closeButton": false,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-top-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}

var MessagePostion = {
TOAST_BOTTOM_FULL_WIDTH: 'toast-bottom-full-width',
TOAST_TOP_FULL_WIDTH: 'toast-top-full-width',
TOAST_TOP_LEFT: 'toast-top-left',
TOAST_TOP_RIGHT: 'toast-top-right',
TOAST_BOTTOM_RIGHT: 'toast-bottom-right',
TOAST_BOTTOM_LEFT: 'toast-bottom-left',
TOAST_TOP_CENTER: 'toast-top-center'
}

var MessageType = {
SUCCESS: 'success',
ERROR: 'error',
INFO: 'info',
WARNING: 'warning'
}

function Toast(type, css, msg) {
this.type = type;
this.css = css;
this.msg = msg;

}

function showToast(type, location, msg) {
var t = new Toast(type, location, msg)
toastr.options.positionClass = t.css;
toastr[t.type](t.msg);
}

$(document).ready(function () {
const url = "http://localhost:5000/api/todoitems";

const status = {
EDIT: 'edit',
SAVE: 'save'
}

let statu = status.SAVE;




















$("#example").DataTable({
ajax: {
url: url,
dataSrc: '',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
type: "GET"
},
columns: [
{ "title": "Id", data: "id", visible: false },
{ "title": "Name", data: "name" },
{ "title": "Result", data: "isComplete" },
{
"title": "Options", "mRender": function (data, type, row) {
return `<button data-id="${row.id}" class="btn btn-sm btn-outline-primary details"> <i class="fa fa-search"></i></button>
<button data-id="${row.id}" class="btn btn-sm btn-outline-warning edit"> <i class="fa fa-pencil"></i></button>
<button data-id="${row.id}" class="btn btn-sm btn-outline-danger delete"> <i class="fa fa-trash"></i></button> `;
}
},
],
dom: 'Bfrtip',
"iDisplayLength": 10,
buttons: [
{
extend: 'copyHtml5',
exportOptions: {
columns: [0, ':visible']
}
},
{
extend: 'excelHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
exportOptions: {
columns: [0, 1, 2]
}
}
]
});
$(".dt-button").removeClass().addClass("btn btn-outline-secondary");
$(".table").removeClass().addClass("table table-hover mt-3");



function List() {
$.getJSON(url, function (data) {
$("table#todo tbody tr").remove();
statu = status.SAVE;
$.each(data, function (key, value) {

let result = "";
let text = "";
if (value.isComplete) {
result = "success";
text = "Completed";
}
else {
result = "danger";
text = "Pending ...";
}

$("table#todo tbody").append(`
<tr>
<td>${value.name}</td>
<td><span class="badge badge-${result}">${text}</span></td>
<td>
<button data-id="${value.id}" class="btn btn-sm btn-outline-primary details"> <i class="fa fa-search"></i></button>
<button data-id="${value.id}" class="btn btn-sm btn-outline-warning edit"> <i class="fa fa-pencil"></i></button>
<button data-id="${value.id}" class="btn btn-sm btn-outline-danger delete"> <i class="fa fa-trash"></i></button>
</td>
</tr>`)
});
})
}

List();

$("#save").click(function () {

if (statu == status.EDIT) {
showToast(MessageType.ERROR, MessagePostion.TOAST_TOP_RIGHT, "Lütfen Güncelleme İşlemi Yapınız veya Güncelleme İşlemini İptal Ediniz");
return;
}

const todoItem = new Object();
todoItem.Name = $("#Name").val();

if ($("#IsComplete").is(":checked")) {
todoItem.IsComplete = true;
}
else {
todoItem.IsComplete = false;
}

$.ajax({
url: url,
dataType: "json",
type: "post",
data: JSON.stringify(todoItem),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
success: function (response) {
List();
$("#frm")[0].reset();
showToast(MessageType.SUCCESS, MessagePostion.TOAST_TOP_RIGHT, "Kayıt Başarıyla Eklendi!")
},
error: function () { }
})
})

$(document).on("click", ".delete", function () {
const id = $(this).data("id");
$.ajax({
url: url + "/" + id,
dataType: "json",
type: "delete",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
success: function (response) {
List();
showToast(MessageType.SUCCESS, MessagePostion.TOAST_TOP_RIGHT, "Kayıt Başarıyla Silindi!")
},
error: function () { }
})
})

$(document).on("click", ".edit", function () {
statu = status.EDIT;
const id = $(this).data("id");
$("#Id").val(id);
$.ajax({
url: url + "/" + id,
dataType: "json",
type: "get",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
success: function (response) {
$("#Name").val(response.name);
$("#IsComplete").prop("checked", response.isComplete);
},
error: function () { }
})
})


$("#cancel").click(function () {
statu = status.SAVE;
$("#frm")[0].reset();
})


$("#edit").click(function () {

if (statu == status.SAVE) {
showToast(MessageType.ERROR, MessagePostion.TOAST_TOP_RIGHT, "Lütfen ekleme işlemi yapınız veya ekleme işlemini iptal ediniz.")
return;
}

const todoItem = new Object();
todoItem.Name = $("#Name").val();
todoItem.Id = parseInt($("#Id").val());


if ($("#IsComplete").is(":checked")) {
todoItem.IsComplete = true;
}
else {
todoItem.IsComplete = false;
}

$.ajax({
url: url + "/" + todoItem.Id,
dataType: "json",
type: "put",
data: JSON.stringify(todoItem),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
success: function (response) {
List();
statu = status.SAVE;
$("#frm")[0].reset();
showToast(MessageType.SUCCESS, MessagePostion.TOAST_TOP_RIGHT, "Kayıt Başarıyla Güncellendi")
},
error: function () { }
})
})
})</script>
}

@section css {
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/toast.css">

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" rel="stylesheet" />

<style>
#example_wrapper{
margin-top:30px
}
</style>
}

@section js {
<script src="/js/toast.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
}