svgLogo = '';
const svgMenu = '';
const svgLock = '';
const svgUnlock = '';
const svgScan = '';
const svgConnect = '';
const svgSave = '';
const svgRestart = '';
const svgEye = '';
const svgNoEye = '';
const svgCloseModal = '';
var options = {};
// Simple JQuery-like selector
var $ = function (el) {
return document.getElementById(el);
};
function showHidePassword() {
var inp = $("password");
openModalMessage('Restart!', '
ESP restarted. Please wait a little and then reload this page.
');
if (inp.type === "password") {
inp.type = "text";
$('show-pass').classList.remove("w--current");
$('hide-pass').classList.add("w--current");
}
else {
inp.type = "password";
$('show-pass').classList.add("w--current");
$('hide-pass').classList.remove("w--current");
}
}
/**
* Read some data from database
*/
function getWiFiList() {
$('loader').classList.remove('hide');
var url = new URL("http://" + `${window.location.hostname}` + "/scan");
fetch(url)
.then(response => response.json())
.then(data => {
listWifiNetworks(data);
$('loader').classList.add('hide');
});
}
function selectWifi(row) {
try {
$('select-' + row.target.parentNode.id).checked = true;
}
catch (err) {
$(row.target.id).checked = true;
}
$('ssid').value = this.cells[1].innerHTML;
$('ssid-name').innerHTML = this.cells[1].innerHTML;
$('password').focus();
}
function listWifiNetworks(elems) {
const list = document.querySelector('#wifi-list');
list.innerHTML = "";
elems.forEach((elem, idx) => {
// Create a single row with all columns
var row = document.createElement('tr');
var id = 'wifi-' + idx;
row.id = id;
row.addEventListener('click', selectWifi);
row.innerHTML = ` | `;
row.innerHTML += `${elem.ssid} | `;
row.innerHTML += '' + elem.strength + ' dBm | ';
if (elem.security)
row.innerHTML += '' + svgLock + ' | ';
else
row.innerHTML += '' + svgUnlock + ' | ';
// Add row to list
list.appendChild(row);
});
$("wifi-table").classList.remove("hide");
}
function getParameters() {
$('loader').classList.remove('hide');
var url = new URL("http://" + `${window.location.hostname}` + "/config.json");
fetch(url)
.then(response => response.json())
.then(data => {
Object.keys(data).forEach(function (key) {
if (key.startsWith('logo-name')) {
$('name-logo').innerHTML = data[key];
delete data[key];
}
if (key.startsWith('logo-svg')) {
$('svg-logo').innerHTML = data[key];
delete data[key];
}
$('loader').classList.add('hide');
});
options = data;
listParameters(options);
// Read logo from file if present, otherwise use inline svg;
if (options['logo-file-hidden']) {
svgLogo = '';
$('svg-logo').innerHTML = '
';
$('svg-logo').setAttribute('title', '');
$('logo-file').setAttribute('type', 'number');
}
});
}
function createNewBox(cont, lbl) {
var el = document.createElement('div');
el.setAttribute('id', 'option-box' + cont);
el.classList.add('ctn', 'opt-box', 'hide');
var h = document.createElement('h2');
h.classList.add('heading-2');
h.innerHTML = lbl;
el.appendChild(h);
var form = document.createElement('form');
form.classList.add('form');
el.appendChild(form);
$('main-box').appendChild(el);
// Add new voice in menu and relatvie listener
var lnk = document.createElement('a');
lnk.setAttribute('id', 'set-opt' + cont);
lnk.setAttribute('data-box', 'option-box' + cont);
lnk.classList.add('a-link');
lnk.innerHTML = lbl;
lnk.addEventListener('click', switchPage);
$('nav-link').appendChild(lnk);
return form;
}
function listParameters(params) {
var el, pBox;
if (!Object.keys(params)[0].startsWith('param-box')) {
params = { 'param-box1': 'Options', ...params };
options = params;
}
Object.entries(params).forEach(([key, value], i) => {
if (key.startsWith('name-logo')) {
$('name-logo').innerHTML = value;
return;
}
else if (key.startsWith('logo-file')) {
return;
}
else if (key.startsWith('param-box')) {
pBox = createNewBox(i, value);
return;
}
else if (key.startsWith('raw-css')) {
var css = document.createElement("style");
css.innerHTML = value.trim();
document.body.appendChild(css);
return;
}
else if (key.startsWith('raw-javascript')) {
var js = document.createElement("script");
js.innerHTML = value.trim();
document.body.appendChild(js);
return;
}
else if (key.startsWith('raw-html')) {
html = value.trim();
el = document.createElement('div');
el.setAttribute('id', 'row' + i)
el.style.width = '100%';
el.innerHTML = html;
pBox.appendChild(el);
}
else {
let val = value;
let lbl = document.createElement('label');
el = document.createElement('input');
el.setAttribute('id', key);
el.setAttribute('type', 'text');
// Set input property (id, type and value). Check first if is boolean
if (typeof (val) === "boolean") {
el.setAttribute('type', 'checkbox');
el.classList.add('t-check', 'opt-input');
el.checked = val;
lbl.classList.add('input-label', 'toggle');
let dv = document.createElement('div');
dv.classList.add('toggle-switch');
let sp = document.createElement('span');
sp.classList.add('toggle-label');
sp.textContent = key;
lbl.appendChild(el);
lbl.appendChild(dv);
lbl.appendChild(sp);
pBox.appendChild(lbl);
addInputListener(el);
}
else {
el.value = val;
el.classList.add('opt-input');
lbl.setAttribute('label-for', key);
lbl.classList.add('input-label');
lbl.textContent = key;
if (typeof (val) === "number")
el.setAttribute('type', 'number');
if (typeof (val) === "object") {
// This is a select/option
if (val.values) {
el = document.createElement('select');
el.setAttribute('id', key);
val.values.forEach((a) => {
var opt = document.createElement('option');
opt.textContent = a;
opt.value = a;
el.appendChild(opt);
})
el.value = val.selected;
pBox.appendChild(el);
}
// This is a float value
else {
var num = Math.round(val.value * (1 / val.step)) / (1 / val.step);
el.setAttribute('type', 'number');
el.setAttribute('step', val.step);
el.setAttribute('min', val.min);
el.setAttribute('max', val.max);
el.value = Number(num).toFixed(3);
}
}
addInputListener(el);
var d = document.createElement('div');
d.classList.add('tf-wrapper');
d.appendChild(lbl);
d.appendChild(el);
pBox.appendChild(d);
}
}
if (key.endsWith('-hidden')) {
el.classList.add('hide');
}
});
}
function addInputListener(item) {
// Add event listener to option inputs
if (item.type === "number") {
item.addEventListener('change', () => {
if (item.getAttribute("step")) {
var obj = {};
obj.value = Math.round(item.value * (1 / item.step)) / (1 / item.step);
obj.step = item.getAttribute("step");
obj.min = item.getAttribute("min");
obj.max = item.getAttribute("max");
options[item.id] = obj;
}
else
options[item.id] = parseInt(item.value);
});
return;
}
if (item.type === "text") {
item.addEventListener('change', () => {
options[item.id] = item.value;
});
return;
}
if (item.type === "checkbox") {
item.addEventListener('change', () => {
options[item.id] = item.checked;
});
return;
}
if (item.type === 'select-one') {
item.addEventListener('change', (e) => {
options[e.target.id].selected = e.target.value;
});
return;
}
}
function saveParameters() {
var myblob = new Blob([JSON.stringify(options, null, 2)], {
type: 'application/json'
});
var formData = new FormData();
formData.append("data", myblob, '/config.json');
// POST data using the Fetch API
fetch('/edit', {
method: 'POST',
body: formData
})
// Handle the server response
.then(response => response.text())
.then(text => {
openModalMessage('Save options', 'Settings saved successfully on flash memory!
');
});
fetch('/save')
.then(response => response.text())
.then(text => {
})
.catch(error => {
});
}
function doConnection() {
var formdata = new FormData();
formdata.append("ssid", $('ssid').value);
formdata.append("password", $('password').value);
formdata.append("persistent", $('persistent').checked);
var requestOptions = {
method: 'POST',
body: formdata,
redirect: 'follow'
};
$('loader').classList.remove('hide');
fetch('/connect', requestOptions)
.then(function (response) {
httpCode = response.status;
return response.text();
})
.then(function (text) {
if (httpCode === 200) {
openModalMessage('Connected', 'AWTRTIX will restart now
Your new IP is ' + text);
}
else {
openModalMessage('Error!', '
Error on connection: ' + text + '
');
}
$('loader').classList.add('hide');
});
}
function switchPage(el) {
$('top-nav').classList.remove('responsive');
// Menu items
document.querySelectorAll("a").forEach(item => {
item.classList.remove('active');
});
el.target.classList.add('active');
// Box items
document.querySelectorAll(".opt-box").forEach(e => {
e.classList.add('hide');
});
$(el.target.getAttribute("data-box")).classList.remove('hide');
if (el.target.id != 'set-wifi') {
var fragment = document.createDocumentFragment();
fragment.appendChild($('btn-box'));
$(el.target.getAttribute("data-box")).appendChild(fragment);
$('btn-box').classList.remove('hide');
}
else
$('btn-box').classList.add('hide');
}
function showMenu() {
$('top-nav').classList.add('responsive');
}
var closeCallback = function () { ; };
function openModalMessage(title, msg, fn) {
$('message-title').innerHTML = title;
$('message-body').innerHTML = msg;
$('modal-message').open = true;
$('main-box').style.filter = "blur(3px)";
if (typeof fn != 'undefined') {
closeCallback = fn;
$('ok-modal').classList.remove('hide');
}
else
$('ok-modal').classList.add('hide');
}
function closeModalMessage(do_cb) {
$('modal-message').open = false;
$('main-box').style.filter = "";
if (typeof closeCallback != 'undefined' && do_cb)
closeCallback();
}
function restartESP() {
var url = new URL("http://" + `${window.location.hostname}` + "/restart");
fetch(url)
.then(response => response.text())
.then(data => {
closeModalMessage();
openModalMessage('Restart!', '
ESP restarted. Please wait a little and then reload this page.
');
});
}
function uploadLogo() {
var file = $('logo-file').files[0];
var reader = new FileReader();
reader.onload = async () => {
const formData = new FormData();
formData.append('image', file);
try {
const response = await fetch('/edit', {
method: 'POST',
body: formData,
});
options = { ...options, 'logo-file-hidden': file.name };
saveParameters();
}
catch (error) {
console.error(error);
}
};
reader.readAsDataURL(file);
}
// Initializes the app.
$('svg-menu').innerHTML = svgMenu;
$('svg-eye').innerHTML = svgEye;
$('svg-no-eye').innerHTML = svgNoEye;
$('svg-scan').innerHTML = svgScan;
$('svg-connect').innerHTML = svgConnect;
$('svg-save').innerHTML = svgSave;
$('svg-restart').innerHTML = svgRestart;
$('close-modal').innerHTML = svgCloseModal;
$('svg-logo').innerHTML = svgLogo;
$('svg-logo').setAttribute('title', 'Click to upload your logo file');
$('hum-btn').addEventListener('click', showMenu);
$('scan-wifi').addEventListener('click', getWiFiList);
$('connect-wifi').addEventListener('click', doConnection);
$('save-params').addEventListener('click', saveParameters);
$('show-hide-password').addEventListener('click', showHidePassword);
$('set-wifi').addEventListener('click', switchPage);
// $('set-opt1').addEventListener('click', switchPage);
$('about').addEventListener('click', switchPage);
$('restart').addEventListener('click', restartESP);
window.addEventListener('load', getParameters);
// Enable wifi-connect btn only if password inserted
$('connect-wifi').disabled = true;
$('password').addEventListener('input', (event) => {
if ($('password').value.length === 0)
$('connect-wifi').disabled = true;
else
$('connect-wifi').disabled = false;
});