fir2be/map-controller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dropdown masih beberapa geometry belum nampak di map

Browse Source
This commit is contained in:
='fauz 2025-06-30 16:28:34 +07:00
parent e714218b9d
commit ea99316d4c
5 changed files with 150 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/__pycache__/apiController.cpython-313.pyc
View File

Binary file not shown.

BIN
app/__pycache__/routes.cpython-313.pyc
View File

Binary file not shown.

59
app/apiController.py
View File

@ -318,7 +318,10 @@ class apiController:
) AS virtual_table GROUP BY jenis_pendamping ORDER BY "SUM(jumlah) / COUNT(DISTINCT kabupaten_kota_id)" DESC ) AS virtual_table GROUP BY jenis_pendamping ORDER BY "SUM(jumlah) / COUNT(DISTINCT kabupaten_kota_id)" DESC
LIMIT 10000; LIMIT 10000;
""" """
try:
cur.execute(SQL) cur.execute(SQL)
except Exception as e:
return []
result = cur.fetchall() result = cur.fetchall()
return result return result
@ -371,7 +374,7 @@ class apiController:
#====================================================== #======================================================
#MAP DATA #MAP DATA
#========================================================= #=========================================================
def fetch_geojson(level, parent_code=None): def fetch_geojson(conn,level, parent_code=None):
# cur = conn.cursor() # cur = conn.cursor()
# cur.execute(f"SELECT id, kode, nama, lat, lng, path, iso FROM {table_name} WHERE id = 1 LIMIT 1") # cur.execute(f"SELECT id, kode, nama, lat, lng, path, iso FROM {table_name} WHERE id = 1 LIMIT 1")
cur = conn.cursor() cur = conn.cursor()
@ -383,7 +386,15 @@ class apiController:
elif level == 'kecamatan': elif level == 'kecamatan':
cur.execute("SELECT id, kode, nama, null as lat, null as lng, koordinat as path FROM wil_kecamatan WHERE kabupaten_kota_id = %s", (parent_code,)) cur.execute("SELECT id, kode, nama, null as lat, null as lng, koordinat as path FROM wil_kecamatan WHERE kabupaten_kota_id = %s", (parent_code,))
elif level == 'desa': elif level == 'desa':
cur.execute("SELECT id, kode, nama, null as lat, null as lng,path FROM wil_desa WHERE kecamatan_id = %s", (parent_code,)) # cur.execute("SELECT id, kode, nama, null as lat, null as lng,path FROM wil_desa WHERE kecamatan_id = %s", (parent_code,))
cur.execute(("""
SELECT id, kode, nama, null as lat, null as lng,
CONCAT(
REPEAT('[', 4 - (LENGTH(path) - LENGTH(REPLACE(path, '[', '')))),
path,
REPEAT(']', 4 - (LENGTH(path) - LENGTH(REPLACE(path, ']', ''))))
) AS path
FROM wil_desa WHERE kecamatan_id = %s""", (parent_code,)))
else: else:
return {"type": "FeatureCollection", "features": []} return {"type": "FeatureCollection", "features": []}
features = [] features = []
@ -1006,28 +1017,28 @@ class apiController:
return result return result
@staticmethod @staticmethod
def getPendampingPerDesa(conn, kode_desa): # def getPendampingPerDesa(conn, kode_desa):
cursor = conn.cursor() # cursor = conn.cursor()
SQL = """ # SQL = """
SELECT jenis_pendamping AS jenis_pendamping, sum(jumlah) AS "SUM(jumlah)" # SELECT jenis_pendamping AS jenis_pendamping, sum(jumlah) AS "SUM(jumlah)"
FROM (select # FROM (select
wp.id provinsi_id, wp.kode provinsi_kode, wp.nama provinsi_nama, # wp.id provinsi_id, wp.kode provinsi_kode, wp.nama provinsi_nama,
wkk.id kabupaten_kota_id, wkk.kode kabupaten_kota_kode, wkk.nama kabupaten_kota_nama, # wkk.id kabupaten_kota_id, wkk.kode kabupaten_kota_kode, wkk.nama kabupaten_kota_nama,
wk.id kecamatan_id, wk.kode kecamatan_kode, wk.nama kecamatan_nama, # wk.id kecamatan_id, wk.kode kecamatan_kode, wk.nama kecamatan_nama,
wkd.id kelurahan_desa_id, wkd.kode kelurahan_desa_kode, wkd.nama kelurahan_desa_nama, # wkd.id kelurahan_desa_id, wkd.kode kelurahan_desa_kode, wkd.nama kelurahan_desa_nama,
mpd.jenis_pendamping, mpd.jumlah # mpd.jenis_pendamping, mpd.jumlah
from metric_pendamping_desa mpd # from metric_pendamping_desa mpd
inner join wil_desa wkd on mpd.kelurahan_desa_id = wkd.id # inner join wil_desa wkd on mpd.kelurahan_desa_id = wkd.id
inner join wil_kecamatan wk on wkd.kecamatan_id = wk.id # inner join wil_kecamatan wk on wkd.kecamatan_id = wk.id
inner join wil_kabupatenkota wkk on wk.kabupatenkota_id = wkk.id # inner join wil_kabupatenkota wkk on wk.kabupatenkota_id = wkk.id
inner join wil_provinsi wp on wkk.provinsi_id = wp.id # inner join wil_provinsi wp on wkk.provinsi_id = wp.id
WHERE wkd.kode = %s # WHERE wkd.kode = %s
) AS virtual_table GROUP BY jenis_pendamping ORDER BY "SUM(jumlah)" DESC # ) AS virtual_table GROUP BY jenis_pendamping ORDER BY "SUM(jumlah)" DESC
LIMIT 1000; # LIMIT 1000;
""" # """
cursor.execute(SQL, (kode_desa,)) # cursor.execute(SQL, (kode_desa,))
result = cursor.fetchall() # result = cursor.fetchall()
return result # return result
@staticmethod @staticmethod
def getDesaDenganAtauTanpaKopmerDesa(conn, kode_desa): def getDesaDenganAtauTanpaKopmerDesa(conn, kode_desa):

7
app/routes.py
View File

@ -37,7 +37,10 @@ def get_connection():
#======================================================== #========================================================
@main.route('/') @main.route('/')
def index(): def index():
return render_template('index.html') with get_connection() as conn:
data = apiController.provinsi(conn)
print(data)
return render_template('index.html', provinsis=data)
@main.route("/geojson/provinsi") @main.route("/geojson/provinsi")
def get_provinsi(): def get_provinsi():
@ -252,12 +255,14 @@ def get_pendamping_per_desa(kode_desa):
#informasi bumdes #informasi bumdes
@main.route("/api/desa/bumdes/<kode_desa>") @main.route("/api/desa/bumdes/<kode_desa>")
def get_status_bumdes_desa(kode_desa): def get_status_bumdes_desa(kode_desa):
with get_connection() as conn:
data = apiController.getBumdesDesa(conn,kode_desa) data = apiController.getBumdesDesa(conn,kode_desa)
return jsonify(data) return jsonify(data)
#informasi serapan #informasi serapan
@main.route("/api/desa/serapan/<kode_desa>") @main.route("/api/desa/serapan/<kode_desa>")
def get_pdesa_serapan(kode_desa): def get_pdesa_serapan(kode_desa):
with get_connection() as conn:
data = apiController.getTotalSerapanDesa(conn,kode_desa) data = apiController.getTotalSerapanDesa(conn,kode_desa)
return jsonify(data) return jsonify(data)

188
templates/index.html
View File

@ -127,8 +127,9 @@
<select class="form-control select2 border border-primary" name="provinsiDropdown" id="provinsiDropdown" <select class="form-control select2 border border-primary" name="provinsiDropdown" id="provinsiDropdown"
data-placeholder="Provinsi ......"> data-placeholder="Provinsi ......">
<option></option> <option></option>
<option value="1">Option 1</option> {% for provinsi in provinsis %}
<option value="2">Option 2</option> <option value="{{provinsi[0]}}">{{provinsi[1]}}</option>
{% endfor %}
</select> </select>
</div> </div>
</div> </div>
@ -209,6 +210,10 @@
</script> </script>
<script> <script>
let currentLayer = null; let currentLayer = null;
let currentState = {
level: null,
kode: null
};
function loadLayer(url, onClickCallback, level = 'provinsi') { function loadLayer(url, onClickCallback, level = 'provinsi') {
currentLevel = level; currentLevel = level;
fetch(url) fetch(url)
@ -245,11 +250,9 @@
currentLayer = L.geoJSON(data, { currentLayer = L.geoJSON(data, {
style: { color: "blue", weight: 2 }, style: { color: "blue", weight: 2 },
onEachFeature: function (feature, layer) { onEachFeature: function (feature, layer) {
console.log(feature,layer)
let clickTimer = null; let clickTimer = null;
layer.on('click', function (e) { layer.on('click', async function (e) {
let kode = feature.properties.id; let kode = feature.properties.id;
console.log(kode)
// onClickCallback(kode); // onClickCallback(kode);
if (clickTimer) { if (clickTimer) {
// Double click detected // Double click detected
@ -260,11 +263,16 @@
let kode = feature.properties.id; let kode = feature.properties.id;
onClickCallback(kode); onClickCallback(kode);
if (url.includes("/provinsi")) { if (url.includes("/provinsi")) {
localStorage.setItem('kode_provinsi', feature.properties.kode) const provinsiId = feature.properties.id;
localStorage.setItem('kode_provinsi', provinsiId);
updateDropdown('provinsi',feature.properties.id)
} else if (currentLevel === 'kabupatenkota') { } else if (currentLevel === 'kabupatenkota') {
localStorage.setItem('kode_kabupatenkota',feature.properties.kode) localStorage.setItem('kode_kabupatenkota',feature.properties.id)
updateDropdown('kabupatenkota',feature.properties.id)
}else if(currentLevel === 'kecamatan'){ }else if(currentLevel === 'kecamatan'){
localStorage.setItem('kode_kecamatan',feature.properties.kode) localStorage.setItem('kode_kecamatan',feature.properties.id)
updateDropdown('kecamatan',feature.properties.id)
} }
} else { } else {
// Single click → Tampilkan popup // Single click → Tampilkan popup
@ -658,13 +666,83 @@
$('#kecamatanDropdown').on('change', function (e) { $('#kecamatanDropdown').on('change', function (e) {
const kodeKecamatan = $(this).val(); const kodeKecamatan = $(this).val();
console.log(kodeKecamatan)
if (!kodeKecamatan) {
console.warn("Kode kecamatan kosong atau null.");
return;
}
localStorage.setItem('kode_kecamatan', kodeKecamatan); localStorage.setItem('kode_kecamatan', kodeKecamatan);
loadLayer(`/geojson/desa/${kodeKecamatan}`, () => {}, 'desa');
loadLayer(`/geojson/desa/${kodeKecamatan}`, () => {
console.log("desa dimuat")
}, 'desa');
}); });
</script> </script>
<script> <script>
function updateDropdown(level, kode) {
const dropdownId = {
'provinsi': '#provinsiDropdown',
'kabupatenkota': '#kabkotaDropdown',
'kecamatan': '#kecamatanDropdown'
}[level];
const nextLevel = {
'provinsi': '#provinsiDropdown',
'kabupatenkota': '#kabkotaDropdown',
'kecamatan': '#kecamatanDropdown'
}[level];
if ($(dropdownId).length) {
$(dropdownId).val(kode).trigger('change.select2');
if(level == 'provinsi'){
// Ambil kabupaten berdasarkan provinsi
const kabkotaURL = "{{ url_for('main.get_master_kabkota') }}";
$.ajax({
url: kabkotaURL,
data: { provinsi_id: $(dropdownId).val() },
dataType: 'json',
success: function (data) {
const results = data.map(kabupaten => ({
id: kabupaten[0],
text: kabupaten[1]
}));
// Tambahkan ke dropdown kabupaten
$('#kabkotaDropdown').select2({
data: results,
placeholder: 'Pilih Kabupaten/Kota',
allowClear: true
});
}
});
}else if(level == 'kabupatenkota'){
// Ambil kabupaten berdasarkan provinsi
const kabkotaURL = "{{ url_for('main.get_master_kecamatan') }}";
$.ajax({
url: kabkotaURL,
data: { kabkota_id: $(dropdownId).val() },
dataType: 'json',
success: function (data) {
const results = data.map(kecamatan => ({
id: kecamatan[0],
text: kecamatan[1]
}));
// Tambahkan ke dropdown kabupaten
$('#kecamatanDropdown').select2({
data: results,
placeholder: 'Pilih Kecamatan',
allowClear: true
});
}
});
}
}
}
$(document).ready(function () { $(document).ready(function () {
console.log("ready for fetching data") console.log("ready for fetching data")
const provinsiURL = "{{ url_for('main.get_master_provinsi') }}"; const provinsiURL = "{{ url_for('main.get_master_provinsi') }}";
@ -672,78 +750,25 @@
$('#provinsiDropdown').select2({ $('#provinsiDropdown').select2({
placeholder: 'Pilih Provinsi', placeholder: 'Pilih Provinsi',
allowClear: true, allowClear: true,
ajax: { //ajax: {
url: provinsiURL, // url: '',//provinsiURL,
dataType: 'json', // dataType: 'json',
delay: 250, // delay: 250,
data: function (params) { // data: function (params) {
return { // return {
q: params.term // q: params.term
}; // };
}, // },
processResults: function (data) { // processResults: function (data) {
console.log(data) // return {
return { // results: data.map(provinsi => ({
results: data.map(provinsi => ({ // id: provinsi[0],
id: provinsi[0], // text: provinsi[1]
text: provinsi[1] // }))
})) // };
}; // },
}, // cache: true
cache: true //},
},
minimumInputLength: 0
});
$('#kabkotaDropdown').select2({
placeholder: 'Pilih Kabkota',
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
});
$('#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 minimumInputLength: 0
}); });
}); });
@ -769,7 +794,6 @@
fetch(url) fetch(url)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
console.log(data)
document.getElementById('tot_sr').textContent = parseDanBulatkanKeMiliar(data['serapan_per_m']) document.getElementById('tot_sr').textContent = parseDanBulatkanKeMiliar(data['serapan_per_m'])
document.getElementById('pr_sr').textContent = data['persentage'] + "%" document.getElementById('pr_sr').textContent = data['persentage'] + "%"
}) })