Merapikan Tampilan Admin
This commit is contained in:
parent
c404164666
commit
f72a673b8c
|
@ -3,6 +3,7 @@
|
|||
namespace App\Http\Controllers;
|
||||
|
||||
use App\Models\Curas;
|
||||
use App\Models\Curanmor;
|
||||
use Illuminate\Http\Request;
|
||||
|
||||
class MapController extends Controller
|
||||
|
@ -10,48 +11,33 @@ class MapController extends Controller
|
|||
/**
|
||||
* Display a listing of the resource.
|
||||
*/
|
||||
public function index()
|
||||
public function mapCuras()
|
||||
{
|
||||
$data = Curas::with(['punyaKecamatanCuras', 'punyaKlasterCuras'])->get()->map(function ($item) {
|
||||
return [
|
||||
'kecamatan' => $item->punyaKecamatanCuras->nama_kecamatan, // pastikan nama kolom benar
|
||||
'kecamatan' => $item->punyaKecamatanCuras->nama_kecamatan,
|
||||
'jumlah_curas' => $item->jumlah_curas,
|
||||
'klaster' => $item->punyaKlasterCuras?->warna ?? '#cccccc' // fallback warna abu-abu jika tidak ada
|
||||
'klaster' => $item->punyaKlasterCuras?->nama_klaster ?? 'Tidak Diketahui',
|
||||
'warna' => $item->punyaKlasterCuras?->warna ?? '#cccccc' // warna tetap dipakai untuk pewarnaan peta
|
||||
];
|
||||
});
|
||||
return response()->json($data);
|
||||
|
||||
}
|
||||
|
||||
// CuranmorController.php
|
||||
public function mapCuranmor()
|
||||
{
|
||||
$data = Curanmor::with(['punyaKecamatanCuranmor', 'punyaKlasterCuranmor'])->get()->map(function ($item) {
|
||||
return [
|
||||
'kecamatan' => $item->punyaKecamatanCuranmor->nama_kecamatan,
|
||||
'jumlah_curanmor' => $item->jumlah_curanmor,
|
||||
'klaster' => $item->punyaKlasterCuranmor?->nama_klaster ?? 'Tidak diketahui',
|
||||
'warna' => $item->punyaKlasterCuranmor?->warna ?? '#cccccc'
|
||||
];
|
||||
});
|
||||
|
||||
return response()->json($data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Store a newly created resource in storage.
|
||||
*/
|
||||
public function store(Request $request)
|
||||
{
|
||||
//
|
||||
}
|
||||
|
||||
/**
|
||||
* Display the specified resource.
|
||||
*/
|
||||
public function show(string $id)
|
||||
{
|
||||
//
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the specified resource in storage.
|
||||
*/
|
||||
public function update(Request $request, string $id)
|
||||
{
|
||||
//
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the specified resource from storage.
|
||||
*/
|
||||
public function destroy(string $id)
|
||||
{
|
||||
//
|
||||
}
|
||||
}
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
After Width: | Height: | Size: 12 KiB |
|
@ -85,15 +85,16 @@
|
|||
</div>
|
||||
<div class="card-header-toolbar d-flex align-items-center">
|
||||
<div class="dropdown">
|
||||
<span class="dropdown-toggle dropdown-bg btn" id="dropdownMenuButton001"
|
||||
data-toggle="dropdown">
|
||||
This Month<i class="ri-arrow-down-s-line ml-1"></i>
|
||||
<span id="dropdownMenuButton001" class="dropdown-toggle dropdown-bg btn" data-toggle="dropdown">
|
||||
<span id="currentMapLabel">Curas</span> <i class="ri-arrow-down-s-line ml-1"></i>
|
||||
</span>
|
||||
<div class="dropdown-menu dropdown-menu-right shadow-none"
|
||||
aria-labelledby="dropdownMenuButton001">
|
||||
<a class="dropdown-item" href="#">Curas</a>
|
||||
<a class="dropdown-item" href="#">Curanmor</a>
|
||||
<a class="dropdown-item" href="#" id="btn-curas">Curas</a>
|
||||
<a class="dropdown-item" href="#" id="btn-curanmor">Curanmor</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -102,237 +103,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
<div class="card card-block card-stretch card-height">
|
||||
<div class="card-header d-flex align-items-center justify-content-between">
|
||||
<div class="header-title">
|
||||
<h4 class="card-title">Top Products</h4>
|
||||
</div>
|
||||
<div class="card-header-toolbar d-flex align-items-center">
|
||||
<div class="dropdown">
|
||||
<span class="dropdown-toggle dropdown-bg btn" id="dropdownMenuButton006"
|
||||
data-toggle="dropdown">
|
||||
This Month<i class="ri-arrow-down-s-line ml-1"></i>
|
||||
</span>
|
||||
<div class="dropdown-menu dropdown-menu-right shadow-none"
|
||||
aria-labelledby="dropdownMenuButton006">
|
||||
<a class="dropdown-item" href="#">Year</a>
|
||||
<a class="dropdown-item" href="#">Month</a>
|
||||
<a class="dropdown-item" href="#">Week</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-unstyled row top-product mb-0">
|
||||
<li class="col-lg-3">
|
||||
<div class="card card-block card-stretch card-height mb-0">
|
||||
<div class="card-body">
|
||||
<div class="bg-warning-light rounded">
|
||||
<img src="{{ asset('assets/images/product/01.png') }}" class="style-img img-fluid m-auto p-3" alt="image">
|
||||
</div>
|
||||
<div class="style-text text-left mt-3">
|
||||
<h5 class="mb-1">Organic Cream</h5>
|
||||
<p class="mb-0">789 Item</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-lg-3">
|
||||
<div class="card card-block card-stretch card-height mb-0">
|
||||
<div class="card-body">
|
||||
<div class="bg-danger-light rounded">
|
||||
<img src="../assets/images/product/02.png" class="style-img img-fluid m-auto p-3" alt="image">
|
||||
</div>
|
||||
<div class="style-text text-left mt-3">
|
||||
<h5 class="mb-1">Rain Umbrella</h5>
|
||||
<p class="mb-0">657 Item</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-lg-3">
|
||||
<div class="card card-block card-stretch card-height mb-0">
|
||||
<div class="card-body">
|
||||
<div class="bg-info-light rounded">
|
||||
<img src="../assets/images/product/03.png" class="style-img img-fluid m-auto p-3" alt="image">
|
||||
</div>
|
||||
<div class="style-text text-left mt-3">
|
||||
<h5 class="mb-1">Serum Bottle</h5>
|
||||
<p class="mb-0">489 Item</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-lg-3">
|
||||
<div class="card card-block card-stretch card-height mb-0">
|
||||
<div class="card-body">
|
||||
<div class="bg-success-light rounded">
|
||||
<img src="../assets/images/product/02.png" class="style-img img-fluid m-auto p-3" alt="image">
|
||||
</div>
|
||||
<div class="style-text text-left mt-3">
|
||||
<h5 class="mb-1">Organic Cream</h5>
|
||||
<p class="mb-0">468 Item</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card card-transparent card-block card-stretch mb-4">
|
||||
<div class="card-header d-flex align-items-center justify-content-between p-0">
|
||||
<div class="header-title">
|
||||
<h4 class="card-title mb-0">Best Item All Time</h4>
|
||||
</div>
|
||||
<div class="card-header-toolbar d-flex align-items-center">
|
||||
<div><a href="#" class="btn btn-primary view-btn font-size-14">View All</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-block card-stretch card-height-helf">
|
||||
<div class="card-body card-item-right">
|
||||
<div class="d-flex align-items-top">
|
||||
<div class="bg-warning-light rounded">
|
||||
<img src="../assets/images/product/04.png" class="style-img img-fluid m-auto" alt="image">
|
||||
</div>
|
||||
<div class="style-text text-left">
|
||||
<h5 class="mb-2">Coffee Beans Packet</h5>
|
||||
<p class="mb-2">Total Sell : 45897</p>
|
||||
<p class="mb-0">Total Earned : $45,89 M</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-block card-stretch card-height-helf">
|
||||
<div class="card-body card-item-right">
|
||||
<div class="d-flex align-items-top">
|
||||
<div class="bg-danger-light rounded">
|
||||
<img src="../assets/images/product/05.png" class="style-img img-fluid m-auto" alt="image">
|
||||
</div>
|
||||
<div class="style-text text-left">
|
||||
<h5 class="mb-2">Bottle Cup Set</h5>
|
||||
<p class="mb-2">Total Sell : 44359</p>
|
||||
<p class="mb-0">Total Earned : $45,50 M</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card card-block card-stretch card-height-helf">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-top justify-content-between">
|
||||
<div class="">
|
||||
<p class="mb-0">Income</p>
|
||||
<h5>$ 98,7800 K</h5>
|
||||
</div>
|
||||
<div class="card-header-toolbar d-flex align-items-center">
|
||||
<div class="dropdown">
|
||||
<span class="dropdown-toggle dropdown-bg btn" id="dropdownMenuButton003"
|
||||
data-toggle="dropdown">
|
||||
This Month<i class="ri-arrow-down-s-line ml-1"></i>
|
||||
</span>
|
||||
<div class="dropdown-menu dropdown-menu-right shadow-none"
|
||||
aria-labelledby="dropdownMenuButton003">
|
||||
<a class="dropdown-item" href="#">Year</a>
|
||||
<a class="dropdown-item" href="#">Month</a>
|
||||
<a class="dropdown-item" href="#">Week</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="layout1-chart-3" class="layout-chart-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-block card-stretch card-height-helf">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-top justify-content-between">
|
||||
<div class="">
|
||||
<p class="mb-0">Expenses</p>
|
||||
<h5>$ 45,8956 K</h5>
|
||||
</div>
|
||||
<div class="card-header-toolbar d-flex align-items-center">
|
||||
<div class="dropdown">
|
||||
<span class="dropdown-toggle dropdown-bg btn" id="dropdownMenuButton004"
|
||||
data-toggle="dropdown">
|
||||
This Month<i class="ri-arrow-down-s-line ml-1"></i>
|
||||
</span>
|
||||
<div class="dropdown-menu dropdown-menu-right shadow-none"
|
||||
aria-labelledby="dropdownMenuButton004">
|
||||
<a class="dropdown-item" href="#">Year</a>
|
||||
<a class="dropdown-item" href="#">Month</a>
|
||||
<a class="dropdown-item" href="#">Week</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="layout1-chart-4" class="layout-chart-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
<div class="card card-block card-stretch card-height">
|
||||
<div class="card-header d-flex justify-content-between">
|
||||
<div class="header-title">
|
||||
<h4 class="card-title">Order Summary</h4>
|
||||
</div>
|
||||
<div class="card-header-toolbar d-flex align-items-center">
|
||||
<div class="dropdown">
|
||||
<span class="dropdown-toggle dropdown-bg btn" id="dropdownMenuButton005"
|
||||
data-toggle="dropdown">
|
||||
This Month<i class="ri-arrow-down-s-line ml-1"></i>
|
||||
</span>
|
||||
<div class="dropdown-menu dropdown-menu-right shadow-none"
|
||||
aria-labelledby="dropdownMenuButton005">
|
||||
<a class="dropdown-item" href="#">Year</a>
|
||||
<a class="dropdown-item" href="#">Month</a>
|
||||
<a class="dropdown-item" href="#">Week</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap align-items-center mt-2">
|
||||
<div class="d-flex align-items-center progress-order-left">
|
||||
<div class="progress progress-round m-0 orange conversation-bar" data-percent="46">
|
||||
<span class="progress-left">
|
||||
<span class="progress-bar"></span>
|
||||
</span>
|
||||
<span class="progress-right">
|
||||
<span class="progress-bar"></span>
|
||||
</span>
|
||||
<div class="progress-value text-secondary">46%</div>
|
||||
</div>
|
||||
<div class="progress-value ml-3 pr-5 border-right">
|
||||
<h5>$12,6598</h5>
|
||||
<p class="mb-0">Average Orders</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center ml-5 progress-order-right">
|
||||
<div class="progress progress-round m-0 primary conversation-bar" data-percent="46">
|
||||
<span class="progress-left">
|
||||
<span class="progress-bar"></span>
|
||||
</span>
|
||||
<span class="progress-right">
|
||||
<span class="progress-bar"></span>
|
||||
</span>
|
||||
<div class="progress-value text-primary">46%</div>
|
||||
</div>
|
||||
<div class="progress-value ml-3">
|
||||
<h5>$59,8478</h5>
|
||||
<p class="mb-0">Top Orders</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pt-0">
|
||||
<div id="layout1-chart-5"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page end -->
|
||||
|
@ -340,28 +110,44 @@
|
|||
</div>
|
||||
{{-- Script MAP --}}
|
||||
<script>
|
||||
let map;
|
||||
let geoLayer;
|
||||
let mapTitle = document.querySelector('.card-title');
|
||||
let apiUrl = "{{ url('/api/map/curas') }}"; // default awal curas
|
||||
let curasData = {};
|
||||
|
||||
fetch("{{ url('/api/map') }}")
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
data.forEach(item => {
|
||||
curasData[item.kecamatan] = item;
|
||||
function fetchAndLoadMap(url, titleText) {
|
||||
fetch(url)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
curasData = {};
|
||||
data.forEach(item => {
|
||||
curasData[item.kecamatan] = item;
|
||||
});
|
||||
mapTitle.textContent = titleText;
|
||||
|
||||
if (geoLayer) {
|
||||
geoLayer.remove(); // hapus layer lama
|
||||
}
|
||||
|
||||
geoLayer = new L.GeoJSON.AJAX(["{{ asset('/assets/map/gisProbolinggo.geojson') }}"], {
|
||||
style: styleFeature,
|
||||
onEachFeature: popUp
|
||||
});
|
||||
geoLayer.addTo(map);
|
||||
});
|
||||
}
|
||||
|
||||
loadMap(); // setelah data siap, jalankan ini
|
||||
});
|
||||
|
||||
function getColor(klasterWarna) {
|
||||
return klasterWarna || '#cccccc'; // fallback
|
||||
function getColor(warna) {
|
||||
return warna || '#cccccc';
|
||||
}
|
||||
|
||||
function styleFeature(feature) {
|
||||
let namaKecamatan = feature.properties.WADMKC;
|
||||
let curas = curasData[namaKecamatan];
|
||||
let data = curasData[namaKecamatan];
|
||||
|
||||
return {
|
||||
fillColor: curas ? getColor(curas.klaster) : '#cccccc',
|
||||
fillColor: data ? getColor(data.warna) : '#cccccc',
|
||||
weight: 1,
|
||||
opacity: 1,
|
||||
color: 'white',
|
||||
|
@ -371,11 +157,15 @@ function styleFeature(feature) {
|
|||
|
||||
function popUp(feature, layer) {
|
||||
let namaKecamatan = feature.properties.WADMKC;
|
||||
let curas = curasData[namaKecamatan];
|
||||
let data = curasData[namaKecamatan];
|
||||
|
||||
let content = `<strong>${namaKecamatan}</strong><br/>`;
|
||||
if (curas) {
|
||||
content += `Jumlah Curas: ${curas.jumlah_curas}<br/>Klaster: ${curas.klaster}`;
|
||||
let content = `<strong>Kecamatan ${namaKecamatan}</strong><br/><br/>`;
|
||||
if (data) {
|
||||
if ('jumlah_curas' in data) {
|
||||
content += `Jumlah Curas: ${data.jumlah_curas}<br/>Kategori: ${data.klaster}`;
|
||||
} else if ('jumlah_curanmor' in data) {
|
||||
content += `Jumlah Curanmor: ${data.jumlah_curanmor}<br/>Kategori: ${data.klaster}`;
|
||||
}
|
||||
} else {
|
||||
content += `Data tidak tersedia`;
|
||||
}
|
||||
|
@ -383,18 +173,39 @@ function popUp(feature, layer) {
|
|||
layer.bindPopup(content);
|
||||
}
|
||||
|
||||
function loadMap() {
|
||||
var map = L.map('map').setView([-7.843271790154591, 113.2990930356143], 10);
|
||||
|
||||
function loadInitialMap() {
|
||||
map = L.map('map').setView([-7.843271790154591, 113.2990930356143], 10);
|
||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 19,
|
||||
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
}).addTo(map);
|
||||
|
||||
new L.GeoJSON.AJAX(["{{ asset('/assets/map/gisProbolinggo.geojson') }}"], {
|
||||
style: styleFeature,
|
||||
onEachFeature: popUp
|
||||
}).addTo(map);
|
||||
fetchAndLoadMap(apiUrl, 'Pemetaan Curas Kab Probolinggo');
|
||||
}
|
||||
|
||||
// Event dropdown
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadInitialMap();
|
||||
|
||||
document.getElementById('btn-curas').addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
fetchAndLoadMap("{{ url('/api/map/curas') }}", "Pemetaan Curas Kab Probolinggo");
|
||||
});
|
||||
|
||||
document.getElementById('btn-curanmor').addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
fetchAndLoadMap("{{ url('/api/map/curanmor') }}", "Pemetaan Curanmor Kab Probolinggo");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.querySelectorAll('.dropdown-item').forEach(function(item) {
|
||||
item.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
document.getElementById('currentMapLabel').textContent = this.textContent;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</x-layoutAdmin>
|
|
@ -6,7 +6,7 @@
|
|||
<div class="card">
|
||||
<div class="card-header d-flex justify-content-between">
|
||||
<div class="header-title">
|
||||
<h4 class="card-title">Add Sale</h4>
|
||||
<h4 class="card-title">Ubah Data Kecamatan</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<div class="card">
|
||||
<div class="card-header d-flex justify-content-between">
|
||||
<div class="header-title">
|
||||
<h4 class="card-title">Ubah Data Klaster {{ $klaster->nama_klaster }}</h4>
|
||||
<h4 class="card-title">Ubah Data Klaster</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
@ -35,7 +35,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary mr-2">Ubah Data Klaster {{ $klaster->nama_klaster }}</button>
|
||||
<button type="submit" class="btn btn-primary mr-2">Ubah Data Klaster </button>
|
||||
<button type="reset" class="btn btn-danger">Reset</button>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
@ -6,8 +6,8 @@
|
|||
<div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
|
||||
<div>
|
||||
<h4 class="mb-3">Daftar Kasus Pencurian Kendaraan Bermotor (CURANMOR)</h4>
|
||||
<p class="mb-0">Sales enables you to effectively control sales KPIs and monitor them in one central<br>
|
||||
place while helping teams to reach sales goals. </p>
|
||||
<p class="mb-0">Berikut ini merupakan data kasus Pencurian Kendaraan Bermotor (CURANMOR) pada <br>
|
||||
masing masing kecamatan di Kabupaten Probolinggo</p>
|
||||
</div>
|
||||
<a href="/dashboard/curanmor/create" class="btn btn-primary add-list"><i class="las la-plus mr-3"></i>Tambah Kasus Curanmor</a>
|
||||
</div>
|
||||
|
|
|
@ -6,8 +6,8 @@
|
|||
<div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
|
||||
<div>
|
||||
<h4 class="mb-3">Daftar Kasus Pencurian Dengan Kekerasan (CURAS)</h4>
|
||||
<p class="mb-0">Sales enables you to effectively control sales KPIs and monitor them in one central<br>
|
||||
place while helping teams to reach sales goals. </p>
|
||||
<p class="mb-0">Berikut ini merupakan data kasus Pencurian Dengan Kekerasan (CURAS) pada <br>
|
||||
masing masing kecamatan di Kabupaten Probolinggo</p>
|
||||
</div>
|
||||
<a href="/dashboard/curas/create" class="btn btn-primary add-list"><i class="las la-plus mr-3"></i>Tambah Kasus Curas</a>
|
||||
</div>
|
||||
|
|
|
@ -34,7 +34,7 @@
|
|||
<label for="checkbox1" class="mb-0"></label>
|
||||
</div>
|
||||
</th>
|
||||
<th>id</th>
|
||||
<th>No</th>
|
||||
<th>Nama Kecamatan</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
|
|
|
@ -6,10 +6,10 @@
|
|||
<div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
|
||||
<div>
|
||||
<h4 class="mb-3">Daftar Klaster</h4>
|
||||
<p class="mb-0">Sales enables you to effectively control sales KPIs and monitor them in one central<br>
|
||||
place while helping teams to reach sales goals. </p>
|
||||
<p class="mb-0">Berikut merupakan data Klaster atau Kategori yang dijadikan sebagai acuan pemetaan.<br>
|
||||
Ingat dalam pengisian data klaster, kategori aman atau rendah dimulai dari id 1</p>
|
||||
</div>
|
||||
<a href="/dashboard/klaster/create" class="btn btn-primary add-list"><i class="las la-plus mr-3"></i>Add Sale</a>
|
||||
<a href="/dashboard/klaster/create" class="btn btn-primary add-list"><i class="las la-plus mr-3"></i>Tambah Klaster</a>
|
||||
</div>
|
||||
</div>
|
||||
@if (session()->has('succes'))
|
||||
|
|
|
@ -0,0 +1,71 @@
|
|||
<x-layoutAdmin>
|
||||
<div class="content-page">
|
||||
|
||||
<div id="map" style="width: 100%; height: 500px;" ></div>
|
||||
|
||||
|
||||
<div id="map" style="width: 100%; height: 500px;"></div>
|
||||
|
||||
<script>
|
||||
let curanmorData = {};
|
||||
|
||||
fetch("{{ url('/api/map/curanmor') }}")
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
data.forEach(item => {
|
||||
curanmorData[item.kecamatan] = item;
|
||||
});
|
||||
|
||||
loadMap();
|
||||
});
|
||||
|
||||
function getColor(warna) {
|
||||
return warna || '#cccccc';
|
||||
}
|
||||
|
||||
function styleFeature(feature) {
|
||||
let namaKecamatan = feature.properties.WADMKC;
|
||||
let curanmor = curanmorData[namaKecamatan];
|
||||
|
||||
return {
|
||||
fillColor: curanmor ? getColor(curanmor.warna) : '#cccccc',
|
||||
weight: 1,
|
||||
opacity: 1,
|
||||
color: 'white',
|
||||
fillOpacity: 0.7
|
||||
};
|
||||
}
|
||||
|
||||
function popUp(feature, layer) {
|
||||
let namaKecamatan = feature.properties.WADMKC;
|
||||
let curanmor = curanmorData[namaKecamatan];
|
||||
|
||||
let content = `<strong>Kecamatan ${namaKecamatan}</strong><br/><br/>`;
|
||||
if (curanmor) {
|
||||
content += `Jumlah Curanmor : ${curanmor.jumlah_curanmor}<br/>Kategori : ${curanmor.klaster}`;
|
||||
} else {
|
||||
content += `Data tidak tersedia`;
|
||||
}
|
||||
|
||||
layer.bindPopup(content);
|
||||
}
|
||||
|
||||
function loadMap() {
|
||||
var map = L.map('map').setView([-7.843271790154591, 113.2990930356143], 10);
|
||||
|
||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 19,
|
||||
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
}).addTo(map);
|
||||
|
||||
new L.GeoJSON.AJAX(["{{ asset('/assets/map/gisProbolinggo.geojson') }}"], {
|
||||
style: styleFeature,
|
||||
onEachFeature: popUp
|
||||
}).addTo(map);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</x-layoutAdmin>
|
|
@ -7,7 +7,7 @@
|
|||
<script>
|
||||
let curasData = {};
|
||||
|
||||
fetch("{{ url('/api/map') }}")
|
||||
fetch("{{ url('/api/map/curas') }}")
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
data.forEach(item => {
|
||||
|
@ -26,7 +26,7 @@ function styleFeature(feature) {
|
|||
let curas = curasData[namaKecamatan];
|
||||
|
||||
return {
|
||||
fillColor: curas ? getColor(curas.klaster) : '#cccccc',
|
||||
fillColor: curas ? getColor(curas.warna) : '#cccccc',
|
||||
weight: 1,
|
||||
opacity: 1,
|
||||
color: 'white',
|
||||
|
@ -37,16 +37,17 @@ function styleFeature(feature) {
|
|||
function popUp(feature, layer) {
|
||||
let namaKecamatan = feature.properties.WADMKC;
|
||||
let curas = curasData[namaKecamatan];
|
||||
|
||||
let content = `<strong>${namaKecamatan}</strong><br/>`;
|
||||
|
||||
let content = `<strong>Kecamatan ${namaKecamatan}</strong><br/><br/>`;
|
||||
if (curas) {
|
||||
content += `Jumlah Curas: ${curas.jumlah_curas}<br/>Klaster: ${curas.klaster}`;
|
||||
content += `Jumlah Curas : ${curas.jumlah_curas}<br/>Kategori : ${curas.klaster}`;
|
||||
} else {
|
||||
content += `Data tidak tersedia`;
|
||||
}
|
||||
|
||||
|
||||
layer.bindPopup(content);
|
||||
}
|
||||
|
||||
|
||||
function loadMap() {
|
||||
var map = L.map('map').setView([-7.843271790154591, 113.2990930356143], 10);
|
||||
|
|
|
@ -50,10 +50,10 @@ class="navbar-toggler"
|
|||
<a class="nav-link" href="/">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="privacy-policy.html">Privacy</a>
|
||||
<a class="nav-link" href="#">Privacy</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:void(0)">Terms</a>
|
||||
<a class="nav-link" href="#">Terms</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>POS Dash | Responsive Bootstrap 4 Admin Dashboard Template</title>
|
||||
<title>PROTECT | Probolinggo Threat & Crime Tracker</title>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
|
||||
|
@ -15,6 +15,14 @@
|
|||
<link rel="stylesheet" href="{{ asset('/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css') }}/">
|
||||
<link rel="stylesheet" href="{{ asset('/assets/vendor/line-awesome/dist/line-awesome/css/line-awesome.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('/assets/vendor/remixicon/fonts/remixicon.css') }}">
|
||||
<style>
|
||||
#map {
|
||||
position: relative; /* bukan absolute atau fixed */
|
||||
z-index: 0; /* pastikan ini lebih rendah dari header atau layout */
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
@ -31,7 +39,7 @@
|
|||
<div class="iq-sidebar sidebar-default ">
|
||||
<div class="iq-sidebar-logo d-flex align-items-center justify-content-between">
|
||||
<a href="/dashboard" class="header-logo">
|
||||
<img src="{{ asset('/assets/images/logo.png') }}" class="img-fluid rounded-normal light-logo" alt="logo"><h5 class="logo-title light-logo ml-3">POSDash</h5>
|
||||
<img src="{{ asset('/assets/images/logo.png') }}" class="img-fluid rounded-normal light-logo" alt="logo"><h5 class="logo-title light-logo ml-3">PROTECT</h5>
|
||||
</a>
|
||||
<div class="iq-menu-bt-sidebar ml-0">
|
||||
<i class="las la-bars wrapper-menu"></i>
|
||||
|
@ -162,7 +170,7 @@
|
|||
<i class="ri-menu-line wrapper-menu"></i>
|
||||
<a href="../backend/index.html" class="header-logo">
|
||||
<img src="{{ asset('assets/images/logo.png') }}" class="img-fluid rounded-normal" alt="logo">
|
||||
<h5 class="logo-title ml-3">POSDash</h5>
|
||||
<h5 class="logo-title ml-3">PROTECT</h5>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
|
@ -272,15 +280,15 @@
|
|||
<li class="nav-item nav-icon dropdown caption-content">
|
||||
<a href="#" class="search-toggle dropdown-toggle" id="dropdownMenuButton4"
|
||||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img src="{{ asset('assets/images/user/1.png') }}" class="img-fluid rounded" alt="user">
|
||||
<img src="{{ asset('assets/images/user/admin-daffa.jpeg') }}" class="img-fluid rounded" alt="user">
|
||||
</a>
|
||||
<div class="iq-sub-dropdown dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<div class="card shadow-none m-0">
|
||||
<div class="card-body p-0 text-center">
|
||||
<div class="media-body profile-detail text-center">
|
||||
<img src="{{ asset('assets/images/page-img/profile-bg.jpg') }}" alt="profile-bg"
|
||||
<img src="{{ asset('assets/images/logo_polije.png') }}" alt="profile-bg"
|
||||
class="rounded-top img-fluid mb-4">
|
||||
<img src="{{ asset('assets/images/user/1.png') }}" alt="profile-img"
|
||||
<img src="{{ asset('assets/images/user/admin-daffa.jpeg') }}" alt="profile-img"
|
||||
class="rounded profile-img img-fluid avatar-70">
|
||||
</div>
|
||||
<div class="p-3">
|
||||
|
|
|
@ -1529,10 +1529,9 @@ class="img-fluid wow fadeInLeft"
|
|||
/>
|
||||
</div>
|
||||
<div class="col-lg-6 wow fadeInRight">
|
||||
<h2 class="iq-fw-8 mb-2 iq-mt-40">Why Choose Us</h2>
|
||||
<h2 class="iq-fw-8 mb-2 iq-mt-40">Apa Sih Curas dan Curanmor Itu ?</h2>
|
||||
<p class="iq-font-18 mb-3">
|
||||
Progravida nibh vel velit auctor alinean sollicitudin, lorem
|
||||
quis bibendum auctor, nisi elit consequat ipsum.
|
||||
Ternyata banyak yang belum paham apa itu Curas dan Curanmor. Yuk Kita Bahas
|
||||
</p>
|
||||
<ul class="iq-project-info">
|
||||
<li>
|
||||
|
@ -1542,11 +1541,10 @@ class="img-fluid wow fadeInLeft"
|
|||
</div>
|
||||
<div class="media-body ml-3">
|
||||
<h5 class="mt-0 mb-2 iq-fw-8">
|
||||
<a href="service-detail.html">Data Analysis</a>
|
||||
<a href="service-detail.html">Curas ( Pencurian Dengan Kekerasan )</a>
|
||||
</h5>
|
||||
<p class="mb-0">
|
||||
Progravida nibh vel velit auctor alinean sollicitudin,
|
||||
lorem quis bibendum auctor
|
||||
Pencurian dengan Kekerasan atau yang sering disebut Curas, merupakan salah satu tindak pidana pencurian yang dalam prakteknya melakukan kekerasan secara fisik maupun ancaman kepada korbannya. Salah satu contoh Curas yaitu Begal
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1558,27 +1556,10 @@ class="img-fluid wow fadeInLeft"
|
|||
</div>
|
||||
<div class="media-body ml-3">
|
||||
<h5 class="mt-0 mb-2 iq-fw-8">
|
||||
<a href="service-detail.html">PPC Marketing</a>
|
||||
<a href="service-detail.html">Curanmor ( Pencurian Kendaraan Bermotor )</a>
|
||||
</h5>
|
||||
<p class="mb-0">
|
||||
Progravida nibh vel velit auctor alinean sollicitudin,
|
||||
lorem quis bibendum auctor
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="media service-info mt-0 mb-0">
|
||||
<div class="iq-feature-shap">
|
||||
<i class="ion-ios-world-outline"></i>
|
||||
</div>
|
||||
<div class="media-body ml-3">
|
||||
<h5 class="mt-0 mb23 iq-fw-8">
|
||||
<a href="service-detail.html">Business Analytics</a>
|
||||
</h5>
|
||||
<p class="mb-0">
|
||||
Progravida nibh vel velit auctor alinean sollicitudin,
|
||||
lorem quis bibendum auctor
|
||||
Pencurian Kendaraan Bermotor atau yang sering disebut Curanmor, merupakan salah satu tindak pidana pencurian yang sasaran utamanya yaitu kendaraan bermotor, seperti Motor dan Mobil
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -4,4 +4,5 @@
|
|||
use Illuminate\Support\Facades\Route;
|
||||
use App\Http\Controllers\MapController;
|
||||
|
||||
Route::get('/map', [MapController::class, 'index']);
|
||||
Route::get('/map/curas', [MapController::class, 'mapCuras']);
|
||||
Route::get('/map/curanmor', [MapController::class, 'mapCuranmor']);
|
||||
|
|
|
@ -21,7 +21,10 @@
|
|||
|
||||
Route::get('/dashboard/mapcuras', function () {
|
||||
return view('admin.dashboardMapCuras');
|
||||
});
|
||||
})->middleware('auth');
|
||||
Route::get('/dashboard/mapcuranmor', function () {
|
||||
return view('admin.dashboardMapCuranmor');
|
||||
})->middleware('auth');
|
||||
|
||||
Route::get('/dashboard', [dashboardController::class, 'index'])->middleware('auth');
|
||||
Route::get('/login', [loginController::class, 'index'])->name('login');
|
||||
|
|
Loading…
Reference in New Issue