413 lines
14 KiB
PHP
413 lines
14 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
@include('layouts.headers.header-content')
|
|
|
|
<div class="container-fluid mt--6">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="card">
|
|
<!-- Card header -->
|
|
<div class="card-header border-0">
|
|
<h3 class="mb-0">{{ $current_page }}</h3>
|
|
<div class="d-flex flex-row-reverse">
|
|
<a class="btn btn-md btn-primary justify-content-end text-white modal_add" ><i class="fas fa-plus"></i> Tambah</a>
|
|
</div>
|
|
</div>
|
|
|
|
@if ($message = Session::get('sukses'))
|
|
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
|
<span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
|
|
<span class="alert-inner--text"><strong>{{ $message }}</strong> </span>
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
@endif
|
|
|
|
@if ($message = Session::get('error'))
|
|
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
|
<span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
|
|
<span class="alert-inner--text"><strong>{{ $message }}</strong> </span>
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
@endif
|
|
|
|
|
|
<!-- Light table -->
|
|
<div id="show_image_popup">
|
|
<div class="close-btn-area">
|
|
|
|
<button id="close-btn-image"><i class="fas fa-plus"></i></button>
|
|
</div>
|
|
<div id="image-show-area">
|
|
<img id="large-image" src="" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table align-items-center table-flush" id="table_data">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th scope="col" class="sort" data-sort="name">Nama Barang </th>
|
|
<th scope="col" class="sort" data-sort="budget">Jenis Barang</th>
|
|
<th scope="col" class="sort" data-sort="status">Lokasi</th>
|
|
<th scope="col" class="sort" data-sort="completion">Jumlah Barang</th>
|
|
<th scope="col"> Tanggal Masuk </th>
|
|
<th scope="col"> Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="list">
|
|
|
|
|
|
@foreach($barang as $i)
|
|
<tr>
|
|
<td> <div class="media align-items-center">
|
|
<a href="#" class="circlee small-image mr-3">
|
|
<img alt="Image placeholder" src="{{ \Helperku::get_image_barang($i->id) }}">
|
|
</a>
|
|
<div class="media-body">
|
|
<span class="name mb-0 text-sm">{{ $i->nama_barang }}</span>
|
|
</div>
|
|
</div><br>
|
|
<span class="badge badge-primary">{{ $i->serial_number }}</span></td>
|
|
<td>{{ $i->nama_jenis }}</td>
|
|
<td> <a href="https://maps.google.com/?q=<?= $i->lokasi ?>" target="_blank" class="btn btn-sm btn-outline-primary">
|
|
<?= $i->lokasi ?> <span class="badge badge-light"><i class="fas fa-map-marker text-success"></i></span>
|
|
</a></td>
|
|
<td><a data-id="{{ $i->id }}" class="modal_detail_stok btn btn-sm btn-outline-light" > {{ $i->jumlah_barang }} / {{ $i->nama_satuan }} <i class="fas fa-info-circle text-success"></i></a></td>
|
|
<td><span class="fas fa-calendar-check"></span> {{ $i->tanggal_masuk }}</td>
|
|
<td class="text-right">
|
|
|
|
<a data-id="{{ $i->id }}" href="#" data-toggle="tooltip" data-placement="top" title="Edit" class=" modal_edit text-right btn btn-md btn-outline-success"><i class="fas fa-edit text-right"></i> </a>
|
|
<a data-toggle="tooltip" data-placement="top" title="Hapus" onclick="return confirm('barang ini akan di delete ... ?')" href="{{ route('barang.hapus',$i->id) }}" class=" text-right btn btn-md btn-outline-danger"><i class="fas fa-trash"></i> </a>
|
|
<a data-id="{{ $i->id }}" href="#" data-toggle="tooltip" data-placement="top" title="Barang Keluar" class=" modal_keluar text-right btn btn-md btn-outline-primary"><i class="fas fa-arrow-right text-right"></i> </a>
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Card footer -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Modal -->
|
|
@include('admin.barang.modal_add')
|
|
@include('admin.barang.modal_edit')
|
|
@include('admin.barang.modal_keluar')
|
|
@include('admin.barang.modal_detail_stok')
|
|
|
|
@include('layouts.footers.auth')
|
|
</div>
|
|
@endsection
|
|
|
|
@push('js')
|
|
<script src="{{ secure_asset('argon') }}/vendor/chart.js/dist/Chart.min.js"></script>
|
|
<script src="{{ secure_asset('argon') }}/vendor/chart.js/dist/Chart.extension.js"></script>
|
|
|
|
<script>
|
|
$("[name=jenis_keluar]").change(function(e){
|
|
|
|
e.preventDefault();
|
|
|
|
var isi = $(this).val();
|
|
|
|
if(isi == 1){
|
|
|
|
var html = '';
|
|
|
|
html += '<div class="row bm-3">'+
|
|
'<div class="form-group mb-3 col-6">'+
|
|
'<div class="input-group input-group-alternative">'+
|
|
'<div class="input-group-prepend">'+
|
|
'<span class="input-group-text"> <i class="fas fa-user"></i></span>'+
|
|
'</div>'+
|
|
'<select name="pengguna" class="form-control" required>'+
|
|
'<option value="">-- Pilih Penanggung Jawab --</option>'+
|
|
'@foreach($pengguna as $i)'+
|
|
'<option value="{{ $i->id }}">{{ $i->nama }}</option>'+
|
|
'@endforeach'+
|
|
'</select>'+
|
|
'</div>'+
|
|
'</div>'+
|
|
'<div class="form-group mb-3 col-6">'+
|
|
'<div class="input-group input-group-alternative">'+
|
|
'<div class="input-group-prepend">'+
|
|
'<span class="input-group-text"><i class="fas fa-upload"></i></span>'+
|
|
'</div>'+
|
|
'<input class="custom-file-input form-control" required placeholder="inputkan Jumlah Barang ..." type="file" name="file_barang"><br>'+
|
|
'<small>* Upload FIle</small>'+
|
|
'</div>'+
|
|
'</div>'+
|
|
'</div>';
|
|
$("#pinjam_field").html(html);
|
|
}else{
|
|
$("#pinjam_field").html('');
|
|
}
|
|
|
|
})
|
|
</script>
|
|
<script>
|
|
|
|
$(document).ready(function () {
|
|
$('#table_data').DataTable();
|
|
$('[data-toggle="tooltip"]').tooltip();
|
|
});
|
|
$(".modal_add").click(function(e){
|
|
|
|
e.preventDefault();
|
|
|
|
$("#modal_add").modal('show');
|
|
})
|
|
|
|
$(".modal_keluar").click(function(e){
|
|
|
|
e.preventDefault();
|
|
$("#modal_keluar").modal('show');
|
|
var id = $(this).attr('data-id');
|
|
|
|
$.ajaxSetup({
|
|
headers: {
|
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
|
}
|
|
})
|
|
$.ajax({
|
|
url:"{{ secure_url('get_barang') }}",
|
|
method:"post",
|
|
data:{id:id},
|
|
success:function(data){
|
|
|
|
var obj = JSON.parse(data);
|
|
console.log(obj[0].serial_number);
|
|
|
|
$("[name=nama_barang]").val(obj[0].nama_barang);
|
|
$("[name=id_barang]").val(id);
|
|
$(".serial_number").text('S/N : '+obj[0].serial_number);
|
|
$(".jenis_barang").text('Jenis :'+obj[0].nama_jenis );
|
|
|
|
|
|
|
|
$.ajaxSetup({
|
|
headers: {
|
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
|
}
|
|
})
|
|
|
|
$.ajax({
|
|
url:"{{ secure_url('get_detail_stok') }}",
|
|
method:"post",
|
|
data:{id:id},
|
|
success:function(data){
|
|
|
|
var obj = JSON.parse(data);
|
|
console.log(obj);
|
|
|
|
|
|
$(".satuan_barang").text('Stok :'+obj.stok_now+'');
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
})
|
|
$(".modal_detail_stok").click(function(e){
|
|
e.preventDefault();
|
|
var id_barang = $(this).attr('data-id');
|
|
$("#modal_detail_stok").modal('show');
|
|
|
|
$.ajaxSetup({
|
|
headers: {
|
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
|
}
|
|
})
|
|
$.ajax({
|
|
url:"{{ secure_url('get_detail_stok') }}",
|
|
method:"post",
|
|
data:{id:id_barang},
|
|
success:function(data){
|
|
|
|
var obj = JSON.parse(data);
|
|
// console.log(obj);
|
|
var stok_pinjam = '';
|
|
var stok_rusak = '';
|
|
var stok_awal = '';
|
|
var stok_now = '';
|
|
|
|
$(".stok_awal").text(obj.stok_awal);
|
|
$(".stok_now").text(obj.stok_now);
|
|
$(".nama_barang").text(obj.nama_barang);
|
|
if(obj.stok_pinjam == 0){
|
|
|
|
stok_pinjam = 0;
|
|
}else{
|
|
stok_pinjam = obj.stok_pinjam;
|
|
}
|
|
|
|
if(obj.stok_rusak == 0){
|
|
|
|
stok_rusak = 0;
|
|
}else{
|
|
stok_rusak = obj.stok_rusak;
|
|
}
|
|
|
|
$(".stok_pinjam").text(stok_pinjam);
|
|
$(".stok_rusak").text(stok_rusak)
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
$(".modal_edit").click(function(e){
|
|
|
|
e.preventDefault();
|
|
|
|
$("#modal_edit").modal('show');
|
|
var id = $(this).attr('data-id');
|
|
// console.log(id_jenis);
|
|
$.ajaxSetup({
|
|
headers: {
|
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
|
}
|
|
})
|
|
$.ajax({
|
|
url:"{{ secure_url('get_barang') }}",
|
|
method:"post",
|
|
data:{id:id},
|
|
success:function(data){
|
|
|
|
var obj = JSON.parse(data);
|
|
console.log(obj[0].nama_barang);
|
|
|
|
$("[name=nama_barang]").val(obj[0].nama_barang);
|
|
$("[name=id]").val(id);
|
|
$("[name=serial_number]").val('S/N : '+obj[0].serial_number);
|
|
$("[name=lokasi]").val(obj[0].lokasi);
|
|
$("[name=keterangan]").val(obj[0].keterangan);
|
|
$("[name=jumlah]").val(obj[0].jumlah_barang);
|
|
$("[name=tanggal_masuk]").val(obj[0].tanggal_masuk);
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
})
|
|
$( document ).ready(function(){
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// without animation
|
|
/*
|
|
$("#close-btn").click(function(){
|
|
$(".small-image").removeClass('active');
|
|
$("#show_image_popup").hide();
|
|
})
|
|
|
|
|
|
$(".small-image").click(function(){
|
|
// add active class
|
|
$(this).addClass('active');
|
|
var image_path = $(this).attr('src');
|
|
$("#show_image_popup").hide();
|
|
// now st this path to our popup image src
|
|
$("#show_image_popup").show();
|
|
$("#large-image").attr('src',image_path);
|
|
|
|
})
|
|
*/
|
|
|
|
// with animation
|
|
|
|
$("#close-btn-image").click(function(){
|
|
// remove active class from all images
|
|
$(".small-image").removeClass('active');
|
|
$("#show_image_popup").slideUp();
|
|
})
|
|
|
|
$(".small-image img").click(function(){
|
|
// remove active class from all images
|
|
$(".small-image").removeClass('active');
|
|
// add active class
|
|
$(this).addClass('active');
|
|
|
|
var image_path = $(this).attr('src');
|
|
|
|
console.log(image_path);
|
|
$("#show_image_popup").fadeOut();
|
|
// now st this path to our popup image src
|
|
$("#show_image_popup").fadeIn();
|
|
$("#large-image").attr('src',image_path);
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
// javascript
|
|
|
|
// var small_images = document.getElementsByClassName("small-image");
|
|
// var show_image_popup = document.getElementById("show_image_popup");
|
|
// var large_image = document.getElementById("large-image");
|
|
// var close_btn = document.getElementById("close-btn");
|
|
|
|
// for(var i=0; i< small_images.length; i++){
|
|
|
|
// small_images[i].addEventListener("click", function(){
|
|
// // remove active class from every images
|
|
// for(var j=0; j< small_images.length; j++){
|
|
// small_images[j].classList.remove('active');
|
|
// }
|
|
// // end
|
|
|
|
// this.classList.add('active'); // add active class to this image
|
|
|
|
// var src_val = this.src;
|
|
// large_image.src = src_val;
|
|
// showModal();
|
|
// });
|
|
// }
|
|
|
|
|
|
// function showModal(){
|
|
// show_image_popup.style.display = 'block';
|
|
// }
|
|
|
|
// close_btn.addEventListener("click", function(){
|
|
// // before colose the modal we need to remove active class
|
|
// for(var i=0; i< small_images.length; i++){
|
|
// small_images[i].classList.remove('active');
|
|
// }
|
|
// // end
|
|
// closeModal();
|
|
// });
|
|
|
|
// function closeModal(){
|
|
// show_image_popup.style.display = 'none';
|
|
// }
|
|
|
|
|
|
</script>
|
|
@endpush
|
|
|