From 13bc38fea84370dad54831ccef0b49155175db6b Mon Sep 17 00:00:00 2001
From: Sven Heidemann <sven.heidemann@sh-edraft.de>
Date: Sun, 10 Dec 2023 19:00:00 +0100
Subject: [PATCH] Updated profile #409

---
 bot/src/bot_data/model/user.py                |   7 +
 bot/src/bot_graphql/graphql/user.gql          |   2 +
 bot/src/bot_graphql/queries/user_query.py     |   1 +
 web/src/app/models/data/user.model.ts         |   2 +
 web/src/app/models/graphql/queries.model.ts   |   1 +
 web/src/app/modules/shared/shared.module.ts   |   4 +-
 .../server/profile/profile.component.html     | 182 ++++++++----------
 .../server/profile/profile.component.scss     |   6 +
 .../view/server/profile/profile.component.ts  |  30 ++-
 web/src/assets/i18n/de.json                   |   1 +
 web/src/assets/i18n/en.json                   |   1 +
 web/src/styles.scss                           |  60 +++---
 .../styles/themes/sh-edraft-dark-theme.scss   |  18 ++
 13 files changed, 177 insertions(+), 138 deletions(-)

diff --git a/bot/src/bot_data/model/user.py b/bot/src/bot_data/model/user.py
index bfb65ae6..bfc7be34 100644
--- a/bot/src/bot_data/model/user.py
+++ b/bot/src/bot_data/model/user.py
@@ -168,6 +168,13 @@ class User(TableABC):
         game_idents_repo: UserGameIdentRepositoryABC = services.get_service(UserGameIdentRepositoryABC)
         return game_idents_repo.get_user_game_idents_by_user_id(self.id)
 
+    @property
+    @ServiceProviderABC.inject
+    def profile_picture_url(self, bot: DiscordBotServiceABC) -> str:
+        guild = bot.get_guild(self.server.discord_id)
+        user = guild.get_member(self._discord_id)
+        return None if user is None else user.avatar.url
+
     @staticmethod
     def get_select_all_string() -> str:
         return str(
diff --git a/bot/src/bot_graphql/graphql/user.gql b/bot/src/bot_graphql/graphql/user.gql
index e4ed9ea1..029bd7ce 100644
--- a/bot/src/bot_graphql/graphql/user.gql
+++ b/bot/src/bot_graphql/graphql/user.gql
@@ -11,6 +11,8 @@ type User implements TableWithHistoryQuery {
     level: Level
     activityScore: Int
 
+    profilePictureURL: String
+
     joinedServers(filter: UserJoinedServerFilter, page: Page, sort: Sort): [UserJoinedServer]
     joinedServerCount: Int
 
diff --git a/bot/src/bot_graphql/queries/user_query.py b/bot/src/bot_graphql/queries/user_query.py
index 1d31312f..6ea49d9a 100644
--- a/bot/src/bot_graphql/queries/user_query.py
+++ b/bot/src/bot_graphql/queries/user_query.py
@@ -88,3 +88,4 @@ class UserQuery(DataQueryWithHistoryABC):
 
         self.set_field("server", lambda user, *_: user.server)
         self.set_field("leftServer", lambda user, *_: user.left_server)
+        self.set_field("profilePictureURL", lambda user, *_: user.profile_picture_url)
diff --git a/web/src/app/models/data/user.model.ts b/web/src/app/models/data/user.model.ts
index f7ae3454..a21884bc 100644
--- a/web/src/app/models/data/user.model.ts
+++ b/web/src/app/models/data/user.model.ts
@@ -36,6 +36,8 @@ export interface User extends DataWithHistory {
 
   userWarningCount?: number;
   userWarnings?: UserWarning[];
+
+  profilePictureURL?: string;
 }
 
 export interface UserFilter {
diff --git a/web/src/app/models/graphql/queries.model.ts b/web/src/app/models/graphql/queries.model.ts
index 2db56afa..d5ceb096 100644
--- a/web/src/app/models/graphql/queries.model.ts
+++ b/web/src/app/models/graphql/queries.model.ts
@@ -406,6 +406,7 @@ export class Queries {
           joinedOn
           leavedOn
         }
+        profilePictureURL
 
         createdAt
         modifiedAt
diff --git a/web/src/app/modules/shared/shared.module.ts b/web/src/app/modules/shared/shared.module.ts
index af9e8ea8..55abd3ad 100644
--- a/web/src/app/modules/shared/shared.module.ts
+++ b/web/src/app/modules/shared/shared.module.ts
@@ -40,6 +40,7 @@ import { TabViewModule } from "primeng/tabview";
 import { RadioButtonModule } from "primeng/radiobutton";
 import { InputTextareaModule } from "primeng/inputtextarea";
 import { InputMaskModule } from "primeng/inputmask";
+import { KnobModule } from "primeng/knob";
 
 
 const PrimeNGModules = [
@@ -73,7 +74,8 @@ const PrimeNGModules = [
   TabViewModule,
   RadioButtonModule,
   InputTextareaModule,
-  InputMaskModule
+  InputMaskModule,
+  KnobModule
 ];
 
 @NgModule({
diff --git a/web/src/app/modules/view/server/profile/profile.component.html b/web/src/app/modules/view/server/profile/profile.component.html
index ea14ad09..ba88ccfe 100644
--- a/web/src/app/modules/view/server/profile/profile.component.html
+++ b/web/src/app/modules/view/server/profile/profile.component.html
@@ -2,119 +2,94 @@
   {{'view.server.profile.header' | translate}}
 </h1>
 <div class="content-wrapper">
-  <div class="content-header">
-    <h2>
-      {{user.name}}
-    </h2>
-  </div>
-
   <div class="content">
     <div class="content-row">
       <div class="content-column">
-        <div class="content-data-name">{{'common.id' | translate}}:</div>
-        <div class="content-data-value">{{user.id}}</div>
+        <div class="logo">
+          <img *ngIf="user ? user.profilePictureURL : ''" [src]="user ? user.profilePictureURL : ''">
+        </div>
       </div>
-      <div class="content-column">
-        <div class="content-data-name">{{'common.discord_id' | translate}}:</div>
-        <div class="content-data-value">{{user.discordId}}</div>
+      <div class="content">
+        <div class="content-column">
+          <h1>{{user.name}}</h1>
+        </div>
+        <div class="content-column">
+          <div class="content-data-name">{{'common.id' | translate}}:</div>
+          <div class="content-data-value">{{user.id}}</div>
+        </div>
+        <div class="content-column">
+          <div class="content-data-name">{{'common.discord_id' | translate}}:</div>
+          <div class="content-data-value">{{user.discordId}}</div>
+        </div>
+        <div class="content-column">
+          <div class="content-data-name">{{'view.server.profile.message_count' | translate}}:</div>
+          <div class="content-data-value">{{user.messageCount}}</div>
+        </div>
+        <div class="content-column">
+          <div class="content-data-name">{{'view.server.profile.reaction_count' | translate}}:</div>
+          <div class="content-data-value">{{user.reactionCount}}</div>
+        </div>
+        <div class="content-column">
+          <div class="content-data-name">{{'view.server.profile.birthday' | translate}}:</div>
+          <div *ngIf="!isEditing" class="content-data-value">{{user.birthday}}</div>
+          <div *ngIf="isEditing" class="content-data-value">
+            <p-calendar [(ngModel)]="user.birthday" dateFormat="dd.mm.yy" [showIcon]="true"></p-calendar>
+          </div>
+        </div>
+        <div class="content-divider"></div>
+        <div class="content-column">
+          <div class="content-data-name">{{'view.server.profile.left_server' | translate}}:</div>
+          <div class="content-data-value">{{user.leftServer | bool}}</div>
+        </div>
+        <div class="content-column">
+          <div class="content-data-name">{{'common.created_at' | translate}}:</div>
+          <div class="content-data-value">{{user.createdAt | date:'dd.MM.yyyy HH:mm:ss'}}</div>
+        </div>
+        <div class="content-column">
+          <div class="content-data-name">{{'common.modified_at' | translate}}:</div>
+          <div class="content-data-value">{{user.modifiedAt | date:'dd.MM.yyyy HH:mm:ss'}}</div>
+        </div>
       </div>
-    </div>
+      <div class="content">
+        <div class="content-column">
+          <div class="content-data-name" style="flex-direction: column; justify-content: start;">
+            <p-knob valueTemplate="{value} {{'view.server.profile.xp' | translate}}" [(ngModel)]="user.xp" [size]="150"
+                    [strokeWidth]="10"
+                    [max]="maxXp" valueColor="SlateGray" rangeColor="MediumTurquoise"
+                    [readonly]="isModerator && !isEditing"></p-knob>
+          </div>
+          <div class="content-data-value" style="flex-direction: column; justify-content: start;">
+            <p-knob valueTemplate="Lvl {value}" [(ngModel)]="activeLevelIndex"
+                    [size]="150"
+                    [strokeWidth]="10"
+                    [min]="1"
+                    [max]="levels ? levels.length : 0" valueColor="SlateGray" rangeColor="MediumTurquoise"
+                    [readonly]="isModerator && !isEditing"></p-knob>
 
-    <div class="content-row">
-      <div class="content-column">
-        <div class="content-data-name">{{'view.server.profile.name' | translate}}:</div>
-        <div class="content-data-value">{{user.name}}</div>
-      </div>
-    </div>
-
-    <div class="content-row">
-      <div class="content-column">
-        <div class="content-data-name">{{'view.server.profile.xp' | translate}}:</div>
-        <div *ngIf="!isEditing" class="content-data-value">{{user.xp}}</div>
-        <div *ngIf="isModerator && isEditing" class="content-data-value"><input class="table-edit-input" pInputText
-                                                                                min="0" type="number"
-                                                                                [(ngModel)]="user.xp"></div>
-      </div>
-    </div>
-
-    <div class="content-row">
-      <div class="content-column">
-        <div class="content-data-name">{{'view.server.profile.message_count' | translate}}:</div>
-        <div class="content-data-value">{{user.messageCount}}</div>
-      </div>
-    </div>
-
-    <div class="content-row">
-      <div class="content-column">
-        <div class="content-data-name">{{'view.server.profile.reaction_count' | translate}}:</div>
-        <div class="content-data-value">{{user.reactionCount}}</div>
-      </div>
-    </div>
-
-    <div class="content-row">
-      <div class="content-column">
-        <div class="content-data-name">{{'view.server.profile.birthday' | translate}}:</div>
-        <div *ngIf="!isEditing" class="content-data-value">{{user.birthday}}</div>
-        <div *ngIf="isEditing" class="content-data-value">
-          <p-calendar [(ngModel)]="user.birthday" dateFormat="dd.mm.yy" [showIcon]="true"></p-calendar>
+            <div *ngIf="user.level">
+              {{user.level.name}}
+            </div>
+          </div>
+        </div>
+        <div class="content-divider"></div>
+        <div class="content-column">
+          <div class="content-data-name">{{'common.ontime' | translate}}:</div>
+          <div class="content-data-value">{{user.ontime}}</div>
+        </div>
+        <div class="content-column">
+          <div class="content-data-name">{{'common.game_ontime' | translate}}:</div>
+          <div class="content-data-value">{{user.gameOntime}}</div>
+        </div>
+        <div class="content-column">
+          <div class="content-data-name">{{'common.activity' | translate}}:</div>
+          <div class="content-data-value">{{user.activityScore}}</div>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="content-row">
-      <div class="content-column">
-        <div class="content-data-name">{{'common.ontime' | translate}}:</div>
-        <div class="content-data-value">{{user.ontime}}</div>
-      </div>
-    </div>
-
-    <div class="content-row">
-      <div class="content-column">
-        <div class="content-data-name">{{'common.game_ontime' | translate}}:</div>
-        <div class="content-data-value">{{user.gameOntime}}</div>
-      </div>
-    </div>
-
-    <div class="content-row">
-      <div class="content-column">
-        <div class="content-data-name">{{'common.activity' | translate}}:</div>
-        <div class="content-data-value">{{user.activityScore}}</div>
-      </div>
-    </div>
-
-    <div class="content-row">
-      <div class="content-column">
-        <div class="content-data-name">{{'view.server.profile.level' | translate}}:</div>
-        <div *ngIf="!isEditing" class="content-data-value">{{user.level?.name}}</div>
-        <div *ngIf="isModerator && isEditing" class="content-data-value">
-          <p-dropdown [options]="levels" [(ngModel)]="user.level" dataKey="id"
-                      placeholder="{{'common.level' | translate}}">
-          </p-dropdown>
-        </div>
-      </div>
-    </div>
-
-    <div class="content-row">
-      <div class="content-column">
-        <div class="content-data-name">{{'view.server.profile.left_server' | translate}}:</div>
-        <div class="content-data-value">{{user.leftServer | bool}}</div>
-      </div>
-    </div>
-
-    <div class="content-row">
-      <div class="content-column">
-        <div class="content-data-name">{{'common.created_at' | translate}}:</div>
-        <div class="content-data-value">{{user.createdAt | date:'dd.MM.yyyy HH:mm:ss'}}</div>
-      </div>
-    </div>
-
-    <div class="content-row">
-      <div class="content-column">
-        <div class="content-data-name">{{'common.modified_at' | translate}}:</div>
-        <div class="content-data-value">{{user.modifiedAt | date:'dd.MM.yyyy HH:mm:ss'}}</div>
-      </div>
-    </div>
 
+  <div class="content">
     <div>
       <div class="content-divider"></div>
       <p-table #dt [value]="(user.userWarnings ?? [])" [responsive]="true" responsiveLayout="stack"
@@ -199,7 +174,8 @@
                 <button *ngIf="!editing" pButton type="button" class="btn danger-icon-btn" icon="pi pi-trash"
                         (click)="deleteUserWarning(ri)"></button>
 
-                <button *ngIf="editing" pButton type="button" pSaveEditableRow class="btn icon-btn" icon="pi pi-check"
+                <button *ngIf="editing" pButton type="button" pSaveEditableRow class="btn icon-btn"
+                        icon="pi pi-check"
                         (click)="editSaveUserWarning(value, ri)"></button>
                 <button *ngIf="editing" pButton type="button" pCancelEditableRow class="btn danger-icon-btn"
                         icon="pi pi-times"
diff --git a/web/src/app/modules/view/server/profile/profile.component.scss b/web/src/app/modules/view/server/profile/profile.component.scss
index e69de29b..d03e1ee2 100644
--- a/web/src/app/modules/view/server/profile/profile.component.scss
+++ b/web/src/app/modules/view/server/profile/profile.component.scss
@@ -0,0 +1,6 @@
+.logo {
+  img {
+    width: 12.5vw;
+    border-radius: 50%;
+  }
+}
diff --git a/web/src/app/modules/view/server/profile/profile.component.ts b/web/src/app/modules/view/server/profile/profile.component.ts
index 21ae1a88..c66a5393 100644
--- a/web/src/app/modules/view/server/profile/profile.component.ts
+++ b/web/src/app/modules/view/server/profile/profile.component.ts
@@ -15,10 +15,10 @@ import { catchError, takeUntil } from "rxjs/operators";
 import { Table } from "primeng/table";
 import { UpdateUserMutationResult } from "../../../../models/graphql/result.model";
 import { Mutations } from "../../../../models/graphql/mutations.model";
-import { MenuItem } from "primeng/api";
 import { UserWarning } from "../../../../models/data/user_warning.model";
 import moment from "moment";
 import { SidebarService } from "../../../../services/sidebar/sidebar.service";
+import { Level } from "../../../../models/data/level.model";
 
 @Component({
   selector: "app-profile",
@@ -28,7 +28,7 @@ import { SidebarService } from "../../../../services/sidebar/sidebar.service";
 export class ProfileComponent implements OnInit, OnDestroy {
 
   user: User = { createdAt: "", modifiedAt: "" };
-  levels!: MenuItem[];
+  levels!: { label: string, value: Level }[];
   private server: Server = {};
   private author?: UserDTO;
   private clonedUserWarnings: UserWarning[] = [];
@@ -36,6 +36,21 @@ export class ProfileComponent implements OnInit, OnDestroy {
   public isEditing: boolean = false;
   public isModerator: boolean = false;
   public hasTechnicianAccess: boolean = false;
+  public maxXp: number = 0;
+  private _activeLevelIndex: number = 0;
+
+  public get activeLevelIndex(): number {
+    return this._activeLevelIndex;
+  }
+
+  public set activeLevelIndex(value: number) {
+    if (value < 1) {
+      value = 1;
+    }
+
+    this._activeLevelIndex = value;
+    this.user.level = this.levels.map(x => x.value)[value - 1];
+  }
 
   private unsubscriber = new Subject<void>();
 
@@ -48,7 +63,7 @@ export class ProfileComponent implements OnInit, OnDestroy {
     private toast: ToastService,
     private translate: TranslateService,
     private toastService: ToastService,
-    private sidebarService: SidebarService,
+    private sidebarService: SidebarService
   ) {
   }
 
@@ -74,7 +89,11 @@ export class ProfileComponent implements OnInit, OnDestroy {
           }
         ).subscribe(data => {
           this.levels = data.levels.map(level => {
-            return { label: level.name, value: level };
+            if (level.minXp && level.minXp > this.maxXp) {
+              this.maxXp = level.minXp;
+            }
+
+            return { label: level.name ?? "", value: level };
           });
         });
 
@@ -100,6 +119,9 @@ export class ProfileComponent implements OnInit, OnDestroy {
             this.router.navigate([`/server/${server.id}`]);
           }
           this.user = users.users[0];
+          if (this.user.level) {
+            this.activeLevelIndex = this.levels.reverse().map(l => l.value.id).indexOf(this.user.level.id) + 1;
+          }
 
           this.data.query<UserWarningQuery>(Queries.userProfileWarnings, {
               serverId: this.server.id,
diff --git a/web/src/assets/i18n/de.json b/web/src/assets/i18n/de.json
index e31ade5d..a17ac8e9 100644
--- a/web/src/assets/i18n/de.json
+++ b/web/src/assets/i18n/de.json
@@ -541,6 +541,7 @@
         },
         "left_server": "Hat Server verlassen",
         "level": "Level",
+        "lvl": "Lvl",
         "message_count": "Anzahl Nachrichten",
         "minecraft_id": "Minecraft Id",
         "name": "Name",
diff --git a/web/src/assets/i18n/en.json b/web/src/assets/i18n/en.json
index 49b1b59d..66b67e7a 100644
--- a/web/src/assets/i18n/en.json
+++ b/web/src/assets/i18n/en.json
@@ -541,6 +541,7 @@
         },
         "left_server": "Leaved server",
         "level": "Level",
+        "lvl": "Lvl",
         "message_count": "Message count",
         "minecraft_id": "Minecraft Id",
         "name": "Name",
diff --git a/web/src/styles.scss b/web/src/styles.scss
index a35e587f..2e89fee9 100644
--- a/web/src/styles.scss
+++ b/web/src/styles.scss
@@ -177,40 +177,40 @@ header {
             flex: 1;
             margin: 5px 0;
             gap: 5px;
+          }
 
-            .content-column {
-              display: flex;
-              flex: 1;
-              gap: 5px;
+          .content-column {
+            display: flex;
+            flex: 1;
+            gap: 5px;
+          }
+
+          .content-data-name {
+            display: flex;
+            align-items: center;
+
+            font-size: 18px;
+            flex: 1;
+          }
+
+          .content-data-value {
+            display: flex;
+            align-items: center;
+
+            font-size: 18px;
+            flex: 1;
+
+            input {
+              width: 100% !important;
             }
+          }
 
-            .content-data-name {
-              display: flex;
-              align-items: center;
+          .content-data-value-row {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
 
-              font-size: 18px;
-              flex: 1;
-            }
-
-            .content-data-value {
-              display: flex;
-              align-items: center;
-
-              font-size: 18px;
-              flex: 1;
-
-              input {
-                width: 100% !important;
-              }
-            }
-
-            .content-data-value-row {
-              display: flex;
-              flex: 1;
-              flex-direction: column;
-
-              font-size: 18px;
-            }
+            font-size: 18px;
           }
 
           .content-divider {
diff --git a/web/src/styles/themes/sh-edraft-dark-theme.scss b/web/src/styles/themes/sh-edraft-dark-theme.scss
index 9d9bf6f5..02f24407 100644
--- a/web/src/styles/themes/sh-edraft-dark-theme.scss
+++ b/web/src/styles/themes/sh-edraft-dark-theme.scss
@@ -814,4 +814,22 @@
       box-shadow: none !important;
     }
   }
+
+  p-knob {
+    .p-knob {
+      svg {
+        .p-knob-value {
+          stroke: $primaryHeaderColor !important;
+        }
+
+        .p-knob-range {
+          stroke: $secondaryBackgroundColor !important;
+        }
+
+        .p-knob-text {
+          font-size: 1rem !important;
+        }
+      }
+    }
+  }
 }