Merapikan Tampilan Admin
This commit is contained in:
parent
c404164666
commit
f72a673b8c
|
@ -3,6 +3,7 @@
|
||||||
namespace App\Http\Controllers;
|
namespace App\Http\Controllers;
|
||||||
|
|
||||||
use App\Models\Curas;
|
use App\Models\Curas;
|
||||||
|
use App\Models\Curanmor;
|
||||||
use Illuminate\Http\Request;
|
use Illuminate\Http\Request;
|
||||||
|
|
||||||
class MapController extends Controller
|
class MapController extends Controller
|
||||||
|
@ -10,48 +11,33 @@ class MapController extends Controller
|
||||||
/**
|
/**
|
||||||
* Display a listing of the resource.
|
* Display a listing of the resource.
|
||||||
*/
|
*/
|
||||||
public function index()
|
public function mapCuras()
|
||||||
{
|
{
|
||||||
$data = Curas::with(['punyaKecamatanCuras', 'punyaKlasterCuras'])->get()->map(function ($item) {
|
$data = Curas::with(['punyaKecamatanCuras', 'punyaKlasterCuras'])->get()->map(function ($item) {
|
||||||
return [
|
return [
|
||||||
'kecamatan' => $item->punyaKecamatanCuras->nama_kecamatan, // pastikan nama kolom benar
|
'kecamatan' => $item->punyaKecamatanCuras->nama_kecamatan,
|
||||||
'jumlah_curas' => $item->jumlah_curas,
|
'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);
|
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>
|
||||||
<div class="card-header-toolbar d-flex align-items-center">
|
<div class="card-header-toolbar d-flex align-items-center">
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<span class="dropdown-toggle dropdown-bg btn" id="dropdownMenuButton001"
|
<span id="dropdownMenuButton001" class="dropdown-toggle dropdown-bg btn" data-toggle="dropdown">
|
||||||
data-toggle="dropdown">
|
<span id="currentMapLabel">Curas</span> <i class="ri-arrow-down-s-line ml-1"></i>
|
||||||
This Month<i class="ri-arrow-down-s-line ml-1"></i>
|
|
||||||
</span>
|
</span>
|
||||||
<div class="dropdown-menu dropdown-menu-right shadow-none"
|
<div class="dropdown-menu dropdown-menu-right shadow-none"
|
||||||
aria-labelledby="dropdownMenuButton001">
|
aria-labelledby="dropdownMenuButton001">
|
||||||
<a class="dropdown-item" href="#">Curas</a>
|
<a class="dropdown-item" href="#" id="btn-curas">Curas</a>
|
||||||
<a class="dropdown-item" href="#">Curanmor</a>
|
<a class="dropdown-item" href="#" id="btn-curanmor">Curanmor</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -102,237 +103,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- Page end -->
|
<!-- Page end -->
|
||||||
|
@ -340,28 +110,44 @@
|
||||||
</div>
|
</div>
|
||||||
{{-- Script MAP --}}
|
{{-- Script MAP --}}
|
||||||
<script>
|
<script>
|
||||||
|
let map;
|
||||||
|
let geoLayer;
|
||||||
|
let mapTitle = document.querySelector('.card-title');
|
||||||
|
let apiUrl = "{{ url('/api/map/curas') }}"; // default awal curas
|
||||||
let curasData = {};
|
let curasData = {};
|
||||||
|
|
||||||
fetch("{{ url('/api/map') }}")
|
function fetchAndLoadMap(url, titleText) {
|
||||||
|
fetch(url)
|
||||||
.then(res => res.json())
|
.then(res => res.json())
|
||||||
.then(data => {
|
.then(data => {
|
||||||
|
curasData = {};
|
||||||
data.forEach(item => {
|
data.forEach(item => {
|
||||||
curasData[item.kecamatan] = item;
|
curasData[item.kecamatan] = item;
|
||||||
});
|
});
|
||||||
|
mapTitle.textContent = titleText;
|
||||||
|
|
||||||
loadMap(); // setelah data siap, jalankan ini
|
if (geoLayer) {
|
||||||
|
geoLayer.remove(); // hapus layer lama
|
||||||
|
}
|
||||||
|
|
||||||
|
geoLayer = new L.GeoJSON.AJAX(["{{ asset('/assets/map/gisProbolinggo.geojson') }}"], {
|
||||||
|
style: styleFeature,
|
||||||
|
onEachFeature: popUp
|
||||||
});
|
});
|
||||||
|
geoLayer.addTo(map);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function getColor(klasterWarna) {
|
function getColor(warna) {
|
||||||
return klasterWarna || '#cccccc'; // fallback
|
return warna || '#cccccc';
|
||||||
}
|
}
|
||||||
|
|
||||||
function styleFeature(feature) {
|
function styleFeature(feature) {
|
||||||
let namaKecamatan = feature.properties.WADMKC;
|
let namaKecamatan = feature.properties.WADMKC;
|
||||||
let curas = curasData[namaKecamatan];
|
let data = curasData[namaKecamatan];
|
||||||
|
|
||||||
return {
|
return {
|
||||||
fillColor: curas ? getColor(curas.klaster) : '#cccccc',
|
fillColor: data ? getColor(data.warna) : '#cccccc',
|
||||||
weight: 1,
|
weight: 1,
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
color: 'white',
|
color: 'white',
|
||||||
|
@ -371,11 +157,15 @@ function styleFeature(feature) {
|
||||||
|
|
||||||
function popUp(feature, layer) {
|
function popUp(feature, layer) {
|
||||||
let namaKecamatan = feature.properties.WADMKC;
|
let namaKecamatan = feature.properties.WADMKC;
|
||||||
let curas = curasData[namaKecamatan];
|
let data = curasData[namaKecamatan];
|
||||||
|
|
||||||
let content = `<strong>${namaKecamatan}</strong><br/>`;
|
let content = `<strong>Kecamatan ${namaKecamatan}</strong><br/><br/>`;
|
||||||
if (curas) {
|
if (data) {
|
||||||
content += `Jumlah Curas: ${curas.jumlah_curas}<br/>Klaster: ${curas.klaster}`;
|
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 {
|
} else {
|
||||||
content += `Data tidak tersedia`;
|
content += `Data tidak tersedia`;
|
||||||
}
|
}
|
||||||
|
@ -383,18 +173,39 @@ function popUp(feature, layer) {
|
||||||
layer.bindPopup(content);
|
layer.bindPopup(content);
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadMap() {
|
function loadInitialMap() {
|
||||||
var map = L.map('map').setView([-7.843271790154591, 113.2990930356143], 10);
|
map = L.map('map').setView([-7.843271790154591, 113.2990930356143], 10);
|
||||||
|
|
||||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||||
maxZoom: 19,
|
maxZoom: 19,
|
||||||
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||||
}).addTo(map);
|
}).addTo(map);
|
||||||
|
fetchAndLoadMap(apiUrl, 'Pemetaan Curas Kab Probolinggo');
|
||||||
new L.GeoJSON.AJAX(["{{ asset('/assets/map/gisProbolinggo.geojson') }}"], {
|
|
||||||
style: styleFeature,
|
|
||||||
onEachFeature: popUp
|
|
||||||
}).addTo(map);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 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>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.querySelectorAll('.dropdown-item').forEach(function(item) {
|
||||||
|
item.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
document.getElementById('currentMapLabel').textContent = this.textContent;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
</x-layoutAdmin>
|
</x-layoutAdmin>
|
|
@ -6,7 +6,7 @@
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header d-flex justify-content-between">
|
<div class="card-header d-flex justify-content-between">
|
||||||
<div class="header-title">
|
<div class="header-title">
|
||||||
<h4 class="card-title">Add Sale</h4>
|
<h4 class="card-title">Ubah Data Kecamatan</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header d-flex justify-content-between">
|
<div class="card-header d-flex justify-content-between">
|
||||||
<div class="header-title">
|
<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>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
|
@ -35,7 +35,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
<button type="reset" class="btn btn-danger">Reset</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -6,8 +6,8 @@
|
||||||
<div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
|
<div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
|
||||||
<div>
|
<div>
|
||||||
<h4 class="mb-3">Daftar Kasus Pencurian Kendaraan Bermotor (CURANMOR)</h4>
|
<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>
|
<p class="mb-0">Berikut ini merupakan data kasus Pencurian Kendaraan Bermotor (CURANMOR) pada <br>
|
||||||
place while helping teams to reach sales goals. </p>
|
masing masing kecamatan di Kabupaten Probolinggo</p>
|
||||||
</div>
|
</div>
|
||||||
<a href="/dashboard/curanmor/create" class="btn btn-primary add-list"><i class="las la-plus mr-3"></i>Tambah Kasus Curanmor</a>
|
<a href="/dashboard/curanmor/create" class="btn btn-primary add-list"><i class="las la-plus mr-3"></i>Tambah Kasus Curanmor</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -6,8 +6,8 @@
|
||||||
<div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
|
<div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
|
||||||
<div>
|
<div>
|
||||||
<h4 class="mb-3">Daftar Kasus Pencurian Dengan Kekerasan (CURAS)</h4>
|
<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>
|
<p class="mb-0">Berikut ini merupakan data kasus Pencurian Dengan Kekerasan (CURAS) pada <br>
|
||||||
place while helping teams to reach sales goals. </p>
|
masing masing kecamatan di Kabupaten Probolinggo</p>
|
||||||
</div>
|
</div>
|
||||||
<a href="/dashboard/curas/create" class="btn btn-primary add-list"><i class="las la-plus mr-3"></i>Tambah Kasus Curas</a>
|
<a href="/dashboard/curas/create" class="btn btn-primary add-list"><i class="las la-plus mr-3"></i>Tambah Kasus Curas</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -34,7 +34,7 @@
|
||||||
<label for="checkbox1" class="mb-0"></label>
|
<label for="checkbox1" class="mb-0"></label>
|
||||||
</div>
|
</div>
|
||||||
</th>
|
</th>
|
||||||
<th>id</th>
|
<th>No</th>
|
||||||
<th>Nama Kecamatan</th>
|
<th>Nama Kecamatan</th>
|
||||||
<th>Action</th>
|
<th>Action</th>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
|
@ -6,10 +6,10 @@
|
||||||
<div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
|
<div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
|
||||||
<div>
|
<div>
|
||||||
<h4 class="mb-3">Daftar Klaster</h4>
|
<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>
|
<p class="mb-0">Berikut merupakan data Klaster atau Kategori yang dijadikan sebagai acuan pemetaan.<br>
|
||||||
place while helping teams to reach sales goals. </p>
|
Ingat dalam pengisian data klaster, kategori aman atau rendah dimulai dari id 1</p>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
@if (session()->has('succes'))
|
@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>
|
<script>
|
||||||
let curasData = {};
|
let curasData = {};
|
||||||
|
|
||||||
fetch("{{ url('/api/map') }}")
|
fetch("{{ url('/api/map/curas') }}")
|
||||||
.then(res => res.json())
|
.then(res => res.json())
|
||||||
.then(data => {
|
.then(data => {
|
||||||
data.forEach(item => {
|
data.forEach(item => {
|
||||||
|
@ -26,7 +26,7 @@ function styleFeature(feature) {
|
||||||
let curas = curasData[namaKecamatan];
|
let curas = curasData[namaKecamatan];
|
||||||
|
|
||||||
return {
|
return {
|
||||||
fillColor: curas ? getColor(curas.klaster) : '#cccccc',
|
fillColor: curas ? getColor(curas.warna) : '#cccccc',
|
||||||
weight: 1,
|
weight: 1,
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
color: 'white',
|
color: 'white',
|
||||||
|
@ -38,9 +38,9 @@ function popUp(feature, layer) {
|
||||||
let namaKecamatan = feature.properties.WADMKC;
|
let namaKecamatan = feature.properties.WADMKC;
|
||||||
let curas = curasData[namaKecamatan];
|
let curas = curasData[namaKecamatan];
|
||||||
|
|
||||||
let content = `<strong>${namaKecamatan}</strong><br/>`;
|
let content = `<strong>Kecamatan ${namaKecamatan}</strong><br/><br/>`;
|
||||||
if (curas) {
|
if (curas) {
|
||||||
content += `Jumlah Curas: ${curas.jumlah_curas}<br/>Klaster: ${curas.klaster}`;
|
content += `Jumlah Curas : ${curas.jumlah_curas}<br/>Kategori : ${curas.klaster}`;
|
||||||
} else {
|
} else {
|
||||||
content += `Data tidak tersedia`;
|
content += `Data tidak tersedia`;
|
||||||
}
|
}
|
||||||
|
@ -48,6 +48,7 @@ function popUp(feature, layer) {
|
||||||
layer.bindPopup(content);
|
layer.bindPopup(content);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function loadMap() {
|
function loadMap() {
|
||||||
var map = L.map('map').setView([-7.843271790154591, 113.2990930356143], 10);
|
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>
|
<a class="nav-link" href="/">Home</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="privacy-policy.html">Privacy</a>
|
<a class="nav-link" href="#">Privacy</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="javascript:void(0)">Terms</a>
|
<a class="nav-link" href="#">Terms</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<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 -->
|
<!-- Favicon -->
|
||||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
|
<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/@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/line-awesome/dist/line-awesome/css/line-awesome.min.css') }}">
|
||||||
<link rel="stylesheet" href="{{ asset('/assets/vendor/remixicon/fonts/remixicon.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>
|
</head>
|
||||||
|
@ -31,7 +39,7 @@
|
||||||
<div class="iq-sidebar sidebar-default ">
|
<div class="iq-sidebar sidebar-default ">
|
||||||
<div class="iq-sidebar-logo d-flex align-items-center justify-content-between">
|
<div class="iq-sidebar-logo d-flex align-items-center justify-content-between">
|
||||||
<a href="/dashboard" class="header-logo">
|
<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>
|
</a>
|
||||||
<div class="iq-menu-bt-sidebar ml-0">
|
<div class="iq-menu-bt-sidebar ml-0">
|
||||||
<i class="las la-bars wrapper-menu"></i>
|
<i class="las la-bars wrapper-menu"></i>
|
||||||
|
@ -162,7 +170,7 @@
|
||||||
<i class="ri-menu-line wrapper-menu"></i>
|
<i class="ri-menu-line wrapper-menu"></i>
|
||||||
<a href="../backend/index.html" class="header-logo">
|
<a href="../backend/index.html" class="header-logo">
|
||||||
<img src="{{ asset('assets/images/logo.png') }}" class="img-fluid rounded-normal" alt="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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
@ -272,15 +280,15 @@
|
||||||
<li class="nav-item nav-icon dropdown caption-content">
|
<li class="nav-item nav-icon dropdown caption-content">
|
||||||
<a href="#" class="search-toggle dropdown-toggle" id="dropdownMenuButton4"
|
<a href="#" class="search-toggle dropdown-toggle" id="dropdownMenuButton4"
|
||||||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
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>
|
</a>
|
||||||
<div class="iq-sub-dropdown dropdown-menu" aria-labelledby="dropdownMenuButton">
|
<div class="iq-sub-dropdown dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||||
<div class="card shadow-none m-0">
|
<div class="card shadow-none m-0">
|
||||||
<div class="card-body p-0 text-center">
|
<div class="card-body p-0 text-center">
|
||||||
<div class="media-body profile-detail 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">
|
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">
|
class="rounded profile-img img-fluid avatar-70">
|
||||||
</div>
|
</div>
|
||||||
<div class="p-3">
|
<div class="p-3">
|
||||||
|
|
|
@ -1529,10 +1529,9 @@ class="img-fluid wow fadeInLeft"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-6 wow fadeInRight">
|
<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">
|
<p class="iq-font-18 mb-3">
|
||||||
Progravida nibh vel velit auctor alinean sollicitudin, lorem
|
Ternyata banyak yang belum paham apa itu Curas dan Curanmor. Yuk Kita Bahas
|
||||||
quis bibendum auctor, nisi elit consequat ipsum.
|
|
||||||
</p>
|
</p>
|
||||||
<ul class="iq-project-info">
|
<ul class="iq-project-info">
|
||||||
<li>
|
<li>
|
||||||
|
@ -1542,11 +1541,10 @@ class="img-fluid wow fadeInLeft"
|
||||||
</div>
|
</div>
|
||||||
<div class="media-body ml-3">
|
<div class="media-body ml-3">
|
||||||
<h5 class="mt-0 mb-2 iq-fw-8">
|
<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>
|
</h5>
|
||||||
<p class="mb-0">
|
<p class="mb-0">
|
||||||
Progravida nibh vel velit auctor alinean sollicitudin,
|
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
|
||||||
lorem quis bibendum auctor
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1558,27 +1556,10 @@ class="img-fluid wow fadeInLeft"
|
||||||
</div>
|
</div>
|
||||||
<div class="media-body ml-3">
|
<div class="media-body ml-3">
|
||||||
<h5 class="mt-0 mb-2 iq-fw-8">
|
<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>
|
</h5>
|
||||||
<p class="mb-0">
|
<p class="mb-0">
|
||||||
Progravida nibh vel velit auctor alinean sollicitudin,
|
Pencurian Kendaraan Bermotor atau yang sering disebut Curanmor, merupakan salah satu tindak pidana pencurian yang sasaran utamanya yaitu kendaraan bermotor, seperti Motor dan Mobil
|
||||||
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
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -4,4 +4,5 @@
|
||||||
use Illuminate\Support\Facades\Route;
|
use Illuminate\Support\Facades\Route;
|
||||||
use App\Http\Controllers\MapController;
|
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 () {
|
Route::get('/dashboard/mapcuras', function () {
|
||||||
return view('admin.dashboardMapCuras');
|
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('/dashboard', [dashboardController::class, 'index'])->middleware('auth');
|
||||||
Route::get('/login', [loginController::class, 'index'])->name('login');
|
Route::get('/login', [loginController::class, 'index'])->name('login');
|
||||||
|
|
Loading…
Reference in New Issue