FreeDATA/gui/src/components/main_active_rig_control.vue
2023-11-18 16:12:05 +00:00

262 lines
9.4 KiB
Vue

<script setup lang="ts">
import { setActivePinia } from "pinia";
import pinia from "../store/index";
setActivePinia(pinia);
import { useStateStore } from "../store/stateStore.js";
const state = useStateStore(pinia);
function updateFrequencyAndApply(frequency) {
state.new_frequency = frequency;
set_frequency(state.new_frequency);
}
function set_hamlib_frequency_manually() {
set_frequency(state.new_frequency);
}
function set_hamlib_mode() {
set_mode(state.mode);
}
function set_hamlib_rf_level() {
set_rf_level(state.rf_level);
}
</script>
<template>
<div class="mb-3">
<div class="card mb-1">
<div class="card-header p-1">
<div class="container">
<div class="row">
<div class="col-1">
<i class="bi bi-house-door" style="font-size: 1.2rem"></i>
</div>
<div class="col-10">
<strong class="fs-5 me-2">Radio control</strong>
<span
class="badge"
v-bind:class="{
'text-bg-success': state.hamlib_status === 'connected',
'text-bg-danger disabled':
state.hamlib_status === 'disconnected',
}"
>{{ state.hamlib_status }}</span
>
</div>
<div class="col-1 text-end">
<button
type="button"
id="openHelpModalStation"
data-bs-toggle="modal"
data-bs-target="#stationHelpModal"
class="btn m-0 p-0 border-0"
disabled
>
<i class="bi bi-question-circle" style="font-size: 1rem"></i>
</button>
</div>
</div>
</div>
</div>
<div class="card-body p-2">
<div class="input-group input-group-sm bottom-0 m-0">
<div class="me-2">
<div class="input-group input-group-sm">
<span class="input-group-text">QRG</span>
<span class="input-group-text">{{ state.frequency }} Hz</span>
<!-- Dropdown Button -->
<button
v-bind:class="{
disabled: state.hamlib_status === 'disconnected',
}"
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton"
data-bs-toggle="dropdown"
aria-expanded="false"
></button>
<!-- Dropdown Menu -->
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li>
<div class="input-group p-1">
<span class="input-group-text">frequency</span>
<input
v-model="state.new_frequency"
style="max-width: 8rem"
pattern="[0-9]*"
type="text"
class="form-control form-control-sm"
v-bind:class="{
disabled: state.hamlib_status === 'disconnected',
}"
placeholder="Type frequency..."
aria-label="Frequency"
/>
<button
class="btn btn-sm btn-outline-success"
type="button"
@click="set_hamlib_frequency_manually"
v-bind:class="{
disabled: state.hamlib_status === 'disconnected',
}"
>
<i class="bi bi-check-square"></i>
</button>
</div>
</li>
<!-- Dropdown Divider -->
<li><hr class="dropdown-divider" /></li>
<!-- Dropdown Items -->
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(50616000)"
><strong>50616 kHz</strong>&nbsp;
<span class="badge bg-secondary">6m | USB</span>&nbsp;
<span class="badge bg-info">EU | US</span>
</a>
</li>
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(50308000)"
><strong>50308 kHz</strong>&nbsp;
<span class="badge bg-secondary">6m | USB</span>&nbsp;
<span class="badge bg-info">US</span></a
>
</li>
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(28093000)"
><strong>28093 kHz</strong>&nbsp;
<span class="badge bg-secondary">10m | USB</span>&nbsp;
<span class="badge bg-info">EU | US</span>
</a>
</li>
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(27265000)"
><strong>27265 kHz</strong>&nbsp;
<span class="badge bg-secondary">11m | USB</span>&nbsp;
<span class="badge bg-dark">Ch 26</span></a
>
</li>
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(27245000)"
><strong>27245 kHz</strong>&nbsp;
<span class="badge bg-secondary">11m | USB</span>&nbsp;
<span class="badge bg-dark">Ch 25</span></a
>
</li>
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(24908000)"
><strong>24908 kHz</strong>&nbsp;
<span class="badge bg-secondary">12m | USB</span>&nbsp;
<span class="badge bg-info">EU | US</span>
</a>
</li>
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(21093000)"
><strong>21093 kHz</strong>&nbsp;
<span class="badge bg-secondary">15m | USB</span>&nbsp;
<span class="badge bg-info">EU | US</span>
</a>
</li>
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(14093000)"
><strong>14093 kHz</strong>&nbsp;
<span class="badge bg-secondary">20m | USB</span>&nbsp;
<span class="badge bg-info">EU | US</span>
</a>
</li>
<li>
<a
class="dropdown-item"
href="#"
@click="updateFrequencyAndApply(7053000)"
><strong>7053 kHz</strong>&nbsp;
<span class="badge bg-secondary">40m | USB</span>&nbsp;
<span class="badge bg-info">EU | US</span>
</a>
</li>
</ul>
</div>
</div>
<div class="me-2">
<div class="input-group input-group-sm">
<span class="input-group-text">Mode</span>
<select
class="form-control"
v-model="state.mode"
@click="set_hamlib_mode()"
v-bind:class="{
disabled: state.hamlib_status === 'disconnected',
}"
>
<option value="USB">USB</option>
<option value="LSB">LSB</option>
<option value="PKTUSB">PKT-U</option>
<option value="PKTLSB">PKT-L</option>
<option value="AM">AM</option>
<option value="FM">FM</option>
<option value="PKTFM">PKTFM</option>
</select>
</div>
</div>
<div class="me-2">
<div class="input-group input-group-sm">
<span class="input-group-text">Power</span>
<select
class="form-control"
v-model="state.rf_level"
@click="set_hamlib_rf_level()"
v-bind:class="{
disabled: state.hamlib_status === 'disconnected',
}"
>
<option value="0">-</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select>
<span class="input-group-text">%</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>