Hi Denise,
I have attached steps recording that you can open using any web browser.
1. Scenario 1 - with errors.mht : scenario where I clicked the page gadget to activate Silent Monitoring tab
2. Scenario 2 - without errors.mht : scenario where I clicked the Silent Monitoring tab to show the Silent Monitoring gadget app
Please take note that the rest api, Notification Bar page gadget and Silent Monitoring tab gadget are hosted on my laptop so you will not be able to run the gadget properly.
Here is the complete code for my Notification Bar gadget:
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Notification Bar Gadget"
description="Notification Bar Gadget">
<Require feature="settitle" />
<Require feature="dynamic-height" />
<Require feature="pubsub-2" />
<Require feature="setprefs" />
<Require feature="loadingindicator">
<Param name="manual-dismiss">false</Param>
<Param name="loading-timeout">10</Param>
</Require>
</ModulePrefs>
<Content type="html">
<![CDATA[
<!DOCTYPE html>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"/>
<!--
<link rel="stylesheet" href="https://uccx1.dcloud.cisco.com:8444/cuic/gadget/report-gadget.min.css">
-->
<!-- jQuery -->
<script type="text/javascript" src="https://uccx1.dcloud.cisco.com:8445/desktop/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="https://uccx1.dcloud.cisco.com:8445/desktop/assets/js/finesse.js"></script>
<!--
<script type="text/javascript" src="http://10.16.31.140:8080/desktop/gadget/notifybargadget.js"></script>
-->
<style>
@font-face{
font-family:CiscoSans Regular;
src:url(https://uccx1.dcloud.cisco.com:8445/desktop/scripts/fonts/CiscoSansTTRegular.woff);
font-weight:400;
font-style:normal
}
@font-face{
font-family:CiscoSans Bold;
src:url(../fonts/CiscoSansTTBold.woff);
font-weight:400;
font-style:normal
}
body {
font-family:"CiscoSans Regular";
font-style:normal;text-rendering:optimizeLegibility;
}
.custom-btn{
background-color: #F59330!important;
outline: none;
box-shadow: none!important;
}
</style>
<body>
<div class="d-flex flex-row justify-content-between pb-2 pt-2" style="height: 40px !important; background: #F59330; color: #FFFFFF; font-family: CiscoSans Regular!important;" id="myContain3r" hidden>
<div class="d-flex justify-content-start">
<div style="margin-top: -11px !important;">
<a class="mr-3 ml-2" style="font-size: 200% !important; color: #ffffff; float: right;" id="dismissBtn" role="button" href="">×</a>
</div>
<div>
<a id="notificationBtn" role="button" href="" style="color: #ffffff; float: right;" target="_self">
<span id="notification"></span>
</a>
</div>
</div>
<div>
<span id="timeElapsed"></span>
<a id="prev" class="badge badge-pill badge-light mr-2 ml-2" style="color: #F59330; width: 30px; vertical-align: middle !important;" role="button" href="#" onclick="return prevPage();" > <b><</b> </a>
<span id="pagination"></span>
<a id="prev" class="badge badge-pill badge-light mr-3 ml-2" style="color: #F59330; width: 30px; vertical-align: middle !important;" role="button" href="" onclick="return nextPage();" > <b>></b> </a>
</div>
</div>
</body>
<script type="text/javascript">
// initialize the gadget
var _cfg;
var user, pass, teamId;
var logger;
var user;
var containerServices;
var notifications = [];
var current = 0;
handleUserLoad = function(userevent) {}
handleUserChange = function(userevent) {}
gadgets.HubSettings.onConnect = function () {
console.log("notifybar: ready...");
//finesse.modules.notifybargadget.init();
_cfg = finesse.gadget.Config;
gadgets.window.adjustHeight();
// Initiate the ClientServices and load the user object. ClientServices are
// initialized with a reference to the current configuration.
finesse.clientservices.ClientServices.init(_cfg, false);
// Initiate the ClientLogs. The gadget id will be logged as a part of the message
logger = finesse.cslogger.ClientLogger; // declare clientLogs
logger.init(gadgets.Hub, "NotifyBarGadget");
user = new finesse.restservices.User({
id : _cfg.id,
onLoad : handleUserLoad,
onChange : handleUserChange
});
logger.log("notifybar user: " + user);
states = finesse.restservices.User.States;
// Initiate the ContainerServices and add a handler for when the tab is visible
// to adjust the height of this gadget in case the tab was not visible
// when the html was rendered (adjustHeight only works when tab is visible)
containerServices = finesse.containerservices.ContainerServices.init(_cfg, false);
containerServices
.addHandler(
finesse.containerservices.ContainerServices.Topics.ACTIVE_TAB, function() {
clientLogs.log("NotifyBar Gadget is now visible"); // log to Finesse logger
// automatically adjust the height of the gadget to show the html
gadgets.window.adjustHeight();
});
containerServices.makeActiveTabReq();
user = _cfg.id;
pass = _cfg.password;
teamId = _cfg.teamId;
};
$(document).ready(function() {
setInterval(function() {
//if (hideOrShow == "show") {
checkHelpNotifications(user, pass, teamId);
//}
}, 3000);
});
function displayNotification() {
var myGadgetId = finesse.containerservices.ContainerServices .getMyGadgetId(); /*10*/
var c = "#gadgets-gadget-content-" + myGadgetId; /* content */
var t = "#finesse_gadget_" + myGadgetId + "_title"; /* title */
var phoneStatus = notifications[current];
if (notifications.length > 0) {
parent.window.$(t).show();
parent.window.$(c).show();
$("#notification").html(notifications[current].message);
$("#pagination").html((current + 1) + " / " + notifications.length);
$("#timeElapsed").html(calcTimeElapsed(notifications[current].notificationTimeStamp));
$(document).on('click', '#dismissBtn',
function() {
dismisshelp(current, notifications[current].extension, notifications[current].callId);
});
$(document).on('click', '#notificationBtn',
function() {
showSilentMonitoringGadget(notifications[current].callId, notifications[current].extension);
});
logger.log("displayNotification: page gadget has been shown");
if (current > (notifications.length - 1)){
current = notifications.length - 1;
}
} else {
parent.window.$(t).hide();
parent.window.$(c).hide();
logger.log("displayNotification: page gadget has been hidden");
}
}
function calcTimeElapsed(timestamp) {
var dateOld = new Date(timestamp);
var dateNew = new Date();
var seconds = Math.floor((dateNew - dateOld) / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
hours = hours - (days * 24);
minutes = minutes - (days * 24 * 60) - (hours * 60);
seconds = seconds - (days * 24 * 60 * 60) - (hours * 60 * 60) - (minutes * 60);
minutes += (60 * hours);
//return "<b>" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds) + "</b> minutes ago";
if(minutes > 15 ){
return "More than " + "<b>15</b>" + " minutes ago";
}
return "<b>" + (minutes < 10 ? "0" + minutes : minutes) + "</b> minutes ago";
}
function prevPage() {
current -= 1;
if (current < 0){
current = 0;
logger.log("prevPage: first data...");
}
displayNotification();
}
function nextPage() {
current += 1;
if (current > (notifications.length - 1)){
current = notifications.length - 1;
}
displayNotification();
}
function checkHelpNotifications(userId, password, teamId) {
logger.log("Calling https://10.16.31.140:8443/desktop/supervisor/services/notifications...");
var supNotification;
$.ajax({
url : "https://10.16.31.140:8443/desktop/supervisor/services/notifications",
data : {
userId : userId,
password : password,
teamId : teamId
},
dataType : 'json',
cache : false,
timeout : 600000,
success : function(data) {
notifications = data;
displayNotification();
logger.log("checkHelpNotifications: SUCCESS : "+ data);
},
error : function(e) {
console.log("checkHelpNotifications | ERROR : ", e);
}
}); //End of ajax
}
function dismisshelp(dataIndex, agentExtension, callId) {
logger.log("Dismisshelp..");
$.ajax({
url : "https://10.16.31.140:8443/desktop/supervisor/container/dismisshelp",
data : {
agentExtension : '',
callId : callId
},
dataType : 'json',
cache : false,
timeout : 600000,
success : function(data) {
logger.log("dismisshelp | SUCCESS : "+ data);
notifications.splice(dataIndex, 1);
},
error : function(e) {
logger.log("dismisshelp | ERROR : ", e);
}
});
}
function showSilentMonitoringGadget(callId, extension){
logger.log("NotifyBarGadget: opening SilentMonitoringGadget tabss..");
containerServices.activateTab("silentCallMonitoringTab");
}
</script>
]]>
</Content>
</Module>
Regards,
William
