244 lines
14 KiB
JavaScript
244 lines
14 KiB
JavaScript
// ═══════════════════════════════════════════════════════════════════
|
|
// INTEGRATION PAGE — Infographics for OSMAP, OSPRO, and OSLOG
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
|
|
let _integrationInterval = null;
|
|
|
|
function renderIntegrationPage() {
|
|
const container = document.getElementById('integration-body');
|
|
|
|
container.innerHTML = `
|
|
<div class="scroll-area">
|
|
<!-- Intro Section -->
|
|
<div class="card card-p mb-4" style="background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, transparent 100%);">
|
|
<div style="font-size:18px; font-weight:700; color:var(--text-1); margin-bottom:6px;">Ekosistem Monitoring KSP</div>
|
|
<div style="font-size:13px; color:var(--text-2); line-height:1.6; max-width:760px;">
|
|
Sistem Pengawasan Nasional Kantor Staf Presiden didukung oleh tiga platform modular utama yang saling terintegrasi:
|
|
<strong>OSMAP</strong> untuk analisis spasial dan pemetaan,
|
|
<strong>OSPRO</strong> untuk manajemen survei lapangan dan eskalasi, serta
|
|
<strong>OSLOG</strong> untuk pelacakan distribusi logistik dan pergerakan personel.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3-Platform Grid -->
|
|
<div style="display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-bottom:20px;">
|
|
|
|
<!-- OSMAP Card -->
|
|
<div class="card card-p" style="display:flex; flex-direction:column; justify-content:space-between; border-top:3px solid var(--blue);">
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<span style="font-size:24px;">🌐</span>
|
|
<div>
|
|
<div style="font-size:14px; font-weight:700; color:var(--text-1);">OSMAP</div>
|
|
<div style="font-size:10px; color:var(--blue); font-weight:600; text-transform:uppercase;">Map Engine & GIS</div>
|
|
</div>
|
|
</div>
|
|
<div style="font-size:12px; color:var(--text-3); line-height:1.5; margin-bottom:12px;">
|
|
Engine pemetaan wilayah untuk memvisualisasikan cakupan sebaran program strategis, heatmap laporan issue, dan data batas administratif secara nasional.
|
|
</div>
|
|
|
|
<div class="divider" style="margin:10px 0;"></div>
|
|
|
|
<div style="font-size:11px; font-weight:700; color:var(--text-3); text-transform:uppercase; margin-bottom:8px; letter-spacing:0.5px;">Layer Terpasang</div>
|
|
<div style="display:flex; flex-direction:column; gap:6px;">
|
|
<div class="flex items-center justify-between text-xs">
|
|
<span class="text-secondary">🗺️ Map Tiles (CartoDB Dark)</span>
|
|
<span style="color:var(--green); font-weight:600;">✓ Aktif</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs">
|
|
<span class="text-secondary">📍 Titik Program (GeoJSON)</span>
|
|
<span style="color:var(--green); font-weight:600;">✓ Sinkron</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs">
|
|
<span class="text-secondary">🔴 Heatmap Wilayah Kritis</span>
|
|
<span style="color:var(--green); font-weight:600;">✓ Aktif</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:16px;">
|
|
<button class="btn btn-secondary btn-xs w-full" onclick="navigateTo('dashboard')">Lihat Peta Dashboard</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- OSPRO Card -->
|
|
<div class="card card-p" style="display:flex; flex-direction:column; justify-content:space-between; border-top:3px solid var(--purple);">
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<span style="font-size:24px;">⚡</span>
|
|
<div>
|
|
<div style="font-size:14px; font-weight:700; color:var(--text-1);">OSPRO</div>
|
|
<div style="font-size:10px; color:var(--purple); font-weight:600; text-transform:uppercase;">Task & Survey Engine</div>
|
|
</div>
|
|
</div>
|
|
<div style="font-size:12px; color:var(--text-3); line-height:1.5; margin-bottom:12px;">
|
|
Sistem penugasan tim lapangan secara terstruktur dari deteksi anomali hingga pelaporan rekomendasi survei di lokasi bermasalah.
|
|
</div>
|
|
|
|
<div class="divider" style="margin:10px 0;"></div>
|
|
|
|
<div style="font-size:11px; font-weight:700; color:var(--text-3); text-transform:uppercase; margin-bottom:8px; letter-spacing:0.5px;">Statistik Tugas</div>
|
|
<div style="display:grid; grid-template-columns:1fr 1fr; gap:8px;">
|
|
<div class="card card-p-sm text-center" style="background:var(--bg);">
|
|
<div style="font-size:16px; font-weight:800; color:var(--purple);" id="ospro-active-tasks">0</div>
|
|
<div style="font-size:9px; color:var(--text-3);">Tugas Aktif</div>
|
|
</div>
|
|
<div class="card card-p-sm text-center" style="background:var(--bg);">
|
|
<div style="font-size:16px; font-weight:800; color:var(--green);" id="ospro-verified-tasks">0</div>
|
|
<div style="font-size:9px; color:var(--text-3);">Tugas Selesai</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:16px;">
|
|
<button class="btn btn-secondary btn-xs w-full" onclick="navigateTo('survey')">Lihat Survey Lapangan</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- OSLOG Card -->
|
|
<div class="card card-p" style="display:flex; flex-direction:column; justify-content:space-between; border-top:3px solid var(--orange);">
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<span style="font-size:24px;">🚚</span>
|
|
<div>
|
|
<div style="font-size:14px; font-weight:700; color:var(--text-1);">OSLOG</div>
|
|
<div style="font-size:10px; color:var(--orange); font-weight:600; text-transform:uppercase;">Tracking & Logistics</div>
|
|
</div>
|
|
</div>
|
|
<div style="font-size:12px; color:var(--text-3); line-height:1.5; margin-bottom:12px;">
|
|
Solusi pelacakan real-time untuk logistik program (distribusi menu MBG) dan lokasi terkini GPS petugas survei yang sedang berjalan.
|
|
</div>
|
|
|
|
<div class="divider" style="margin:10px 0;"></div>
|
|
|
|
<div style="font-size:11px; font-weight:700; color:var(--text-3); text-transform:uppercase; margin-bottom:8px; letter-spacing:0.5px;">Pelacakan Aktif</div>
|
|
<div style="display:flex; flex-direction:column; gap:6px;">
|
|
<div class="flex items-center justify-between text-xs">
|
|
<span class="text-secondary">📦 Pengiriman MBG Aktif</span>
|
|
<span style="color:var(--orange); font-weight:700;">14 Armada</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs">
|
|
<span class="text-secondary">👤 GPS Surveyor Aktif</span>
|
|
<span style="color:var(--blue); font-weight:700;">8 Personel</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:16px;">
|
|
<button class="btn btn-secondary btn-xs w-full" onclick="showToast('OSLOG Integration','Data GPS terhubung ke Core Map Engine KSP','info')">Cek Konektivitas GPS</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Infographic & Timeline Flow OSPRO -->
|
|
<div class="card card-p mb-4">
|
|
<div style="font-size:13px; font-weight:600; color:var(--text-1); margin-bottom:16px;">📋 Alur Penugasan OSPRO (Survey & Escalation Timeline)</div>
|
|
|
|
<div style="display:flex; align-items:center; justify-content:space-between; position:relative; overflow-x:auto; padding:12px 0;">
|
|
<!-- Progress background line -->
|
|
<div style="position:absolute; top:36px; left:5%; right:5%; height:2px; background:var(--border); z-index:1;"></div>
|
|
|
|
<!-- Step 1 -->
|
|
<div style="text-align:center; width:22%; position:relative; z-index:2;">
|
|
<div style="width:48px; height:48px; border-radius:50%; background:var(--red-soft); border:2px solid var(--red); color:var(--red); display:flex; align-items:center; justify-content:center; margin:0 auto 10px; font-size:18px;">⚠️</div>
|
|
<div style="font-size:12px; font-weight:700; color:var(--text-1);">1. Deteksi Issue</div>
|
|
<div style="font-size:10px; color:var(--text-3); margin-top:2px;">Anomali terdeteksi SIMBG / Pengaduan</div>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div style="text-align:center; width:22%; position:relative; z-index:2;">
|
|
<div style="width:48px; height:48px; border-radius:50%; background:var(--blue-soft); border:2px solid var(--blue); color:var(--blue); display:flex; align-items:center; justify-content:center; margin:0 auto 10px; font-size:18px;">👤</div>
|
|
<div style="font-size:12px; font-weight:700; color:var(--text-1);">2. Penugasan OSPRO</div>
|
|
<div style="font-size:10px; color:var(--text-3); margin-top:2px;">Delegasi tugas ke investigator lapangan</div>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div style="text-align:center; width:22%; position:relative; z-index:2;">
|
|
<div style="width:48px; height:48px; border-radius:50%; background:var(--purple-soft); border:2px solid var(--purple); color:var(--purple); display:flex; align-items:center; justify-content:center; margin:0 auto 10px; font-size:18px;">🏃</div>
|
|
<div style="font-size:12px; font-weight:700; color:var(--text-1);">3. Survei Lapangan</div>
|
|
<div style="font-size:10px; color:var(--text-3); margin-top:2px;">Verifikasi fisik, foto, & entri form OSPRO</div>
|
|
</div>
|
|
|
|
<!-- Step 4 -->
|
|
<div style="text-align:center; width:22%; position:relative; z-index:2;">
|
|
<div style="width:48px; height:48px; border-radius:50%; background:var(--green-soft); border:2px solid var(--green); color:var(--green); display:flex; align-items:center; justify-content:center; margin:0 auto 10px; font-size:18px;">✅</div>
|
|
<div style="font-size:12px; font-weight:700; color:var(--text-1);">4. Verifikasi KSP</div>
|
|
<div style="font-size:10px; color:var(--text-3); margin-top:2px;">Validasi laporan & eskalasi tindak lanjut</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- OSLOG Live Tracking Activity Feed -->
|
|
<div class="card card-p" style="display:flex; flex-direction:column;">
|
|
<div class="flex justify-between items-center mb-3">
|
|
<div style="font-size:13px; font-weight:600; color:var(--text-1);">🚚 Log Aktivitas OSLOG (Simulasi Live Feed GPS)</div>
|
|
<div class="live-pill" style="padding: 2px 8px;">
|
|
<div class="live-dot" style="background:var(--orange); box-shadow: 0 0 6px var(--orange);"></div>
|
|
<span class="live-text" style="color:var(--orange);">SINKRONISASI GPS</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-direction:column; gap:8px;" id="oslog-feed-container">
|
|
<!-- Active log feeds rendered dynamically below -->
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
`;
|
|
|
|
// Update counters initially
|
|
document.getElementById('ospro-active-tasks').textContent = APP_STATE.surveys.filter(s => s.status !== 'verified').length;
|
|
document.getElementById('ospro-verified-tasks').textContent = APP_STATE.surveys.filter(s => s.status === 'verified').length;
|
|
|
|
// Render dummy live activity feed for OSLOG
|
|
renderOslogLogs();
|
|
|
|
// Set interval to update GPS log simulation every 3 seconds
|
|
if (_integrationInterval) clearInterval(_integrationInterval);
|
|
_integrationInterval = setInterval(() => {
|
|
if (APP_STATE.currentPage === 'integration') {
|
|
renderOslogLogs();
|
|
}
|
|
}, 3500);
|
|
}
|
|
|
|
// OSLOG dummy activity data
|
|
const OSLOG_LOGS = [
|
|
{ device: 'Truk MBG #08 (Medan)', action: 'Pengiriman 840 porsi menu Makan Bergizi selesai di SD N 2 Medan', time: 'Baru saja', type: 'success' },
|
|
{ device: 'Surveyor Hendra (Manokwari)', action: 'GPS terdeteksi di lokasi issue ISS-001 (Kec. Manokwari Timur)', time: '1 menit lalu', type: 'location' },
|
|
{ device: 'Armada Koperasi #02 (Palu)', action: 'Pengantaran paket modal Koperasi selesai di Kantor Kelurahan Palu', time: '3 menit lalu', type: 'success' },
|
|
{ device: 'Surveyor Ratna (Palu)', action: 'Aktivitas survei OSPRO dimulai untuk issue koperasi fiktif Palu', time: '5 menit lalu', type: 'task' },
|
|
{ device: 'Truk MBG #12 (Surabaya)', action: 'Truk bergerak meninggalkan Gudang Utama menuju Rute R-04', time: '8 menit lalu', type: 'transit' },
|
|
{ device: 'Surveyor Dimas (Surabaya)', action: 'Akurasi GPS terverifikasi stabil (±3m) di kawasan LRT Surabaya', time: '12 menit lalu', type: 'location' }
|
|
];
|
|
|
|
function renderOslogLogs() {
|
|
const container = document.getElementById('oslog-feed-container');
|
|
if (!container) return;
|
|
|
|
// Randomly rotate one of the logs to make it look "live"
|
|
const logsToRender = [...OSLOG_LOGS];
|
|
const shuffled = logsToRender.sort(() => 0.5 - Math.random()).slice(0, 4);
|
|
|
|
const getLogIcon = (type) => {
|
|
switch (type) {
|
|
case 'success': return '✅';
|
|
case 'location': return '📍';
|
|
case 'task': return '📋';
|
|
case 'transit': return '🚚';
|
|
default: return '⚪';
|
|
}
|
|
};
|
|
|
|
container.innerHTML = shuffled.map(log => `
|
|
<div class="card card-p-sm slide-in" style="background:var(--bg); border-color:var(--border); display:flex; justify-content:space-between; align-items:center;">
|
|
<div style="display:flex; align-items:center; gap:10px;">
|
|
<span style="font-size:16px;">${getLogIcon(log.type)}</span>
|
|
<div>
|
|
<strong style="font-size:12px; color:var(--text-1);">${log.device}</strong>
|
|
<div style="font-size:11px; color:var(--text-2); margin-top:2px;">${log.action}</div>
|
|
</div>
|
|
</div>
|
|
<span style="font-size:10px; color:var(--text-3); font-variant-numeric:tabular-nums;">${log.time}</span>
|
|
</div>
|
|
`).join('');
|
|
}
|