muthianura
150 lines
6.7 KiB
PHP
150 lines
6.7 KiB
PHP
<?php
|
|
include 'db.php';
|
|
require_once 'includes/stats.php';
|
|
$stats = spbu_stats($conn);
|
|
$activePage = 'tambah';
|
|
$err = isset($_GET['err']) ? $_GET['err'] : '';
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Tambah SPBU — Sistem Informasi Geografis SPBU</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
|
|
<link rel="stylesheet" href="assets/spbu.css?v=1.2"/>
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<?php include 'includes/sidebar.php'; ?>
|
|
<div class="sb-body">
|
|
<form class="form-panel" id="form-spbu" method="POST" action="api.php">
|
|
<h3>Input Data SPBU</h3>
|
|
<p class="form-desc">Klik titik pada peta untuk menentukan koordinat, lalu lengkapi formulir di bawah.</p>
|
|
<?php if ($err): ?><div class="form-alert"><?= htmlspecialchars($err) ?></div><?php endif ?>
|
|
|
|
<div class="form-group">
|
|
<label for="nama">Nama SPBU</label>
|
|
<input type="text" id="nama" name="nama" placeholder="Contoh: SPBU Kota Baru" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="nomor">Nomor Depot</label>
|
|
<input type="text" id="nomor" name="nomor" placeholder="Contoh: 34.123.45" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="status">Jam Operasional</label>
|
|
<select id="status" name="status">
|
|
<option value="24 Jam">Buka 24 Jam</option>
|
|
<option value="Tidak 24 Jam">Tidak 24 Jam</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Koordinat Lokasi</label>
|
|
<div class="coord-box">
|
|
<input type="text" id="lat-display" placeholder="Latitude" readonly>
|
|
<input type="text" id="lng-display" placeholder="Longitude" readonly>
|
|
</div>
|
|
<input type="hidden" name="lat" id="lat" required>
|
|
<input type="hidden" name="lng" id="lng" required>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="button" class="btn-secondary" onclick="resetForm()">Reset</button>
|
|
<button type="submit" name="save" class="btn-primary" id="btn-save" disabled>Simpan Data</button>
|
|
</div>
|
|
|
|
<div class="form-hint" id="form-hint">Belum ada lokasi dipilih — klik peta di sebelah kanan</div>
|
|
</form>
|
|
</div>
|
|
<div class="sb-foot" style="flex-direction:column; gap:10px">
|
|
<div style="display:flex; justify-content:space-between; width:100%">
|
|
<span>Operasional 24 jam: <b><?= $stats['pct24'] ?>%</b></span>
|
|
<span><?= date('d M Y') ?></span>
|
|
</div>
|
|
<a href="../index.php" class="btn-portal" style="display:flex; align-items:center; justify-content:center; gap:6px; padding:10px; background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; border-radius:8px; font-weight:600; text-decoration:none; font-size:12px; transition:all 0.15s; width:100%">
|
|
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
|
Kembali ke Portal
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
|
|
<div id="map-area">
|
|
<!-- Topbar -->
|
|
<div id="topbar" style="position:relative; z-index:1000; height:56px; background:#fff; border-bottom:1px solid #e2e8f0; display:flex; align-items:center; justify-content:space-between; padding:0 16px; flex-shrink:0">
|
|
<div style="display:flex; align-items:center; gap:8px">
|
|
<div style="font-size:15px; font-weight:700; color:#1e293b">Tambah Baru <span style="font-size:13px; font-weight:500; color:#64748b; margin-left:4px">Lokasi Depot SPBU</span></div>
|
|
</div>
|
|
<div style="display:flex; gap:8px">
|
|
<a href="index.php" style="display:flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid #cbd5e1; color:#475569; border-radius:8px; font-size:12px; font-weight:600; text-decoration:none; background:#fff">
|
|
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></svg>
|
|
Lihat Peta
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="map"></div>
|
|
<?php include 'includes/map-controls.php'; ?>
|
|
<div id="map-hint" style="display:block">Klik peta untuk menandai lokasi SPBU</div>
|
|
</div>
|
|
|
|
<div id="toast"></div>
|
|
<script src="assets/map-base.js"></script>
|
|
<script>
|
|
var map = L.map('map', { zoomControl: false }).setView([-0.0263, 109.3425], 13);
|
|
L.control.zoom({ position: 'bottomright' }).addTo(map);
|
|
initBaseLayers(map);
|
|
|
|
var newMarker = null;
|
|
var newIcon = makeSpbuIcon('#3b82f6', 22);
|
|
var hintEl = document.getElementById('form-hint');
|
|
var btnSave = document.getElementById('btn-save');
|
|
|
|
<?php
|
|
$existing = $conn->query("SELECT * FROM tempat");
|
|
while ($row = $existing->fetch_assoc()):
|
|
$nama = addslashes($row['nama_tempat']); $nomor = addslashes($row['nomor_tempat']);
|
|
$status = addslashes($row['status']);
|
|
$color = ($row['status'] === '24 Jam') ? '#22c55e' : '#ef4444';
|
|
$badge = ($row['status'] === '24 Jam') ? 'badge-green' : 'badge-red';
|
|
?>
|
|
L.marker([<?= $row['latitude'] ?>, <?= $row['longitude'] ?>], { icon: makeSpbuIcon('<?= $color ?>') })
|
|
.addTo(map).bindPopup(
|
|
'<div class="popup-wrap"><div class="popup-title"><?= $nama ?></div>' +
|
|
'<div class="popup-row">Depot No. <?= $nomor ?></div>' +
|
|
'<span class="popup-badge <?= $badge ?>"><?= $status ?></span></div>'
|
|
);
|
|
<?php endwhile; ?>
|
|
|
|
function setCoords(lat, lng) {
|
|
document.getElementById('lat').value = lat.toFixed(6);
|
|
document.getElementById('lng').value = lng.toFixed(6);
|
|
document.getElementById('lat-display').value = lat.toFixed(6);
|
|
document.getElementById('lng-display').value = lng.toFixed(6);
|
|
btnSave.disabled = false;
|
|
hintEl.textContent = 'Lokasi terpilih — lengkapi data lalu simpan';
|
|
hintEl.classList.add('active');
|
|
}
|
|
|
|
function resetForm() {
|
|
document.getElementById('form-spbu').reset();
|
|
document.getElementById('lat').value = '';
|
|
document.getElementById('lng').value = '';
|
|
document.getElementById('lat-display').value = '';
|
|
document.getElementById('lng-display').value = '';
|
|
btnSave.disabled = true;
|
|
hintEl.textContent = 'Belum ada lokasi dipilih — klik peta di sebelah kanan';
|
|
hintEl.classList.remove('active');
|
|
if (newMarker) { map.removeLayer(newMarker); newMarker = null; }
|
|
}
|
|
|
|
map.on('click', function(e) {
|
|
if (newMarker) map.removeLayer(newMarker);
|
|
newMarker = L.marker(e.latlng, { icon: newIcon }).addTo(map);
|
|
setCoords(e.latlng.lat, e.latlng.lng);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|