203 lines
8.2 KiB
JavaScript
203 lines
8.2 KiB
JavaScript
/*
|
|
* Copyright 2022, Digi International Inc.
|
|
*
|
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
*
|
|
* THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
|
|
* WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
|
|
* MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
|
|
* ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
|
|
* WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
|
|
* ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
|
|
* OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
|
|
*/
|
|
|
|
// Constants.
|
|
const ID_DATA_USAGE_BUTTON = "data_usage_button";
|
|
const ID_DATA_USAGE_CURRENT_DEVICE = "data_usage_current_device";
|
|
const ID_DATA_USAGE_GRAPHIC_WEB = "data_usage_graphic_web";
|
|
const ID_DATA_USAGE_GRAPHIC_DEVICES = "data_usage_graphic_devices";
|
|
const ID_DATA_USAGE_ICON = "data_usage_icon";
|
|
const ID_DATA_USAGE_LOADING = "data_usage_loading";
|
|
const ID_DATA_USAGE_PANEL = "data_usage_panel";
|
|
|
|
// Returns whether the data usage panel is open or not.
|
|
function isDataUsageShowing() {
|
|
// Initialize variables.
|
|
var dataUsagePanel = document.getElementById(ID_DATA_USAGE_PANEL);
|
|
// Return visibility.
|
|
return dataUsagePanel.style.display != "none";
|
|
}
|
|
|
|
// Toggles the data usage panel visibility.
|
|
function toggleDataUsagePanel() {
|
|
// Initialize variables.
|
|
var dataUsageIcon = document.getElementById(ID_DATA_USAGE_ICON);
|
|
var dataUsageButton = document.getElementById(ID_DATA_USAGE_BUTTON);
|
|
// Avoid double clicks.
|
|
dataUsageButton.style.pointerEvents = "none";
|
|
// Check data usage panel visibility.
|
|
if (isDataUsageShowing()) {
|
|
$("#" + ID_DATA_USAGE_PANEL).slideUp("fast", function() {
|
|
dataUsageIcon.src = "../static/images/data_usage.png";
|
|
// Enable hover effect.
|
|
$("#" + ID_DATA_USAGE_BUTTON).on({
|
|
"mouseover" : function() {
|
|
dataUsageIcon.src = "../static/images/data_usage_green.png";
|
|
},
|
|
"mouseout" : function() {
|
|
dataUsageIcon.src = "../static/images/data_usage.png";
|
|
}
|
|
});
|
|
// React to mouse events again.
|
|
dataUsageButton.style.pointerEvents = "auto";
|
|
// Reset fields.
|
|
clearDataUsageFields();
|
|
});
|
|
} else {
|
|
$("#" + ID_DATA_USAGE_PANEL).slideDown("fast", function() {
|
|
dataUsageIcon.src = "../static/images/data_usage_green.png";
|
|
// Disable hover effect.
|
|
$("#" + ID_DATA_USAGE_BUTTON).on({
|
|
"mouseover" : function() {
|
|
dataUsageIcon.src = "../static/images/data_usage_green.png";
|
|
},
|
|
"mouseout" : function() {
|
|
dataUsageIcon.src = "../static/images/data_usage_green.png";
|
|
}
|
|
});
|
|
// React to mouse events again.
|
|
dataUsageButton.style.pointerEvents = "auto";
|
|
// Read data usage.
|
|
readDataUsage();
|
|
});
|
|
}
|
|
}
|
|
|
|
// Reads the DRM account data usage.
|
|
function readDataUsage() {
|
|
// Sanity checks.
|
|
if (!isDataUsageShowing())
|
|
return;
|
|
// Show the data usage loading panel.
|
|
showDataUsageLoading(true);
|
|
// Send request to change the LED status.
|
|
$.post(
|
|
"../ajax/get_data_usage",
|
|
function(data) {
|
|
// Process only if the panel is showing.
|
|
if (!isDataUsageShowing())
|
|
return;
|
|
// Process answer.
|
|
processReadDataUsageResponse(data);
|
|
}
|
|
).fail(function(response) {
|
|
// Process only if the panel is showing.
|
|
if (!isDataUsageShowing())
|
|
return;
|
|
// Process error.
|
|
error = processAjaxErrorResponse(response);
|
|
// Hide the data usage loading panel.
|
|
showDataUsageLoading(true);
|
|
});
|
|
}
|
|
|
|
// Processes the read data usage response.
|
|
function processReadDataUsageResponse(response) {
|
|
// Hide the data usage loading panel.
|
|
showDataUsageLoading(false);
|
|
// Check if there was any error in the request.
|
|
if (!checkErrorResponse(response, false)) {
|
|
// Update the data usage values.
|
|
updateDataUsageValues(response);
|
|
}
|
|
}
|
|
|
|
// Updates the data usage values.
|
|
function updateDataUsageValues(response) {
|
|
// Sanity checks.
|
|
if (!isDataUsageShowing())
|
|
return;
|
|
// Initialize variables.
|
|
var dataUsageTotal = response[ID_DATA_USAGE_TOTAL];
|
|
var dataUsageWeb = response[ID_DATA_USAGE_WEB];
|
|
var dataUsageDevices = response[ID_DATA_USAGE_DEVICES];
|
|
var dataUsageDevicesPercent = 0;
|
|
var dataUsageWebPercent = 0;
|
|
var dataUsageCurrentDevice = 0;
|
|
var graphicDevicesElement = document.getElementById(ID_DATA_USAGE_GRAPHIC_DEVICES);
|
|
var graphicWebElement = document.getElementById(ID_DATA_USAGE_GRAPHIC_WEB);
|
|
// Calculate percent for data devices.
|
|
if (dataUsageTotal > 0) {
|
|
dataUsageDevicesPercent = Math.round(dataUsageDevices * 100 / dataUsageTotal);
|
|
dataUsageWebPercent = Math.round(dataUsageWeb * 100 / dataUsageTotal);
|
|
}
|
|
// Calculate values for totals.
|
|
dataUsageDevices = sizeToHumanRead(dataUsageDevices * 1000 * 1000); // This usage is given in MB.
|
|
dataUsageWeb = sizeToHumanRead(dataUsageWeb * 1000 * 1000); // This usage is given in MB.
|
|
// Retrieve the data usage for the current device.
|
|
for (var device in response[ID_DEVICES]) {
|
|
if (response[ID_DEVICES][device][ID_DEVICE_ID].toLowerCase() == getDeviceID().toLowerCase()) {
|
|
dataUsageCurrentDevice = response[ID_DEVICES][device][ID_USAGE];
|
|
break;
|
|
}
|
|
}
|
|
// Set percentage size of graphics.
|
|
graphicDevicesElement.style.width = dataUsageDevicesPercent + "%";
|
|
graphicWebElement.style.width = dataUsageWebPercent + "%";
|
|
// Set graphics tooltips.
|
|
graphicDevicesElement.setAttribute("data-original-title", "Total data usage by devices: " + dataUsageDevices + " (" + dataUsageDevicesPercent + "%)");
|
|
graphicWebElement.setAttribute("data-original-title", "Total data usage by web APIs: " + dataUsageWeb + " (" + dataUsageWebPercent + "%)");
|
|
// Update the data usage values.
|
|
updateFieldValue(ID_DATA_USAGE_TOTAL, sizeToHumanRead(dataUsageTotal * 1000 * 1000)); // This usage is given in MB.
|
|
updateFieldValue(ID_DATA_USAGE_DEVICES, dataUsageDevices);
|
|
updateFieldValue(ID_DATA_USAGE_CURRENT_DEVICE, sizeToHumanRead(dataUsageCurrentDevice * 1000)); // This usage is given in KB.
|
|
updateFieldValue(ID_DATA_USAGE_WEB, dataUsageWeb);
|
|
updateFieldValue(ID_DATA_USAGE_WEB_SERVICES, sizeToHumanRead(response[ID_DATA_USAGE_WEB_SERVICES] * 1000)); // This usage is given in KB.
|
|
updateFieldValue(ID_DATA_USAGE_MONITORS, sizeToHumanRead(response[ID_DATA_USAGE_MONITORS] * 1000)); // This usage is given in KB.
|
|
}
|
|
|
|
// Shows/hides the data usage loading panel.
|
|
function showDataUsageLoading(visible) {
|
|
// Sanity checks.
|
|
if (!isDataUsageShowing())
|
|
return;
|
|
// Initialize variables.
|
|
var dataUsageLoading = document.getElementById(ID_DATA_USAGE_LOADING);
|
|
// Show the data usage loading panel.
|
|
if (visible)
|
|
dataUsageLoading.style.display = "block";
|
|
else
|
|
dataUsageLoading.style.display = "none";
|
|
}
|
|
|
|
// Clears all data usage fields.
|
|
function clearDataUsageFields() {
|
|
// Initialize variables.
|
|
var graphicDevicesElement = document.getElementById(ID_DATA_USAGE_GRAPHIC_DEVICES);
|
|
var graphicWebElement = document.getElementById(ID_DATA_USAGE_GRAPHIC_WEB);
|
|
// Clear all data usage fields.
|
|
updateFieldValue(ID_DATA_USAGE_TOTAL, "");
|
|
updateFieldValue(ID_DATA_USAGE_DEVICES, "");
|
|
updateFieldValue(ID_DATA_USAGE_CURRENT_DEVICE, "");
|
|
updateFieldValue(ID_DATA_USAGE_WEB, "");
|
|
updateFieldValue(ID_DATA_USAGE_WEB_SERVICES, "");
|
|
updateFieldValue(ID_DATA_USAGE_MONITORS, "");
|
|
// Reset graphic sizes.
|
|
graphicDevicesElement.style.width = "0%";
|
|
graphicWebElement.style.width = "0%";
|
|
}
|
|
|
|
// Refreshes the usage data.
|
|
function refreshUsageData() {
|
|
// Sanity checks.
|
|
if (!isDataUsageShowing())
|
|
return;
|
|
// Clear all data usage fields.
|
|
clearDataUsageFields();
|
|
// Read data usage.
|
|
readDataUsage();
|
|
}
|