From 3428477d99a13ef9b45278f10ef1ada78289c081 Mon Sep 17 00:00:00 2001
From: riblanc <richard.blc25@gmail.com>
Date: Fri, 6 Oct 2023 05:15:35 +0200
Subject: [PATCH] ADD STATUS (FRONTEND):

Add user status to profile page.
---
 front/components/profile/profile.vue | 25 ++++++++++++++++++++++++-
 front/pages/profile/[id].vue         |  8 +++++---
 front/pages/profile/index.vue        |  5 ++++-
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/front/components/profile/profile.vue b/front/components/profile/profile.vue
index 0a74dbf7..df369a21 100644
--- a/front/components/profile/profile.vue
+++ b/front/components/profile/profile.vue
@@ -1,10 +1,17 @@
 <script lang="ts">
 import type { User } from '~/types/user';
 
+enum Status {
+  OFFLINE = 'offline',
+  ONLINE = 'online',
+  IN_GAME = 'in game',
+}
+
 export default defineNuxtComponent({
-  props: ['id'],
+  props: ['id', 'socket'],
   data: () => ({
     user: null as User | null,
+    status: Status.OFFLINE
   }),
   async beforeMount() {
     const data = await this.$api.get(`/user/${this.id}`);
@@ -14,6 +21,13 @@ export default defineNuxtComponent({
       return ;
     }
     this.user = data;
+    this.status = this.user.status;
+    this.socket.on(`user:${this.id}:status`, (data: { status: Status }) => {
+      this.status = data.status;
+    });
+  },
+  async unmounted() {
+    this.socket.off(`user:${this.id}:status`);
   },
   methods: {
     editable() {
@@ -25,6 +39,14 @@ export default defineNuxtComponent({
     onUpdateUser(user: User) {
       console.log(user);
       this.user = user;
+    },
+    getStatusColor() {
+      if (this.status === Status.OFFLINE)
+        return '#be4545';
+      if (this.status === Status.ONLINE)
+        return '#62de62';
+      if (this.status === Status.IN_GAME)
+        return '#6161c9';
     }
   }
 })
@@ -37,6 +59,7 @@ export default defineNuxtComponent({
       <div class="d-flex flex-column h-100 overflow-auto align-center">
         <ProfileAvatar :user="this.user" :editable="this.editable()" @user:updated="this.onUpdateUser" />
         <ProfileUsername :user="this.user" :editable="this.editable()" @user:updated="this.onUpdateUser" />
+        <p :style="{'color': this.getStatusColor()}">{{ this.status }}</p>
       </div>
     </div>
     <div v-else class="d-flex w-100 h-100">
diff --git a/front/pages/profile/[id].vue b/front/pages/profile/[id].vue
index 14481f7c..5606d0df 100644
--- a/front/pages/profile/[id].vue
+++ b/front/pages/profile/[id].vue
@@ -1,10 +1,12 @@
-<script setup lang="ts">
-
+<script lang="ts">
+export default defineNuxtComponent({
+  props: ['socket'],
+})
 </script>
 
 <template>
   <div class="profile-page d-flex align-center justify-center">
-    <Profile :id="this.$route.params.id" />
+    <Profile :socket="this.socket" :id="this.$route.params.id" />
   </div>
 </template>
 
diff --git a/front/pages/profile/index.vue b/front/pages/profile/index.vue
index fd469de9..d6721622 100644
--- a/front/pages/profile/index.vue
+++ b/front/pages/profile/index.vue
@@ -1,9 +1,12 @@
 <script lang="ts">
+export default defineNuxtComponent({
+  props: ['socket'],
+})
 </script>
 
 <template>
   <div class="profile-page d-flex align-center justify-center">
-    <Profile :id="this.$auth.user.id" />
+    <Profile :socket="this.socket" :id="this.$auth.user.id" />
   </div>
 </template>