mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 10:04:33 +02:00
adjusted chat navbars
This commit is contained in:
DJ2LS
parent
cb8d17d006
commit
1449869c0f
|
|
@ -1,5 +1,4 @@
|
|||
<script setup lang="ts">
|
||||
import chat_navbar from "./chat_navbar.vue";
|
||||
import chat_conversations from "./chat_conversations.vue";
|
||||
import chat_messages from "./chat_messages.vue";
|
||||
import chat_new_message from "./chat_new_message.vue";
|
||||
|
|
@ -7,9 +6,6 @@ import chat_new_message from "./chat_new_message.vue";
|
|||
|
||||
<template>
|
||||
<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="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">
|
||||
<!------messages area ---------------------------------------------------------------------->
|
||||
<div
|
||||
class="container overflow-auto"
|
||||
class="container overflow-auto p-0"
|
||||
id="message-container"
|
||||
style="height: calc(100% - 225px)"
|
||||
style="height: calc(100% - 135px)"
|
||||
>
|
||||
<chat_messages />
|
||||
</div>
|
||||
|
||||
<!------ new message area ---------------------------------------------------------------------->
|
||||
|
||||
<chat_new_message />
|
||||
|
||||
<chat_new_message />
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,10 @@ setActivePinia(pinia);
|
|||
|
||||
import { useChatStore } from "../store/chatStore.js";
|
||||
import { getBeaconDataByCallsign } from "../js/api.js";
|
||||
import { startChatWithNewStation } from "../js/chatHandler";
|
||||
|
||||
import { ref, computed } from "vue";
|
||||
|
||||
|
||||
const chat = useChatStore(pinia);
|
||||
|
||||
|
|
@ -34,8 +38,36 @@ function getDateTime(timestamp) {
|
|||
let seconds = date.getSeconds().toString().padStart(2, "0");
|
||||
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>
|
||||
<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
|
||||
class="list-group bg-body-tertiary m-0 p-1"
|
||||
id="chat-list-tab"
|
||||
|
|
|
|||
|
|
@ -21,10 +21,128 @@ function getDateTime(timestampRaw) {
|
|||
let day = date.getDate().toString().padStart(2, "0");
|
||||
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>
|
||||
|
||||
<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
|
||||
v-for="(details, callsign, key) in chat.callsign_list"
|
||||
:key="callsign"
|
||||
|
|
@ -62,6 +180,10 @@ function getDateTime(timestampRaw) {
|
|||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="container-fluid mt-2 p-0">
|
||||
<nav class="navbar sticky-bottom bg-body-tertiary border-top">
|
||||
<div class="container-fluid p-0">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="expand_textarea"
|
||||
|
|
@ -349,7 +349,7 @@ const speedChartData = computed(() => ({
|
|||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue