Add remaining project files (exclude ignored folders)

2025-07-05 15:11:40 +07:00
parent a96eb2b958
commit b440b80882
4697 changed files with 1365702 additions and 0 deletions
@@ -0,0 +1,89 @@
+<!-- Main content -->
+<section class="content">
+    <div class="container-fluid">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-md-2 mb-2">
+                        <img src="dist/img/ODP.png" class="mr-2" width="25px"><span>Topologi</span>
+                    </div>
+                    <div class="col-md-2 mb-2">
+                        <img src="dist/img/ON.png"  class="mr-2" width="25px"><span>Aktif / Connected</span>
+                    </div>
+                    <div class="col-md-2 mb-2">
+                        <img src="dist/img/OF.png"  class="mr-2" width="25px"><span>Aktif / Disconnected</span>
+                    </div>
+                    <div class="col-md-2 mb-2">
+                        <img src="dist/img/ON1.png" class="mr-2" width="25px"><span>Tidak Aktif / Connected</span>
+                    </div>
+                    <div class="col-md-2 mb-2">
+                        <img src="dist/img/OF1.png" class="mr-2" width="25px"><span>Tidak Aktif / Disconnected</span>
+                    </div>
+                </div>
+                <div id="map" style="height: 90vh; width: 100%;"></div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<script>
+    let map; // Variabel untuk menyimpan peta
+    const markers = []; // Array untuk menyimpan marker
+
+    function initMap() {
+        // Inisialisasi peta dengan tipe hybrid
+        map = new google.maps.Map(document.getElementById('map'), {
+            center: { lat: -7.062083, lng: 106.797390 }, // Pusat peta
+            zoom: 11,
+            mapTypeId: 'hybrid' // Menentukan tipe peta menjadi hybrid
+        });
+
+        // Fetch data dari PHP saat pertama kali
+        fetchMarkers();
+        
+        // Mengatur interval untuk memperbarui marker setiap 10 detik
+        setInterval(fetchMarkers, 30000);
+    }
+
+    function fetchMarkers() {
+        fetch('load/maps_marker.php?i=<?php echo base64_encode($SqlDataWHIdM); ?>')
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok ' + response.statusText);
+                }
+                return response.json();
+            })
+            .then(markersData => {
+                // Hapus marker yang ada sebelumnya
+                markers.forEach(marker => marker.setMap(null));
+                markers.length = 0; // Kosongkan array marker
+
+                // Tambahkan marker baru ke peta
+                markersData.forEach(markerData => {
+                    const markerInstance = new google.maps.Marker({
+                        position: { lat: markerData.lat, lng: markerData.lng },
+                        map: map,
+                        title: markerData.title,
+                        icon: {
+                            url: markerData.icon, // Menggunakan ikon dari data
+                            scaledSize: new google.maps.Size(30, 30) // Mengatur ukuran ikon
+                        }
+                    });
+
+                    // Simpan marker ke array
+                    markers.push(markerInstance);
+
+                    // Event listener untuk klik marker
+                    markerInstance.addListener('click', () => {
+                        const infoWindow = new google.maps.InfoWindow();
+                        infoWindow.setContent(markerData.content); // Set konten InfoWindow
+                        infoWindow.open(map, markerInstance); // Tampilkan InfoWindow
+                    });
+                });
+            })
+            .catch(error => console.error('Error fetching markers:', error));
+    }
+
+    // Inisialisasi peta saat halaman selesai dimuat
+    window.onload = initMap;
+</script>