Modem control in startup check

gui/src/components/main_startup_check.vue

@@ -6,15 +6,46 @@ import main_rig_control from "./main_rig_control.vue";
 import main_audio from "./main_audio.vue";
 import infoScreen_updater from "./infoScreen_updater.vue";
 
+import { saveModemConfig } from "../js/api";
+
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
+setActivePinia(pinia);
+
+import { useSettingsStore } from "../store/settingsStore.js";
+const settings = useSettingsStore(pinia);
+
+import { useAudioStore } from "../store/audioStore.js";
+const audio = useAudioStore(pinia);
+
+import { useStateStore } from "../store/stateStore.js";
+const state = useStateStore(pinia);
+
+import { startModem, stopModem } from "../js/api";
+import { getModemConfig } from "../js/api";
+
 // start modemCheck modal once on startup
 onMounted(() => {
+  getModemConfig();
   new Modal("#modemCheck", {}).show();
+  if (state.is_modem_running == false){
+
+  }
 });
+
+function getModemState(){
+  // Returns active/inactive if modem is running for modem status label
+  console.log(state.is_modem_running)
+  if (state.is_modem_running == true)
+    return "Active";
+  else
+    return "Inactive";
+}
 </script>
 
 <template>
   <div
-    class="modal fade"
+    class="modal modal-lg fade"
     id="modemCheck"
     data-bs-backdrop="static"
     data-bs-keyboard="false"
@@ -88,12 +119,78 @@ onMounted(() => {
                   data-bs-target="#modemStatusCollapse"
                   data-bs-toggle="collapse"
                 >
-                  Modem <span class="badge ms-2 bg-success">Running</span>
+                  Modem <span class="badge ms-2"
+                  :class="state.is_modem_running === true ? 'bg-success' : 'bg-danger'"            
+            >{{ getModemState() }}</span>
                 </button>
               </h2>
               <div id="modemStatusCollapse" class="accordion-collapse collapse">
                 <div class="accordion-body">
-                  <main_audio />
+                 
+                  <div class="input-group input-group-sm mb-1">
+                    
+                    <label class="input-group-text w-25">Modem control</label>
+                    <label class="input-group-text">
+                      
+                    <button
+                    type="button"
+                    id="startModem"
+                    class="btn btn-sm btn-outline-success"
+                    data-bs-toggle="tooltip"
+                    data-bs-trigger="hover"
+                    data-bs-html="false"
+                    title="Start the Modem. Please set your audio and radio settings first!"
+                    @click="startModem"
+                    v-bind:class="{ disabled: state.is_modem_running === true }"
+                    
+                  >
+                    <i class="bi bi-play-fill"></i>
+                    
+                  </button>
+                    </label><label class="input-group-text">
+                  <button
+                    type="button"
+                    id="stopModem"
+                    class="btn btn-sm btn-outline-danger"
+                    data-bs-toggle="tooltip"
+                    data-bs-trigger="hover"
+                    data-bs-html="false"
+                    title="Stop the Modem."
+                    @click="stopModem"
+                    v-bind:class="{ disabled: state.is_modem_running === false }"
+                    
+                  >
+                    <i class="bi bi-stop-fill"></i>
+                   
+                  </button>
+                </label>
+                  </div>
+                    <!-- Audio Input Device -->
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-25">Input device</label>
+    <select
+      class="form-select form-select-sm"
+      id="rx_audio"
+      aria-label=".form-select-sm"
+      @change="saveModemConfig"
+      v-model="settings.input_device"
+      v-html="audio.getInputDevices()"
+    ></select>
+  </div>
+
+  <!-- Audio Output Device -->
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-25">Output device</label>
+    <select
+      class="form-select form-select-sm"
+      id="tx_audio"
+      aria-label=".form-select-sm"
+      @change="saveModemConfig"
+      v-model="settings.output_device"
+      v-html="audio.getOutputDevices()"
+    ></select>
+  </div>
+        
                 </div>
               </div>
             </div>