mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 08:04:33 +00:00
moved file selection
This commit is contained in:
parent
1449869c0f
commit
0502506b90
|
@ -2,6 +2,124 @@
|
||||||
import chat_conversations from "./chat_conversations.vue";
|
import chat_conversations from "./chat_conversations.vue";
|
||||||
import chat_messages from "./chat_messages.vue";
|
import chat_messages from "./chat_messages.vue";
|
||||||
import chat_new_message from "./chat_new_message.vue";
|
import chat_new_message from "./chat_new_message.vue";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
import { setActivePinia } from "pinia";
|
||||||
|
import pinia from "../store/index";
|
||||||
|
setActivePinia(pinia);
|
||||||
|
|
||||||
|
import { useChatStore } from "../store/chatStore.js";
|
||||||
|
const chat = useChatStore(pinia);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
import {
|
||||||
|
Chart as ChartJS,
|
||||||
|
CategoryScale,
|
||||||
|
LinearScale,
|
||||||
|
PointElement,
|
||||||
|
Title,
|
||||||
|
Tooltip,
|
||||||
|
Legend,
|
||||||
|
BarElement,
|
||||||
|
} from "chart.js";
|
||||||
|
|
||||||
|
import { Bar } from "vue-chartjs";
|
||||||
|
import { ref, computed } from "vue";
|
||||||
|
import annotationPlugin from "chartjs-plugin-annotation";
|
||||||
|
|
||||||
|
|
||||||
|
ChartJS.register(
|
||||||
|
CategoryScale,
|
||||||
|
LinearScale,
|
||||||
|
PointElement,
|
||||||
|
Title,
|
||||||
|
Tooltip,
|
||||||
|
Legend,
|
||||||
|
BarElement,
|
||||||
|
annotationPlugin,
|
||||||
|
);
|
||||||
|
|
||||||
|
var beaconHistogramOptions = {
|
||||||
|
type: "bar",
|
||||||
|
bezierCurve: false, //remove curves from your plot
|
||||||
|
scaleShowLabels: false, //remove labels
|
||||||
|
tooltipEvents: [], //remove trigger from tooltips so they will'nt be show
|
||||||
|
pointDot: false, //remove the points markers
|
||||||
|
scaleShowGridLines: true, //set to false to remove the grids background
|
||||||
|
maintainAspectRatio: true,
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
annotation: {
|
||||||
|
annotations: [
|
||||||
|
{
|
||||||
|
type: "line",
|
||||||
|
mode: "horizontal",
|
||||||
|
scaleID: "y",
|
||||||
|
value: 0,
|
||||||
|
borderColor: "darkgrey", // Set the color to dark grey for the zero line
|
||||||
|
borderWidth: 0.5, // Set the line width
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
scales: {
|
||||||
|
x: {
|
||||||
|
position: "bottom",
|
||||||
|
display: false,
|
||||||
|
min: -10,
|
||||||
|
max: 15,
|
||||||
|
ticks: {
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
display: false,
|
||||||
|
min: -5,
|
||||||
|
max: 10,
|
||||||
|
ticks: {
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const beaconHistogramData = computed(() => ({
|
||||||
|
labels: chat.beaconLabelArray,
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
data: chat.beaconDataArray,
|
||||||
|
tension: 0.1,
|
||||||
|
borderColor: "rgb(0, 255, 0)",
|
||||||
|
|
||||||
|
backgroundColor: function (context) {
|
||||||
|
var value = context.dataset.data[context.dataIndex];
|
||||||
|
return value >= 0 ? "green" : "red";
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -23,19 +141,51 @@ import chat_new_message from "./chat_new_message.vue";
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-9 border-start vh-100 p-0">
|
<div class="col-9 border-start vh-100 p-0">
|
||||||
<!------messages area ---------------------------------------------------------------------->
|
|
||||||
<div
|
|
||||||
class="container overflow-auto p-0"
|
|
||||||
id="message-container"
|
|
||||||
style="height: calc(100% - 135px)"
|
|
||||||
>
|
|
||||||
<chat_messages />
|
<div class="d-flex flex-column vh-100">
|
||||||
</div>
|
<!-- Top Navbar -->
|
||||||
|
<nav class="navbar sticky-top 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">
|
||||||
|
<chat_messages />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<chat_new_message />
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!------ new message area ---------------------------------------------------------------------->
|
<!------ new message area ---------------------------------------------------------------------->
|
||||||
|
|
||||||
|
|
||||||
<chat_new_message />
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -54,7 +54,7 @@ function newChat() {
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<nav class="navbar sticky-top bg-body-tertiary">
|
<nav class="navbar sticky-top bg-body-tertiary shadow">
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="btn btn-outline-primary w-100"
|
class="btn btn-outline-primary w-100"
|
||||||
|
|
|
@ -24,124 +24,10 @@ function getDateTime(timestampRaw) {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
import {
|
|
||||||
Chart as ChartJS,
|
|
||||||
CategoryScale,
|
|
||||||
LinearScale,
|
|
||||||
PointElement,
|
|
||||||
Title,
|
|
||||||
Tooltip,
|
|
||||||
Legend,
|
|
||||||
BarElement,
|
|
||||||
} from "chart.js";
|
|
||||||
|
|
||||||
import { Bar } from "vue-chartjs";
|
|
||||||
import { ref, computed } from "vue";
|
|
||||||
import annotationPlugin from "chartjs-plugin-annotation";
|
|
||||||
|
|
||||||
|
|
||||||
ChartJS.register(
|
|
||||||
CategoryScale,
|
|
||||||
LinearScale,
|
|
||||||
PointElement,
|
|
||||||
Title,
|
|
||||||
Tooltip,
|
|
||||||
Legend,
|
|
||||||
BarElement,
|
|
||||||
annotationPlugin,
|
|
||||||
);
|
|
||||||
|
|
||||||
var beaconHistogramOptions = {
|
|
||||||
type: "bar",
|
|
||||||
bezierCurve: false, //remove curves from your plot
|
|
||||||
scaleShowLabels: false, //remove labels
|
|
||||||
tooltipEvents: [], //remove trigger from tooltips so they will'nt be show
|
|
||||||
pointDot: false, //remove the points markers
|
|
||||||
scaleShowGridLines: true, //set to false to remove the grids background
|
|
||||||
maintainAspectRatio: true,
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
annotation: {
|
|
||||||
annotations: [
|
|
||||||
{
|
|
||||||
type: "line",
|
|
||||||
mode: "horizontal",
|
|
||||||
scaleID: "y",
|
|
||||||
value: 0,
|
|
||||||
borderColor: "darkgrey", // Set the color to dark grey for the zero line
|
|
||||||
borderWidth: 0.5, // Set the line width
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
position: "bottom",
|
|
||||||
display: false,
|
|
||||||
min: -10,
|
|
||||||
max: 15,
|
|
||||||
ticks: {
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
display: false,
|
|
||||||
min: -5,
|
|
||||||
max: 10,
|
|
||||||
ticks: {
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const beaconHistogramData = computed(() => ({
|
|
||||||
labels: chat.beaconLabelArray,
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
data: chat.beaconDataArray,
|
|
||||||
tension: 0.1,
|
|
||||||
borderColor: "rgb(0, 255, 0)",
|
|
||||||
|
|
||||||
backgroundColor: function (context) {
|
|
||||||
var value = context.dataset.data[context.dataIndex];
|
|
||||||
return value >= 0 ? "green" : "red";
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<nav class="navbar sticky-top bg-body-tertiary shadow ">
|
|
||||||
<div class="input-group mb-0 p-0 w-50">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<div class="tab-content p-3" id="nav-tabContent-chat-messages">
|
<div class="tab-content p-3" 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"
|
||||||
|
|
|
@ -193,23 +193,52 @@ const speedChartData = computed(() => ({
|
||||||
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<nav class="navbar sticky-bottom bg-body-tertiary border-top">
|
|
||||||
|
|
||||||
|
<nav class="navbar sticky-bottom bg-body-tertiary border-top mb-5">
|
||||||
<div class="container-fluid p-0">
|
<div class="container-fluid p-0">
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="expand_textarea"
|
|
||||||
class="btn-check"
|
<!-- Hidden file input -->
|
||||||
autocomplete="off"
|
<input type="file" multiple ref="fileInput" @change="handleFileSelection" style="display: none;" />
|
||||||
/>
|
|
||||||
<label
|
|
||||||
class="btn d-flex justify-content-center"
|
|
||||||
id="expand_textarea_label"
|
<div class="container-fluid px-0">
|
||||||
for="expand_textarea"
|
<div class="d-flex flex-row overflow-auto bg-light">
|
||||||
><i
|
<div v-for="(file, index) in selectedFiles" :key="index" class="pe-2">
|
||||||
id="expand_textarea_button"
|
<div class="card" style=" min-width: 10rem; max-width: 10rem;">
|
||||||
class="bi bi-chevron-compact-up"
|
<!-- Card Header with Remove Button -->
|
||||||
></i
|
<div class="card-header d-flex justify-content-between align-items-center">
|
||||||
></label>
|
<span class="text-truncate">{{ file.name }}</span>
|
||||||
|
<button class="btn btn-close" @click="removeFile(index)"></button>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<p class="card-text">...</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer text-muted">
|
||||||
|
{{ file.type }}
|
||||||
|
</div>
|
||||||
|
<div class="card-footer text-muted">
|
||||||
|
{{ file.size }} bytes
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<Line :data="speedChartData" />
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="input-group bottom-0 ms-2">
|
<div class="input-group bottom-0 ms-2">
|
||||||
|
|
||||||
|
@ -228,10 +257,9 @@ const speedChartData = computed(() => ({
|
||||||
|
|
||||||
<!-- trigger file selection modal -->
|
<!-- trigger file selection modal -->
|
||||||
|
|
||||||
<button type="button" class="btn btn-outline-secondary border-0 rounded-pill me-1" data-bs-toggle="modal" data-bs-target="#fileSelectionModal">
|
<button type="button" class="btn btn-outline-secondary border-0 rounded-pill me-1" @click="triggerFileInput">
|
||||||
<i class="bi bi-paperclip" style="font-size: 1.2rem"></i>
|
<i class="bi bi-paperclip" style="font-size: 1.2rem"></i>
|
||||||
<!-- Badge showing the number of attached files -->
|
|
||||||
<span class="badge bg-warning">{{ selectedFiles.length }}</span>
|
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<textarea
|
<textarea
|
||||||
|
@ -263,79 +291,6 @@ const speedChartData = computed(() => ({
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- select file modal -->
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="modal fade"
|
|
||||||
id="fileSelectionModal"
|
|
||||||
tabindex="-1"
|
|
||||||
aria-labelledby="fileSelectionModalLabel"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
|
|
||||||
<div class="modal-dialog">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h5 class="modal-title" id="staticBackdropLabel">File Attachment</h5>
|
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @click="resetFile"></button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
|
|
||||||
|
|
||||||
<div class="alert alert-warning d-flex align-items-center" role="alert">
|
|
||||||
<i class="bi bi-exclamation-triangle-fill ms-2 me-2"></i>
|
|
||||||
<div>
|
|
||||||
Transmission speed over HF channels is very limited!
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="container w-100 mb-3">
|
|
||||||
<!-- Button that user will click to open file dialog -->
|
|
||||||
<button class="btn btn-primary w-100" @click="triggerFileInput">Attach Files</button>
|
|
||||||
|
|
||||||
<!-- Hidden file input -->
|
|
||||||
<input type="file" multiple ref="fileInput" @change="handleFileSelection" style="display: none;" />
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container-fluid px-0">
|
|
||||||
<div class="d-flex flex-row overflow-auto bg-light rounded-3 p-2 border border-1">
|
|
||||||
<div v-for="(file, index) in selectedFiles" :key="index" class="pe-2">
|
|
||||||
<div class="card" style=" min-width: 10rem; max-width: 10rem;">
|
|
||||||
<!-- Card Header with Remove Button -->
|
|
||||||
<div class="card-header d-flex justify-content-between align-items-center">
|
|
||||||
<span class="text-truncate">{{ file.name }}</span>
|
|
||||||
<button class="btn btn-close" @click="removeFile(index)"></button>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<p class="card-text">...</p>
|
|
||||||
</div>
|
|
||||||
<div class="card-footer text-muted">
|
|
||||||
{{ file.type }}
|
|
||||||
</div>
|
|
||||||
<div class="card-footer text-muted">
|
|
||||||
{{ file.size }} bytes
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!--
|
|
||||||
<Line :data="speedChartData" />
|
|
||||||
-->
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="resetFile">Reset</button>
|
|
||||||
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Append</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Emoji Picker Modal -->
|
<!-- Emoji Picker Modal -->
|
||||||
<div class="modal fade" id="emojiPickerModal" tabindex="-1" aria-hidden="true">
|
<div class="modal fade" id="emojiPickerModal" tabindex="-1" aria-hidden="true">
|
||||||
<div class="modal-dialog modal-dialog-centered modal-sm">
|
<div class="modal-dialog modal-dialog-centered modal-sm">
|
||||||
|
|
Loading…
Reference in a new issue