<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Inventori - Master Barang</title>
<!-- Custom fonts for this template-->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="css/sb-admin-2.min.css" rel="stylesheet">
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<?php include_once('fragments/sidebar.php') ?>
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<?php include_once('fragments/topbar.php') ?>
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Master Barang</h1>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-12 col-lg-12">
<form id="form">
<div class="form-group row">
<label for="inputNama" class="col-sm-2 col-form-label">Nama</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputNama" name="nama">
</div>
</div>
<div class="form-group row">
<label for="inputJenis" class="col-sm-2 col-form-label">Jenis</label>
<div class="col-sm-4">
<select id="inputJenis" class="form-control" name="jenis">
<option value="">Pilih Jenis</option>
<option value="ELEKTRONIK">ELEKTRONIK</option>
<option value="NON-ELEKTRONIK">NON-ELEKTRONIK</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"> </label>
<div class="col-sm-10">
<input type="hidden" id="inputId" name="id">
<input type="hidden" id="typeForm" name="is_edit">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</div>
</form>
<br>
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Data Barang</h6>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Nama</th>
<th>Jenis</th>
<th>Aksi</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
<?php include_once('fragments/footer.php') ?>
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin-2.min.js"></script>
<script src="js/app.js"></script>
<!-- Page level plugins -->
<script src="vendor/datatables/jquery.dataTables.min.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function() {
// init data table
var table = $("#dataTable").DataTable({
"ajax": "actions/items.php",
searching: true,
paging: true,
"order": [[ 0, 'asc' ]],
"columns": [
{ "data": "name" },
{ "data": "type" },
{
"data": null,
"defaultContent":
'<button class="btn btn-danger btn-sm delete" type="button" data-target="#deleteModal" data-toggle="modal" title="Delete Data" ><i class="fas fa-trash-alt"></i></button>' +
'<button class="btn btn-warning btn-sm edit" type="button" title="Edit Data"><i class="fas fa-pencil-alt"></i></button>'
}
]
});
// event delete
$('#dataTable tbody').on( 'click', 'button.delete', function () {
var data = table.row( $(this).parents('tr') ).data();
deleteData(data.id);
} );
// event edit
$('#dataTable tbody').on( 'click', 'button.edit', function () {
var data = table.row( $(this).parents('tr') ).data();
editData(data.id);
} );
function deleteData(id) {
var conf = confirm("Apakah Anda yakin ingin menghapus?");
if (conf) {
$.ajax({
url: "../actions/items.php?id=" +id,
method: "DELETE",
success: function (res) {
table.ajax.url('actions/items.php').load();
alert('Success');
},
error: function (err) {
alert('Failed');
}
});
}
}
function editData(id) {
$.ajax({
url: "../actions/items.php?id=" +id,
success: function (res) {
var item = res.data[0];
$('#inputNama').val(item.name);
$('#inputJenis').val(item.type);
$('#inputId').val(item.id);
$('#typeForm').val(1);
},
error: function (err) {
alert('Failed');
}
});
}
$('#form').submit(function(e) {
if ($('#typeForm').val() == 1) {
// update
$.ajax({
url: 'actions/items.php',
method: 'PUT',
data: $(this).serialize(),
success: function(res) {
table.ajax.url('actions/items.php').load();
alert('Success');
$('#form')[0].reset();
},
error: function(res) {
alert('Failed');
}
});
return false;
}
// add
$.ajax({
url: 'actions/items.php',
method: 'POST',
data: $(this).serialize(),
success: function(res) {
table.ajax.url('actions/items.php').load();
alert('Success');
$('#form')[0].reset();
},
error: function(res) {
alert('Failed');
}
});
e.preventDefault();
});
});
</script>
</body>
</html>