oe

back/volume/src/users/users.controller.ts

@@ -43,28 +43,6 @@ export class UsersController {
     return await this.usersService.findOnlineUsers()
   }
 
-  @Get(':id')
-  async getUserById (@Param('id', ParseIntPipe) ftId: number): Promise<User | null> {
-    return await this.usersService.findUser(ftId)
-  }
-
-  @Get()
-  @UseGuards(AuthenticatedGuard)
-  async getUser (@FtUser() profile: Profile): Promise<User | null> {
-    return await this.usersService.findUser(profile.id)
-  }
-
-  @Post()
-  @UseGuards(AuthenticatedGuard)
-  async create (@Body() payload: UserDto, @FtUser() profile: Profile) {
-    const user = await this.usersService.findUser(profile.id)
-    if (user) {
-      return await this.usersService.update(user.id, payload)
-    } else {
-      return await this.usersService.create(payload)
-    }
-  }
-
   @Get('friends')
   @UseGuards(AuthenticatedGuard)
   async getFriends (@FtUser() profile: Profile) {
@@ -77,15 +55,6 @@ export class UsersController {
     return await this.usersService.getInvits(profile.id)
   }
 
-  @Post('invit/:id')
-  @UseGuards(AuthenticatedGuard)
-  async invitUser (
-  @FtUser() profile: Profile,
-    @Param('id', ParseIntPipe) id: number
-  ) {
-    return await this.usersService.invit(profile.id, id)
-  }
-
   @Post('avatar')
   @UseGuards(AuthenticatedGuard)
   @UseInterceptors(
@@ -114,7 +83,24 @@ export class UsersController {
     return await this.usersService.addAvatar(profile.id, file.filename)
   }
 
-  @Get(':id/avatar')
+  @Get('avatar')
+  @UseGuards(AuthenticatedGuard)
+  async getAvatar (
+  @FtUser() profile: Profile,
+    @Res({ passthrough: true }) response: Response
+  ){
+      const user = await this.usersService.findUser(profile.id)
+      if (!user) return
+      const filename = user.avatar
+      const stream = createReadStream(join(process.cwd(), 'avatars/' + filename))
+      response.set({
+        'Content-Diposition': `inline; filename="${filename}"`,
+        'Content-Type': 'image/jpg'
+      })
+      return new StreamableFile(stream)
+    }
+  
+  @Get('avatar/:id')
   async getAvatarById (
     @Param('id', ParseIntPipe) ftId: number,
     @Res({ passthrough: true }) response: Response
@@ -130,11 +116,25 @@ export class UsersController {
     return new StreamableFile(stream)
   }
 
-  @Get('avatar')
+  @Get(':id')
-  async getAvatar (
+  async getUserById (@Param('id', ParseIntPipe) ftId: number): Promise<User | null> {
-  @FtUser() profile: Profile,
+    return await this.usersService.findUser(ftId)
-    @Res({ passthrough: true }) response: Response
+  }
-  ) {
+
-    return await this.getAvatarById(profile.id, response);
+  @Get()
+  @UseGuards(AuthenticatedGuard)
+  async getUser (@FtUser() profile: Profile): Promise<User | null> {
+    return await this.usersService.findUser(profile.id)
+  }
+
+  @Post()
+  @UseGuards(AuthenticatedGuard)
+  async create (@Body() payload: UserDto, @FtUser() profile: Profile) {
+    const user = await this.usersService.findUser(profile.id)
+    if (user) {
+      return await this.usersService.update(user.id, payload)
+    } else {
+      return await this.usersService.create(payload)
+    }
   }
 }

front/volume/src/components/Chat2.svelte

@@ -15,8 +15,12 @@
         name: "You",
         text: newText,
       };
-      chatMessages = [...chatMessages.slice(-7 + 1), newMessage];
+      chatMessages = [...chatMessages.slice(-5 + 1), newMessage];
       newText = "";
+      const messagesDiv = document.querySelector(".messages");
+      if (messagesDiv) {
+        messagesDiv.scrollTop = messagesDiv.scrollHeight;
+      }
     }
     // TODO: save to database
   };
@@ -24,18 +28,25 @@
   export let chatMessages: Array<chatMessagesType> = [];
   let newText = "";
 
-  // const openProfile = (id: number) => (event: Event) => {
+  const openProfile = (id: number) => (event: Event) => {
-  //   const message = chatMessages.find((m) => m.id === id);
+    const message = chatMessages.find((m) => m.id === id);
-  //   if (message) {
+    if (message) {
-  //     const { name } = message;
+      const optionsModal = document.createElement("div");
-  //     const options = ["View profile", "Send private message", "Block user"];
+      optionsModal.classList.add("options-modal");
-  //     const option = prompt(`Select an option for ${name}: ${options.join(", ")}`);
+      optionsModal.innerHTML = `
-  //     if (option === "View profile") {
+        <h3>${message.name}</h3>
-  //     } else if (option === "Send private message") {
+        <ul>
-  //     } else if (option === "Block user") {
+          <li>View profile</li>
-  //     }
+          <li>View posts</li>
-  //   }
+          <li>View comments</li>
-  // };
+        </ul>
+      `;
+      document.querySelector('.overlay')?.appendChild(optionsModal);
+      optionsModal.addEventListener("click", () => {
+        document.body.removeChild(optionsModal);
+      });
+    }
+  };
 </script>
 
 <div class="overlay">
@@ -43,7 +54,7 @@
     <div class="messages">
       {#each chatMessages as message}
         <p class="message">
-          <span class="message-name">
+          <span class="message-name" on:click={openProfile(message.id)} on:keydown={openProfile(message.id)} style="cursor: pointer;">
             {message.name}
           </span>: {message.text}
         </p>
@@ -79,4 +90,20 @@
     padding: 1rem;
     width: 300px;
   }
+
+  .messages {
+    height: 200px;
+    overflow-y: scroll;
+  }
+
+  .options-modal {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: white;
+  padding: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  z-index: 9999;
+  }
 </style>

front/volume/src/components/Profile.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  let api = "http://" + import.meta.env.VITE_HOST + ":" + import.meta.env.VITE_BACK_PORT
   export let username = "";
   export let realname = "";
   export let wins = 0;
@@ -34,7 +35,7 @@
     formData.append('avatar', file);
 
     try {
-      const response = await fetch('http://localhost:3001/avatar', {
+      const response = await fetch(api + '/avatar', {
         method: 'POST',
         body: formData
       });
@@ -56,10 +57,10 @@
     <div class="profile-header">
       <img class="profile-img" src="img/profileicon.png" alt="Profile Icon" />
       <h3>{realname}</h3>
-      <form>
+      <form on:submit={handleAvatarUpload}>
         <label for="avatar-input">Choose avatar:</label>
         <input type="file" id="avatar-input" accept="image/*">
-        <button type="submit" id="upload-button" on:click={handleAvatarUpload}>Upload</button>
+        <button type="submit" id="upload-button">Upload</button>
       </form>
     </div>
     <div class="profile-body">