Skip to content
Extraits de code Groupes Projets
Valider d23d1819 rédigé par Brieuc Dubois's avatar Brieuc Dubois
Parcourir les fichiers

Right panel on Sessions

parent a5d17dac
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
......@@ -15,6 +15,9 @@
margin: 0;
padding: 0;
font-family: sans-serif;
height: 100vh;
display: flex;
flex-direction: column;
}
</style>
</html>
......@@ -27,7 +27,12 @@
"login": {
"email": "Email",
"password": "Mot de passe",
"login": "Se connecter"
"login": "Se connecter",
"noAccountText": "Pas encore de compte ?",
"noAccountLink": "Inscrivez-vous ici"
},
"session": {
"participants": "Participants"
},
"admin": {
"actions": "Actions",
......@@ -87,7 +92,8 @@
"submit": "Envoyer",
"sent": "Envoyé !",
"next": "Suivant",
"start": "Commencer"
"start": "Commencer",
"thank-you": "Merci !"
},
"utils": {
"month": {
......
......@@ -14,9 +14,18 @@
messages = newMessages;
});
let wsConnected = get(session.wsConnected);
let wsConnected = true;
let timeout: number;
session.wsConnected.subscribe((newConnected) => {
wsConnected = newConnected;
clearTimeout(timeout);
if (newConnected === wsConnected) return;
else if (newConnected) wsConnected = newConnected;
else {
timeout = setTimeout(() => {
wsConnected = newConnected;
}, 1000);
}
});
onMount(async () => {
......@@ -25,7 +34,7 @@
});
</script>
<div class="flex flex-col md:my-4 min-w-fit w-full max-w-4xl border-2 rounded-lg">
<div class="flex flex-col my-4 min-w-fit w-full max-w-4xl border-2 rounded-lg">
<div class="flex-grow h-48 overflow-auto flex-col-reverse px-4 flex mb-2">
{#each messages.sort((a, b) => b.created_at.getTime() - a.created_at.getTime()) as message (message.id)}
<MessageC {message} />
......
......@@ -18,28 +18,20 @@
const isSender = message.user.id == $user?.id;
</script>
<div class="w-full flex my-2" class:flex-row-reverse={isSender}>
<div class="flex flex-col">
<div class="rounded-full size-14 mx-2 bg-gray-200" title={message.user.nickname}>
{#if message.user.type == 0}
<Icon src={Sparkles} class="w-6 m-auto" />
{:else if message.user.type == 1}
<Icon src={AcademicCap} class="w-8 m-auto" />
{:else}
<Icon src={User} class="w-8 m-auto" />
{/if}
</div>
<div class="text-center text-gray-400 text-sm">
{displayedTime}
</div>
<div class="chat" class:chat-start={!isSender} class:chat-end={isSender}>
<div class="rounded-full p-3 mx-2 bg-gray-200 chat-image" title={message.user.nickname}>
{#if message.user.type == 0}
<Icon src={Sparkles} class="w-6 m-auto" />
{:else if message.user.type == 1}
<Icon src={AcademicCap} class="w-6 m-auto" />
{:else}
<Icon src={User} class="w-6 m-auto" />
{/if}
</div>
<div
class="rounded-b-xl p-4 w-fit h-fit"
class:bg-blue-200={isSender}
class:bg-gray-200={!isSender}
class:rounded-tl-xl={isSender}
class:rounded-tr-xl={!isSender}
>
<div class="max-w-3xl">{message.content}</div>
<div class="chat-bubble" class:chat-bubble-secondary={isSender}>
{message.content}
</div>
<div class="chat-footer opacity-50">
{displayedTime}
</div>
</div>
......@@ -37,14 +37,18 @@
</script>
<div class="w-full">
<ul class="h-10 flex justify-around border-y-2 divide-x-2">
<ul class="flex justify-around divide-x-2 border-y-2 py-1">
{#each config.SPECIAL_CHARS as char (char)}
<button
class="flex-grow hover:bg-gray-100"
class="border-none"
on:click={() => {
message += char;
}}>{char}</button
}}
>
<kbd class="kbd">
{char}
</kbd>
</button>
{/each}
</ul>
<div class="w-full flex">
......@@ -61,7 +65,7 @@
}
}}
/>
<button class="valid w-12 button !rounded-none !rounded-br-lg" on:click={sendMessage}>
<button class="btn btn-primary size-16" on:click={sendMessage}>
<Icon src={PaperAirplane} />
</button>
</div>
......
export default {
API_URL: 'http://languagelab.sipr.ucl.ac.be:8000/api/v1',
APP_URL: 'http://languagelab.sipr.ucl.ac.be',
WS_URL: 'ws://languagelab.sipr.ucl.ac.be:8000/api/v1/ws',
//API_URL: 'http://localhost:8000/api/v1',
//APP_URL: 'http://localhost:5173',
//WS_URL: 'ws://localhost:8000/api/v1/ws',
//API_URL: 'http://languagelab.sipr.ucl.ac.be:8000/api/v1',
//APP_URL: 'http://languagelab.sipr.ucl.ac.be',
//WS_URL: 'ws://languagelab.sipr.ucl.ac.be:8000/api/v1/ws',
API_URL: 'http://localhost:8000/api/v1',
APP_URL: 'http://localhost:5173',
WS_URL: 'ws://localhost:8000/api/v1/ws',
LEARNING_LANGUAGES: ['fr'], // future: ['fr', 'en']
SPECIAL_CHARS: [
'é',
......
......@@ -7,6 +7,7 @@
import { onMount } from 'svelte';
import { t } from '$lib/services/i18n';
import { user } from '$lib/types/user';
import { AcademicCap, Icon, Sparkles, User } from 'svelte-hero-icons';
export let data;
let session: Session | null = null;
......@@ -27,27 +28,34 @@
});
</script>
<div class="h-screen flex flex-col">
{#if session}
<div class="mx-6 mt-4 text-lg text-center">
#{session.id}:
{#each session.users as sessionUser, i (sessionUser.id)}
{#if sessionUser === $user}
<span class="font-bold">{sessionUser.nickname}</span> ({$t(
'users.type.' + sessionUser.type
).toLowerCase()})<!--
-->{:else}
{sessionUser.nickname} ({$t(
'users.type.' + sessionUser.type
).toLowerCase()})<!--
-->{/if}<!--
-->{#if i < session.users.length - 1}
,&nbsp;
{/if}
{/each}
</div>
<div class="flex flex-row flex-grow justify-evenly">
{#if session}
<div class="h-full grid lg:grid-cols-4">
<div class=""></div>
<div class="flex flex-row flex-grow col-span-2">
<Chatbox {session} token={data.token} />
</div>
{/if}
</div>
<div class="flex flex-col justify-evenly m-8">
<div class="border-2 rounded-lg p-2">
<h2 class="text-center font-bold text-xl">#{session.id}</h2>
<div class="mb-2">{$t('session.participants')}:</div>
<ul>
{#each session.users as sessionUser (sessionUser.id)}
<li class="list-disc list-inside">
<div class="inline-flex space-x-2">
{#if sessionUser.type == 0}
<Icon src={Sparkles} class="w-5" />
{:else if sessionUser.type == 1}
<Icon src={AcademicCap} class="w-5" />
{:else}
<Icon src={User} class="w-5" />
{/if}
<span class:font-bold={sessionUser === $user}>{sessionUser.nickname}</span>
</div>
</li>
{/each}
</ul>
</div>
</div>
</div>
{/if}
0% Chargement en cours ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter