FreeDATA/gui_vue/src/components/main_footer_navbar.vue

235 lines
7.7 KiB
Vue
Raw Normal View History

<script setup lang="ts">
import {saveSettingsToFile} from '../js/settingsHandler'
import { setActivePinia } from 'pinia';
import pinia from '../store/index';
setActivePinia(pinia);
2023-09-09 16:29:32 +00:00
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"
>
2023-09-09 16:29:32 +00:00
<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"
2023-09-09 16:29:32 +00:00
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"
2023-09-09 16:29:32 +00:00
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>"
>
<i class="bi bi-arrow-left-right" style="font-size: 0.8rem"></i>
</button>
<button
2023-09-09 16:29:32 +00:00
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>"
>
<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>
2023-09-09 16:29:32 +00:00
<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>
2023-09-09 16:29:32 +00:00
<div class="btn-group btn-group-sm me-1" role="group">
<button
class="btn btn-sm btn-secondary me-0"
type="button"
2023-09-09 16:29:32 +00:00
data-bs-placement="top"
data-bs-toggle="tooltip"
data-bs-trigger="hover"
data-bs-html="true"
>
2023-09-09 16:29:32 +00:00
<i class="bi bi-speedometer2" style="font-size: 1rem"></i>
</button>
2023-09-09 16:29:32 +00:00
<button
class="btn btn-sm btn-secondary me-4"
type="button"
2023-09-09 16:29:32 +00:00
data-bs-placement="top"
data-bs-toggle="tooltip"
data-bs-trigger="hover"
data-bs-html="true"
>
2023-09-09 16:29:32 +00:00
<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>
2023-09-09 16:29:32 +00:00
</div>
<div class="btn-group btn-group-sm me-1" role="group">
2023-09-09 16:29:32 +00:00
<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>
2023-09-09 16:29:32 +00:00
<button
class="btn btn-sm btn-secondary me-4"
type="button"
2023-09-09 16:29:32 +00:00
data-bs-placement="top"
data-bs-toggle="tooltip"
data-bs-trigger="hover"
data-bs-html="true"
>
2023-09-09 16:29:32 +00:00
{{state.arq_total_bytes}}
</button>
2023-09-09 16:29:32 +00:00
</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>
2023-09-09 16:29:32 +00:00
</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"
>
------
</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>