Implement functioning method to update systems on web app

Server/public/res/js/node.js

@@ -1,4 +1,11 @@
-function addFrequencyInput(system){
+/**
+ * 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');
@@ -9,6 +16,7 @@ function addFrequencyInput(system){
     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');
@@ -17,7 +25,7 @@ function addFrequencyInput(system){
 
     var input = document.createElement('input');
     input.classList.add('form-control');
-    input.id = 'nodeFreq';
+    input.id = `${system}_systemFreq_${inputId}`;
     input.type = 'text';
 
     var childColInput = document.createElement('div');
@@ -33,6 +41,7 @@ function addFrequencyInput(system){
     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);
@@ -169,22 +178,52 @@ function saveNodeDetails() {
     Http.send(JSON.stringify(reqBody));
 
     Http.onloadend = (e) => {
-        const responseObject = JSON.parse(Http.responseText)
+        const responseObject = JSON.parse(Http.responseText);
         console.log(Http.status);
         console.log(responseObject);
         createToast(`Node Updated!`);
     }
-
 }
 
 function addNewSystem() {
 
 }
 
-function updateSystem() {
+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
+    }
+
+    console.log("Request Body: ", reqBody);
+    const Http = new XMLHttpRequest();
+    const url='/nodes/'+nodeId+"/systems";
+    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(`${systemName} Updated!`);
+    }
 }
 
 function requestNodeUpdate() {
 
+}
+
+function removeFrequencyInput(elementId) {
+    const element = document.getElementById(elementId);
+    element.remove();
 }