peach-workspace/peach-web/static/js/network_usage.js

/*

behavioural layer for the `network_usage.html.tera` template,
corresponding to the web route `/settings/network/wifi/usage`

 - intercept form submissions
 - perform json api calls
 - update the dom

methods:

 PEACH_NETWORK.updateAlerts();
 PEACH_NETWORK.resetUsage();
 PEACH_NETWORK.toggleWarning();
 PEACH_NETWORK.toggleCutoff();

*/

var PEACH_NETWORK = {};

// catch click of 'Update' and make POST request
PEACH_NETWORK.updateAlerts = function() {
    document.addEventListener('DOMContentLoaded', function() {
        document.body.addEventListener('submit', function(e) {
            // prevent redirect on button press (default behavior)
            e.preventDefault();
            // capture form data
            var formElement = document.querySelector("form");
            let warn = formElement.elements.warn.value;
            let cut = formElement.elements.cut.value;
            let warn_flag = formElement.elements.warn_flag.checked;
            let cut_flag = formElement.elements.cut_flag.checked;
            // perform json serialization
            var jsonData = JSON.stringify({
                "warn": parseFloat(warn),
                "cut": parseFloat(cut),
                "warn_flag": warn_flag,
                "cut_flag": cut_flag,
            });
            // send update_alerts POST request
            fetch("/api/v1/network/wifi/usage", {
                method: "post",
                headers: {
                    'Content-Type': 'application/json',
                },
                body: jsonData
            })
            .then( (response) => {
                return response.json()
            })
            .then( (jsonData) => {
                // write json response message to ui
                PEACH.flashMsg(jsonData.status, jsonData.msg);
            })
        }, false);
    });
}

// catch click of 'Reset' and make POST request
PEACH_NETWORK.resetUsage = function() {
    document.addEventListener('DOMContentLoaded', function() {
        var resetBtn = document.getElementById('resetTotal');
        if (resetBtn) {
            resetBtn.addEventListener('click', function(e) {
                // prevent form submission (default behavior)
                e.preventDefault();
                // send reset_data_usage POST request
                fetch("/api/v1/network/wifi/usage/reset", {
                    method: "post",
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                })
                .then( (response) => {
                    return response.json()
                })
                .then( (jsonData) => {
                    console.log(jsonData.msg);
                    // write json response message to ui
                    PEACH.flashMsg(jsonData.status, jsonData.msg);
                    // if reset is successful, update the ui
                    if (jsonData.status === "success") {
                        console.log(jsonData.data);
                        PEACH_NETWORK.updateTotal(jsonData.data);
                    }
                })
            }, false);
        }
    });
}

// update data usage total in ui
PEACH_NETWORK.updateTotal = function(data) {
    document.addEventListener('DOMContentLoaded', function() {
        console.log(data);
        let label = document.getElementById("dataTotal");
        // take usage total as bytes, convert to MB and round to nearest integer
        label.textContent = (data / 1024 / 1024).round();
    });
};

// update ui for warning
PEACH_NETWORK.toggleWarning = function() {
    document.addEventListener('DOMContentLoaded', function() {
        let i = document.getElementById("warnIcon");
        let warnCheck = document.getElementById("warnCheck");
        warnCheck.addEventListener('click', function(e) {
            console.log('Toggling warning icon state');
            if (warnCheck.checked) {
                i.className = "icon";
            } else {
                i.className = "icon icon-inactive";
            }
        });
    });
};

// update ui for cutoff
PEACH_NETWORK.toggleCutoff = function() {
    document.addEventListener('DOMContentLoaded', function() {
        let i = document.getElementById("cutIcon");
        let cutCheck = document.getElementById("cutCheck");
        cutCheck.addEventListener('click', function(e) {
            console.log('Toggling cutoff icon state');
            if (cutCheck.checked) {
                i.className = "icon";
            } else {
                i.className = "icon icon-inactive";
            }
        });
    });
};

var usageInstance = PEACH_NETWORK;
usageInstance.resetUsage();
usageInstance.toggleWarning();
usageInstance.toggleCutoff();
usageInstance.updateAlerts();