Radit_Arahman_Putra23/UasSIGWebgis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6d0b24d2fe1d6372011e584cbe0cbddd73a027c9
UasSIGWebgis/infra/index.php
T
raditarahman5-cloud 6d0b24d2fe first commit UasSIGWebgis
2026-06-09 18:19:10 +07:00

134 lines
7.6 KiB
PHP
Raw Blame History

<?php
session_start();
require_once '../api/db.php';
?>
<!DOCTYPE html>
<html>
<head>
<title>WebGIS Poverty Mapping - Dashboard Infrastruktur</title>
<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"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"/>
<link rel="stylesheet" href="style.css"/>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
<button class="menu-toggle" onclick="toggleSidebar()" title="Buka Dashboard Eksekutif"><i class="fas fa-bars"></i></button>
<button onclick="window.location.href='../portal/index.php'" style="position: absolute; top: 15px; left: 65px; z-index: 1200; background: white; color: var(--primary); border: 2px solid var(--primary); padding: 10px 20px; border-radius: 30px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.1); font-size: 0.9rem; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px;" onmouseover="this.style.background='var(--primary)'; this.style.color='white';" onmouseout="this.style.background='white'; this.style.color='var(--primary)';">
<i class="fas fa-arrow-left"></i> Kembali ke Dashboard
</button>
<button class="menu-toggle" style="left: auto; right: 20px; background: var(--primary);" onclick="toggleRightPanel()" title="Buka Form Input">
<i class="fas fa-pen"></i>
</button>
<div class="search-container">
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" id="searchInput" placeholder="Cari data GIS..." onkeyup="filterData()">
</div>
</div>
<div id="sidebar">
<div class="sidebar-header">
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
<div>
<h3><i class="fas fa-road"></i> Peta Infrastruktur</h3>
<small><i class="fas fa-hard-hat"></i> Dashboard Admin Infra</small>
</div>
<div style="display: flex; gap: 8px;">
<a href="../portal/index.php" title="Kembali ke Portal Utama" style="color: #fff; background: rgba(255,255,255,0.2); padding: 8px 12px; border-radius: 8px; text-decoration: none; font-size: 0.9rem; transition: 0.3s;" onmouseover="this.style.background='rgba(59, 130, 246, 0.8)'" onmouseout="this.style.background='rgba(255,255,255,0.2)'">
<i class="fas fa-home"></i>
</a>
<a href="#" id="notifBell" title="Notifikasi Laporan Warga" style="position: relative; color: #fff; background: rgba(255,255,255,0.2); padding: 8px 12px; border-radius: 8px; text-decoration: none; font-size: 0.9rem; transition: 0.3s;" onclick="toggleSidebar()">
<i class="fas fa-bell"></i>
<span id="notifBadge" style="display: none; position: absolute; top: -5px; right: -5px; background: #ef4444; color: white; border-radius: 50%; padding: 2px 6px; font-size: 0.6rem; font-weight: bold; border: 2px solid #1e293b; animation: bounce 1s infinite;">0</span>
</a>
<a href="../portal/logout.php" title="Logout" style="color: #fff; background: rgba(255,255,255,0.2); padding: 8px 12px; border-radius: 8px; text-decoration: none; font-size: 0.9rem; transition: 0.3s;" onmouseover="this.style.background='rgba(239, 68, 68, 0.8)'" onmouseout="this.style.background='rgba(255,255,255,0.2)'">
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</div>
</div>
<div class="sidebar-content" id="sidebarContent">
<!-- Dirender secara dinamis oleh script.js -->
<small>Memuat data...</small>
</div>
</div>
<div id="map"></div>
<div class="panel-input" id="panelInput">
<div style="display:flex; justify-content:space-between; align-items:center; border-bottom: 2px solid var(--border); padding-bottom: 10px; margin-bottom: 15px;">
<h4 style="margin:0; border:none; padding:0; font-size:1.1rem; color:var(--dark);">Form Input & Laporan</h4>
<button onclick="toggleRightPanel()" style="background:none; border:none; cursor:pointer; font-size:1.2rem; color:#94a3b8; transition:0.2s;" onmouseover="this.style.color='#ef4444'" onmouseout="this.style.color='#94a3b8'"><i class="fas fa-times"></i></button>
</div>
<div class="radius-box" style="display:none;">
<label>📡 Radius Jangkauan / Bantuan: <span id="radiusVal">500</span>m</label>
<input type="range" id="radiusRange" min="100" max="5000" value="500" step="100" oninput="changeRadius(this.value)">
</div>
<select id="jenis" onchange="toggleForm()">
<option value="spbu">⛽ SPBU (Bahan Bakar)</option>
<option value="jalan">🛣️ Jalan (Polyline)</option>
<option value="parsil">🟩 Parsil Tanah (Polygon)</option>
</select>
<!-- FORM SPBU -->
<div id="form_spbu">
<input type="text" id="nama_spbu" placeholder="Nama SPBU (Misal: SPBU Ahmad Yani)">
<input type="text" id="no_hp_spbu" placeholder="Nomor Handphone SPBU">
<select id="kategori_spbu">
<option value="">- Pilih Kategori SPBU -</option>
<option value="24jam">Buka 24 Jam</option>
<option value="Tidak 24jam">Tidak 24 Jam</option>
</select>
</div>
<!-- FORM JALAN -->
<div id="form_jalan" class="hidden">
<p style="font-size:0.7rem; color:red">*Gunakan tool Gambar Polyline di peta terlebih dahulu</p>
<input type="text" id="nama_jalan" placeholder="Nama Jalan">
<select id="status_jalan">
<option value="">- Pilih Status Jalan -</option>
<option value="Nasional">Jalan Nasional (Merah)</option>
<option value="Provinsi">Jalan Provinsi (Kuning)</option>
<option value="Kabupaten">Jalan Kabupaten (Hijau)</option>
</select>
<label style="font-size:0.75rem; color:#666;">Panjang Jalan (Otomatis Leaflet):</label>
<input type="text" id="panjang_jalan" readonly style="background:#f0f0f0">
<input type="hidden" id="jalan_coords">
</div>
<!-- FORM PARSIL -->
<div id="form_parsil" class="hidden">
<p style="font-size:0.7rem; color:red">*Gunakan tool Gambar Polygon di peta terlebih dahulu</p>
<input type="text" id="nama_pemilik" placeholder="Nama Pemilik Tanah">
<select id="status_hak">
<option value="">- Pilih Status Kepemilikan -</option>
<option value="SHM">Sertifikat Hak Milik (SHM)</option>
<option value="HGB">Sertifikat Hak Guna Bangunan (HGB)</option>
<option value="HGU">Sertifikat Hak Guna Usaha (HGU)</option>
<option value="HP">Sertifikat Hak Pakai (HP)</option>
</select>
<input type="hidden" id="parsil_coords">
</div>
<input type="hidden" id="lat"><input type="hidden" id="lng"><input type="hidden" id="edit_id" value="0">
<div style="display:flex; gap:10px;">
<button class="btn-save" id="btnSimpanUtama" onclick="simpanData()" style="flex:1;">Simpan Data</button>
<button class="btn-del" id="btnBatalEdit" onclick="batalEdit()" style="display:none; padding:14px; border-radius:10px; font-weight:700;">Batal</button>
</div>
</div>
<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>
// Penanda untuk script.js agar tahu konteks dashboard
window.dashboardType = 'infra';
</script>
<script src="script.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink