From a9b8aba72dc6bc7da3254c83cc090f2e0dc1b452 Mon Sep 17 00:00:00 2001
From: Brieuc Dubois <git@bhasher.com>
Date: Thu, 14 Mar 2024 15:26:41 +0100
Subject: [PATCH] frontend: messages
---
.../lib/components/sessions/chatbox.svelte | 47 ++++++++++---------
.../sessions/editParticipants.svelte | 25 ----------
.../lib/components/sessions/message.svelte | 22 +++++++++
frontend/src/routes/session/+page.svelte | 19 +-------
4 files changed, 50 insertions(+), 63 deletions(-)
create mode 100644 frontend/src/lib/components/sessions/message.svelte
diff --git a/frontend/src/lib/components/sessions/chatbox.svelte b/frontend/src/lib/components/sessions/chatbox.svelte
index 423e97c9..6c20524f 100644
--- a/frontend/src/lib/components/sessions/chatbox.svelte
+++ b/frontend/src/lib/components/sessions/chatbox.svelte
@@ -3,7 +3,8 @@
import Message from '$lib/types/message';
import type Session from '$lib/types/session';
import { onMount } from 'svelte';
- import { get } from 'svelte/store';
+ import MessageC from './message.svelte';
+ import { Icon, PaperAirplane } from 'svelte-hero-icons';
let message = '';
export let session: Session;
@@ -26,32 +27,36 @@
message = '';
messages = session.messages;
}
+
+ function scrollToBottom(node: HTMLElement) {
+ node.scrollTop = node.scrollHeight;
+ }
</script>
-<div id="mainbox">
- <div id="chatbox">
+<div class="flex flex-col md:my-8 min-w-fit w-full max-w-4xl border-2">
+ <div class="flex-grow h-48 overflow-auto px-4 flex flex-col" use:scrollToBottom>
{#each messages.sort((a, b) => a.created_at.getTime() - b.created_at.getTime()) as message (message.id)}
- {#if message.user === JWTSession.user()}
- <div>You: {message.content}</div>
- {:else}
- <div>{message.user.username}: {message.content}</div>
- {/if}
+ <MessageC {message} />
{/each}
</div>
- <input
- type="text"
- id="chatinput"
- placeholder="Send a message..."
- bind:value={message}
- on:keypress={async (e) => {
- if (e.key === 'Enter') {
- await sendMessage();
- }
- }}
- />
+ <div class="flex flex-row h-20 mt-2">
+ <textarea
+ class="flex-grow border-2 border-gray-300 rounded-md p-2 resize-none overflow-y-hidden"
+ placeholder="Send a message..."
+ bind:value={message}
+ on:keypress={async (e) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ await sendMessage();
+ }
+ }}
+ />
+ <button class="w-12 button rounded-md" on:click={sendMessage}>
+ <Icon src={PaperAirplane} />
+ </button>
+ </div>
</div>
-<style lang="less">
+<!-- <style lang="less">
#mainbox {
display: flex;
flex-direction: column;
@@ -69,4 +74,4 @@
#chatinput {
height: 50px;
}
-</style>
+</style> -->
diff --git a/frontend/src/lib/components/sessions/editParticipants.svelte b/frontend/src/lib/components/sessions/editParticipants.svelte
index 71e2bf66..e3656d01 100644
--- a/frontend/src/lib/components/sessions/editParticipants.svelte
+++ b/frontend/src/lib/components/sessions/editParticipants.svelte
@@ -85,28 +85,3 @@
</table>
</div>
</div>
-<!--
-<style lang="less">
- .menu {
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -75%);
- background-color: white;
- padding: 20px;
- border-radius: 10px;
- }
-
- #bg {
- background-color: #000c;
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
-
- td {
- min-width: 200px;
- }
-</style> -->
diff --git a/frontend/src/lib/components/sessions/message.svelte b/frontend/src/lib/components/sessions/message.svelte
new file mode 100644
index 00000000..ce47fa03
--- /dev/null
+++ b/frontend/src/lib/components/sessions/message.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+ import JWTSession from '$lib/stores/JWTSession';
+ import type Message from '$lib/types/message';
+
+ export let message: Message;
+
+ const isSender = message.user == JWTSession.user();
+</script>
+
+<div class="w-full flex" class:justify-end={isSender}>
+ <div
+ class="bg-gray-200 rounded-b-xl my-2 p-4 w-fit"
+ class:bg-blue-200={isSender}
+ class:rounded-tl-xl={isSender}
+ class:rounded-tr-xl={!isSender}
+ >
+ <div class="font-bold mb-1 capitalize">
+ {message.user.username}
+ </div>
+ <div class="max-w-3xl">{message.content}</div>
+ </div>
+</div>
diff --git a/frontend/src/routes/session/+page.svelte b/frontend/src/routes/session/+page.svelte
index f7400e74..f2b50f8b 100644
--- a/frontend/src/routes/session/+page.svelte
+++ b/frontend/src/routes/session/+page.svelte
@@ -24,26 +24,11 @@
});
</script>
-<div class="container">
+<div class="h-screen flex flex-col">
<Header />
{#if session}
- <div class="vareas">
+ <div class="flex flex-row flex-grow justify-evenly">
<Chatbox {session} />
</div>
{/if}
</div>
-
-<style lang="less">
- .container {
- display: flex;
- flex-direction: column;
- height: 100vh;
- }
-
- .vareas {
- display: flex;
- flex-direction: row;
- flex-grow: 1;
- justify-content: space-evenly;
- }
-</style>
--
GitLab