From ee1da0599c264f6888874c4eca74abdb7b70d452 Mon Sep 17 00:00:00 2001 From: glyph Date: Mon, 22 Nov 2021 15:30:45 +0200 Subject: [PATCH] remove status update logic --- peach-web/static/js/network_card.js | 128 +++++++--------------------- 1 file changed, 30 insertions(+), 98 deletions(-) diff --git a/peach-web/static/js/network_card.js b/peach-web/static/js/network_card.js index 79fa72a..3026a72 100644 --- a/peach-web/static/js/network_card.js +++ b/peach-web/static/js/network_card.js @@ -1,7 +1,7 @@ /* behavioural layer for the `network_card.html.tera` template, -corresponding to the web route `/network` +corresponding to the web route `/settings/network` - intercept form submissions - perform json api calls @@ -11,10 +11,8 @@ methods: PEACH_NETWORK.activateAp(); PEACH_NETWORK.activateClient(); - PEACH_NETWORK.apOnline(); - PEACH_NETWORK.clientOffline(); - PEACH_NETWORK.clientOnline(); - PEACH_NETWORK.flashMsg(status, msg); + PEACH_NETWORK.apMode(); + PEACH_NETWORK.clientMode(); */ @@ -29,7 +27,7 @@ PEACH_NETWORK.activateAp = function() { // prevent form submission (default behavior) e.preventDefault(); // write in-progress status message to ui - PEACH_NETWORK.flashMsg("info", "Deploying access point..."); + PEACH.flashMsg("info", "Deploying access point..."); // send activate_ap POST request fetch("/api/v1/network/activate_ap", { method: "post", @@ -44,10 +42,10 @@ PEACH_NETWORK.activateAp = function() { .then( (jsonData) => { console.log(jsonData.msg); // write json response message to ui - PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg); + PEACH.flashMsg(jsonData.status, jsonData.msg); // if ap activation is successful, update the ui if (jsonData.status === "success") { - PEACH_NETWORK.apOnline(); + PEACH_NETWORK.apMode(); } }) }, false); @@ -64,7 +62,7 @@ PEACH_NETWORK.activateClient = function() { // prevent form submission (default behavior) e.preventDefault(); // write in-progress status message to ui - PEACH_NETWORK.flashMsg("info", "Enabling WiFi client..."); + PEACH.flashMsg("info", "Enabling WiFi client..."); // send activate_ap POST request fetch("/api/v1/network/activate_client", { method: "post", @@ -79,10 +77,10 @@ PEACH_NETWORK.activateClient = function() { .then( (jsonData) => { console.log(jsonData.msg); // write json response message to ui - PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg); + PEACH.flashMsg(jsonData.status, jsonData.msg); // if client activation is successful, update the ui if (jsonData.status === "success") { - PEACH_NETWORK.clientOnline(); + PEACH_NETWORK.clientMode(); } }) }, false); @@ -90,21 +88,12 @@ PEACH_NETWORK.activateClient = function() { }); } -// update ui for access point mode (status: online) -PEACH_NETWORK.apOnline = function() { - console.log('Activating AP Mode'); - - // update network mode and status (icon & label) - let i = document.getElementById("netModeIcon"); - i.className = "center icon icon-active"; - i.src = "icons/router.svg"; - let l = document.getElementById("netModeLabel"); - l.textContent = "ONLINE"; - +// 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 = "/network/wifi/activate"; + wifiButton.href = "/settings/network/wifi/activate"; wifiButton.id = "connectWifi"; var label = "Enable WiFi"; var buttonText = document.createTextNode(label); @@ -114,88 +103,31 @@ PEACH_NETWORK.apOnline = function() { let buttons = document.getElementById("buttons"); buttons.appendChild(wifiButton); - // remove the old 'Activate Access Point' button + // remove the old 'Deploy Access Point' button let apButton = document.getElementById("deployAccessPoint"); - apButton.style = "display: none;"; + apButton.remove(); } -// update ui for wifi client mode (status: online) -PEACH_NETWORK.clientOnline = function() { - console.log('Activating Client Mode'); +// 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); - // update network mode and status (icon & label) - let i = document.getElementById("netModeIcon"); - i.className = "center icon icon-active"; - i.src = "icons/wifi.svg"; - let l = document.getElementById("netModeLabel"); - l.textContent = "ONLINE"; + // append the new button to the buttons div + let buttons = document.getElementById("buttons"); + buttons.appendChild(apButton); - // TODO: think about updates for buttons (transition from ap mode) -} - -// update ui for wifi client mode (status: offline) -PEACH_NETWORK.clientOffline = function() { - console.log('Activating Client Mode'); - - // update network mode and status (icon & label) - let i = document.getElementById("netModeIcon"); - i.className = "center icon icon-inactive"; - i.src = "icons/wifi.svg"; - let l = document.getElementById("netModeLabel"); - l.textContent = "OFFLINE"; - - // TODO: think about updates for buttons (transition from ap mode) -} - -// display a message by appending a paragraph element -PEACH_NETWORK.flashMsg = function(status, msg) { - // set the class of the element according to status - var elementClass; - if (status === "success") { - elementClass = "capsule center-text flash-message font-success"; - } else if (status === "info") { - elementClass = "capsule center-text flash-message font-info"; - } else { - elementClass = "capsule center-text flash-message font-failure"; - }; - - var flashElement = document.getElementById("flashMsg"); - // if flashElement exists, update the class & text - if (flashElement) { - flashElement.className = elementClass; - flashElement.innerText = msg; - // if flashElement does not exist, create it, set id, class, text & append - } else { - // create new div for flash message - var flashDiv = document.createElement("DIV"); - // set div attributes - flashDiv.id = "flashMsg"; - flashDiv.className = elementClass; - // add json response message to flash message div - var flashMsg = document.createTextNode(msg); - flashDiv.appendChild(flashMsg); - // insert the flash message div above the three icon grid div - var gridDiv = document.getElementById("gridDiv"); - gridDiv.parentNode.insertBefore(flashDiv, gridDiv); - } + // remove the old 'Enable Wifi' button + let wifiButton = document.getElementById("connectWifi"); + wifiButton.remove(); } var networkInstance = PEACH_NETWORK; networkInstance.activateAp(); networkInstance.activateClient(); - -/* - -async function exampleFetch() { - const response = await fetch('/api/v1/network/state'); - const myJson = await response.json(); - //const jsonData = JSON.parse(myJson); - console.log(myJson.data.wlan0); - //var state = document.createElement("P"); - //state.innerText = ""jsonData.wlan0; - //document.body.appendChild(state); -} - -exampleFetch() - -*/