mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 08:04:33 +00:00
[CodeFactor] Apply fixes
This commit is contained in:
codefactor-io
parent
0b9c7084f2
commit
f27e2f7e68
4 changed files with 270 additions and 123 deletions
|
|
@ -118,43 +118,53 @@ watch(
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<!-- Chat Conversations -->
|
||||
<div class="col-3 bg-light p-0">
|
||||
<div class="container-fluid overflow-auto p-0">
|
||||
<chat_conversations />
|
||||
</div>
|
||||
<div class="list-group overflow-auto" id="list-tab-chat" role="tablist">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chat Messages -->
|
||||
<div class="col-9 border-start p-0">
|
||||
<div class="d-flex flex-column">
|
||||
<!-- Top Navbar -->
|
||||
<nav class="navbar sticky-top z-0 bg-body-tertiary border-bottom p-1">
|
||||
<h4 class="p-0 m-0">{{ chat.selectedCallsign }}</h4>
|
||||
|
||||
<div class="input-group mb-0 p-0 w-25">
|
||||
<button type="button" class="btn btn-outline-secondary" disabled>
|
||||
Beacons
|
||||
</button>
|
||||
<div class="form-floating border border-secondary-subtle border-1 rounded-end">
|
||||
<Bar :data="beaconHistogramData" :options="beaconHistogramOptions" width="300" height="50" />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Chat Messages Area -->
|
||||
<div class="flex-grow-1 overflow-auto" ref="messagesContainer">
|
||||
<chat_messages />
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<!-- Chat Conversations -->
|
||||
<div class="col-3 bg-light p-0">
|
||||
<div class="container-fluid overflow-auto p-0">
|
||||
<chat_conversations />
|
||||
</div>
|
||||
<div
|
||||
class="list-group overflow-auto"
|
||||
id="list-tab-chat"
|
||||
role="tablist"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- New Message Area -->
|
||||
<chat_new_message />
|
||||
<!-- Chat Messages -->
|
||||
<div class="col-9 border-start p-0">
|
||||
<div class="d-flex flex-column">
|
||||
<!-- Top Navbar -->
|
||||
<nav class="navbar sticky-top z-0 bg-body-tertiary border-bottom p-1">
|
||||
<h4 class="p-0 m-0">{{ chat.selectedCallsign }}</h4>
|
||||
|
||||
<div class="input-group mb-0 p-0 w-25">
|
||||
<button type="button" class="btn btn-outline-secondary" disabled>
|
||||
Beacons
|
||||
</button>
|
||||
<div
|
||||
class="form-floating border border-secondary-subtle border-1 rounded-end"
|
||||
>
|
||||
<Bar
|
||||
:data="beaconHistogramData"
|
||||
:options="beaconHistogramOptions"
|
||||
width="300"
|
||||
height="50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Chat Messages Area -->
|
||||
<div class="flex-grow-1 overflow-auto" ref="messagesContainer">
|
||||
<chat_messages />
|
||||
</div>
|
||||
|
||||
<!-- New Message Area -->
|
||||
<chat_new_message />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -18,47 +18,72 @@ import { loadAllData } from "../js/eventHandler";
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div aria-live="polite" aria-atomic="true" class="position-relative z-3">
|
||||
<div class="toast-container position-absolute top-0 end-0 p-3" id="mainToastContainer"></div>
|
||||
</div>
|
||||
<div aria-live="polite" aria-atomic="true" class="position-relative z-3">
|
||||
<div
|
||||
class="toast-container position-absolute top-0 end-0 p-3"
|
||||
id="mainToastContainer"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<!-- Collapsible Left Navbar -->
|
||||
<div class="col-auto p-0 bg-body-secondary border-end">
|
||||
<div class="flex-shrink-0 p-3">
|
||||
<div class="collapse collapse-horizontal show" id="collapseLeftNavbar">
|
||||
<main_left_navbar />
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<!-- Collapsible Left Navbar -->
|
||||
<div class="col-auto p-0 bg-body-secondary border-end">
|
||||
<div class="flex-shrink-0 p-3">
|
||||
<div
|
||||
class="collapse collapse-horizontal show"
|
||||
id="collapseLeftNavbar"
|
||||
>
|
||||
<main_left_navbar />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="col min-vh-100 m-0 p-0">
|
||||
<div class="tab-content" id="nav-tabContent-settings">
|
||||
<!-- Tab Panes -->
|
||||
<div class="tab-pane fade" id="list-home" role="tabpanel" aria-labelledby="list-home-list"></div>
|
||||
<div class="tab-pane fade d-none" id="list-mesh" role="tabpanel" aria-labelledby="list-mesh-list">
|
||||
<mesh />
|
||||
<!-- Main Content -->
|
||||
<div class="col min-vh-100 m-0 p-0">
|
||||
<div class="tab-content" id="nav-tabContent-settings">
|
||||
<!-- Tab Panes -->
|
||||
<div
|
||||
class="tab-pane fade"
|
||||
id="list-home"
|
||||
role="tabpanel"
|
||||
aria-labelledby="list-home-list"
|
||||
></div>
|
||||
<div
|
||||
class="tab-pane fade d-none"
|
||||
id="list-mesh"
|
||||
role="tabpanel"
|
||||
aria-labelledby="list-mesh-list"
|
||||
>
|
||||
<mesh />
|
||||
</div>
|
||||
<div
|
||||
class="tab-pane fade show active"
|
||||
id="list-grid"
|
||||
role="tabpanel"
|
||||
aria-labelledby="list-grid-list"
|
||||
>
|
||||
<Dynamic_components />
|
||||
</div>
|
||||
<div
|
||||
class="tab-pane fade"
|
||||
id="list-chat"
|
||||
role="tabpanel"
|
||||
aria-labelledby="list-chat-list"
|
||||
>
|
||||
<chat />
|
||||
</div>
|
||||
<settings_view />
|
||||
<main_footer_navbar />
|
||||
</div>
|
||||
<div class="tab-pane fade show active" id="list-grid" role="tabpanel" aria-labelledby="list-grid-list">
|
||||
<Dynamic_components />
|
||||
</div>
|
||||
<div class="tab-pane fade" id="list-chat" role="tabpanel" aria-labelledby="list-chat-list">
|
||||
<chat />
|
||||
</div>
|
||||
<settings_view />
|
||||
<main_footer_navbar />
|
||||
</div>
|
||||
|
||||
<!-- Footer Area -->
|
||||
<div class="container">
|
||||
<!--<main_footer_navbar />-->
|
||||
<!-- Footer Area -->
|
||||
<div class="container">
|
||||
<!--<main_footer_navbar />-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main_modals />
|
||||
|
||||
<main_modals />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -8,71 +8,184 @@ const state = useStateStore(pinia);
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="navbar navbar-expand-xl bg-body-tertiary border-top p-2">
|
||||
<div class="col">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group btn-group-sm me-1" role="group">
|
||||
<button class="btn btn-sm btn-secondary me-1" :class="{ 'btn-danger': state.ptt_state, 'btn-secondary': !state.ptt_state }" id="ptt_state" type="button" style="pointer-events: auto" disabled data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="PTT trigger state">
|
||||
<i class="bi bi-broadcast-pin" style="font-size: 0.8rem"></i>
|
||||
</button>
|
||||
<nav class="navbar navbar-expand-xl bg-body-tertiary border-top p-2">
|
||||
<div class="col">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group btn-group-sm me-1" role="group">
|
||||
<button
|
||||
class="btn btn-sm btn-secondary me-1"
|
||||
:class="{
|
||||
'btn-danger': state.ptt_state,
|
||||
'btn-secondary': !state.ptt_state,
|
||||
}"
|
||||
id="ptt_state"
|
||||
type="button"
|
||||
style="pointer-events: auto"
|
||||
disabled
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
data-bs-title="PTT trigger state"
|
||||
>
|
||||
<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" :class="{ 'btn-danger': state.busy_state, 'btn-secondary': !state.busy_state }" data-bs-title="Modem state" disabled style="pointer-events: auto">
|
||||
<i class="bi bi-cpu" style="font-size: 0.8rem"></i>
|
||||
</button>
|
||||
</div>
|
||||
<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"
|
||||
:class="{
|
||||
'btn-danger': state.busy_state,
|
||||
'btn-secondary': !state.busy_state,
|
||||
}"
|
||||
data-bs-title="Modem state"
|
||||
disabled
|
||||
style="pointer-events: auto"
|
||||
>
|
||||
<i class="bi bi-cpu" 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 disabled" type="button" data-bs-placement="top" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-title="What's the frequency, Kenneth?" style="pointer-events: auto">
|
||||
{{ state.frequency / 1000 }} kHz
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm me-1" role="group">
|
||||
<button
|
||||
class="btn btn-sm btn-secondary me-4 disabled"
|
||||
type="button"
|
||||
data-bs-placement="top"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-trigger="hover"
|
||||
data-bs-title="What's the frequency, Kenneth?"
|
||||
style="pointer-events: auto"
|
||||
>
|
||||
{{ state.frequency / 1000 }} kHz
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group btn-group-sm me-1" role="group">
|
||||
<button class="btn btn-sm btn-secondary me-0" type="button" title="Speed level">
|
||||
<i class="bi bi-speedometer2" style="font-size: 1rem"></i>
|
||||
</button>
|
||||
<div class="btn-group btn-group-sm me-1" role="group">
|
||||
<button
|
||||
class="btn btn-sm btn-secondary me-0"
|
||||
type="button"
|
||||
title="Speed level"
|
||||
>
|
||||
<i class="bi bi-speedometer2" style="font-size: 1rem"></i>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-sm btn-secondary me-4 disabled" type="button" data-bs-placement="top" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-html="true" data-bs-titel="speed level">
|
||||
<i class="bi" :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 }" style="font-size: 1rem"></i>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-sm btn-secondary me-4 disabled"
|
||||
type="button"
|
||||
data-bs-placement="top"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-trigger="hover"
|
||||
data-bs-html="true"
|
||||
data-bs-titel="speed level"
|
||||
>
|
||||
<i
|
||||
class="bi"
|
||||
: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,
|
||||
}"
|
||||
style="font-size: 1rem"
|
||||
></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" title="Bytes transferred">
|
||||
<i class="bi bi-file-earmark-binary" style="font-size: 1rem"></i>
|
||||
</button>
|
||||
<div class="btn-group btn-group-sm me-1" role="group">
|
||||
<button
|
||||
class="btn btn-sm btn-secondary me-0"
|
||||
type="button"
|
||||
title="Bytes transferred"
|
||||
>
|
||||
<i class="bi bi-file-earmark-binary" style="font-size: 1rem"></i>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-sm btn-secondary me-4 disabled" type="button" data-bs-placement="top" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-html="true" data-bs-title="total bytes of transmission">
|
||||
{{ state.arq_total_bytes }}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-sm btn-secondary me-4 disabled"
|
||||
type="button"
|
||||
data-bs-placement="top"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-trigger="hover"
|
||||
data-bs-html="true"
|
||||
data-bs-title="total bytes of transmission"
|
||||
>
|
||||
{{ 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" data-bs-title="Current or last connected with station">
|
||||
<i class="bi bi-file-earmark-binary" style="font-size: 1rem"></i>
|
||||
</button>
|
||||
<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"
|
||||
data-bs-title="Current or last connected with station"
|
||||
>
|
||||
<i class="bi bi-file-earmark-binary" style="font-size: 1rem"></i>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-sm btn-secondary disabled me-1" type="button" data-bs-placement="top" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-html="true" data-bs-title="the dxcallsign of the connected station">
|
||||
{{ state.dxcallsign }}
|
||||
</button>
|
||||
</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>
|
||||
<button
|
||||
class="btn btn-sm btn-secondary disabled me-1"
|
||||
type="button"
|
||||
data-bs-placement="top"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-trigger="hover"
|
||||
data-bs-html="true"
|
||||
data-bs-title="the dxcallsign of the connected station"
|
||||
>
|
||||
{{ state.dxcallsign }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import { getFreedataMessages } from "../js/api";
|
|||
import { getRemote } from "../store/settingsStore.js";
|
||||
import { loadAllData } from "../js/eventHandler";
|
||||
|
||||
|
||||
const isTextVisible = ref(false); // Initially, the text is invisible
|
||||
function toggleTextVisibility() {
|
||||
isTextVisible.value = !isTextVisible.value; // Toggle the visibility
|
||||
|
|
|
|||
Loading…
Reference in a new issue