project done before

This commit is contained in:
kicap1992
2021-06-23 16:12:19 +08:00
commit 330d859d56
2390 changed files with 678303 additions and 0 deletions

View File

@ -0,0 +1,549 @@
<!DOCTYPE html>
<html lang="en">
<head>
<?php $this->load->view('admin/head'); ?>
<link href="<?=base_url()?>/assets_admin/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
<!-- <link href="<?=base_url()?>/assets_admin/vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet"> -->
<link rel="stylesheet" href="<?php echo base_url('sweet-alert/bootstrap-validator/css/bootstrapValidator.min.css');?>">
<style type="text/css">
.has-error .help-block {
color: red;
}
</style>
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<?php $this->load->view('admin/sidebar'); ?>
<?php $this->load->view('admin/topnavbar'); ?>
<!-- page content -->
<div class="modal fade" id="sini_modalnya" aria-hidden="true" role="dialog" tabindex="-1">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="getCroppedCanvasTitle">Detail Buku</h4>
</div>
<div class="modal-body row">
<div class="col-xs-12">
<div id="sini_input_edit">
</div>
</div>
</div>
<div class="modal-footer">
<div id="sini_footer" style="display: inline;"></div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="right_col" role="main">
<?php $this->load->view('admin/menu_atas'); ?>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Form Penambahan Buku<!-- <small>different form elements</small> --></h2>
<!-- <ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a>
</li>
<li><a href="#">Settings 2</a>
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul> -->
<div class="clearfix"></div>
</div>
<div class="x_content">
<!-- <br /> -->
<form class="form-horizontal form-label-left input_mask" id="sini_form">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Judul</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<!-- <input type="text" class="form-control" placeholder="Judul Buku" data-bv-notempty="true" data-bv-notempty-message="Judul Buku Harus Terisi" name="judul" id="judul"> -->
<textarea style="resize: none;" class="form-control" placeholder="Judul Buku" data-bv-notempty="true" data-bv-notempty-message="Judul Buku Harus Terisi" name="judul" id="judul"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Kategori </label>
<div class="col-md-9 col-sm-9 col-xs-12">
<select class="form-control" data-bv-notempty="true" data-bv-notempty-message="Kategori Harus Terpilih" name="kategori" id="kategori">
<option disabled="" selected="">-Pilih Kategori Buku</option>
<?php foreach ($list_kategori->result() as $key => $value): ?>
<option value="<?=$value->no?>"><?=$value->kategori?></option>
<?php endforeach ?>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Pengarang </label>
<div class="col-md-9 col-sm-9 col-xs-12">
<!-- <input class="date-picker form-control col-md-7 col-xs-12" required="required" type="text" data-bv-notempty="true" data-bv-notempty-message="Pengarang Harus Terisi" name="pengarang" id="pengarang"> -->
<textarea style="resize: none;" placeholder="Pengarang Buku" class="form-control" required="required" type="text" data-bv-notempty="true" data-bv-notempty-message="Pengarang Harus Terisi" name="pengarang" id="pengarang"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Tahun Terbit </label>
<div class="col-md-9 col-sm-9 col-xs-12">
<select class="form-control" data-bv-notempty="true" data-bv-notempty-message="Tahun Terbit Harus Terpilih" name="tahun_terbit" id="tahun_terbit">
<option disabled="" selected="">-Pilih Tahun Terbit</option>
<?php
for ($i=1992; $i < date('Y'); $i++) { ?>
<option value="<?=$i?>"><?=$i?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Tingkat Ke</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<input type="hidden" id="sini_html" >
<select class="form-control" name="tingkat" id="tingkat">
<option selected="" disabled="">-Pilih Tingkat Ke</option>
<option value="1">Tingkat 1</option>
<option value="2">Tingkat 2</option>
<option value="3">Tingkat 3</option>
<option value="4">Tingkat 4</option>
</select>
</div>
</div>
<!-- <div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Peletakan Buku </label>
<div class="col-md-9 col-sm-9 col-xs-12">
<select class="form-control">
<option disabled="" selected="">-Pilih Tempat / Rak Buku</option>
<option>Option one</option>
<option>Option two</option>
<option>Option three</option>
<option>Option four</option>
</select>
</div>
</div> -->
<div class="ln_solid"></div>
<div class="form-group">
<div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3">
<button type="reset" class="btn btn-danger">Cancel</button>
<!-- <button class="btn btn-warning" type="reset">Reset</button> -->
<button type="submit" class="btn btn-success" id="tambah">Tambah Buku</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-7 col-sm-7 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>List Buku</h2>
<div class="clearfix"></div>
</div>
<div class="x_content" style="overflow: auto">
<table id="table1" class="table table-striped table-bordered" width="100%">
<thead>
<tr>
<!-- <th>No</th> -->
<th>Judul</th>
<th>Kategori</th>
<th>Pengarang</th>
<th>Tahun Terbit</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- /page content -->
<?php $this->load->view('admin/footer'); ?>
</div>
</div>
<?php $this->load->view('admin/script'); ?>
<script src="<?=base_url()?>/assets_admin/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<!-- <script src="<?=base_url()?>/assets_admin/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script> -->
<!-- <script src="<?=base_url()?>/assets_admin/vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="<?=base_url()?>/assets_admin/vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
<script src="<?=base_url()?>/assets_admin/vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="<?=base_url()?>/assets_admin/vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="<?=base_url()?>/assets_admin/vendors/datatables.net-buttons/js/buttons.print.min.js"></script> -->
<script src="<?php echo base_url('sweet-alert/bootstrap-validator/js/bootstrapValidator.min.js'); ?>"></script>
<script src="<?=base_url()?>sweet-alert/block/jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#sini_form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
// valid: 'fa fa-check',
invalid: 'fa fa-close',
validating: 'fa fa-circle-o-notch'
},
excluded: ':disabled'
})
$("#tambah").click(function (){
$('#sini_form').submit();
var data = $('#sini_form').serializeArray();
var error = $('#sini_form').find(".has-error").length;
console.log(error)
if (error == 0) {
$.ajax({
url: "<?=base_url()?>admin/buku",
type: 'post',
data: {data : data, proses : 'tambah'},
// dataType: 'json',
beforeSend: function(res) {
$.blockUI({
message: "<h3>Pesanan Sedang Diproses</h3>",
css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
} });
},
success: function (response) {
console.log(response);
window.open('<?=base_url()?>admin/print/'+response, '_blank');
location.reload();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
// console.log('gagal');
swal({
// title: "Submit Keperluan ?",
text: "Koneksi Internet Anda Mungkin Hilang Atau Terputus, Halaman Akan Terefresh Kembali",
icon: "warning",
buttons: {
cancel: false,
confirm: true,
},
// dangerMode: true,
})
.then((hehe) =>{
location.reload();
});
}
});
}
})
})
</script>
<script type="text/javascript">
var table;
$(document).ready(function() {
//datatables
table = $('#table1').DataTable({
// "searching": false,
"ordering": false,
"processing": true,
"serverSide": true,
"order": [],
"ajax": {
"url": "<?php echo base_url('admin/buku/tables')?>",
"type": "POST"
},
"columnDefs": [
{
"targets": [ 0 ],
"orderable": false,
},
],
});
});
</script>
<script type="text/javascript">
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
$(document).off("click", ".lihat_informasi").on("click", ".lihat_informasi",async function () {
var judul = $(this).data('judul');
var id = $(this).data('nonya');
var kategori = $(this).data('kategori');
var tahun_terbit = $(this).data('tahun_terbit');
var pengarang = $(this).data('pengarang');
var tingkat = $(this).data('tingkat');
console.log(id);
// console.log(kategori);
// console.log(tahun_terbit);
// console.log(pengarang);
var body = '<div class="form-group"><label class="control-label">Judul Buku</label><textarea class="form-control" style="resize :none" id="judul_edit" disabled="">'+judul+'</textarea><div>';
body += '<div class="form-group"><label class="control-label">Kategori</label>';
body +='<select class="form-control" name="tingkat" id="kategori_edit" disabled>';
body +='<option disabled="">-Pilih Kategori Buku</option>';
var ini_dia = $.ajax({
url: "<?=base_url()?>admin/buku",
type: 'post',
data: {proses : "cek_kategori"},
async : false
// dataType: 'json',
// success: function (response) {
// var response = JSON.parse(response);
// // console.log(response);
// response.forEach(function(e) {
// if (e.no == kategori) {
// body +='<option selected="" value="'+e.no+'">'+e.kategori+'</option>';
// }else{
// body +='<option value="'+e.no+'">'+e.kategori+'</option>';
// }
// });
// },
// error: function(XMLHttpRequest, textStatus, errorThrown) {
// // console.log('gagal');
// swal({
// // title: "Submit Keperluan ?",
// text: "Koneksi Internet Anda Mungkin Hilang Atau Terputus, Halaman Akan Terefresh Kembali",
// icon: "warning",
// buttons: {
// cancel: false,
// confirm: true,
// },
// // dangerMode: true,
// })
// .then((hehe) =>{
// location.reload();
// });
// }
});
ini_dia = JSON.parse(ini_dia.responseText);
ini_dia.forEach(function(e) {
if (e.no == kategori) {
body +='<option selected="" value="'+e.no+'">'+e.kategori+'</option>';
}else{
body +='<option value="'+e.no+'">'+e.kategori+'</option>';
}
});
console.log(ini_dia)
// await sleep(200);
body += '</select></div>';
body += '<div class="form-group"><label class="control-label">Pengarang Buku</label><textarea class="form-control" style="resize :none" id="pengarang_edit" disabled="">'+pengarang+'</textarea><div>';
// console.log(body);
body += '<div class="form-group"><label class="control-label">Tahun Terbit</label>';
body += '<select class="form-control" id="tahun_terbit_edit" disabled="">';
body += '<option disabled="">-Pilih Tahun Terbit</option>'
for (var i = 1992; i <= new Date().getFullYear(); i++) {
if (i == tahun_terbit) {
body += '<option selected="" value="'+i+'">'+i+'</option>';
}else{
body += '<option value="'+i+'">'+i+'</option>';
}
}
body += '</select></div>';
body += '<div class="form-group"><label class="control-label">Tingkat</label>';
body += '<select class="form-control" id="tingkat_edit" disabled="">';
body += '<option disabled="">-Pilih Tingkat Ke</option>'
for (var i = 1; i <= 4; i++) {
if (i == tingkat) {
body += '<option selected="" value="'+i+'">'+i+'</option>';
}else{
body += '<option value="'+i+'">'+i+'</option>';
}
}
body += '</select></div>';
// body += '<div class="form-group"><label class="control-label">Peta Kategori</label></div>';
$("#sini_input_edit").html(body);
var footer = '<button type="button" class="edit_buku_button btn btn-info" onclick="edit_buku('+id+','+"'"+judul+"'"+','+"'"+kategori+"'"+','+"'"+pengarang+"'"+','+tahun_terbit+','+tingkat+')">Edit Kategori</button><button type="button" class="btn btn-danger" onclick="hapus_buku('+id+')">Hapus Kategori</button>';
$("#sini_footer").html(footer);
})
function edit_buku(id,judul,kategori,pengarang,tahun_terbit,tingkat){
console.log(id+ ', '+tingkat)
$("#judul_edit").removeAttr('disabled');
$("#kategori_edit").removeAttr('disabled');
$("#pengarang_edit").removeAttr('disabled');
$("#tahun_terbit_edit").removeAttr('disabled');
$("#tingkat_edit").removeAttr('disabled');
$(".edit_buku_button").attr({
'class' : 'edit_buku_button btn btn-primary',
'onclick' : 'edit_buku_konfirm('+id+',"'+judul+'","'+kategori+'","'+pengarang+'",'+tahun_terbit+','+tingkat+')'
})
}
function edit_buku_konfirm(id,judul,kategori,pengarang,tahun_terbit,tingkat) {
var judul_edit = $("#judul_edit").val();
var kategori_edit = $("#kategori_edit").val();
var pengarang_edit = $("#pengarang_edit").val();
var tahun_terbit_edit = $("#tahun_terbit_edit").val();
var tingkat_edit = $("#tingkat_edit").val();
if (judul_edit == judul && kategori_edit == kategori && pengarang_edit == pengarang && tahun_terbit_edit == tahun_terbit && tingkat_edit == tingkat) {
toastr.options = {
"closeButton": true,
"debug": false,
"progressBar": true,
"positionClass": "toast-top-right",
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
toastr.warning("<center><b>Belum Ada Perubahan Data Buku</b></center>");
$("#judul_edit").focus();
}else{
$.ajax({
url: "<?=base_url()?>admin/buku",
type: 'post',
data: {proses : "edit" , id : id, judul : judul_edit , kategori : kategori_edit , pengarang : pengarang_edit , tahun_terbit : tahun_terbit_edit, tingkat : tingkat_edit},
// dataType: 'json',\
beforeSend: function(res) {
$("#sini_modalnya").modal("hide");
$.blockUI({
message: "<h4>Informasi Buku Sedang Diedit</h4>",
css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
}
});
},
success: function (response) {
// console.log(response);
location.reload();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
// console.log('gagal');
swal({
// title: "Submit Keperluan ?",
text: "Koneksi Internet Anda Mungkin Hilang Atau Terputus, Halaman Akan Terefresh Kembali",
icon: "warning",
buttons: {
cancel: false,
confirm: true,
},
// dangerMode: true,
})
.then((hehe) =>{
location.reload();
});
}
});
}
}
function hapus_buku(id){
swal({
title: "Yakin ingin hapus buku ini?",
text: " Buku akan terhapus permanen dari sistem",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((logout) => {
if (logout) {
// console.log(id)
$.ajax({
url: "<?=base_url()?>admin/buku",
type: 'post',
data: {proses : "hapus_datanya", id : id},
// dataType: 'json',
beforeSend: function(res) {
$("#sini_modalnya").modal("hide");
$.blockUI({
message: "<h4>Kategori Sedang Diedit</h4>",
css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
}
});
},
success: function (response) {
console.log(response);
// $("#sini_html").html(response);
//
location.reload();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
// console.log('gagal');
swal({
// title: "Submit Keperluan ?",
text: "Koneksi Internet Anda Mungkin Hilang Atau Terputus, Halaman Akan Terefresh Kembali",
icon: "warning",
buttons: {
cancel: false,
confirm: true,
},
// dangerMode: true,
})
.then((hehe) =>{
location.reload();
});
}
});
}
});
}
</script>
</body>
</html>

View File

@ -0,0 +1,807 @@
<!DOCTYPE html>
<html lang="en">
<head>
<?php $this->load->view('admin/head'); ?>
<link href="<?=base_url()?>/assets_admin/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="<?=base_url()?>/assets_admin/vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
<!-- <link href="<?=base_url()?>assets/datatables/jquery.dataTables.min.css" rel="stylesheet"> -->
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<?php $this->load->view('admin/sidebar'); ?>
<?php $this->load->view('admin/topnavbar'); ?>
<!-- page content -->
<div class="right_col" role="main">
<?php $this->load->view('admin/menu_atas'); ?>
<div class="modal fade" id="sini_modalnya" aria-hidden="true" role="dialog" tabindex="-1">
<div class="modal-dialog" style="width:95%;max-width: 1121px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="getCroppedCanvasTitle">Peta Perpustakaan</h4>
</div>
<div class="modal-body row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div id="sini_input_edit"></div>
<div class="form-group" style="overflow-x: auto">
<center>
<canvas id="c" width="1050" height="950" style="border:1px solid #ccc;"></canvas>
<input type="hidden" id="id_rak_buku_edit" name="rak_buku">
</center>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div id="sini_footer" style="display: inline;"></div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-6 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Form Penambahan Kategori<!-- <small>different form elements</small> --></h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<!-- <br /> -->
<form class="form-horizontal form-label-left input_mask" id="sini_form">
<div class="form-group">
<label class="control-label col-md-4 col-sm-4 col-xs-12">Kategori Baru</label>
<div class="col-md-8 col-sm-8 col-xs-12">
<!-- <input type="hidden" id="sini_html" > -->
<input type="text" class="form-control" placeholder="Masukkan Kategori Baru" name="kategori" id="kategori">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4 col-sm-4 col-xs-12">Foto Penempatan </label>
<div class="col-md-8 col-sm-8 col-xs-12">
<a data-toggle="modal" class="tampilkan_modal" href="#sini_modalnya" ><button style="width: 100%" class="btn btn-primary" id="button_tambah_rak">Pilih Penempatan Kategori</button></a>
<input type="hidden" id="id_rak_buku_terpilih" name="rak_buku">
<input type="hidden" id="sini_html" >
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4 col-sm-4 col-xs-12">Foto Rak Buku </label>
<div class="col-md-8 col-sm-8 col-xs-12">
<input data-bv-notempty="true" data-bv-notempty-message="Foto Minimal 1" type="file" name="files" id="files" class="form-control" onchange="previewImage(0);" >
<div id="ubah_sini" style="text-align: center"></div>
</div>
</div>
<div class="ln_solid"></div>
<div class="form-group">
<div class="col-md-12 col-sm-12 col-xs-12 col-md-offset-3">
<button type="button" class="btn btn-warning" onclick="reset1()">Reset</button>
<button type="button" class="btn btn-success" onclick="tambah()">Tambah Kategori</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-7 col-sm-6 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>List Kategori</h2>
<div class="clearfix"></div>
</div>
<div class="x_content" style="overflow: auto">
<table id="table1" class="table table-striped table-bordered">
<thead>
<tr>
<th>No</th>
<th>Kategori</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- /page content -->
<?php $this->load->view('admin/footer'); ?>
</div>
</div>
<?php $this->load->view('admin/script'); ?>
<script src="<?=base_url()?>/assets_admin/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<!-- <script src="<?=base_url()?>/assets_admin/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script> -->
<!-- <script src="<?=base_url()?>/assets_admin/vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="<?=base_url()?>/assets_admin/vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
<script src="<?=base_url()?>/assets_admin/vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="<?=base_url()?>/assets_admin/vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="<?=base_url()?>/assets_admin/vendors/datatables.net-buttons/js/buttons.print.min.js"></script> -->
<script src="<?=base_url()?>sweet-alert/block/jquery.blockUI.js"></script>
<script type="text/javascript">
function reset1(){
console.log("sini");
$("#kategori").val(null);
$("#id_rak_buku_terpilih").val(null);
$('#files').val(null);
$('#ubah_sini').html("");
// $("#tingkat").val(null);
// $("#tingkat").val($("#tingkat option:first").val());
$("#button_tambah_rak").html("Pilih Penempatan Kategori");
$("#button_tambah_rak").removeAttr("disabled");
}
var kategori = $("#kategori");
var rak_buku = $("#id_rak_buku_terpilih");
// var tingkat = $("#tingkat");
// var nama_foto = foto.files[0]['name'];
// nama_foto = nama_foto.split('.').pop().trim();
// console.log(nama_foto);
function tambah(){
var data = $('#sini_form').serializeArray();
// console.log(kategori.val());
// console.log(foto.files[0]['name']);
// console.log(foto.files[0]['size']);
if (kategori.val() == "" || kategori.val() == null) {
toastr.options = {
"closeButton": true,
"debug": false,
"progressBar": true,
"positionClass": "toast-top-right",
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
toastr.error("<center><b>Inputan Kategori Tidak Bisa Kosong</b></center>");
kategori.focus();
}
else if (rak_buku.val() == "" || rak_buku.val() == null) {
toastr.options = {
"closeButton": true,
"debug": false,
"progressBar": true,
"positionClass": "toast-top-right",
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
toastr.error("<center><b>Rak Buku Harus Terpilih</b></center>");
$(".tampilkan_modal").click();
}
else{
if ($("#files")[0].files.length == 0) {
$('#files').val(null);
toastnya('files','Maksimal 1 Foto diupload')
$('#ubah_sini').html("");
}
else
{
// console.log(data)
let form_data = new FormData();
data = JSON.stringify(data);
form_data.append('data', data);
form_data.append('proses', 'tambah');
form_data.append("files", document.getElementById('files').files[0]);
$.ajax({
url: "<?=base_url()?>admin/kategori",
type: 'post',
data: form_data,
// data: {proses : "tambah",data : data},
contentType: false,
processData: false,
beforeSend: function(res) {
$.blockUI({
message: "<h4>Kategori Sedang Ditambah</h4>",
css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
}
});
},
success: function (response) {
// console.log(response);
location.reload();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
// console.log('gagal');
swal({
// title: "Submit Keperluan ?",
text: "Koneksi Internet Anda Mungkin Hilang Atau Terputus, Halaman Akan Terefresh Kembali",
icon: "warning",
buttons: {
cancel: false,
confirm: true,
},
// dangerMode: true,
})
.then((hehe) =>{
location.reload();
});
}
});
}
}
}
</script>
<script type="text/javascript">
var table;
$(document).ready(function() {
//datatables
table = $('#table1').DataTable({
// "searching": false,
// "ordering": false,
"processing": true,
"serverSide": true,
"order": [],
"ajax": {
"url": "<?php echo base_url('admin/kategori/tables')?>",
"type": "POST"
},
"columnDefs": [
{
"targets": [ 0 ],
"orderable": false,
},
],
});
});
</script>
<script src="<?=base_url()?>assets/fabric.min.js"></script>
<script type="text/javascript">
var canvas = this.__canvas = new fabric.Canvas('c');
// create a rect object
fabric.Object.prototype.transparentCorners = true;
// fabric.Object.prototype.cornerColor = 'blue';
fabric.Object.prototype.cornerStyle = 'circle';
$(document).off("click", ".tampilkan_modal").on("click", ".tampilkan_modal", function () {
$.ajax({
url: "<?=base_url()?>admin/kategori",
type: 'post',
data: {proses : "cari_semuanya"},
// dataType: 'json',
success: function (response) {
// console.log(response);
$("#sini_input_edit").html("");
$("#sini_footer").html("");
$("#sini_html").html(response);
//
// location.reload();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
// console.log('gagal');
swal({
// title: "Submit Keperluan ?",
text: "Koneksi Internet Anda Mungkin Hilang Atau Terputus, Halaman Akan Terefresh Kembali",
icon: "warning",
buttons: {
cancel: false,
confirm: true,
},
// dangerMode: true,
})
.then((hehe) =>{
location.reload();
});
}
});
})
</script>
<script type="text/javascript">
var edit_foto_num = 0;
$(document).off("click", ".lihat_informasi").on("click", ".lihat_informasi", function () {
var rak = $(this).data('rak');
var id = $(this).data('id');
// console.log(id);
var kategori = $(this).data('kategori');
// var tingkat = $(this).data('tingkat');
var body = '<div class="form-group"><label class="control-label">Kategori</label><input type="text" class="form-control" value="'+kategori+'" name="kategori" id="kategori_edit" disabled=""><div><br>';
body += '<div class="form-group"><label class="control-label">Foto Rak</label><div id="sini_foto_edit"></div><input data-bv-notempty="true" data-bv-notempty-message="Foto Minimal 1" type="file" name="files" id="files_edit" class="form-control" onchange="previewImage(1);" style="display :none"><div id="ubah_sini_edit"></div><br><button type="button" id="button_foto_edit" class="btn btn-warning" onclick="edit_foto()" style="display : none">Upload Foto Baru</button><div><br>';
body += '<div class="form-group"><label class="control-label">Peta Kategori</label></div>';
$("#sini_input_edit").html(body);
var footer = '<button type="button" class="edit_kategori_button btn btn-info" onclick="edit_kategori('+id+','+rak+','+"'"+kategori+"'"+')">Edit Kategori</button><button type="button" class="btn btn-danger" onclick="hapus_kategori('+id+')">Hapus Kategori</button>';
$("#sini_footer").html(footer);
let foto = $.ajax({
url: "<?=base_url()?>admin/",
type: 'post',
async : false,
data: {id : id, proses : 'cek_foto_detail'},
});
// console.log(foto.responseText)
$("#sini_foto_edit").html(foto.responseText)
$.ajax({
url: "<?=base_url()?>admin/kategori",
type: 'post',
data: {proses : "cari_semuanya_id", rak : rak},
// dataType: 'json',
success: function (response) {
// console.log(response);
$("#sini_html").html(response);
// location.reload();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
// console.log('gagal');
swal({
// title: "Submit Keperluan ?",
text: "Koneksi Internet Anda Mungkin Hilang Atau Terputus, Halaman Akan Terefresh Kembali",
icon: "warning",
buttons: {
cancel: false,
confirm: true,
},
// dangerMode: true,
})
.then((hehe) =>{
location.reload();
});
}
});
})
function edit_kategori(id,rak,kategori){
// console.log(id);
$("#id_rak_buku_edit").val(rak);
$("#kategori_edit").removeAttr('disabled');
$("#tingkat_edit").removeAttr('disabled');
$(".edit_kategori_button").attr({
'class' : 'edit_kategori_button btn btn-primary',
'onclick' : 'konfirm_edit_kategori('+id+','+rak+',"'+kategori+'")'
})
$("#button_foto_edit").attr({
'style' : 'display : block',
})
$.ajax({
url: "<?=base_url()?>admin/kategori",
type: 'post',
data: {proses : "cari_semuanya_id_edit", rak : rak},
// dataType: 'json',
success: function (response) {
// console.log(response);
$("#sini_html").html(response);
// location.reload();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
// console.log('gagal');
swal({
// title: "Submit Keperluan ?",
text: "Koneksi Internet Anda Mungkin Hilang Atau Terputus, Halaman Akan Terefresh Kembali",
icon: "warning",
buttons: {
cancel: false,
confirm: true,
},
// dangerMode: true,
})
.then((hehe) =>{
location.reload();
});
}
});
$("#kategori_edit").focus();
}
function edit_foto() {
edit_foto_num = 1;
$("#files_edit").attr('style','display : block');
$("#sini_foto_edit").attr('style','display : none');
$("#button_foto_edit").html('Cancel Upload Foto');
$("#button_foto_edit").attr({
'class' : 'btn btn-danger',
'onclick' : 'cancel_foto_edit()',
});
}
function cancel_foto_edit() {
edit_foto_num = 0;
$("#files_edit").attr('style','display : none');
$("#files_edit").val(null);
$("#sini_foto_edit").attr('style','display : block');
$("#button_foto_edit").html('Upload Foto Baru');
$("#button_foto_edit").attr({
'class' : 'btn btn-warning',
'onclick' : 'edit_foto()',
});
}
function konfirm_edit_kategori(id,e,f){
console.log(edit_foto_num)
var id = id;
var kategori = $("#kategori_edit").val();
// var tingkat = $("#tingkat_edit").val();
var rak = $("#id_rak_buku_edit").val();
if (e == rak && f == kategori && edit_foto_num == 0 ) {
toastr.options = {
"closeButton": true,
"debug": false,
"progressBar": true,
"positionClass": "toast-top-right",
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
toastr.warning("<center><b>Belum Ada Data Yang Berubah</b></center>");
$("#kategori_edit").focus();
}
else
{
if (edit_foto_num == 0) {
$.ajax({
url: "<?=base_url()?>admin/kategori",
type: 'post',
data: {proses : "edit_datanya", id : id, rak : rak, kategori : kategori, foto : 0},
// dataType: 'json',
beforeSend: function(res) {
$("#sini_modalnya").modal("hide");
$.blockUI({
message: "<h4>Kategori Sedang Diedit</h4>",
css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
}
});
},
success: function (response) {
console.log(response);
// $("#sini_html").html(response);
//
location.reload();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
// console.log('gagal');
swal({
// title: "Submit Keperluan ?",
text: "Koneksi Internet Anda Mungkin Hilang Atau Terputus, Halaman Akan Terefresh Kembali",
icon: "warning",
buttons: {
cancel: false,
confirm: true,
},
// dangerMode: true,
})
.then((hehe) =>{
location.reload();
});
}
});
}
else if (edit_foto_num == 1)
{
if ($("#files_edit")[0].files.length == 0) {
$('#files_edit').val(null);
toastnya('files_edit','Maksimal 1 Foto diupload')
$('#ubah_sini_edit').html("");
}
else
{
let form_data = new FormData();
form_data.append('proses', 'edit_datanya');
form_data.append('rak', rak);
form_data.append('id', id);
form_data.append('kategori', kategori);
form_data.append('foto', 1);
form_data.append("files", document.getElementById('files_edit').files[0]);
$.ajax({
url: "<?=base_url()?>admin/kategori",
type: 'post',
data : form_data,
contentType: false,
processData: false,
// data: {proses : "edit_datanya", id : id, rak : rak, kategori : kategori},
// dataType: 'json',
beforeSend: function(res) {
$("#sini_modalnya").modal("hide");
$.blockUI({
message: "<h4>Kategori Sedang Diedit</h4>",
css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
}
});
},
success: function (response) {
console.log(response);
// $("#sini_html").html(response);
//
location.reload();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
// console.log('gagal');
swal({
// title: "Submit Keperluan ?",
text: "Koneksi Internet Anda Mungkin Hilang Atau Terputus, Halaman Akan Terefresh Kembali",
icon: "warning",
buttons: {
cancel: false,
confirm: true,
},
// dangerMode: true,
})
.then((hehe) =>{
location.reload();
});
}
});
}
}
}
}
function hapus_kategori(id){
swal({
title: "Yakin ingin hapus kategori ini?",
text: "Kategori & List Buku yang dimasukkan dalam kategori ini akan terhapus permanen",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((logout) => {
if (logout) {
$.ajax({
url: "<?=base_url()?>admin/kategori",
type: 'post',
data: {proses : "hapus_datanya", id : id},
// dataType: 'json',
beforeSend: function(res) {
$("#sini_modalnya").modal("hide");
$.blockUI({
message: "<h4>Kategori Sedang Diedit</h4>",
css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
}
});
},
success: function (response) {
console.log(response);
// $("#sini_html").html(response);
//
location.reload();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
// console.log('gagal');
swal({
// title: "Submit Keperluan ?",
text: "Koneksi Internet Anda Mungkin Hilang Atau Terputus, Halaman Akan Terefresh Kembali",
icon: "warning",
buttons: {
cancel: false,
confirm: true,
},
// dangerMode: true,
})
.then((hehe) =>{
location.reload();
});
}
});
}
});
}
</script>
<script type="text/javascript">
function toastnya(id,mesej){
toastr.options = {
"closeButton": true,
"debug": false,
"progressBar": true,
"positionClass": "toast-top-right",
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
toastr.error("<center>"+mesej+"</center>");
$("#"+id).focus();
}
function previewImage(e) {
if (e == 0) {
var file = document.getElementById('files');
var nama_file = 'files'
var ubah = 'ubah_sini'
var nomor = 0
}
else if (e == 1) {
var file = document.getElementById('files_edit');
var nama_file = 'files_edit'
var ubah = 'ubah_sini_edit'
var nomor = 1
}
if ($("#"+nama_file)[0].files.length == 0) {
$("#"+nama_file).val(null);
toastnya(nama_file,'Maksimal 1 Foto diupload')
$('#'+ubah).html("");
}
else if (cek_nama_foto(nomor) == 0) {
// console.log('foto salah')
$('#'+ubah).html("");
$("#"+nama_file).val(null);
toastnya(nama_file,'Foto harus berektensi .jpg , .jpeg dan .png')
}
else if (cek_nama_foto(nomor) == 2) {
// console.log('foto salah')
$('#'+ubah).html("");
$('#'+nama_file).val(null);
toastnya(nama_file,'Saiz foto maksimal 1.5 mb')
}
else{
var text = ''
ii = 0 ;
for (var i = 0; i < file.files.length; i++) {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById(nama_file).files[i]);
oFReader.onload = function(oFREvent) {
// document.getElementById("image-preview").src = oFREvent.target.result;
// console.log(oFREvent.target.result);
// text+='<center><img class="example-image" src="'+oFREvent.target.result+'" width="100px" height="100px" alt=""/></center>';
if (ii==0) {
// text +='<center> <a class="example-image-link" href="'+oFREvent.target.result+'" data-lightbox="example-set" >Klik Untuk Melihat Foto</a></center>';
text+='<br><center><img class="example-image" src="'+oFREvent.target.result+'" width="100px" height="100px" alt=""/></center>';
console.log(ii);
}
if (ii > 0) {
text+='<center> <a class="example-image-link" href="'+oFREvent.target.result+'" data-lightbox="example-set" ></a></center>';
console.log('heeh');
}
// console.log(ii);
$('#'+ubah).html(text);
ii += 1;
};
// console.log(i);
}
}
}
function cek_nama_foto(e){
let id;
if (e == 0) {
id = "#files";
}else if (e == 1) {
id = "#files_edit";
}
var kembali = 0
for (var i = 0; i < $(id)[0].files.length; i++) {
var name = $(id)[0].files[i].name;
var size = $(id)[0].files[i].size;
name = name.split('.').pop().trim();
// console.log(name);
if (name !== 'jpg' && name !== 'jpeg' && name !== 'png') {
kembali = 0
}
else if (size > 1000000) {
kembali = 2
}
else{
kembali = 1
}
}
return kembali
}
</script>
<script type="text/javascript">
// function sleep(ms) {
// return new Promise(resolve => setTimeout(resolve, ms));
// }
// hehe();
// async function hehe (){
// await sleep(1000);
// $("#sini_htmlnya").html('<script src="<?=base_url()?>assets/dist/js/lightbox-plus-jquery.min.js"></'+'script>');
// }
</script>
</body>
</html>

View File

@ -0,0 +1,501 @@
<!DOCTYPE html>
<html lang="en">
<head>
<?php $this->load->view('admin/head'); ?>
<link href="<?=base_url()?>/assets_admin/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="<?=base_url()?>/assets_admin/vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="<?php echo base_url('sweet-alert/bootstrap-validator/css/bootstrapValidator.min.css');?>">
<style type="text/css">
.has-error .help-block {
color: red;
}
.controls {
display: inline-block;
}
</style>
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<?php $this->load->view('admin/sidebar'); ?>
<?php $this->load->view('admin/topnavbar'); ?>
<!-- page content -->
<div class="right_col" role="main">
<?php $this->load->view('admin/menu_atas'); ?>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2 style="font-weight: bold;">Form Map Perpustakaan</h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<center>
<div class="form-horizontal" style="overflow-x: auto">
<button id="add" onclick="Add()" class="btn btn-success" style="font-weight: bold;">Tambah Rak Buku</button>
<button id="add" onclick="Add_meja()" class="btn btn-success" style="font-weight: bold;">Tambah Meja</button>
<button id="add" onclick="Add_kursi()" class="btn btn-success" style="font-weight: bold;">Tambah Kursi</button>
<br><br>
<div class="form-group fabric-canvas-wrapper">
<input type="hidden" id="sini_idnya" >
<input type="hidden" id="sini_html" >
<canvas id="c" width="1050" height="950" style="border:1px solid #ccc;"></canvas>
</div>
</div>
</center>
</div>
</div>
</div>
</div>
</div>
<!-- /page content -->
<?php $this->load->view('admin/footer'); ?>
</div>
</div>
<?php $this->load->view('admin/script'); ?>
<script src="<?=base_url()?>sweet-alert/block/jquery.blockUI.js"></script>
<script src="<?=base_url()?>assets/fabric.min.js"></script>
<script type="text/javascript">
function resizeCanvas() {
const outerCanvasContainer = $('.fabric-canvas-wrapper')[0];
const ratio = canvas.getWidth() / canvas.getHeight();
const containerWidth = outerCanvasContainer.clientWidth;
const containerHeight = outerCanvasContainer.clientHeight;
const scale = containerWidth / canvas.getWidth();
const zoom = canvas.getZoom() * scale;
canvas.setDimensions({width: containerWidth, height: containerWidth / ratio});
canvas.setViewportTransform([zoom, 0, 0, zoom, 0, 0]);
}
$(window).resize(resizeCanvas);
var canvas = this.__canvas = new fabric.Canvas('c');
// create a rect object
var deleteIcon = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";
var img = document.createElement('img');
img.src = deleteIcon;
fabric.Object.prototype.transparentCorners = false;
fabric.Object.prototype.cornerColor = 'blue';
fabric.Object.prototype.cornerStyle = 'circle';
// function sleep(ms) {
// return new Promise(resolve => setTimeout(resolve, ms));
// }
function Add() {
// console.log('Taking a break...');
const aa = $.ajax({
url: "<?=base_url()?>admin/rak_buku",
type: 'post',
data: {proses : "cek_id"},
async : false
});
// await sleep(1000);
// console.log(aa.responseText)
var rect = new fabric.Rect({
id : "rak_buku_" + aa.responseText,
angle:0,
left: 400,
top: 350,
fill: 'aqua',
width: 150,
height: 50,
objectCaching: false,
stroke: 'blue',
strokeWidth: 4,
});
var datanya = '{"left":"400","top":"350","width":"150","height":"50","angle":"0"}';
// console.log(rect);
canvas.add(rect);
simpan(datanya,"simpan","rak_buku",null);
canvas.setActiveObject(rect);
}
function Add_meja() {
// console.log('Taking a break...');
$.ajax({
url: "<?=base_url()?>admin/rak_buku",
type: 'post',
data: {proses : "cek_id"},
// dataType: 'json',
// success: function (response) {
// $("#sini_idnya").val(response);
// // location.reload();
// }
}).then(res => {
var rect = new fabric.Rect({
id : "meja_" + res,
angle:0,
left: 400,
top: 350,
fill: 'orange',
width: 75,
height: 75,
objectCaching: false,
stroke: 'yellow',
strokeWidth: 2,
cornerSize: 6
});
var datanya = '{"left":"400","top":"350","width":"75","height":"75","angle":"0"}';
// console.log(rect);
canvas.add(rect);
simpan(datanya,"simpan","meja",null);
canvas.setActiveObject(rect);
})
// await sleep(1000);
}
function Add_kursi() {
// console.log('Taking a break...');
$.ajax({
url: "<?=base_url()?>admin/rak_buku",
type: 'post',
data: {proses : "cek_id"},
// async: false,
// dataType: 'json',
// success: function (response) {
// $("#sini_idnya").val(response);
// // location.reload();
// }
}).then(res =>{
// console.log(res)
var rect = new fabric.Rect({
id : "kursi_" + res,
angle:0,
left: 400,
top: 350,
fill: 'lime',
width: 25,
height: 25,
objectCaching: false,
stroke: 'green',
strokeWidth: 1,
cornerSize: 3
});
var datanya = '{"left":"400","top":"350","width":"25","height":"25","angle":"0"}';
// console.log(rect);
canvas.add(rect);
simpan(datanya,"simpan","kursi",null);
canvas.setActiveObject(rect);
})
// .catch(err => {
// console.log(err);
// })
// console.log($("#sini_idnya").val())
// await sleep(1000);
}
function AddRakBuku(left,top,width,height,id,angle){
var rect = new fabric.Rect({
angle : angle,
id : "rak_buku_"+id,
left: left,
top: top,
fill: 'aqua',
width: width,
height: height,
objectCaching: false,
stroke: 'blue',
strokeWidth: 4,
centeredRotation: false,
});
// console.log(rect);
canvas.add(rect);
}
function AddMeja(left,top,width,height,id,angle){
var rect = new fabric.Rect({
angle : angle,
id : "meja_"+id,
left: left,
top: top,
fill: 'orange',
width: width,
height: height,
objectCaching: false,
stroke: 'yellow',
strokeWidth: 2,
centeredRotation: false,
cornerSize: 6
});
// console.log(rect);
canvas.add(rect);
}
function AddKursi(left,top,width,height,id,angle){
var rect = new fabric.Rect({
angle : angle,
id : "kursi_"+id,
left: left,
top: top,
fill: 'lime',
width: width,
height: height,
objectCaching: false,
stroke: 'green',
strokeWidth: 1,
centeredRotation: false,
cornerSize: 3
});
// console.log(rect);
canvas.add(rect);
}
fabric.Object.prototype.controls.deleteControl = new fabric.Control({
x: 0.5,
y: -0.5,
offsetY: 16,
cursorStyle: 'pointer',
mouseUpHandler: deleteObject,
render: renderIcon,
cornerSize: 24
});
// AddRakBuku(600,100,200,100,"sini_1",360);
function deleteObject(eventData, target) {
// console.log(target['id']);
var id = target['id'].slice(target['id'].lastIndexOf('_') + 1);
// console.log(id);
$.ajax({
url: "<?=base_url()?>admin/rak_buku",
type: 'post',
data: {proses : "hapus" , id : id},
// dataType: 'json',
success: function (response) {
// console.log(response);
// location.reload();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
// console.log('gagal');
swal({
// title: "Submit Keperluan ?",
text: "Koneksi Internet Anda Mungkin Hilang Atau Terputus, Halaman Akan Terefresh Kembali",
icon: "warning",
buttons: {
cancel: false,
confirm: true,
},
// dangerMode: true,
})
.then((hehe) =>{
location.reload();
});
}
});
var canvas = target.canvas;
canvas.remove(target);
canvas.requestRenderAll();
}
function renderIcon(ctx, left, top, styleOverride, fabricObject) {
var size = this.cornerSize;
ctx.save();
ctx.translate(left, top);
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
ctx.drawImage(img, -size/2, -size/2, size, size);
ctx.restore();
}
canvas.on('object:moved', function(options) {
console.log(options)
var obj = canvas.getActiveObject();
var datanya;
var id = options['target']['id'].slice(options['target']['id'].lastIndexOf('_') + 1);
var kategori = options['target']['id'].slice(0,options['target']['id'].lastIndexOf('_') + 1);
kategori = kategori.substring(0, kategori.length - 1);
// console.log(obj);
datanya = '{"left":"'+options['target']['left']+'","top":"'+options['target']['top']+'","width":"'+Math.floor(obj.getScaledWidth())+'","height":"'+Math.floor(obj.getScaledHeight())+'","angle":"'+options['target']['angle']+'"}';
simpan(datanya,'update',kategori,id);
});
canvas.on('object:rotated', function(options) {
// console.log(options)
var obj = canvas.getActiveObject();
var datanya;
var id = options['target']['id'].slice(options['target']['id'].lastIndexOf('_') + 1);
var kategori = options['target']['id'].slice(0,options['target']['id'].lastIndexOf('_') + 1);
kategori = kategori.substring(0, kategori.length - 1);
datanya = '{"left":"'+options['target']['left']+'","top":"'+options['target']['top']+'","width":"'+Math.floor(obj.getScaledWidth())+'","height":"'+Math.floor(obj.getScaledHeight())+'","angle":"'+options['target']['angle']+'"}';
simpan(datanya,'update',kategori,id);
});
canvas.on('object:scaled', function(options) {
var obj = canvas.getActiveObject();
var datanya;
var id = options['target']['id'].slice(options['target']['id'].lastIndexOf('_') + 1);
var kategori = options['target']['id'].slice(0,options['target']['id'].lastIndexOf('_') + 1);
kategori = kategori.substring(0, kategori.length - 1);
datanya = '{"left":"'+options['target']['left']+'","top":"'+options['target']['top']+'","width":"'+Math.floor(obj.getScaledWidth())+'","height":"'+Math.floor(obj.getScaledHeight())+'","angle":"'+options['target']['angle']+'"}';
simpan(datanya,'update',kategori,id);
});
// canvas.on('mouse:up', function(options) {
// console.log(options);
// });
function simpan(datanya,proses,kategori,id){
if (proses == "simpan") {
// console.log("sini berlaku simpan");
// console.log(datanya);
$.ajax({
url: "<?=base_url()?>admin/rak_buku",
type: 'post',
data: {data :datanya , proses : "tambah" ,kategori : kategori},
// dataType: 'json',
beforeSend: function(res) {
$.blockUI({
message: "<h4>Sedang Diproses</h4>",
css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
}
});
},
success: function (response) {
$.unblockUI();
console.log(response);
// location.reload();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
// console.log('gagal');
swal({
// title: "Submit Keperluan ?",
text: "Koneksi Internet Anda Mungkin Hilang Atau Terputus, Halaman Akan Terefresh Kembali",
icon: "warning",
buttons: {
cancel: false,
confirm: true,
},
// dangerMode: true,
})
.then((hehe) =>{
location.reload();
});
}
});
}
else if (proses == "update") {
// console.log("sini berlaku update");
// console.log(datanya);
$.ajax({
url: "<?=base_url()?>admin/rak_buku",
type: 'post',
data: {data :datanya , proses : "update" ,kategori : kategori , id : id},
// dataType: 'json',
beforeSend: function(res) {
$.blockUI({
message: "<h4>Sedang Diproses</h4>",
css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
}
});
},
success: function (response) {
$.unblockUI();
// console.log(response);
// location.reload();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$.unblockUI();
// console.log('gagal');
swal({
// title: "Submit Keperluan ?",
text: "Koneksi Internet Anda Mungkin Hilang Atau Terputus, Halaman Akan Terefresh Kembali",
icon: "warning",
buttons: {
cancel: false,
confirm: true,
},
// dangerMode: true,
})
.then((hehe) =>{
location.reload();
});
}
});
}
}
$.ajax({
url: "<?=base_url()?>admin/rak_buku",
type: 'post',
data: {proses : "cari_semuanya"},
// dataType: 'json',
success: function (response) {
// console.log(response);
$("#sini_html").html(response);
// location.reload();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
// console.log('gagal');
swal({
// title: "Submit Keperluan ?",
text: "Koneksi Internet Anda Mungkin Hilang Atau Terputus, Halaman Akan Terefresh Kembali",
icon: "warning",
buttons: {
cancel: false,
confirm: true,
},
// dangerMode: true,
})
.then((hehe) =>{
location.reload();
});
}
});
// canvas.on('object:skewing', function(options) {
// console.log(options);
// });
resizeCanvas();
</script>
</body>
</html>