/app/assets/javascripts/pages/supervision.js
JavaScript | 170 lines | 138 code | 32 blank | 0 comment | 9 complexity | bea83075f8b20e3766997981fe36fa2d MD5 | raw file
Possible License(s): GPL-3.0, LGPL-3.0, BSD-3-Clause, Apache-2.0
- $(function() {
- var supervision = {};
- supervision.container = "#all_queues";
- supervision.nbOfQueues = 0;
- supervision.lineNb = 0;
- supervision.queues = [];
- var drawOrUpdateDoNut = function(divid, counters, radius) {
- var dataSet = counters;
- var todisplay = {
- Lost : "Lost",
- Link : "Link"
- };
- dataSet = dataSet.filter(function(el) {
- return todisplay[el.statName];
- });
- var validData = dataSet.filter(function(el) {
- if (el.value >= 0)
- return el.value;
- });
- if (validData.length === 0)
- return;
- if (dataSet.length === 0)
- return;
- var getValues = function(d) {
- return d.value;
- };
- var arc = d3.svg.arc().outerRadius(radius - 10).innerRadius(60);
- var agentpie = d3.layout.pie().value(getValues);
- var color = d3.scale.ordinal().range([ "green", "red", "orange", "yellow" ]);
- var arcs = d3.select(divid).select("svg").select(".arcGrp").selectAll("path").data(agentpie(dataSet));
- arcs.enter().append("svg:path").attr("stroke", "white").attr("stroke-width", 0.5).attr("fill", function(d, i) {
- return color(i);
- }).attr("d", arc).each(function(d) {
- this._current = d.value;
- });
- arcs.transition().attr("stroke", "white").attr("stroke-width", 0.5).attr("fill", function(d, i) {
- return color(i);
- }).attr("d", arc).each(function(d) {
- this._current = d.value;
- });
- };
- var drawOrUpdateCenterLabel = function(divid, counters) {
- var wtclass = "normal";
- var todisplay = {
- WaitingCalls : "WaitingCalls"
- };
- var dataSet = counters.filter(function(el) {
- return todisplay[el.statName];
- });
- if (dataSet.length === 0)
- return;
- var getData = function(d) {
- return d.value;
- };
- var getClass = function(d) {
- if (d.value > 3)
- return "error";
- if (d.value > 1)
- return "warning";
- else
- return "normal";
- };
- var center_label = d3.select(divid).select("svg").select(".ctrGroup").selectAll("text").data(dataSet);
- center_label.enter().append("svg:text").attr("dy", ".35em").attr("class", wtclass)
- .attr("text-anchor", "middle").text(getData);
- center_label.transition().attr("dy", ".35em").attr("class", getClass).attr("text-anchor", "middle").text(
- getData);
- };
- var drawDoNuts = function(divid, counters) {
- var width = 200, height = 200, radius = Math.min(width, height) / 2;
- if (d3.select(divid).selectAll("svg").empty()) {
- var svg = d3.select(divid).append("svg:svg").attr("width", width).attr("height", height);
- svg.append("svg:g").attr("class", "arcGrp").attr("transform",
- "translate(" + (width / 2) + "," + (height / 2) + ")");
- svg.append("svg:g").attr("class", "ctrGroup").attr("transform",
- "translate(" + (width / 2) + "," + (height / 2) + ")");
- }
- drawOrUpdateDoNut(divid, counters, radius);
- drawOrUpdateCenterLabel(divid, counters);
- };
- var queueConfigHandler = function(queueConfig) {
- console.log("queue config Handler " + JSON.stringify(queueConfig));
- supervision.queues[supervision.nbOfQueues] = queueConfig.id;
- if (supervision.nbOfQueues % 3 === 0) {
- supervision.lineNb = supervision.lineNb + 1;
- createLine(supervision.lineNb);
- }
- supervision.nbOfQueues = supervision.nbOfQueues + 1;
- createQueue(supervision.lineNb, supervision.nbOfQueues, queueConfig);
- console.log(supervision.nbOfQueues + " " + (supervision.lineNb));
- getStats();
- };
- var queueStatisticsHandler = function(event) {
- var divid = "#queue_body" + event.queueId;
- drawDoNuts(divid, event.counters);
- };
- var createLine = function(lineNb) {
- $(supervision.container).append('<li class="list-group-item" id="li_queue' + lineNb + '"/>');
- $("#li_queue" + lineNb).append('<div class="row" id="row_queue' + lineNb + '">');
- };
- var createQueue = function(lineNb, queueNb, queue) {
- $("#row_queue" + lineNb).append('<div class="col-md-4" id="col_queue' + queueNb + '">');
- $("#col_queue" + queueNb).append('<div class="panel panel-info" id="panel_info' + queueNb + '">');
- $("#panel_info" + queueNb).append(
- '<div class="panel-heading">' + queue.displayName + ' (' + queue.number + ')' + '</div>');
- $("#panel_info" + queueNb).append('<div class="panel-body text-center" id="queue_body' + queue.id + '"/>');
- $("#panel_info" + queueNb).append('<div class="panel-footer"/>');
- };
- var getStats = function() {
- for (var i = 0; i < supervision.queues.length; i++) {
- Cti.getQueueStatistics(supervision.queues[i], 3600, 60);
- }
- };
- var initUi = function() {
- $(supervision.container).empty();
- setInterval(getStats, 5000);
- };
- var loggedOnHandler = function() {
- $('#xuc_logon_panel').hide();
- Cti.getConfig("queue");
- Cti.subscribeToQueueStats();
- };
- $('#xuc_sign_in').click(
- function(event) {
- initUi();
- var username = $('#xuc_username').val();
- var password = $('#xuc_password').val();
- var hostAndPort = $('#xuc_hostAndPort').val();
- var phoneNumber = 0;
- console.log("sign in " + username + " " + password + " to " + hostAndPort);
- var wsurl = "ws://" + hostAndPort + "/xuc/ctichannel?username=" + username + "&agentNumber=" +
- phoneNumber + "&password=" + password;
- Cti.setHandler(Cti.MessageType.QUEUECONFIG, queueConfigHandler);
- Cti.setHandler(Cti.MessageType.QUEUESTATISTICS, queueStatisticsHandler);
- Cti.setHandler(Cti.MessageType.LOGGEDON, loggedOnHandler);
- Cti.WebSocket.init(wsurl, username, 0);
- });
- });