mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 08:04:33 +00:00
first test run with chat module
This commit is contained in:
DJ2LS
parent
f1b3e2937d
commit
0f2b48419d
648
gui_vue/src/components/chat.vue
Normal file
648
gui_vue/src/components/chat.vue
Normal file
|
|
@ -0,0 +1,648 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
|
||||
import {saveSettingsToFile} from '../js/settingsHandler';
|
||||
|
||||
import { setActivePinia } from 'pinia';
|
||||
import pinia from '../store/index';
|
||||
setActivePinia(pinia);
|
||||
|
||||
import { useSettingsStore } from '../store/settingsStore.js';
|
||||
const settings = useSettingsStore(pinia);
|
||||
|
||||
import { useStateStore } from '../store/stateStore.js';
|
||||
const state = useStateStore(pinia);
|
||||
|
||||
import chat_navbar from './chat_navbar.vue'
|
||||
import chat_conversations from './chat_conversations.vue'
|
||||
import chat_messages from './chat_messages.vue'
|
||||
|
||||
import {updateAllChat} from '../js/chatHandler'
|
||||
|
||||
updateAllChat()
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
|
||||
<div class="container-fluid m-0 p-0">
|
||||
<!------ chat navbar ---------------------------------------------------------------------->
|
||||
|
||||
<chat_navbar/>
|
||||
|
||||
<div class="row h-100 ms-1 mt-1 me-1">
|
||||
<div class="col-4">
|
||||
<!------Chats area ---------------------------------------------------------------------->
|
||||
<div class="container-fluid m-0 p-0">
|
||||
<chat_conversations/>
|
||||
|
||||
</div>
|
||||
<div class="overflow-auto vh-100">
|
||||
<div
|
||||
class="list-group overflow-auto"
|
||||
id="list-tab-chat"
|
||||
role="tablist"
|
||||
style="height: calc(100vh - 70px)"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8 border-start vh-100 p-0">
|
||||
<div
|
||||
class="position-absolute container bottom-0 end-0 mb-5"
|
||||
style="z-index: 100; display: none"
|
||||
id="emojipickercontainer"
|
||||
>
|
||||
<emoji-picker
|
||||
locale="en"
|
||||
class="position-absolute bottom-0 end-0 p-1 mb-2"
|
||||
data-source="../node_modules/emoji-picker-element-data/en/emojibase/data.json"
|
||||
></emoji-picker>
|
||||
</div>
|
||||
|
||||
<!------messages area ---------------------------------------------------------------------->
|
||||
<div
|
||||
class="container overflow-auto"
|
||||
id="message-container"
|
||||
style="height: calc(100% - 200px)"
|
||||
>
|
||||
<chat_messages/>
|
||||
<!--<div class="tab-content" id="nav-tabContent-Chat"></div>-->
|
||||
<!--<div class="container position-absolute bottom-0">-->
|
||||
</div>
|
||||
<!-- </div>-->
|
||||
<div class="container-fluid mt-2 p-0">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="expand_textarea"
|
||||
class="btn-check"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label
|
||||
class="btn d-flex justify-content-center"
|
||||
id="expand_textarea_label"
|
||||
for="expand_textarea"
|
||||
><i
|
||||
id="expand_textarea_button"
|
||||
class="bi bi-chevron-compact-up"
|
||||
></i
|
||||
></label>
|
||||
|
||||
<div class="input-group bottom-0 ms-2">
|
||||
<!--<input class="form-control" maxlength="8" style="max-width: 6rem; text-transform:uppercase; display:none" id="chatModuleDxCall" placeholder="DX CALL"></input>-->
|
||||
<!--<button class="btn btn-sm btn-primary me-2" id="emojipickerbutton" type="button">-->
|
||||
<div class="input-group-text">
|
||||
<i
|
||||
id="emojipickerbutton"
|
||||
class="bi bi-emoji-smile p-0"
|
||||
style="font-size: 1rem"
|
||||
></i>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
class="form-control"
|
||||
rows="1"
|
||||
id="chatModuleMessage"
|
||||
placeholder="Message - Send with [Enter]"
|
||||
></textarea>
|
||||
|
||||
<div class="input-group-text me-3">
|
||||
<i
|
||||
class="bi bi-paperclip"
|
||||
style="font-size: 1rem"
|
||||
id="selectFilesButton"
|
||||
></i>
|
||||
|
||||
<button
|
||||
class="btn btn-sm btn-secondary d-none invisible"
|
||||
id="sendMessage"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
class="bi bi-send"
|
||||
style="font-size: 1.2rem"
|
||||
></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
41
gui_vue/src/components/chat_conversations.vue
Normal file
41
gui_vue/src/components/chat_conversations.vue
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
|
||||
import {saveSettingsToFile} from '../js/settingsHandler';
|
||||
|
||||
import { setActivePinia } from 'pinia';
|
||||
import pinia from '../store/index';
|
||||
setActivePinia(pinia);
|
||||
|
||||
import { useSettingsStore } from '../store/settingsStore.js';
|
||||
const settings = useSettingsStore(pinia);
|
||||
|
||||
import { useStateStore } from '../store/stateStore.js';
|
||||
const state = useStateStore(pinia);
|
||||
|
||||
import { useChatStore } from '../store/chatStore.js';
|
||||
const chat = useChatStore(pinia);
|
||||
|
||||
|
||||
|
||||
|
||||
import chat_conversations_entry from './chat_conversations_entry.vue'
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="list-group" id="chat-list-tab" role="chat-tablist">
|
||||
|
||||
<template v-for="(item) in chat.callsign_list" :key="item.timestamp">
|
||||
<a class="list-group-item list-group-item-action" :id="`list-chat-list-${item}`" data-bs-toggle="list" :href="`#list-${item}-messages`" role="tab" aria-controls="list-{{item}}-messages">{{item}}</a>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<!--<chat_conversations_entry/>-->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
21
gui_vue/src/components/chat_conversations_entry.vue
Normal file
21
gui_vue/src/components/chat_conversations_entry.vue
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
|
||||
import {saveSettingsToFile} from '../js/settingsHandler';
|
||||
|
||||
import { setActivePinia } from 'pinia';
|
||||
import pinia from '../store/index';
|
||||
setActivePinia(pinia);
|
||||
|
||||
import { useSettingsStore } from '../store/settingsStore.js';
|
||||
const settings = useSettingsStore(pinia);
|
||||
|
||||
import { useStateStore } from '../store/stateStore.js';
|
||||
const state = useStateStore(pinia);
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
|
||||
</template>
|
||||
28
gui_vue/src/components/chat_messages.vue
Normal file
28
gui_vue/src/components/chat_messages.vue
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
|
||||
import {saveSettingsToFile} from '../js/settingsHandler';
|
||||
|
||||
import { setActivePinia } from 'pinia';
|
||||
import pinia from '../store/index';
|
||||
setActivePinia(pinia);
|
||||
|
||||
import { useSettingsStore } from '../store/settingsStore.js';
|
||||
const settings = useSettingsStore(pinia);
|
||||
|
||||
import { useStateStore } from '../store/stateStore.js';
|
||||
const state = useStateStore(pinia);
|
||||
|
||||
import { useChatStore } from '../store/chatStore.js';
|
||||
const chat = useChatStore(pinia);
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tab-content" id="nav-tabContent-chat-messages">
|
||||
<template v-for="item in chat.callsign_list" :key="item.timestamp">
|
||||
<div class="tab-pane fade" :id="`list-${item}-messages`" role="tabpanel" :aria-labelledby="`list-chat-list-${item}`">{{item}}...</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
289
gui_vue/src/components/chat_navbar.vue
Normal file
289
gui_vue/src/components/chat_navbar.vue
Normal file
|
|
@ -0,0 +1,289 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
|
||||
import {saveSettingsToFile} from '../js/settingsHandler';
|
||||
|
||||
import { setActivePinia } from 'pinia';
|
||||
import pinia from '../store/index';
|
||||
setActivePinia(pinia);
|
||||
|
||||
import { useSettingsStore } from '../store/settingsStore.js';
|
||||
const settings = useSettingsStore(pinia);
|
||||
|
||||
import { useStateStore } from '../store/stateStore.js';
|
||||
const state = useStateStore(pinia);
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="navbar bg-body-tertiary border-bottom">
|
||||
<div class="container">
|
||||
<div class="row w-100">
|
||||
<div class="col-4 p-0 me-2">
|
||||
<div class="input-group bottom-0 m-0">
|
||||
<input
|
||||
class="form-control w-50"
|
||||
maxlength="9"
|
||||
style="text-transform: uppercase"
|
||||
id="chatModuleNewDxCall"
|
||||
placeholder="DX CALL"
|
||||
/>
|
||||
<button
|
||||
class="btn btn-sm btn-success"
|
||||
id="createNewChatButton"
|
||||
type="button"
|
||||
title="Start a new chat (enter dx call sign first)"
|
||||
>
|
||||
<i
|
||||
class="bi bi-pencil-square"
|
||||
style="font-size: 1.2rem"
|
||||
></i>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
id="userModalButton"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#userModal"
|
||||
class="btn btn-sm btn-primary ms-2"
|
||||
title="My station info"
|
||||
>
|
||||
<i
|
||||
class="bi bi-person"
|
||||
style="font-size: 1.2rem"
|
||||
></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
id="sharedFolderButton"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#sharedFolderModal"
|
||||
class="btn btn-sm btn-primary"
|
||||
title="My shared folder"
|
||||
>
|
||||
<i
|
||||
class="bi bi-files"
|
||||
style="font-size: 1.2rem"
|
||||
></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 ms-2 p-0">
|
||||
<div class="input-group bottom-0">
|
||||
<button
|
||||
class="btn btn-sm btn-outline-secondary me"
|
||||
id="ping"
|
||||
type="button"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-trigger="hover"
|
||||
data-bs-html="false"
|
||||
title="Ping remote station"
|
||||
>
|
||||
Ping
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
id="userModalDXButton"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#userModalDX"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
title="Request remote station's information"
|
||||
>
|
||||
<i
|
||||
class="bi bi-person"
|
||||
style="font-size: 1.2rem"
|
||||
></i>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
id="sharedFolderDXButton"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#sharedFolderModalDX"
|
||||
class="btn btn-sm btn-outline-secondary me-2"
|
||||
title="Request remote station's shared files"
|
||||
>
|
||||
<i
|
||||
class="bi bi-files"
|
||||
style="font-size: 1.2rem"
|
||||
></i>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-small btn-outline-primary dropdown-toggle me-2"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
data-bs-auto-close="outside"
|
||||
data-bs-trigger="hover"
|
||||
data-bs-html="false"
|
||||
title="Message filter"
|
||||
>
|
||||
<i class="bi bi-funnel-fill"></i>
|
||||
</button>
|
||||
<form class="dropdown-menu p-4" id="frmFilter">
|
||||
<div class="mb-1">
|
||||
<div class="form-check">
|
||||
<input
|
||||
checked="true"
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
id="chkMessage"
|
||||
/>
|
||||
<label
|
||||
class="form-check-label"
|
||||
for="chkMessage"
|
||||
>
|
||||
All Messages
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<div class="form-check">
|
||||
<input
|
||||
checked="false"
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
id="chkNewMessage"
|
||||
/>
|
||||
|
||||
<label
|
||||
class="form-check-label"
|
||||
for="chkNewMessage"
|
||||
>
|
||||
Unread Messages
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
id="chkPing"
|
||||
/>
|
||||
<label class="form-check-label" for="chkPing">
|
||||
Pings
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<div class="form-check">
|
||||
<input
|
||||
checked="true"
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
id="chkPingAck"
|
||||
/>
|
||||
<label
|
||||
class="form-check-label"
|
||||
for="chkPingAck"
|
||||
>
|
||||
Ping-Acks
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
id="chkBeacon"
|
||||
/>
|
||||
<label
|
||||
class="form-check-label"
|
||||
for="chkBeacon"
|
||||
>
|
||||
Beacons
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
id="chkRequest"
|
||||
/>
|
||||
<label
|
||||
class="form-check-label"
|
||||
for="chkRequest"
|
||||
>
|
||||
Requests
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
id="chkResponse"
|
||||
/>
|
||||
<label
|
||||
class="form-check-label"
|
||||
for="chkResponse"
|
||||
>
|
||||
Responses
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
id="btnFilter"
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<button
|
||||
id="chatSettingsDropDown"
|
||||
type="button"
|
||||
class="btn btn-outline-secondary dropdown-toggle"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
title="More options...."
|
||||
>
|
||||
<i class="bi bi-three-dots-vertical"></i>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu"
|
||||
aria-labelledby="chatSettingsDropDown"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item bg-danger text-white"
|
||||
id="delete_selected_chat"
|
||||
href="#"
|
||||
><i
|
||||
class="bi bi-person-x"
|
||||
style="font-size: 1rem"
|
||||
></i>
|
||||
Delete chat</a
|
||||
>
|
||||
</li>
|
||||
<div class="dropdown-divider"></div>
|
||||
<li>
|
||||
<button
|
||||
class="dropdown-item"
|
||||
id="openHelpModalchat"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#chatHelpModal"
|
||||
>
|
||||
<i
|
||||
class="bi bi-question-circle"
|
||||
style="font-size: 1rem"
|
||||
></i>
|
||||
Help
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -39,7 +39,13 @@ return datetime
|
|||
}
|
||||
|
||||
function getMaidenheadDistance(dxGrid){
|
||||
try{
|
||||
return parseInt(distance(settings.mygrid, dxGrid));
|
||||
}catch(e){
|
||||
//
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
162
gui_vue/src/js/chatHandler.js
Normal file
162
gui_vue/src/js/chatHandler.js
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
const path = require("path");
|
||||
const fs = require("fs");
|
||||
|
||||
// pinia store setup
|
||||
import { setActivePinia } from 'pinia';
|
||||
import pinia from '../store/index';
|
||||
setActivePinia(pinia);
|
||||
|
||||
import { useChatStore } from '../store/chatStore.js';
|
||||
const chat = useChatStore(pinia);
|
||||
|
||||
|
||||
// ---- MessageDB
|
||||
try {
|
||||
var PouchDB = require("pouchdb");
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
|
||||
/*
|
||||
This is a fix for raspberryPi where we get an error when loading pouchdb because of
|
||||
leveldown package isnt running on ARM devices.
|
||||
pouchdb-browser does not depend on leveldb and seems to be working.
|
||||
*/
|
||||
console.log("using pouchdb-browser fallback");
|
||||
var PouchDB = require("pouchdb-browser");
|
||||
}
|
||||
|
||||
|
||||
PouchDB.plugin(require("pouchdb-find"));
|
||||
//PouchDB.plugin(require('pouchdb-replication'));
|
||||
PouchDB.plugin(require("pouchdb-upsert"));
|
||||
|
||||
|
||||
|
||||
// https://stackoverflow.com/a/26227660
|
||||
var appDataFolder =
|
||||
process.env.APPDATA ||
|
||||
(process.platform == "darwin"
|
||||
? process.env.HOME + "/Library/Application Support"
|
||||
: process.env.HOME + "/.config");
|
||||
var configFolder = path.join(appDataFolder, "FreeDATA");
|
||||
|
||||
|
||||
|
||||
|
||||
var chatDB = path.join(configFolder, "chatDB");
|
||||
var db = new PouchDB(chatDB);
|
||||
|
||||
/* -------- CREATE DATABASE INDEXES */
|
||||
createChatIndex();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
chat.callsign_list = new Set()
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export async function updateAllChat() {
|
||||
|
||||
//Ensure we create an index before running db.find
|
||||
//We can't rely on the default index existing before we get here...... :'(
|
||||
await db
|
||||
.createIndex({
|
||||
index: {
|
||||
fields: [{ dxcallsign: "asc" }, { timestamp: "asc" }],
|
||||
},
|
||||
})
|
||||
.then(async function (result) {
|
||||
// handle result
|
||||
await db
|
||||
.find({
|
||||
selector: {
|
||||
$and: [
|
||||
{ dxcallsign: { $exists: true } },
|
||||
{ timestamp: { $exists: true } },
|
||||
{ $or: chat.chat_filter },
|
||||
],
|
||||
//$or: chat.chat_filter
|
||||
},
|
||||
sort: [{ dxcallsign: "asc" }, { timestamp: "asc" }],
|
||||
})
|
||||
.then(async function (result) {
|
||||
console.log(result);
|
||||
for (var item of result.docs) {
|
||||
console.log(item)
|
||||
chat.callsign_list.add(item.dxcallsign)
|
||||
|
||||
}
|
||||
|
||||
// handle result async
|
||||
|
||||
|
||||
/*
|
||||
|
||||
if (typeof result !== "undefined") {
|
||||
for (const item of result.docs) {
|
||||
//await otherwise history will not be in chronological order
|
||||
await db
|
||||
.get(item._id, {
|
||||
attachments: true,
|
||||
})
|
||||
.then(function (item_with_attachments) {
|
||||
update_chat(item_with_attachments);
|
||||
});
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
})
|
||||
.catch(function (err) {
|
||||
console.log(err);
|
||||
});
|
||||
})
|
||||
.catch(function (err) {
|
||||
console.log(err);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function createChatIndex() {
|
||||
db.createIndex({
|
||||
index: {
|
||||
fields: [
|
||||
"timestamp",
|
||||
"uuid",
|
||||
"dxcallsign",
|
||||
"dxgrid",
|
||||
"msg",
|
||||
"checksum",
|
||||
"type",
|
||||
"command",
|
||||
"status",
|
||||
"percent",
|
||||
"attempt",
|
||||
"hmac_signed",
|
||||
"bytesperminute",
|
||||
"_attachments",
|
||||
"new",
|
||||
],
|
||||
},
|
||||
})
|
||||
.then(function (result) {
|
||||
// handle result
|
||||
console.log(result);
|
||||
})
|
||||
.catch(function (err) {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
|
@ -38,3 +38,4 @@ loadSettings()
|
|||
//import './js/settingsHandler.js'
|
||||
import './js/daemon.js'
|
||||
import './js/sock.js'
|
||||
//import './js/settingsHandler.js'
|
||||
|
|
|
|||
18
gui_vue/src/store/chatStore.js
Normal file
18
gui_vue/src/store/chatStore.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
export const useChatStore = defineStore('chatStore', () => {
|
||||
var chat_filter = ref([
|
||||
{ type: "newchat" },
|
||||
{ type: "received" },
|
||||
{ type: "transmit" },
|
||||
{ type: "ping-ack" },
|
||||
{ type: "broadcast_received" },
|
||||
{ type: "broadcast_transmit" },
|
||||
//{ type: "request" },
|
||||
//{ type: "response" },
|
||||
])
|
||||
|
||||
var callsign_list = ref()
|
||||
return {chat_filter, callsign_list };
|
||||
});
|
||||
Loading…
Reference in a new issue