Upload files to "system/plugin/ui"
Signed-off-by: nestict <icttechnest@gmail.com>
This commit is contained in:
parent
3a49bf9afa
commit
717cb65516
943
system/plugin/ui/pppoe_monitor.tpl
Normal file
943
system/plugin/ui/pppoe_monitor.tpl
Normal file
@ -0,0 +1,943 @@
|
|||||||
|
{include file="sections/header.tpl"}
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
||||||
|
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
|
||||||
|
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css">
|
||||||
|
<script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
||||||
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||||
|
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
|
||||||
|
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.modal {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
.modal-content {
|
||||||
|
background-color: #fefefe;
|
||||||
|
margin: 15% auto;
|
||||||
|
padding: 0px;
|
||||||
|
border: 1px solid #888;
|
||||||
|
width: 80%;
|
||||||
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
.close {
|
||||||
|
color: #aaa;
|
||||||
|
float: right;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.close:hover,
|
||||||
|
.close:focus {
|
||||||
|
color: black;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.card-body {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
.card-header {
|
||||||
|
padding: .75rem 1.25rem;
|
||||||
|
margin-bottom: 0;
|
||||||
|
background-color: none;
|
||||||
|
border-bottom: 1px solid rgba(0,0,0,.125);
|
||||||
|
}
|
||||||
|
.card-title {
|
||||||
|
margin-bottom: .75rem;
|
||||||
|
}
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.table-responsive {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||||
|
}
|
||||||
|
.table {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: #212529;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
#ppp-table_wrapper {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
#ppp-table th, #ppp-table td {
|
||||||
|
text-align: center;
|
||||||
|
padding: 6px;
|
||||||
|
}
|
||||||
|
.table-striped tbody tr:nth-of-type(odd) {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
.panel-default {
|
||||||
|
border-color: #ddd;
|
||||||
|
}
|
||||||
|
.panel-heading {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-color: #ddd;
|
||||||
|
}
|
||||||
|
.nav-tabs {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.nav-tabs > li > a {
|
||||||
|
border-radius: 0;
|
||||||
|
color: #555;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border-color: #ddd;
|
||||||
|
}
|
||||||
|
.nav-tabs > li.active > a,
|
||||||
|
.nav-tabs > li.active > a:focus,
|
||||||
|
.nav-tabs > li.active > a:hover {
|
||||||
|
background-color: #fff;
|
||||||
|
color: #333;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.table-striped tbody tr:nth-of-type(odd) {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
.table th {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
.table-striped > tbody > tr > td {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.status-connect {
|
||||||
|
color: #5cb85c;
|
||||||
|
}
|
||||||
|
.status-disconnect {
|
||||||
|
color: #d9534f;
|
||||||
|
}
|
||||||
|
.modalsupport {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
background-color: rgb(0,0,0);
|
||||||
|
background-color: rgba(0,0,0,0.4);
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.modalsupport-content {
|
||||||
|
background-color: #fefefe;
|
||||||
|
margin: auto;
|
||||||
|
padding: 0px;
|
||||||
|
border: 1px solid #888;
|
||||||
|
width: 80%;
|
||||||
|
max-width: 500px;
|
||||||
|
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.modalsupport-close {
|
||||||
|
color: #aaa;
|
||||||
|
float: right;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.modalsupport-close:hover,
|
||||||
|
.modalsupport-close:focus {
|
||||||
|
color: black;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.card-header {
|
||||||
|
background-color: none;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.card-body {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.donate-button {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.modalsupport img {
|
||||||
|
width: 100px;
|
||||||
|
height: auto;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
.dataSize {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.action-icons i {
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 10px;
|
||||||
|
color: #007bff;
|
||||||
|
}
|
||||||
|
.action-icons i:hover {
|
||||||
|
color: #0056b3;
|
||||||
|
}
|
||||||
|
.modal-title {
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.table-bordered {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
table-layout: fixed;
|
||||||
|
}
|
||||||
|
.table-bordered th, .table-bordered td {
|
||||||
|
width: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 5px;
|
||||||
|
vertical-align: middle;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.advanced-search-container {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 15px;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
.form-inline .form-group {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.dataTables_filter {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.panel-default {
|
||||||
|
padding: 10px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.panel-heading {
|
||||||
|
padding: 5px 15px;
|
||||||
|
}
|
||||||
|
.panel-body {
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
.table th, .table td {
|
||||||
|
font-size: 15px; /* Mengurangi ukuran font pada tabel */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.traffic-icon {
|
||||||
|
display: inline-block;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 5px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.traffic-icon-green {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
.traffic-icon-yellow {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
.traffic-icon-red {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
.text-left {
|
||||||
|
text-align: left !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
|
||||||
|
<!-- Form dan navigasi tabs -->
|
||||||
|
<form class="form-horizontal" method="post" role="form" action="{$_url}plugin/pppoe">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="routerSelect" class="col-sm-2 control-label">Select Router</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<select id="routerSelect" name="router" class="form-control" onchange="window.location.href=this.value;">
|
||||||
|
{foreach $routers as $r}
|
||||||
|
<option value="{$_url}plugin/pppoe/{$r['id']}" {if $r['id'] == $router}selected{/if}>
|
||||||
|
{$r['name']}
|
||||||
|
</option>
|
||||||
|
{/foreach}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<div class="advanced-search-container">
|
||||||
|
<form id="advancedSearchForm" class="form-inline">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="searchUsername">Username:</label>
|
||||||
|
<input type="text" class="form-control" id="searchUsername" placeholder="Enter username">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="searchStatus">Status:</label>
|
||||||
|
<select class="form-control" id="searchStatus">
|
||||||
|
<option value="">Any</option>
|
||||||
|
<option value="Connected">Connected</option>
|
||||||
|
<option value="Disconnected">Disconnected</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="table-responsive">
|
||||||
|
<div class="panel-body">
|
||||||
|
<table class="table table-striped" id="ppp-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>ID</th>
|
||||||
|
<th>Username</th>
|
||||||
|
<th>IP Address</th>
|
||||||
|
<th>Uptime</th>
|
||||||
|
<th>Service</th>
|
||||||
|
<th>Caller ID</th>
|
||||||
|
<th>Device</th>
|
||||||
|
<th>Download</th>
|
||||||
|
<th>Upload</th>
|
||||||
|
<th>Total Usage</th>
|
||||||
|
<th>Status</th>
|
||||||
|
<th>Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<!-- Isi tabel akan dimasukkan melalui JavaScript -->
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="detailsModal" class="modal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<span class="close">×</span>
|
||||||
|
<div class="container-fluid mt-5">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h5 class="modal-title">Data Usage for <span id="modalUsername"></span></h5>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="table-responsive mt-4">
|
||||||
|
<table class="table table-bordered">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<input type="hidden" id="interface" value="">
|
||||||
|
<th id="tabletx"><i class="fa fa-download"></i></th>
|
||||||
|
<th id="tablerx"><i class="fa fa-upload"></i></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div id="chart" class="mt-3"></div>
|
||||||
|
<div id="dailyChart" class="mt-3"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
var $j = jQuery.noConflict();
|
||||||
|
|
||||||
|
$j(document).ready(function() {
|
||||||
|
var table = $j('#ppp-table').DataTable({
|
||||||
|
responsive: true,
|
||||||
|
columns: [
|
||||||
|
{ data: 'id', visible: false },
|
||||||
|
{
|
||||||
|
data: 'username',
|
||||||
|
className: 'text-left',
|
||||||
|
render: function(data, type, row) {
|
||||||
|
return '<div style="width: 150px;"><i class="traffic-icon traffic-icon-green"></i> ' + data + '</div>';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ data: 'address' },
|
||||||
|
{ data: 'uptime' },
|
||||||
|
{ data: 'service' },
|
||||||
|
{ data: 'caller_id' },
|
||||||
|
{ data: 'manufacturer' }, // New column for device/manufacturer
|
||||||
|
{ data: 'tx', className: 'dataSize' },
|
||||||
|
{ data: 'rx', className: 'dataSize' },
|
||||||
|
{ data: 'total', className: 'dataSize' },
|
||||||
|
{
|
||||||
|
data: 'status',
|
||||||
|
render: function(data) {
|
||||||
|
if (data === 'Connected') {
|
||||||
|
return '<small class="label bg-green">Connected</small>';
|
||||||
|
} else if (data === 'Disconnected') {
|
||||||
|
return '<small class="label bg-red">Disconnected</small>';
|
||||||
|
} else {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
data: null,
|
||||||
|
render: function(data, type, row) {
|
||||||
|
return '<div class="action-icons" style="display: flex; align-items: center;">' +
|
||||||
|
'<i class="fa fa-area-chart view-details" style="color: blue; cursor: pointer;" title="View Traffic" data-username="' + row.username + '" data-id="' + row.id + '"></i> ' +
|
||||||
|
'<i class="fa fa-retweet reconnect-button" style="color: red; cursor: pointer;" title="Reconnect" data-username="' + row.username + '" data-id="' + row.id + '"></i> ' +
|
||||||
|
'<button class="btn btn-sm ' + (row.is_bound ? 'btn-danger' : 'btn-success') + ' bind-button" data-username="' + row.username + '" data-caller-id="' + row.caller_id + '" data-is-bound="' + row.is_bound + '">' +
|
||||||
|
(row.is_bound ? 'Unbind' : 'Bind') + '</button>' +
|
||||||
|
'</div>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
order: [[0, 'asc']],
|
||||||
|
pageLength: 10,
|
||||||
|
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, 'All']],
|
||||||
|
dom: 'Bfrtip',
|
||||||
|
buttons: ['reset', 'pageLength'],
|
||||||
|
paging: true,
|
||||||
|
info: true,
|
||||||
|
searching: true,
|
||||||
|
ajax: {
|
||||||
|
url: '{$_url}plugin/pppoe_get_combined_users/{$router}',
|
||||||
|
dataSrc: ''
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fungsi untuk mendapatkan batas maksimum
|
||||||
|
function getMaxLimit(data) {
|
||||||
|
if (data.hasOwnProperty('max_limit')) {
|
||||||
|
return data.max_limit.toString();
|
||||||
|
} else {
|
||||||
|
return 'N/A';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle view details icon clicks
|
||||||
|
$j('#ppp-table tbody').on('click', '.view-details', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var username = $j(this).data('username');
|
||||||
|
var id = $j(this).data('id');
|
||||||
|
|
||||||
|
viewDetails(id, username);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle reconnect icon clicks
|
||||||
|
$j('#ppp-table tbody').on('click', '.reconnect-button', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var username = $j(this).data('username');
|
||||||
|
var id = $j(this).data('id');
|
||||||
|
|
||||||
|
reconnect(id, username);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Function to handle view details
|
||||||
|
function viewDetails(id, username) {
|
||||||
|
console.log("Viewing details for:", username);
|
||||||
|
$j('#modalUsername').text(username);
|
||||||
|
|
||||||
|
$j.ajax({
|
||||||
|
url: '{$_url}plugin/pppoe_get_combined_users',
|
||||||
|
method: 'GET',
|
||||||
|
dataType: 'json',
|
||||||
|
success: function(response) {
|
||||||
|
var user = response.find(function(item) {
|
||||||
|
return (item.username && item.username.toString().toLowerCase() === username.toString().toLowerCase());
|
||||||
|
});
|
||||||
|
|
||||||
|
if (username !== null && user !== null && user.username !== null) {
|
||||||
|
var interfaceValue = '<pppoe-' + user.username + '>';
|
||||||
|
$j('#interface').val(interfaceValue);
|
||||||
|
$j('#selectedInterface').text(interfaceValue);
|
||||||
|
$j('#detailsModal').css('display', 'block');
|
||||||
|
createChart();
|
||||||
|
createDailyChart(username); // Pass the username to createDailyChart
|
||||||
|
} else {
|
||||||
|
alert('User not found.');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error: function(xhr, textStatus, errorThrown) {
|
||||||
|
alert('Failed to retrieve user data.');
|
||||||
|
console.error('AJAX error:', textStatus, errorThrown);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Function to handle reconnect
|
||||||
|
function reconnect(id, username) {
|
||||||
|
if (confirm('Are you sure you want to disconnect user ' + username + '?')) {
|
||||||
|
$.ajax({
|
||||||
|
url: '{$_url}plugin/pppoe_monitor_router_delete_ppp_user/{$router}', // Perbaiki URL AJAX
|
||||||
|
method: 'POST',
|
||||||
|
data: { id: id, username: username },
|
||||||
|
success: function(response) {
|
||||||
|
if (response.success) {
|
||||||
|
alert('User ' + username + ' has been disconnected.');
|
||||||
|
setTimeout(function() {
|
||||||
|
table.ajax.reload();
|
||||||
|
}, 2000);
|
||||||
|
} else {
|
||||||
|
alert('Failed to disconnect user ' + username + ': ' + (response.message || 'Unknown error'));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error: function(xhr, textStatus, errorThrown) {
|
||||||
|
alert('Failed to disconnect user ' + username + ': ' + (errorThrown || 'Unknown error'));
|
||||||
|
console.error('AJAX error:', textStatus, errorThrown);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Close modal on click of close button
|
||||||
|
$j('.close').click(function() {
|
||||||
|
$j('#detailsModal').css('display', 'none');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close modal on click outside the modal
|
||||||
|
$j(window).click(function(event) {
|
||||||
|
if (event.target == document.getElementById('detailsModal')) {
|
||||||
|
$j('#detailsModal').css('display', 'none');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle advanced search form submission
|
||||||
|
$j(document).ready(function() {
|
||||||
|
$j('#advancedSearchForm').on('submit', function(e) {
|
||||||
|
e.preventDefault(); // Mencegah pengiriman form secara default
|
||||||
|
|
||||||
|
// Mendapatkan nilai dari input
|
||||||
|
var username = $j('#searchUsername').val();
|
||||||
|
var status = $j('#searchStatus').val();
|
||||||
|
|
||||||
|
// Melakukan pencarian dan menggambar ulang tabel
|
||||||
|
table.column(1).search(username).draw(); // Kolom 1 untuk username
|
||||||
|
table.column(9).search(status).draw(); // Kolom 9 untuk status
|
||||||
|
});
|
||||||
|
|
||||||
|
// Menambahkan ikon search ke dalam tombol
|
||||||
|
var searchButton = $j('<button type="submit" class="btn btn-primary"><i class="fas fa-search"></i></button>');
|
||||||
|
$j('#advancedSearchForm').append(searchButton);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
var chart;
|
||||||
|
var chartData = {
|
||||||
|
txData: [],
|
||||||
|
rxData: []
|
||||||
|
};
|
||||||
|
|
||||||
|
function createChart() {
|
||||||
|
var options = {
|
||||||
|
chart: {
|
||||||
|
height: 350,
|
||||||
|
type: 'area',
|
||||||
|
animations: {
|
||||||
|
enabled: true,
|
||||||
|
easing: 'linear',
|
||||||
|
speed: 200,
|
||||||
|
animateGradually: {
|
||||||
|
enabled: true,
|
||||||
|
delay: 150
|
||||||
|
},
|
||||||
|
dynamicAnimation: {
|
||||||
|
enabled: true,
|
||||||
|
speed: 200
|
||||||
|
}
|
||||||
|
},
|
||||||
|
events: {
|
||||||
|
mounted: function() {
|
||||||
|
updateTrafficValues();
|
||||||
|
setInterval(updateTrafficValues, 3000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
curve: 'smooth'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{ name: 'Download', data: chartData.txData },
|
||||||
|
{ name: 'Upload', data: chartData.rxData }
|
||||||
|
],
|
||||||
|
xaxis: {
|
||||||
|
type: 'datetime',
|
||||||
|
labels: {
|
||||||
|
formatter: function(value) {
|
||||||
|
return new Date(value).toLocaleTimeString();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
title: {
|
||||||
|
text: 'Real Time Data Usage'
|
||||||
|
},
|
||||||
|
labels: {
|
||||||
|
formatter: function(value) {
|
||||||
|
return formatBytes(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
x: {
|
||||||
|
format: 'HH:mm:ss'
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
formatter: function(value) {
|
||||||
|
return formatBytes(value) + 'ps';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: false,
|
||||||
|
formatter: function(value) {
|
||||||
|
return formatBytes(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
chart = new ApexCharts(document.querySelector("#chart"), options);
|
||||||
|
chart.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
var dailyChart; // Declare dailyChart variable globally
|
||||||
|
|
||||||
|
function createDailyChart(username) {
|
||||||
|
var currentDate = new Date();
|
||||||
|
var startOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).getTime();
|
||||||
|
var endOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getTime();
|
||||||
|
|
||||||
|
generateDailyData(username)
|
||||||
|
.then(dailyData => {
|
||||||
|
var dailyTotals = dailyData.download.map((item, index) => ({
|
||||||
|
x: item.x,
|
||||||
|
y: item.y + dailyData.upload[index].y
|
||||||
|
}));
|
||||||
|
|
||||||
|
if (dailyChart) {
|
||||||
|
dailyChart.destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
chart: {
|
||||||
|
height: 350,
|
||||||
|
type: 'bar',
|
||||||
|
animations: {
|
||||||
|
enabled: true,
|
||||||
|
easing: 'linear',
|
||||||
|
speed: 800,
|
||||||
|
animateGradually: {
|
||||||
|
enabled: true,
|
||||||
|
delay: 150
|
||||||
|
},
|
||||||
|
dynamicAnimation: {
|
||||||
|
enabled: true,
|
||||||
|
speed: 200
|
||||||
|
}
|
||||||
|
},
|
||||||
|
toolbar: {
|
||||||
|
show: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
bar: {
|
||||||
|
horizontal: false,
|
||||||
|
columnWidth: '15%',
|
||||||
|
endingShape: 'rounded'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
show: true,
|
||||||
|
width: 2,
|
||||||
|
colors: ['transparent']
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: 'Download',
|
||||||
|
data: dailyData.upload
|
||||||
|
}, {
|
||||||
|
name: 'Upload',
|
||||||
|
data: dailyData.download
|
||||||
|
}, {
|
||||||
|
name: 'Daily Totals',
|
||||||
|
data: dailyTotals
|
||||||
|
}],
|
||||||
|
xaxis: {
|
||||||
|
type: 'datetime',
|
||||||
|
min: startOfMonth,
|
||||||
|
max: endOfMonth,
|
||||||
|
labels: {
|
||||||
|
formatter: function(value) {
|
||||||
|
return new Date(value).toLocaleDateString();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
title: {
|
||||||
|
text: 'Total Usage'
|
||||||
|
},
|
||||||
|
labels: {
|
||||||
|
formatter: function(value) {
|
||||||
|
return formatBytesPerSecond(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
opacity: 1
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
y: {
|
||||||
|
formatter: function(val) {
|
||||||
|
return formatBytes(val);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
responsive: [
|
||||||
|
{
|
||||||
|
breakpoint: 480,
|
||||||
|
options: {
|
||||||
|
plotOptions: {
|
||||||
|
bar: {
|
||||||
|
columnWidth: '100%'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
dailyChart = new ApexCharts(document.querySelector("#dailyChart"), options);
|
||||||
|
dailyChart.render();
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error("Failed to fetch daily usage data:", error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========================================== NEW FITUR ==========================================//
|
||||||
|
function generateDailyData(username, startDate, endDate) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
$j.ajax({
|
||||||
|
url: '{$_url}plugin/pppoe_monitor_router_daily_data_usage/{$router}',
|
||||||
|
data: {
|
||||||
|
username: username,
|
||||||
|
start_date: startDate,
|
||||||
|
end_date: endDate
|
||||||
|
},
|
||||||
|
dataType: 'json',
|
||||||
|
success: function(data) {
|
||||||
|
console.log("Raw data from server for username", username, ":", data);
|
||||||
|
|
||||||
|
var dailyData = {
|
||||||
|
download: [],
|
||||||
|
upload: []
|
||||||
|
};
|
||||||
|
|
||||||
|
// Iterate over dates in data and find the correct user data
|
||||||
|
for (var date in data) {
|
||||||
|
var users = data[date].users;
|
||||||
|
|
||||||
|
// Handle username as number case
|
||||||
|
var userData = users.find(user => user.username === username || user.username == parseInt(username));
|
||||||
|
|
||||||
|
if (userData) {
|
||||||
|
var rxBytes = convertToBytes(userData.rx);
|
||||||
|
var txBytes = convertToBytes(userData.tx);
|
||||||
|
|
||||||
|
// Store data in dailyData based on date
|
||||||
|
dailyData.download.push({ x: new Date(date).getTime(), y: rxBytes });
|
||||||
|
dailyData.upload.push({ x: new Date(date).getTime(), y: txBytes });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("Filtered daily data for username", username, ":", dailyData);
|
||||||
|
resolve(dailyData);
|
||||||
|
},
|
||||||
|
error: function(xhr, textStatus, errorThrown) {
|
||||||
|
console.error("AJAX Error in generateDailyData:", textStatus, errorThrown);
|
||||||
|
console.log("Status:", xhr.status);
|
||||||
|
console.log("Response Text:", xhr.responseText);
|
||||||
|
reject(errorThrown);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function convertToBytes(value) {
|
||||||
|
let [number, unit] = value.split(' ');
|
||||||
|
number = parseFloat(number);
|
||||||
|
switch (unit) {
|
||||||
|
case 'GB':
|
||||||
|
return number * 1024 * 1024 * 1024;
|
||||||
|
case 'MB':
|
||||||
|
return number * 1024 * 1024;
|
||||||
|
case 'KB':
|
||||||
|
return number * 1024;
|
||||||
|
default:
|
||||||
|
return number;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// ========================================== NEW FITUR ==========================================//
|
||||||
|
function formatBytesPerSecond(bytes) {
|
||||||
|
if (bytes === 0) {
|
||||||
|
return '0 Bps';
|
||||||
|
}
|
||||||
|
var k = 1024;
|
||||||
|
var sizes = ['Bps', 'KBps', 'MBps', 'GBps', 'TBps', 'PBps', 'EBps', 'ZBps', 'YBps'];
|
||||||
|
var i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||||
|
var formattedValue = parseFloat((bytes / Math.pow(k, i)).toFixed(2));
|
||||||
|
return formattedValue + ' ' + sizes[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fungsi untuk mengubah ukuran dalam byte menjadi format yang lebih mudah dibaca
|
||||||
|
function formatBytes(bytes, decimals = 2) {
|
||||||
|
if (bytes === 0) return '0 Bytes';
|
||||||
|
const k = 1024;
|
||||||
|
const dm = decimals < 0 ? 0 : decimals;
|
||||||
|
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||||
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to update traffic values and icons
|
||||||
|
function updateTrafficValues() {
|
||||||
|
var username = $j('#modalUsername').text().trim();
|
||||||
|
var interfaceValue = $j('#interface').val();
|
||||||
|
|
||||||
|
if (!username || !interfaceValue) {
|
||||||
|
console.error("Username or interface is undefined or empty.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
$j.ajax({
|
||||||
|
url: '{$_url}plugin/pppoe_monitor_router_traffic/{$router}',
|
||||||
|
dataType: 'json',
|
||||||
|
data: { username: username, interface: interfaceValue },
|
||||||
|
success: function(data) {
|
||||||
|
var timestamp = new Date().getTime();
|
||||||
|
var txData = parseInt(data.rows.tx[0]) || 0;
|
||||||
|
var rxData = parseInt(data.rows.rx[0]) || 0;
|
||||||
|
|
||||||
|
// Log data tx dan rx untuk debugging
|
||||||
|
console.log('txData:', txData, 'rxData:', rxData);
|
||||||
|
|
||||||
|
// Update chart data
|
||||||
|
chartData.txData.push({ x: timestamp, y: txData });
|
||||||
|
chartData.rxData.push({ x: timestamp, y: rxData });
|
||||||
|
|
||||||
|
var maxDataPoints = 10;
|
||||||
|
if (chartData.txData.length > maxDataPoints) {
|
||||||
|
chartData.txData.shift();
|
||||||
|
chartData.rxData.shift();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update series on the chart
|
||||||
|
chart.updateSeries([
|
||||||
|
{ name: 'Download', data: chartData.txData },
|
||||||
|
{ name: 'Upload', data: chartData.rxData }
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Find the icon element for the specific user based on username
|
||||||
|
var userRow = $j('#ppp-table tbody tr').filter(function() {
|
||||||
|
return $j(this).find('td').eq(1).text().trim() === username;
|
||||||
|
});
|
||||||
|
|
||||||
|
var iconElement = userRow.find('.traffic-icon');
|
||||||
|
|
||||||
|
// Define thresholds for traffic levels
|
||||||
|
var thresholdHigh = 2000; // Adjust these values as needed
|
||||||
|
var thresholdMedium = 1500; // Adjust these values as needed
|
||||||
|
|
||||||
|
// Adjust icon color based on traffic levels
|
||||||
|
if (txData > thresholdHigh || rxData > thresholdHigh) {
|
||||||
|
iconElement.removeClass('traffic-icon-green traffic-icon-yellow').addClass('traffic-icon-red');
|
||||||
|
} else if (txData > thresholdMedium || rxData > thresholdMedium) {
|
||||||
|
iconElement.removeClass('traffic-icon-green traffic-icon-red').addClass('traffic-icon-yellow');
|
||||||
|
} else {
|
||||||
|
iconElement.removeClass('traffic-icon-yellow traffic-icon-red').addClass('traffic-icon-green');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error: function(xhr, textStatus, errorThrown) {
|
||||||
|
console.error("Status: " + textStatus);
|
||||||
|
console.error("Error: " + errorThrown);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Function to update traffic icons based on table data
|
||||||
|
function updateTrafficIcons(response) {
|
||||||
|
$j('#ppp-table tbody tr').each(function(index) {
|
||||||
|
var row = table.row(this).data();
|
||||||
|
if (row) {
|
||||||
|
var txValue = parseInt(row.tx, 10);
|
||||||
|
var rxValue = parseInt(row.rx, 10);
|
||||||
|
var iconElement = $j(this).find('.traffic-icon');
|
||||||
|
|
||||||
|
var maxLimit = row.max_limit;
|
||||||
|
if (maxLimit === '1M/2M') {
|
||||||
|
if (txValue >= 2 * 1024 * 1024 || rxValue >= 2 * 1024 * 1024) {
|
||||||
|
iconElement.removeClass().addClass('traffic-icon traffic-icon-red');
|
||||||
|
} else if (txValue >= 1.5 * 1024 * 1024 || rxValue >= 1.5 * 1024 * 1024) {
|
||||||
|
iconElement.removeClass().addClass('traffic-icon traffic-icon-yellow');
|
||||||
|
} else {
|
||||||
|
iconElement.removeClass().addClass('traffic-icon traffic-icon-green');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Default logic for other max limits
|
||||||
|
if (txValue >= 2 * 1024 * 1024 || rxValue >= 2 * 1024 * 1024) {
|
||||||
|
iconElement.removeClass().addClass('traffic-icon traffic-icon-red');
|
||||||
|
} else if (txValue >= 1.5 * 1024 * 1024 || rxValue >= 1.5 * 1024 * 1024) {
|
||||||
|
iconElement.removeClass().addClass('traffic-icon traffic-icon-yellow');
|
||||||
|
} else {
|
||||||
|
iconElement.removeClass().addClass('traffic-icon traffic-icon-green');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Donation Popup
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
setTimeout(function() {
|
||||||
|
document.getElementById('donationPopup').style.display = 'flex';
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('donationPopup').querySelector('.modalsupport-close').addEventListener('click', function() {
|
||||||
|
document.getElementById('donationPopup').style.display = 'none';
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('click', function(event) {
|
||||||
|
if (event.target === document.getElementById('donationPopup')) {
|
||||||
|
document.getElementById('donationPopup').style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('donationPopup').querySelector('.donate-button').addEventListener('click', function() {
|
||||||
|
window.open('https://buymeacoffee.com/kevindonisaputra', '_blank');
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
{include file="sections/footer.tpl"}
|
||||||
Loading…
x
Reference in New Issue
Block a user