Crash_Override/FreeDATA
1
0
Fork 0
mirror of https://github.com/DJ2LS/FreeDATA synced 2024-05-14 08:04:33 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge remote-tracking branch 'origin/develop' into develop

Browse source
This commit is contained in:
DJ2LS 2024-04-28 20:22:23 +02:00
commit 12c77d5c4c
5 changed files with 378 additions and 416 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
freedata_gui/src/components/main.vue
View file

@ -15,13 +15,8 @@ import Dynamic_components from "./dynamic_components.vue";
import { getFreedataMessages } from "../js/api"; import { getFreedataMessages } from "../js/api";
import { getRemote } from "../store/settingsStore.js"; import { getRemote } from "../store/settingsStore.js";
import { loadAllData } from "../js/eventHandler"; import { loadAllData } from "../js/eventHandler";
</script> </script>
<template> <template>
<!-------------------------------- INFO TOASTS ----------------> <!-------------------------------- INFO TOASTS ---------------->
<div aria-live="polite" aria-atomic="true" class="position-relative z-3"> <div aria-live="polite" aria-atomic="true" class="position-relative z-3">
@ -31,24 +26,22 @@ import { loadAllData } from "../js/eventHandler";
></div> ></div>
</div> </div>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<!-- Collapsible Left Navbar -->
<!-- Collapsible Left Navbar --> <div class="col-auto p-0 bg-body-secondary border-end">
<div class="col-auto p-0 bg-body-secondary border-end">
<div class="flex-shrink-0 p-3"> <div class="flex-shrink-0 p-3">
<div class="collapse collapse-horizontal show" id="collapseLeftNavbar"> <div
class="collapse collapse-horizontal show"
id="collapseLeftNavbar"
>
<main_left_navbar /> <main_left_navbar />
</div> </div>
</div> </div>
</div> </div>
<div class="col min-vh-100 m-0 p-0"> <div class="col min-vh-100 m-0 p-0">
<!-- <!--
<main_top_navbar /> <main_top_navbar />
--> -->
<div class="tab-content" id="nav-tabContent-settings"> <div class="tab-content" id="nav-tabContent-settings">
@ -57,9 +50,7 @@ import { loadAllData } from "../js/eventHandler";
id="list-home" id="list-home"
role="tabpanel" role="tabpanel"
aria-labelledby="list-home-list" aria-labelledby="list-home-list"
> ></div>
</div>
<div <div
class="tab-pane fade d-none" class="tab-pane fade d-none"
@ -67,9 +58,8 @@ import { loadAllData } from "../js/eventHandler";
role="tabpanel" role="tabpanel"
aria-labelledby="list-mesh-list" aria-labelledby="list-mesh-list"
> >
<mesh /> <mesh />
</div> </div>
<div <div
class="tab-pane fade show active" class="tab-pane fade show active"
@ -89,13 +79,10 @@ import { loadAllData } from "../js/eventHandler";
<chat /> <chat />
</div> </div>
<settings_view />
<settings_view /> <main_footer_navbar />
<main_footer_navbar />
</div> </div>
<!---------------------------------------------------------------------- FOOTER AREA ------------------------------------------------------------> <!---------------------------------------------------------------------- FOOTER AREA ------------------------------------------------------------>
<div class="container"> <div class="container">

364
freedata_gui/src/components/main_footer_navbar.vue
View file

@ -8,48 +8,46 @@ const state = useStateStore(pinia);
</script> </script>
<template> <template>
<nav <nav class="navbar navbar-expand-xl bg-body-tertiary border-top p-2">
class="navbar navbar-expand-xl bg-body-tertiary border-top p-2" <div class="col">
> <div class="btn-toolbar" role="toolbar">
<div class="col"> <div class="btn-group btn-group-sm me-1" role="group">
<div class="btn-toolbar" role="toolbar"> <button
<div class="btn-group btn-group-sm me-1" role="group"> class="btn btn-sm btn-secondary me-1"
<button v-bind:class="{
class="btn btn-sm btn-secondary me-1" 'btn-danger': state.ptt_state == true,
v-bind:class="{ 'btn-secondary': state.ptt_state == false,
'btn-danger': state.ptt_state == true, }"
'btn-secondary': state.ptt_state == false, id="ptt_state"
}" type="button"
id="ptt_state" style="pointer-events: auto"
type="button" disabled
style="pointer-events: auto" data-bs-toggle="tooltip"
disabled data-bs-placement="top"
data-bs-toggle="tooltip" data-bs-title="PTT trigger state"
data-bs-placement="top" >
data-bs-title="PTT trigger state" <i class="bi bi-broadcast-pin" style="font-size: 0.8rem"></i>
> </button>
<i class="bi bi-broadcast-pin" style="font-size: 0.8rem"></i>
</button>
<button <button
class="btn btn-sm btn-secondary me-1" class="btn btn-sm btn-secondary me-1"
id="busy_state" id="busy_state"
type="button" type="button"
data-bs-placement="top" data-bs-placement="top"
data-bs-toggle="tooltip" data-bs-toggle="tooltip"
data-bs-trigger="hover" data-bs-trigger="hover"
data-bs-html="true" data-bs-html="true"
v-bind:class="{ v-bind:class="{
'btn-danger': state.busy_state === true, 'btn-danger': state.busy_state === true,
'btn-secondary': state.busy_state === false, 'btn-secondary': state.busy_state === false,
}" }"
data-bs-title="Modem state" data-bs-title="Modem state"
disabled disabled
style="pointer-events: auto" style="pointer-events: auto"
> >
<i class="bi bi-cpu" style="font-size: 0.8rem"></i> <i class="bi bi-cpu" style="font-size: 0.8rem"></i>
</button> </button>
<!-- <!--
<button <button
class="btn btn-sm btn-secondary me-1" class="btn btn-sm btn-secondary me-1"
id="arq_session" id="arq_session"
@ -69,7 +67,7 @@ const state = useStateStore(pinia);
<i class="bi bi-arrow-left-right" style="font-size: 0.8rem"></i> <i class="bi bi-arrow-left-right" style="font-size: 0.8rem"></i>
</button> </button>
--> -->
<!-- <!--
<button <button
class="btn btn-sm btn-secondary me-1" class="btn btn-sm btn-secondary me-1"
id="arq_state" id="arq_state"
@ -88,7 +86,7 @@ const state = useStateStore(pinia);
<i class="bi bi-file-earmark-binary" style="font-size: 0.8rem"></i> <i class="bi bi-file-earmark-binary" style="font-size: 0.8rem"></i>
</button> </button>
--> -->
<!-- <!--
<button <button
class="btn btn-sm btn-secondary me-1" class="btn btn-sm btn-secondary me-1"
id="rigctld_state" id="rigctld_state"
@ -102,7 +100,7 @@ const state = useStateStore(pinia);
<i class="bi bi-usb-symbol" style="font-size: 0.8rem"></i> <i class="bi bi-usb-symbol" style="font-size: 0.8rem"></i>
</button> </button>
--> -->
<!-- <!--
<button <button
class="btn btn-sm btn-secondary disabled me-3" class="btn btn-sm btn-secondary disabled me-3"
type="button" type="button"
@ -120,154 +118,144 @@ const state = useStateStore(pinia);
<i class="bi bi-hourglass"></i> <i class="bi bi-hourglass"></i>
</button> </button>
--> -->
</div> </div>
<div class="btn-group btn-group-sm me-1" role="group"> <div class="btn-group btn-group-sm me-1" role="group">
<button <button
class="btn btn-sm btn-secondary me-4 disabled" class="btn btn-sm btn-secondary me-4 disabled"
type="button" type="button"
data-bs-placement="top" data-bs-placement="top"
data-bs-toggle="tooltip" data-bs-toggle="tooltip"
data-bs-trigger="hover" data-bs-trigger="hover"
data-bs-title="What's the frequency, Kenneth?" data-bs-title="What's the frequency, Kenneth?"
style="pointer-events: auto" style="pointer-events: auto"
> >
{{ state.frequency / 1000 }} kHz {{ state.frequency / 1000 }} kHz
</button> </button>
</div> </div>
<div class="btn-group btn-group-sm me-1" role="group"> <div class="btn-group btn-group-sm me-1" role="group">
<button <button
class="btn btn-sm btn-secondary me-0" class="btn btn-sm btn-secondary me-0"
type="button" type="button"
title="Speed level" title="Speed level"
> >
<i class="bi bi-speedometer2" style="font-size: 1rem"></i> <i class="bi bi-speedometer2" style="font-size: 1rem"></i>
</button> </button>
<button <button
class="btn btn-sm btn-secondary me-4 disabled" class="btn btn-sm btn-secondary me-4 disabled"
type="button" type="button"
data-bs-placement="top" data-bs-placement="top"
data-bs-toggle="tooltip" data-bs-toggle="tooltip"
data-bs-trigger="hover" data-bs-trigger="hover"
data-bs-html="true" data-bs-html="true"
data-bs-titel="speed level" data-bs-titel="speed level"
> >
<i <i
class="bi" class="bi"
style="font-size: 1rem" style="font-size: 1rem"
v-bind:class="{ v-bind:class="{
'bi-reception-0': state.speed_level == 0, 'bi-reception-0': state.speed_level == 0,
'bi-reception-1': state.speed_level == 1, 'bi-reception-1': state.speed_level == 1,
'bi-reception-2': state.speed_level == 2, 'bi-reception-2': state.speed_level == 2,
'bi-reception-3': state.speed_level == 3, 'bi-reception-3': state.speed_level == 3,
'bi-reception-4': state.speed_level == 4, 'bi-reception-4': state.speed_level == 4,
}" }"
></i> ></i>
</button> </button>
</div> </div>
<div class="btn-group btn-group-sm me-1" role="group"> <div class="btn-group btn-group-sm me-1" role="group">
<button <button
class="btn btn-sm btn-secondary me-0" class="btn btn-sm btn-secondary me-0"
type="button" type="button"
title="Bytes transfered" title="Bytes transfered"
> >
<i <i class="bi bi-file-earmark-binary" style="font-size: 1rem"></i>
class="bi bi-file-earmark-binary" </button>
style="font-size: 1rem"
></i>
</button>
<button <button
class="btn btn-sm btn-secondary me-4 disabled" class="btn btn-sm btn-secondary me-4 disabled"
type="button" type="button"
data-bs-placement="top" data-bs-placement="top"
data-bs-toggle="tooltip" data-bs-toggle="tooltip"
data-bs-trigger="hover" data-bs-trigger="hover"
data-bs-html="true" data-bs-html="true"
data-bs-title="total bytes of transmission" data-bs-title="total bytes of transmission"
> >
{{ state.arq_total_bytes }} {{ state.arq_total_bytes }}
</button> </button>
</div> </div>
<div class="btn-group btn-group-sm me-1" role="group"> <div class="btn-group btn-group-sm me-1" role="group">
<button <button
class="btn btn-sm btn-secondary me-0" class="btn btn-sm btn-secondary me-0"
type="button" type="button"
data-bs-placement="top" data-bs-placement="top"
data-bs-toggle="tooltip" data-bs-toggle="tooltip"
data-bs-trigger="hover" data-bs-trigger="hover"
data-bs-html="true" data-bs-html="true"
data-bs-title="Current or last connected with station" data-bs-title="Current or last connected with station"
> >
<i <i class="bi bi-file-earmark-binary" style="font-size: 1rem"></i>
class="bi bi-file-earmark-binary" </button>
style="font-size: 1rem"
></i>
</button>
<button <button
class="btn btn-sm btn-secondary disabled me-1" class="btn btn-sm btn-secondary disabled me-1"
type="button" type="button"
data-bs-placement="top" data-bs-placement="top"
data-bs-toggle="tooltip" data-bs-toggle="tooltip"
data-bs-trigger="hover" data-bs-trigger="hover"
data-bs-html="true" data-bs-html="true"
data-bs-title="the dxcallsign of the connected station" data-bs-title="the dxcallsign of the connected station"
> >
{{ state.dxcallsign }} {{ state.dxcallsign }}
</button> </button>
</div> </div>
</div> </div>
</div>
<div class="col-lg-4">
<div style="margin-right: 2px">
<div class="progress w-100" style="height: 20px; min-width: 200px">
<div
class="progress-bar progress-bar-striped bg-primary force-gpu"
id="transmission_progress"
role="progressbar"
:style="{ width: state.arq_transmission_percent + '%' }"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
></div>
<p
class="justify-content-center m-0 d-flex position-absolute w-100 text-dark"
>
Message Progress
</p>
</div>
<div
hidden
class="progress mb-0 rounded-0 rounded-bottom"
style="height: 10px"
>
<div
class="progress-bar progress-bar-striped bg-warning"
id="transmission_timeleft"
role="progressbar"
:style="{
width: state.arq_seconds_until_timeout_percent + '%',
}"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
>
<p
class="justify-content-center m-0 d-flex position-absolute w-100 text-dark"
>
timeout in {{ state.arq_seconds_until_timeout }}s
</p>
</div> </div>
<div class="col-lg-4"> </div>
<div style="margin-right: 2px"> </div>
<div </div>
class="progress w-100" </nav>
style="height: 20px; min-width: 200px"
>
<div
class="progress-bar progress-bar-striped bg-primary force-gpu"
id="transmission_progress"
role="progressbar"
:style="{ width: state.arq_transmission_percent + '%' }"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
></div>
<p
class="justify-content-center m-0 d-flex position-absolute w-100 text-dark"
>
Message Progress
</p>
</div>
<div
hidden
class="progress mb-0 rounded-0 rounded-bottom"
style="height: 10px"
>
<div
class="progress-bar progress-bar-striped bg-warning"
id="transmission_timeleft"
role="progressbar"
:style="{
width: state.arq_seconds_until_timeout_percent + '%',
}"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
>
<p
class="justify-content-center m-0 d-flex position-absolute w-100 text-dark"
>
timeout in {{ state.arq_seconds_until_timeout }}s
</p>
</div>
</div>
</div>
</div>
</nav>
</template> </template>

139
freedata_gui/src/components/main_left_navbar.vue
View file

@ -1,28 +1,25 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from "vue";
import main_modem_healthcheck from "./main_modem_healthcheck.vue"; import main_modem_healthcheck from "./main_modem_healthcheck.vue";
import { getOverallHealth } from "../js/eventHandler.js"; import { getOverallHealth } from "../js/eventHandler.js";
const isTextVisible = ref(false); // Initially, the text is invisible const isTextVisible = ref(false); // Initially, the text is invisible
function toggleTextVisibility() { function toggleTextVisibility() {
isTextVisible.value = !isTextVisible.value; // Toggle the visibility isTextVisible.value = !isTextVisible.value; // Toggle the visibility
} }
</script> </script>
<template> <template>
<!-- Button --> <!-- Button -->
<div class="btn-group" role="group" aria-label="Basic example"> <div class="btn-group" role="group" aria-label="Basic example">
<button
<button class="btn btn-outline-secondary border-0 ms-2 mb-3" type="button" @click="toggleTextVisibility()"> class="btn btn-outline-secondary border-0 ms-2 mb-3"
<span class=" fw-semibold"><i class="bi bi-text-paragraph"></i></span> type="button"
</button> @click="toggleTextVisibility()"
</div> >
<span class="fw-semibold"><i class="bi bi-text-paragraph"></i></span>
</button>
</div>
<a <a
class="btn border btn-outline-secondary list-group-item rounded-3" class="btn border btn-outline-secondary list-group-item rounded-3"
@ -39,70 +36,66 @@ function toggleTextVisibility() {
" "
><i class="h3 bi bi-activity"></i> ><i class="h3 bi bi-activity"></i>
<span class="ms-2" v-if="isTextVisible">Healtcheck</span> <span class="ms-2" v-if="isTextVisible">Healtcheck</span>
</a> </a>
<div <div
class="list-group bg-body-secondary" class="list-group bg-body-secondary"
id="main-list-tab" id="main-list-tab"
role="tablist" role="tablist"
style="margin-top: 100px" style="margin-top: 100px"
@click="loadAllData"
>
<a
class="list-group-item list-group-item-dark list-group-item-action border-0 rounded-3 mb-2 active"
id="list-grid-list"
data-bs-toggle="list"
href="#list-grid"
role="tab"
aria-controls="list-grid"
title="Grid"
>
<i class="bi bi-grid h3"></i>
<span class="ms-2" v-if="isTextVisible">Home</span>
</a>
<a
class="list-group-item list-group-item-dark list-group-item-action border-0 rounded-3 mb-2"
id="list-chat-list"
data-bs-toggle="list"
href="#list-chat"
role="tab"
aria-controls="list-chat"
title="Chat"
@click="getFreedataMessages"
>
<i class="bi bi-chat-text h3"></i>
<span class="ms-2" v-if="isTextVisible">RF Chat</span>
</a>
<a
class="list-group-item list-group-item-dark list-group-item-action d-none border-0 rounded-3 mb-2"
id="list-mesh-list"
data-bs-toggle="list"
href="#list-mesh"
role="tab"
aria-controls="list-mesh"
>
<i class="bi bi-rocket h3"></i>
<span class="ms-2" v-if="isTextVisible">Mesh</span>
</a>
<a
class="list-group-item list-group-item-dark list-group-item-action border-0 rounded-3 mb-2"
id="list-settings-list"
data-bs-toggle="list"
href="#list-settings"
role="tab"
aria-controls="list-settings"
title="Settings"
@click="loadAllData" @click="loadAllData"
> >
<i class="bi bi-gear-wide-connected h3"></i> <a
<span class="ms-2" v-if="isTextVisible">Settings</span> class="list-group-item list-group-item-dark list-group-item-action border-0 rounded-3 mb-2 active"
</a> id="list-grid-list"
</div> data-bs-toggle="list"
href="#list-grid"
role="tab"
aria-controls="list-grid"
title="Grid"
>
<i class="bi bi-grid h3"></i>
<span class="ms-2" v-if="isTextVisible">Home</span>
</a>
<a
class="list-group-item list-group-item-dark list-group-item-action border-0 rounded-3 mb-2"
id="list-chat-list"
data-bs-toggle="list"
href="#list-chat"
role="tab"
aria-controls="list-chat"
title="Chat"
@click="getFreedataMessages"
>
<i class="bi bi-chat-text h3"></i>
<span class="ms-2" v-if="isTextVisible">RF Chat</span>
</a>
<a
class="list-group-item list-group-item-dark list-group-item-action d-none border-0 rounded-3 mb-2"
id="list-mesh-list"
data-bs-toggle="list"
href="#list-mesh"
role="tab"
aria-controls="list-mesh"
>
<i class="bi bi-rocket h3"></i>
<span class="ms-2" v-if="isTextVisible">Mesh</span>
</a>
<a
class="list-group-item list-group-item-dark list-group-item-action border-0 rounded-3 mb-2"
id="list-settings-list"
data-bs-toggle="list"
href="#list-settings"
role="tab"
aria-controls="list-settings"
title="Settings"
@click="loadAllData"
>
<i class="bi bi-gear-wide-connected h3"></i>
<span class="ms-2" v-if="isTextVisible">Settings</span>
</a>
</div>
</template> </template>

3
freedata_gui/src/components/main_main_screen.vue
View file

@ -1,2 +1 @@
<template> <template></template>
</template>

249
freedata_gui/src/components/mesh.vue
View file

@ -1,131 +1,126 @@
<template> <template>
<div class="container">
<nav>
<div class="nav nav-tabs" id="nav-tab-mesh" role="tablist-mesh">
<button
class="nav-link active"
id="nav-route-tab"
data-bs-toggle="tab"
data-bs-target="#nav-route"
type="button"
role="tab"
aria-controls="nav-route"
aria-selected="true"
>
Routes
</button>
<button
class="nav-link"
id="nav-signaling-tab"
data-bs-toggle="tab"
data-bs-target="#nav-signaling"
type="button"
role="tab"
aria-controls="nav-signaling"
aria-selected="false"
>
Signaling
</button>
<button
class="nav-link"
id="nav-actions-tab"
data-bs-toggle="tab"
data-bs-target="#nav-actions"
type="button"
role="tab"
aria-controls="nav-actions"
aria-selected="false"
>
Actions
</button>
</div>
</nav>
<div class="container"> <div class="tab-content d-none" id="nav-tabContent-Mesh">
<nav> <div
<div class="nav nav-tabs" id="nav-tab-mesh" role="tablist-mesh"> class="tab-pane fade show active vw-100 vh-90 overflow-auto"
<button id="nav-route"
class="nav-link active" role="tabpanel"
id="nav-route-tab" aria-labelledby="nav-route-tab"
data-bs-toggle="tab" >
data-bs-target="#nav-route" <div class="container-fluid">
type="button" <div
role="tab" class="table-responsive overflow-auto"
aria-controls="nav-route" style="max-width: 99vw; max-height: 99vh"
aria-selected="true" >
> <table class="table table-hover table-sm">
Routes <thead>
</button> <tr>
<button <th scope="col">Timestamp</th>
class="nav-link" <th scope="col">DXCall</th>
id="nav-signaling-tab" <th scope="col">Router</th>
data-bs-toggle="tab" <th scope="col">Hops</th>
data-bs-target="#nav-signaling" <th scope="col">Score</th>
type="button" <th scope="col">SNR</th>
role="tab" </tr>
aria-controls="nav-signaling" </thead>
aria-selected="false" <tbody id="mesh-table"></tbody>
> </table>
Signaling </div>
</button> </div>
<button </div>
class="nav-link" <div
id="nav-actions-tab" class="tab-pane fade"
data-bs-toggle="tab" id="nav-signaling"
data-bs-target="#nav-actions" role="tabpanel"
type="button" aria-labelledby="nav-signaling-tab"
role="tab" >
aria-controls="nav-actions" <div class="container-fluid">
aria-selected="false" <div
> class="table-responsive overflow-auto"
Actions style="max-width: 99vw; max-height: 99vh"
</button> >
</div> <table class="table table-hover table-sm">
</nav> <thead>
<tr>
<th scope="col">Timestamp</th>
<th scope="col">Destination</th>
<th scope="col">Origin</th>
<th scope="col">Frametype</th>
<th scope="col">Payload</th>
<th scope="col">Attempt</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody id="mesh-signalling-table"></tbody>
</table>
</div>
</div>
</div>
<div class="tab-content d-none" id="nav-tabContent-Mesh"> <div
<div class="tab-pane fade"
class="tab-pane fade show active vw-100 vh-90 overflow-auto" id="nav-actions"
id="nav-route" role="tabpanel-mesh"
role="tabpanel" aria-labelledby="nav-actions-tab"
aria-labelledby="nav-route-tab" >
> <div class="input-group mt-1">
<div class="container-fluid"> <input
<div type="text"
class="table-responsive overflow-auto" class="form-control"
style="max-width: 99vw; max-height: 99vh" style="max-width: 6rem; text-transform: uppercase"
> placeholder="DXcall"
<table class="table table-hover table-sm"> pattern="[A-Z]*"
<thead> id="dxCallMesh"
<tr> maxlength="11"
<th scope="col">Timestamp</th> aria-label="Input group"
<th scope="col">DXCall</th> aria-describedby="btnGroupAddon"
<th scope="col">Router</th> />
<th scope="col">Hops</th> <button id="transmit_mesh_ping" type="button" class="btn btn-primary">
<th scope="col">Score</th> mesh ping
<th scope="col">SNR</th> </button>
</tr> </div>
</thead> </div>
<tbody id="mesh-table"></tbody> </div>
</table> </div>
</div>
</div>
</div>
<div
class="tab-pane fade"
id="nav-signaling"
role="tabpanel"
aria-labelledby="nav-signaling-tab"
>
<div class="container-fluid">
<div
class="table-responsive overflow-auto"
style="max-width: 99vw; max-height: 99vh"
>
<table class="table table-hover table-sm">
<thead>
<tr>
<th scope="col">Timestamp</th>
<th scope="col">Destination</th>
<th scope="col">Origin</th>
<th scope="col">Frametype</th>
<th scope="col">Payload</th>
<th scope="col">Attempt</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody id="mesh-signalling-table"></tbody>
</table>
</div>
</div>
</div>
<div
class="tab-pane fade"
id="nav-actions"
role="tabpanel-mesh"
aria-labelledby="nav-actions-tab"
>
<div class="input-group mt-1">
<input
type="text"
class="form-control"
style="max-width: 6rem; text-transform: uppercase"
placeholder="DXcall"
pattern="[A-Z]*"
id="dxCallMesh"
maxlength="11"
aria-label="Input group"
aria-describedby="btnGroupAddon"
/>
<button
id="transmit_mesh_ping"
type="button"
class="btn btn-primary"
>
mesh ping
</button>
</div>
</div>
</div>
</div>
</template> </template>