2023-09-12 15:52:16 +00:00
|
|
|
<script setup lang="ts">
|
2023-10-03 13:15:17 +00:00
|
|
|
import { setActivePinia } from "pinia";
|
|
|
|
import pinia from "../store/index";
|
2023-09-12 15:52:16 +00:00
|
|
|
setActivePinia(pinia);
|
|
|
|
|
2023-10-03 13:15:17 +00:00
|
|
|
import { useChatStore } from "../store/chatStore.js";
|
2024-02-03 12:27:14 +00:00
|
|
|
import { getBeaconDataByCallsign } from "../js/api.js";
|
2024-02-06 21:49:55 +00:00
|
|
|
|
|
|
|
import { ref, computed } from "vue";
|
|
|
|
|
2023-09-12 15:52:16 +00:00
|
|
|
const chat = useChatStore(pinia);
|
|
|
|
|
2023-10-03 13:15:17 +00:00
|
|
|
function chatSelected(callsign) {
|
|
|
|
chat.selectedCallsign = callsign.toUpperCase();
|
2023-09-20 04:46:37 +00:00
|
|
|
// scroll message container to bottom
|
|
|
|
var messageBody = document.getElementById("message-container");
|
2023-10-22 08:12:00 +00:00
|
|
|
if (messageBody != null) {
|
2023-10-04 21:34:36 +00:00
|
|
|
// needs sensible defaults
|
|
|
|
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;
|
|
|
|
}
|
2023-09-20 04:46:37 +00:00
|
|
|
|
2024-02-03 12:55:30 +00:00
|
|
|
processBeaconData(callsign);
|
2024-02-03 12:27:14 +00:00
|
|
|
}
|
|
|
|
|
2024-02-03 12:55:30 +00:00
|
|
|
async function processBeaconData(callsign) {
|
2024-02-03 12:27:14 +00:00
|
|
|
// fetch beacon data when selecting a callsign
|
2024-02-03 12:55:30 +00:00
|
|
|
let beacons = await getBeaconDataByCallsign(callsign);
|
|
|
|
chat.beaconLabelArray = beacons.map((entry) => entry.timestamp);
|
|
|
|
chat.beaconDataArray = beacons.map((entry) => entry.snr);
|
2023-09-20 04:46:37 +00:00
|
|
|
}
|
2024-01-28 19:07:15 +00:00
|
|
|
|
|
|
|
function getDateTime(timestamp) {
|
2024-02-03 12:55:30 +00:00
|
|
|
let date = new Date(timestamp);
|
|
|
|
let hours = date.getHours().toString().padStart(2, "0");
|
|
|
|
let minutes = date.getMinutes().toString().padStart(2, "0");
|
|
|
|
let seconds = date.getSeconds().toString().padStart(2, "0");
|
|
|
|
return `${hours}:${minutes}`;
|
2024-01-28 19:07:15 +00:00
|
|
|
}
|
2024-02-06 21:49:55 +00:00
|
|
|
|
|
|
|
const newChatCall = ref(null);
|
|
|
|
|
|
|
|
function newChat() {
|
|
|
|
let callsign = this.newChatCall.value;
|
|
|
|
callsign = callsign.toUpperCase().trim();
|
|
|
|
if (callsign === "") return;
|
|
|
|
this.newChatCall.value = "";
|
|
|
|
}
|
2023-09-12 15:52:16 +00:00
|
|
|
</script>
|
|
|
|
<template>
|
2024-02-08 21:05:57 +00:00
|
|
|
<nav class="navbar sticky-top bg-body-tertiary shadow">
|
|
|
|
<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>
|
2024-02-06 21:49:55 +00:00
|
|
|
|
2023-10-25 15:23:27 +00:00
|
|
|
<div
|
|
|
|
class="list-group bg-body-tertiary m-0 p-1"
|
|
|
|
id="chat-list-tab"
|
|
|
|
role="chat-tablist"
|
|
|
|
>
|
2024-02-03 12:55:30 +00:00
|
|
|
<template
|
|
|
|
v-for="(details, callsign, key) in chat.callsign_list"
|
|
|
|
:key="callsign"
|
|
|
|
>
|
2023-10-03 13:15:17 +00:00
|
|
|
<a
|
2024-01-28 19:07:15 +00:00
|
|
|
class="list-group-item list-group-item-action list-group-item-secondary rounded-2 border-0 mb-2"
|
2023-10-22 08:12:00 +00:00
|
|
|
:class="{ active: key == 0 }"
|
2024-01-27 16:44:18 +00:00
|
|
|
:id="`list-chat-list-${callsign}`"
|
2023-10-03 13:15:17 +00:00
|
|
|
data-bs-toggle="list"
|
2024-01-27 16:44:18 +00:00
|
|
|
:href="`#list-${callsign}-messages`"
|
2023-10-03 13:15:17 +00:00
|
|
|
role="tab"
|
2024-01-27 16:44:18 +00:00
|
|
|
aria-controls="list-{{callsign}}-messages"
|
|
|
|
@click="chatSelected(callsign)"
|
2023-10-03 13:15:17 +00:00
|
|
|
>
|
|
|
|
<div class="row">
|
2024-01-28 19:07:15 +00:00
|
|
|
<div class="col-9 text-truncate">
|
2024-01-27 16:44:18 +00:00
|
|
|
<strong>{{ callsign }}</strong>
|
2024-02-03 12:55:30 +00:00
|
|
|
<br />
|
|
|
|
<small> {{ details.body }} </small>
|
2023-10-18 11:45:57 +00:00
|
|
|
</div>
|
2023-10-03 13:15:17 +00:00
|
|
|
<div class="col-3">
|
2024-02-03 12:55:30 +00:00
|
|
|
<small> {{ getDateTime(details.timestamp) }} </small>
|
2023-10-03 13:15:17 +00:00
|
|
|
<button
|
2023-10-15 06:25:58 +00:00
|
|
|
class="btn btn-sm btn-outline-secondary ms-2 border-0"
|
|
|
|
data-bs-target="#deleteChatModal"
|
|
|
|
data-bs-toggle="modal"
|
2024-01-27 16:44:18 +00:00
|
|
|
@click="chatSelected(callsign)"
|
2023-10-03 13:15:17 +00:00
|
|
|
>
|
2023-10-15 06:25:58 +00:00
|
|
|
<i class="bi bi-three-dots-vertical"></i>
|
2023-10-03 13:15:17 +00:00
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
</template>
|
|
|
|
</div>
|
2023-09-12 15:52:16 +00:00
|
|
|
</template>
|