Devices:
OLT ONT Implementation Devices Snmp Version Devicetypes: Olt Flag
This commit is contained in:
Spitzer_Daniel
@@ -12,6 +12,132 @@
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.sp-table-border {
|
||||
border: 1px solid #bfbfbf;
|
||||
border-radius: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sp-table-border > tbody {
|
||||
padding: 10px;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.sp-table-border > thead td {
|
||||
padding: 10px 0px 0px 0px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.sp-port-lines {
|
||||
width: 50px;
|
||||
border-bottom: 1px solid #bfbfbf;
|
||||
padding-top: 22px;
|
||||
}
|
||||
|
||||
#olt-splitter td {
|
||||
height: 30px;
|
||||
width: 150px;
|
||||
border: 1px solid #bfbfbf;
|
||||
margin-top: 15px;
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#olt-splitter-table thead {
|
||||
padding: 10px 0px 0px 0px;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
|
||||
#olt-splitter-table thead td {
|
||||
padding-top: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sp-splitter-count {
|
||||
padding: 3px 10px 3px 10px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.sp-splitter-count-left {
|
||||
padding: 3px 0px 3px 10px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.sp-splitter-count-right {
|
||||
padding: 3px 10px 3px 0px;
|
||||
width: 50px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.sp-splitter-count-edit {
|
||||
-ms-user-select: None;
|
||||
-moz-user-select: None;
|
||||
-webkit-user-select: None;
|
||||
user-select: None;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sp-splitter-count-show {
|
||||
width: 46px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
padding-top: 2px;
|
||||
-ms-user-select: None;
|
||||
-moz-user-select: None;
|
||||
-webkit-user-select: None;
|
||||
user-select: None;
|
||||
}
|
||||
|
||||
.sp-white-border {
|
||||
border-color: #fff !important;
|
||||
}
|
||||
|
||||
.sp-ont-text {
|
||||
padding: 0px 5px 0px 5px;
|
||||
}
|
||||
|
||||
.fa-circle-check {
|
||||
color: #07ad2b;
|
||||
}
|
||||
|
||||
.fa-circle-xmark {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.fa-rotate-right {
|
||||
color: #0d6efd;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.ont-refresh-span, .ontdetail-refresh-span {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
margin-right: 50px;
|
||||
min-height: 1px;
|
||||
color: #0d6efd;
|
||||
}
|
||||
|
||||
.text-decoration-underline {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.condensed-ont th {
|
||||
padding: 6px 0.85rem 6px 0.85rem !important;
|
||||
}
|
||||
|
||||
.condensed-ont td {
|
||||
padding: 6px 0.85rem 6px 0.85rem !important;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<!-- start page title -->
|
||||
<div class="row">
|
||||
@@ -48,8 +174,9 @@ if ($devices->power != "0.0") {
|
||||
} else {
|
||||
$power = $devices->devicetype->power;
|
||||
}
|
||||
|
||||
//var_dump($customer);
|
||||
?>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
@@ -238,12 +365,12 @@ if ($devices->power != "0.0") {
|
||||
$configfileCompressed = trim($config->config_compressed);
|
||||
$configid = $config->id;
|
||||
if ($configfileCleartext && $configfileCompressed) :
|
||||
$configLinks = '<a href="https://' . $_SERVER['SERVER_NAME'] . '/Device/api?do=getconfig&id='. $configid.'&format=txt&filename=' . $configfileCleartext . '">
|
||||
$configLinks = '<a href="https://' . $_SERVER['SERVER_NAME'] . '/Device/api?do=getconfig&id=' . $configid . '&format=txt&filename=' . $configfileCleartext . '">
|
||||
TXT</a> / <a
|
||||
href="https://' . $_SERVER['SERVER_NAME'] . '/Device/api?do=getconfig&id='. $configid.'&format=xml&filename=' . $configfileCompressed . '">
|
||||
href="https://' . $_SERVER['SERVER_NAME'] . '/Device/api?do=getconfig&id=' . $configid . '&format=xml&filename=' . $configfileCompressed . '">
|
||||
XML</a>';
|
||||
elseif ($configfileCleartext || $configfileCompressed) :
|
||||
$configLinks = '<a href="https://' . $_SERVER['SERVER_NAME'] . '/Device/api?do=getconfig&id='. $configid.'&format=txt&filename=' . $configfileCleartext .$configfileCompressed . '">
|
||||
$configLinks = '<a href="https://' . $_SERVER['SERVER_NAME'] . '/Device/api?do=getconfig&id=' . $configid . '&format=txt&filename=' . $configfileCleartext . $configfileCompressed . '">
|
||||
TXT</a>';
|
||||
|
||||
endif;
|
||||
@@ -269,13 +396,239 @@ if ($devices->power != "0.0") {
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
if ($devices->devicetype->olt && TT_MBI_API_ENABLE) :
|
||||
?>
|
||||
<button id="olt-info-button" class="btn btn-success">OLT/ONT Infos</button>
|
||||
<div class="spinner-big text-info" style="display:none">
|
||||
<i class="fas fa-spinner fa-spin spinner-ico font-24 "></i>
|
||||
</div>
|
||||
<div id="olt-info" class="row pt-1 mt-1" style="border-top:1px dotted #428bca7d;display: none">
|
||||
<div class="col-7 card-border">
|
||||
<div>
|
||||
<h4>OLT/ONT Informationen </h4>
|
||||
<h5><span id="olt-uptime"></span></h5>
|
||||
</div>
|
||||
<div id="olt-body"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="olt-datatables" class="col-5 card-border" style="display: none">
|
||||
<div>
|
||||
<h4></h4>
|
||||
</div>
|
||||
<div>
|
||||
<table style="font-size:12px;" id="datatable"
|
||||
class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Port-ID</th>
|
||||
<th>Kdnr.</th>
|
||||
<th>Kunde</th>
|
||||
<th class="text-center">Stat.</th>
|
||||
<th class="text-center">Serial</th>
|
||||
|
||||
|
||||
</tr>
|
||||
<tr id="filterrow">
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="modal fade" id="ontDetailInfo" tabindex="-1" role="dialog"
|
||||
aria-labelledby="ontDetailInfoLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="ontDetailInfoLabel">ONT Detail Information</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
|
||||
|
||||
<h4>Allgemein<span class="ml-2"><i id="ont-deteil-spinner"
|
||||
class="fas fa-spinner fa-spin spinner-ico font-19 text-info"
|
||||
style="display: none;"></i></span>
|
||||
<span id="ont-detail-refresh" style="width: 20px;"
|
||||
class="ontdetail-refresh-span"><i style="display: unset"
|
||||
title="Refresh"
|
||||
class="fa-solid fa-rotate-right "></i></span>
|
||||
</h4>
|
||||
<table class="table condensed-ont ">
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<td class="text-right pr-3 ont-line-stat"
|
||||
id="ont-detail-status">N/A
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Kdnr./Kunde</th>
|
||||
<td class="text-right pr-3 ont-line-stat"
|
||||
id="ont-detail-kd">N/A
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>ONT Typ</th>
|
||||
<td class="text-right pr-3 ont-line-stat"
|
||||
id="ont-detail-ontequip">N/A
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Seriennummer</th>
|
||||
<td class="text-right pr-3 ont-line-stat"
|
||||
id="ont-detail-serial">N/A
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Lineprofile / Srvprofile</th>
|
||||
<td class="text-right pr-3"><span class="ont-line-stat"
|
||||
id="ont-detail-lineprofile">N/A</span>
|
||||
/ <span class="ont-line-stat"
|
||||
id="ont-detail-serviceeprofile">N/A</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Version/Software Version</th>
|
||||
<td class="text-right pr-3"><span class="ont-line-stat"
|
||||
id="ont-detail-ontversion">N/A</span>
|
||||
/ <span class="ont-line-stat"
|
||||
id="ont-detail-ontsoftwarever">N/A</span></td>
|
||||
</tr>
|
||||
<!-- <tr>-->
|
||||
<!-- <th>Temperatur</th>-->
|
||||
<!-- <td class="text-right pr-3" ><span id="ont-detail-temp">N/A</span> °C</td>-->
|
||||
<!-- </tr>-->
|
||||
<tr>
|
||||
<th>RX-Pegel OLT</th>
|
||||
<td class="text-right pr-3"><span class="ont-line-stat"
|
||||
id="ont-detail-rxolt">N/A</span>
|
||||
dBm
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>RX/TX ONT</th>
|
||||
<td class="text-right pr-3"><span id="ont-detail-rx"
|
||||
class="ont-line-stat">N/A</span>
|
||||
dBm / <span class="ont-line-stat"
|
||||
id="ont-detail-tx">N/A</span> dBm
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Leitungslänge</th>
|
||||
<td class="text-right pr-3"><span id="ont-detail-len"
|
||||
class="ont-line-stat">N/A</span>
|
||||
Meter
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Uptime</th>
|
||||
<td class="text-right pr-3 ont-line-stat"
|
||||
id="ont-detail-uptime">N/A
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Zuletzt Up</th>
|
||||
<td class="text-right pr-3 ont-line-stat"
|
||||
id="ont-detail-lastonline">N/A
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Zuletzt Down</th>
|
||||
<td class="text-right pr-3 ">
|
||||
<span id="ont-detail-lastofflinecause" class="ont-line-stat"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
title=""></span>
|
||||
|
||||
<span class="ml-3 ont-line-stat"
|
||||
id="ont-detail-lastoffline">N/A</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Letzter Dying Gasp</th>
|
||||
<td class="text-right pr-3 ont-line-stat"
|
||||
id="ont-detail-lastdying">N/A
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<h4>CPE Port</h4>
|
||||
<table class="table table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center">Port ID</th>
|
||||
<th class="text-center">Port Status</th>
|
||||
<th class="text-center">Port Typ</th>
|
||||
<th class="text-center">Speed</th>
|
||||
<th class="text-center">Duplex</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="ont-line-stat text-center"
|
||||
id="ont-detail-ethid"></td>
|
||||
<td class="ont-line-stat text-center" id="ont-detail-eth"></td>
|
||||
<td class="ont-line-stat text-center"
|
||||
id="ont-detail-ethporttype"></td>
|
||||
<td class="ont-line-stat text-center"
|
||||
id="ont-detail-ethspeed"></td>
|
||||
<td class="ont-line-stat text-center"
|
||||
id="ont-detail-ethdpx"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h4>Service Ports</h4>
|
||||
<table class="table condensed-ont">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Vlan CPE</th>
|
||||
<th>Vlan NNI</th>
|
||||
<th>Status</th>
|
||||
<th>Downstream</th>
|
||||
<th>Upstream</th>
|
||||
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="ont-serviceports">
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
endif;
|
||||
?>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php if ($devices->devicetype->devicemanufactor->config_backup > count()):
|
||||
|
||||
$year = date("Y", time());
|
||||
@@ -311,12 +664,526 @@ if ($devices->power != "0.0") {
|
||||
<?php endif; ?>
|
||||
|
||||
<script type="text/javascript">
|
||||
const customers =<?php echo json_encode($customer); ?>;
|
||||
$(document).ready(function () {
|
||||
|
||||
|
||||
$('#create-backup-href').click(function () {
|
||||
|
||||
$('#create-backup-load').html('<i class="fas fa-spinner fa-spin spinner-ico"></i>');
|
||||
$('#create-backup-load').html('<i class="fas fa-spinner fa-spin spinner-ico text-info"></i>');
|
||||
$('#create-backup-button-text').text('Backup wird erstellt.')
|
||||
});
|
||||
|
||||
$("body").on("click", "#olt-info-button", function () {
|
||||
$('.spinner-big').show();
|
||||
$('#olt-info-button').remove();
|
||||
|
||||
|
||||
$.getJSON("https://<?= $_SERVER['SERVER_NAME']; ?>/Device/api?do=getoltinfo&ip=<?= $devices->ip; ?>", {})
|
||||
.done(function (data) {
|
||||
if (data.success == false) {
|
||||
$('#olt-body').text('Keine OLT/ONT Daten verfügbar');
|
||||
} else {
|
||||
|
||||
$('#olt-body').append(`<div >
|
||||
<table class="sp-table-border float-left" >
|
||||
<thead><tr><td>OLT</td></tr></thead>
|
||||
<tbody id="olt-table"></tbody></table>
|
||||
<table id="olt-port-table" class="float-left" >
|
||||
<thead><tr><td style="height: 30px;"></td></tr></thead>
|
||||
<tbody id="olt-ports"></tbody></table>
|
||||
<table id="olt-splitter-table" class=" float-left" >
|
||||
<thead><tr><td>Splitter</td></tr></thead>
|
||||
<tbody id="olt-splitter"></tbody></table>
|
||||
</div>`);
|
||||
var datacounter = 1;
|
||||
let customername;
|
||||
let customerid;
|
||||
$('#olt-uptime').html("(<b>Uptime:</b> " + data.data.olt.uptime + ")")
|
||||
$.each(data.data.ports, function (i, item) {
|
||||
$('#olt-table').append('<tr><td class="p-2">' + item['port'] + '</td></tr>');
|
||||
$('#olt-ports').append('<tr><td data-oltport=' + i + ' class="sp-port-lines" "> </td></tr>');
|
||||
if (typeof (item['ont']) === "object") {
|
||||
var online = 0;
|
||||
var offline = 0;
|
||||
var allonts = 0;
|
||||
|
||||
$.each(item['ont'], function (o, ont) {
|
||||
var status;
|
||||
if (ont.status == "1") {
|
||||
online++;
|
||||
status = '<i class="fa-regular fa-circle-check"></i>';
|
||||
|
||||
} else if (ont.status == "2") {
|
||||
offline++;
|
||||
status = '<i class="fa-regular fa-circle-xmark"></i></i>'
|
||||
}
|
||||
allonts++;
|
||||
if (typeof customers[ont['serial']] !== "undefined") {
|
||||
customerid = customers[ont['serial']]['customer_number'];
|
||||
if (customers[ont['serial']]['lastname'] != "") {
|
||||
customername = customers[ont['serial']]['lastname'] + " " + customers[ont['serial']]['firstname'];
|
||||
} else {
|
||||
customername = "" + customers[ont['serial']]['company'] + " (C)";
|
||||
}
|
||||
} else {
|
||||
customername = "N/A";
|
||||
customerid = "N/A";
|
||||
}
|
||||
$('#datatable tbody').append(`
|
||||
<tr>
|
||||
<td class="sp-ont-text">` + item['portshort'] + `/` + o + `</td>
|
||||
<td class="sp-ont-text">` + customerid + `</td>
|
||||
<td class="sp-ont-text">` + customername + `</td>
|
||||
<td class="sp-ont-text text-center">` + status + `</td>
|
||||
|
||||
<td class="sp-ont-text"><div class="text-decoration-underline" data-port="` + item['portsimple'] + `" data-ontid="` + o + `" data-portid="` + item['portindex'] + `" data-toggle="modal" data-target="#ontDetailInfo">` + ont['serial'] + `</div></td>
|
||||
</tr>
|
||||
`);
|
||||
|
||||
});
|
||||
$('#olt-splitter').append('<tr><td class=""><span title="Doppelklick zum editieren" data-portid="' + item['portindex'] + '" class="float-left sp-splitter-count-left ">' + allonts + '</span><span data-shown="0" data-port="' + item['portsimple'] + '" data-portid="' + item['portindex'] + '" data-splitcounter="' + datacounter + '" data-oltport=' + i + ' class="sp-splitter-count-show">show</span><span class="float-right sp-splitter-count-right"><span style="color: green">' + online + '</span>/<span style="color: red">' + offline + '</span></span></td></tr>');
|
||||
} else {
|
||||
$('#olt-splitter').append('<tr><td class=""><span title="Doppelklick zum editieren" data-portid="' + item['portindex'] + '" class="float-left sp-splitter-count-left ">N/A</span><span class="float-right sp-splitter-count-right">N/A</span></td></tr>');
|
||||
}
|
||||
datacounter++;
|
||||
});
|
||||
$('#olt-datatables').show();
|
||||
}
|
||||
|
||||
$('.spinner-big').hide();
|
||||
$('#olt-info').show();
|
||||
|
||||
}).done(function (data) {
|
||||
var hidesearch = [3];
|
||||
let table;
|
||||
if (typeof hidesearch === "undefined") {
|
||||
var hidesearch;
|
||||
hidesearch = [100];
|
||||
}
|
||||
|
||||
if (typeof cstmdom === "undefined") {
|
||||
var cstmdom;
|
||||
cstmdom = "flBrtip";
|
||||
|
||||
}
|
||||
if (typeof columndefs === "undefined") {
|
||||
var columndefs;
|
||||
columndefs = "";
|
||||
|
||||
}
|
||||
|
||||
|
||||
$('#filterrow th').each(function (i) {
|
||||
let title = $('#datatable thead th').eq($(this).index()).text();
|
||||
|
||||
if (hidesearch.includes($(this).index())) {
|
||||
|
||||
} else {
|
||||
$(this).html('<input type="text" placeholder="' + title + '" class="form-control" data-index="' + i + '" value="" />');
|
||||
}
|
||||
});
|
||||
|
||||
table = $('#datatable').DataTable({
|
||||
buttons: [
|
||||
{
|
||||
extend: 'excelHtml5',
|
||||
text: 'XLSX Export',
|
||||
className: 'btn-success margina'
|
||||
|
||||
}
|
||||
], columnDefs: [
|
||||
columndefs
|
||||
],
|
||||
"language": {
|
||||
"url": "/datatables/json/german.json"
|
||||
},
|
||||
orderCellsTop: true,
|
||||
stateSave: true,
|
||||
"initComplete": function () {
|
||||
$('#datatable_filter').append('<i id="clear_cookie" class="fas fa-times clear-fa" title="Filter löschen" aria-hidden="true" ></i>');
|
||||
$('#clear_cookie').click(function () {
|
||||
$('input').val('');
|
||||
|
||||
table.search('').columns().search('').draw();
|
||||
});
|
||||
},
|
||||
"dom": cstmdom
|
||||
|
||||
});
|
||||
|
||||
$('#filterrow').on('keyup', 'input', function () {
|
||||
|
||||
table
|
||||
.column($(this).data('index'))
|
||||
.search(this.value)
|
||||
.draw();
|
||||
|
||||
|
||||
});
|
||||
let state = table.state.loaded();
|
||||
if (state) {
|
||||
table.columns().eq(0).each(function (colIdx) {
|
||||
var colSearch = state.columns[colIdx].search;
|
||||
|
||||
if (colSearch.search) {
|
||||
|
||||
|
||||
$('#filterrow').find("[data-index='" + colIdx + "']").val(colSearch.search);
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
table.draw();
|
||||
}
|
||||
});
|
||||
;
|
||||
});
|
||||
|
||||
|
||||
$("body").on("dblclick", ".sp-splitter-count-edit", function () {
|
||||
var oldval = $(this).text();
|
||||
var select8;
|
||||
var select16;
|
||||
var select32;
|
||||
|
||||
if (oldval == "8") {
|
||||
select8 = 'selected="selected"';
|
||||
} else if (oldval == "16") {
|
||||
select16 = 'selected="selected"';
|
||||
} else if (oldval == "32") {
|
||||
select32 = 'selected="selected"';
|
||||
}
|
||||
|
||||
|
||||
$(this).html(`<SELECT id="change-splitter-ports" class="">
|
||||
<option value="0">N/A</option>
|
||||
<option ` + select8 + ` value="8">8</option>
|
||||
<option ` + select16 + ` value="16">16</option>
|
||||
<option ` + select32 + ` value="32">32</option>
|
||||
`);
|
||||
|
||||
$("#change-splitter-ports").trigger("focus");
|
||||
});
|
||||
|
||||
$("body").on("blur", "#change-splitter-ports", function () {
|
||||
|
||||
var portid = $(this).closest('span').data('portid');
|
||||
$.getJSON("https://<?= $_SERVER['SERVER_NAME']; ?>/Device/api?do=changeoltsplitter&id=<?= $devices->id; ?>&portid=" + portid + "&ports=" + $(this).val(), {})
|
||||
.done(function (data) {
|
||||
|
||||
});
|
||||
$(this).closest('span').text($('option:selected', this).text());
|
||||
|
||||
|
||||
});
|
||||
|
||||
$("body").on("click", ".sp-splitter-count-show", function () {
|
||||
if ($(this).hasClass('noclick')) {
|
||||
return;
|
||||
}
|
||||
var thisspan = $(this);
|
||||
$('#ont-line-table').remove();
|
||||
$('#ont-table').remove();
|
||||
$('.sp-splitter-count-show').text('show');
|
||||
|
||||
if ($(this).data('shown') == "1") {
|
||||
$('.sp-splitter-count-show').each(function (index) {
|
||||
$(this).data('shown', '0');
|
||||
});
|
||||
} else if ($(this).data('shown') == "0") {
|
||||
$('.sp-splitter-count-show').addClass('noclick');
|
||||
$(this).html('<i class="fas fa-spinner fa-spin spinner-ico text-info"></i>');
|
||||
$(this).data('shown', '1');
|
||||
var oltport = $(this).data('oltport');
|
||||
// $('#olt-body').append(`<div class="spinner-border text-primary float-right" role="status">
|
||||
// <span class="visually-hidden"></span>
|
||||
// </div>`);
|
||||
$('#olt-body').append(`<table style="display:none;" id="ont-line-table" data-oltport="` + $(this).data('oltport') + `" class="float-left">` + $('#olt-port-table').html() + `</table>`);
|
||||
|
||||
$("#ont-line-table .sp-port-lines").each(function (index) {
|
||||
if (oltport != $(this).data('oltport')) {
|
||||
$(this).addClass('sp-white-border');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
$('#olt-body').append(` <table id="ont-table" data-portid="` + thisspan.data('portid') + `" style="text-align: center; display:none ; min-height: 500px;" class="sp-table-border float-left" >
|
||||
<thead>
|
||||
<tr><td><span class="ml-5">ONT's </span><span style="width: 20px;" class="float-right mr-4 ont-refresh-span "><i title="Refresh" class="fa-solid fa-rotate-right ont-refresh" ></i></span></td></tr>
|
||||
</thead>
|
||||
<tbody style="font-size:13px;" id="ont-table-body"><tr>
|
||||
|
||||
<th class="sp-ont-text">ONT ID</th>
|
||||
|
||||
<th class="sp-ont-text" title="Online Status">Stat.</th>
|
||||
<th class="sp-ont-text">Type</th>
|
||||
<th class="sp-ont-text">Serial</th>
|
||||
<th class="sp-ont-text">Distance</th>
|
||||
<!-- <th class="sp-ont-text">RX OLT Power</th>-->
|
||||
<th class="sp-ont-text">Eth</th>
|
||||
<th class="sp-ont-text">Eth Spd/Dpx</th>
|
||||
</tr></tbody></table>`);
|
||||
|
||||
$.getJSON("https://<?= $_SERVER['SERVER_NAME']; ?>/Device/api?do=getoltinfo&ip=<?= $devices->ip; ?>&portid=" + thisspan.data('portid'), {})
|
||||
.done(function (data) {
|
||||
$.each(data.data[0]['ont'], function (o, ont) {
|
||||
var status;
|
||||
if (ont.status == "1") {
|
||||
status = '<i class="fa-regular fa-circle-check"></i>';
|
||||
} else {
|
||||
status = '<i class="fa-regular fa-circle-xmark"></i></i>'
|
||||
}
|
||||
$('#ont-table-body').append(`<tr>
|
||||
<td class="sp-ont-text">` + o + `</td>
|
||||
|
||||
<td class="sp-ont-text">` + status + `</td>
|
||||
<td class="sp-ont-text text-center ont-equip"><i class="fas fa-spinner fa-spin spinner-ico text-info"></i></td>
|
||||
<td class="sp-ont-text"><div class="text-decoration-underline" data-port="` + thisspan.data('port') + `" data-ontid="` + o + `" data-portid="` + thisspan.data('portid') + `" data-snr=` + ont['serial'] + ` data-toggle="modal" data-target="#ontDetailInfo">` + ont['serial'] + `</div></td>
|
||||
<td class="sp-ont-text text-right">` + ont['len'] + ` (m)</td>
|
||||
<!-- <td class="sp-ont-text text-center ont-rxtx"><i class="fas fa-spinner fa-spin spinner-ico text-info"></i></td>-->
|
||||
<td class="sp-ont-text text-center ont-eth"><i class="fas fa-spinner fa-spin spinner-ico text-info"></i></td>
|
||||
<td class="sp-ont-text text-center"><span class="ont-ethspeed"><i class="fas fa-spinner fa-spin spinner-ico text-info"></i></span> <span class="ont-ethdpx"></span></td>
|
||||
</tr>`);
|
||||
});
|
||||
var onttablecount = Math.round($('#ont-table').height());
|
||||
var heightcount = thisspan.data('splitcounter') * 45 - onttablecount / 2;
|
||||
|
||||
var maxheighcount = $('#ont-line-table').height();
|
||||
if (heightcount < 0) {
|
||||
heightcount = 0;
|
||||
} else if (heightcount > maxheighcount - onttablecount) {
|
||||
heightcount = maxheighcount - onttablecount + 30;
|
||||
}
|
||||
$('#ont-table').css('margin-top', heightcount + "px");
|
||||
$('#ont-table').show();
|
||||
$('#ont-line-table').show();
|
||||
$('.spinner-border').remove();
|
||||
thisspan.text('hide');
|
||||
$('.sp-splitter-count-show').removeClass('noclick');
|
||||
|
||||
}).done(function (data) {
|
||||
$.getJSON("https://<?= $_SERVER['SERVER_NAME']; ?>/Device/api?do=getoltinfo&ip=<?= $devices->ip; ?>&portid=" + thisspan.data('portid') + "&adv=ext", {}).done(function (data) {
|
||||
if (thisspan.data('portid') == $('#ont-table').data('portid')) {
|
||||
$.each(data.data, function (o, ont) {
|
||||
var eth = ont['eth'];
|
||||
var rx = (ont['rx'] - 10000) / 100;
|
||||
var rxdez = rx.toFixed(2);
|
||||
if (rxdez > 10000) {
|
||||
rxdez = "N/A";
|
||||
}
|
||||
var tx = ont['tx'] / 100;
|
||||
var txdez = tx.toFixed(2);
|
||||
if (txdez > 10000) {
|
||||
txdez = "N/A";
|
||||
}
|
||||
if (ont['eth'] == "1") {
|
||||
eth = '<i class="fa-regular fa-circle-check"></i>';
|
||||
} else {
|
||||
eth = '<i class="fa-regular fa-circle-xmark"></i></i>'
|
||||
}
|
||||
|
||||
$('#ont-table .ont-eth').eq(o).html(eth);
|
||||
$('#ont-table .ont-ethspeed').eq(o).html(ont['ethspeed']);
|
||||
$('#ont-table .ont-ethdpx').eq(o).html(ont['ethdpx']);
|
||||
$('#ont-table .ont-rxtx').eq(o).text(rxdez + "/" + txdez);
|
||||
$('#ont-table .ont-equip').eq(o).text(ont['equip']);
|
||||
});
|
||||
}
|
||||
$('.ont-refresh').show();
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
});
|
||||
$("body").on("click", ".ont-refresh", function () {
|
||||
var thisspan = $(this).closest('table');
|
||||
$('.ont-refresh-span').html('<i class="fas fa-spinner fa-spin spinner-ico text-info"></i>');
|
||||
$('.sp-splitter-count-show').addClass('noclick');
|
||||
$.getJSON("https://<?= $_SERVER['SERVER_NAME']; ?>/Device/api?do=getoltinfo&ip=<?= $devices->ip; ?>&portid=" + thisspan.data('portid') + "&adv=ext", {}).done(function (data) {
|
||||
if (thisspan.data('portid') == $('#ont-table').data('portid')) {
|
||||
$.each(data.data, function (o, ont) {
|
||||
var eth = ont['eth'];
|
||||
var rx = (ont['rx'] - 10000) / 100;
|
||||
var rxdez = rx.toFixed(2);
|
||||
if (rxdez > 10000) {
|
||||
rxdez = "N/A";
|
||||
}
|
||||
var tx = ont['tx'] / 100;
|
||||
var txdez = tx.toFixed(2);
|
||||
if (txdez > 10000) {
|
||||
txdez = "N/A";
|
||||
}
|
||||
if (ont['eth'] == "1") {
|
||||
eth = '<i class="fa-regular fa-circle-check"></i>';
|
||||
} else {
|
||||
eth = '<i class="fa-regular fa-circle-xmark"></i></i>'
|
||||
}
|
||||
|
||||
$('#ont-table .ont-eth').eq(o).html(eth);
|
||||
$('#ont-table .ont-ethspeed').eq(o).html(ont['ethspeed']);
|
||||
$('#ont-table .ont-ethdpx').eq(o).html(ont['ethdpx']);
|
||||
$('#ont-table .ont-rxtx').eq(o).text(rxdez + "/" + txdez);
|
||||
$('#ont-table .ont-equip').eq(o).text(ont['equip']);
|
||||
});
|
||||
}
|
||||
$('.ont-refresh-span').html('<i title="Refresh" class="fa-solid fa-rotate-right ont-refresh"></i>');
|
||||
$('.ont-refresh').show();
|
||||
$('.sp-splitter-count-show').removeClass('noclick');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
$('#ontDetailInfo').on('show.bs.modal', function (event) {
|
||||
let customername;
|
||||
let customerid;
|
||||
|
||||
var button = $(event.relatedTarget) // Button that triggered the modal
|
||||
var portid = button.closest('table').data('portid');
|
||||
if (typeof customers[button.data('snr')] !== "undefined") {
|
||||
customerid = customers[button.data('snr')]['customer_number'];
|
||||
if (customers[button.data('snr')]['lastname'] != "") {
|
||||
customername = customerid + " / " + customers[button.data('snr')]['lastname'] + " " + customers[button.data('snr')]['firstname'];
|
||||
} else {
|
||||
customername = customerid + " / " + customers[button.data('snr')]['company'] + " (C)";
|
||||
}
|
||||
} else {
|
||||
customername = "N/A";
|
||||
customerid = "N/A";
|
||||
}
|
||||
|
||||
|
||||
$('.ont-line-stat').text('N/A');
|
||||
$('#ont-detail-kd').text(customername);
|
||||
$('#ont-detail-lastofflinecause').attr('data-original-title', '');
|
||||
|
||||
$('#ont-deteil-spinner').show();
|
||||
$('#ont-detail-refresh').hide();
|
||||
$('#ont-serviceports').empty();
|
||||
$('#ont-detail-refresh').data('portid', button.data('portid'));
|
||||
$('#ont-detail-refresh').data('port', button.data('port'));
|
||||
$('#ont-detail-refresh').data('ontid', button.data('ontid'));
|
||||
$('#ont-detail-refresh').data('snr', button.data('snr'));
|
||||
|
||||
$.getJSON("https://<?= $_SERVER['SERVER_NAME']; ?>/Device/api?do=getontinfo&ip=<?= $devices->ip; ?>&portid=" + button.data('portid') + "&ont=" + button.data('port') + '-' + button.data('ontid'), {}).done(function (data) {
|
||||
$.each(data.data.linestat, function (o, ont) {
|
||||
if (o == "lastofflinecausetitle") {
|
||||
$('#ont-detail-lastofflinecause').attr('data-original-title', ont);
|
||||
} else {
|
||||
$('#ont-detail-' + o).text(ont);
|
||||
}
|
||||
});
|
||||
|
||||
if (typeof data.data.serviceports === 'undefined') {
|
||||
$('#ont-serviceports').append(`
|
||||
<tr>
|
||||
<td class="text-center" colspan="5">Keine Serviceports definiert.</td>
|
||||
|
||||
</tr>
|
||||
`)
|
||||
} else {
|
||||
$.each(data.data.serviceports, function (o, ont) {
|
||||
var operstatus;
|
||||
if (ont.operstatus == "1") {
|
||||
operstatus = "<span style='color:green'>UP</span>";
|
||||
} else {
|
||||
operstatus = "<span style='color:red'>Down</span>";
|
||||
}
|
||||
$('#ont-serviceports').append(`
|
||||
<tr>
|
||||
<td class="text-center">` + ont.vlanmap + `</td>
|
||||
<td class="text-center">` + ont.vlan + `</td>
|
||||
<td class="text-center">` + operstatus + `</td>
|
||||
<td class="text-center">` + ont.traficdescrx + `</td>
|
||||
<td class="text-center">` + ont.traficdesctx + `</td>
|
||||
|
||||
</tr>
|
||||
`)
|
||||
});
|
||||
}
|
||||
|
||||
$('#ont-deteil-spinner').hide();
|
||||
$('#ont-detail-refresh').show();
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
$("body").on("click", "#ont-detail-refresh", function () {
|
||||
let customername;
|
||||
let customerid;
|
||||
|
||||
var button = $(this);
|
||||
var portid = button.closest('table').data('portid');
|
||||
if (typeof customers[button.data('snr')] !== "undefined") {
|
||||
customerid = customers[button.data('snr')]['customer_number'];
|
||||
if (customers[button.data('snr')]['lastname'] != "") {
|
||||
customername = customerid + " / " + customers[button.data('snr')]['lastname'] + " " + customers[button.data('snr')]['firstname'];
|
||||
} else {
|
||||
customername = customerid + " / " + customers[button.data('snr')]['company'] + " (C)";
|
||||
}
|
||||
} else {
|
||||
customername = "N/A";
|
||||
customerid = "N/A";
|
||||
}
|
||||
$('.ont-line-stat').text('N/A');
|
||||
$('#ont-detail-kd').text(customername);
|
||||
$('#ont-detail-lastofflinecause').attr('data-original-title', '');
|
||||
|
||||
$('#ont-deteil-spinner').show();
|
||||
$('#ont-detail-refresh').hide();
|
||||
$('#ont-serviceports').empty();
|
||||
$('#ont-detail-refresh').data('portid', button.data('portid'));
|
||||
$('#ont-detail-refresh').data('port', button.data('port'));
|
||||
$('#ont-detail-refresh').data('ontid', button.data('ontid'));
|
||||
$.getJSON("https://<?= $_SERVER['SERVER_NAME']; ?>/Device/api?do=getontinfo&ip=<?= $devices->ip; ?>&portid=" + button.data('portid') + "&ont=" + button.data('port') + '-' + button.data('ontid'), {}).done(function (data) {
|
||||
$.each(data.data.linestat, function (o, ont) {
|
||||
if (o == "lastofflinecausetitle") {
|
||||
$('#ont-detail-lastofflinecause').attr('data-original-title', ont);
|
||||
} else {
|
||||
$('#ont-detail-' + o).text(ont);
|
||||
}
|
||||
});
|
||||
|
||||
if (typeof data.data.serviceports === 'undefined') {
|
||||
$('#ont-serviceports').append(`
|
||||
<tr>
|
||||
<td class="text-center" colspan="5">Keine Serviceports definiert.</td>
|
||||
|
||||
</tr>
|
||||
`)
|
||||
} else {
|
||||
$.each(data.data.serviceports, function (o, ont) {
|
||||
var operstatus;
|
||||
if (ont.operstatus == "1") {
|
||||
operstatus = "<span style='color:green'>UP</span>";
|
||||
} else {
|
||||
operstatus = "<span style='color:red'>Down</span>";
|
||||
}
|
||||
$('#ont-serviceports').append(`
|
||||
<tr>
|
||||
<td class="text-center">` + ont.vlanmap + `</td>
|
||||
<td class="text-center">` + ont.vlan + `</td>
|
||||
<td class="text-center">` + operstatus + `</td>
|
||||
<td class="text-center">` + ont.traficdescrx + `</td>
|
||||
<td class="text-center">` + ont.traficdesctx + `</td>
|
||||
|
||||
</tr>
|
||||
`)
|
||||
});
|
||||
}
|
||||
|
||||
$('#ont-deteil-spinner').hide();
|
||||
$('#ont-detail-refresh').show();
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user