Scribd
Upload
6 views12 pages

Script

The document contains JavaScript code that integrates various libraries and plugins for a web application, including jQuery, Bootstrap, and socket.io. It handles notifications, audio alerts, and user interactions, such as exporting data and managing settings. The code also includes AJAX calls to retrieve and update notification counts and device information from an API.

Uploaded by

rico siburian
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views12 pages

Script

The document contains JavaScript code that integrates various libraries and plugins for a web application, including jQuery, Bootstrap, and socket.io. It handles notifications, audio alerts, and user interactions, such as exporting data and managing settings. The code also includes AJAX calls to retrieve and update notification counts and device information from an API.

Uploaded by

rico siburian
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 12

<script src="{{ asset('js/jquery.min.

js') }}"></script>

<script src="{{ asset('js/bootstrap.bundle.min.js') }}"></script>


<script src="{{ asset('plugins/bootstrap-select-1.14/dist/js/bootstrap-
select.js') }}"></script>
<script src="{{ asset('plugins/datatable/js/dataTables.bootstrap5.min.js')
}}"></script>
<script src="{{ asset('js/meus.js') }}"></script>
<script src="{{ asset('js/pace.min.js') }}"></script>
<script src="{{ asset('plugins/datatable/js/jquery.dataTables.min.js')
}}"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></
script>
<script src="{{ asset('plugins/simplebar/js/simplebar.min.js') }}"></script>
<script src="{{ asset('plugins/metismenu/js/metisMenu.min.js') }}"></script>
<script src="{{ asset('plugins/perfect-scrollbar/js/perfect-scrollbar.js')
}}"></script>
<script src="{{ asset('plugins/vectormap/jquery-jvectormap-2.0.2.min.js')
}}"></script>
<script src="{{ asset('plugins/vectormap/jquery-jvectormap-world-mill-
en.js') }}"></script>
<script src="{{ asset('plugins/chartjs/js/Chart.min.js') }}"></script>
<script src="{{ asset('plugins/chartjs/js/Chart.extension.js') }}"></script>
<script src="{{
asset('plugins/jquery.easy-pie-chart/jquery.easypiechart.min.js') }}"></script>
<script src="{{ asset('plugins/typeahead/dist/typeahead.bundle.min.js')
}}"></script>
<script src="{{ asset('plugins/select2/js/select2.min.js') }}"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script>
<script src="{{ asset('js/jquery.qtip.min.js') }}"></script>
<script src="{{ asset('js/moment.min.js') }}"></script>
<script src="{{ asset('js/pagination.min.js') }}"></script>
<script src="{{ asset('js/pagination.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{config('app.apiUrlSocket')}}/socket.io/socket.io.js"></script>
<script>
var soundDevice = new
Audio('https://www.meramukoding.com/wp-content/uploads/2020/05/doorbell.mp3');
var soundPort = new
Audio('https://www.meramukoding.com/wp-content/uploads/2020/05/doorbell.mp3');
soundPort.loop=true;
soundDevice.loop=true;

var soundOn = false;

// function startAudio(){
// if(sound.paused){
// sound.pause();
// }

// function fmute(){
// if(sound.muted){
// sound.muted=false;
// }else{
// sound.muted=true;
// }
// }

// }

$(window).on('load', function() {
$.ajax({
url : UrlApiNew+'/notificationscount',
type: "GET",
//dataType:'json',
headers:{
'Authorization' : token
},
success: function(data) {
let dataCount = data.data;

if(localStorage.getItem("sDevice") === null){


localStorage.setItem("sDevice", 0);
}

if(localStorage.getItem("sPort") === null){


localStorage.setItem("sPort", 0);
}

audioDevice(localStorage.getItem("sDevice"),
dataCount.countDeviceAll);
audioPort(localStorage.getItem("sPort"),
dataCount.countPortAll);

console.log("Device storage " +


localStorage.getItem("sDevice"));
console.log("Device data " + dataCount.countDeviceAll);

console.log("Port storage " + localStorage.getItem("sPort"));


console.log("Port data " + dataCount.countPortAll);

$("#allnotif").html(dataCount.countAll);
$("#devicenotif").html(dataCount.countDeviceAll);
$("#portnotif").html(dataCount.countPortAll);
},
error: function(xhr, status) {
console.log("error getAllNotifDevice");
}
})

});

$('#setting-contact').on('click', function() {
window.location.href = window.location.origin + '/setting/contact'
})
$('#my-profile').on('click', function() {
window.location.href = window.location.origin +
'/cso/preferences/section=general'
})
$('#logout').on('click', function() {
window.location.href = window.location.origin + '/logout'
})

</script>
<script>
var apiUrlSocket = `{{config('app.apiUrlSocket')}}`;
var socket = io(apiUrlSocket);
//var messages = document.getElementById('messages');
// var form = document.getElementById('form');
// var input = document.getElementById('input');

// form.addEventListener('submit', function(e) {
// e.preventDefault();
// if (input.value) {
// socket.emit('chat message', input.value);
// input.value = '';
// }
// });

// socket.on('chat message', function(msg) {


// var item = document.createElement('li');
// item.textContent = msg;
// messages.appendChild(item);
// window.scrollTo(0, document.body.scrollHeight);
// });

socket.on('count_all_notif', function(msg) {
//$('#allnotif').text('All Notif (' + msg + ')');
$("#allnotif").html(msg);
});

socket.on('count_device_notif', function(msg) {
$("#devicenotif").html(msg);
_getListNotifDevice();
});

socket.on('count_port_notif', function(msg) {
$("#portnotif").html(msg);
_getListNotifPort();
});

// // Onclick Event
// // onclick every item notification
//$('#itemNotif').on('click', function() {
// $(".itemnotif").click(function(){
// var notification_id = $(this).data('notificationid');
// alert(notification_id);

// socket.emit('update_notif_status', { notification_id });


// });

$('#notifall').on('click', function() {
var notification_id = $(this).data('notificationid');
console.log('notifId:', notification_id);
socket.emit('update_notif_status', { notification_id });
socket.emit('click_main_notif', 1);
updateStorage();
});

</script>
<script>
$(function(){
$("#navbar").bootnavbar();
});
$(document).ready(function() {

$("#exportexcel").click(function(){
$.ajax({
url : UrlApiNew+'/exportxlsx',
type: "POST",
//dataType:'json',
headers:{
'Authorization' : token
},
success: function(data) {
window.location = data.data.file_download_url;
setTimeout(() => {
window.location = baseUrl + '/settlement/export';
}, 2000);
},
error: function(xhr, status) {
console.log("error download");
}
})
})

$(function() {
$('[data-toggle="tooltip"]').tooltip({
placement: 'auto',
trigger: 'hover click',
boundary: 'HTMLElement',
html: true,
animation: true,
})
});
$('body').on('inserted.bs.tooltip', function(e) {
var $target = $(e.target);
$('[role="tooltip"]').hover(function() {
$(this).toggleClass('hover');
});

// $target.on('hide.bs.tooltip', function(e) {
// if ($('[role="tooltip"]').hasClass('hover')) {
// $('[role="tooltip"]').on('mouseleave', function() {
// $(this).removeClass('show')
// });
// e.preventDefault();
// return;
// }
// });
// });

$(".mobile-search-icon").on("click", function() {
$(".search-bar").addClass("full-search-bar")
}), $(".search-close").on("click", function() {
$(".search-bar").removeClass("full-search-bar")
}),

$('select').selectpicker({
container: 'body'
});
});
});
</script>
<script>
var UrlApiSe = `{{config('app.apiurlse')}}`;
var Url = `{{config('app.url')}}`;
var UrlApi = `{{config('app.apiurl')}}`;
var UrlApiNew = `{{config('app.apiurlnew')}}`;
var token = `{{config('app.token')}}`;
var ObvApi = `{{config('app.obvurl')}}`;
var BearerToken = `{{config('app.BEARERTOKEN')}}`;
var urlMap = `{{ config('app.urlmap') }}`;
var pathname = window.location.pathname;

$(document).ready(function() {
getSummaryMenu();

$(document).on('click', '.notifdevice', function() {


// alert("notif device");
var notification_id = $(this).data('notificationid');
// console.log('notifId:', notification_id);
socket.emit('update_notif_status', { notification_id });
socket.emit('click_device_notif', 1);
updateStorage();
});

$(document).on('click', '.notifport', function() {


// alert("notif port");
var notification_id = $(this).data('notificationid');
// console.log('notifId:', notification_id);
socket.emit('update_notif_status', { notification_id });
socket.emit('click_port_notif', 1);
updateStorage();
});

function updateStorage(){
$.ajax({
url : UrlApiNew+'/allnotifilist?device_type=device',
type: "GET",
//dataType:'json',
headers:{
'Authorization' : token
},
success: function(data) {
var dataNotifDevices = data.data;
localStorage.setItem("sDevice", dataNotifDevices.length);
audioDevice(localStorage.getItem("sDevice"),
dataNotifDevices.length);
},
error: function(xhr, status) {
console.log("error getAllNotifDevice");
}
});
$.ajax({
url : UrlApiNew+'/allnotifilist?device_type=port',
type: "GET",
//dataType:'json',
headers:{
'Authorization' : token
},
success: function(data) {
var dataNotifPort = data.data;
localStorage.setItem("sPort", dataNotifPort.length);
audioPort(localStorage.getItem("sPort"), dataNotifPort.length);
},
error: function(xhr, status) {
console.log("error getAllNotifPort");
}
});
}

});

var substringMatcher = function(strs) {


return function findMatches(q, cb) {
var matches, substringRegex;
matches = [];
substrRegex = new RegExp(q, 'i');
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push(str);
}
});

cb(matches);
};
};

function audioPort(var1, var2) {


//sound.currenTime=0;
if(var1 < var2 && soundOn == false){
soundPort.play();
soundOn = true;
} else {
soundPort.pause();
soundOn = false;
}
}

function audioDevice(var1, var2) {


//sound.currenTime=0;
if(var1 < var2 && soundOn == false){
soundDevice.play();
soundOn = true;
} else {
soundDevice.pause();
soundOn = false;
}
}

//audio();

// var device = ['103.231.122.128 mx80T | Juniper JunOS 17.3R3-s2.2 <br/>pe-id-


tlk.btn-vpn | Batam Center Indonesia | cso router | 158 port'];
// var state = ['ae0 180.240.180.55 <br />IEEE 802.3ad Link Agregate |
40:71:83:af:d8:00 | AGG_TRUNK_PE_HK-IT2.HKG_ae12x10G'];
// $('#the-basics .typeahead').typeahead({});
key_count_global = 0;

function lookup(inputString) {
if (inputString.trim().length == 0) {
$('#suggestions').fadeOut(); // Hide the suggestions box
} else {
key_count_global++;
setTimeout("lookupwait(" + key_count_global + ",\"" + inputString +
"\")", 300); // Added timeout 0.3s before send query
}
}

function lookupwait(key_count, inputString) {


$('#suggestions').fadeIn();
if (key_count == key_count_global) {
$.ajax({
url: UrlApi + "/csoip/search?limit=10&q=" + inputString,
type: "GET",
crossDomain: true,
success: function(response) {
var html = ''
if (response.status === 200) {
var DataList = response.data
if (DataList.devices.length > 0) {
var DeviceList = `<div class="tt-dataset tt-dataset-
device">`
DeviceList += `<div class="list-group-item"
style="background-color: rgba(0, 0, 0, 0.05);"><p class="font-10 m-0"><b>Device
Found (${DataList.devices.length})</b></p></div>`
for (var i = 0; i < DataList.devices.length; i++) {
DeviceList += `<a href="{{ url('/cso/device/device-
overview/did=${DataList.devices[i].device_id}') }}" class="list-group-item tt-
suggestion tt-selectable">
${DataList.devices[i].sysName} $
{DataList.devices[i].hardware} | ${DataList.devices[i].vendor} $
{DataList.devices[i].os} ${DataList.devices[i].version}
<br>${DataList.devices[i].hostname}
| ${DataList.devices[i].location}
</a>`
}
DeviceList += `</div>`
} else {
var DeviceList = ``
}
if (DataList.ports.length > 0) {
var PortList = `<div class="tt-dataset tt-dataset-
port">`
PortList += `<div class="list-group-item"
style="background-color: rgba(0, 0, 0, 0.05);"><p class="font-10 m-0"><b>Port Found
(${DataList.ports.length})</b></p></div>`
for (var i = 0; i < DataList.ports.length; i++) {
PortList += `<a href="{{
url('/cso/devices/overview/did=${DataList.ports[i].device_id}/tab=ports/port=$
{DataList.ports[i].port_id}/show=graphs') }}" class="list-group-item tt-suggestion
tt-selectable">
${DataList.ports[i].ifName} | $
{DataList.ports[i].sysName}
<br>${DataList.ports[i].ifType} | $
{DataList.ports[i].ifPhysAddress} | ${DataList.ports[i].ifDescr}
</a>`
}
PortList += `</div>`
} else {
var PortList = ``
}
if (DataList.slas.length > 0) {
var SlaList = `<div class="tt-dataset tt-dataset-
port">`
SlaList += `<div class="list-group-item"
style="background-color: rgba(0, 0, 0, 0.05);"><p class="font-10 m-0"><b>SLA Found
(${DataList.slas.length})</b></p></div>`
for (var i = 0; i < DataList.slas.length; i++) {
SlaList += `<a href="{{
url('/cso/devices/overview/did=${DataList.slas[i].device_id}/tab=slas/sla=$
{DataList.slas[i].sla_id}/show=graphs') }}" class="list-group-item tt-suggestion
tt-selectable">
${DataList.slas[i].sla_target} | $
{DataList.slas[i].sysName}
<br>${DataList.slas[i].rtt_type} |
${DataList.slas[i].sla_status}
</a>`
}
SlaList += `</div>`
} else {
var SlaList = ``
}
html += DeviceList
html += PortList
html += SlaList
$('#suggestions').fadeIn();
$('#suggestions').html(html);
}
},
error: function(xhr, status) {
// alert("error");
}
});
// $.post("ajax/search.php", {
// queryString: "" + inputString + ""
// }, function(data) { // Do an AJAX call
// $('#suggestions').fadeIn(); // Show the suggestions box
// $('#suggestions').html(data); // Fill the suggestions box
// });
}
}

// var device = ['103.231.122.128 mx80T | Juniper JunOS 17.3R3-s2.2 <br/>pe-id-


tlk.btn-vpn | Batam Center Indonesia | cso router | 158 port'];
// var state = ['ae0 180.240.180.55 <br />IEEE 802.3ad Link Agregate |
40:71:83:af:d8:00 | AGG_TRUNK_PE_HK-IT2.HKG_ae12x10G'];

// $('#the-basics .typeahead').typeahead({
// hint: true,
// highlight: true,
// minLength: 1,
// autocomplete: 'off',
// autofill: 'off',
// },
// {
// name: 'device',
// source: substringMatcher(device, state),
// templates: {
// // empty: [
// // '<div class="list-group search-results-dropdown"><div
class="list-group-item border-0">Nothing found.</div></div>'
// // ],
// header: [
// '<div class="list-group-item" style="background-color:
rgba(0, 0, 0, 0.05);"><p class="font-10 m-0"><b>DEFICE FOUND (1)</b></p></div>'
// ],
// suggestion: function (data) {
// return '<a href="#" class="list-group-item">' + data +
'</a>'
// }
// }
// },{
// name: 'state',
// source: substringMatcher(state),
// templates: {
// // empty: [
// // '<div class="list-group search-results-dropdown"><div
class="list-group-item border-0">Nothing found.</div></div>'
// // ],
// header: [
// '<div class="list-group-item border-top-0"
style="background-color: rgba(0, 0, 0, 0.05);"><p class="font-10 m-0"><b>STATE
FOUND (1)</b></p></div>'
// ],
// suggestion: function (data) {
// return '<a href="#" class="list-group-item d-block">' + data
+ '</a>'
// }
// }
// });

$(".waktu").click(function(){
menit = $(this).data("intervalmenit");
detik = $(this).data("intervaldetik");
if(menit >= 0 && detik >= 0){
hitung();
} else{

}
});

$(".manual").click(function(){
if(menit >= 0 && detik >= 0){
menit = 0;
detik = 0;
$('#msg').html(menit + ' menit ' + detik + ' detik ');
$("#msg").css("display","none");
}
});

function hitung() {
$("#msg").css("display","block");
setTimeout(hitung,1000);
$('#msg').html(menit + ' menit ' + detik + ' detik ');
detik --;
if(detik < 0) {
detik = 59;
menit --;
if(menit < 0) {
menit = 0;
detik = 0;
}
}else if(detik == 0 && menit == 0){
location.reload();
}
}

var _getListNotifDevice = function(){


$.ajax({
url : UrlApiNew+'/allnotifilist?device_type=device',
type: "GET",
//dataType:'json',
headers:{
'Authorization' : token
},
success: function(data) {
var dataNotifDevices = data.data;
var html = "";
var i;
for (i=0; i<dataNotifDevices.length; i++) {
html += '<a class="dropdown-item notifdevice mute" data-
notificationid="'+dataNotifDevices[i].notification_id+'" href="#"
style="color:#b71c1c"><span class="sprite-exclamation-mark me-1
d-inline-block"></span>'+dataNotifDevices[i].title+'</a>';
}
$("#listDevices").empty();
$("#listDevices").html(html);

},
error: function(xhr, status) {
console.log("error getAllNotifDevice");
}
})
}
_getListNotifDevice();

var _getListNotifPort = function(){


$.ajax({
url : UrlApiNew+'/allnotifilist?device_type=port',
type: "GET",
//dataType:'json',
headers:{
'Authorization' : token
},
success: function(data) {
var dataNotifPort = data.data;
var html = "";
var i;
for (i=0; i<dataNotifPort.length; i++) {
html += '<a data-
notificationid="'+dataNotifPort[i].notification_id+'" class="dropdown-item
notifport mute" href="#" style="color:#b71c1c">'+dataNotifPort[i].title+'</a>';
}
$("#listPort").empty();
$("#listPort").html(html);

},
error: function(xhr, status) {
console.log("error getAllNotifPort");
}
})
}
_getListNotifPort();

function getSummaryMenu() {
$.ajax({
url: UrlApiNew + "/summary/devices/device-summary",
type: "GET",
crossDomain: true,
headers : {
'Authorization' : token
},
success: function(response) {

var TotDev = response.data.jsondata.deviceall;


var OnDev = response.data.jsondata.deviceup;
var OffDev = response.data.jsondata.devicedown;
var PortUp = response.data.jsondata.portup;
var PortAll = response.data.jsondata.portall;
var PortDown = response.data.jsondata.portdown;
var PortOff = response.data.jsondata.portoff;

$('#MnuDeviceUp').empty();
$('#MnuDeviceDown').empty();
$('#MnuDeviceDowns').empty();
$('#MnuTotPorts').empty();

$('#MnuSttsUp').empty();
$('#MnuSttsWrn').empty();
$('#MnuSttsDgr').empty();
$('#MnuSttsSec').empty();

$('#MnuDeviceUp').append(OnDev);
$('#MnuDeviceDown').append(OffDev);
$('#MnuDeviceDowns').append(OffDev);
$('#MnuTotPorts').append(PortAll.toLocaleString('id'));

$
('#MnuSttsUp').append(response.data.jsondata.statusok.toLocaleString('id'));
$
('#MnuSttsWrn').append(response.data.jsondata.statuswarning.toLocaleString('id'));
$
('#MnuSttsDgr').append(response.data.jsondata.statusalert.toLocaleString('id'));
$
('#MnuSttsSec').append(response.data.jsondata.statusignore.toLocaleString('id'));

},
error: function(xhr, status) {
// alert("error");
}
});
}

function getSummaryRouting() {
$.ajax({
url: UrlApiNew + "/summary/csocount",
type: "GET",
crossDomain: true,
headers : {
'Authorization' : token
},
success: function(resp) {
if (resp.meta.code == 200) {
$('#NavCountVRF').html(`(${resp.data.vrf_count})`)
$('#NavCountOSPF').html(`(${resp.data.ospf_count})`)
$('#NavCountBGP').html(`(${resp.data.bgp_all_count})`)

$('#RouteVrfs').html(resp.data.vrf_count)
$('#RouteOspf').html(resp.data.ospf_count)
$('#RouteAllSeasons').html(resp.data.bgp_all_count)
$('#RouteBgpInternal').html(resp.data.ibgp_all_count)
$('#RouteBgpExternal').html(resp.data.ebgp_all_count)
$('#RouteBgpAlert').html(resp.data.alert_bgp_all_count)
}
},
error: function () {
console.log("error getSummaryRouting")
}
})
}
getSummaryRouting()
</script>

You might also like