Updated profile #409

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(

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
 

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)

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 {

web/src/app/models/graphql/queries.model.ts

@@ -406,6 +406,7 @@ export class Queries {
           joinedOn
           leavedOn
         }
+        profilePictureURL
 
         createdAt
         modifiedAt

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({

web/src/app/modules/view/server/profile/profile.component.html

@@ -2,14 +2,17 @@
   {{'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="logo">
+          <img *ngIf="user ? user.profilePictureURL : ''" [src]="user ? user.profilePictureURL : ''">
+        </div>
+      </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>
@@ -18,40 +21,14 @@
           <div class="content-data-name">{{'common.discord_id' | translate}}:</div>
           <div class="content-data-value">{{user.discordId}}</div>
         </div>
-    </div>
-
-    <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>
@@ -59,62 +36,60 @@
             <p-calendar [(ngModel)]="user.birthday" dateFormat="dd.mm.yy" [showIcon]="true"></p-calendar>
           </div>
         </div>
-    </div>
+        <div class="content-divider"></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 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 *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">
     <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"

web/src/app/modules/view/server/profile/profile.component.scss

@@ -0,0 +1,6 @@
+.logo {
+  img {
+    width: 12.5vw;
+    border-radius: 50%;
+  }
+}

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,

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",

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",

web/src/styles.scss

@@ -177,6 +177,7 @@ header {
             flex: 1;
             margin: 5px 0;
             gap: 5px;
+          }
 
           .content-column {
             display: flex;
@@ -211,7 +212,6 @@ header {
 
             font-size: 18px;
           }
-          }
 
           .content-divider {
             margin: 10px 0;

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;
+        }
+      }
+    }
+  }
 }