From 8e84a142c7d0426f1abcaf5b419627e053f7bf7d Mon Sep 17 00:00:00 2001
From: ='fauz <='fauzgabriel@gmail.com>
Date: Thu, 3 Jul 2025 00:41:31 +0700
Subject: [PATCH] map dropdown

---
 app/__pycache__/mapController.cpython-313.pyc | Bin 6971 -> 6994 bytes
 app/mapController.py                          |   5 +-
 templates/index.html                          | 148 ++++++++++--------
 templates/map.html                            |   2 -
 4 files changed, 85 insertions(+), 70 deletions(-)

diff --git a/app/__pycache__/mapController.cpython-313.pyc b/app/__pycache__/mapController.cpython-313.pyc
index 57e6f3a3e65a182b670c2e0b9dc287368610d627..55efff628543e75d2c1444060716961679822d30 100644
GIT binary patch
delta 735
zcmY*XOK1~O6us}gc{BM<n#@eww2A4|)KbVIX%^8IBs2>xXjO<4YEh&MiwhZK2D=jK
zZxMHfLC8h~7t*c9Rb3^zb0-wKsNgoc*tF2B;(f{BXJ8KJo^$SdcP{g}_`Rt1R5b+n
z$Q$?WfBc|s)155>@EX!!L4|O1{zaQu<PimUn5j^Uy7VGlUIy5dF~x@L7Ql68V(%PO
zB#Zr*;KRh~--HD^RHZ7f(kgR#4qU3k>P{ZOmMjUaks<j;5_N8I)J2^6Y5-s~(0U<9
zZ_qXTm@t^&GMm|=KI7MtsBMl)!B_Z5v8B1;xGo)anKs?RNwDx+{OV8Kd&_2t?6p`n
zp<Hut8PIt@7z{caf?XBtlNXe%m{_Y57JxH?6ZC9peti<@IKJ*7!V~Dy7&i{$lMPaz
zYAn`Mjm`Q@O+L`4UIuFHXE^#QvmZ`2G=#1O#&m71tHbQMUAAu)c3lKt{iS$^(#>RS
z80q&^IzG`qW>Q@1pD@{oo*rx76`r|!8}EEJQ;x#B7(!D)*o&0qP)iQ4l#Et<Y-K6c
zG6RAy1ckoHG159u1TM)!FDa<E<p3(}XsDcL?L@SkW$i34=bK+Rqdbk5EHu9<Z)mcE
ze-aEg<irKj1dIuYdCx;dqI-Lx3uMCUg>t0W%!Kbmi0M6@+>VJe9I+}#7hrfw;xXo4
oBueCR^J_w<^3Y6sKc+7w;>0+bj}YxBr4sGr>;pn%r;2UA0pY5hGynhq

delta 696
zcmZWlO=uHA82x5uXY;$wX0tJ|Nt>v_mWremj3Hnp5km!Q#ce_nJQS)3%Ay<WNvL>`
zdNT~dst9@!kCu2)yqI|PqEIP%>n%5JQ!uCaO}d_(!{dE#-uJ`%R`^)Zb~P;s_#Tz7
z-FUd6ty13#0eAxA;;|ZEvx!A(#3CFW4SJfEN&w3$fW?L^4zNJ8uwYmUy7+%CRk~KH
z=ptFDK@94&&gx2?H+UZB#b9n4z@{~1p00R$3UyXnWB4KM%#-~9cPYT_b4!bPdWp{C
z=^@BMgW23xupaYjMb<V$<%Fm3eZ{6ZJS2z9|8-s8=U#_bd2VV`@roTHKJl3y8}nau
za5r=>3<iVlJIP*4hH*jnicpoBj^}|BkRUU4LgJ=!bS{Y$gM!8vg!}M|M!2~ZO}M0a
z(4A?f-Q{LxUER`6S9R|^4Q%R@FRkzT<Qwa4_5IAo`OV{JKN$$W!=kG!rVKDg*XR4Y
z5gI?x?=dB6^!J!*j{NDFVu>HAUB(>`PE|Dc5U%iGn}^D?W?PSxi|Ka8FZo13>eC!8
z?E;ZlRHZ)aL%qZOsC2YoCC@sEk;)Y7Oz}#-^@B6YGdOypwe5RBQ;var7={y(OqURq
z5EIXW1!9V?!6HeBU?@*cwo0L^VPXh3v8u}%jts;xCB(&e@*eu0C(n>->t`}X)!}DG
a^hT>motQg0?A%Ff#MnE0ixAbRW7}VJWtb8G

diff --git a/app/mapController.py b/app/mapController.py
index 28e7537..f8dff3e 100644
--- a/app/mapController.py
+++ b/app/mapController.py
@@ -21,7 +21,9 @@ def swap_latlon(coords):
 def swap_latlon2(coords):
     try:
         sample = coords[0][0][0] 
-        if not (-180 <= sample[0] <= 180 and -90 <= sample[1] <= 90):
+        lat, lon = sample
+        # if not (-180 <= sample[0] <= 180 and -90 <= sample[1] <= 90):
+        if -90 <= lat <= 90 and -180 <= lon <= 180:
             return [
                 [  
                     [  
@@ -30,7 +32,6 @@ def swap_latlon2(coords):
                 ] for polygon in coords
             ]
         else:
-            # Sudah benar [lon, lat]
             return coords
     except Exception as e:
         print(f"[swap_latlon] Error during coordinate swap: {e}")
diff --git a/templates/index.html b/templates/index.html
index 8fddd96..71105a9 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -119,11 +119,11 @@
                         <div class="row form-group">
                             <div class="col-md-12">
                                 <div class="input-group">
-                                    <div class="input-group-prepend">
+                                    <!-- <div class="input-group-prepend">
                                         <span class="input-group-text" style="width: 150px;">
                                             Provinsi
                                         </span>
-                                    </div>
+                                    </div> -->
                                     <select class="form-control select2 border border-primary" name="provinsiDropdown" id="provinsiDropdown"
                                             data-placeholder="Provinsi ......">
                                         <option></option>
@@ -137,11 +137,11 @@
                         <div class="row form-group">
                             <div class="col-md-12">
                                 <div class="input-group">
-                                    <div class="input-group-prepend">
+                                    <!-- <div class="input-group-prepend">
                                         <span class="input-group-text" style="width: 150px;">
                                             Kabupaten/Kota
                                         </span>
-                                    </div>
+                                    </div> -->
                                     <select class="form-control select2" name="kabkotaDropdown" id="kabkotaDropdown"
                                             data-placeholder="Kabupaten/Kota ....." >
                                         <option></option>
@@ -154,11 +154,11 @@
                         <div class="row form-group">
                             <div class="col-md-12">
                                 <div class="input-group">
-                                    <div class="input-group-prepend">
+                                    <!-- <div class="input-group-prepend">
                                         <span class="input-group-text" style="width: 150px;">
                                             Kecamatan
                                         </span>
-                                    </div>
+                                    </div> -->
                                     <select class="form-control select2"  name="kecamatanDropdown" id="kecamatanDropdown"
                                             data-placeholder="Kecamatan .....">
                                         <option></option>
@@ -274,14 +274,14 @@
                                     if (url.includes("/provinsi")) {
                                             const provinsiId = feature.properties.id;
                                             localStorage.setItem('kode_provinsi', provinsiId);
-
-                                            updateDropdown('provinsi',feature.properties.id)
+                                            updateDropdown('provinsi',kode)
                                         } else if (currentLevel === 'kabupatenkota') {
+                                            let province_id = localStorage.getItem('kode_provinsi')
                                             localStorage.setItem('kode_kabupatenkota',feature.properties.id)
-                                            updateDropdown('kabupatenkota',feature.properties.id)
+                                            updateDropdown('kabupatenkota',kode)
                                         }else if(currentLevel === 'kecamatan'){
                                             localStorage.setItem('kode_kecamatan',feature.properties.id)
-                                            updateDropdown('kecamatan',feature.properties.id)
+                                            updateDropdown('kabupatenkota',kode)
                                         }
                                 } else {
                                     // Single click → Tampilkan popup
@@ -730,61 +730,69 @@
 
     
     <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]
-                            }));
+        const dropdownMap = {
+            provinsi: '#provinsiDropdown',
+            kabupatenkota: '#kabkotaDropdown',
+            kecamatan: '#kecamatanDropdown'
+        };
 
-                            // 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]
-                            }));
+        const apiURLMap = {
+            provinsi: "{{ url_for('main.get_master_kabkota') }}",
+            kabupatenkota: "{{ url_for('main.get_master_kecamatan') }}"
+        };
 
-                            // Tambahkan ke dropdown kabupaten
-                            $('#kecamatanDropdown').select2({
-                                data: results,
-                                placeholder: 'Pilih Kecamatan',
-                                allowClear: true
-                            });
-                        }
-                    });
+        const dataKeyMap = {
+            provinsi: 'provinsi_id',
+            kabupatenkota: 'kabkota_id'
+        };
+
+        function getNextLevel(level) {
+            const order = ['provinsi', 'kabupatenkota', 'kecamatan'];
+            const index = order.indexOf(level);
+            return order[index + 1];
+        }
+
+        function capitalize(str) {
+            return str.charAt(0).toUpperCase() + str.slice(1);
+        }
+
+        function updateDropdown(level, kode,autoSelectKodeNext = null) {
+            const dropdownId = dropdownMap[level];
+            if (!dropdownId || !$(dropdownId).length) return;
+
+            // Set value dan trigger select2
+            $(dropdownId).val(kode).trigger('change.select2');
+            console.log(dropdownId,kode);
+            // Ambil level berikutnya
+            const nextLevel = getNextLevel(level);
+            const targetDropdownId = dropdownMap[nextLevel];
+
+            // Kalau ada level berikutnya, ambil datanya via AJAX
+            if (nextLevel  && apiURLMap[level]) {
+                const targetDropdownId = dropdownMap[getNextLevel(level)];
+                const apiURL = apiURLMap[level];
+                const paramKey = dataKeyMap[level];
+                const paramVal = $(dropdownId).val();
+
+                $.ajax({
+                    url: apiURL,
+                    data: { [paramKey]: paramVal },
+                    dataType: 'json',
+                    success: function (data) {
+                        const results = data.map(item => ({
+                        id: item[0],
+                        text: item[1]
+                        }));
+
+                        $(targetDropdownId).empty().select2({
+                        data: results,
+                        placeholder: `Pilih ${capitalize(getNextLevel(level))}`,
+                        allowClear: true
+                        });
+                    }
+                });
+                if (autoSelectKodeNext) {
+                    $(targetDropdownId).val(autoSelectKodeNext).trigger('change.select2');
                 }
             }
         }
@@ -833,7 +841,12 @@
                 fetch(url)
                 .then(res => res.json())
                 .then(data => {
-                    total_dd_container.textContent = parseDanBulatkanKeMiliar(data)
+                    
+                    if(typeof (data) == 'object'){
+                        //total_dd_container.textContent = parseDanBulatkanKeMiliar(data.jumlah_per_m)
+                    }else{
+                        //total_dd_container.textContent = parseDanBulatkanKeMiliar(data)
+                    }
                 })
             }
 
@@ -841,8 +854,11 @@
                 fetch(url)
                 .then(res => res.json())
                 .then(data => {
-                    document.getElementById('tot_sr').textContent = parseDanBulatkanKeMiliar(data['serapan_per_m'])
-                    document.getElementById('pr_sr').textContent = data['persentage'] + "%"
+                    if(data){
+                        console.log("fetch serapan:", data)
+                        //document.getElementById('tot_sr').textContent = parseDanBulatkanKeMiliar(data['serapan_per_m'])
+                        //document.getElementById('pr_sr').textContent = data['persentage'] + "%"
+                    }
                 })
             }
 
diff --git a/templates/map.html b/templates/map.html
index 2427fe8..9be0e83 100644
--- a/templates/map.html
+++ b/templates/map.html
@@ -72,8 +72,6 @@
 
             <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">