mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 08:04:33 +00:00
moved file selection
This commit is contained in:
DJ2LS
parent
1449869c0f
commit
0502506b90
|
|
@ -2,6 +2,124 @@
|
|||
import chat_conversations from "./chat_conversations.vue";
|
||||
import chat_messages from "./chat_messages.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>
|
||||
|
||||
<template>
|
||||
|
|
@ -23,19 +141,51 @@ import chat_new_message from "./chat_new_message.vue";
|
|||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="d-flex flex-column vh-100">
|
||||
<!-- 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 ---------------------------------------------------------------------->
|
||||
|
||||
|
||||
<chat_new_message />
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ function newChat() {
|
|||
</script>
|
||||
<template>
|
||||
|
||||
<nav class="navbar sticky-top bg-body-tertiary">
|
||||
<nav class="navbar sticky-top bg-body-tertiary shadow">
|
||||
|
||||
<button
|
||||
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>
|
||||
|
||||
<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">
|
||||
<template
|
||||
v-for="(details, callsign, key) in chat.callsign_list"
|
||||
|
|
|
|||
|
|
@ -193,23 +193,52 @@ const speedChartData = computed(() => ({
|
|||
|
||||
|
||||
<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">
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
<!-- Hidden file input -->
|
||||
<input type="file" multiple ref="fileInput" @change="handleFileSelection" style="display: none;" />
|
||||
|
||||
|
||||
|
||||
<div class="container-fluid px-0">
|
||||
<div class="d-flex flex-row overflow-auto bg-light">
|
||||
<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 class="input-group bottom-0 ms-2">
|
||||
|
||||
|
|
@ -228,10 +257,9 @@ const speedChartData = computed(() => ({
|
|||
|
||||
<!-- 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>
|
||||
<!-- Badge showing the number of attached files -->
|
||||
<span class="badge bg-warning">{{ selectedFiles.length }}</span>
|
||||
|
||||
</button>
|
||||
|
||||
<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 -->
|
||||
<div class="modal fade" id="emojiPickerModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-sm">
|
||||
|
|
|
|||
Loading…
Reference in a new issue