MaghfiraIzzati/D1041231014_ProvertyMapping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
MAGHFIRA IZZATI
2026-06-07 21:22:22 +07:00
parent a70150e088
commit bde929158b
12 changed files with 328 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
01/index.html
+75 -42
View File
@@ -2946,9 +2946,10 @@
color: #64748b !important;
margin: 12px 16px 5px !important;
}
.pf input, .pf select {
.pf input, .pf select, .pf textarea {
display: block;
width: calc(100% - 32px);
box-sizing: border-box !important;
width: auto !important;
margin: 0 16px;
padding: 9px 12px !important;
border: 1.5px solid #e2e8f0 !important;
@@ -2959,7 +2960,14 @@
outline: none;
transition: border-color .2s, box-shadow .2s, background .2s;
}
.pf input:focus, .pf select:focus {
.pf textarea {
resize: vertical;
min-height: 60px;
font-family: monospace !important;
font-size: 11px !important;
font-weight: 500 !important;
}
.pf input:focus, .pf select:focus, .pf textarea:focus {
border-color: #3b82f6 !important;
background: #fff !important;
box-shadow: 0 0 0 3px rgba(59,130,246,.12) !important;
@@ -2992,7 +3000,8 @@
.pf .pbtn {
display: block !important;
width: calc(100% - 32px) !important;
box-sizing: border-box !important;
width: auto !important;
margin: 12px 16px 14px !important;
padding: 10px !important;
border-radius: 10px !important;
@@ -3258,6 +3267,9 @@
</div>
<div id="list-masjid" style="display:none;"><span id="cnt-masjid">0</span></div>
<div id="list-kemiskinan" style="display:none;"><span id="cnt-kemiskinan">0</span></div>
<div id="list-spbu" style="display:none;"><span id="cnt-spbu">0</span></div>
<div id="list-jalan" style="display:none;"><span id="cnt-jalan">0</span></div>
<div id="list-parsil" style="display:none;"><span id="cnt-parsil">0</span></div>
</div>
<div class="leg-sec">
@@ -4262,15 +4274,17 @@
}
setMode(null);
ensureLayerVisible('spbu', d.id);
focusFeature('spbu', d.id);
} else {
alert("Gagal simpan database");
alert("Gagal menyimpan: " + (response.message || "Periksa database"));
}
})
.catch(err => {
console.log(err);
alert("Terjadi error");
console.error(err);
alert("Terjadi error jaringan");
});
}
@@ -4281,9 +4295,11 @@
const m = L.marker([d.lat, d.lng], { icon, draggable: true });
m.bindPopup(`<div class="pi">
<h4><i class="fas fa-gas-pump" style="color:${color}"></i>${d.nama}</h4>
<div class="pi-row"><span class="pi-k">No. SPBU</span><span class="pi-v">${d.no}</span></div>
<div class="pi-row"><span class="pi-k">Status</span><span class="pi-v" style="color:${color}">${d.status === 'Ya' ? '✓ Buka 24 Jam' : '✗ Tidak Buka 24 Jam'}</span></div>
<div class="pi-row"><span class="pi-k">Koordinat</span><span class="pi-v" style="font-size:11px;font-family:monospace">${d.lat.toFixed(5)}, ${d.lng.toFixed(5)}</span></div>
<div class="pi-body">
<div class="pi-row"><span class="pi-k">No. SPBU</span><span class="pi-v">${d.no}</span></div>
<div class="pi-row"><span class="pi-k">Status</span><span class="pi-v" style="color:${color}">${d.status === 'Ya' ? '&#10004; Buka 24 Jam' : '&#10006; Tidak Buka 24 Jam'}</span></div>
<div class="pi-row"><span class="pi-k">Koordinat</span><span class="pi-v" style="font-size:11px;font-family:monospace">${d.lat.toFixed(5)}, ${d.lng.toFixed(5)}</span></div>
</div>
<div class="act-row">
<button class="pbtn pbtn-y" onclick="openEditSpbu(${d.id})">Edit</button>
<button class="pbtn pbtn-r" onclick="deleteFeature('spbu',${d.id})">Hapus</button>
@@ -4301,13 +4317,15 @@
state.tempMarkers.push(vm);
if (state.tempPolyline) map.removeLayer(state.tempPolyline);
state.tempPolyline = L.polyline(state.tempPoints, { color: '#e74c3c', weight: 3, dashArray: '7,5', opacity: 0.8 }).addTo(map);
document.getElementById('hint').textContent = `ðŸ›£ï¸ ${state.tempPoints.length} titik — klik ganda untuk selesai`;
document.getElementById('hint').textContent = `📍 ${state.tempPoints.length} titik — klik ganda untuk selesai`;
}
function finishLine(e) {
if (state.tempPoints.length < 2) { alert('Minimal 2 titik!'); return; }
const pts = [...state.tempPoints];
const len = calcLen(pts);
window._tempLinePts = pts;
window._tempLineLen = len;
clearTemp();
L.popup({ closeOnClick: false, keepInView: true, autoPanPaddingTopLeft: [0, 80], autoPanPaddingBottomRight: [0, 20] })
.setLatLng(pts[Math.floor(pts.length / 2)])
@@ -4326,11 +4344,13 @@
<span style="font-size:11px;color:#64748b;font-weight:600">Panjang terukur:</span>
<span style="font-size:14px;font-weight:800;color:#1d4ed8;margin-left:auto">${fmtLen(len)}</span>
</div>
<button class="pbtn pbtn-b" onclick="saveLine(${JSON.stringify(pts).replace(/"/g, "'")},${len})">Simpan Jalan</button>
<button class="pbtn pbtn-b" onclick="saveLine()">Simpan Jalan</button>
</div>`).addTo(map);
}
function saveLine(pts, len) {
function saveLine() {
const pts = window._tempLinePts || [];
const len = window._tempLineLen || 0;
const nama = document.getElementById('j-nama').value.trim();
const status = document.getElementById('j-status').value;
@@ -4382,6 +4402,8 @@
map.closePopup();
setMode(null);
ensureLayerVisible('jalan', jalan.id);
focusFeature('jalan', jalan.id);
} else {
@@ -4423,14 +4445,15 @@
<div class="pi">
<h4><i class="fas fa-road" style="color:${c}"></i>${d.nama}</h4>
<div class="pi-row">
<span class="pi-k">Status</span>
<span class="pi-v">${d.status}</span>
</div>
<div class="pi-row">
<span class="pi-k">Panjang</span>
<span class="pi-v">${fmtLen(d.len)}</span>
<div class="pi-body">
<div class="pi-row">
<span class="pi-k">Status</span>
<span class="pi-v">${d.status}</span>
</div>
<div class="pi-row">
<span class="pi-k">Panjang</span>
<span class="pi-v">${fmtLen(d.len)}</span>
</div>
</div>
<div class="act-row">
@@ -4549,9 +4572,11 @@
if (state.tempPoints.length < 3) { alert('Minimal 3 titik!'); return; }
const pts = [...state.tempPoints];
const area = calcArea(pts);
window._tempPolyPts = pts;
window._tempPolyArea = area;
clearTemp();
const center = L.polygon(pts).getBounds().getCenter();
L.popup({ closeOnClick: false, keepInView: true })
L.popup({ closeOnClick: false, keepInView: true, autoPanPaddingTopLeft: [0, 80], autoPanPaddingBottomRight: [0, 20] })
.setLatLng(center)
.setContent(`<div class="pf">
<h4><i class="fas fa-vector-square"></i> Tambah Parsil / Lahan</h4>
@@ -4571,11 +4596,13 @@
<span style="font-size:11px;color:#64748b;font-weight:600">Luas terukur:</span>
<span style="font-size:14px;font-weight:800;color:#d97706;margin-left:auto">${fmtArea(area)}</span>
</div>
<button class="pbtn pbtn-y" onclick="saveParsil(${JSON.stringify(pts).replace(/"/g, "'")},${area})">Simpan Parsil</button>
<button class="pbtn pbtn-y" onclick="saveParsil()">Simpan Parsil</button>
</div>`).addTo(map);
}
function saveParsil(pts, area) {
function saveParsil() {
const pts = window._tempPolyPts || [];
const area = window._tempPolyArea || 0;
const nama = document.getElementById('ps-nama').value.trim();
const pemilik = document.getElementById('ps-pemilik').value.trim();
@@ -4630,6 +4657,8 @@
map.closePopup();
setMode(null);
ensureLayerVisible('parsil', parsil.id);
focusFeature('parsil', parsil.id);
}
@@ -4666,19 +4695,19 @@
<div class="pi">
<h4><i class="fas fa-draw-polygon" style="color:${c}"></i>${d.nama}</h4>
<div class="pi-row">
<span class="pi-k">Pemilik</span>
<span class="pi-v">${d.pemilik || '-'}</span>
</div>
<div class="pi-row">
<span class="pi-k">Status</span>
<span class="pi-v">${d.status}</span>
</div>
<div class="pi-row">
<span class="pi-k">Luas</span>
<span class="pi-v">${fmtArea(d.area)}</span>
<div class="pi-body">
<div class="pi-row">
<span class="pi-k">Pemilik</span>
<span class="pi-v">${d.pemilik || '-'}</span>
</div>
<div class="pi-row">
<span class="pi-k">Status</span>
<span class="pi-v">${d.status}</span>
</div>
<div class="pi-row">
<span class="pi-k">Luas</span>
<span class="pi-v">${fmtArea(d.area)}</span>
</div>
</div>
<div class="act-row">
@@ -4929,7 +4958,7 @@
<button class="pbtn pbtn-y" onclick="saveEditSpbu(${id})">Simpan Perubahan</button>
</div>`;
map.closePopup();
L.popup({ maxWidth: 290 }).setLatLng([ll.lat, ll.lng]).setContent(html).openOn(map);
L.popup({ maxWidth: 290, autoPanPaddingTopLeft: [0, 80], autoPanPaddingBottomRight: [0, 20] }).setLatLng([ll.lat, ll.lng]).setContent(html).openOn(map);
}
function saveEditSpbu(id) {
@@ -4990,7 +5019,7 @@
<button class="pbtn pbtn-y" onclick="saveEditJalan(${id})">Simpan Perubahan</button>
</div>`;
map.closePopup();
L.popup({ maxWidth: 330 }).setLatLng(center).setContent(html).openOn(map);
L.popup({ maxWidth: 330, autoPanPaddingTopLeft: [0, 80], autoPanPaddingBottomRight: [0, 20] }).setLatLng(center).setContent(html).openOn(map);
}
function saveEditJalan(id) {
@@ -5057,7 +5086,7 @@
<button class="pbtn pbtn-y" onclick="saveEditParsil(${id})">Simpan Perubahan</button>
</div>`;
map.closePopup();
L.popup({ maxWidth: 330 }).setLatLng(center).setContent(html).openOn(map);
L.popup({ maxWidth: 330, autoPanPaddingTopLeft: [0, 80], autoPanPaddingBottomRight: [0, 20] }).setLatLng(center).setContent(html).openOn(map);
}
function saveEditParsil(id) {
@@ -5195,6 +5224,7 @@
const ref = state.featureRefs[type][String(id)];
if (!ref) return;
map.invalidateSize();
ensureLayerVisible(type, id);
setActiveCard(type, id);
@@ -5229,6 +5259,7 @@
focusFeature(type, id);
}
};
if (!c) { console.warn('addCard: container list-' + type + ' not found'); return; }
c.appendChild(el);
}
@@ -5623,6 +5654,8 @@
renderDashboard();
if (window._tmpM) { map.closePopup(); map.removeLayer(window._tmpM); window._tmpM = null; }
setMode(null);
ensureLayerVisible('jalan', jalan.id);
focusFeature('jalan', jalan.id);
} else {
alert("Gagal simpan: " + (response.message || 'Error'));
}
@@ -5764,7 +5797,7 @@
<button class="pbtn pbtn-y" onclick="saveEditKemiskinan(${id})">Simpan Perubahan</button>
</div>`;
map.closePopup();
L.popup({ maxWidth: 330 }).setLatLng([d.lat, d.lng]).setContent(html).openOn(map);
L.popup({ maxWidth: 330, autoPanPaddingTopLeft: [0, 80], autoPanPaddingBottomRight: [0, 20] }).setLatLng([d.lat, d.lng]).setContent(html).openOn(map);
}
function saveEditKemiskinan(id) {
@@ -6072,7 +6105,7 @@
</div>`;
map.closePopup();
L.popup({ maxWidth: 340 }).setLatLng([d.lat, d.lng]).setContent(html).openOn(map);
L.popup({ maxWidth: 340, autoPanPaddingTopLeft: [0, 80], autoPanPaddingBottomRight: [0, 20] }).setLatLng([d.lat, d.lng]).setContent(html).openOn(map);
}
function saveEditMasjid(id) {