first commit
This commit is contained in:
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Peta Wilayah</title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
||||
<style>#map { height: 100vh; }</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
<script>
|
||||
const map = L.map('map').setView([4.2, 96.9], 7);
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
|
||||
|
||||
// Ganti endpoint berdasarkan level: wil_provinsi, wil_kabupaten_kota, dll
|
||||
// fetch('http://localhost:5000/api/geojson/wil_provinsi')
|
||||
// .then(res => res.json())
|
||||
// .then(data => {
|
||||
// L.geoJSON(data, {
|
||||
// style: { color: 'blue' },
|
||||
// onEachFeature: function (feature, layer) {
|
||||
// const p = feature.properties;
|
||||
// layer.bindPopup(`<strong>${p.nama}</strong><br>Kode: ${p.kode}`);
|
||||
// }
|
||||
// }).addTo(map);
|
||||
// });
|
||||
</script>
|
||||
<script>
|
||||
let currentLayer = null;
|
||||
|
||||
function loadLayer(url, onClickCallback) {
|
||||
fetch(url)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (currentLayer) {
|
||||
map.removeLayer(currentLayer);
|
||||
}
|
||||
|
||||
currentLayer = L.geoJSON(data, {
|
||||
style: { color: "blue", weight: 2 },
|
||||
onEachFeature: function (feature, layer) {
|
||||
let clickTimer = null;
|
||||
layer.on('click', function (e) {
|
||||
let kode = feature.properties.id;
|
||||
// onClickCallback(kode);
|
||||
if (clickTimer) {
|
||||
// Double click detected
|
||||
clearTimeout(clickTimer);
|
||||
clickTimer = null;
|
||||
|
||||
// Aksi double click → Pindah layer
|
||||
let kode = feature.properties.id;
|
||||
onClickCallback(kode);
|
||||
} else {
|
||||
// Single click → Tampilkan popup
|
||||
clickTimer = setTimeout(() => {
|
||||
clickTimer = null;
|
||||
layer.bindPopup(feature.properties.nama).openPopup(e.latlng);
|
||||
}, 250); // waktu tunggu untuk deteksi double click
|
||||
layer.bindPopup(feature.properties.nama);
|
||||
}
|
||||
});
|
||||
// layer.bindPopup(feature.properties.nama);
|
||||
}
|
||||
}).addTo(map);
|
||||
|
||||
map.fitBounds(currentLayer.getBounds());
|
||||
});
|
||||
}
|
||||
|
||||
// Load provinsi Aceh awal
|
||||
loadLayer('/geojson/provinsi', function (kode_provinsi) {
|
||||
loadLayer(`/geojson/kabupaten/${kode_provinsi}`, function (kode_kabupaten) {
|
||||
loadLayer(`/geojson/kecamatan/${kode_kabupaten}`, function (kode_kecamatan) {
|
||||
loadLayer(`/geojson/desa/${kode_kecamatan}`, function () {
|
||||
// Desa tidak turun level lagi
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,735 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Peta Wilayah</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}" />
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/select2.min.css') }}" />
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='responsive.css') }}" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
||||
<style>
|
||||
.select2-selection__arrow {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="main-container">
|
||||
|
||||
<div class="main">
|
||||
<div class="searchbar2">
|
||||
<input type="text" name="" id="" placeholder="Search" />
|
||||
<div class="searchbtn">
|
||||
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20221210180758/Untitled-design-(28).png"
|
||||
class="icn srchicn" alt="search-button" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="box-container">
|
||||
<div class="box box1">
|
||||
<div class="text">
|
||||
<h2 class="topic-heading">60.5k</h2>
|
||||
<h2 class="topic">Article Views</h2>
|
||||
</div>
|
||||
|
||||
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20221210184645/Untitled-design-(31).png"
|
||||
alt="Views" />
|
||||
</div>
|
||||
|
||||
<div class="box box2">
|
||||
<div class="text">
|
||||
<h2 class="topic-heading">150</h2>
|
||||
<h2 class="topic">Likes</h2>
|
||||
</div>
|
||||
|
||||
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20221210185030/14.png" alt="likes" />
|
||||
</div>
|
||||
|
||||
<div class="box box3">
|
||||
<div class="text">
|
||||
<h2 class="topic-heading">320</h2>
|
||||
<h2 class="topic">Comments</h2>
|
||||
</div>
|
||||
|
||||
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20221210184645/Untitled-design-(32).png"
|
||||
alt="comments" />
|
||||
</div>
|
||||
|
||||
<div class="box box4">
|
||||
<div class="text">
|
||||
<h2 class="topic-heading">70</h2>
|
||||
<h2 class="topic">Published</h2>
|
||||
</div>
|
||||
|
||||
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20221210185029/13.png"
|
||||
alt="published" />
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="report-container">
|
||||
<div class="report-header">
|
||||
<!-- <h1 class="recent-Articles">Recent Articles</h1>
|
||||
<button class="view">View All</button> -->
|
||||
<div class="box-container">
|
||||
<div class="box box1">
|
||||
<div class="text">
|
||||
<h2 class="topic-heading" id="tot_dd">Total Dana Desa</h2>
|
||||
<h2 class="topic">Total Dana Desa</h2>
|
||||
<h2></h2>
|
||||
</div>
|
||||
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20221210184645/Untitled-design-(31).png"
|
||||
alt="Views" />
|
||||
</div>
|
||||
|
||||
<div class="box box2">
|
||||
<div class="text">
|
||||
<h2 class="topic-heading" id="tot_sr">150</h2>
|
||||
<h2 class="topic">Total Serapan</h2>
|
||||
</div>
|
||||
|
||||
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20221210185030/14.png" alt="likes" />
|
||||
</div>
|
||||
|
||||
<div class="box box3">
|
||||
<div class="text">
|
||||
<h2 class="topic-heading" id="pr_sr">320</h2>
|
||||
<h2 class="topic">Persentase Serapan</h2>
|
||||
</div>
|
||||
|
||||
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20221210184645/Untitled-design-(32).png"
|
||||
alt="comments" />
|
||||
</div>
|
||||
|
||||
<div class="box box4">
|
||||
<div class="text">
|
||||
<h2 class="topic-heading">70</h2>
|
||||
<h2 class="topic">Published</h2>
|
||||
</div>
|
||||
|
||||
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20221210185029/13.png"
|
||||
alt="published" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header_container">
|
||||
<div class="map-container" id="map"></div>
|
||||
<div class="side_container" style="height:100%">
|
||||
<div class="row form-group">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" style="width: 150px;">
|
||||
Provinsi
|
||||
</span>
|
||||
</div>
|
||||
<select class="form-control select2 border border-primary" name="provinsiDropdown" id="provinsiDropdown"
|
||||
data-placeholder="Provinsi ......">
|
||||
<option></option>
|
||||
<option value="1">Option 1</option>
|
||||
<option value="2">Option 2</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row form-group">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" style="width: 150px;">
|
||||
Kabupaten/Kota
|
||||
</span>
|
||||
</div>
|
||||
<select class="form-control select2" name="kabkotaDropdown" id="kabkotaDropdown"
|
||||
data-placeholder="Kabupaten/Kota ....." >
|
||||
<option></option>
|
||||
<option value="1">Option 1</option>
|
||||
<option value="2">Option 2</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row form-group">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" style="width: 150px;">
|
||||
Kecamatan
|
||||
</span>
|
||||
</div>
|
||||
<select class="form-control select2" name="kecamatanDropdown" id="kecamatanDropdown"
|
||||
data-placeholder="Kecamatan .....">
|
||||
<option></option>
|
||||
<option value="1">Option 1</option>
|
||||
<option value="2">Option 2</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<canvas id="canvas" style="width=100%"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <canvas id="myChart" style="width:80%;max-width:400px; margin-left: 20px;"></canvas> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="{{ url_for('static', filename='script.js')}}"></script>
|
||||
<script src="{{ url_for('static', filename='js/jquery-3.7.1.js')}}"></script>
|
||||
<script src="{{ url_for('static', filename='js/bootstrap.min.js')}}"></script>
|
||||
<script src="{{ url_for('static', filename='js/select2.min.js')}}"></script>
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
|
||||
<script>
|
||||
// const map = L.map('map').setView([4.2, 96.9], 7);
|
||||
const indonesiaBounds = L.latLngBounds(
|
||||
L.latLng(-11, 94), // Southwest corner (approx Sabang - Rote)
|
||||
L.latLng(6.5, 141) // Northeast corner (approx Papua)
|
||||
);
|
||||
const map = L.map('map', {
|
||||
center: [-2, 118], // Pusat Indonesia
|
||||
// zoom: 5,
|
||||
maxBounds: indonesiaBounds,
|
||||
maxBoundsViscosity: 1.0,
|
||||
zoomSnap: 0.5,
|
||||
zoomDelta: 0.5
|
||||
});
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© OpenStreetMap',
|
||||
maxZoom: 12
|
||||
}).addTo(map);
|
||||
map.fitBounds(indonesiaBounds);
|
||||
const optimalZoom = map.getZoom();
|
||||
map.setMinZoom(optimalZoom);
|
||||
</script>
|
||||
<script>
|
||||
let currentLayer = null;
|
||||
function loadLayer(url, onClickCallback, level = 'provinsi') {
|
||||
currentLevel = level;
|
||||
fetch(url)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
// 1. Fungsi validasi dan pembersih
|
||||
function isValidCoord(coord) {
|
||||
return Array.isArray(coord) &&
|
||||
coord.length === 2 &&
|
||||
typeof coord[0] === "number" &&
|
||||
typeof coord[1] === "number" &&
|
||||
!isNaN(coord[0]) &&
|
||||
!isNaN(coord[1]);
|
||||
}
|
||||
|
||||
function cleanCoordinates(multiPolygon) {
|
||||
return multiPolygon.map(polygon =>
|
||||
polygon.map(ring =>
|
||||
ring.filter(coord => isValidCoord(coord))
|
||||
).filter(ring => ring.length >= 4) // valid ring minimal 4 titik
|
||||
).filter(polygon => polygon.length > 0);
|
||||
}
|
||||
|
||||
// 2. Bersihkan data sebelum digunakan
|
||||
data.features.forEach(feature => {
|
||||
if (feature.geometry.type === "MultiPolygon") {
|
||||
feature.geometry.coordinates = cleanCoordinates(feature.geometry.coordinates);
|
||||
}
|
||||
});
|
||||
if (currentLayer) {
|
||||
map.removeLayer(currentLayer);
|
||||
}
|
||||
|
||||
currentLayer = L.geoJSON(data, {
|
||||
style: { color: "blue", weight: 2 },
|
||||
onEachFeature: function (feature, layer) {
|
||||
console.log(feature,layer)
|
||||
let clickTimer = null;
|
||||
layer.on('click', function (e) {
|
||||
let kode = feature.properties.id;
|
||||
console.log(kode)
|
||||
// onClickCallback(kode);
|
||||
if (clickTimer) {
|
||||
// Double click detected
|
||||
clearTimeout(clickTimer);
|
||||
clickTimer = null;
|
||||
|
||||
// Aksi double click → Pindah layer
|
||||
let kode = feature.properties.id;
|
||||
onClickCallback(kode);
|
||||
if (url.includes("/provinsi")) {
|
||||
localStorage.setItem('kode_provinsi', feature.properties.kode)
|
||||
} else if (currentLevel === 'kabupatenkota') {
|
||||
localStorage.setItem('kode_kabupatenkota',feature.properties.kode)
|
||||
}else if(currentLevel === 'kecamatan'){
|
||||
localStorage.setItem('kode_kecamatan',feature.properties.kode)
|
||||
}
|
||||
} else {
|
||||
// Single click → Tampilkan popup
|
||||
clickTimer = setTimeout(async () => {
|
||||
clickTimer = null;
|
||||
if (url.includes("/provinsi")) {
|
||||
localStorage.setItem('kode_provinsi', feature.properties.kode)
|
||||
const status = await fetchStatusDesaByProvinsi(feature.properties.kode);
|
||||
|
||||
let klasifikasiHTML = "<li>Tidak ada data</li>";
|
||||
if (Array.isArray(status?.[0])) {
|
||||
indexDesaHTML = status[0]
|
||||
.map(d => `${d[1]}: ${d[4]} / `)
|
||||
.join("");
|
||||
bumdesHTML = status[1]
|
||||
.map(dt => `${dt[0]}:${dt[1]} / `)
|
||||
.join("");
|
||||
danadesaHTML = `Dana :${status[2].jumlah_per_m}, Persentase : ${status[2].persentage}%`;
|
||||
serapanHTML = status[3]
|
||||
.map(([jabatan, nilai]) => {
|
||||
const alias = jabatan === 'Pendamping Lokal Desa' ? 'PLD' :
|
||||
jabatan === 'Pendamping Desa' ? 'PD' :
|
||||
jabatan;
|
||||
return `${alias}: ${nilai}`;
|
||||
}).join("");
|
||||
|
||||
koperasiHTML = status[4]
|
||||
.map(dt => `${dt[0]}: ${dt[1]} / `)
|
||||
.join("");
|
||||
}
|
||||
const popupContent = `
|
||||
<strong>${feature.properties.nama}</strong><br/>
|
||||
<strong>Status Desa:</strong>
|
||||
<li>IDM - ${indexDesaHTML}</li>
|
||||
<li>BUM - ${bumdesHTML}</li>
|
||||
<li>DD - ${danadesaHTML}</li>
|
||||
<li>SERAPAN - ${serapanHTML} </li>
|
||||
<li>KOPERASI - ${koperasiHTML} </li>
|
||||
`;
|
||||
|
||||
layer.bindPopup(popupContent).openPopup(e.latlng);
|
||||
|
||||
} else if (currentLevel === 'kabupatenkota') {
|
||||
const province_code = localStorage.getItem('kode_provinsi');
|
||||
localStorage.setItem('kode_kabupatenkota',feature.properties.kode)
|
||||
const status = await fetchStatusDesaByKabupatenkota(province_code, feature.properties.kode);
|
||||
let klasifikasiHTML = "<li>Tidak ada data</li>";
|
||||
|
||||
if (Array.isArray(status?.[0])) {
|
||||
indexDesaHTML = status[0]
|
||||
.map(d => `${d[1]}: ${d[5]} / `)
|
||||
.join("");
|
||||
|
||||
bumdesHTML = status[1]
|
||||
.map(dt => `${dt[0]}:${dt[1]} / `)
|
||||
.join("");
|
||||
danadesaHTML = `Dana :${status[2].jumlah_per_m}, Persentase : ${status[2].persentage}%`;
|
||||
serapanHTML = status[3]
|
||||
.map(([jabatan, nilai]) => {
|
||||
const alias = jabatan === 'Pendamping Lokal Desa' ? 'PLD' :
|
||||
jabatan === 'Pendamping Desa' ? 'PD' :
|
||||
jabatan;
|
||||
return `${alias}: ${nilai} /`;
|
||||
}).join("");
|
||||
|
||||
koperasiHTML = status[4]
|
||||
.map(dt => `${dt[0]}: ${dt[1]} / `)
|
||||
.join("");
|
||||
}
|
||||
const popupContent = `
|
||||
<strong>${feature.properties.nama}</strong><br/>
|
||||
<strong>Status Desa (Kabupaten):</strong>
|
||||
<li>IDM - ${indexDesaHTML}</li>
|
||||
<li>BUM - ${bumdesHTML}</li>
|
||||
<li>DD - ${danadesaHTML}</li>
|
||||
<li>SERAPAN - ${serapanHTML} </li>
|
||||
<li>KOPERASI - ${koperasiHTML} </li>
|
||||
`;
|
||||
|
||||
layer.bindPopup(popupContent).openPopup(e.latlng);
|
||||
|
||||
} else if (currentLevel === 'kecamatan'){
|
||||
const province_code = localStorage.getItem('kode_provinsi')
|
||||
const region_code = localStorage.getItem('kode_kabupatenkota')
|
||||
localStorage.setItem('kode_kecamatan',feature.properties.kode)
|
||||
const status = await fetchStatusDesaByKecamatan(province_code, region_code, feature.properties.kode)
|
||||
let klasifikasiHTML = "<li>Tidak ada data</li>";
|
||||
|
||||
if (Array.isArray(status?.[0])) {
|
||||
indexDesaHTML = status[0]
|
||||
.map(d => `${d[1]}: ${d[6]} / `)
|
||||
.join("");
|
||||
|
||||
bumdesHTML = status[1]
|
||||
.map(dt => `${dt[0]}:${dt[1]} / `)
|
||||
.join("");
|
||||
danadesaHTML = `Dana :${status[2].jumlah_per_m}, Persentase : ${status[2].persentage}%`;
|
||||
serapanHTML = status[3]
|
||||
.map(([jabatan, nilai]) => {
|
||||
const alias = jabatan === 'Pendamping Lokal Desa' ? 'PLD' :
|
||||
jabatan === 'Pendamping Desa' ? 'PD' :
|
||||
jabatan;
|
||||
return `${alias}: ${nilai} /`;
|
||||
}).join("");
|
||||
|
||||
koperasiHTML = status[4]
|
||||
.map(dt => `${dt[0]}: ${dt[1]} / `)
|
||||
.join("");
|
||||
}
|
||||
|
||||
const popupContent =
|
||||
`
|
||||
<strong> ${feature.properties.nama}</strong>
|
||||
<strong>Status Desa (Kecamatan):</strong>
|
||||
<strong>Status Desa:</strong>
|
||||
<li>IDM - ${indexDesaHTML}</li>
|
||||
<li>BUM - ${bumdesHTML}</li>
|
||||
<li>DD - ${danadesaHTML}</li>
|
||||
<li>SERAPAN - ${serapanHTML} </li>
|
||||
<li>KOPERASI - ${koperasiHTML} </li>
|
||||
`
|
||||
layer.bindPopup(popupContent).openPopup(e.latlng);
|
||||
}else {
|
||||
// Desa
|
||||
const province_code = localStorage.getItem('kode_provinsi')
|
||||
const region_code = localStorage.getItem('kode_kabupatenkota')
|
||||
const district_code = localStorage.getItem('kode_kecamatan')
|
||||
|
||||
const status = await fetchStatusDesaByDesa(province_code, region_code , district_code, feature.properties.kode);
|
||||
let klasifikasiHTML = "<li>Tidak ada data</li>";
|
||||
|
||||
if (Array.isArray(status?.[0])) {
|
||||
indexDesaHTML = status[0]
|
||||
.map(d => `${d[1]}: ${d[5]} / `)
|
||||
.join("");
|
||||
|
||||
bumdesHTML = status[1]
|
||||
.map(dt => `${dt[0]}:${dt[1]} / `)
|
||||
.join("");
|
||||
danadesaHTML = `Dana :${status[2].jumlah_per_m}, Persentase : ${status[2].persentage}%`;
|
||||
serapanHTML = status[3]
|
||||
.map(([jabatan, nilai]) => {
|
||||
const alias = jabatan === 'Pendamping Lokal Desa' ? 'PLD' :
|
||||
jabatan === 'Pendamping Desa' ? 'PD' :
|
||||
jabatan;
|
||||
return `${alias}: ${nilai} /`;
|
||||
}).join("");
|
||||
|
||||
koperasiHTML = status[4]
|
||||
.map(dt => `${dt[0]}: ${dt[1]} / `)
|
||||
.join("");
|
||||
}
|
||||
const popupContent = `
|
||||
<strong>${feature.properties.nama}</strong><br/>
|
||||
<strong>Status Desa (Desa):</strong>
|
||||
<li>IDM - ${indexDesaHTML}</li>
|
||||
<li>BUM - ${bumdesHTML}</li>
|
||||
<li>DD - ${danadesaHTML}</li>
|
||||
<li>SERAPAN - ${serapanHTML} </li>
|
||||
<li>KOPERASI - ${koperasiHTML} </li>
|
||||
`;
|
||||
|
||||
layer.bindPopup(popupContent).openPopup(e.latlng);
|
||||
}
|
||||
}, 250);
|
||||
layer.bindPopup(feature.properties.nama);
|
||||
}
|
||||
console.log(currentLevel)
|
||||
});
|
||||
layer.bindPopup(feature.properties.nama);
|
||||
}
|
||||
}).addTo(map);
|
||||
|
||||
map.fitBounds(currentLayer.getBounds());
|
||||
setTimeout(() => {
|
||||
map.invalidateSize();
|
||||
}, 200);
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchStatusDesaByProvinsi(kodeProvinsi) {
|
||||
const url = `http://localhost:5000/api/status-provinsi/${kodeProvinsi}`;
|
||||
const urldd = `http://localhost:5000/api/provinsi/serapan/${kodeProvinsi}`;
|
||||
const urlpd = `http://localhost:5000//api/provinsi/pendamping/${kodeProvinsi}`
|
||||
const urlkop = `http://localhost:5000//api/provinsi/koperasi/${kodeProvinsi}`
|
||||
const urlbd = `http://localhost:5000/api/provinsi/bumdes/${kodeProvinsi}`;
|
||||
try {
|
||||
const res = await fetch(url);
|
||||
const bumdes = await fetch(urlbd)
|
||||
const dd = await fetch(urldd)
|
||||
const pd = await fetch(urlpd)
|
||||
const kop = await fetch(urlkop)
|
||||
|
||||
if (!res.ok && !bumdes.ok && !dd.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const IPD = await res.json()
|
||||
const bd = await bumdes.json()
|
||||
const danadesa = await dd.json()
|
||||
const dtpd = await pd.json()
|
||||
const dtkop = await kop.json()
|
||||
|
||||
return [IPD,bd, danadesa, dtpd, dtkop];
|
||||
} catch (err) {
|
||||
console.error("Gagal ambil status desa:", err);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchStatusDesaByKabupatenkota(kode_prov, kode_kabkota) {
|
||||
const url = `http://localhost:5000/api/status-kabupatenkota/${kode_prov}/${kode_kabkota}`
|
||||
const urldd = `http://localhost:5000/api/kabkota/serapan/${kode_kabkota}`;
|
||||
const urlpd = `http://localhost:5000//api/kabkota/pendamping/${kode_kabkota}`
|
||||
const urlkop = `http://localhost:5000//api/kabkota/koperasi/${kode_kabkota}`
|
||||
const urlbd = `http://localhost:5000/api/kabkota/bumdes/${kode_kabkota}`;
|
||||
try{
|
||||
const res = await fetch(url)
|
||||
const bumdes = await fetch(urlbd)
|
||||
const dd = await fetch(urldd)
|
||||
const pd = await fetch(urlpd)
|
||||
const kop = await fetch(urlkop)
|
||||
|
||||
if (!res.ok && !bumdes.ok && !dd.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const IPD = await res.json()
|
||||
const bd = await bumdes.json()
|
||||
const danadesa = await dd.json()
|
||||
const dtpd = await pd.json()
|
||||
const dtkop = await kop.json()
|
||||
|
||||
return [IPD,bd, danadesa, dtpd, dtkop];
|
||||
}catch(err){
|
||||
console.log(err)
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchStatusDesaByKecamatan(province_code, region_code, district_code){
|
||||
const url = `http://localhost:5000/api/status-kecamatan/${province_code}/${region_code}/${district_code}`
|
||||
const urldd = `http://localhost:5000/api/kecamatan/serapan/${district_code}`;
|
||||
const urlpd = `http://localhost:5000//api/kecamatan/pendamping/${district_code}`
|
||||
const urlkop = `http://localhost:5000//api/kecamatan/koperasi/${district_code}`
|
||||
const urlbd = `http://localhost:5000/api/kecamatan/bumdes/${district_code}`;
|
||||
try {
|
||||
const res = await fetch(url)
|
||||
const bumdes = await fetch(urlbd)
|
||||
const dd = await fetch(urldd)
|
||||
const pd = await fetch(urlpd)
|
||||
const kop = await fetch(urlkop)
|
||||
|
||||
if (!res.ok && !bumdes.ok && !dd.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const IPD = await res.json()
|
||||
const bd = await bumdes.json()
|
||||
const danadesa = await dd.json()
|
||||
const dtpd = await pd.json()
|
||||
const dtkop = await kop.json()
|
||||
|
||||
return [IPD,bd, danadesa, dtpd, dtkop];;
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchStatusDesaByDesa(province_code, region_code, district_code, village_code){
|
||||
const url = `http://localhost:5000//api/desa/status/${province_code}/${region_code}/${district_code}/${village_code}`
|
||||
const urldd = `http://localhost:5000/api/desa/serapan/${village_code}`;
|
||||
const urlpd = `http://localhost:5000//api/desa/pendamping/${village_code}`
|
||||
const urlkop = `http://localhost:5000//api/desa/koperasi/${village_code}`
|
||||
const urlbd = `http://localhost:5000/api/desa/bumdes/${village_code}`;
|
||||
try {
|
||||
const res = await fetch(url)
|
||||
const bumdes = await fetch(urlbd)
|
||||
const dd = await fetch(urldd)
|
||||
const pd = await fetch(urlpd)
|
||||
const kop = await fetch(urlkop)
|
||||
|
||||
if (!res.ok && !bumdes.ok && !dd.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const IPD = await res.json()
|
||||
const bd = await bumdes.json()
|
||||
const danadesa = await dd.json()
|
||||
const dtpd = await pd.json()
|
||||
const dtkop = await kop.json()
|
||||
|
||||
return [IPD,bd, danadesa, dtpd, dtkop];;
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
// Load provinsi Aceh awal
|
||||
loadLayer('/geojson/provinsi', function (kode_provinsi) {
|
||||
loadLayer(`/geojson/kabupaten/${kode_provinsi}`, function (kode_kabupaten) {
|
||||
loadLayer(`/geojson/kecamatan/${kode_kabupaten}`, function (kode_kecamatan) {
|
||||
loadLayer(`/geojson/desa/${kode_kecamatan}`, function () {
|
||||
// Desa tidak turun level lagi
|
||||
}, 'desa');
|
||||
}, 'kecamatan');
|
||||
}, 'kabupatenkota');
|
||||
}, 'provinsi');
|
||||
|
||||
function goToLevel(level) {
|
||||
const prov = localStorage.getItem('kode_provinsi');
|
||||
const kab = localStorage.getItem('kode_kabupatenkota');
|
||||
const kec = localStorage.getItem('kode_kecamatan');
|
||||
|
||||
switch (level) {
|
||||
case 'provinsi':
|
||||
loadLayer(`/geojson/provinsi`, () => {}, 'provinsi');
|
||||
break;
|
||||
case 'kabupatenkota':
|
||||
loadLayer(`/geojson/kabupaten/${prov}`, () => {}, 'kabupatenkota');
|
||||
break;
|
||||
case 'kecamatan':
|
||||
loadLayer(`/geojson/kecamatan/${kab}`, () => {}, 'kecamatan');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
$('#provinsiDropdown').on('change', function (e) {
|
||||
const kodeProvinsi = $(this).val(); // lebih aman daripada e.target.value
|
||||
console.log("Provinsi dipilih:", kodeProvinsi);
|
||||
|
||||
if (!kodeProvinsi) {
|
||||
console.warn("Tidak ada kode provinsi yang dipilih!");
|
||||
return;
|
||||
}
|
||||
|
||||
localStorage.setItem('kode_provinsi', kodeProvinsi);
|
||||
|
||||
console.log(`Memuat kabupaten dari /geojson/kabupaten/${kodeProvinsi}`);
|
||||
loadLayer(`/geojson/kabupaten/${kodeProvinsi}`, () => {
|
||||
console.log("Layer kabupaten dimuat.");
|
||||
}, 'kabupatenkota');
|
||||
});
|
||||
|
||||
$('#kabkotaDropdown').on('change', function (e) {
|
||||
const kodeKabupaten = e.target.value;
|
||||
|
||||
localStorage.setItem('kode_kabupatenkota', kodeKabupaten);
|
||||
loadLayer(`/geojson/kecamatan/${kodeKabupaten}`, () => {}, 'kecamatan');
|
||||
}).select2();
|
||||
|
||||
document.getElementById('kecamatanDropdown').addEventListener('change', function (e) {
|
||||
const kodeKecamatan = e.target.value;
|
||||
localStorage.setItem('kode_kecamatan', kodeKecamatan);
|
||||
loadLayer(`/geojson/desa/${kodeKecamatan}`, () => {}, 'desa');
|
||||
});
|
||||
|
||||
$(document).ready(function () {
|
||||
console.log("ready for fetching data")
|
||||
const provinsiURL = "{{ url_for('main.get_master_provinsi') }}";
|
||||
$('#provinsiDropdown').select2({
|
||||
placeholder: 'Pilih Desa',
|
||||
allowClear: true,
|
||||
ajax: {
|
||||
url: provinsiURL,
|
||||
dataType: 'json',
|
||||
delay: 250,
|
||||
data: function (params) {
|
||||
return {
|
||||
q: params.term
|
||||
};
|
||||
},
|
||||
processResults: function (data) {
|
||||
console.log(data)
|
||||
return {
|
||||
results: data.map(provinsi => ({
|
||||
id: provinsi[0],
|
||||
text: provinsi[1]
|
||||
}))
|
||||
};
|
||||
},
|
||||
cache: true
|
||||
},
|
||||
minimumInputLength: 0
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", (event) => {
|
||||
$( '.select2' ).select2( {
|
||||
theme: 'bootstrap-4'
|
||||
} );
|
||||
let total_dd_container = document.getElementById('tot_dd')
|
||||
fetchTotDana('http://localhost:5000/api/desa/total-dana-desa')
|
||||
fethTotSerapan('http://localhost:5000/api/desa/total-serapan-dana')
|
||||
function fetchTotDana(url){
|
||||
fetch(url)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
total_dd_container.textContent = parseDanBulatkanKeMiliar(data)
|
||||
})
|
||||
}
|
||||
|
||||
function fethTotSerapan(url){
|
||||
fetch(url)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
console.log(data)
|
||||
document.getElementById('tot_sr').textContent = parseDanBulatkanKeMiliar(data['serapan_per_m'])
|
||||
document.getElementById('pr_sr').textContent = data['persentage'] + "%"
|
||||
})
|
||||
}
|
||||
|
||||
function parseDanBulatkanKeMiliar(input) {
|
||||
// 1. Bersihkan input: hapus "Rp", ".", ganti koma dengan titik
|
||||
let cleaned = input
|
||||
.replace(/Rp/g, "")
|
||||
.replace(/\./g, "")
|
||||
.replace(",", ".");
|
||||
|
||||
// 2. Konversi ke angka
|
||||
let angka = parseFloat(cleaned);
|
||||
|
||||
// 3. Bulatkan ke satuan miliar
|
||||
let hasilBulat = Math.round(angka / 1e9);
|
||||
|
||||
// 4. Tambahkan format "x Miliar"
|
||||
return "Rp" + hasilBulat.toLocaleString("id-ID") + " M";
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!-- Chart Script -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script>
|
||||
var getRandomDataArray = function () {
|
||||
var dataArray = [];
|
||||
for (var i = 0; i < 7; i++) dataArray.push(Math.round(Math.random() * 100));
|
||||
return dataArray;
|
||||
}
|
||||
|
||||
|
||||
window.onload = function(){
|
||||
var chartOptions = { responsive : true };
|
||||
var chartData = {
|
||||
labels : ["January","February","March","April","May","June","July"],
|
||||
datasets : [
|
||||
{
|
||||
fillColor : "#ffa500",
|
||||
strokeColor : "rgba(220,220,220,0.8)",
|
||||
highlightFill: "rgba(220,220,220,0.75)",
|
||||
highlightStroke: "rgba(220,220,220,1)",
|
||||
data : getRandomDataArray()
|
||||
},
|
||||
{
|
||||
fillColor : "rgba(151,187,205,0.5)",
|
||||
strokeColor : "rgba(151,187,205,0.8)",
|
||||
highlightFill : "rgba(151,187,205,0.75)",
|
||||
highlightStroke : "rgba(151,187,205,1)",
|
||||
data : getRandomDataArray()
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
var chart = document.getElementById("canvas").getContext("2d");
|
||||
window.myBar = new Chart(chart, {
|
||||
type: "bar", // <- gunakan type di sini, bukan .Bar()
|
||||
data: chartData,
|
||||
options: chartOptions
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user