FreeDATA/gui/src/components/grid/grid_active_rig_control.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="card h-100">
    <div class="card-header">
      <i class="bi bi-house-door" style="font-size: 1.2rem"></i>&nbsp;
      <strong>Radio control</strong>
    </div>

    <div class="card-body overflow-auto">
      <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"
              style="z-index: 50"
            >
              <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>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>