GuavaPopper
92d7d8a9de
- Title and brand: WebGIS Manager → GeoAset - Move Lapor via Foto EXIF to navbar, rename to Laporkan Jalan Rusak - Simplify floating info bar (instruction text only) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
213 lines
10 KiB
PHP
213 lines
10 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>GeoAset</title>
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<!-- FontAwesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<!-- Leaflet CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="assets/css/style.css?v=<?php echo time(); ?>">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Top Navbar -->
|
|
<nav class="navbar">
|
|
<div class="nav-brand">
|
|
<i class="fa-solid fa-map-location-dot"></i> GeoAset
|
|
</div>
|
|
<div class="nav-menu">
|
|
<button class="nav-btn active" id="btn-tab-input" onclick="switchView('input')">
|
|
<i class="fa-solid fa-pen-to-square"></i> Input Data
|
|
</button>
|
|
<button class="nav-btn" id="btn-tab-data" onclick="switchView('data')">
|
|
<i class="fa-solid fa-list"></i> Lihat Data
|
|
</button>
|
|
<button class="btn-exif" onclick="document.getElementById('auto-upload-exif').click()">
|
|
<i class="fa-solid fa-camera"></i> Laporkan Jalan Rusak
|
|
</button>
|
|
<input type="file" id="auto-upload-exif" style="display:none;" accept="image/jpeg, image/png, image/jpg">
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- VIEW 1: Input Data (Fullscreen Map) -->
|
|
<main id="view-input" class="view-active">
|
|
<div id="map"></div>
|
|
|
|
<!-- Floating Info Bar -->
|
|
<div class="floating-info">
|
|
<i class="fa-solid fa-circle-info"></i> Gunakan Toolbar di kiri peta untuk menggambar (Jalan/Parsil/Titik).
|
|
</div>
|
|
|
|
<!-- Float Legend Input -->
|
|
<div class="floating-legend">
|
|
<h4>Legenda</h4>
|
|
<div class="legend-grid">
|
|
<div><span style="background:#ef4444"></span> Jalan Nasional</div>
|
|
<div><span style="background:#f97316"></span> Jalan Provinsi</div>
|
|
<div><span style="background:#eab308"></span> Jalan Kabupaten</div>
|
|
<div><span style="background:#22c55e"></span> Sertifikat Hak Milik (SHM)</div>
|
|
<div><span style="background:#3b82f6"></span> Sertifikat Hak Guna Bangunan (HGB)</div>
|
|
<div><span style="background:#a855f7"></span> Sertifikat Hak Guna Usaha (HGU)</div>
|
|
<div><span style="background:#06b6d4"></span> Sertifikat Hak Pakai (HP)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modern Modal for Data Input/Edit -->
|
|
<div id="modal-form" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 id="modal-title">Form Data</h3>
|
|
<button class="close-btn" onclick="closeModal()"><i class="fa-solid fa-xmark"></i></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="main-form" enctype="multipart/form-data">
|
|
<input type="hidden" id="form-type">
|
|
<input type="hidden" id="data-id">
|
|
<input type="hidden" id="data-geojson">
|
|
|
|
<div class="form-group">
|
|
<label id="label-nama">Nama</label>
|
|
<input type="text" id="data-nama" required placeholder="Masukkan nama...">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Status</label>
|
|
<select id="data-status" required>
|
|
<!-- Injected via JS based on type -->
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group" id="field-foto" style="display:none;">
|
|
<label for="data-foto">Foto Kerusakan (.jpg, .png)</label>
|
|
<input type="file" id="data-foto" class="form-control" accept="image/*">
|
|
<input type="hidden" id="data-existing-foto">
|
|
<div id="foto-preview" style="margin-top:10px; text-align:center;"></div>
|
|
</div>
|
|
|
|
<div class="form-group" id="field-metric">
|
|
<label id="label-metric">Dimensi (Otomatis)</label>
|
|
<input type="number" step="0.01" id="data-metric" readonly required>
|
|
<small class="text-muted" id="metric-helper">Terisi otomatis dari gambar peta.</small>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-primary" style="flex:1"><i class="fa-solid fa-save"></i> Simpan</button>
|
|
<button type="button" class="btn btn-danger" id="btn-delete" style="display:none; flex:1" onclick="deleteFromModal()"><i class="fa-solid fa-trash"></i> Hapus</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- VIEW 2: Lihat Data (Dashboard) -->
|
|
<main id="view-data" class="view-hidden">
|
|
<div class="dashboard-container">
|
|
|
|
<div class="dashboard-header">
|
|
<h2><i class="fa-solid fa-chart-simple"></i> Dashboard Data</h2>
|
|
<p>Ringkasan dan daftar seluruh entri jalan dan parsil tanah yang tersimpan di sistem.</p>
|
|
</div>
|
|
|
|
<!-- Stats Row -->
|
|
<div class="stats-row">
|
|
<div class="stat-card stat-card--jalan">
|
|
<div class="stat-info">
|
|
<h3>Total Jalan</h3>
|
|
<h2 id="stat-jalan">0</h2>
|
|
</div>
|
|
<div class="stat-icon" style="color: var(--primary); background: var(--primary-light);">
|
|
<i class="fa-solid fa-road"></i>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card stat-card--parsil">
|
|
<div class="stat-info">
|
|
<h3>Total Parsil Tanah</h3>
|
|
<h2 id="stat-parsil">0</h2>
|
|
</div>
|
|
<div class="stat-icon" style="color: var(--secondary); background: var(--secondary-light);">
|
|
<i class="fa-solid fa-map"></i>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card stat-card--titik">
|
|
<div class="stat-info">
|
|
<h3>Total Jalan Rusak</h3>
|
|
<h2 id="stat-titik">0</h2>
|
|
</div>
|
|
<div class="stat-icon" style="color: var(--tertiary); background: #FEF9C3;">
|
|
<i class="fa-solid fa-triangle-exclamation"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Split Row -->
|
|
<div class="content-row">
|
|
<!-- Left: Table Area -->
|
|
<div class="table-card">
|
|
<div class="table-header">
|
|
<div class="table-tabs">
|
|
<button class="tab-btn active" id="tab-jalan" onclick="switchTableTab('jalan')">
|
|
<i class="fa-solid fa-road"></i> Data Jalan
|
|
</button>
|
|
<button class="tab-btn" id="tab-parsil" onclick="switchTableTab('parsil')">
|
|
<i class="fa-solid fa-map"></i> Data Parsil
|
|
</button>
|
|
<button class="tab-btn" id="tab-titik" onclick="switchTableTab('titik')">
|
|
<i class="fa-solid fa-triangle-exclamation"></i> Kerusakan
|
|
</button>
|
|
</div>
|
|
<div class="search-box">
|
|
<i class="fa-solid fa-magnifying-glass"></i>
|
|
<input type="text" id="search-input" placeholder="Cari nama...">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-wrapper">
|
|
<table id="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Nama</th>
|
|
<th>Status</th>
|
|
<th id="th-metric">Dimensi</th>
|
|
<th>Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="table-body">
|
|
<!-- Rendered via JS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Mini Map -->
|
|
<div class="minimap-card">
|
|
<div class="minimap-header">
|
|
<i class="fa-solid fa-location-crosshairs"></i> Pratinjau Peta
|
|
</div>
|
|
<div id="minimap"></div>
|
|
<div class="minimap-footer">
|
|
Klik baris tabel di samping untuk melihat lokasi pada peta ini.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/leaflet-path-drag/dist/L.Path.Drag.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
|
|
<script src="assets/js/app.js"></script>
|
|
</body>
|
|
</html>
|