ocabacaa
306 lines
8.3 KiB
PHP
306 lines
8.3 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw/dist/leaflet.draw.css" />
|
|
|
|
<style>
|
|
#map {
|
|
height: 100vh;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="flex h-screen">
|
|
|
|
<div class="flex-1 relative">
|
|
|
|
<div style="
|
|
position:absolute;
|
|
top:15px;
|
|
left:60px;
|
|
z-index:9999;
|
|
background:white;
|
|
padding:10px;
|
|
border-radius:8px;
|
|
box-shadow:0 2px 8px rgba(0,0,0,.2);
|
|
">
|
|
|
|
<div style="margin-bottom:10px;">
|
|
|
|
<h1 style="
|
|
font-size:24px;
|
|
font-weight:bold;
|
|
color:#2563eb;
|
|
margin:0;
|
|
">
|
|
Dashboard WebGIS SPBU
|
|
</h1>
|
|
|
|
<p style="
|
|
margin:0;
|
|
color:#666;
|
|
font-size:14px;
|
|
">
|
|
Sistem Informasi Geografis Pemetaan dan Pencarian Lokasi SPBU
|
|
</p>
|
|
|
|
<p style="
|
|
margin:3px 0 0 0;
|
|
color:#999;
|
|
font-size:12px;
|
|
">
|
|
Clara Oxana Azalia | D1041231051
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<!-- toolbar -->
|
|
<div class="flex gap-2">
|
|
|
|
<input type="text" id="search_spbu" placeholder="Cari SPBU..." class="border p-2 rounded">
|
|
|
|
<button onclick="cariSPBU()" class="bg-blue-500 text-white px-3 rounded">
|
|
Cari
|
|
</button>
|
|
|
|
<button onclick="lokasiSaya()" class="bg-green-500 text-white px-3 rounded">
|
|
Lokasi Saya
|
|
</button>
|
|
|
|
<button onclick="cariTerdekat()" class="bg-red-500 text-white px-3 rounded">
|
|
SPBU Terdekat
|
|
</button>
|
|
|
|
<button onclick="buatRuteTerdekat()" class="bg-purple-500 text-white px-3 rounded">
|
|
|
|
Rute
|
|
|
|
</button>
|
|
|
|
<select id="filter_spbu" onchange="filterSPBU()" class="border p-2 rounded">
|
|
|
|
<option value="all">
|
|
Semua SPBU
|
|
</option>
|
|
|
|
<option value="24">
|
|
SPBU 24 Jam
|
|
</option>
|
|
|
|
<option value="non24">
|
|
Non 24 Jam
|
|
</option>
|
|
|
|
<option value="buka">
|
|
Sedang Buka
|
|
</option>
|
|
|
|
<option value="tutup">
|
|
Sedang Tutup
|
|
</option>
|
|
|
|
</select>
|
|
|
|
<button onclick="toggleMode()" id="btnMode" class="bg-blue-600 text-white px-3 rounded">
|
|
|
|
Ganti Mode
|
|
|
|
</button>
|
|
<span id="statusMode" class="bg-blue-100 text-blue-700 px-3 py-2 rounded font-semibold">
|
|
|
|
🔓 ADMIN
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div style="
|
|
position:absolute;
|
|
bottom:20px;
|
|
left:20px;
|
|
z-index:9999;
|
|
background:white;
|
|
padding:12px;
|
|
border-radius:8px;
|
|
box-shadow:0 2px 8px rgba(0,0,0,.2);
|
|
">
|
|
|
|
<h3 class="font-bold mb-2">
|
|
Keterangan
|
|
</h3>
|
|
|
|
<div class="flex items-center gap-2 mb-1">
|
|
|
|
<span class="w-4 h-4 bg-green-500 rounded-full"></span>
|
|
|
|
SPBU 24 Jam
|
|
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
|
|
<span class="w-4 h-4 bg-red-500 rounded-full"></span>
|
|
|
|
SPBU Non 24 Jam
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="bannerMode" class="hidden" style="
|
|
position:absolute;
|
|
top:120px;
|
|
left:50%;
|
|
transform:translateX(-50%);
|
|
z-index:99999;
|
|
">
|
|
|
|
</div>
|
|
|
|
<div id="map" class="h-full"></div>
|
|
|
|
</div>
|
|
|
|
<!-- edit -->
|
|
<div id="sidebar" class="w-96 bg-white shadow-lg p-5 hidden overflow-y-auto">
|
|
|
|
<h2 class="text-xl font-bold mb-4">
|
|
Edit SPBU
|
|
</h2>
|
|
|
|
<input type="hidden" id="edit_id">
|
|
|
|
<label class="block mb-1">
|
|
Nama SPBU
|
|
</label>
|
|
|
|
<input id="edit_nama" class="w-full border p-2 rounded mb-3">
|
|
|
|
<label class="block mb-1">
|
|
Alamat
|
|
</label>
|
|
|
|
<textarea id="edit_alamat" class="w-full border p-2 rounded mb-3"></textarea>
|
|
|
|
<label class="block mb-1">
|
|
Foto SPBU
|
|
</label>
|
|
|
|
<img id="preview_edit_foto" src="" class="w-full h-40 object-cover rounded mb-2 hidden">
|
|
|
|
<input type="file" id="edit_foto" class="w-full border p-2 rounded mb-3">
|
|
|
|
<label class="block mb-1">
|
|
Jam Buka
|
|
</label>
|
|
|
|
<input type="time" id="edit_jam_buka" class="w-full border p-2 rounded mb-3">
|
|
|
|
<label class="block mb-1">
|
|
Jam Tutup
|
|
</label>
|
|
|
|
<input type="time" id="edit_jam_tutup" class="w-full border p-2 rounded mb-3">
|
|
|
|
<label class="flex items-center gap-2 mb-3">
|
|
|
|
<input type="checkbox" id="edit_24jam">
|
|
|
|
Buka 24 Jam
|
|
|
|
</label>
|
|
|
|
<label class="block mb-1">
|
|
Latitude
|
|
</label>
|
|
|
|
<input id="edit_lat" class="w-full border p-2 rounded mb-3">
|
|
|
|
<label class="block mb-1">
|
|
Longitude
|
|
</label>
|
|
|
|
<input id="edit_lng" class="w-full border p-2 rounded mb-3">
|
|
|
|
<div class="flex gap-2">
|
|
|
|
<button onclick="updateSPBU()" class="bg-blue-500 text-white px-4 py-2 rounded">
|
|
|
|
Simpan
|
|
</button>
|
|
|
|
<button onclick="tutupSidebar()" class="bg-gray-500 text-white px-4 py-2 rounded">
|
|
|
|
Tutup
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div id="sidebarObjek" class="w-96 bg-white shadow-lg p-5 hidden overflow-y-auto">
|
|
|
|
<h2 class="text-xl font-bold mb-4">
|
|
Edit Objek Peta
|
|
</h2>
|
|
|
|
<input type="hidden" id="objek_id">
|
|
|
|
<label class="block mb-1">
|
|
Nama Objek
|
|
</label>
|
|
|
|
<input id="objek_nama" class="w-full border p-2 rounded mb-3">
|
|
|
|
<label class="block mb-1">
|
|
Deskripsi
|
|
</label>
|
|
|
|
<textarea id="objek_deskripsi" class="w-full border p-2 rounded mb-3"></textarea>
|
|
|
|
<label class="block mb-1">
|
|
Tipe
|
|
</label>
|
|
|
|
<input id="objek_tipe" readonly class="w-full border p-2 rounded mb-3 bg-gray-100">
|
|
|
|
<div class="flex gap-2">
|
|
|
|
<button onclick="updateObjek()" class="bg-blue-500 text-white px-4 py-2 rounded">
|
|
|
|
Simpan
|
|
|
|
</button>
|
|
|
|
<button onclick="tutupSidebarObjek()" class="bg-gray-500 text-white px-4 py-2 rounded">
|
|
|
|
Tutup
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
|
|
|
<script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
|
|
|
|
<script src="https://unpkg.com/leaflet-draw/dist/leaflet.draw.js"></script>
|
|
|
|
<script src="assets/js/map.js"></script>
|
|
</body>
|
|
|
|
</html> |