FreeDATA/gui_vue/src/components/main_footer_navbar.vue

<script setup lang="ts">

import {saveSettingsToFile} from '../js/settingsHandler'

import { setActivePinia } from 'pinia';
import pinia from '../store/index';
setActivePinia(pinia);

import { useStateStore } from '../store/stateStore.js';
const state = useStateStore(pinia);

import { useSettingsStore } from '../store/settingsStore.js';
const settings = useSettingsStore(pinia);


</script>

<template>
 <nav
        class="navbar fixed-bottom navbar-expand-xl bg-body-tertiary border-top p-2"
        style="margin-left: 87px"
      >

        <div class="col">
          <div class="btn-toolbar" role="toolbar" style="margin-left: 2px">
            <div class="btn-group btn-group-sm me-1" role="group">
              <button
                class="btn btn-sm btn-secondary me-1"
                v-bind:class="{ 'bg-danger' : state.ptt_state === 'True', 'bg-success' : state.ptt_state === 'False'}"
                id="ptt_state"
                type="button"
                data-bs-placement="top"
                data-bs-toggle="tooltip"
                data-bs-trigger="hover"
                data-bs-html="true"
                title="PTT state:<strong class='text-success'>RECEIVING</strong> / <strong class='text-danger'>TRANSMITTING</strong>"
              >
                <i class="bi bi-broadcast-pin" style="font-size: 0.8rem"></i>
              </button>

              <button
                class="btn btn-sm btn-secondary me-1"
                id="busy_state"
                type="button"
                data-bs-placement="top"
                data-bs-toggle="tooltip"
                data-bs-trigger="hover"
                data-bs-html="true"
                v-bind:class="{ 'bg-danger' : state.busy_state === 'IDLE', 'bg-success' : state.busy_state === 'BUSY'}"
                title="TNC busy state: <strong class='text-success'>IDLE</strong> / <strong class='text-danger'>BUSY</strong>"
              >
                <i class="bi bi-cpu" style="font-size: 0.8rem"></i>
              </button>

              <button
                class="btn btn-sm btn-secondary me-1"
                id="arq_session"
                type="button"
                data-bs-placement="top"
                data-bs-toggle="tooltip"
                data-bs-trigger="hover"
                data-bs-html="true"
                title="ARQ SESSION state: <strong class='text-warning'>OPEN</strong>"
                v-bind:class="{ 'bg-secondary' : state.arq_session_state === 'disconnected', 'bg-success' : state.arq_session_state === 'connected'}"
              >
                <i class="bi bi-arrow-left-right" style="font-size: 0.8rem"></i>
              </button>

              <button
                class="btn btn-sm btn-secondary me-4"
                id="arq_state"
                type="button"
                data-bs-placement="top"
                data-bs-toggle="tooltip"
                data-bs-trigger="hover"
                data-bs-html="true"
                title="DATA-CHANNEL state: <strong class='text-warning'>OPEN</strong>"
                v-bind:class="{ 'bg-secondary' : state.arq_state === 'False', 'bg-success' : state.arq_state === 'True'}"

              >
                <i
                  class="bi bi-file-earmark-binary"
                  style="font-size: 0.8rem"
                ></i>
              </button>
<!--
              <button
                class="btn btn-sm btn-secondary me-1"
                id="rigctld_state"
                type="button"
                data-bs-placement="top"
                data-bs-toggle="tooltip"
                data-bs-trigger="hover"
                data-bs-html="true"
                title="rigctld state: <strong class='text-success'>CONNECTED</strong> / <strong class='text-secondary'>UNKNOWN</strong>"
              >
                <i class="bi bi-usb-symbol" style="font-size: 0.8rem"></i>
              </button>
-->
            </div>




          <div class="btn-group btn-group-sm me-1" role="group">
                <button
                class="btn btn-sm btn-secondary me-4"
                type="button"
                data-bs-placement="top"
                data-bs-toggle="tooltip"
                data-bs-trigger="hover"
                data-bs-html="true"
              >
                {{state.frequency}} Hz
              </button>


          </div>

          <div class="btn-group btn-group-sm me-1" role="group">



            <button
                class="btn btn-sm btn-secondary me-0"
                type="button"
                data-bs-placement="top"
                data-bs-toggle="tooltip"
                data-bs-trigger="hover"
                data-bs-html="true"
              >
              <i class="bi bi-speedometer2" style="font-size: 1rem"></i>
              </button>


            <button
                class="btn btn-sm btn-secondary me-4"
                type="button"
                data-bs-placement="top"
                data-bs-toggle="tooltip"
                data-bs-trigger="hover"
                data-bs-html="true"
              >


                <i class="bi " style="font-size: 1rem"
                v-bind:class="{ 'bi-reception-0' : state.speed_level === '0',
                                'bi-reception-1' : state.speed_level === '1',
                                'bi-reception-2' : state.speed_level === '2',
                                'bi-reception-3' : state.speed_level === '3',
                                'bi-reception-4' : state.speed_level === '4',
                                }"



                ></i>
              </button>


</div>
   <div class="btn-group btn-group-sm me-1" role="group">

                          <button
                class="btn btn-sm btn-secondary me-0"
                type="button"
                data-bs-placement="top"
                data-bs-toggle="tooltip"
                data-bs-trigger="hover"
                data-bs-html="true"
              >
              <i class="bi bi-file-earmark-binary" style="font-size: 1rem"></i>
              </button>


                          <button
                class="btn btn-sm btn-secondary me-4"
                type="button"
                data-bs-placement="top"
                data-bs-toggle="tooltip"
                data-bs-trigger="hover"
                data-bs-html="true"
              >
                {{state.arq_total_bytes}}
              </button>
</div>
   <div class="btn-group btn-group-sm me-1" role="group">
                                <button
                class="btn btn-sm btn-secondary me-0"
                type="button"
                data-bs-placement="top"
                data-bs-toggle="tooltip"
                data-bs-trigger="hover"
                data-bs-html="true"
              >
              <i class="bi bi-file-earmark-binary" style="font-size: 1rem"></i>
              </button>


                          <button
                class="btn btn-sm btn-secondary me-1"
                type="button"
                data-bs-placement="top"
                data-bs-toggle="tooltip"
                data-bs-trigger="hover"
                data-bs-html="true"
              >
                {{state.dxcallsign}}
              </button>

     </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div style="margin-right: 2px">
            <div class="progress w-100" style="height: 30px; min-width: 200px">
              <div
                class="progress-bar progress-bar-striped bg-primary force-gpu"
                id="transmission_progress"
                role="progressbar"
                style="width: 0%"
                aria-valuenow="0"
                aria-valuemin="0"
                aria-valuemax="100"
              ></div>
              <!--<p class="justify-content-center d-flex position-absolute w-100">PROGRESS</p>-->
              <p
                class="justify-content-center mt-2 d-flex position-absolute w-100"
                id="transmission_timeleft"
              >
                ---
              </p>
            </div>
          </div>
        </div>
      </nav>


</template>