Add Spot page to take mode options from API #71

views/webpage_add_spot.tpl

@@ -17,29 +17,31 @@
             </div>
         </div>
         <div class="card-body">
-            <form class="row g-2">
+            <form class="row g-3">
                 <div class="col-auto">
-                    <label for="dx-call" class="form-label">DX Call</label>
+                    <label for="dx-call" class="form-label">DX Call *</label>
                     <input type="text" class="form-control" id="dx-call" placeholder="N0CALL" style="max-width: 8em;">
                 </div>
                 <div class="col-auto">
-                    <label for="freq" class="form-label">Frequency (kHz)</label>
+                    <label for="freq" class="form-label">Frequency (kHz) *</label>
                     <input type="text" class="form-control" id="freq" placeholder="14100" style="max-width: 8em;">
                 </div>
                 <div class="col-auto">
                     <label for="mode" class="form-label">Mode</label>
-                    <input type="text" class="form-control" id="mode" placeholder="SSB" style="max-width: 6em;">
+                    <select id="mode" class="storeable-select form-select" style="max-width: 6em;">
+                        <option value="" selected></option>
+                    </select>
                 </div>
                 <div class="col-auto">
-                    <label for="dx-grid" class="form-label">DX Grid (Optional)</label>
+                    <label for="dx-grid" class="form-label">DX Grid</label>
                     <input type="text" class="form-control" id="dx-grid" placeholder="AA00aa" style="max-width: 8em;">
                 </div>
                 <div class="col-auto">
-                    <label for="comment" class="form-label">Comment (Optional)</label>
+                    <label for="comment" class="form-label">Comment</label>
                     <input type="text" class="form-control" id="comment" placeholder="59 TNX QSO 73" style="max-width: 12em;">
                 </div>
                 <div class="col-auto">
-                    <label for="de-call" class="form-label">Your Call</label>
+                    <label for="de-call" class="form-label">Your Call *</label>
                     <input type="text" class="form-control storeable-text" id="de-call" placeholder="N0CALL" style="max-width: 8em;">
                 </div>
                 <div class="col-auto">
@@ -49,6 +51,8 @@
             </form>
 
             <div id="result-bad"></div>
+
+            <p class="small mt-4 mb-1">* Required field</p>
         </div>
     </div>
 

webassets/js/add-spot.js

@@ -1,3 +1,23 @@
+// Load server options. Once a successful callback is made from this, we can populate the choice boxes in the form and load
+// any saved values from local storage.
+function loadOptions() {
+    $.getJSON('/api/v1/options', function(jsonData) {
+        // Store options
+        options = jsonData;
+
+        // Populate modes drop-down
+        $.each(options["modes"], function (i, m) {
+            $('#mode').append($('<option>', {
+                value: m,
+                text : m
+            }));
+        });
+
+        // Load settings from settings storage now all the controls are available
+        loadSettings();
+    });
+}
+
 // Method called to add a spot to the server
 function addSpot() {
     try {
@@ -7,7 +27,7 @@ function addSpot() {
         // Unpack the user's entered values
         var dx = $("#dx-call").val().toUpperCase();
         var freqStr = $("#freq").val();
-        var mode = $("#mode").val().toUpperCase();
+        var mode = $("#mode")[0].value;
         var dxGrid = $("#dx-grid").val();
         var comment = $("#comment").val();
         var de = $("#de-call").val().toUpperCase();
@@ -93,8 +113,8 @@ function displayIntroBox() {
 
 // Startup
 $(document).ready(function() {
-    // Load settings from settings storage
+    // Load options
-    loadSettings();
+    loadOptions();
     // Display intro box
     displayIntroBox();
 });