Cleaned up the UI added a settings popup modal

application/controllers/Qso.php

@@ -151,6 +151,10 @@ class QSO extends CI_Controller {
 		}
 	}
 
+    function winkeysettings() {
+        $this->load->view('qso/components/winkeysettings');
+    }
+
     function edit_ajax() {
 
         $this->load->model('logbook_model');

application/views/qso/components/winkeysettings.php

@@ -0,0 +1,16 @@
+<div id="modal-backdrop" class="modal-backdrop fade show" style="display:block;"></div>
+<div id="modal" class="modal fade show" tabindex="-1" style="display:block;">
+	<div class="modal-dialog modal-dialog-centered">
+	  <div class="modal-content">
+		<div class="modal-header">
+		  <h5 class="modal-title">Winkey Macros</h5>
+		</div>
+		<div class="modal-body">
+		  <p>Modal body text goes here.</p>
+		</div>
+		<div class="modal-footer">
+		  <button type="button" class="btn btn-secondary" onclick="closeModal()">Close</button>
+		</div>
+	  </div>
+	</div>
+  </div>

application/views/qso/index.php

@@ -517,13 +517,33 @@
     </div>
 
     <div class="card winkey-settings">
-        <div class="card-header"><h4 style="font-size: 16px; font-weight: bold;" class="card-title">Winkey</h4></div>
+        <div class="card-header">
+          <h4 style="font-size: 16px; font-weight: bold;" class="card-title">Winkey 
+
+          <button id="connectButton" class="btn btn-primary">Connect</button>
+
+          <button type="button" class="btn btn-light"
+          hx-get="/index.php/qso/winkeysettings" 
+          hx-target="#modals-here" 
+          hx-trigger="click"
+          class="btn btn-primary"
+          _="on htmx:afterOnLoad wait 10ms then add .show to #modal then add .show to #modal-backdrop"><i class="fas fa-cog"></i> Settings</button>
+          </h4>
+        </div>
 
         <div class="card-body">
-        <button id="connectButton" class="btn btn-warning">Connect</button> <span id="statusBar"></span><br>
+        <div id="modals-here"></div>
+          <button onclick="morsekey_func1()" class="btn btn-warning">F1</button>
+          <button onclick="morsekey_func2()" class="btn btn-warning">F2</button>
+          <button onclick="morsekey_func3()" class="btn btn-warning">F3</button>
+          <button onclick="morsekey_func4()" class="btn btn-warning">F4</button>
+          <button onclick="morsekey_func5()" class="btn btn-warning">F5</button>
+          <button onclick="morsekey_func6()" class="btn btn-warning">F5</button>
+          <br><br>
           <input id="sendText" type="text"><input id="sendButton" type="button" value="Send" class="btn btn-success">
-      <button onclick="morsekey_func1()" class="btn btn-warning">CQ</button>
+
-      <br>
+          <span id="statusBar"></span><br>
+
         </div>
     </div>
 

assets/js/sections/qso.js

@@ -798,3 +798,17 @@ function resetDefaultQSOFields() {
 	$('#callsign-image-content').text("");
 	$('.dxccsummary').remove();
 }
+
+function closeModal() {
+	var container = document.getElementById("modals-here")
+	var backdrop = document.getElementById("modal-backdrop")
+	var modal = document.getElementById("modal")
+
+	modal.classList.remove("show")
+	backdrop.classList.remove("show")
+
+	setTimeout(function() {
+		container.removeChild(backdrop)
+		container.removeChild(modal)
+	}, 200)
+}