93 lines
3.3 KiB
JavaScript
93 lines
3.3 KiB
JavaScript
/*
|
|
|
|
behavioural layer for the `network_modify.html.tera` template
|
|
|
|
- intercept button click for modify (form submission of credentials)
|
|
- perform json api call
|
|
- update the dom
|
|
|
|
methods:
|
|
|
|
PEACH_NETWORK.modify();
|
|
PEACH_NETWORK.flashMsg(status, msg);
|
|
|
|
*/
|
|
|
|
var PEACH_NETWORK = {};
|
|
|
|
// catch click of 'Save' button and make POST request
|
|
PEACH_NETWORK.modify = 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");
|
|
// create form data object from the wifiModify form element
|
|
var formData = new FormData(formElement);
|
|
var object = {};
|
|
// assign ssid and pass from form
|
|
formData.forEach(function(value, key){
|
|
object[key] = value;
|
|
});
|
|
// perform json serialization
|
|
var jsonData = JSON.stringify(object);
|
|
// write in-progress status message to ui
|
|
PEACH_NETWORK.flashMsg("info", "Updating WiFi password...");
|
|
// send new_password POST request
|
|
fetch("/api/v1/network/wifi/modify", {
|
|
method: "post",
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: jsonData
|
|
})
|
|
.then( (response) => {
|
|
return response.json()
|
|
})
|
|
.then( (jsonData) => {
|
|
// write json response message to ui
|
|
PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg);
|
|
})
|
|
}, false);
|
|
});
|
|
}
|
|
|
|
// 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 below the button div
|
|
var buttonDiv = document.getElementById("buttonDiv");
|
|
// flashDiv will be added to the end since buttonDiv is the last
|
|
// child within the parent element (card-container div)
|
|
buttonDiv.parentNode.insertBefore(flashDiv, buttonDiv.nextSibling);
|
|
}
|
|
}
|
|
|
|
var modifyInstance = PEACH_NETWORK;
|
|
modifyInstance.modify();
|