mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 08:04:33 +00:00
adjusted chat navbars
This commit is contained in:
parent
cb8d17d006
commit
1449869c0f
5 changed files with 165 additions and 164 deletions
|
@ -1,5 +1,4 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import chat_navbar from "./chat_navbar.vue";
|
|
||||||
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";
|
||||||
|
@ -7,9 +6,6 @@ import chat_new_message from "./chat_new_message.vue";
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container-fluid m-0 p-0">
|
<div class="container-fluid m-0 p-0">
|
||||||
<!------ chat navbar ---------------------------------------------------------------------->
|
|
||||||
|
|
||||||
<chat_navbar />
|
|
||||||
|
|
||||||
<div class="row h-100 ms-0 mt-0 me-1">
|
<div class="row h-100 ms-0 mt-0 me-1">
|
||||||
<div class="col-3 m-0 p-0 h-100 bg-light">
|
<div class="col-3 m-0 p-0 h-100 bg-light">
|
||||||
|
@ -29,16 +25,20 @@ import chat_new_message from "./chat_new_message.vue";
|
||||||
<div class="col-9 border-start vh-100 p-0">
|
<div class="col-9 border-start vh-100 p-0">
|
||||||
<!------messages area ---------------------------------------------------------------------->
|
<!------messages area ---------------------------------------------------------------------->
|
||||||
<div
|
<div
|
||||||
class="container overflow-auto"
|
class="container overflow-auto p-0"
|
||||||
id="message-container"
|
id="message-container"
|
||||||
style="height: calc(100% - 225px)"
|
style="height: calc(100% - 135px)"
|
||||||
>
|
>
|
||||||
<chat_messages />
|
<chat_messages />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!------ new message area ---------------------------------------------------------------------->
|
<!------ new message area ---------------------------------------------------------------------->
|
||||||
|
|
||||||
<chat_new_message />
|
|
||||||
|
<chat_new_message />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,6 +5,10 @@ setActivePinia(pinia);
|
||||||
|
|
||||||
import { useChatStore } from "../store/chatStore.js";
|
import { useChatStore } from "../store/chatStore.js";
|
||||||
import { getBeaconDataByCallsign } from "../js/api.js";
|
import { getBeaconDataByCallsign } from "../js/api.js";
|
||||||
|
import { startChatWithNewStation } from "../js/chatHandler";
|
||||||
|
|
||||||
|
import { ref, computed } from "vue";
|
||||||
|
|
||||||
|
|
||||||
const chat = useChatStore(pinia);
|
const chat = useChatStore(pinia);
|
||||||
|
|
||||||
|
@ -34,8 +38,36 @@ function getDateTime(timestamp) {
|
||||||
let seconds = date.getSeconds().toString().padStart(2, "0");
|
let seconds = date.getSeconds().toString().padStart(2, "0");
|
||||||
return `${hours}:${minutes}`;
|
return `${hours}:${minutes}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const newChatCall = ref(null);
|
||||||
|
|
||||||
|
function newChat() {
|
||||||
|
let callsign = this.newChatCall.value;
|
||||||
|
callsign = callsign.toUpperCase().trim();
|
||||||
|
if (callsign === "") return;
|
||||||
|
//startChatWithNewStation(callsign);
|
||||||
|
//updateAllChat(false);
|
||||||
|
this.newChatCall.value = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
|
<nav class="navbar sticky-top bg-body-tertiary">
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn-outline-primary w-100"
|
||||||
|
data-bs-target="#newChatModal"
|
||||||
|
data-bs-toggle="modal"
|
||||||
|
>
|
||||||
|
<i class="bi bi-pencil-square"> Start a new chat</i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="list-group bg-body-tertiary m-0 p-1"
|
class="list-group bg-body-tertiary m-0 p-1"
|
||||||
id="chat-list-tab"
|
id="chat-list-tab"
|
||||||
|
|
|
@ -21,10 +21,128 @@ function getDateTime(timestampRaw) {
|
||||||
let day = date.getDate().toString().padStart(2, "0");
|
let day = date.getDate().toString().padStart(2, "0");
|
||||||
return `${year}-${month}-${day}`;
|
return `${year}-${month}-${day}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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>
|
||||||
<div class="tab-content" id="nav-tabContent-chat-messages">
|
|
||||||
|
<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
|
<template
|
||||||
v-for="(details, callsign, key) in chat.callsign_list"
|
v-for="(details, callsign, key) in chat.callsign_list"
|
||||||
:key="callsign"
|
:key="callsign"
|
||||||
|
@ -62,6 +180,10 @@ function getDateTime(timestampRaw) {
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
@ -1,153 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
// @ts-nocheck
|
|
||||||
|
|
||||||
import { setActivePinia } from "pinia";
|
|
||||||
import pinia from "../store/index";
|
|
||||||
setActivePinia(pinia);
|
|
||||||
|
|
||||||
import { useStateStore } from "../store/stateStore.js";
|
|
||||||
const state = useStateStore(pinia);
|
|
||||||
|
|
||||||
import { useChatStore } from "../store/chatStore.js";
|
|
||||||
const chat = useChatStore(pinia);
|
|
||||||
|
|
||||||
import { startChatWithNewStation } from "../js/chatHandler";
|
|
||||||
|
|
||||||
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";
|
|
||||||
|
|
||||||
const newChatCall = ref(null);
|
|
||||||
|
|
||||||
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";
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}));
|
|
||||||
|
|
||||||
function newChat() {
|
|
||||||
let callsign = this.newChatCall.value;
|
|
||||||
callsign = callsign.toUpperCase().trim();
|
|
||||||
if (callsign === "") return;
|
|
||||||
//startChatWithNewStation(callsign);
|
|
||||||
//updateAllChat(false);
|
|
||||||
this.newChatCall.value = "";
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<nav class="navbar bg-body-tertiary p-2 border-bottom">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row w-100">
|
|
||||||
<div class="col-3 p-0">
|
|
||||||
<button
|
|
||||||
class="btn btn-outline-primary w-100"
|
|
||||||
data-bs-target="#newChatModal"
|
|
||||||
data-bs-toggle="modal"
|
|
||||||
>
|
|
||||||
<i class="bi bi-pencil-square"> Start a new chat</i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col-5 ms-2 p-0">
|
|
||||||
<!-- right side of chat nav bar-->
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</template>
|
|
|
@ -193,8 +193,8 @@ const speedChartData = computed(() => ({
|
||||||
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<nav class="navbar sticky-bottom bg-body-tertiary border-top">
|
||||||
<div class="container-fluid mt-2 p-0">
|
<div class="container-fluid p-0">
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
id="expand_textarea"
|
id="expand_textarea"
|
||||||
|
@ -349,7 +349,7 @@ const speedChartData = computed(() => ({
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue