781 lines
35 KiB
PHP
781 lines
35 KiB
PHP
<?php
|
|
session_start();
|
|
if (!isset($_SESSION['user'])) {
|
|
header("Location: login.php");
|
|
exit;
|
|
}
|
|
|
|
require_once __DIR__ . '/config/database.php';
|
|
|
|
$database = new Database();
|
|
$db = $database->getConnection();
|
|
|
|
$role = $_SESSION['role'] ?? 'teknisi1';
|
|
$user_id = $_SESSION['user_id'] ?? null;
|
|
|
|
// Helper function buat hitung statistik
|
|
function getCount($db, $item_type_id, $role, $user_id) {
|
|
$query = "SELECT COUNT(*) as total FROM ftth_items WHERE item_type_id = :item_type_id";
|
|
if ($role !== 'engineer') {
|
|
$query .= " AND user_id = :user_id";
|
|
}
|
|
$stmt = $db->prepare($query);
|
|
$stmt->bindParam(':item_type_id', $item_type_id, PDO::PARAM_INT);
|
|
if ($role !== 'engineer') {
|
|
$stmt->bindParam(':user_id', $user_id, PDO::PARAM_INT);
|
|
}
|
|
$stmt->execute();
|
|
return $stmt->fetch(PDO::FETCH_ASSOC)['total'] ?? 0;
|
|
}
|
|
|
|
// Mapping item_type_id sesuai database kamu
|
|
$olt = getCount($db, 1, $role, $user_id);
|
|
$tiang = getCount($db, 2, $role, $user_id);
|
|
$odp = getCount($db, 3, $role, $user_id);
|
|
$odc = getCount($db, 4, $role, $user_id);
|
|
$pelanggan = getCount($db, 5, $role, $user_id);
|
|
|
|
// Routes (butuh join ke ftth_items)
|
|
$query = "SELECT COUNT(*) as total
|
|
FROM cable_routes r
|
|
JOIN ftth_items i ON r.from_item_id = i.id
|
|
WHERE 1=1";
|
|
if ($role !== 'engineer') {
|
|
$query .= " AND i.user_id = :user_id";
|
|
}
|
|
$stmt = $db->prepare($query);
|
|
if ($role !== 'engineer') {
|
|
$stmt->bindParam(':user_id', $user_id, PDO::PARAM_INT);
|
|
}
|
|
$stmt->execute();
|
|
$routes = $stmt->fetch(PDO::FETCH_ASSOC)['total'] ?? 0;
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>FTTH Megadata | Dashboard</title>
|
|
|
|
<!-- Google Font: Source Sans Pro -->
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<!-- AdminLTE -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">
|
|
<!-- Leaflet CSS (Latest Version) -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<!-- Leaflet Fullscreen Plugin -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet-fullscreen@1.0.1/dist/leaflet.fullscreen.css" />
|
|
<!-- Leaflet Routing Machine -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.css" />
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="assets/css/custom.css">
|
|
</head>
|
|
<body class="hold-transition sidebar-mini layout-fixed">
|
|
<div class="wrapper">
|
|
|
|
<!-- Preloader -->
|
|
<div class="preloader flex-column justify-content-center align-items-center">
|
|
<i class="fas fa-network-wired fa-3x text-primary"></i>
|
|
<h4 class="mt-3">FTTH Megadata</h4>
|
|
</div>
|
|
|
|
<!-- Navbar -->
|
|
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
|
|
<!-- Left navbar links -->
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
|
|
</li>
|
|
<li class="nav-item d-none d-sm-inline-block">
|
|
<a href="index.php" class="nav-link">Dashboard</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Right navbar links -->
|
|
<ul class="navbar-nav ml-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="logout.php" role="button">
|
|
<i class="fas fa-sign-out-alt"></i> Logout
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Main Sidebar Container -->
|
|
<aside class="main-sidebar sidebar-dark-primary elevation-4">
|
|
<!-- Brand Logo -->
|
|
<a href="index.php" class="brand-link">
|
|
<i class="fas fa-network-wired brand-image img-circle elevation-3" style="opacity: .8; margin-left: 10px; color: white;"></i>
|
|
<span class="brand-text font-weight-light">FTTH Megadata</span>
|
|
</a>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="sidebar">
|
|
<!-- Sidebar Menu -->
|
|
<nav class="mt-2">
|
|
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link active">
|
|
<i class="nav-icon fas fa-map"></i>
|
|
<p>Peta FTTH</p>
|
|
</a>
|
|
</li>
|
|
<!-- //ini adalah tombol genieacs lama
|
|
<li class="nav-item">
|
|
<a href="http://172.16.96.10:3000/" class="nav-link" target="_blank">
|
|
<i class="nav-icon fas fa-server"></i>
|
|
<p>GenieACS</p>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="url_observium.html" class="nav-link" target="_blank">
|
|
<i class="nav-icon fas fa-chart-line"></i>
|
|
<p>Observium</p>
|
|
</a>
|
|
</li>
|
|
!-->
|
|
<!-- Tombol Manajemen Users -->
|
|
<li class="nav-item">
|
|
<a href="manajemen_users.php" class="nav-link">
|
|
<i class="nav-icon fas fa-users"></i>
|
|
<p>Users</p>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link" onclick="showItemList()">
|
|
<i class="nav-icon fas fa-list"></i>
|
|
<p>Daftar Item</p>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link" onclick="showRouteList()">
|
|
<i class="nav-icon fas fa-route"></i>
|
|
<p>Routing Kabel</p>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link" onclick="showLaporanOdp()">
|
|
<i class="nav-icon fas fa-chart-bar"></i>
|
|
<p>Laporan ODP</p>
|
|
</a>
|
|
</li>
|
|
<li class="nav-header">NAVIGASI PETA</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link" onclick="zoomToItems()">
|
|
<i class="nav-icon fas fa-expand-arrows-alt" style="color: #17a2b8;"></i>
|
|
<p>Zoom Semua Item</p>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item has-treeview">
|
|
<a href="#" class="nav-link">
|
|
<i class="nav-icon fas fa-search-location" style="color: #6f42c1;"></i>
|
|
<p>
|
|
Zoom ke Item
|
|
<i class="right fas fa-angle-left"></i>
|
|
</p>
|
|
</a>
|
|
<ul class="nav nav-treeview">
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link" onclick="zoomToItemType('OLT')">
|
|
<i class="fas fa-cloud nav-icon" style="color: #FF6B6B;"></i>
|
|
<p>Zoom ke OLT</p>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link" onclick="zoomToItemType('Tiang Tumpu')">
|
|
<i class="fas fa-tower-broadcast nav-icon" style="color: #4ECDC4;"></i>
|
|
<p>Zoom ke Tiang</p>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link" onclick="zoomToItemType('ODP')">
|
|
<i class="fas fa-project-diagram nav-icon" style="color: #45B7D1;"></i>
|
|
<p>Zoom ke ODP</p>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link" onclick="zoomToItemType('ODC')">
|
|
<i class="fas fa-network-wired nav-icon" style="color: #96CEB4;"></i>
|
|
<p>Zoom ke ODC</p>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link" onclick="zoomToItemType('Pelanggan')">
|
|
<i class="fas fa-home nav-icon" style="color: #FFA500;"></i>
|
|
<p>Zoom ke Pelanggan</p>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link" onclick="locateUser()">
|
|
<i class="nav-icon fas fa-location-arrow" style="color: #dc3545;"></i>
|
|
<p>Cari Lokasi Saya</p>
|
|
</a>
|
|
</li>
|
|
<li class="nav-header">EXPORT DATA</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link" onclick="exportToKMZ()">
|
|
<i class="nav-icon fas fa-download" style="color: #28a745;"></i>
|
|
<p>Export ke KMZ</p>
|
|
</a>
|
|
</li>
|
|
<li class="nav-header">ITEM FTTH</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link" onclick="addNewItem('OLT')">
|
|
<i class="nav-icon fas fa-cloud" style="color: #FF6B6B;"></i>
|
|
<p>Tambah OLT</p>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link" onclick="addNewItem('Tiang Tumpu')">
|
|
<i class="nav-icon fas fa-tower-broadcast" style="color: #4ECDC4;"></i>
|
|
<p>Tambah Tiang Tumpu</p>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link" onclick="addNewItem('ODP')">
|
|
<i class="nav-icon fas fa-project-diagram" style="color: #45B7D1;"></i>
|
|
<p>Tambah ODP</p>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link" onclick="addNewItem('ODC')">
|
|
<i class="nav-icon fas fa-network-wired" style="color: #96CEB4;"></i>
|
|
<p>Tambah ODC</p>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link" onclick="addNewItem('Pelanggan')">
|
|
<i class="nav-icon fas fa-wifi" style="color: #FFA500;"></i>
|
|
<p>Tambah Pelanggan</p>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Content Wrapper -->
|
|
<div class="content-wrapper">
|
|
<!-- Content Header -->
|
|
<div class="content-header">
|
|
<div class="container-fluid">
|
|
<div class="row mb-2">
|
|
<div class="col-sm-6">
|
|
<h1 class="m-0">Dashboard FTTH Megadata</h1>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<ol class="breadcrumb float-sm-right">
|
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
<li class="breadcrumb-item active">Dashboard</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main content -->
|
|
<section class="content">
|
|
<div class="container-fluid">
|
|
<!-- Map Container -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">
|
|
<i class="fas fa-map mr-1"></i>
|
|
Peta Infrastruktur FTTH
|
|
</h3>
|
|
<div class="card-tools d-flex justify-content-between">
|
|
<!-- Kanan: tombol utama/Revisi Tombol -->
|
|
<div class="btn-group">
|
|
|
|
<button type="button" class="btn btn-primary btn-sm" onclick="showAddItemModal()">
|
|
<i class="fas fa-plus"></i> Tambah Item
|
|
</button>
|
|
|
|
<button type="button" class="btn btn-info btn-sm" onclick="showRoutingMode()">
|
|
<i class="fas fa-route"></i> Route Otomatis
|
|
</button>
|
|
|
|
<button type="button" class="btn btn-info btn-sm" onclick="showRoutingMode()">
|
|
<i class="fas fa-map"></i> Route manual
|
|
</button>
|
|
|
|
<button type="button" class="btn btn-success btn-sm" onclick="exportToKMZ()">
|
|
<i class="fas fa-download"></i> Export KMZ
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tombol GenieACS & Observium di kanan -->
|
|
<div class="btn-group ml-2">
|
|
<button type="button" class="btn btn-warning btn-sm" onclick="window.open('auto_login_genieacs.php', '_blank')">
|
|
<i class="fas fa-cloud"></i> ACS
|
|
</button>
|
|
<button type="button" class="btn btn-secondary btn-sm" onclick="window.open('auto_login_observium.php', '_blank')">
|
|
<i class="fas fa-chart-line"></i> Observium
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Map Zoom Controls -->
|
|
<div class="map-zoom-controls">
|
|
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="zoomToItems()" title="Zoom ke Semua Item">
|
|
<i class="fas fa-expand-arrows-alt"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="locateUser()" title="Cari Lokasi Saya">
|
|
<i class="fas fa-location-arrow"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="map.setView([-2.5, 118], 5)" title="Zoom ke Indonesia">
|
|
<i class="fas fa-wifi"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="map.zoomIn()" title="Zoom In (+)">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="map.zoomOut()" title="Zoom Out (-)">
|
|
<i class="fas fa-minus"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div id="map" style="height: 600px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics Cards -->
|
|
<div class="row">
|
|
<div class="col-lg-2 col-6">
|
|
<div class="small-box bg-info">
|
|
<div class="inner">
|
|
<h3><?= $olt ?></h3>
|
|
<p>OLT</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-cloud"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-6">
|
|
<div class="small-box bg-success">
|
|
<div class="inner">
|
|
<h3><?= $tiang ?></h3>
|
|
<p>Tiang</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-tower-broadcast"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-6">
|
|
<div class="small-box bg-warning">
|
|
<div class="inner">
|
|
<h3><?= $odp ?></h3>
|
|
<p>ODP</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-project-diagram"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-6">
|
|
<div class="small-box bg-danger">
|
|
<div class="inner">
|
|
<h3><?= $odc ?></h3>
|
|
<p>ODC</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-network-wired"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-6">
|
|
<div class="small-box bg-primary">
|
|
<div class="inner">
|
|
<h3><?= $pelanggan ?></h3>
|
|
<p>Pelanggan</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-wifi"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-6">
|
|
<div class="small-box bg-secondary">
|
|
<div class="inner">
|
|
<h3><?= $routes ?></h3>
|
|
<p>Routes</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-route"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="main-footer">
|
|
<strong>Copyright © 2025 <a href="#">FTTH Megadata</a> by Kuli Jaringan.</strong>
|
|
Semua hak dilindungi undang-undang.
|
|
<div class="float-right d-none d-sm-inline-block">
|
|
<b>Versi</b> 1.0.0
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Add/Edit Item Modal -->
|
|
<div class="modal fade" id="itemModal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="itemModalTitle">Tambah Item FTTH</h4>
|
|
<button type="button" class="close" data-dismiss="modal">
|
|
<span>×</span>
|
|
</button>
|
|
</div>
|
|
<form id="itemForm">
|
|
<div class="modal-body">
|
|
<input type="hidden" id="itemId" name="id">
|
|
|
|
<!-- Pilihan Jenis Item -->
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="itemType">Jenis Item</label>
|
|
<select class="form-control" id="itemType" name="item_type" required>
|
|
<option value="">Pilih Jenis Item</option>
|
|
<option value="1">OLT</option>
|
|
<option value="2">Tiang Tumpu</option>
|
|
<option value="3">ODP</option>
|
|
<option value="4">ODC</option>
|
|
<option value="5">Pelanggan</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="itemName">Nama Item</label>
|
|
<input type="text" class="form-control" id="itemName" name="name" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Umum -->
|
|
<div id="generalFields">
|
|
<div class="form-group">
|
|
<label for="itemDescription">Deskripsi</label>
|
|
<textarea class="form-control" id="itemDescription" name="description" rows="3"></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="itemAddress">Alamat</label>
|
|
<textarea class="form-control" id="itemAddress" name="address" rows="2"></textarea>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="itemLat">Latitude <span class="text-danger">*</span></label>
|
|
<input type="number" step="any" class="form-control" id="itemLat" name="latitude" placeholder="Contoh: -6.2088">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="itemLng">Longitude <span class="text-danger">*</span></label>
|
|
<input type="number" step="any" class="form-control" id="itemLng" name="longitude" placeholder="Contoh: 106.8456">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Warna Tube & Core -->
|
|
<div id="colorFields">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="tubeColor">Warna Tube</label>
|
|
<select class="form-control" id="tubeColor" name="tube_color_id">
|
|
<option value="">Pilih Warna Tube</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="coreColor">Warna Core</label>
|
|
<select class="form-control" id="coreColor" name="core_color_id">
|
|
<option value="">Pilih Warna Core</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Kabel -->
|
|
<div id="cableFields">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="cableType">Jenis Kabel</label>
|
|
<select class="form-control" id="cableType" name="item_cable_type">
|
|
<option value="">Pilih Jenis Kabel</option>
|
|
<option value="backbone">Backbone</option>
|
|
<option value="distribution">Distribution</option>
|
|
<option value="drop_core">Drop Core</option>
|
|
<option value="feeder">Feeder</option>
|
|
<option value="branch">Branch</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="totalCoreCapacity">Kapasitas Core Total</label>
|
|
<select class="form-control" id="totalCoreCapacity" name="total_core_capacity">
|
|
<option value="1">1 Core</option>
|
|
<option value="2">2 Core</option>
|
|
<option value="4">4 Core</option>
|
|
<option value="6">6 Core</option>
|
|
<option value="8">8 Core</option>
|
|
<option value="12">12 Core</option>
|
|
<option value="24" selected>24 Core</option>
|
|
<option value="48">48 Core</option>
|
|
<option value="72">72 Core</option>
|
|
<option value="96">96 Core</option>
|
|
<option value="144">144 Core</option>
|
|
<option value="216">216 Core</option>
|
|
<option value="288">288 Core</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Core -->
|
|
<div id="coreFields">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="coreUsed">Core yang Digunakan</label>
|
|
<input type="number" class="form-control" id="coreUsed" name="core_used" min="0" max="288">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label>Core Tersedia</label>
|
|
<input type="text" class="form-control" id="coreAvailable" readonly>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Splitter -->
|
|
<div id="splitterFields">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="splitterMain">Splitter Jaringan Utama</label>
|
|
<select class="form-control" id="splitterMain" name="splitter_main_id">
|
|
<option value="">Pilih Splitter Utama</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="splitterOdp">Splitter ODP</label>
|
|
<select class="form-control" id="splitterOdp" name="splitter_odp_id">
|
|
<option value="">Pilih Splitter ODP</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Serial Number & RX Power -->
|
|
<div id="ontFields">
|
|
<div class="form-group">
|
|
<label for="serial_number">ID GenieACS TR069</label>
|
|
<input type="text" class="form-control" id="serial_number" name="serial_number" placeholder="Contoh: 00259E-HG8546M-485754431A8E6A9C">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="rx_power">RX Power (dBm)</label>
|
|
<input type="number" step="0.01" class="form-control" id="rx_power" name="rx_power" placeholder="Otomatis dari GenieACS" readonly>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Status -->
|
|
<div id="statusFields">
|
|
<div class="form-group">
|
|
<label for="itemStatus">Status</label>
|
|
<select class="form-control" id="itemStatus" name="status">
|
|
<option value="active">Aktif</option>
|
|
<option value="inactive">Tidak Aktif</option>
|
|
<option value="maintenance">Maintenance</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!-- Form isi data ONU -->
|
|
<div class="form-group">
|
|
<label for="sn_onu">SN ONU (OLT)</label>
|
|
<input type="text" class="form-control" id="sn_onu" name="sn_onu" placeholder="Contoh: HWTC6B926A9C">
|
|
</div>
|
|
<!-- Form isi nomor telfon -->
|
|
<div class="form-group">
|
|
<label>Nomor HP Pelanggan</label>
|
|
<input type="text" name="customer_phone" class="form-control" placeholder="628xxxxxxxxxx">
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
|
|
<button type="submit" class="btn btn-primary">Simpan</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const itemType = document.getElementById('itemType');
|
|
const ontFields = document.getElementById('ontFields');
|
|
const generalFields = document.getElementById('generalFields');
|
|
const colorFields = document.getElementById('colorFields');
|
|
const cableFields = document.getElementById('cableFields');
|
|
const coreFields = document.getElementById('coreFields');
|
|
const splitterFields = document.getElementById('splitterFields');
|
|
const statusFields = document.getElementById('statusFields');
|
|
const addressField = document.getElementById('itemAddress');
|
|
const addressWrapper = addressField.closest('.form-group');
|
|
const latField = document.getElementById('itemLat').closest('.col-md-6');
|
|
const lngField = document.getElementById('itemLng').closest('.col-md-6');
|
|
const descriptionField = document.getElementById('description')?.closest('.form-group'); // Deskripsi
|
|
|
|
//editan saya
|
|
window.toggleFields = function () {
|
|
const value = itemType.value;
|
|
|
|
// Semua field default tampil
|
|
generalFields.style.display = '';
|
|
colorFields.style.display = '';
|
|
cableFields.style.display = '';
|
|
coreFields.style.display = '';
|
|
splitterFields.style.display = '';
|
|
statusFields.style.display = '';
|
|
addressWrapper.style.display = '';
|
|
if (descriptionField) descriptionField.style.display = '';
|
|
latField.style.display = '';
|
|
lngField.style.display = '';
|
|
ontFields.style.display = 'none';
|
|
|
|
if (value === '5') {
|
|
// === Pelanggan ===
|
|
// Semua field tampil termasuk ONT & RX Power
|
|
ontFields.style.display = '';
|
|
}
|
|
else if (value === '2') {
|
|
// === Tiang Tumpu ===
|
|
// Hanya tampilkan Nama Item, Jenis Item, Latitude & Longitude
|
|
generalFields.style.display = ''; // Nama & Jenis item tetap tampil
|
|
latField.style.display = '';
|
|
lngField.style.display = '';
|
|
|
|
// Sembunyikan deskripsi, alamat, dan field lainnya
|
|
if (descriptionField) descriptionField.style.display = 'none';
|
|
addressWrapper.style.display = 'none';
|
|
colorFields.style.display = 'none';
|
|
cableFields.style.display = 'none';
|
|
coreFields.style.display = 'none';
|
|
splitterFields.style.display = 'none';
|
|
statusFields.style.display = 'none';
|
|
ontFields.style.display = 'none';
|
|
}
|
|
else if (value === '3' || value === '4') {
|
|
// === ODP & ODC ===
|
|
addressWrapper.style.display = 'none';
|
|
ontFields.style.display = 'none';
|
|
}
|
|
else {
|
|
// === OLT ===
|
|
// Semua field tampil kecuali ONT
|
|
ontFields.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// Jalankan toggle pertama kali
|
|
itemType.addEventListener('change', toggleFields);
|
|
toggleFields();
|
|
|
|
// === Script Otomatis Mengambil RX Power ===
|
|
const snInput = document.getElementById('serial_number');
|
|
const rxPowerInput = document.getElementById('rx_power');
|
|
|
|
snInput.addEventListener('change', function() {
|
|
const sn = this.value.trim();
|
|
if (!sn) return;
|
|
|
|
fetch('get_rx_power.php?sn=' + encodeURIComponent(sn))
|
|
.then(response => {
|
|
if (!response.ok) throw new Error('Network response was not OK');
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.rx_power !== null) {
|
|
rxPowerInput.value = data.rx_power;
|
|
} else {
|
|
alert('⚠ ' + (data.error || 'RX Power tidak ditemukan'));
|
|
rxPowerInput.value = '';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
alert('❌ Gagal mengambil RX Power dari GenieACS');
|
|
rxPowerInput.value = '';
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!-- jQuery -->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<!-- Bootstrap 4 -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<!-- AdminLTE App -->
|
|
<script src="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/js/adminlte.min.js"></script>
|
|
<!-- Leaflet JS (Latest Version) -->
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<!-- Leaflet Fullscreen Plugin -->
|
|
<script src="https://unpkg.com/leaflet-fullscreen@1.0.1/dist/leaflet.fullscreen.js"></script>
|
|
<!-- Leaflet Routing Machine -->
|
|
<script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js"></script>
|
|
<!-- JSZip for KMZ compression -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
|
|
<!-- FileSaver for download -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
|
|
<!-- Custom JS -->
|
|
<!--
|
|
<script>
|
|
$.document().ready(function() {
|
|
|
|
alert('dasd')
|
|
})
|
|
</script>
|
|
-->
|
|
<script src="assets/js/map.js"></script>
|
|
<script src="assets/js/app.js"></script>
|
|
<script src="assets/js/kmz-export.js"></script>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
|
|
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
</body>
|
|
</html>
|