Semi functional client webUI

- can update client info for sure
- Working on notifications now

Client/controllers/clientController.js

@@ -5,7 +5,7 @@ const log = new DebugBuilder("client", "clientController");
 require('dotenv').config();
 const modes = require("../config/modes");
 // Modules
-const { executeAsyncConsoleCommand, BufferToJson } = require("../utilities/utilities");
+const { executeAsyncConsoleCommand, BufferToJson, nodeObject } = require("../utilities/utilities");
 // Utilities
 const { getFullConfig } = require("../utilities/configHandler");
 const { updateId, updateConfig, updateClientConfig } = require("../utilities/updateConfig");
@@ -22,11 +22,11 @@ var runningClientConfig = getFullConfig()
  * @returns {*}
  */
 function checkBodyForPresetFields(req, res, callback) {
-    if (!req.body?.systemName) return res.status(403).json({"message": "No system in the request"});
-    if (!req.body?.frequencies && Array.isArray(req.body.frequencies)) return res.status(403).json({"message": "No frequencies in the request or type is not an array"});
-    if (!req.body?.mode && typeof req.body.mode === "string") return res.status(403).json({"message": "No mode in the request"});
+    if (!req.body?.systemName) return res.status(403).json({ "message": "No system in the request" });
+    if (!req.body?.frequencies && Array.isArray(req.body.frequencies)) return res.status(403).json({ "message": "No frequencies in the request or type is not an array" });
+    if (!req.body?.mode && typeof req.body.mode === "string") return res.status(403).json({ "message": "No mode in the request" });
     if (!req.body?.trunkFile) {
-        if (modes.digitalModes.includes(req.body.mode)) return res.status(403).json({"message": "No trunk file in the request but digital mode specified. If you are not using a trunk file for this frequency make sure to specify 'none' for trunk file in the request"})
+        if (modes.digitalModes.includes(req.body.mode)) return res.status(403).json({ "message": "No trunk file in the request but digital mode specified. If you are not using a trunk file for this frequency make sure to specify 'none' for trunk file in the request" })
         // If there is a value keep it but if not, add nothing so the system can update that key (if needed)
         req.body.trunkFile = req.body.trunkFile ?? "none";
     }
@@ -34,7 +34,7 @@ function checkBodyForPresetFields(req, res, callback) {
     return callback();
 }
 
-async function checkLocalIP() {    
+async function checkLocalIP() {
     if (process.platform === "win32") {
         // Windows
         var networkConfig = await executeAsyncConsoleCommand("ipconfig");
@@ -72,21 +72,21 @@ exports.checkConfig = async function checkConfig() {
         await updateId(0);
         runningClientConfig.id = 0;
     }
-    
+
     if (!runningClientConfig.ip) {
         const ipAddr = await checkLocalIP();
         await updateConfig('CLIENT_IP', ipAddr);
         runningClientConfig.ip = ipAddr;
     }
 
-    if(!runningClientConfig.name) {
+    if (!runningClientConfig.name) {
         const lastOctet = await String(checkLocalIP()).spit('.')[-1];
         const name = `Radio-Node-${lastOctet}`;
         await updateConfig('CLIENT_NAME', name);
         runningClientConfig.name = name;
     }
 
-    if(!runningClientConfig.port) {
+    if (!runningClientConfig.port) {
         const port = 3010;
         await updateConfig('CLIENT_PORT', port);
         runningClientConfig.port = port;
@@ -104,11 +104,11 @@ exports.checkIn = async (update = false) => {
     let reqOptions;
     await this.checkConfig();
     // Check if there is an ID found, if not add the node to the server. If there was an ID, check in with the server to make sure it has the correct information
-    try {        
-        if (!runningClientConfig?.id || runningClientConfig.id == 0) {                        
+    try {
+        if (!runningClientConfig?.id || runningClientConfig.id == 0) {
             // ID was not found in the config, creating a new node
-            reqOptions = new requestOptions("/nodes/newNode", "POST");                
-            sendHttpRequest(reqOptions, JSON.stringify(runningClientConfig), async (responseObject) => {                
+            reqOptions = new requestOptions("/nodes/newNode", "POST");
+            sendHttpRequest(reqOptions, JSON.stringify(runningClientConfig), async (responseObject) => {
                 // Check if the server responded
                 if (!responseObject) {
                     log.WARN("Server did not respond to checkIn. Will wait 60 seconds then try again");
@@ -120,7 +120,7 @@ exports.checkIn = async (update = false) => {
                 }
 
                 // Update the client's ID if the server accepted its
-                if (responseObject.statusCode === 202) {                    
+                if (responseObject.statusCode === 202) {
                     runningClientConfig.id = responseObject.body.nodeId;
                     log.DEBUG("Response object from new node: ", responseObject, runningClientConfig);
                     await updateId(runningClientConfig.id);
@@ -131,7 +131,7 @@ exports.checkIn = async (update = false) => {
                     log.DEBUG("HTTP Error: ", responseObject, await BufferToJson(responseObject.body));
                     await onHttpError(responseObject.statusCode);
                 }
-                
+
             });
         }
         else {
@@ -149,15 +149,17 @@ exports.checkIn = async (update = false) => {
                     }, 60000);
                     return
                 }
-                
+
                 if (responseObject.statusCode === 202) {
                     log.DEBUG("Updated keys: ", responseObject.body.updatedKeys)
                     // Server accepted an update
                 }
                 if (responseObject.statusCode === 200) {
                     // Server accepted the response but there were no keys to be updated
-                    const tempUpdatedConfig = updateClientConfig(responseObject.body);
-                    if (!tempUpdatedConfig.length > 0) return;
+                    if (!update){
+                        const tempUpdatedConfig = updateClientConfig(responseObject.body);
+                        if (!tempUpdatedConfig.length > 0) return;
+                    }
                 }
                 if (responseObject.statusCode >= 300) {
                     // Server threw an error
@@ -179,6 +181,24 @@ exports.requestCheckIn = async (req, res) => {
     return res.sendStatus(200);
 }
 
+/**
+ * Express JS Wrapper for checking and updating client config
+ * @param {*} req 
+ * @param {*} res 
+ * @returns 
+ */
+exports.updateClientConfigWrapper = async (req, res) => {    
+    // Convert the online status to a boolean to be worked with
+    log.DEBUG("REQ Body: ", req.body);
+    const updatedKeys = await updateClientConfig(req.body);
+    if (updatedKeys) {
+        log.DEBUG("Keys have been updated, updating running config and checking in with the server: ", updatedKeys);
+        runningClientConfig = await getFullConfig();
+        await this.checkIn(true);
+    }
+    res.status(200).json(updatedKeys);
+}
+
 /** Controller for the /client/presets endpoint
  * This is the endpoint wrapper to get the presets object
  */
@@ -196,7 +216,7 @@ exports.updatePreset = async (req, res) => {
             runningClientConfig.nearbySystems = getPresets();
             this.checkIn(true);
             return res.sendStatus(200);
-        }, {frequencies: req.body.frequencies, mode: req.body.mode, trunkFile: req.body.trunkFile});
+        }, { frequencies: req.body.frequencies, mode: req.body.mode, trunkFile: req.body.trunkFile });
     })
 }
 
@@ -218,7 +238,7 @@ exports.addNewPreset = async (req, res) => {
  */
 exports.removePreset = async (req, res) => {
     checkBodyForPresetFields(req, res, () => {
-        if (!req.body.systemName) return res.status("500").json({"message": "You must specify a system name to delete, this must match exactly to how the system name is saved."})
+        if (!req.body.systemName) return res.status("500").json({ "message": "You must specify a system name to delete, this must match exactly to how the system name is saved." })
         removePreset(req.body.systemName, () => {
             runningClientConfig.nearbySystems = getPresets();
             this.checkIn(true);

Client/public/res/css/main.css

@@ -0,0 +1,183 @@
+.node-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: border-box;
+    border: 1px solid #eff0f2;
+    border-radius: 1rem;
+    margin-bottom: 24px;
+    box-shadow: 0 2px 3px #e4e8f0;
+}
+
+.avatar-md {
+    height: 4rem;
+    width: 4rem;
+}
+
+.rounded-circle {
+    border-radius: 50% !important;
+}
+
+.img-thumbnail {
+    padding: 0.25rem;
+    background-color: #f1f3f7;
+    border: 1px solid #eff0f2;
+    border-radius: 0.75rem;
+}
+
+.avatar-title {
+    align-items: center;
+    background-color: #3b76e1;
+    color: #fff;
+    display: flex;
+    font-weight: 500;
+    height: 100%;
+    justify-content: center;
+    width: 100%;
+}
+
+.bg-soft-primary {
+    background-color: rgba(59, 118, 225, .25) !important;
+}
+
+a {
+    text-decoration: none !important;
+}
+
+.badge-soft-danger {
+    color: #f56e6e !important;
+    background-color: rgba(245, 110, 110, .1);
+}
+
+.badge-soft-success {
+    color: #63ad6f !important;
+    background-color: rgba(99, 173, 111, .1);
+}
+
+.mb-0 {
+    margin-bottom: 0 !important;
+}
+
+.badge {
+    display: inline-block;
+    padding: 0.25em 0.6em;
+    font-size: 75%;
+    font-weight: 500;
+    line-height: 1;
+    color: #fff;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: 0.75rem;
+}
+
+/* Info Card Section */
+.info-card {
+    background-color: #fff;
+    border-radius: 10px;
+    border: none;
+    position: relative;
+    margin-bottom: 30px;
+    box-shadow: 0 0.46875rem 2.1875rem rgba(90, 97, 105, 0.1), 0 0.9375rem 1.40625rem rgba(90, 97, 105, 0.1), 0 0.25rem 0.53125rem rgba(90, 97, 105, 0.12), 0 0.125rem 0.1875rem rgba(90, 97, 105, 0.1);
+}
+
+.info-card .card-statistic .card-icon-large .bi {
+    font-size: 110px;
+}
+
+.info-card .card-statistic .card-icon {
+    text-align: center;
+    line-height: 50px;
+    margin-left: 15px;
+    color: #000;
+    position: absolute;
+    right: -5px;
+    top: 20px;
+    opacity: 0.1;
+}
+
+/* Info Card Background Colors */
+
+.l-bg-cherry {
+    background: linear-gradient(to right, #493240, #f09) !important;
+    color: #fff;
+}
+
+.l-bg-blue-dark {
+    background: linear-gradient(to right, #373b44, #4286f4) !important;
+    color: #fff;
+}
+
+.l-bg-green-dark {
+    background: linear-gradient(to right, #0a504a, #38ef7d) !important;
+    color: #fff;
+}
+
+.l-bg-orange-dark {
+    background: linear-gradient(to right, #a86008, #ffba56) !important;
+    color: #fff;
+}
+
+.l-bg-cyan {
+    background: linear-gradient(135deg, #289cf5, #84c0ec) !important;
+    color: #fff;
+}
+
+.l-bg-green {
+    background: linear-gradient(135deg, #23bdb8 0%, #43e794 100%) !important;
+    color: #fff;
+}
+
+.l-bg-orange {
+    background: linear-gradient(to right, #f9900e, #ffba56) !important;
+    color: #fff;
+}
+
+/* Global Section */
+.sidebar-container {
+    min-height: 95vh;
+}
+
+.sidebar { 
+    position: fixed; 
+    top: 5vh; 
+    bottom: 0;
+    left: 0;
+ }
+
+/* User table section */
+
+.label {
+    border-radius: 3px;
+    font-size: 1.1em;
+    font-weight: 600;
+}
+
+.user-list tbody td .user-subhead {
+    font-size: 1em;
+    font-style: italic;
+}
+
+.table thead tr th {
+    text-transform: uppercase;
+    font-size: 0.875em;
+}
+
+.table thead tr th {
+    border-bottom: 2px solid #e7ebee;
+}
+
+.table tbody tr td:first-child {
+    font-size: 1.125em;
+    font-weight: 300;
+}
+
+.table tbody tr td {
+    font-size: 0.875em;
+    vertical-align: middle;
+    border-top: 1px solid #e7ebee;
+    padding: 12px 8px;
+}

Client/public/res/js/node.js

@@ -0,0 +1,400 @@
+$(document).ready(async () => {
+    console.log("Loading stored notifications...");
+    await loadStoredToasts();
+    console.log("Showing stored notifications...");
+    await showStoredToasts();
+});
+
+/**
+ * Gets all toasts stored in local storage
+ * 
+ * @returns {Object} Object of toasts in storage
+ */
+function getStoredToasts() {
+    if (localStorage.getItem("toasts")) {
+        const storedToasts = JSON.parse(localStorage.getItem("toasts"));
+        console.log("LOADED STORED TOASTS: ", storedToasts);
+        navbarUpdateNotificationBellCount(storedToasts);
+        return storedToasts;
+    }
+    else return false
+}
+
+/**
+ * Adds a toast to storage, will not allow duplicates
+ * 
+ * @param {Date} time The date object from when the toast was created
+ * @param {*} message The message of the toast
+ */
+function addToastToStorage(time, message) {
+    var toasts = [{ 'time': time, 'message': message }]
+    var storedToasts = getStoredToasts();
+    console.log("Adding new notification to storage: ", toasts);
+    toasts = toasts.concat(storedToasts);
+    console.log("Combined new and stored notifications: ", toasts);
+    toasts = toasts.filter((value, index, self) =>
+        index === self.findIndex((t) => (
+            t.time === value.time && t.message === value.message
+        ))
+    )
+    console.log("Deduped stored notifications: ", toasts);
+    localStorage.setItem("toasts", JSON.stringify(toasts));
+    navbarUpdateNotificationBellCount(toasts);
+}
+
+/**
+ * Removes a toast from the local storage
+ * 
+ * @param {Date} time The date object from when the toast was created
+ * @param {*} message The message of the toast
+ */
+function removeToastFromStorage(time, message) {
+    const toastToRemove = { 'time': time, 'message': message }
+    console.log("Toast to remove: ", toastToRemove);
+    var toasts = getStoredToasts();
+    console.log("Stored toasts: ", toasts);
+    if (toasts.indexOf(toastToRemove)) toasts.splice(toasts.indexOf(toastToRemove) - 1, 1)
+    console.log("Toasts with selected toast removed: ", toasts);
+    localStorage.setItem("toasts", JSON.stringify(toasts));
+    navbarUpdateNotificationBellCount(toasts);
+}
+
+/**
+ * Shows all stored toasts
+ */
+function showStoredToasts() {
+    const storedToasts = getStoredToasts();
+    if (!storedToasts) return
+    console.log("Loaded stored notifications to show: ", storedToasts);
+    for (const toast of storedToasts) {
+        const toastId = `${toast.time}-toast`;
+        console.log("Showing stored toast: ", toast, toastId);
+        const toastElement = bootstrap.Toast.getOrCreateInstance(document.getElementById(toastId));
+        toastElement.show();
+    }
+}
+
+/**
+ * Loads all toasts stored in the local storage into the DOM of the webpage
+ */
+function loadStoredToasts() {
+    const storedToasts = getStoredToasts();
+    if (!storedToasts) return
+    console.log("Loaded stored notifications: ", storedToasts);
+    for (const toast of storedToasts) {
+        createToast(toast.message, { time: toast.time })
+    }
+}
+
+/**
+ * Will update the count of notifications on the bell icon in the navbar
+ * 
+ * @param {Array} storedToasts An array of stored toasts to be counted and updated in the navbar
+ */
+function navbarUpdateNotificationBellCount(storedToasts) {
+    const notificationBellIcon = document.getElementById("navbar-notification-bell");
+    var notificationBellCount = document.getElementById("notification-bell-icon-count");
+    if (!notificationBellCount) {
+        notificationBellCount = document.createElement('span');
+        notificationBellCount.id = "notification-bell-icon-count";
+        notificationBellCount.classList.add('badge');
+        notificationBellCount.classList.add('text-bg-secondary');
+        notificationBellCount.appendChild(document.createTextNode(storedToasts.length));
+    }
+    else notificationBellCount.innerHTML = storedToasts.length;
+
+    notificationBellIcon.appendChild(notificationBellCount);
+}
+
+/**
+ * Remove a frequency input from the DOM
+ * 
+ * @param {string} system The system name to add the frequency to
+ * @param {string} inputId [OPTIONAL] The ID of input, this can be anything unique to this input. If this is not provided the number of frequencies will be used as the ID
+ */
+function addFrequencyInput(system, inputId = null) {
+    if (!inputId) inputId = $(`[id^="${system}_systemFreqRow_"]`).length;
+    // Create new input
+    var icon = document.createElement('i');
+    icon.classList.add('bi');
+    icon.classList.add('bi-x-circle');
+    icon.classList.add('text-black');
+
+    var remove = document.createElement('a');
+    remove.classList.add('align-middle');
+    remove.classList.add('float-left');
+    remove.href = '#'
+    remove.onclick = () => { removeFrequencyInput(`${system}_systemFreqRow_${inputId}`) }
+    remove.appendChild(icon);
+
+    var childColRemoveIcon = document.createElement('div');
+    childColRemoveIcon.classList.add('col-2');
+    childColRemoveIcon.appendChild(remove);
+
+    var input = document.createElement('input');
+    input.classList.add('form-control');
+    input.id = `${system}_systemFreq_${inputId}`;
+    input.type = 'text';
+
+    var childColInput = document.createElement('div');
+    childColInput.classList.add('col-10');
+    childColInput.appendChild(input);
+
+    var childRow = document.createElement('div');
+    childRow.classList.add("row");
+    childRow.classList.add("px-1");
+    childRow.appendChild(childColInput);
+    childRow.appendChild(childColRemoveIcon);
+
+    var colParent = document.createElement('div');
+    colParent.classList.add("col-md-6");
+    colParent.classList.add("mb-1");
+    colParent.id = `${system}_systemFreqRow_${inputId}`
+    colParent.appendChild(childRow);
+
+    document.getElementById(`frequencyRow_${system.replaceAll(" ", "_")}`).appendChild(colParent);
+}
+
+/**
+ * Add a toast element to the DOM
+ * 
+ * @param {*} notificationMessage The message of the notification 
+ * @param {Date} param1.time The date object for when the toast was created, blank if creating new
+ * @param {boolean} param1.showNow Show the toast now or just store it
+ * @returns 
+ */
+function createToast(notificationMessage, { time = undefined, showNow = false } = {}) {
+    if (!time) time = new Date(Date.now());
+    else time = new Date(Date.parse(time));
+    const toastTitle = document.createElement('strong');
+    toastTitle.classList.add('me-auto');
+    toastTitle.appendChild(document.createTextNode("Server Notification"));
+
+    const toastTime = document.createElement('small');
+    toastTime.appendChild(document.createTextNode(time.toLocaleString()));
+
+    const toastClose = document.createElement('button');
+    toastClose.type = 'button';
+    toastClose.classList.add('btn-close');
+    toastClose.ariaLabel = 'Close';
+    toastClose.setAttribute('data-bs-dismiss', 'toast');
+    toastClose.onclick = () => { removeToastFromStorage(time.toISOString(), notificationMessage); };
+
+    const toastHeader = document.createElement('div');
+    toastHeader.classList.add('toast-header');
+    toastHeader.appendChild(toastTitle);
+    toastHeader.appendChild(toastTime);
+    toastHeader.appendChild(toastClose);
+
+    const toastMessage = document.createElement('p');
+    toastMessage.classList.add("px-2");
+    toastMessage.appendChild(document.createTextNode(notificationMessage));
+
+    const toastBody = document.createElement('div');
+    toastBody.classList.add('toast-body');
+    toastBody.appendChild(toastMessage);
+
+    const wrapperDiv = document.createElement('div');
+    wrapperDiv.classList.add('toast');
+    //wrapperDiv.classList.add('position-fixed');
+    wrapperDiv.id = `${time.toISOString()}-toast`;
+    wrapperDiv.role = 'alert';
+    wrapperDiv.ariaLive = 'assertive';
+    wrapperDiv.ariaAtomic = true;
+    wrapperDiv.setAttribute('data-bs-delay', "7500");
+    wrapperDiv.setAttribute('data-bs-animation', true);
+    wrapperDiv.appendChild(toastHeader);
+    wrapperDiv.appendChild(toastMessage);
+
+    document.getElementById("toastZone").appendChild(wrapperDiv);
+    addToastToStorage(time.toISOString(), notificationMessage);
+    if (showNow) {
+        const toastElement = bootstrap.Toast.getOrCreateInstance(document.getElementById(`${time.toISOString()}-toast`));
+        toastElement.show();
+    }
+
+    return;
+}
+
+function sendNodeHeartbeat(nodeId) {
+    const Http = new XMLHttpRequest();
+    const url = '/client/requestCheckIn' + nodeId;
+    Http.open("GET", url);
+    Http.send();
+
+    Http.onloadend = (e) => {
+        console.log(Http.responseText)
+        createToast(Http.responseText, { showNow: true });
+    }
+}
+
+function joinServer() {
+    const preset = document.getElementById("selectRadioPreset").value;
+    const clientId = document.getElementById("inputDiscordClientId").value;
+    const channelId = document.getElementById("inputDiscordChannelId").value;
+
+    const reqBody = {
+        'preset': preset,
+        'clientId': clientId,
+        'channelId': channelId
+    };
+
+    console.log(reqBody);
+
+    const Http = new XMLHttpRequest();
+    const url = '/bot/join';
+    Http.open("POST", url);
+    Http.setRequestHeader("Content-Type", "application/json");
+    Http.send(JSON.stringify(reqBody));
+
+    Http.onloadend = (e) => {
+        const responseObject = JSON.parse(Http.responseText)
+        console.log(Http.status);
+        console.log(responseObject);
+        createToast(`${responseObject.name} will join shortly`, { showNow: true });
+        $("#joinModal").modal('toggle');
+    }
+}
+
+function leaveServer() {
+    const reqBody = {};
+
+    const Http = new XMLHttpRequest();
+    const url = '/bot/leave';
+    Http.open("POST", url);
+    Http.setRequestHeader("Content-Type", "application/json");
+    Http.send(JSON.stringify(reqBody));
+
+    Http.onloadend = (e) => {
+        const responseObject = Http.responseText;
+        console.log(Http.status);
+        console.log(responseObject);
+        createToast(`${responseObject} is leaving`, { showNow: true });
+    }
+}
+
+function saveNodeDetails() {
+    const nodeName = document.getElementById("inputNodeName").value;
+    const nodeIp = document.getElementById("inputNodeIp").value;
+    const nodePort = document.getElementById("inputOrgName").value;
+    const nodeLocation = document.getElementById("inputNodeLocation").value;
+
+    const reqBody = {
+        'name': nodeName,
+        'ip': nodeIp,
+        'port': nodePort,
+        'location': nodeLocation
+    }
+
+    console.log("Request Body: ", reqBody);
+
+    const Http = new XMLHttpRequest();
+    const url = '/client';
+    Http.open("PUT", url);
+    Http.setRequestHeader("Content-Type", "application/json");
+    Http.send(JSON.stringify(reqBody));
+
+    Http.onloadend = (e) => {
+        const responseObject = JSON.parse(Http.responseText);
+        console.log(Http.status);
+        console.log(responseObject);
+        createToast(`Node Updated!`);
+        location.reload();
+    }
+}
+
+function addNewSystem() {
+    const nodeId = document.getElementById("nodeId").value;
+    const systemName = document.getElementById(`New System_systemName`).value;
+    const systemMode = document.getElementById(`New System_systemMode`).value;
+    const inputSystemFreqs = $(`[id^="New System_systemFreq_"]`);
+    let systemFreqs = [];
+    for (const inputFreq of inputSystemFreqs) {
+        systemFreqs.push(inputFreq.value);
+    }
+
+    const reqBody = {
+        'systemName': systemName,
+        'mode': systemMode,
+        'frequencies': systemFreqs
+    }
+    if (reqBody.mode == "p25") reqBody.trunkFile = 'none';
+
+    console.log("Request Body: ", reqBody);
+    const Http = new XMLHttpRequest();
+    const url = "/client/addPreset";
+    Http.open("POST", url);
+    Http.setRequestHeader("Content-Type", "application/json");
+    Http.send(JSON.stringify(reqBody));
+
+    Http.onloadend = (e) => {
+        const responseObject = Http.responseText
+        console.log(Http.status);
+        console.log(responseObject);
+        createToast(`${systemName} Added!`);
+        location.reload();
+    }
+}
+
+function updateSystem(systemName) {
+    const nodeId = document.getElementById("nodeId").value;
+    const systemMode = document.getElementById(`${systemName}_systemMode`).value;
+    const inputSystemFreqs = $(`[id^="${systemName}_systemFreq_"]`);
+    let systemFreqs = [];
+    for (const inputFreq of inputSystemFreqs) {
+        systemFreqs.push(inputFreq.value);
+    }
+
+    const reqBody = {
+        'systemName': systemName,
+        'mode': systemMode,
+        'frequencies': systemFreqs
+    }
+    if (reqBody.mode == "p25") reqBody.trunkFile = 'none';
+
+    console.log("Request Body: ", reqBody);
+    const Http = new XMLHttpRequest();
+    const url = "/client/updatePreset";
+    Http.open("POST", url);
+    Http.setRequestHeader("Content-Type", "application/json");
+    Http.send(JSON.stringify(reqBody));
+
+    Http.onloadend = (e) => {
+        const responseObject = Http.responseText;
+        console.log(Http.status);
+        console.log(responseObject);
+        createToast(`${systemName} Updated!`);
+        location.reload();
+    }
+}
+
+function removeSystem(systemName) {
+    const nodeId = document.getElementById("nodeId").value;
+
+    const reqBody = {
+        'systemName': systemName,
+    }
+
+    console.log("Request Body: ", reqBody);
+    const Http = new XMLHttpRequest();
+    const url = '/client/removePreset';
+    Http.open("POST", url);
+    Http.setRequestHeader("Content-Type", "application/json");
+    Http.send(JSON.stringify(reqBody));
+    Http.onloadend = (e) => {
+        const responseObject = Http.responseText;
+        console.log(Http.status);
+        console.log(responseObject);
+        createToast(`${systemName} Removed!`);
+        location.reload();
+    }
+}
+
+function requestNodeUpdate() {
+
+}
+
+function removeFrequencyInput(elementId) {
+    const element = document.getElementById(elementId);
+    element.remove();
+}

Client/public/stylesheets/style.css

@@ -1,8 +0,0 @@
-body {
-  padding: 50px;
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
-}
-
-a {
-  color: #00B7FF;
-}

Client/routes/bot.js

@@ -15,7 +15,9 @@ router.get('/status', botController.getStatus);
 *
 * @param req The request sent from the master
 * @param req.body.channelId The channel ID to join
+* @param req.body.clientId The discord Client ID to use when connecting to the server
 * @param req.body.presetName The name of the preset to start listening to
+* @param req.body.NGThreshold [OPTIONAL] The noisegate threshold, this will default to 50 
  */
 router.post('/join', botController.joinServer);
 

Client/routes/client.js

@@ -2,7 +2,7 @@
 const express = require('express');
 const router = express.Router();
 // Controllers
-const { requestCheckIn, getPresets, updatePreset, addNewPreset, removePreset, updateClient } = require("../controllers/clientController");
+const { requestCheckIn, getPresets, updatePreset, addNewPreset, removePreset, updateClient, updateClientConfigWrapper } = require("../controllers/clientController");
 
 /** GET Request a check in from the client
  * Queue the client to check in with the server
@@ -11,16 +11,21 @@ const { requestCheckIn, getPresets, updatePreset, addNewPreset, removePreset, up
  */
 router.get('/requestCheckIn', requestCheckIn);
 
-/** GET Object of all known presets
- * Query the client to get all the known presets
- */
-router.put('/', );
-
 /** GET Object of all known presets
  * Query the client to get all the known presets
  */
 router.get('/presets', getPresets);
 
+/**
+ * PUT An update to the running client config (not radio config)
+ * @param {number} req.body.id The ID given to the node to update 
+ * @param {string} req.body.name The name of the node
+ * @param {string} req.body.ip The IP the server can contact the node on
+ * @param {number} req.body.port The port the server can contact the node on 
+ * @param {string} req.body.location The physical location of the node
+ */
+router.put('/', updateClientConfigWrapper);
+
 /** POST Update to preset
  *
  * @param req The request sent from the master

Client/routes/index.js

@@ -1,9 +1,11 @@
 var express = require('express');
 var router = express.Router();
+const { getFullConfig } = require('../utilities/configHandler');
 
 /* GET home page. */
-router.get('/', function(req, res, next) {
-  res.render('index', { title: 'Express' });
+router.get('/', async function(req, res, next) {
+  const clientConfig = await getFullConfig();
+  res.render('index', { 'node': clientConfig });
 });
 
 module.exports = router;

Client/utilities/updateConfig.js

@@ -27,7 +27,12 @@ exports.updateId = (updatedId) => {
 /**
  * Wrapper to update any or all keys in the client config
  * 
- * @param {*} configObject Object with what keys you wish to update (node object format, will be converted)
+ * @param {Object} configObject Object with what keys you wish to update (node object format, will be converted)
+ * @param {number} configObject.id The ID given to the node to update 
+ * @param {string} configObject.name The name of the node
+ * @param {string} configObject.ip The IP the server can contact the node on
+ * @param {number} configObject.port The port the server can contact the node on 
+ * @param {string} configObject.location The physical location of the node
  * @returns 
  */
 exports.updateClientConfig = (configObject) => { 
@@ -39,6 +44,7 @@ exports.updateClientConfig = (configObject) => {
         if (runningConfig.id != configObject.id) {
             this.updateConfig('CLIENT_ID', configObject.id);
             updatedKeys.push({'CLIENT_ID': configObject.id});
+            process.env.CLIENT_ID = configObject.id;
             log.DEBUG("Updated ID to: ", configObject.id);
         }        
     }
@@ -46,6 +52,7 @@ exports.updateClientConfig = (configObject) => {
         if (runningConfig.name != configObject.name) {
             this.updateConfig('CLIENT_NAME', configObject.name);
             updatedKeys.push({'CLIENT_NAME': configObject.name});
+            process.env.CLIENT_NAME = configObject.name;
             log.DEBUG("Updated name to: ", configObject.name);
         }
     }
@@ -53,6 +60,7 @@ exports.updateClientConfig = (configObject) => {
         if (runningConfig.ip != configObject.ip) {
             this.updateConfig('CLIENT_IP', configObject.ip);
             updatedKeys.push({'CLIENT_IP': configObject.ip});
+            process.env.CLIENT_IP = configObject.ip;
             log.DEBUG("Updated ip to: ", configObject.ip);
         }
     }
@@ -60,6 +68,7 @@ exports.updateClientConfig = (configObject) => {
         if (runningConfig.port != configObject.port) {
             this.updateConfig('CLIENT_PORT', configObject.port);
             updatedKeys.push({'CLIENT_PORT': configObject.port});
+            process.env.CLIENT_PORT = configObject.port;
             log.DEBUG("Updated port to: ", configObject.port);
         }
     }
@@ -67,6 +76,7 @@ exports.updateClientConfig = (configObject) => {
         if (runningConfig.location != configObject.location) {
             this.updateConfig('CLIENT_LOCATION', configObject.location);
             updatedKeys.push({'CLIENT_LOCATION': configObject.location});
+            process.env.CLIENT_LOCATION = configObject.location;
             log.DEBUG("Updated location to: ", configObject.location);
         }
     }

Client/views/index.ejs

@@ -1,11 +1,167 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <title><%= title %></title>
-    <link rel='stylesheet' href='/stylesheets/style.css' />
-  </head>
-  <body>
-    <h1><%= title %></h1>
-    <p>Welcome to <%= title %></p>
-  </body>
-</html>
+<html lang="en" data-bs-theme="auto">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Bootstrap demo</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
+  <link rel="stylesheet" href="/res/css/main.css">
+</head>
+
+<body>
+  <%- include('partials/navbar.ejs') %>
+    <div aria-live="polite" aria-atomic="true" class="position-relative">
+      <!-- Position it: -->
+      <!-- - `.toast-container` for spacing between toasts -->
+      <!-- - `top-0` & `end-0` to position the toasts in the upper right corner -->
+      <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
+      <div class="toast-container top-0 end-0 p-3 max" id="toastZone">
+      </div>
+    </div>
+    <div class="container">
+      <div class="card mb-4">
+        <div class="card-header">
+          <p>
+            <span class="fs-2 fw-semibold">
+              Node Details
+            </span>
+          </p>
+        </div>
+        <div class="card-body">
+          <div class="col-md-12 pt-2">
+            <label class="small mb-1" for="nodeStatus">Online Status:</label>
+            <span class="badge badge-soft-success mb-0 align-middle fs-6" id="nodeStatus">Online</span>
+
+            <br>
+            <div class="py-2"></div>
+            <!-- Join Server button-->
+            <a type="button" class="btn btn-info text-white" data-bs-toggle="modal" data-bs-target="#joinModal"
+              href="#">Join Server</a>
+            <!-- Leave Server button  -->
+            <a type="button" class="btn btn-danger" href="#" onclick="leaveServer()">Leave Server</a>
+            <!-- Checkin with client button  -->
+            <a type="button" class="btn btn-secondary" href="#" onclick="sendNodeHeartbeat('<%=node.id%>')">Check-in
+              with Node</a>
+            <!-- Update Client button -->
+            <a type="button" class="btn btn-warning disabled" href="#"
+              onclick="requestNodeUpdate('<%=node.id%>')">Update Node</a>
+          </div>
+          <hr>
+          <form>
+            <div class="row gx-3 mb-3">
+              <div class="col-md-6">
+                <label class="small mb-1" for="nodeId">Node ID (this is the assigned Node ID and cannot be
+                  changed)</label>
+                <input class="form-control" id="nodeId" type="text" value="<%=node.id%>" disabled></input>
+              </div>
+            </div>
+
+            <div class="row gx-3 mb-3">
+              <div class="col-md-12">
+                <label class="small mb-1" for="inputNodeName">Node Name:</label>
+                <input class="form-control" id="inputNodeName" type="text" value="<%=node.name%>"></input>
+              </div>
+            </div>
+            <div class="row gx-3 mb-3">
+              <div class="col-md-4">
+                <label class="small mb-1" for="inputNodeIp">Node IP Address (that the server can
+                  contact):</label>
+                <input class="form-control" id="inputNodeIp" type="text" value="<%=node.ip%>"></input>
+              </div>
+              <div class="col-md-2">
+                <label class="small mb-1" for="inputOrgName">Node Port (with the API):</label>
+                <input class="form-control" id="inputOrgName" type="number" value="<%=node.port%>"></input>
+              </div>
+            </div>
+            <div class="mb-3">
+              <label class="small mb-1" for="inputNodeLocation">Node Location (physical location):</label>
+              <input class="form-control" id="inputNodeLocation" type="location" value="<%=node.location%>"></input>
+            </div>
+            <h4>
+              Nearby Systems
+            </h4>
+            <hr>
+            <div class="row">
+              <div class="col-lg-12">
+                <div class="main-box no-header clearfix">
+                  <div class="main-box-body clearfix">
+                    <div class="table-responsive">
+                      <table class="table user-list <% if(!node.online) { %>disabled<% } %>">
+                        <thead>
+                          <tr>
+                            <th><span>System Name</span></th>
+                            <th><span>Frequencies</span></th>
+                            <th><span>Protocol</span></th>
+                            <th>&nbsp;</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <% for(const system in node.nearbySystems){ %>
+                            <tr>
+                              <td>
+                                <%= system %>
+                              </td>
+                              <td>
+                                <% if(node.nearbySystems[system].frequencies.length> 1) { %>
+                                  <ul>
+                                    <% for(const frequency of node.nearbySystems[system].frequencies) { %>
+                                      <li>
+                                        <%=frequency%> MHz
+                                      </li>
+                                      <% } %>
+                                  </ul>
+                                  <% } else { const frequency=node.nearbySystems[system].frequencies[0] %>
+                                    <%=frequency%> MHz
+                                      <% } %>
+                              </td>
+                              <td>
+                                <span class="label label-default text-uppercase">
+                                  <%= node.nearbySystems[system].mode %>
+                                </span>
+                              </td>
+                              <td>
+                                <a href="#" class="table-link text-info label" data-bs-toggle="modal"
+                                  data-bs-target="#updateSystemModal_<%=system.replaceAll(" ", " _")%>">
+                                  <i class="bi bi-pencil"></i>
+                                </a>
+                                <a class="table-link text-danger label" onclick="removeSystem('<%=system%>')">
+                                  <i class="bi bi-trash"></i>
+                                </a>
+                              </td>
+                            </tr>
+                            <% // Update system modal %>
+                              <%- include("partials/modifySystemModal.ejs", {'system': system, 'frequencies' :
+                                node.nearbySystems[system].frequencies, 'mode' : node.nearbySystems[system].mode}) %>
+                                <% } %>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- Save changes button-->
+            <button class="btn btn-primary" type="button" onclick="saveNodeDetails()">Save changes</button>
+            <!-- Button trigger modal -->
+            <button type="button" class="btn btn-primary float-right" data-bs-toggle="modal"
+              data-bs-target="#updateSystemModal_New_System">Add New System</button>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <% // new System Modal %>
+      <%- include("partials/modifySystemModal.ejs", {'system': "New System" , 'frequencies' : [], 'mode' : '' }) %>
+</body>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
+  integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"
+  integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
+  crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+<script src="/res/js/node.js"></script>
+
+</html>

Client/views/partials/joinModal.ejs

@@ -0,0 +1,44 @@
+<div class="modal fade" id="joinModal" tabindex="-1" aria-labelledby="joinModal" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h1 class="modal-title fs-5" id="joinModal">Join Node <%=node.id%> to a Discord Server</h1>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="container">
+                    <div class="card mb-4">
+                        <div class="card-body">
+                            <form>                                
+                                <div class="row gx-3 mb-3">
+                                    <div class="col-md-12">
+                                        <label class="small mb-1" for="inputDiscordClientId">Discord Client ID:</label>
+                                        <input class="form-control" id="inputDiscordClientId" type="text" value="" required></input>
+                                    </div>
+                                </div>
+                                <div class="row gx-3 mb-3">
+                                    <div class="col-md-6">
+                                        <label class="small mb-1" for="inputDiscordChannelId">Discord Channel ID:</label>
+                                        <input class="form-control" id="inputDiscordChannelId" type="text" value="" required></input>
+                                    </div>
+                                    <div class="col-md-6">
+                                        <label class="small mb-1" for="selectRadioPreset">Selected Preset:</label>
+                                        <select class="custom-select" id="selectRadioPreset">
+                                            <% for(const system in nearbySystems) { %>                                                                                                
+                                                <option value="<%=system%>"><%=system%></option>
+                                            <% } %>
+                                        </select>
+                                    </div>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-primary" onclick="joinServer()">Join</button>
+            </div>
+        </div>
+    </div>
+</div>

Client/views/partials/modifySystemModal.ejs

@@ -0,0 +1,61 @@
+<div class="modal fade" id="updateSystemModal_<%=system.replaceAll(" ", "_")%>" tabindex="-1" aria-labelledby="updateSystemModal_<%=system.replaceAll(" ", "_")%>"
+    aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h1 class="modal-title fs-5" id="updateSystemModal_<%=system.replaceAll(" ", "_")%>"><%if (!system == "New System") {%>Update<%} else {%>Add a<%}%> <%=system%></h1>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="card mb-4">
+                    <div class="card-body">
+                        <form>
+                            <div class="row gx-3 mb-3">
+                                <label class="small mb-1 fs-6" for="systemName">System Name</label>
+                                <input class="form-control" id="<%=system%>_systemName" type="text" value="<%if (system != "New System") {%><%= system %><%} else {%>Local Radio System<%}%>"></input>
+                            </div>
+                            <div class="row gx-3 mb-3" id="frequencyRow_<%=system.replaceAll(" ", "_")%>">
+                                <label class="small mb-1 fs-6" for="systemFreq">Frequencies</label>
+                                <% for(const frequency of frequencies) { %>
+                                <div class="col-md-6 mb-1" id="<%=system%>_systemFreqRow_<%=frequency%>">
+                                    <div class="row px-1">
+                                        <div class="col-10">
+                                            <input class="form-control" id="<%=system%>_systemFreq_<%=frequency%>" type="text" value="<%= frequency %>"></input>
+                                        </div>
+                                        <div class="col-2">
+                                            <a class="align-middle float-left" href="#" onclick="removeFrequencyInput('<%=system%>_systemFreqRow_<%=frequency%>')"><i class="bi bi-x-circle text-black"></i></a>
+                                        </div>
+                                    </div>                                                                                        
+                                </div>
+                                <% } %>                                                                                    
+                            </div>
+                            <button type="button" class="btn btn-info text-white" onclick="addFrequencyInput('<%=system%>')">Add Frequency</button>
+                            <hr>                                                                    
+                            <div class="row gx-3 mb-3">
+                                <div class="col-md-6">
+                                    <label class="small mb-1 fs-6" for="<%=system%>_systemMode">Mode</label>
+                                    <br>
+                                    <select class="custom-select" id="<%=system%>_systemMode">
+                                        <option value="<%= mode ?? 'select' %>" selected><span class="text-uppercase"><%= mode ?? 'Select' %></span></option>
+                                        <% if(mode == "p25") { %>                                                                                                
+                                            <option value="nbfm">NBFM</option>
+                                        <% } else if (mode == "nbfm") { %>
+                                            <option value="p25">P25</option>
+                                        <% } else { %>
+                                            <option value="nbfm">NBFM</option>
+                                            <option value="p25">P25</option>
+                                            <%}%>
+                                    </select>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="location.reload()">Close</button>
+                <button type="button" class="btn btn-primary" <%if(!system == "New System") {%>onclick="updateSystem('<%=system%>')"<%} else {%>onclick="addNewSystem('<%=system%>')"<%}%>>Save changes</button>
+            </div>
+        </div>
+    </div>
+</div>

Client/views/partials/navbar.ejs

@@ -0,0 +1,42 @@
+<nav class="navbar fixed-top navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="#">Node Master</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <% /*
+                <li class="nav-item">
+                    <a class="nav-link active" aria-current="page" href="#">Home</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#">Link</a>
+                </li>
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                        aria-expanded="false">
+                        Dropdown
+                    </a>
+                    <ul class="dropdown-menu">
+                        <li><a class="dropdown-item" href="#">Action</a></li>
+                        <li><a class="dropdown-item" href="#">Another action</a></li>
+                        <li>
+                            <hr class="dropdown-divider">
+                        </li>
+                        <li><a class="dropdown-item" href="#">Something else here</a></li>
+                    </ul>
+                </li>
+                */%>
+                <li class="nav-item">
+                    <a class="nav-link" id="navbar-notification-bell" onclick="showStoredToasts()"><i class="bi bi-bell-fill"></i></a>
+                </li>                
+            </ul>
+            <form class="d-flex" role="search">
+                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+                <button class="btn btn-outline-success" type="submit">Search</button>
+            </form>
+        </div>
+    </div>
+</nav>