Merge pull request #8 from HB9HIL/station_lookup

Station lookup

Author: HB9HIL

index.html

@@ -87,11 +87,39 @@
 		border: 1px solid #727272;
 	}
 
+	.form-control:focus {
+		color: inherit;
+		background-color: #1c1c1c;
+	}
+
+	.form-control:disabled, .form-control[readonly] {
+    	background-color: #3e3e3e;
+		opacity: 1;
+	}
+
 	#buttonsRow {
 		position: fixed;
 		bottom: 8px;
 		width: 100%;
-		padding: 10px; /* Optional: Füge Padding hinzu, um die Knöpfe zu trennen */
+		padding: 10px;
+	}
+
+	#reload_icon {
+		width: 16px;
+		height: 16px;
+		margin-left: 4px;
+		margin-bottom: 2px;
+		vertical-align: middle;
+		fill: white;
+	}
+	
+	label {
+		display: flex;
+		align-items: center;
+	}
+	
+	label svg {
+		cursor: pointer; 
 	}
 </style>
 
@@ -142,10 +170,16 @@
 							</div>
 						</div>
 						<div class="col">
-							<div class="mb-3">
-								<label for="wavelog_key">Wavelog-Station-ID</label>
-								<input type="number" class="form-control form-control-sm" name="wavelog_id"
-									id="wavelog_id" value="" />
+							<div class="mb-3" style="position: relative;">
+								<label for="wavelog_id" style="display: inline-block;">
+									Wavelog-Station-ID
+									<svg id="reload_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+										<path d="M463.5 224l8.5 0c13.3 0 24-10.7 24-24l0-128c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8l119.5 0z" />
+									</svg>
+								</label>
+								<select id="wavelog_id" class="form-control form-control-sm" disabled>
+									<option value="">No stations loaded</option>
+								</select>
 							</div>
 						</div>
 					</div>

main.js

@@ -42,7 +42,7 @@ storage.has('basic', function(error, hasKey) {
 
 function createWindow () {
 	const mainWindow = new BrowserWindow({
-		width: 420,
+		width: 430,
 		height: 250,
 		resizable: false,
 		autoHideMenuBar: app.isPackaged,

renderer.js

@@ -14,14 +14,16 @@ const {ipcRenderer} = require('electron')
 const bt_save=select("#save");
 const bt_quit=select("#quit");
 const bt_test=select("#test");
+const input_key=select("#wavelog_key");
+const input_url=select("#wavelog_url");
 var oldCat={ vfo: 0, mode: "SSB" };
 
 $(document).ready(function() {
 
 	cfg=ipcRenderer.sendSync("get_config", '');
 	$("#wavelog_url").val(cfg.wavelog_url);
 	$("#wavelog_key").val(cfg.wavelog_key);
-	$("#wavelog_id").val(cfg.wavelog_id);
+	// $("#wavelog_id").val(cfg.wavelog_id);
 	$("#wavelog_radioname").val(cfg.wavelog_radioname);
 	$("#flrig_host").val(cfg.flrig_host);
 	$("#flrig_port").val(cfg.flrig_port);
@@ -67,6 +69,19 @@ $(document).ready(function() {
 		console.log(x);
 	});
 
+	input_key.addEventListener('change', () => {
+		getStations();
+	});
+	input_url.addEventListener('change', () => {
+		getStations();
+	});
+	$('#reload_icon').on('click', () => {
+		getStations();
+	});
+	if (cfg.wavelog_key != "" && cfg.wavelog_url != "") {
+		getStations();
+	}
+
 	getsettrx();
 
 	$("#flrig_ena").on( "click",function() {
@@ -78,15 +93,15 @@ $(document).ready(function() {
 
 	$("#config-tab").on("click",function() {
 		obj={};
-		obj.width=420;
+		obj.width=430;
 		obj.height=550;
 		obj.ani=false;
 		resizeme(obj);
 	});
 
 	$("#status-tab").on("click",function() {
 		obj={};
-		obj.width=420;
+		obj.width=430;
 		obj.height=250;
 		obj.ani=false;
 		resizeme(obj);
@@ -208,3 +223,48 @@ function updateUtcTime() {
 
 	document.getElementById('utc').innerHTML = formattedTime;
 }
+
+async function getStations() {
+	let select = $('#wavelog_id');
+	select.empty();
+	select.prop('disabled', true);
+	try {
+		let x = await fetch($('#wavelog_url').val().trim() + '/api/station_info/' + $('#wavelog_key').val().trim(), {
+			method: 'GET',
+			rejectUnauthorized: false,
+			headers: {
+				Accept: 'application/json',
+				'Content-Type': 'application/json',
+			},
+		});
+
+		if (!x.ok) {
+			throw new Error(`HTTP error! Status: ${x.status}`);
+		}
+
+		let data = await x.json();
+		fillDropdown(data);
+
+	} catch (error) {
+		select.append(new Option('Failed to load stations', '0'));
+		console.error('Could not load station locations:', error.message);
+	}
+}
+
+function fillDropdown(data) {
+	let select = $('#wavelog_id');
+	select.empty();
+	select.prop('disabled', false);
+	
+	data.forEach(function(station) {
+		let optionText = station.station_profile_name + " (" + station.station_callsign + ", ID: " + station.station_id + ")";
+		let optionValue = station.station_id;
+		select.append(new Option(optionText, optionValue));
+	});
+
+	if (cfg.wavelog_id && data.some(station => station.station_id == cfg.wavelog_id)) {
+		select.val(cfg.wavelog_id);
+	} else {
+		select.val(data.length > 0 ? data[0].station_id : null);
+	}
+}