Fix broken JS and tweak styling (CSS & HTML) #33
|
@ -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()
|
||||
|
||||
*/
|
||||
|
|
Loading…
Reference in New Issue