Skip to content

D
df-aggregator
Commit 8b6692e2 by Corey Koval
Options

JS Cleanup

parent 06bc08ee
Showing with 63 additions and 113 deletions
static/receiver_configurator.js
...@@ -40,60 +40,50 @@ function editReceivers(rx_json, id) { ...@@ -40,60 +40,50 @@ function editReceivers(rx_json, id) {
if (receivers[id].single) isSingle = "checked"; if (receivers[id].single) isSingle = "checked";
var stationIDhtml = var stationIDhtml =
"Station ID: <a href=\"" + receivers[id].station_url + "\" target=\"_blank\">" + receivers[id].station_id + "</a>"; `Station ID: <a href="${receivers[id].station_url}" target="_blank">${receivers[id].station_id}</a>`;
// var manualInfo = var singleModeHtml = `&emsp;Single Receiver Mode: <input ${isSingle} id="singlerx_toggle_${id}" type="checkbox" />`;
// "<input type=\"hidden\" id=\"manual_toggle_" + receivers[id].uid + "\"/>";
var singleModeHtml = "&emsp;Single Receiver Mode: <input " + isSingle + " id=\"singlerx_toggle_" + id + "\" type=\"checkbox\" />"; var locationHtml = `Location: ${receivers[id].latitude}&#176;, ${receivers[id].longitude}&#176;`;
var locationHtml = var heading = `Heading: ${receivers[id].heading}&#176;`;
"Location: " + receivers[id].latitude + "&#176;, " + receivers[id].longitude + "&#176;";
var heading =
"Heading: " + receivers[id].heading + "&#176;";
var freqHtml = var freqHtml = `Tuned to ${receivers[id].frequency} MHz`;
"Tuned to " + receivers[id].frequency + " MHz";
var edit_stationIDhtml = var edit_stationIDhtml =
"Station ID:<input style=\"width: 105px;\" type=\"text\" value=\"" + receivers[id].station_id + "\" name=\"station_id_" + id + "\" />"; `Station ID:<input style="width: 105px;" type="text" value="${receivers[id].station_id}" name="station_id_${id}" />`;
// var edit_manualInfo =
// "Manually input receiver info: <input id=\"manual_toggle_" + id + "\" type=\"checkbox\" />";
var edit_locationHtml = var edit_locationHtml =
"Latitude:<input style=\"width: 105px;\" type=\"text\" value=\"" + receivers[id].latitude + "\" name=\"station_lat_" + id + "\" />" + `Latitude:<input style="width: 105px;" type="text" value="${receivers[id].latitude}" name="station_lat_${id}" />
" Longitude:<input style=\"width: 105px;\" type=\"text\" value=\"" + receivers[id].longitude + "\" name=\"station_lon_" + id + "\" />"; Longitude:<input style="width: 105px;" type="text" value="${receivers[id].longitude}" name="station_lon_${id}" />`;
var edit_heading = var edit_heading =
"Heading:<input style=\"width: 105px;\" type=\"text\" value=\"" + receivers[id].heading + "\" name=\"station_heading_" + id + "\" />"; `Heading:<input style="width: 105px;" type="text" value="${receivers[id].heading}" name="station_heading_${id}" />`;
var edit_freqHtml = var edit_freqHtml =
"Frequency:<input style=\"width: 105px;\" type=\"text\" value=\"" + receivers[id].frequency + "\" name=\"frequency_" + id + "\" />"; `Frequency:<input style="width: 105px;" type="text" value="${receivers[id].frequency}" name="frequency_${id}" />`;
const mobilespan = document.getElementById(id + "-mobile"); const mobilespan = document.getElementById(`${id}-mobile`);
const singlespan = document.getElementById(id + "-single"); const singlespan = document.getElementById(`${id}-single`);
// var mobile = id + "-mobile";
var isMobileCheck; var isMobileCheck;
var isInvertedCheck; var isInvertedCheck;
var isSingleCheck; var isSingleCheck;
var editButton = document.getElementById(id + "-edit"); var editButton = document.getElementById(`${id}-edit`);
if (editButton.checked) { if (editButton.checked) {
clearInterval(autoRefresh); clearInterval(autoRefresh);
let isMobile = ""; let isMobile = "";
if (receivers[id].mobile) isMobile = "checked"; if (receivers[id].mobile) isMobile = "checked";
let isInverted = ""; let isInverted = "";
if (receivers[id].inverted) isInverted = "checked"; if (receivers[id].inverted) isInverted = "checked";
document.getElementById(id + "-editicon").innerHTML = "save"; document.getElementById(`${id}-editicon`).innerHTML = "save";
mobilespan.innerHTML = mobilespan.innerHTML =
"Mobile Receiver: <input " + isMobile + " id=\"mobilerx_toggle_" + id + "\" type=\"checkbox\" />"; `Mobile Receiver: <input ${isMobile} id="mobilerx_toggle_${id}" type="checkbox" />`;
document.getElementById(id + "-invert").innerHTML = document.getElementById(`${id}-invert`).innerHTML =
"Inverted DOA: <input " + isInverted + " id=\"invert_toggle_" + id + "\" type=\"checkbox\" />"; `Inverted DOA: <input ${isInverted} id="invert_toggle_${id}" type="checkbox" />`;
isInvertedCheck = document.getElementById("invert_toggle_" + id); isInvertedCheck = document.getElementById(`invert_toggle_${id}`);
isInvertedCheck.setAttribute("title", "KerberosSDR users keep this checked."); isInvertedCheck.setAttribute("title", "KerberosSDR users keep this checked.");
isMobileCheck = document.getElementById("mobilerx_toggle_" + id); isMobileCheck = document.getElementById(`mobilerx_toggle_${id}`);
if (isMobileCheck.checked) { if (isMobileCheck.checked) {
if (isMobileCheck.checked) { if (isMobileCheck.checked) {
singlespan.innerHTML = singleModeHtml; singlespan.innerHTML = singleModeHtml;
...@@ -106,31 +96,16 @@ function editReceivers(rx_json, id) { ...@@ -106,31 +96,16 @@ function editReceivers(rx_json, id) {
singlespan.innerHTML = ""; singlespan.innerHTML = "";
} }
} }
// document.getElementById(id + "-manual").innerHTML = edit_manualInfo;
// // document.getElementById(id + "-url").innerHTML = edit_stationUrlHtml;
// document.getElementById("manual_toggle_" + id).onchange = function() {
// if (document.getElementById("manual_toggle_" + id).checked) {
// document.getElementById(id + "-id").innerHTML = edit_stationIDhtml;
// document.getElementById(id + "-location").innerHTML = edit_locationHtml;
// document.getElementById(id + "-heading").innerHTML = edit_heading;
// document.getElementById(id + "-freq").innerHTML = edit_freqHtml;
// } else {
// document.getElementById(id + "-id").innerHTML = stationIDhtml;
// document.getElementById(id + "-location").innerHTML = locationHtml;
// document.getElementById(id + "-heading").innerHTML = heading;
// document.getElementById(id + "-freq").innerHTML = freqHtml;
// }
// }
} else { } else {
autoRefresh = setInterval(function () { reloadRX(); }, refreshrate); autoRefresh = setInterval(function () { reloadRX(); }, refreshrate);
isMobileCheck = document.getElementById("mobilerx_toggle_" + id); isMobileCheck = document.getElementById(`mobilerx_toggle_${id}`);
if (isMobileCheck.checked) { if (isMobileCheck.checked) {
receivers[id].mobile = true; receivers[id].mobile = true;
} else { } else {
receivers[id].mobile = false; receivers[id].mobile = false;
} }
isInvertedCheck = document.getElementById("invert_toggle_" + id); isInvertedCheck = document.getElementById(`invert_toggle_${id}`);
if (isInvertedCheck.checked) { if (isInvertedCheck.checked) {
receivers[id].inverted = true; receivers[id].inverted = true;
} else { } else {
...@@ -138,7 +113,7 @@ function editReceivers(rx_json, id) { ...@@ -138,7 +113,7 @@ function editReceivers(rx_json, id) {
} }
try { try {
isSingleCheck = document.getElementById("singlerx_toggle_" + id); isSingleCheck = document.getElementById(`singlerx_toggle_${id}`);
if (isSingleCheck.checked) { if (isSingleCheck.checked) {
receivers[id].single = true; receivers[id].single = true;
} else { } else {
...@@ -156,7 +131,7 @@ function editReceivers(rx_json, id) { ...@@ -156,7 +131,7 @@ function editReceivers(rx_json, id) {
method: "PUT" method: "PUT"
}; };
// clearOld(); // clearOld();
fetch("/rx_params/" + id, otherParams) fetch(`/rx_params/${id}`, otherParams)
.then(res => { .then(res => {
updateRx(showReceivers, id); updateRx(showReceivers, id);
reloadRX(); reloadRX();
...@@ -189,7 +164,7 @@ function makeNewRx(url) { ...@@ -189,7 +164,7 @@ function makeNewRx(url) {
// * Removes the Rx UI Card // * Removes the Rx UI Card
// ***************************************** // *****************************************
function removerx(uid) { function removerx(uid) {
const rxcard = document.getElementById("rx-" + uid); const rxcard = document.getElementById(`rx-${uid}`);
rxcard.remove(); rxcard.remove();
} }
...@@ -248,57 +223,47 @@ function activateReceiver(uid, state) { ...@@ -248,57 +223,47 @@ function activateReceiver(uid, state) {
function showReceivers(rx_json, id) { function showReceivers(rx_json, id) {
const receivers = rx_json['receivers']; const receivers = rx_json['receivers'];
// var stationUrlHtml =
// "<input type=\"hidden\" id=\"url_" + id + "\"/>";
var stationIDhtml = var stationIDhtml =
"Station ID: <a href=\"" + receivers[id].station_url + "\" target=\"_blank\">" + receivers[id].station_id + "</a>"; `Station ID: <a href="${receivers[id].station_url}" target="_blank">${receivers[id].station_id}</a>`;
// var manualInfo =
// "<input type=\"hidden\" id=\"manual_toggle_" + receivers[id].uid + "\"/>";
var locationHtml = var locationHtml =
"Location: " + receivers[id].latitude + "&#176;, " + receivers[id].longitude + "&#176;"; `Location: ${receivers[id].latitude}&#176;, ${receivers[id].longitude}&#176;`;
var heading = var heading =
"Heading: " + receivers[id].heading + "&#176;"; `Heading: ${receivers[id].heading}&#176;`;
var freqHtml = var freqHtml =
"Tuned to " + receivers[id].frequency + " MHz"; `Tuned to ${receivers[id].frequency} MHz`;
const urlspan = document.getElementById(id + "-url"); const urlspan = document.getElementById(`${id}-url`);
const mobilespan = document.getElementById(id + "-mobile"); const mobilespan = document.getElementById(`${id}-mobile`);
const invertspan = document.getElementById(id + "-invert"); const invertspan = document.getElementById(`${id}-invert`);
const singlespan = document.getElementById(id + "-single"); const singlespan = document.getElementById(`${id}-single`);
// const manualspan = document.getElementById(id + "-manual"); const idspan = document.getElementById(`${id}-id`);
const idspan = document.getElementById(id + "-id"); const locationspan = document.getElementById(`${id}-location`);
const locationspan = document.getElementById(id + "-location"); const headingspan = document.getElementById(`${id}-heading`);
const headingspan = document.getElementById(id + "-heading"); const freqspan = document.getElementById(`${id}-freq`);
const freqspan = document.getElementById(id + "-freq"); document.getElementById(`${id}-activate`)
document.getElementById(id + "-activate") .setAttribute('onclick', `activateReceiver(${receivers[id].uid}, ${!receivers[id].active})`);
.setAttribute('onclick', "activateReceiver(" + receivers[id].uid + ", " + !receivers[id].active + ")");
if (receivers[id].active == true) { if (receivers[id].active == true) {
document.getElementById(id + "-activate") document.getElementById(`${id}-activate`)
.setAttribute("title", "Click to disable this receiver."); .setAttribute("title", "Click to disable this receiver.");
document.getElementById(id + "-activateicon").style.color = "black"; document.getElementById(`${id}-activateicon`).style.color = "black";
} else { } else {
document.getElementById(id + "-activateicon").style.color = "red"; document.getElementById(`${id}-activateicon`).style.color = "red";
document.getElementById(id + "-activate") document.getElementById(`${id}-activate`)
.setAttribute("title", "Click to enable this receiver."); .setAttribute("title", "Click to enable this receiver.");
} }
// document.getElementById(id + "-mobile").innerHTML = "";
mobilespan.innerHTML = ""; mobilespan.innerHTML = "";
invertspan.innerHTML = ""; invertspan.innerHTML = "";
singlespan.innerHTML = ""; singlespan.innerHTML = "";
document.getElementById(id + "-editicon").innerHTML = "edit"; document.getElementById(`${id}-editicon`).innerHTML = "edit";
// document.getElementById(id + "-manual").innerHTML = manualInfo; document.getElementById(`${id}-id`).innerHTML = stationIDhtml;
// document.getElementById(id + "-url").innerHTML = stationUrlHtml; document.getElementById(`${id}-location`).innerHTML = locationHtml;
document.getElementById(id + "-id").innerHTML = stationIDhtml; document.getElementById(`${id}-heading`).innerHTML = heading;
document.getElementById(id + "-location").innerHTML = locationHtml; document.getElementById(`${id}-freq`).innerHTML = freqHtml;
document.getElementById(id + "-heading").innerHTML = heading;
document.getElementById(id + "-freq").innerHTML = freqHtml;
} }
...@@ -314,13 +279,11 @@ function createReceivers(rx_json, id) { ...@@ -314,13 +279,11 @@ function createReceivers(rx_json, id) {
const rxcard = document.createElement('div'); const rxcard = document.createElement('div');
rxcard.className = "receiver"; rxcard.className = "receiver";
rxcard.id = "rx-" + receivers[i].uid; rxcard.id = `rx-${receivers[i].uid}`;
// const urlspan = document.createElement('span');
const mobilespan = document.createElement('span'); const mobilespan = document.createElement('span');
const invertspan = document.createElement('span'); const invertspan = document.createElement('span');
const singlespan = document.createElement('span'); const singlespan = document.createElement('span');
// const manualspan = document.createElement('span');
const idspan = document.createElement('span'); const idspan = document.createElement('span');
const locationspan = document.createElement('span'); const locationspan = document.createElement('span');
const headingspan = document.createElement('span'); const headingspan = document.createElement('span');
...@@ -329,13 +292,13 @@ function createReceivers(rx_json, id) { ...@@ -329,13 +292,13 @@ function createReceivers(rx_json, id) {
const editiconspan = document.createElement('span'); const editiconspan = document.createElement('span');
editiconspan.classList.add("material-icons", "edit-icon", "no-select"); editiconspan.classList.add("material-icons", "edit-icon", "no-select");
editiconspan.innerHTML = "edit"; editiconspan.innerHTML = "edit";
editiconspan.id = receivers[i].uid + "-editicon"; editiconspan.id = `${receivers[i].uid}-editicon`;
const editcheck = document.createElement('input'); const editcheck = document.createElement('input');
editcheck.classList.add("edit-checkbox", "edit-icon"); editcheck.classList.add("edit-checkbox", "edit-icon");
editcheck.type = 'checkbox'; editcheck.type = 'checkbox';
editcheck.id = receivers[i].uid + "-edit"; editcheck.id = `${receivers[i].uid}-edit`;
editcheck.setAttribute('onclick', "updateRx(editReceivers, " + receivers[i].uid + ")"); editcheck.setAttribute('onclick', `updateRx(editReceivers, ${receivers[i].uid})`);
const deleteiconspan = document.createElement('span'); const deleteiconspan = document.createElement('span');
deleteiconspan.classList.add("material-icons", "delete-icon", "no-select"); deleteiconspan.classList.add("material-icons", "delete-icon", "no-select");
...@@ -344,38 +307,25 @@ function createReceivers(rx_json, id) { ...@@ -344,38 +307,25 @@ function createReceivers(rx_json, id) {
const deletecheck = document.createElement('input'); const deletecheck = document.createElement('input');
deletecheck.classList.add("edit-checkbox", "delete-icon"); deletecheck.classList.add("edit-checkbox", "delete-icon");
deletecheck.type = 'checkbox'; deletecheck.type = 'checkbox';
deletecheck.id = receivers[i].uid + "-delete"; deletecheck.id = `${receivers[i].uid}-delete`;
deletecheck.setAttribute('onclick', "deleteReceiver(" + receivers[i].uid + ")"); deletecheck.setAttribute('onclick', `deleteReceiver(${receivers[i].uid})`);
const activateiconspan = document.createElement('span'); const activateiconspan = document.createElement('span');
activateiconspan.classList.add("material-icons", "activate-icon", "no-select"); activateiconspan.classList.add("material-icons", "activate-icon", "no-select");
activateiconspan.innerHTML = "power_settings_new"; activateiconspan.innerHTML = "power_settings_new";
activateiconspan.id = receivers[i].uid + "-activateicon"; activateiconspan.id = `${receivers[i].uid}-activateicon`;
const activatecheck = document.createElement('input'); const activatecheck = document.createElement('input');
activatecheck.classList.add("edit-checkbox", "activate-icon"); activatecheck.classList.add("edit-checkbox", "activate-icon");
activatecheck.type = 'checkbox'; activatecheck.type = 'checkbox';
activatecheck.id = receivers[i].uid + "-activate"; activatecheck.id = `${receivers[i].uid}-activate`;
mobilespan.id = `${receivers[i].uid}-mobile`;
// const addnewiconspan = document.createElement('span'); invertspan.id = `${receivers[i].uid}-invert`;
// addnewiconspan.classList.add("material-icons", "add-icon", "no-select"); singlespan.id = `${receivers[i].uid}-single`;
// addnewiconspan.innerHTML = "add_circle_outline" idspan.id = `${receivers[i].uid}-id`;
// addnewiconspan.id="add_station_icon" locationspan.id = `${receivers[i].uid}-location`;
// headingspan.id = `${receivers[i].uid}-heading`;
// const addnewcheck = document.createElement('input'); freqspan.id = `${receivers[i].uid}-freq`;
// addnewcheck.type = 'checkbox';
// addnewcheck.id="add_station";
// addnewcheck.classList.add("edit-checkbox", "add-icon")
// urlspan.id = receivers[i].uid + "-url";
mobilespan.id = receivers[i].uid + "-mobile";
invertspan.id = receivers[i].uid + "-invert";
singlespan.id = receivers[i].uid + "-single";
// manualspan.id = receivers[i].uid + "-manual";
idspan.id = receivers[i].uid + "-id";
locationspan.id = receivers[i].uid + "-location";
headingspan.id = receivers[i].uid + "-heading";
freqspan.id = receivers[i].uid + "-freq";
document.getElementById("rxcards").insertBefore(rxcard, document.getElementById("add_station")); document.getElementById("rxcards").insertBefore(rxcard, document.getElementById("add_station"));
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment