Merge pull request #18 from hinagiku-dev/discussion

chatroom
hinagiku-dev · Nov 27, 2024 · 0de54fb · 0de54fb
2 parents 730e3ac + b63d74b
commit 0de54fb
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 57 deletions.
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
@@ -30,15 +30,15 @@
 		justify-content: left;
 		gap: 1rem;
 		align-items: center;
-		padding: 1rem;
+		padding: 0.5rem;
 		background-color: #333;
 		color: white;
 		z-index: 1000;
 		position: fixed;
 		top: 0;
 		left: 0;
 		width: 100%;
-		height: 2.5rem;
+		height: 3.5rem;
 	}
 
 	.menu {
@@ -55,6 +55,6 @@
 		z-index: 1000;
 		display: flex;
 		cursor: pointer;
-		font-size: 1rem;
+		font-size: 1.5rem;
 	}
 </style>
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
@@ -1,16 +1,17 @@
 <script lang="ts">
 	import { sidebarOpen } from '$lib/stores/sidebar';
+	import { user } from '$lib/stores/auth';
 	import Auth from '$lib/components/Auth.svelte';
-	import { profile } from '$lib/stores/profile';
+	//import { profile } from '$lib/stores/profile';
 	import { LayoutDashboard, UserCog } from 'lucide-svelte';
 </script>
 
 <div class="sidebar" class:open={$sidebarOpen}>
 	<nav>
-		{#if $profile}
+		{#if $user}
 			<a href="/profile" class="inline-flex items-center">
 				<UserCog size={30} class="inline-block text-primary-600" />
-				<div class="inline-block w-auto text-lg">{$profile.displayName}</div>
+				<div class="inline-block w-auto text-lg">{$user.displayName}</div>
 			</a>
 			<a class="inline-flex items-center" href="/dashboard">
 				<LayoutDashboard size={30} class="inline-block w-auto text-primary-600" />

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -20,6 +20,7 @@
 	main {
 		margin-left: 0;
 		transition: margin-left 0.3s ease;
+		margin-top: 3.5rem;
 	}
 
 	main.sidebar-open {

diff --git a/src/routes/dashboard/+page.svelte b/src/routes/dashboard/+page.svelte
@@ -146,17 +146,11 @@
 									<span
 										class="rounded-full px-3 py-1 text-sm font-medium {session.status === 'active'
 											? 'bg-green-100 text-green-600'
-											: session.status === 'waiting'
+											: session.status === 'preparing'
 												? 'bg-yellow-100 text-yellow-600'
 												: 'bg-gray-100 text-gray-600'}"
 									>
-										{session.status === 'active'
-											? 'Active'
-											: session.status === 'waiting'
-												? 'Waiting'
-												: session.status === 'draft'
-													? 'Draft'
-													: 'Ended'}
+										{session.status}
 									</span>
 								</div>
 								<div class="flex items-center justify-between">

diff --git a/src/routes/session/[id]/+page.svelte b/src/routes/session/[id]/+page.svelte
@@ -165,15 +165,15 @@
 					<span>{Object.keys($session?.participants).length} participants</span>
 				</div>
 
-				{#if $session?.status === 'draft'}
+				{#if $session?.status === 'preparing'}
 					<button
 						class="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-4 py-2 text-white hover:bg-primary-700"
 						onclick={startSession}
 					>
 						<Play size={20} />
 						Start Session
 					</button>
-				{:else if $session?.status === 'waiting'}
+				{:else if $session?.status === 'preparing'}
 					{#if isHost}
 						<form method="POST" action="?/startIndividualStage">
 							<button
@@ -187,7 +187,7 @@
 						</form>
 						<!-- show QRcode by page id -->
 						<QRCode value={$page.params.id} />
-					{:else if $session.stage === 'individual'}
+					{:else if $session.status === 'individual'}
 						<button
 							class="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-4 py-2 text-white hover:bg-primary-700"
 							onclick={startIndividualStage}

diff --git a/src/routes/session/[id]/discussion/[userId]/+page.server.ts b/src/routes/session/[id]/discussion/[userId]/+page.server.ts
@@ -1,30 +1,12 @@
-import { adminDb } from '$lib/server/firebase';
 import { redirect } from '@sveltejs/kit';
-import type { Actions, PageServerLoad } from '../$types';
+import type { PageServerLoad } from './$types';
 
-export const load: PageServerLoad = async ({ params, locals }) => {
+export const load: PageServerLoad = async ({ locals }) => {
 	if (!locals.user) {
 		throw redirect(303, '/login');
 	}
 
-	const sessionRef = adminDb.collection('discussion').doc(params.id);
-	console.log(sessionRef);
-	//const sessionDoc = await sessionRef.get();
-
-	/*
-	if (!sessionDoc.exists) {
-		throw error(404, 'User is not in the session');
-	}
-		*/
-
-	return {};
+	return {
+		user: locals.user
+	};
 };
-
-export const actions = {
-	default: async ({ locals }) => {
-		if (!locals.user) {
-			throw redirect(303, '/login');
-		}
-		//send message to the server
-	}
-} satisfies Actions;
diff --git a/src/routes/session/[id]/discussion/[userId]/+page.svelte b/src/routes/session/[id]/discussion/[userId]/+page.svelte
@@ -1,7 +1,8 @@
 <script>
-	let messages = [{ sender: 'Support', text: 'Hello! How can I assist you today?' }];
-	let inputText = '';
-	//import { User } from 'lucide-svelte'
+	let messages = $state([{ sender: 'Support', text: 'Hello! How can I assist you today?' }]);
+	let inputText = $state('');
+	import { Mic } from 'lucide-svelte';
+	let recording = $state(false);
 
 	function sendMessage() {
 		if (messages[messages.length - 1].sender === 'me') return;
@@ -10,6 +11,22 @@
 			inputText = '';
 		}
 	}
+	function Recording() {
+		if (recording) {
+			console.log('Recording stopped');
+			recording = false;
+			sendAudio();
+		} else {
+			console.log('Recording started');
+			recording = true;
+		}
+	}
+
+	function sendAudio() {
+		console.log('Audio sent');
+		if (messages[messages.length - 1].sender === 'me') return;
+		messages = [...messages, { sender: 'me', text: 'SomeAudio' }];
+	}
 </script>
 
 <main class="mt-20">
@@ -19,25 +36,34 @@
 				<div class="message" class:me={message.sender === 'me'}>
 					<!--<User class="inline-block"/>-->
 					{#if message.sender !== 'me'}
-						<img src={message.avatar} alt="Avatar" class="avatar left" />
+						<!--<img src={message.avatar} alt="Avatar" class="avatar left" />-->
 					{/if}
 					<p class="font-bold">{message.sender === 'me' ? 'You' : message.sender}:</p>
 					{message.text}
 					{#if message.sender === 'me'}
-						<img src={message.avatar} alt="Avatar" class="avatar right" />
+						<!--<img src={message.avatar} alt="Avatar" class="avatar right" />-->
 					{/if}
 				</div>
 			{/each}
 		</div>
+
 		<div class="input-area">
+			<button
+				disabled={messages[messages.length - 1].sender === 'me'}
+				onmousedown={Recording}
+				onmouseup={Recording}
+				class="recordbtn"
+			>
+				<Mic size={24} />
+			</button>
 			<input
 				class="inline-block"
 				type="text"
 				bind:value={inputText}
 				placeholder="Type your message..."
-				on:keyup={(e) => e.key === 'Enter' && sendMessage()}
+				onkeyup={(e) => e.key === 'Enter' && sendMessage()}
 			/>
-			<button disabled={messages[messages.length - 1].sender === 'me'} on:click={sendMessage}
+			<button disabled={messages[messages.length - 1].sender === 'me'} onclick={sendMessage}
 				>Send</button
 			>
 			<div class="w-full"></div>
@@ -82,21 +108,19 @@
 		background-color: #f0f0f0;
 	}
 	.input-area button:active {
-		background-color: #e0e0e0;
+		background-color: #e0e0e0 !important;
 	}
 	.input-area button:disabled {
 		pointer-events: none;
 	}
-	.avatar {
-		width: 40px;
-		height: 40px;
+	.recordbtn {
+		background-color: #f0f0f0;
+		border: none;
 		border-radius: 50%;
-		margin: 0 10px;
-	}
-	.avatar.left {
-		order: -1;
+		padding: 10px;
+		margin-right: 10px;
 	}
-	.avatar.right {
-		order: 1;
+	.recordbtn:active {
+		background-color: red;
 	}
 </style>