Initial commit - Portal WebGIS Terpadu
This commit is contained in:
ocabacaa
@@ -0,0 +1,306 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user