Add server button functional

src/main.py

@@ -14,13 +14,22 @@ associators = [
   {"name": "ADSB Associator", "id": "adsb-associator"}
 ]
 coordregs = [
-  {"name": "Ellipse 2D Conic Intersection", "id": "ellipse-2d-conic-int"}
+  {"name": "Ellipse Analytic Intersection", "id": "ellipse-conic-int"},
+  {"name": "Ellipse Parametric", "id": "ellipse-parametric"},
+  {"name": "Ellipse Parametric (Arc Length)", "id": "ellipse-parametric-arc"},
+  {"name": "Ellipsoid Parametric", "id": "ellipsoid-parametric"},
+  {"name": "Ellipsoid Parametric (Arc Length)", "id": "ellipsoid-parametric-arc"}
+]
+
+adsbs = [
+  {"name": "adsb.30hours.dev", "url": "adsb.30hours.dev"},
+  {"name": "None", "url": ""}
 ]
 
 @app.route("/")
 def index():
     return render_template("index.html", servers=servers, \
-      associators=associators, coordregs=coordregs)
+      associators=associators, coordregs=coordregs, adsbs=adsbs)
 
 # serve static files from the /app/public folder
 @app.route('/public/<path:file>')
@@ -32,7 +41,7 @@ def serve_static(file):
 @app.route("/api")
 def api():
     urls = request.args.getlist("url")
-    data = [{"url": url} for url in urls]
+    data = [{"url": 'http://' + url} for url in urls]
     return jsonify(data)
 
 @app.route("/map")

src/public/js/index.js

@@ -13,7 +13,82 @@ function toggle_button(button) {
   }
 
   // Set the value to server.url when the button is pressed
-  var serverUrl = button.getAttribute('server-url');
+  var serverUrl = button.getAttribute('value');
   button.value = pressed === 'true' ? serverUrl : '';
   console.log(button.value);
+}
+
+function addNewServer() {
+  const container = document.getElementById("new-server-container");
+
+  // Create a new text field
+  const textField = document.createElement("input");
+  textField.type = "text";
+  textField.placeholder = "Enter new server name";
+  textField.classList.add("form-control", "new-server-field");
+
+  // Create Submit and Cancel buttons
+  const submitBtn = document.createElement("button");
+  submitBtn.innerText = "Submit";
+  submitBtn.classList.add("btn", "btn-success", "w-100", "mb-1");
+  submitBtn.onclick = submitNewServer;
+
+  const cancelBtn = document.createElement("button");
+  cancelBtn.innerText = "Cancel";
+  cancelBtn.classList.add("btn", "btn-danger", "w-100", "mb-1");
+  cancelBtn.onclick = cancelNewServer;
+
+  // Append elements to the container
+  container.innerHTML = ""; // Clear previous content
+  container.appendChild(textField);
+  container.appendChild(submitBtn);
+  container.appendChild(cancelBtn);
+}
+
+function submitNewServer(event) {
+
+  event.preventDefault(); 
+
+  const container = document.getElementById("new-server-container");
+  const textField = container.querySelector(".new-server-field");
+
+  // Get the entered value
+  const serverName = textField.value;
+
+  // Validate if the serverName is not empty
+  if (serverName.trim() === "") {
+    alert("Please enter a valid server name.");
+    return;
+  }
+
+  // Create a new button for the server
+  const serverBtn = document.createElement("button");
+  serverBtn.type = "button";
+  serverBtn.classList.add("btn", "btn-success", "toggle-button", "active", "w-100", "mb-1");
+  serverBtn.dataset.toggle = "button";
+  serverBtn.setAttribute("aria-pressed", "true");
+  serverBtn.setAttribute("server-url", serverName);
+  serverBtn.innerText = serverName;
+  serverBtn.onclick = function () {
+    toggle_button(this);
+  };
+
+  // Create a hidden input to store the server URL
+  const hiddenInput = document.createElement("input");
+  hiddenInput.type = "hidden";
+  hiddenInput.name = "url";
+  hiddenInput.value = serverName;
+
+  // Append the button and input to the server list
+  const serverList = document.querySelector("#server-list");
+  serverList.appendChild(serverBtn);
+  serverList.appendChild(hiddenInput);
+
+  // Clear the new server container
+  container.innerHTML = "";
+}
+
+function cancelNewServer() {
+  const container = document.getElementById("new-server-container");
+  container.innerHTML = "";
 }

src/templates/index.html

@@ -57,9 +57,15 @@
       <div class="mb-3">
       <label class="form-label fw-bold">Servers:</label>
       {% for server in servers %}
-          <button type="button" class="btn btn-success toggle-button active w-100 mb-1" data-toggle="button" aria-pressed="true" server-url="{{ server.url }}" onclick="toggle_button(this)">{{ server.name }}</button>
-          <input type="hidden" name="url" value="{{ server.url }}">
+          <button type="button" class="btn btn-success toggle-button active w-100 mb-1" name="url" data-toggle="button" aria-pressed="true" value="{{ server.url }}" onclick="toggle_button(this)">{{ server.name }}</button>
+          <!-- <input type="hidden" name="url" value="{{ server.url }}"> -->
       {% endfor %}
+      <div id="server-list">
+        <!-- Existing or dynamically added server buttons go here -->
+      </div>
+      <!-- Add the new server functionality here -->
+      <button type="button" class="btn btn-primary add-server-btn w-100 mt-2 mb-3" onclick="addNewServer()">Add Server</button>
+        <div class="" id="new-server-container"></div>
       </div>
 
       <div class="mb-3">
@@ -73,24 +79,32 @@
 
       <div class="mb-3">
         <label class="form-label fw-bold">Coordinate Registration:</label>
-        <select class="form-select" name="associator">
+        <select class="form-select" name="coordreg">
           {% for coordreg in coordregs %}
             <option value="{{ coordreg.id }}">{{ coordreg.name }}</option>
           {% endfor %}
         </select>
       </div>
 
+      <div class="mb-3">
+        <label class="form-label fw-bold">ADSB:</label>
+        <select class="form-select" name="adsb">
+          {% for adsb in adsbs %}
+            <option value="{{ adsb.url }}">{{ adsb.name }}</option>
+          {% endfor %}
+        </select>
+      </div>
+
       <div class="mb-1">
         <label class="form-label fw-bold">Run:</label>
         <button type="submit" class="btn btn-dark w-100">API</button>
       </div>
+      <div class="mb-3">
+        <button type="button" class="btn btn-dark w-100">Map</button>
+      </div>
     </form>
   </div>
 
-  <div class="mb-3">
-    <button class="btn btn-dark w-100">Map</button>
-  </div>
-
 </div>
 </div>
 </div>