main
Ilham Wara Nugroho 2026-02-24 10:50:01 +07:00
parent 47cb21e8c4
commit c32bfe2795
9 changed files with 172 additions and 58 deletions

View File

@ -12,6 +12,47 @@ use App\Models\Dataset\DatasetTable47;
class AjaxController extends Controller class AjaxController extends Controller
{ {
function getResourceDataDashboard(Request $request,$id){
$_data = [];
$keyId = decode_id($id);
$instansi = Instansi::find($keyId);
$resource = json_decode($instansi->resource_data);
// dd($resource);
if(@$resource){
$data = TabelData::whereIn('MsTabelDataId',$resource)->count();
if(@$data != 0){
$data = TabelData::whereIn('MsTabelDataId',$resource)->get();
}else{
$data = TabelData::all();
}
}else{
$data = TabelData::all();
}
// $data = TabelData::all();
foreach ($data as $key => $value) {
$cek = Dataset::where('instansi_id',$keyId)->where('ms_tabel_data_id',$value->MsTabelDataId)->first();
if(@$cek){
$status = '<span class="p-2 bg-emerald-500 text-[10px] rounded text-white w-full"><i class="ri-check-line"></i></span>';
}else{
$status = '<span class="p-2 bg-red-500 text-[10px] rounded text-white w-full"><i class="ri-close-line"></i></span>';
}
$_data[] = [
'no' => $key+1,
'tabel' => @$value->name,
'status' => @$status,
'tanggal' => @$cek ? date('d-m-Y',strtotime(@$cek->created_at)) : '-',
];
}
return response()->json($_data);
}
function getResourceData(Request $request){ function getResourceData(Request $request){
$_data = []; $_data = [];
@ -45,6 +86,7 @@ class AjaxController extends Controller
return response()->json(['data' => $_data,'status' => true]); return response()->json(['data' => $_data,'status' => true]);
} }
function getInstansi($type){ function getInstansi($type){
$data = []; $data = [];

View File

@ -115,7 +115,7 @@ class HomeController extends Controller
$dataset = Dataset::whereIn('ms_tabel_data_id',$resource)->count(); $dataset = Dataset::whereIn('ms_tabel_data_id',$resource)->count();
} }
$persentase = $countresource > 0 ? round(($dataset/$countresource)*100) : '0'; $persentase = $countresource > 0 ? round(($dataset/$countresource)*100) : '0';
$btn = '<a onclick="openModal()" href="#" data-id="'.encode_id($row->MsInstansiId).'" class="p-2 rounded bg-blue-500 text-white">'.$dataset.'/'.$countresource.'</a>'; $btn = '<a href="#" data-id="'.encode_id($row->MsInstansiId).'" data-name="'.$row->name.'" class="p-2 rounded btnModal bg-blue-500 text-white">'.$dataset.'/'.$countresource.'</a>';
if($persentase == 0){ if($persentase == 0){
$percent = '<span class="p-2 rounded bg-red-500 text-white">'.$persentase.'%</span>'; $percent = '<span class="p-2 rounded bg-red-500 text-white">'.$persentase.'%</span>';
}elseif($persentase > 0 && $persentase <= 50){ }elseif($persentase > 0 && $persentase <= 50){

View File

@ -30,6 +30,13 @@
padding:10px; padding:10px;
font-weight: 500!important; font-weight: 500!important;
}
.bootstrap-table .fixed-table-container .table td.tengah{
text-align: center!important;
padding:10px;
font-weight: 500!important;
} }
body { font-family: 'Plus Jakarta Sans', sans-serif; } body { font-family: 'Plus Jakarta Sans', sans-serif; }

View File

@ -1,5 +1,7 @@
@extends('layouts.master') @extends('layouts.master')
@section('content') @section('content')
<style>
</style>
<div class="flex-1 overflow-y-auto p-8 custom-scrollbar"> <div class="flex-1 overflow-y-auto p-8 custom-scrollbar">
<!-- Stats Cards --> <!-- Stats Cards -->
@ -81,10 +83,10 @@
id="grid-data"> id="grid-data">
<thead class="bg-slate-100 border-b border-slate-100"> <thead class="bg-slate-100 border-b border-slate-100">
<tr> <tr>
<th class="border font-bold text-slate-900 text-center" data-width="10" data-field="no">No</th> <th class="border font-bold text-slate-900 text-center tengah" data-width="10" data-field="no">No</th>
<th class="border font-bold text-slate-900 text-center" data-field="name">Instansi</th> <th class="border font-bold text-slate-900 text-center" data-field="name">Instansi</th>
<th class="border font-bold text-slate-900 text-center" data-width="20" data-field="dataset">Dataset</th> <th class="border font-bold text-slate-900 text-center tengah" data-width="20" data-field="dataset">Dataset</th>
<th class="border font-bold text-slate-900 text-center" data-width="20" data-field="persentase">Persentase</th> <th class="border font-bold text-slate-900 text-center tengah" data-width="20" data-field="persentase">Persentase</th>
</tr> </tr>
</thead> </thead>
<tbody></tbody> <tbody></tbody>
@ -113,7 +115,7 @@
data-sort-order="desc" data-sort-order="desc"
data-page-size="10" data-page-size="10"
data-id-field="id" data-id-field="id"
id="grid-data"> id="grid-data1">
<thead class="bg-slate-100 border-b border-slate-100"> <thead class="bg-slate-100 border-b border-slate-100">
<tr> <tr>
<th class="text-[10px] border font-bold text-slate-900 text-center" data-field="name">Dataset</th> <th class="text-[10px] border font-bold text-slate-900 text-center" data-field="name">Dataset</th>
@ -144,7 +146,7 @@
data-sort-order="desc" data-sort-order="desc"
data-page-size="10" data-page-size="10"
data-id-field="id" data-id-field="id"
id="grid-data"> id="grid-data2">
<thead class="bg-slate-100 border-b border-slate-100"> <thead class="bg-slate-100 border-b border-slate-100">
<tr> <tr>
<th class="text-[10px] border font-bold text-slate-900 text-center" data-width="20" data-field="dataset">Dataset</th> <th class="text-[10px] border font-bold text-slate-900 text-center" data-width="20" data-field="dataset">Dataset</th>
@ -170,8 +172,31 @@
&times; &times;
</button> </button>
<h2 class="text-xl font-bold mb-4">Tabel Data Dirjen Bina Marga</h2> <h2 class="text-xl font-bold mb-4 title">Tabel Data Dirjen Bina Marga</h2>
<table class="w-full border text-left border-collapse"> <table class="w-full border text-left border-collapse"
data-search="false"
data-toggle="table"
data-pagination="true"
data-toolbar="#toolbar"
data-show-refresh="false"
data-url=""
data-sort-name="ids"
data-sort-order="desc"
data-page-size="10"
data-id-field="id"
id="bodyTabelModal">
<thead class="bg-slate-100 border-b border-slate-100">
<tr>
<th class="text-[10px] border font-bold text-slate-900 text-center tengah" data-width="3" data-field="no">No</th>
<th class="text-[10px] border font-bold text-slate-900 text-center" data-field="tabel">Tabel Utama</th>
<th class="text-[10px] border font-bold text-slate-900 text-center tengah" data-field="status">Status</th>
<th class="text-[10px] border font-bold text-slate-900 text-center" data-field="tanggal">Tanggal Unggah</th>
</tr>
</thead>
<tbody></tbody>
</table>
{{-- <table class="w-full border text-left border-collapse">
<thead class="bg-slate-100 border-b border-slate-100"> <thead class="bg-slate-100 border-b border-slate-100">
<tr> <tr>
<th class="p-2 border font-bold text-slate-900 text-center" data-field="name">No</th> <th class="p-2 border font-bold text-slate-900 text-center" data-field="name">No</th>
@ -179,14 +204,14 @@
<th class="p-2 border font-bold text-slate-900 text-center" data-field="name">Tanggal Input</th> <th class="p-2 border font-bold text-slate-900 text-center" data-field="name">Tanggal Input</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody id="bodyTabelModal">
<tr> <tr>
<td class="p-2 border text-slate-900 text-center" data-field="name">1</td> <td class="p-2 border text-slate-900 text-center" data-field="name">1</td>
<td class="p-2 border text-slate-900 text-center" data-field="name">Tes</td> <td class="p-2 border text-slate-900 text-center" data-field="name">Tes</td>
<td class="p-2 border text-slate-900 text-center" data-field="name">2</td> <td class="p-2 border text-slate-900 text-center" data-field="name">2</td>
</tr> </tr>
</tbody> </tbody>
</table> </table> --}}
</div> </div>
@ -194,10 +219,24 @@
@endsection @endsection
@section('js') @section('js')
<script> <script>
function openModal() { $("#grid-data").on("click", ".btnModal", function() {
document.getElementById('modal').classList.remove('hidden');
document.getElementById('modal').classList.add('flex'); document.getElementById('modal').classList.remove('hidden');
} document.getElementById('modal').classList.add('flex');
var id = $(this).attr('data-id');
var name = $(this).attr('data-name');
var base_url = "{{url('/')}}";
var html = '';
var url = base_url + '/getResourceDataDashboard/' + id;
$('.title').html('Tabel Data '+name);
$('#bodyTabelModal').bootstrapTable('refresh', {
url: url
});
});
function closeModal() { function closeModal() {
document.getElementById('modal').classList.remove('flex'); document.getElementById('modal').classList.remove('flex');

View File

@ -11,15 +11,15 @@
data-search="false" data-search="false"
data-show-refresh ="false" data-show-refresh ="false"
data-page-size="700"> data-page-size="700">
<thead class="bg-slate-50/50 border-b border-slate-100"> <thead class="bg-slate-100 border-b border-slate-100">
<tr> <tr>
<th class="text-[10px] border font-bold text-slate-900 text-center" width="20">#</th> <th class="text-[10px] border font-bold text-slate-900 text-center" width="20">#</th>
<th class="text-[10px] border font-bold text-slate-900 text-center" >Menu</th> <th class="text-[10px] border font-bold text-slate-900 text-center" >Menu</th>
<th class="text-[10px] border font-bold text-slate-900 text-center" width="100"><label><input type="checkbox" class="checkread"> Read</label></th> <th class="text-[10px] border font-bold text-slate-900 text-center" width="100"><label><input type="checkbox" class="checkread"> Lihat</label></th>
<th class="text-[10px] border font-bold text-slate-900 text-center" width="100"><label><input type="checkbox" class="checkadd"> Create</label></th> <th class="text-[10px] border font-bold text-slate-900 text-center" width="100"><label><input type="checkbox" class="checkadd"> Tambah</label></th>
<th class="text-[10px] border font-bold text-slate-900 text-center" width="100"><label><input type="checkbox" class="checkedit"> Update</label></th> <th class="text-[10px] border font-bold text-slate-900 text-center" width="100"><label><input type="checkbox" class="checkedit"> Edit</label></th>
<th class="text-[10px] border font-bold text-slate-900 text-center" width="100"><label><input type="checkbox" class="checkdel"> Delete</label></th> <th class="text-[10px] border font-bold text-slate-900 text-center" width="100"><label><input type="checkbox" class="checkdel"> Hapus</label></th>
<th class="text-[10px] border font-bold text-slate-900 text-center" width="100"><label><input type="checkbox" class="checkdownload"> Download</label></th> <th class="text-[10px] border font-bold text-slate-900 text-center" width="100"><label><input type="checkbox" class="checkdownload"> Unggah</label></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

View File

@ -25,11 +25,11 @@
data-page-size="10" data-page-size="10"
data-id-field="id" data-id-field="id"
id="grid-data"> id="grid-data">
<thead class="bg-slate-50/50 border-b border-slate-100"> <thead class="bg-slate-100 border-b border-slate-100">
<tr> <tr>
<th class="text-[10px] border font-bold text-slate-900 text-center" data-width="10" data-field="action">#</th> <th class="border font-bold text-slate-900 text-center tengah" data-width="10" data-field="action">#</th>
<th class="text-[10px] border font-bold text-slate-900 text-center" data-width="10" data-field="no">No</th> <th class="border font-bold text-slate-900 text-center" data-width="10" data-field="no">No</th>
<th class="text-[10px] border font-bold text-slate-900 text-center" data-field="name">Name</th> <th class="border font-bold text-slate-900 text-center" data-field="name">Name</th>
</tr> </tr>
</thead> </thead>
<tbody class="gridjs-tbody"></tbody> <tbody class="gridjs-tbody"></tbody>

View File

@ -58,7 +58,7 @@
<div class="flex gap-4"> <div class="flex gap-4">
<label class="mb-3 w-1/2 font-semibold required">Instansi</label> <label class="mb-3 w-1/2 font-semibold required">Instansi</label>
<select name="ms_instansi_id" id="ms_instansi_id" class="p-2 bg-white rounded border w-full @error('ms_instansi_id') is-invalid @enderror" required> <select name="ms_instansi_id" id="ms_instansi_id" class="p-2 bg-white rounded border w-full select2 @error('ms_instansi_id') is-invalid @enderror" required>
<option value="">-Pilih Jenis Instansi-</option> <option value="">-Pilih Jenis Instansi-</option>
@if(@$userInstansi) @if(@$userInstansi)
<option selected value="{{encode_id(@$userInstansi->ms_instansi_id)}}">{{@$userInstansi->instansi->name}}</option> <option selected value="{{encode_id(@$userInstansi->ms_instansi_id)}}">{{@$userInstansi->instansi->name}}</option>
@ -93,38 +93,63 @@
<script src="{{asset('assets/libs/choices.js/public/assets/scripts/choices.min.js')}}"></script> <script src="{{asset('assets/libs/choices.js/public/assets/scripts/choices.min.js')}}"></script>
<script type="text/javascript"> <script type="text/javascript">
const typeSelect = document.getElementById('type');
const instansiSelect = document.getElementById('ms_instansi_id');
const choicesInstansi = new Choices(instansiSelect, {
allowHTML: false,
searchPlaceholderValue: 'Pilih Instansi terlebih dahulu',
});
// Ketika user memilih sekolah, load ulang kelas // ketika type berubah
typeSelect.addEventListener('change', function() { $('#type').on('change', function () {
const type = this.value; const type = $(this).val();
$.ajax({
// Kosongkan pilihan kelas sebelumnya method: "GET",
choicesInstansi.clearChoices(); url: `{{ url('getInstansi') }}/${type}`,
}).done(function(msg) {
// Load data kelas berdasarkan type obj = msg.data;
choicesInstansi.setChoices(() => { $('.remove').remove();
return fetch(`{{ url('getInstansi') }}/${type}`) if (obj.length > 0) {
.then(res => res.json())
.then(res => { $.each(obj, function(index) {
return res.data.map(item => ({ value = obj[index].id;
label: item.name, text = obj[index].name;
value: item.id $('#ms_instansi_id').append('<option class="remove" value=' + value + '>' + text + '</option>');
})); });
}) }else {
.catch(err => { $('.remove').remove();
console.error('Gagal load instansi:', err); }
return []; $('#loading-spinner').hide();
});
}); });
}); });
// const typeSelect = document.getElementById('type');
// const instansiSelect = document.getElementById('ms_instansi_id');
// const choicesInstansi = new Choices(instansiSelect, {
// allowHTML: false,
// searchPlaceholderValue: 'Pilih Instansi terlebih dahulu',
// });
// // Ketika user memilih sekolah, load ulang kelas
// typeSelect.addEventListener('change', function() {
// const type = this.value;
// // Kosongkan pilihan kelas sebelumnya
// choicesInstansi.clearChoices();
// // Load data kelas berdasarkan type
// choicesInstansi.setChoices(() => {
// return fetch(`{{ url('getInstansi') }}/${type}`)
// .then(res => res.json())
// .then(res => {
// return res.data.map(item => ({
// label: item.name,
// value: item.id
// }));
// })
// .catch(err => {
// console.error('Gagal load instansi:', err);
// return [];
// });
// });
// });
$('#togglePassword').on('click', function() { $('#togglePassword').on('click', function() {
let passwordField = $('#password'); let passwordField = $('#password');
let icon = $(this).find('i'); let icon = $(this).find('i');

View File

@ -25,12 +25,12 @@
data-page-size="10" data-page-size="10"
data-id-field="id" data-id-field="id"
id="grid-data"> id="grid-data">
<thead class="bg-slate-50/50 border-b border-slate-100"> <thead class="bg-slate-100 border-b border-slate-100">
<tr> <tr>
<th class="text-[10px] border font-bold text-slate-900 text-center" data-width="10" data-field="action">#</th> <th class="border font-bold text-slate-900 text-center tengah" data-width="10" data-field="action">#</th>
<th class="text-[10px] border font-bold text-slate-900 text-center" data-width="10" data-field="no">No</th> <th class="border font-bold text-slate-900 text-center" data-width="10" data-field="no">No</th>
<th class="text-[10px] border font-bold text-slate-900 text-center" data-field="name">Name</th> <th class="border font-bold text-slate-900 text-center" data-field="name">Name</th>
<th class="text-[10px] border font-bold text-slate-900 text-center" data-field="role">Role</th> <th class="border font-bold text-slate-900 text-center" data-field="role">Role</th>
</tr> </tr>
</thead> </thead>
</table> </table>

View File

@ -18,6 +18,7 @@ use App\Http\Controllers\AjaxController;
Route::get('getPenduduk/{tahun}',[AjaxController::class,'getPenduduk'])->name('getPenduduk'); Route::get('getPenduduk/{tahun}',[AjaxController::class,'getPenduduk'])->name('getPenduduk');
Route::get('getTimbulan/{tahun}',[AjaxController::class,'getTimbulan'])->name('getTimbulan'); Route::get('getTimbulan/{tahun}',[AjaxController::class,'getTimbulan'])->name('getTimbulan');
Route::get('getResourceData',[AjaxController::class,'getResourceData'])->name('getResourceData'); Route::get('getResourceData',[AjaxController::class,'getResourceData'])->name('getResourceData');
Route::get('getResourceDataDashboard/{id}',[AjaxController::class,'getResourceDataDashboard'])->name('getResourceDataDashboard');
Route::name('dashboard.')->prefix('dashboard')->group(function () { Route::name('dashboard.')->prefix('dashboard')->group(function () {
Route::get('/',[HomeController::class,'dashboard'])->name('dashboard'); Route::get('/',[HomeController::class,'dashboard'])->name('dashboard');