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,530 +118,43 @@ watch(
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container m-0 p-0">
|
||||
<div class="row h-100 ms-0 mt-0 me-1">
|
||||
<div class="col-3 m-0 p-0 h-100 bg-light">
|
||||
<!------Chats area ---------------------------------------------------------------------->
|
||||
<div class="container-fluid vh-100 overflow-auto m-0 p-0">
|
||||
<chat_conversations />
|
||||
</div>
|
||||
<div class="h-100">
|
||||
<div
|
||||
class="list-group overflow-auto"
|
||||
id="list-tab-chat"
|
||||
role="tablist"
|
||||
style="height: calc(100vh - 70px)"
|
||||
></div>
|
||||
</div>
|
||||
<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="col-9 border-start vh-100 p-0">
|
||||
<div class="d-flex flex-column vh-100">
|
||||
<!-- Top Navbar -->
|
||||
<nav class="navbar sticky-top z-0 bg-body-tertiary shadow">
|
||||
<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>
|
||||
|
||||
<chat_new_message />
|
||||
</div>
|
||||
|
||||
<!------ new message area ---------------------------------------------------------------------->
|
||||
<div class="list-group overflow-auto" id="list-tab-chat" role="tablist">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- user modal -->
|
||||
<!-- 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="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>
|
||||
<div class="input-group mb-0 p-0 w-25">
|
||||
<button type="button" class="btn btn-outline-secondary" disabled>
|
||||
Beacons
|
||||
</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 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>
|
||||
<!-- 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>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,21 @@
|
|||
<script setup lang="ts">
|
||||
import { setActivePinia } from "pinia";
|
||||
import pinia from "../store/index";
|
||||
setActivePinia(pinia);
|
||||
|
||||
import { useChatStore } from "../store/chatStore.js";
|
||||
import { getBeaconDataByCallsign } from "../js/api.js";
|
||||
import { ref } from "vue";
|
||||
|
||||
import { ref, computed } from "vue";
|
||||
|
||||
setActivePinia(pinia);
|
||||
const chat = useChatStore(pinia);
|
||||
const newChatCall = ref(null);
|
||||
|
||||
function chatSelected(callsign) {
|
||||
chat.selectedCallsign = callsign.toUpperCase();
|
||||
// scroll message container to bottom
|
||||
chat.triggerScrollToBottom();
|
||||
|
||||
processBeaconData(callsign);
|
||||
}
|
||||
|
||||
async function processBeaconData(callsign) {
|
||||
// fetch beacon data when selecting a callsign
|
||||
let beacons = await getBeaconDataByCallsign(callsign);
|
||||
chat.beaconLabelArray = beacons.map((entry) => entry.timestamp);
|
||||
chat.beaconDataArray = beacons.map((entry) => entry.snr);
|
||||
|
|
@ -33,8 +29,6 @@ function getDateTime(timestamp) {
|
|||
return `${hours}:${minutes}`;
|
||||
}
|
||||
|
||||
const newChatCall = ref(null);
|
||||
|
||||
function newChat() {
|
||||
let callsign = this.newChatCall.value;
|
||||
callsign = callsign.toUpperCase().trim();
|
||||
|
|
@ -42,8 +36,9 @@ function newChat() {
|
|||
this.newChatCall.value = "";
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="navbar sticky-top bg-body-tertiary shadow">
|
||||
<nav class="navbar sticky-top bg-body-tertiary border-bottom p-1">
|
||||
<button
|
||||
class="btn btn-outline-primary w-100"
|
||||
data-bs-target="#newChatModal"
|
||||
|
|
@ -69,7 +64,7 @@ function newChat() {
|
|||
data-bs-toggle="list"
|
||||
:href="`#list-${callsign}-messages`"
|
||||
role="tab"
|
||||
aria-controls="list-{{callsign}}-messages"
|
||||
:aria-controls="`list-${callsign}-messages`"
|
||||
@click="chatSelected(callsign)"
|
||||
>
|
||||
<div class="row">
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ function getDateTime(timestampRaw) {
|
|||
</script>
|
||||
|
||||
<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
|
||||
v-for="(details, callsign, key) in chat.callsign_list"
|
||||
:key="callsign"
|
||||
|
|
|
|||
|
|
@ -204,7 +204,7 @@ const speedChartData = computed(() => ({
|
|||
<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">
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -18,79 +18,47 @@ import { loadAllData } from "../js/eventHandler";
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<!-------------------------------- INFO TOASTS ---------------->
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col min-vh-100 m-0 p-0">
|
||||
<!--
|
||||
<main_top_navbar />
|
||||
-->
|
||||
<div class="tab-content" id="nav-tabContent-settings">
|
||||
<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>
|
||||
|
||||
<!---------------------------------------------------------------------- FOOTER AREA ------------------------------------------------------------>
|
||||
|
||||
<div class="container">
|
||||
<!--<main_footer_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_modals />
|
||||
<!-- 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>
|
||||
|
||||
<!-- Footer Area -->
|
||||
<div class="container">
|
||||
<!--<main_footer_navbar />-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main_modals />
|
||||
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -8,254 +8,71 @@ 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"
|
||||
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>
|
||||
</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"
|
||||
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>
|
||||
</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>
|
||||
<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"
|
||||
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"
|
||||
title="Bytes transfered"
|
||||
>
|
||||
<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-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-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" title="Bytes transferred">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</nav>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue