gorb/frontend
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Merge pull request 'dev' (#2) from dev into main
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details

Browse source 
Reviewed-on: #2
This commit is contained in:
SauceyRed 2025-05-29 14:48:11 +00:00
commit 381124f778
3 changed files with 35 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

7
app.vue
View file

@ -1,11 +1,14 @@
<template> <template>
<div> <div>
<Banner v-if="banner" />
<NuxtPage /> <NuxtPage />
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
const banner = useState("banner", () => false);
</script> </script>
<style> <style>
@ -42,4 +45,8 @@ a {
border-right: 1px solid rgb(70, 70, 70); border-right: 1px solid rgb(70, 70, 70);
} }
.rounded-corners {
border-radius: .3rem;
}
</style> </style>

15
components/Message.vue
View file

@ -31,20 +31,23 @@ const messageDate = ref<string>();
const showHover = ref(false); const showHover = ref(false);
const date = new Date(props.timestamp); const date = new Date(props.timestamp);
const now = new Date()
if (now.getUTCHours() >= 0) { console.log("message:", props.text);
let dateHour = date.getUTCHours(); let dateHour = date.getHours();
let dateMinute = date.getUTCMinutes(); let dateMinute = date.getMinutes();
if (props.format == "12") { if (props.format == "12") {
if (dateHour > 12) { if (dateHour > 12) {
dateHour = dateHour - 12; dateHour = dateHour - 12;
messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute} PM`
} else {
if (dateHour == 0) {
dateHour = 12;
}
messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute} ${dateHour >= 0 && dateHour < 13 ? "AM" : "PM"}`
} }
messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute} ${dateHour > 0 && dateHour < 13 ? "AM" : "PM"}`
} else { } else {
messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute}` messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute}`
} }
}
//function toggleTooltip(e: Event) { //function toggleTooltip(e: Event) {
// showHover.value = !showHover.value; // showHover.value = !showHover.value;

24
components/MessageArea.vue
View file

@ -4,9 +4,9 @@
<Message v-for="message of messages" :username="message.user.display_name ?? message.user.username" :text="message.message" <Message v-for="message of messages" :username="message.user.display_name ?? message.user.username" :text="message.message"
:timestamp="uuidToTimestamp(message.uuid)" :img="message.user.avatar" format="12" /> :timestamp="uuidToTimestamp(message.uuid)" :img="message.user.avatar" format="12" />
</div> </div>
<div id="message-box"> <div id="message-box" class="rounded-corners">
<form id="message-form" @submit="sendMessage"> <form id="message-form" @submit="sendMessage">
<input v-model="messageInput" type="text" name="message-input" id="message-box-input" autocomplete="off"> <input v-model="messageInput" id="message-box-input" class="rounded-corners" type="text" name="message-input" autocomplete="off">
<button id="submit-button" type="submit"> <button id="submit-button" type="submit">
<Icon name="lucide:send" /> <Icon name="lucide:send" />
</button> </button>
@ -19,20 +19,18 @@
import type { MessageResponse } from '~/types/interfaces'; import type { MessageResponse } from '~/types/interfaces';
import scrollToBottom from '~/utils/scrollToBottom'; import scrollToBottom from '~/utils/scrollToBottom';
const props = defineProps<{ channelUrl: string, amount?: number, offset?: number, reverse?: boolean }>(); const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
const messagesRes: MessageResponse[] | undefined = await fetchWithApi( const messagesRes: MessageResponse[] | undefined = await fetchWithApi(
`${props.channelUrl}/messages`, `${props.channelUrl}/messages`,
{ query: { "amount": props.amount ?? 100, "offset": props.offset ?? 0 } } { query: { "amount": props.amount ?? 100, "offset": props.offset ?? 0 } }
); );
if (messagesRes && props.reverse) { if (messagesRes) {
messagesRes.reverse(); messagesRes.reverse();
} }
const messages = ref<MessageResponse[]>([]); const messages = ref<MessageResponse[]>([]);
const route = useRoute();
const messageInput = ref<string>(); const messageInput = ref<string>();
const messagesElement = ref<HTMLDivElement>(); const messagesElement = ref<HTMLDivElement>();
@ -54,7 +52,7 @@ if (accessToken && apiBase) {
["Authorization", accessToken] ["Authorization", accessToken]
); );
if (ws) break; if (ws) break;
await sleep(10000); await sleep(5000);
} while (!ws); } while (!ws);
ws.addEventListener("open", (event) => { ws.addEventListener("open", (event) => {
@ -72,6 +70,9 @@ ws.addEventListener("message", async (event) => {
scrollToBottom(messagesElement); scrollToBottom(messagesElement);
} }
}); });
} else { } else {
await refresh(); await refresh();
} }
@ -123,13 +124,15 @@ onMounted(async () => {
#message-form { #message-form {
display: flex; display: flex;
justify-content: center; justify-content: center;
height: 60%;
} }
#message-box-input { #message-box-input {
width: 80%; width: 80%;
background-color: rgb(50, 50, 50); background-color: rgb(50, 50, 50);
border: none; border: none;
color: inherit;
padding-left: 1dvw;
padding-right: 1dvw;
} }
#messages { #messages {
@ -142,11 +145,12 @@ onMounted(async () => {
#submit-button { #submit-button {
background-color: inherit; background-color: inherit;
border: none; border: none;
color: white; color: rgb(200, 200, 200);
font-size: 1.5em;
} }
#submit-button:hover { #submit-button:hover {
background-color: rgb(40, 40, 40); color: rgb(255, 255, 255);
} }
</style> </style>