mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 08:04:33 +00:00
adjusted and partially simplified chat related code
This commit is contained in:
DJ2LS
parent
0ca64f284a
commit
0b9c7084f2
6 changed files with 130 additions and 837 deletions
|
|
@ -118,40 +118,30 @@ watch(
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container m-0 p-0">
|
<div class="container-fluid">
|
||||||
<div class="row h-100 ms-0 mt-0 me-1">
|
<div class="row">
|
||||||
<div class="col-3 m-0 p-0 h-100 bg-light">
|
<!-- Chat Conversations -->
|
||||||
<!------Chats area ---------------------------------------------------------------------->
|
<div class="col-3 bg-light p-0">
|
||||||
<div class="container-fluid vh-100 overflow-auto m-0 p-0">
|
<div class="container-fluid overflow-auto p-0">
|
||||||
<chat_conversations />
|
<chat_conversations />
|
||||||
</div>
|
</div>
|
||||||
<div class="h-100">
|
<div class="list-group overflow-auto" id="list-tab-chat" role="tablist">
|
||||||
<div
|
|
||||||
class="list-group overflow-auto"
|
|
||||||
id="list-tab-chat"
|
|
||||||
role="tablist"
|
|
||||||
style="height: calc(100vh - 70px)"
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-9 border-start vh-100 p-0">
|
|
||||||
<div class="d-flex flex-column vh-100">
|
<!-- Chat Messages -->
|
||||||
|
<div class="col-9 border-start p-0">
|
||||||
|
<div class="d-flex flex-column">
|
||||||
<!-- Top Navbar -->
|
<!-- Top Navbar -->
|
||||||
<nav class="navbar sticky-top z-0 bg-body-tertiary shadow">
|
<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">
|
<div class="input-group mb-0 p-0 w-25">
|
||||||
<button type="button" class="btn btn-outline-secondary" disabled>
|
<button type="button" class="btn btn-outline-secondary" disabled>
|
||||||
Beacons
|
Beacons
|
||||||
</button>
|
</button>
|
||||||
|
<div class="form-floating border border-secondary-subtle border-1 rounded-end">
|
||||||
<div
|
<Bar :data="beaconHistogramData" :options="beaconHistogramOptions" width="300" height="50" />
|
||||||
class="form-floating border border-secondary-subtle border-1 rounded-end"
|
|
||||||
>
|
|
||||||
<Bar
|
|
||||||
:data="beaconHistogramData"
|
|
||||||
:options="beaconHistogramOptions"
|
|
||||||
width="300"
|
|
||||||
height="50"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
@ -161,487 +151,10 @@ watch(
|
||||||
<chat_messages />
|
<chat_messages />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- New Message Area -->
|
||||||
<chat_new_message />
|
<chat_new_message />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!------ new message area ---------------------------------------------------------------------->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- user modal -->
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="modal fade"
|
|
||||||
id="userModal"
|
|
||||||
tabindex="-1"
|
|
||||||
aria-labelledby="userModalLabel"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<div class="modal-dialog" style="max-width: 600px">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="card mb-1 border-0">
|
|
||||||
<div class="row g-0">
|
|
||||||
<div class="col-md-4">
|
|
||||||
<div class="row position-relative p-0 m-0">
|
|
||||||
<div class="col p-0 m-0">
|
|
||||||
<img
|
|
||||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktcGVyc29uLWJvdW5kaW5nLWJveCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMS41IDFhLjUuNSAwIDAgMC0uNS41djNhLjUuNSAwIDAgMS0xIDB2LTNBMS41IDEuNSAwIDAgMSAxLjUgMGgzYS41LjUgMCAwIDEgMCAxaC0zek0xMSAuNWEuNS41IDAgMCAxIC41LS41aDNBMS41IDEuNSAwIDAgMSAxNiAxLjV2M2EuNS41IDAgMCAxLTEgMHYtM2EuNS41IDAgMCAwLS41LS41aC0zYS41LjUgMCAwIDEtLjUtLjV6TS41IDExYS41LjUgMCAwIDEgLjUuNXYzYS41LjUgMCAwIDAgLjUuNWgzYS41LjUgMCAwIDEgMCAxaC0zQTEuNSAxLjUgMCAwIDEgMCAxNC41di0zYS41LjUgMCAwIDEgLjUtLjV6bTE1IDBhLjUuNSAwIDAgMSAuNS41djNhMS41IDEuNSAwIDAgMS0xLjUgMS41aC0zYS41LjUgMCAwIDEgMC0xaDNhLjUuNSAwIDAgMCAuNS0uNXYtM2EuNS41IDAgMCAxIC41LS41eiIvPgogIDxwYXRoIGQ9Ik0zIDE0cy0xIDAtMS0xIDEtNCA2LTQgNiAzIDYgNC0xIDEtMSAxSDN6bTgtOWEzIDMgMCAxIDEtNiAwIDMgMyAwIDAgMSA2IDB6Ii8+Cjwvc3ZnPg=="
|
|
||||||
class="img-fluid rounded-start w-100"
|
|
||||||
alt="..."
|
|
||||||
id="user_info_image"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="col position-absolute image-overlay text-white justify-content-center align-items-center d-flex align-middle h-100 opacity-0"
|
|
||||||
id="userImageSelector"
|
|
||||||
>
|
|
||||||
<i class="bi bi-upload" style="font-size: 2.2rem"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-8">
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="input-group input-group-sm mb-1">
|
|
||||||
<span class="input-group-text"
|
|
||||||
><i class="bi bi-pass"></i
|
|
||||||
></span>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
placeholder="Callsign"
|
|
||||||
id="user_info_callsign"
|
|
||||||
aria-label="Call"
|
|
||||||
aria-describedby="basic-addon1"
|
|
||||||
/>
|
|
||||||
<span class="input-group-text"
|
|
||||||
><i class="bi bi-person-vcard"></i
|
|
||||||
></span>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
placeholder="name"
|
|
||||||
id="user_info_name"
|
|
||||||
aria-label="Name"
|
|
||||||
aria-describedby="basic-addon1"
|
|
||||||
/>
|
|
||||||
<span class="input-group-text"
|
|
||||||
><i class="bi bi-sunrise"></i
|
|
||||||
></span>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
placeholder="age"
|
|
||||||
id="user_info_age"
|
|
||||||
aria-label="age"
|
|
||||||
aria-describedby="basic-addon1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input-group input-group-sm mb-1">
|
|
||||||
<span class="input-group-text"
|
|
||||||
><i class="bi bi-house"></i
|
|
||||||
></span>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
placeholder="Location"
|
|
||||||
id="user_info_location"
|
|
||||||
aria-label="Name"
|
|
||||||
aria-describedby="basic-addon1"
|
|
||||||
/>
|
|
||||||
<span class="input-group-text"
|
|
||||||
><i class="bi bi-pin-map"></i
|
|
||||||
></span>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
placeholder="Grid"
|
|
||||||
id="user_info_gridsquare"
|
|
||||||
aria-label="Name"
|
|
||||||
aria-describedby="basic-addon1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input-group input-group-sm mb-1">
|
|
||||||
<span class="input-group-text"
|
|
||||||
><i class="bi bi-projector"></i
|
|
||||||
></span>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
placeholder="Radio"
|
|
||||||
id="user_info_radio"
|
|
||||||
aria-label="Name"
|
|
||||||
aria-describedby="basic-addon1"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<span class="input-group-text"
|
|
||||||
><i class="bi bi-broadcast-pin"></i
|
|
||||||
></span>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
placeholder="Antenna"
|
|
||||||
id="user_info_antenna"
|
|
||||||
aria-label="Name"
|
|
||||||
aria-describedby="basic-addon1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input-group input-group-sm mb-1">
|
|
||||||
<span class="input-group-text"
|
|
||||||
><i class="bi bi-envelope"></i
|
|
||||||
></span>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
placeholder="Email"
|
|
||||||
id="user_info_email"
|
|
||||||
aria-label="Name"
|
|
||||||
aria-describedby="basic-addon1"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<span class="input-group-text"
|
|
||||||
><i class="bi bi-globe"></i
|
|
||||||
></span>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
placeholder="Website"
|
|
||||||
id="user_info_website"
|
|
||||||
aria-label="Name"
|
|
||||||
aria-describedby="basic-addon1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="input-group input-group-sm mb-1">
|
|
||||||
<span class="input-group-text"
|
|
||||||
><i class="bi bi-info-circle"></i
|
|
||||||
></span>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
placeholder="Comments"
|
|
||||||
id="user_info_comments"
|
|
||||||
aria-label="Comments"
|
|
||||||
aria-describedby="basic-addon1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn btn-primary"
|
|
||||||
data-bs-dismiss="modal"
|
|
||||||
aria-label="Close"
|
|
||||||
id="userInfoSave"
|
|
||||||
>
|
|
||||||
Save & Close
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- dx user modal -->
|
|
||||||
<div
|
|
||||||
class="modal fade"
|
|
||||||
id="userModalDX"
|
|
||||||
tabindex="-1"
|
|
||||||
aria-labelledby="userModalDXLabel"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<div class="modal-dialog" style="max-width: 600px">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="card mb-1 border-0">
|
|
||||||
<div class="row g-0">
|
|
||||||
<div class="col-md-4">
|
|
||||||
<img
|
|
||||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktcGVyc29uLWJvdW5kaW5nLWJveCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMS41IDFhLjUuNSAwIDAgMC0uNS41djNhLjUuNSAwIDAgMS0xIDB2LTNBMS41IDEuNSAwIDAgMSAxLjUgMGgzYS41LjUgMCAwIDEgMCAxaC0zek0xMSAuNWEuNS41IDAgMCAxIC41LS41aDNBMS41IDEuNSAwIDAgMSAxNiAxLjV2M2EuNS41IDAgMCAxLTEgMHYtM2EuNS41IDAgMCAwLS41LS41aC0zYS41LjUgMCAwIDEtLjUtLjV6TS41IDExYS41LjUgMCAwIDEgLjUuNXYzYS41LjUgMCAwIDAgLjUuNWgzYS41LjUgMCAwIDEgMCAxaC0zQTEuNSAxLjUgMCAwIDEgMCAxNC41di0zYS41LjUgMCAwIDEgLjUtLjV6bTE1IDBhLjUuNSAwIDAgMSAuNS41djNhMS41IDEuNSAwIDAgMS0xLjUgMS41aC0zYS41LjUgMCAwIDEgMC0xaDNhLjUuNSAwIDAgMCAuNS0uNXYtM2EuNS41IDAgMCAxIC41LS41eiIvPgogIDxwYXRoIGQ9Ik0zIDE0cy0xIDAtMS0xIDEtNCA2LTQgNiAzIDYgNC0xIDEtMSAxSDN6bTgtOWEzIDMgMCAxIDEtNiAwIDMgMyAwIDAgMSA2IDB6Ii8+Cjwvc3ZnPg=="
|
|
||||||
class="img-fluid rounded-start w-100"
|
|
||||||
alt="..."
|
|
||||||
id="dx_user_info_image"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-8">
|
|
||||||
<div class="card-body">
|
|
||||||
<h5>
|
|
||||||
<span
|
|
||||||
class="badge bg-secondary"
|
|
||||||
id="dx_user_info_callsign"
|
|
||||||
></span>
|
|
||||||
-
|
|
||||||
<span
|
|
||||||
class="badge bg-secondary"
|
|
||||||
id="dx_user_info_name"
|
|
||||||
></span>
|
|
||||||
<span class="badge bg-secondary" id="dx_user_info_age"></span>
|
|
||||||
</h5>
|
|
||||||
|
|
||||||
<ul class="card-text list-unstyled">
|
|
||||||
<li>
|
|
||||||
<strong class="col"><i class="bi bi-house"></i> </strong
|
|
||||||
><span id="dx_user_info_location"></span> (<span
|
|
||||||
id="dx_user_info_gridsquare"
|
|
||||||
></span
|
|
||||||
>)
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong class="col"><i class="bi bi-envelope"></i> </strong
|
|
||||||
><span id="dx_user_info_email"></span>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong class="col"><i class="bi bi-globe"></i> </strong
|
|
||||||
><span id="dx_user_info_website"></span>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong class="col"
|
|
||||||
><i class="bi bi-broadcast-pin"></i> </strong
|
|
||||||
><span id="dx_user_info_antenna"></span>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong class="col"><i class="bi bi-projector"></i> </strong
|
|
||||||
><span id="dx_user_info_radio"></span>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong class="col"
|
|
||||||
><i class="bi bi-info-circle"></i> </strong
|
|
||||||
><span id="dx_user_info_comments"></span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input-group input-group-sm m-0 p-0">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn btn-warning w-75"
|
|
||||||
aria-label="Request"
|
|
||||||
id="requestUserInfo"
|
|
||||||
>
|
|
||||||
Request user data (about 20kBytes!)
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn btn-primary w-25"
|
|
||||||
data-bs-dismiss="modal"
|
|
||||||
aria-label="Close"
|
|
||||||
>
|
|
||||||
Close
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- user shared folder -->
|
|
||||||
<div
|
|
||||||
class="modal fade"
|
|
||||||
id="sharedFolderModal"
|
|
||||||
tabindex="-1"
|
|
||||||
aria-labelledby="sharedFolderModalLabel"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<div class="modal-dialog modal-dialog-scrollable">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h1 class="modal-title fs-5" id="sharedFolderModalLabel">
|
|
||||||
My Shared folder
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn btn-primary"
|
|
||||||
id="openSharedFilesFolder"
|
|
||||||
>
|
|
||||||
<i class="bi bi-archive"></i>
|
|
||||||
</button>
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn-close"
|
|
||||||
data-bs-dismiss="modal"
|
|
||||||
aria-label="Close"
|
|
||||||
></button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-body">
|
|
||||||
<div class="container-fluid p-0">
|
|
||||||
<div class="center mb-1">
|
|
||||||
<div class="badge text-bg-info">
|
|
||||||
<i class="bi bi-info"></i> Change folder in settings!
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="table-responsive">
|
|
||||||
<!-- START OF TABLE FOR SHARED FOLDER -->
|
|
||||||
<table
|
|
||||||
class="table table-sm table-hover table-bordered align-middle"
|
|
||||||
>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th scope="col">#</th>
|
|
||||||
<th scope="col">Name</th>
|
|
||||||
<th scope="col">Type</th>
|
|
||||||
<th scope="col">Size</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody id="sharedFolderTable"></tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- HELP MODAL -->
|
|
||||||
<div
|
|
||||||
class="modal fade"
|
|
||||||
data-bs-backdrop="static"
|
|
||||||
tabindex="-1"
|
|
||||||
id="chatHelpModal"
|
|
||||||
>
|
|
||||||
<div class="modal-dialog modal-dialog-scrollable">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h5 class="modal-title">Chat 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">
|
|
||||||
Welcome to the chat window. Heard stations are listed in the
|
|
||||||
list on the left. Clicking on a station will show messages sent
|
|
||||||
and/or received from the selected station. Additional help is
|
|
||||||
available on various extra features below.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card mb-3">
|
|
||||||
<div class="card-body">
|
|
||||||
<button type="button" class="btn btn-sm btn-primary ms-2">
|
|
||||||
<i class="bi bi-person" style="font-size: 1.2rem"></i>
|
|
||||||
</button>
|
|
||||||
<p class="card-text">
|
|
||||||
Set your station information and picture. This information can
|
|
||||||
be requested by a remote station and can be enabled/disabled via
|
|
||||||
settings.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card mb-3">
|
|
||||||
<div class="card-body">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn btn-sm btn-outline-secondary ms-2"
|
|
||||||
>
|
|
||||||
<i class="bi bi-person" style="font-size: 1.2rem"></i>
|
|
||||||
</button>
|
|
||||||
<p class="card-text">
|
|
||||||
Request the selected station's information.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card mb-3">
|
|
||||||
<div class="card-body">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn btn-sm btn-outline-secondary ms-2"
|
|
||||||
>
|
|
||||||
<i class="bi bi-files" style="font-size: 1.2rem"></i>
|
|
||||||
</button>
|
|
||||||
<p class="card-text">
|
|
||||||
Request the selected station's shared file(s) list. Clicking
|
|
||||||
<button type="button" class="btn btn-sm btn-primary ms-2">
|
|
||||||
<i class="bi bi-files" style="font-size: 1.2rem"></i>
|
|
||||||
</button>
|
|
||||||
will allow you to preview your shared files. Shared file can be
|
|
||||||
enabled/disabled in settings.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card mb-3">
|
|
||||||
<div class="card-body">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn btn-small btn-outline-primary dropdown-toggle me-2"
|
|
||||||
>
|
|
||||||
<i class="bi bi-funnel-fill"></i>
|
|
||||||
</button>
|
|
||||||
<p class="card-text">
|
|
||||||
The filter button allows you to show or hide certain types of
|
|
||||||
messages. A lot of data is logged and this allows you to modify
|
|
||||||
what is shown. By default sent and received messages and ping
|
|
||||||
acknowlegements are displayed.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- dx user shared folder -->
|
|
||||||
<div
|
|
||||||
class="modal fade"
|
|
||||||
id="sharedFolderModalDX"
|
|
||||||
tabindex="-1"
|
|
||||||
aria-labelledby="sharedFolderModalDXLabel"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<div class="modal-dialog modal-dialog-scrollable">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h1 class="modal-title fs-5" id="sharedFolderModalDXLabel">
|
|
||||||
Shared folder
|
|
||||||
</h1>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn btn-primary m-2"
|
|
||||||
aria-label="Request"
|
|
||||||
id="requestSharedFolderList"
|
|
||||||
>
|
|
||||||
<i class="bi bi-arrow-repeat"></i>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn-close"
|
|
||||||
data-bs-dismiss="modal"
|
|
||||||
aria-label="Close"
|
|
||||||
></button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<div class="table-responsive">
|
|
||||||
<!-- START OF TABLE FOR SHARED FOLDER DX -->
|
|
||||||
<table
|
|
||||||
class="table table-sm table-hover table-bordered align-middle"
|
|
||||||
>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th scope="col">#</th>
|
|
||||||
<th scope="col">Name</th>
|
|
||||||
<th scope="col">Type</th>
|
|
||||||
<th scope="col">Size</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody id="sharedFolderTableDX"></tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<div class="input-group input-group-sm m-0 p-0"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,21 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { setActivePinia } from "pinia";
|
import { setActivePinia } from "pinia";
|
||||||
import pinia from "../store/index";
|
import pinia from "../store/index";
|
||||||
setActivePinia(pinia);
|
|
||||||
|
|
||||||
import { useChatStore } from "../store/chatStore.js";
|
import { useChatStore } from "../store/chatStore.js";
|
||||||
import { getBeaconDataByCallsign } from "../js/api.js";
|
import { getBeaconDataByCallsign } from "../js/api.js";
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
import { ref, computed } from "vue";
|
setActivePinia(pinia);
|
||||||
|
|
||||||
const chat = useChatStore(pinia);
|
const chat = useChatStore(pinia);
|
||||||
|
const newChatCall = ref(null);
|
||||||
|
|
||||||
function chatSelected(callsign) {
|
function chatSelected(callsign) {
|
||||||
chat.selectedCallsign = callsign.toUpperCase();
|
chat.selectedCallsign = callsign.toUpperCase();
|
||||||
// scroll message container to bottom
|
|
||||||
chat.triggerScrollToBottom();
|
chat.triggerScrollToBottom();
|
||||||
|
|
||||||
processBeaconData(callsign);
|
processBeaconData(callsign);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function processBeaconData(callsign) {
|
async function processBeaconData(callsign) {
|
||||||
// fetch beacon data when selecting a callsign
|
|
||||||
let beacons = await getBeaconDataByCallsign(callsign);
|
let beacons = await getBeaconDataByCallsign(callsign);
|
||||||
chat.beaconLabelArray = beacons.map((entry) => entry.timestamp);
|
chat.beaconLabelArray = beacons.map((entry) => entry.timestamp);
|
||||||
chat.beaconDataArray = beacons.map((entry) => entry.snr);
|
chat.beaconDataArray = beacons.map((entry) => entry.snr);
|
||||||
|
|
@ -33,8 +29,6 @@ function getDateTime(timestamp) {
|
||||||
return `${hours}:${minutes}`;
|
return `${hours}:${minutes}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
const newChatCall = ref(null);
|
|
||||||
|
|
||||||
function newChat() {
|
function newChat() {
|
||||||
let callsign = this.newChatCall.value;
|
let callsign = this.newChatCall.value;
|
||||||
callsign = callsign.toUpperCase().trim();
|
callsign = callsign.toUpperCase().trim();
|
||||||
|
|
@ -42,8 +36,9 @@ function newChat() {
|
||||||
this.newChatCall.value = "";
|
this.newChatCall.value = "";
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<nav class="navbar sticky-top bg-body-tertiary shadow">
|
<nav class="navbar sticky-top bg-body-tertiary border-bottom p-1">
|
||||||
<button
|
<button
|
||||||
class="btn btn-outline-primary w-100"
|
class="btn btn-outline-primary w-100"
|
||||||
data-bs-target="#newChatModal"
|
data-bs-target="#newChatModal"
|
||||||
|
|
@ -69,7 +64,7 @@ function newChat() {
|
||||||
data-bs-toggle="list"
|
data-bs-toggle="list"
|
||||||
:href="`#list-${callsign}-messages`"
|
:href="`#list-${callsign}-messages`"
|
||||||
role="tab"
|
role="tab"
|
||||||
aria-controls="list-{{callsign}}-messages"
|
:aria-controls="`list-${callsign}-messages`"
|
||||||
@click="chatSelected(callsign)"
|
@click="chatSelected(callsign)"
|
||||||
>
|
>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ function getDateTime(timestampRaw) {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="tab-content p-3" id="nav-tabContent-chat-messages">
|
<div class="tab-content p-3 vh-100" id="nav-tabContent-chat-messages">
|
||||||
<template
|
<template
|
||||||
v-for="(details, callsign, key) in chat.callsign_list"
|
v-for="(details, callsign, key) in chat.callsign_list"
|
||||||
:key="callsign"
|
:key="callsign"
|
||||||
|
|
|
||||||
|
|
@ -204,7 +204,7 @@ const speedChartData = computed(() => ({
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
|
|
||||||
<nav class="navbar sticky-bottom bg-body-tertiary border-top mb-5">
|
<nav class="navbar sticky-bottom bg-body-tertiary border-top">
|
||||||
<div class="container-fluid p-0">
|
<div class="container-fluid p-0">
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -18,79 +18,47 @@ import { loadAllData } from "../js/eventHandler";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<!-------------------------------- 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">
|
<div class="toast-container position-absolute top-0 end-0 p-3" id="mainToastContainer"></div>
|
||||||
<div
|
</div>
|
||||||
class="toast-container position-absolute top-0 end-0 p-3"
|
|
||||||
id="mainToastContainer"
|
|
||||||
></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
|
<div class="collapse collapse-horizontal show" id="collapseLeftNavbar">
|
||||||
class="collapse collapse-horizontal show"
|
|
||||||
id="collapseLeftNavbar"
|
|
||||||
>
|
|
||||||
<main_left_navbar />
|
<main_left_navbar />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
<div class="col min-vh-100 m-0 p-0">
|
<div class="col min-vh-100 m-0 p-0">
|
||||||
<!--
|
|
||||||
<main_top_navbar />
|
|
||||||
-->
|
|
||||||
<div class="tab-content" id="nav-tabContent-settings">
|
<div class="tab-content" id="nav-tabContent-settings">
|
||||||
<div
|
<!-- Tab Panes -->
|
||||||
class="tab-pane fade"
|
<div class="tab-pane fade" id="list-home" role="tabpanel" aria-labelledby="list-home-list"></div>
|
||||||
id="list-home"
|
<div class="tab-pane fade d-none" id="list-mesh" role="tabpanel" aria-labelledby="list-mesh-list">
|
||||||
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 />
|
<mesh />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="tab-pane fade show active" id="list-grid" role="tabpanel" aria-labelledby="list-grid-list">
|
||||||
<div
|
|
||||||
class="tab-pane fade show active"
|
|
||||||
id="list-grid"
|
|
||||||
role="tabpanel"
|
|
||||||
aria-labelledby="list-grid-list"
|
|
||||||
>
|
|
||||||
<Dynamic_components />
|
<Dynamic_components />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="tab-pane fade" id="list-chat" role="tabpanel" aria-labelledby="list-chat-list">
|
||||||
<div
|
|
||||||
class="tab-pane fade"
|
|
||||||
id="list-chat"
|
|
||||||
role="tabpanel"
|
|
||||||
aria-labelledby="list-chat-list"
|
|
||||||
>
|
|
||||||
<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">
|
||||||
<!--<main_footer_navbar />-->
|
<!--<main_footer_navbar />-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<main_modals />
|
||||||
|
|
||||||
<main_modals />
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -8,254 +8,71 @@ const state = useStateStore(pinia);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<nav class="navbar navbar-expand-xl bg-body-tertiary border-top p-2">
|
<nav class="navbar navbar-expand-xl bg-body-tertiary border-top p-2">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="btn-toolbar" role="toolbar">
|
<div class="btn-toolbar" role="toolbar">
|
||||||
<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-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">
|
||||||
class="btn btn-sm btn-secondary me-1"
|
|
||||||
v-bind:class="{
|
|
||||||
'btn-danger': state.ptt_state == true,
|
|
||||||
'btn-secondary': state.ptt_state == false,
|
|
||||||
}"
|
|
||||||
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>
|
<i class="bi bi-broadcast-pin" style="font-size: 0.8rem"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<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">
|
||||||
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="{
|
|
||||||
'btn-danger': state.busy_state === true,
|
|
||||||
'btn-secondary': state.busy_state === false,
|
|
||||||
}"
|
|
||||||
data-bs-title="Modem state"
|
|
||||||
disabled
|
|
||||||
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
|
|
||||||
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"
|
|
||||||
v-bind:class="{
|
|
||||||
'btn-secondary': state.arq_session_state === 'disconnected',
|
|
||||||
'btn-warning': state.arq_session_state === 'connected',
|
|
||||||
}"
|
|
||||||
disabled
|
|
||||||
style="pointer-events: auto"
|
|
||||||
data-bs-title="Session state"
|
|
||||||
>
|
|
||||||
<i class="bi bi-arrow-left-right" style="font-size: 0.8rem"></i>
|
|
||||||
</button>
|
|
||||||
-->
|
|
||||||
<!--
|
|
||||||
<button
|
|
||||||
class="btn btn-sm btn-secondary me-1"
|
|
||||||
id="arq_state"
|
|
||||||
type="button"
|
|
||||||
data-bs-placement="top"
|
|
||||||
data-bs-toggle="tooltip"
|
|
||||||
data-bs-trigger="hover"
|
|
||||||
data-bs-title="Data channel state"
|
|
||||||
v-bind:class="{
|
|
||||||
'btn-secondary': state.arq_state === 'False',
|
|
||||||
'btn-warning': state.arq_state === 'True',
|
|
||||||
}"
|
|
||||||
disabled
|
|
||||||
style="pointer-events: auto"
|
|
||||||
>
|
|
||||||
<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>
|
|
||||||
-->
|
|
||||||
<!--
|
|
||||||
<button
|
|
||||||
class="btn btn-sm btn-secondary disabled me-3"
|
|
||||||
type="button"
|
|
||||||
data-bs-placement="top"
|
|
||||||
data-bs-toggle="tooltip"
|
|
||||||
data-bs-trigger="hover"
|
|
||||||
data-bs-html="true"
|
|
||||||
v-bind:class="{
|
|
||||||
'btn-warning': state.channel_busy === true,
|
|
||||||
'btn-secondary': state.channel_busy === false,
|
|
||||||
}"
|
|
||||||
style="pointer-events: auto"
|
|
||||||
data-bs-title="Channel busy"
|
|
||||||
>
|
|
||||||
<i class="bi bi-hourglass"></i>
|
|
||||||
</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" 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">
|
||||||
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
|
{{ 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" type="button" title="Speed level">
|
||||||
class="btn btn-sm btn-secondary me-0"
|
|
||||||
type="button"
|
|
||||||
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" type="button" data-bs-placement="top" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-html="true" data-bs-titel="speed level">
|
||||||
class="btn btn-sm btn-secondary me-4 disabled"
|
<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>
|
||||||
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"
|
|
||||||
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>
|
</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" type="button" title="Bytes transferred">
|
||||||
class="btn btn-sm btn-secondary me-0"
|
|
||||||
type="button"
|
|
||||||
title="Bytes transfered"
|
|
||||||
>
|
|
||||||
<i class="bi bi-file-earmark-binary" style="font-size: 1rem"></i>
|
<i class="bi bi-file-earmark-binary" style="font-size: 1rem"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<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">
|
||||||
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 }}
|
{{ 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" 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">
|
||||||
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>
|
<i class="bi bi-file-earmark-binary" style="font-size: 1rem"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<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">
|
||||||
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 }}
|
{{ state.dxcallsign }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-lg-4">
|
<div class="col-lg-4">
|
||||||
<div style="margin-right: 2px">
|
<div style="margin-right: 2px">
|
||||||
<div class="progress w-100" style="height: 20px; min-width: 200px">
|
<div class="progress w-100" style="height: 20px; min-width: 200px">
|
||||||
<div
|
<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>
|
||||||
class="progress-bar progress-bar-striped bg-primary force-gpu"
|
<p class="justify-content-center m-0 d-flex position-absolute w-100 text-dark">Message Progress</p>
|
||||||
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>
|
||||||
|
|
||||||
<div
|
<div hidden class="progress mb-0 rounded-0 rounded-bottom" style="height: 10px">
|
||||||
hidden
|
<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">
|
||||||
class="progress mb-0 rounded-0 rounded-bottom"
|
<p class="justify-content-center m-0 d-flex position-absolute w-100 text-dark">timeout in {{ state.arq_seconds_until_timeout }}s</p>
|
||||||
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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue