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

/*

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

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

methods:

 PEACH_NETWORK.activateAp();
 PEACH_NETWORK.activateClient();
 PEACH_NETWORK.apMode();
 PEACH_NETWORK.clientMode();

*/

var PEACH_NETWORK = {};

// catch click of 'Deploy Access Point' and make POST request
PEACH_NETWORK.activateAp = function() {
    document.addEventListener('DOMContentLoaded', function() {
        var deployAP = document.getElementById('deployAccessPoint');
        if (deployAP) {
            deployAP.addEventListener('click', function(e) {
                // prevent form submission (default behavior)
                e.preventDefault();
                // write in-progress status message to ui
                PEACH.flashMsg("info", "Deploying access point...");
                // send activate_ap POST request
                fetch("/api/v1/network/activate_ap", {
                    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 ap activation is successful, update the ui
                    if (jsonData.status === "success") {
                        PEACH_NETWORK.apMode();
                    }
                })
            }, false);
        }
    });
}

// catch click of 'Enable WiFi' and make POST request
PEACH_NETWORK.activateClient = function() {
    document.addEventListener('DOMContentLoaded', function() {
        var enableWifi = document.getElementById('connectWifi');
        if (enableWifi) {
            enableWifi.addEventListener('click', function(e) {
                // prevent form submission (default behavior)
                e.preventDefault();
                // write in-progress status message to ui
                PEACH.flashMsg("info", "Enabling WiFi client...");
                // send activate_ap POST request
                fetch("/api/v1/network/activate_client", {
                    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 client activation is successful, update the ui
                    if (jsonData.status === "success") {
                        PEACH_NETWORK.clientMode();
                    }
                })
            }, false);
        }
    });
}

// replace 'Deploy Access Point' button with 'Enable WiFi' button
PEACH_NETWORK.apMode = function() {
    // create Enable WiFi button and add it to button div
    var wifiButton = document.createElement("A");
    wifiButton.className = "button center";
    wifiButton.href = "/settings/network/wifi/activate";
    wifiButton.id = "connectWifi";
    var label = "Enable WiFi";
    var buttonText = document.createTextNode(label);
    wifiButton.appendChild(buttonText);

    // append the new button to the buttons div
    let buttons = document.getElementById("buttons");
    buttons.appendChild(wifiButton);

    // remove the old 'Deploy Access Point' button
    let apButton = document.getElementById("deployAccessPoint");
    apButton.remove();
}

// replace 'Enable WiFi' button with 'Deploy Access Point' button
PEACH_NETWORK.clientMode = function() {
    // create Deploy Access Point button and add it to button div
    var apButton = document.createElement("A");
    apButton.className = "button center";
    apButton.href = "/settings/network/ap/activate";
    apButton.id = "deployAccessPoint";
    var label = "Deploy Access Point";
    var buttonText = document.createTextNode(label);
    apButton.appendChild(buttonText);

    // append the new button to the buttons div
    let buttons = document.getElementById("buttons");
    buttons.appendChild(apButton);

    // remove the old 'Enable Wifi' button
    let wifiButton = document.getElementById("connectWifi");
    wifiButton.remove();
}

var networkInstance = PEACH_NETWORK;
networkInstance.activateAp();
networkInstance.activateClient();