Add Spot page to take mode options from API #71

This commit is contained in:
Ian Renton
2025-11-01 12:03:11 +00:00
parent 812d031a2c
commit 1ed543872a
2 changed files with 34 additions and 10 deletions

View File

@@ -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>

View File

@@ -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
loadSettings();
// Load options
loadOptions();
// Display intro box
displayIntroBox();
});