diff --git a/app.vue b/app.vue index 717f0fd..47873f0 100644 --- a/app.vue +++ b/app.vue @@ -1,14 +1,11 @@ - diff --git a/components/Message.vue b/components/Message.vue index e37d1e4..70115c5 100644 --- a/components/Message.vue +++ b/components/Message.vue @@ -31,23 +31,20 @@ const messageDate = ref(); const showHover = ref(false); const date = new Date(props.timestamp); +const now = new Date() -console.log("message:", props.text); -let dateHour = date.getHours(); -let dateMinute = date.getMinutes(); -if (props.format == "12") { - if (dateHour > 12) { - dateHour = dateHour - 12; - messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute} PM` - } else { - if (dateHour == 0) { - dateHour = 12; +if (now.getUTCHours() >= 0) { + let dateHour = date.getUTCHours(); + let dateMinute = date.getUTCMinutes(); + if (props.format == "12") { + if (dateHour > 12) { + dateHour = dateHour - 12; } - messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute} ${dateHour >= 0 && dateHour < 13 ? "AM" : "PM"}` - } -} else { - messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute}` + messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute} ${dateHour > 0 && dateHour < 13 ? "AM" : "PM"}` + } else { + messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute}` } +} //function toggleTooltip(e: Event) { // showHover.value = !showHover.value; diff --git a/components/MessageArea.vue b/components/MessageArea.vue index a1be77d..3389475 100644 --- a/components/MessageArea.vue +++ b/components/MessageArea.vue @@ -4,9 +4,9 @@ - + - + @@ -19,18 +19,20 @@ import type { MessageResponse } from '~/types/interfaces'; import scrollToBottom from '~/utils/scrollToBottom'; -const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>(); +const props = defineProps<{ channelUrl: string, amount?: number, offset?: number, reverse?: boolean }>(); const messagesRes: MessageResponse[] | undefined = await fetchWithApi( `${props.channelUrl}/messages`, { query: { "amount": props.amount ?? 100, "offset": props.offset ?? 0 } } ); -if (messagesRes) { +if (messagesRes && props.reverse) { messagesRes.reverse(); } const messages = ref([]); +const route = useRoute(); + const messageInput = ref(); const messagesElement = ref(); @@ -52,7 +54,7 @@ if (accessToken && apiBase) { ["Authorization", accessToken] ); if (ws) break; - await sleep(5000); + await sleep(10000); } while (!ws); ws.addEventListener("open", (event) => { @@ -70,9 +72,6 @@ ws.addEventListener("message", async (event) => { scrollToBottom(messagesElement); } }); - - - } else { await refresh(); } @@ -124,15 +123,13 @@ onMounted(async () => { #message-form { display: flex; justify-content: center; + height: 60%; } #message-box-input { width: 80%; background-color: rgb(50, 50, 50); border: none; - color: inherit; - padding-left: 1dvw; - padding-right: 1dvw; } #messages { @@ -145,12 +142,11 @@ onMounted(async () => { #submit-button { background-color: inherit; border: none; - color: rgb(200, 200, 200); - font-size: 1.5em; + color: white; } #submit-button:hover { - color: rgb(255, 255, 255); + background-color: rgb(40, 40, 40); } \ No newline at end of file