FreeDATA/gui_vue/src/components/main_modals.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);

import { useChatStore } from "../store/chatStore.js";
const chat = useChatStore(pinia);

import { deleteChatByCallsign, getNewMessagesByDXCallsign } from "../js/chatHandler";


import { sendTestFrame, setTxAudioLevel } from "../js/sock.js";

function tuneAudio() {
  sendTestFrame();
}

function set_audio_level() {
  setTxAudioLevel(state.audio_level);
}

function deleteChat() {
  //console.log(chat.selectedCallsign)
  deleteChatByCallsign(chat.selectedCallsign);
}

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
} from 'chart.js'
import { Line } from "vue-chartjs";
import { ref, computed } from "vue";

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
)


</script>

<template>



<!-- delete chat modal -->
<div class="modal fade" ref="modalEle" id="deleteChatModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="deleteChatModalLabel">Sub menu for: {{chat.selectedCallsign}}</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">



    <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1">Total Messages</span>
            <span class="input-group-text" id="basic-addon1">{{getNewMessagesByDXCallsign(chat.selectedCallsign)[0]}}</span>
        </div>

    <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1">New Messages</span>
            <span class="input-group-text" id="basic-addon1">{{getNewMessagesByDXCallsign(chat.selectedCallsign)[1]}}</span>
        </div>


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-danger" @click="deleteChat" data-bs-dismiss="modal">Delete Chat</button>
      </div>
    </div>
  </div>
</div>



<!-- Message Info Modal -->
<div class="modal fade" ref="modalEle" id="messageInfoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="messageInfoModalLabel">{{chat.selectedMessageObject["uuid"]}}</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">

{{chat.selectedMessageObject}}

        <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1">Status</span>
            <span class="input-group-text" id="basic-addon1">{{chat.selectedMessageObject["status"]}}</span>
        </div>

        <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1">Attempts</span>
            <span class="input-group-text" id="basic-addon1">{{chat.selectedMessageObject["attempt"]}}</span>
        </div>

        <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1">Bytes per Minute</span>
            <span class="input-group-text" id="basic-addon1">{{chat.selectedMessageObject["bytesperminute"]}}</span>
        </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


  <!-- HELP MODALS AUDIO -->
  <div
    class="modal fade"
    data-bs-backdrop="static"
    tabindex="-1"
    id="audioHelpModal"
  >
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Help</h5>
          <button
            type="button"
            class="btn btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <div class="card mb-3">
            <div class="card-body">
              <div class="input-group input-group-sm mb-1">
                <span class="input-group-text">
                  <i class="bi bi-mic-fill" style="font-size: 1rem"></i>
                </span>
                <select
                  class="form-select form-select-sm"
                  aria-label=".form-select-sm"
                  disabled
                >
                  <!-- 					 					<option selected value="3011">USB Interface</option>-->
                </select>
              </div>
              <p class="card-text">
                Select your audio device for transmitting. It
                <strong>must</strong> be using a sample rate of
                <strong>48000Hz</strong>
              </p>
            </div>
          </div>

          <div class="card">
            <div class="card-body">
              <div class="input-group input-group-sm">
                <span class="input-group-text">
                  <i class="bi bi-volume-up" style="font-size: 1rem"></i>
                </span>
                <select
                  class="form-select form-select-sm"
                  aria-label=".form-select-sm"
                  disabled
                ></select>
              </div>
              <p class="card-text">
                Select your audio device for receiving. It
                <strong>must</strong> be using a sample rate of
                <strong>48000Hz</strong>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- HELP MODALS RIGCONTROL -->
  <div
    class="modal fade"
    data-bs-backdrop="static"
    tabindex="-1"
    id="rigcontrolHelpModal"
  >
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Help</h5>
          <button
            type="button"
            class="btn btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <div class="card mb-3">
            <div class="card-body">
              <h5 class="card-title">Rig Control</h5>
              <p class="card-text">
                This section is where you configure rig control method (none
                (VOX) or hamlib) for both GUI and TNC. For the best experience
                hamlib control is recommended.
              </p>
            </div>
          </div>

          <div class="card mb-3">
            <div class="card-body">
              <h5 class="card-title">None/Vox</h5>
              <p class="card-text">
                Select "None/Vox" if you want to use Vox for triggering PTT. No
                connection to rigctld will be established. No frequency
                information is availble.
              </p>
            </div>
          </div>

          <div class="card mb-3">
            <div class="card-body">
              <h5 class="card-title">Hamlib</h5>
              <p class="card-text">
                Select "Hamlib" if you want to have more control over your
                radio. Define your hamlib settings in settings, and click the
                start button to start rigctld. You may use the 'PTT test' button
                to ensure rig control is working.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- HELP MODALS STATION -->
  <div
    class="modal fade"
    data-bs-backdrop="static"
    tabindex="-1"
    id="stationHelpModal"
  >
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Help</h5>
          <button
            type="button"
            class="btn btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <div class="alert alert-info" role="alert">
            These settings will be saved automatically when changing.
          </div>

          <div class="card mb-3">
            <div class="card-body">
              <h5 class="card-title">
                <div
                  class="input-group input-group-sm mb-0"
                  data-bs-placement="bottom"
                  data-bs-toggle="tooltip"
                  data-bs-trigger="hover"
                  data-bs-html="false"
                  title="Enter your callsign and save it"
                >
                  <span class="input-group-text">
                    <i
                      class="bi bi-person-bounding-box"
                      style="font-size: 1rem"
                    ></i>
                  </span>
                  <input
                    type="text"
                    class="form-control"
                    placeholder="callsign"
                    pattern="[A-Z]*"
                    maxlength="8"
                    style="max-width: 8rem"
                    aria-label="Input group"
                    aria-describedby="btnGroupAddon"
                    disabled
                  />
                  <select
                    class="form-select form-select-sm"
                    aria-label=".form-select-sm"
                    style="max-width: 6rem"
                    disabled
                  >
                    <option selected value="SSID">SSID</option>
                  </select>
                </div>
              </h5>
              <p class="card-text">
                Enter your callsign and SSID. Your callsign can have a maximum
                length of 7 characters
              </p>
            </div>
          </div>
          <div class="card mb-3">
            <div class="card-body">
              <h5 class="card-title">
                <div
                  class="input-group input-group-sm mb-0"
                  data-bs-placement="bottom"
                  data-bs-toggle="tooltip"
                  data-bs-trigger="hover"
                  data-bs-html="false"
                  title="Enter your gridsquare and save it"
                >
                  <span class="input-group-text">
                    <i class="bi bi-house-fill" style="font-size: 1rem"></i>
                  </span>
                  <input
                    type="text"
                    class="form-control mr-1"
                    style="max-width: 6rem"
                    placeholder="locator"
                    maxlength="6"
                    aria-label="Input group"
                    aria-describedby="btnGroupAddon"
                    disabled
                  />
                </div>
              </h5>
              <p class="card-text">
                Enter your position as a 4 or 6 digit grid square, also known as
                a maidenhead locator. Six digits are recommended.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- HELP MODALS UPDATER -->
  <div
    class="modal fade"
    data-bs-backdrop="static"
    tabindex="-1"
    id="updaterHelpModal"
  >
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Help</h5>
          <button
            type="button"
            class="btn btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <div class="card mb-3">
            <div class="card-body">
              <h5 class="card-title">Auto-Updater</h5>
              <p class="card-text">
                The auto updater loads the latest version from Github and
                installs it automatically. You can select the update channel in
                settings. Once an update has been downlaoded, you need to
                confirm the auto-installation and restart.
              </p>
            </div>
          </div>
          <div class="card mb-3">
            <div class="card-body">
              <h5 class="card-title">Alpha</h5>
              <p class="card-text">
                Alpha releases are more frequent and contain the latest
                features, but are likely to be unstable and introduce bugs.
              </p>
            </div>
          </div>
          <div class="card mb-3">
            <div class="card-body">
              <h5 class="card-title">Beta</h5>
              <p class="card-text">
                Beta releases are more stable than Alpha releases. They are a
                good tradeoff between latest features and stability. They will
                be updated less often. A beta release has not been released yet.
              </p>
            </div>
          </div>
          <div class="card mb-3">
            <div class="card-body">
              <h5 class="card-title">Stable</h5>
              <p class="card-text">
                Stable releases are the most stable versions with no known major
                issues. A stable release has not been released yet.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- HELP MODALS LOCAL REMOTE -->
  <div
    class="modal fade"
    data-bs-backdrop="static"
    tabindex="-1"
    id="localRemoteHelpModal"
  >
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Help</h5>
          <button
            type="button"
            class="btn btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <div class="card mb-3">
            <div class="card-body">
              <h5 class="card-title">
                <div
                  class="btn-group btn-group-sm me-2"
                  role="group"
                  aria-label="local-remote-switch toggle button group"
                  data-bs-placement="bottom"
                  data-bs-toggle="tooltip"
                  data-bs-trigger="hover"
                  data-bs-html="true"
                  title="Select a local or a remote location of your TNC daemon. Normally local is the preferred option."
                >
                  <input
                    type="radio"
                    class="btn-check"
                    name="local-remote-switch"
                    autocomplete="off"
                    checked
                    disabled
                  />
                  <label
                    class="btn btn-sm btn-outline-secondary"
                    for="local-remote-switch1"
                  >
                    <i class="bi bi-pc-display-horizontal"></i>
                    <span class="ms-2 me-2">Local tnc</span>
                  </label>
                  <input
                    type="radio"
                    class="btn-check"
                    name="local-remote-switch"
                    autocomplete="off"
                    disabled
                  />
                  <label
                    class="btn btn-sm btn-outline-secondary"
                    for="local-remote-switch2"
                  >
                    <i class="bi bi-ethernet"></i>
                    <span class="ms-2 me-2">Remote tnc</span>
                  </label>
                </div>
              </h5>
              <p class="card-text">
                Local / Remote switch. If the TNC is running on the same
                computer as the GUI, select local. Otherwise choose remote and
                enter the IP/Port of where the TNC is running.
              </p>
            </div>
          </div>
          <div class="card mb-3">
            <div class="card-body">
              <h5 class="card-title">
                <div class="input-group input-group-sm me-2">
                  <span class="input-group-text">tnc ip</span>
                  <input
                    type="text"
                    class="form-control"
                    placeholder="ip address"
                    value="192.168.178.163"
                    maxlength="17"
                    style="width: 8rem"
                    aria-label="Username"
                    aria-describedby="basic-addon1"
                    disabled
                  />
                  <span class="input-group-text">:</span>
                  <input
                    type="text"
                    class="form-control"
                    placeholder="port"
                    value="3000"
                    maxlength="5"
                    max="65534"
                    min="1025"
                    style="width: 4rem"
                    aria-label="Username"
                    aria-describedby="basic-addon1"
                    disabled
                  />
                  <button class="btn btn-sm btn-danger" type="button" disabled>
                    <i class="bi bi-diagram-3" style="font-size: 1rem"></i>
                  </button>
                </div>
              </h5>
              <p class="card-text">
                Remote IP of TNC. Port is port of daemon. The tnc port will
                automatically adjusted. ( daemon port - 1 )
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- HELP MODALS START STOP TNC -->
  <div
    class="modal fade"
    data-bs-backdrop="static"
    tabindex="-1"
    id="startStopTNCHelpModal"
  >
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Help</h5>
          <button
            type="button"
            class="btn btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <div class="card mb-3">
            <div class="card-body">
              <h5 class="card-title">
                <div class="btn-group" role="group">
                  <button
                    type="button"
                    class="btn btn-sm btn-outline-success"
                    data-bs-toggle="tooltip"
                    data-bs-trigger="hover"
                    data-bs-html="false"
                    title="Start the TNC. Please set your audio and radio settings first!"
                    disabled
                  >
                    <i class="bi bi-play-fill"></i>
                    <span class="ms-2">Start tnc</span>
                  </button>
                  <button
                    type="button"
                    class="btn btn-sm btn-outline-danger"
                    data-bs-toggle="tooltip"
                    data-bs-trigger="hover"
                    data-bs-html="false"
                    title="Stop the TNC."
                    disabled
                  >
                    <i class="bi bi-stop-fill"></i>
                    <span class="ms-2">Stop tnc</span>
                  </button>
                </div>
              </h5>
              <p class="card-text">
                Start or stop the TNC service. The TNC daemon must be running
                and will work whether the TNC is local or remote.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- HELP MODALS AUDIO LEVEL -->
  <div
    class="modal fade"
    data-bs-backdrop="static"
    tabindex="-1"
    id="audioLevelHelpModal"
  >
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Help</h5>
          <button
            type="button"
            class="btn btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <div class="card mb-3">
            <div class="card-body">
              <h5 class="card-title">
                <div class="progress mb-0" style="height: 22px">
                  <div
                    class="progress-bar progress-bar-striped bg-primary force-gpu"
                    role="progressbar"
                    style="width: 5%"
                    aria-valuenow="5"
                    aria-valuemin="0"
                    aria-valuemax="100"
                  ></div>
                  <p
                    class="justify-content-center d-flex position-absolute w-100"
                  >
                    -38 dBFS (Audio Level)
                  </p>
                </div>
                <div class="progress mb-0" style="height: 8px">
                  <div
                    class="progress-bar progress-bar-striped bg-warning"
                    role="progressbar"
                    style="width: 1%"
                    aria-valuenow="1"
                    aria-valuemin="0"
                    aria-valuemax="100"
                  ></div>
                  <div
                    class="progress-bar bg-success"
                    role="progressbar"
                    style="width: 89%"
                    aria-valuenow="50"
                    aria-valuemin="0"
                    aria-valuemax="100"
                  ></div>
                  <div
                    class="progress-bar progress-bar-striped bg-warning"
                    role="progressbar"
                    style="width: 20%"
                    aria-valuenow="20"
                    aria-valuemin="0"
                    aria-valuemax="100"
                  ></div>
                  <div
                    class="progress-bar progress-bar-striped bg-danger"
                    role="progressbar"
                    style="width: 29%"
                    aria-valuenow="29"
                    aria-valuemin="0"
                    aria-valuemax="100"
                  ></div>
                </div>
              </h5>
              <p class="card-text">
                Represents the level of audio from transceiver. Excessively high
                levels will affect decoding performance negatively.
              </p>
            </div>
          </div>
          <div class="card mb-3">
            <div class="card-body">
              <h5 class="card-title">
                <div class="progress mb-0" style="height: 22px">
                  <div
                    class="progress-bar progress-bar-striped bg-primary force-gpu"
                    role="progressbar"
                    style="width: 30%"
                    aria-valuenow="0"
                    aria-valuemin="0"
                    aria-valuemax="100"
                  ></div>
                  <p
                    class="justify-content-center d-flex position-absolute w-100"
                    id="noise_level_value"
                  >
                    -24 S-Meter (dBm)
                  </p>
                </div>
                <div class="progress mb-0" style="height: 8px">
                  <div
                    class="progress-bar progress-bar-striped bg-warning"
                    role="progressbar"
                    style="width: 1%"
                    aria-valuenow="1"
                    aria-valuemin="0"
                    aria-valuemax="100"
                  ></div>
                  <div
                    class="progress-bar bg-success"
                    role="progressbar"
                    style="width: 89%"
                    aria-valuenow="50"
                    aria-valuemin="0"
                    aria-valuemax="100"
                  ></div>
                  <div
                    class="progress-bar progress-bar-striped bg-warning"
                    role="progressbar"
                    style="width: 20%"
                    aria-valuenow="20"
                    aria-valuemin="0"
                    aria-valuemax="100"
                  ></div>
                  <div
                    class="progress-bar progress-bar-striped bg-danger"
                    role="progressbar"
                    style="width: 29%"
                    aria-valuenow="29"
                    aria-valuemin="0"
                    aria-valuemax="100"
                  ></div>
                </div>
              </h5>
              <p class="card-text">
                Represents noise level of the channel from the transceiver.
                Requires hamlib rig control.
              </p>
            </div>
          </div>
          <div class="card mb-3">
            <div class="card-body">
              <h5 class="card-title">
                <button type="button" class="btn btn-sm btn-outline-secondary" @click="tuneAudio">
                  Tune
                </button>
              </h5>
              <p class="card-text">
                Adjust volume level of outgoing audio to transceiver. For best
                results lower the level so that a minimum amount of ALC is used.
                Can be used in combination with rig's mic/input gain for
                furthrer refinement.
              </p>
            </div>
          </div>
          <div class="card mb-3">
            <div class="card-body">
              <h5 class="card-title">
                <button type="button" class="btn btn-sm btn-outline-danger">
                  Record audio
                </button>
              </h5>
              <p class="card-text">Create a recording of current channel</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- HELP MODALS BROADCASTS -->
  <div
    class="modal fade"
    data-bs-backdrop="static"
    tabindex="-1"
    id="broadcastsHelpModal"
  >
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Help</h5>
          <button
            type="button"
            class="btn btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <div class="card mb-3">
            <div class="card-body">
              <button
                class="btn btn-sm btn-outline-secondary ms-1"
                type="button"
                disabled
              >
                Ping
              </button>
              <p class="card-text">
                Send a ping to a remote station by entering a callsign and
                optional SSID (-0 will be used if not specified.) Alternatively
                click on a station in the heard station list to populate the
                call sign field. If the remote station decodes the ping it will
                transmit a reply. If able to decode the reply, a signal report
                will be listed in the heard station list.
              </p>
            </div>
          </div>

          <div class="card mb-3">
            <div class="card-body">
              <button
                class="btn btn-sm btn-outline-secondary"
                type="button"
                disabled
              >
                Call CQ
              </button>
              <p class="card-text">Sending out a CQ CQ CQ to the world.</p>
            </div>
          </div>
          <div class="card mb-3">
            <div class="card-body">
              <button
                type="button"
                class="btn btn-sm btn-outline-secondary"
                disabled
              >
                <i class="bi bi-soundwave"></i>Toggle beacon
              </button>
              <p class="card-text">
                Sends a periodic broadcast (duration is definable in settings)
                that announces you are available. Check explorer to see other
                active stations that may have decoded your beacon.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- HELP MODALS WATERFALL -->
  <div
    class="modal fade"
    data-bs-backdrop="static"
    tabindex="-1"
    id="waterfallHelpModal"
  >
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Help</h5>
          <button
            type="button"
            class="btn btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <div class="card mb-3">
            <div class="card-body">
              <h5 class="card-title">
                Waterfall
                <input
                  type="radio"
                  class="btn-check"
                  name="waterfall-scatter-switch"
                  autocomplete="off"
                  checked
                />
                <label
                  class="btn btn-sm btn-outline-secondary"
                  for="waterfall-scatter-switch1"
                  ><strong><i class="bi bi-water"></i></strong>
                </label>
              </h5>
              <p class="card-text">
                Displays a waterfall for activity of current channel.
              </p>
            </div>
          </div>
          <div class="card mb-3">
            <div class="card-body">
              <h5 class="card-title">
                Busy Indicator

                <button class="btn btn-sm btn-success" type="button">
                  busy
                </button>
              </h5>
              <p class="card-text">
                Green when channel is open and changes to red to indicate there
                is activity on the channel.
              </p>
            </div>
          </div>
          <div class="card mb-3">
            <div class="card-body">
              <h5 class="card-title">
                Signal Indicator
                <button class="btn btn-sm btn-success" type="button">
                  signal
                </button>
              </h5>
              <p class="card-text">
                Changes to green when Codec2 data is detected on channel.
              </p>
            </div>
          </div>
          <div class="card mb-3">
            <div class="card-body">
              <h5 class="card-title">
                Constellation Plot
                <input type="radio" class="btn-check" autocomplete="off" />
                <label class="btn btn-sm btn-outline-secondary"
                  ><strong><i class="bi bi-border-outer"></i></strong>
                </label>
              </h5>
              <p class="card-text">
                Displays a plot of last decoded message. A constellation plot is
                a simple way to represent signal quality.
              </p>
            </div>
          </div>
          <div class="card mb-3">
            <div class="card-body">
              <h5 class="card-title">
                Speed Chart

                <input type="radio" class="btn-check" autocomplete="off" />
                <label class="btn btn-sm btn-outline-secondary"
                  ><strong><i class="bi bi-graph-up-arrow"></i></strong>
                </label>
              </h5>
              <p class="card-text">
                Shows history of SNR and bit rate of messages.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- HELP MODALS HEARD STATIONS -->
  <div
    class="modal fade"
    data-bs-backdrop="static"
    tabindex="-1"
    id="heardStationsHelpModal"
  >
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Station List Help</h5>
          <button
            type="button"
            class="btn btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <div class="card mb-3">
            <div class="card-body">
              <p class="card-text">
                Stations that you've been able to decode will be listed here.
                Details such as time, frequency, message type, call sign,
                location and SNR will be listed. Existing entries are updated if
                they already exist and more detailed history can be viewed in
                chat window for each station.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- AUDIO MODAL -->
  <div
    class="modal fade"
    data-bs-backdrop="static"
    tabindex="-1"
    id="audioModal"
  >
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Audio tuning</h5>
          <button
            type="button"
            class="btn btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <div class="input-group input-group-sm mb-1">
            <span class="input-group-text">Test-Frame</span>
            <button
              type="button"
              id="sendTestFrame"
              @click="sendTestFrame()"
              class="btn btn-danger"
            >
              Transmit
            </button>
          </div>
          <div class="input-group input-group-sm mb-1">
            <span class="input-group-text">TX Level</span>
            <span class="input-group-text">{{ state.audio_level }}</span>
            <span class="input-group-text w-75">
              <input
                type="range"
                class="form-range"
                min="0"
                max="250"
                step="1"
                id="audioLevelTX"
                @click="set_audio_level()"
                v-model="state.audio_level"
            /></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>