Fixed styling & added game server to profile #130

kdb-bot/src/bot_data/model/user_joined_game_server.py

@@ -38,6 +38,10 @@ class UserJoinedGameServer(TableABC):
     def game_server(self) -> str:
         return self._game_server
 
+    @property
+    def time(self) -> float:
+        return round((self.leaved_on - self.joined_on).total_seconds() / 3600, 2)
+
     @property
     def joined_on(self) -> datetime:
         return self._joined_on

kdb-bot/src/bot_graphql/model/userJoinedGameServer.gql

@@ -2,6 +2,7 @@ type UserJoinedGameServer implements TableQuery {
     id: ID
     gameServer: String
     user: User
+    time: Float
     joinedOn: String
     leavedOn: String
 

kdb-bot/src/bot_graphql/queries/user_joined_game_server_query.py

@@ -28,6 +28,10 @@ class UserJoinedGameServerQuery(DataQueryABC):
     def resolve_user(x: UserJoinedGameServer, *_):
         return x.user
 
+    @staticmethod
+    def resolve_time(x: UserJoinedGameServer, *_):
+        return x.time
+
     @staticmethod
     def resolve_joined_on(x: UserJoinedGameServer, *_):
         return x.joined_on

kdb-web/src/app/models/data/user.model.ts

@@ -3,6 +3,7 @@ import { Level, LevelFilter } from "./level.model";
 import { Server, ServerFilter } from "./server.model";
 import { UserJoinedServer } from "./user_joined_server.model";
 import { UserJoinedVoiceChannel } from "./user_joined_voice_channel.model";
+import { UserJoinedGameServer } from "./user_joined_game_server.model";
 
 export interface User extends Data {
   id?: number;
@@ -22,7 +23,7 @@ export interface User extends Data {
   joinedVoiceChannels?: UserJoinedVoiceChannel[];
 
   userJoinedGameServerCount?: number;
-  userJoinedGameServers?: [];
+  userJoinedGameServers?: UserJoinedGameServer[];
 }
 
 export interface UserFilter {

kdb-web/src/app/models/data/user_joined_game_server.model.ts

@@ -0,0 +1,11 @@
+import { Data } from "./data.model";
+import { User } from "./user.model";
+
+export interface UserJoinedGameServer extends Data {
+  id: number;
+  gameServer: string;
+  user: User;
+  time: number;
+  joinedOn: string;
+  leavedOn: string;
+}

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

@@ -122,6 +122,7 @@ export class Queries {
         userJoinedGameServers {
           id
           gameServer
+          time
           joinedOn
           leavedOn
         }

kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html

@@ -224,7 +224,7 @@
 
       <ng-template pTemplate="emptymessage">
         <tr>
-          <td colspan="7">{{'admin.auth_users.no_entries_found' | translate}}</td>
+          <td colspan="9">{{'admin.auth_users.no_entries_found' | translate}}</td>
         </tr>
       </ng-template>
 

kdb-web/src/app/modules/shared/shared.module.ts

@@ -19,6 +19,7 @@ import { AuthRolePipe } from './pipes/auth-role.pipe';
 import { IpAddressPipe } from './pipes/ip-address.pipe';
 import { BoolPipe } from './pipes/bool.pipe';
 import { PanelMenuModule } from 'primeng/panelmenu';
+import { PanelModule } from "primeng/panel";
 
 
 
@@ -47,6 +48,7 @@ import { PanelMenuModule } from 'primeng/panelmenu';
     TranslateModule,
     DynamicDialogModule,
     PanelMenuModule,
+    PanelModule,
   ],
   exports: [
     ButtonModule,
@@ -66,6 +68,7 @@ import { PanelMenuModule } from 'primeng/panelmenu';
     TranslateModule,
     DynamicDialogModule,
     PanelMenuModule,
+    PanelModule,
     AuthRolePipe,
     IpAddressPipe,
     BoolPipe,

kdb-web/src/app/modules/view/server/members/members.component.html

@@ -238,7 +238,7 @@
       <ng-template pTemplate="emptymessage">
         <tr></tr>
         <tr>
-          <td colspan="7">{{'view.server.members.no_entries_found' | translate}}</td>
+          <td colspan="10">{{'view.server.members.no_entries_found' | translate}}</td>
         </tr>
         <tr></tr>
       </ng-template>

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

@@ -77,10 +77,8 @@
     </div>
 
     <div class="content-divider"></div>
-    <div class="content-row">
-      <h3>{{'view.server.profile.joined_voice_channel.header' | translate}}</h3>
-    </div>
 
+    <p-panel header="{{'view.server.profile.joined_voice_channel.header' | translate}}" [toggleable]="true">
       <div *ngFor="let join of user.joinedVoiceChannels;">
         <div class="content-row">
           <div class="content-column">
@@ -94,34 +92,58 @@
           </div>
 
           <div class="content-column">
-          <div class="content-data-name">{{'view.server.profile.joined_voice_channel.joined_at' | translate}}:</div>
+            <div class="content-data-name">{{'common.joined_at' | translate}}:</div>
             <div class="content-data-value">{{join.joinedOn | date:'dd.MM.yyyy HH:mm:ss'}}</div>
           </div>
 
           <div class="content-column">
-          <div class="content-data-name">{{'view.server.profile.joined_voice_channel.leaved_at' | translate}}:</div>
+            <div class="content-data-name">{{'common.leaved_at' | translate}}:</div>
             <div class="content-data-value">{{join.leavedOn | date:'dd.MM.yyyy HH:mm:ss'}}</div>
           </div>
         </div>
       </div>
 
-    <div class="content-divider"></div>
+    </p-panel>
+    <p-panel header="{{'view.server.profile.joined_game_server.header' | translate}}" [toggleable]="true">
+      <div *ngFor="let join of user.userJoinedGameServers;">
         <div class="content-row">
-      <h3>{{'view.server.profile.joined_server.header' | translate}}</h3>
+          <div class="content-column">
+            <div class="content-data-name">{{'view.server.profile.joined_game_server.time' | translate}}:</div>
+            <div class="content-data-value">{{join.time}} {{'general.hours' | translate}}</div>
           </div>
 
+          <div class="content-column">
+            <div class="content-data-name">{{'view.server.profile.joined_game_server.name' | translate}}:</div>
+            <div class="content-data-value">{{join.gameServer}}</div>
+          </div>
+
+          <div class="content-column">
+            <div class="content-data-name">{{'common.joined_at' | translate}}:</div>
+            <div class="content-data-value">{{join.joinedOn | date:'dd.MM.yyyy HH:mm:ss'}}</div>
+          </div>
+
+          <div class="content-column">
+            <div class="content-data-name">{{'common.leaved_at' | translate}}:</div>
+            <div class="content-data-value">{{join.leavedOn | date:'dd.MM.yyyy HH:mm:ss'}}</div>
+          </div>
+        </div>
+      </div>
+    </p-panel>
+
+    <p-panel header="{{'view.server.profile.joined_server.header' | translate}}" [toggleable]="true">
       <div *ngFor="let join of user.joinedServers;">
         <div class="content-row">
           <div class="content-column">
-          <div class="content-data-name">{{'view.server.profile.joined_server.joined_at' | translate}}:</div>
+            <div class="content-data-name">{{'common.joined_at' | translate}}:</div>
             <div class="content-data-value">{{join.joinedOn | date:'dd.MM.yyyy HH:mm:ss'}}</div>
           </div>
 
           <div class="content-column">
-          <div class="content-data-name">{{'view.server.profile.joined_server.leaved_at' | translate}}:</div>
+            <div class="content-data-name">{{'common.leaved_at' | translate}}:</div>
             <div class="content-data-value">{{join.leavedOn | date:'dd.MM.yyyy HH:mm:ss'}}</div>
           </div>
         </div>
       </div>
+    </p-panel>
   </div>
 </div>

kdb-web/src/assets/i18n/de.json

@@ -173,15 +173,16 @@
         "joined_voice_channel": {
           "header": "Sprachkanal-beitritte",
           "time": "Zeit",
-          "channel": "Sprachkanal",
-          "joined_at": "Beigetreten am",
-          "leaved_at": "Verlassen am"
+          "channel": "Sprachkanal"
+        },
+        "joined_game_server": {
+          "header": "Gameserver-beitritte",
+          "time": "Spielzeit",
+          "name": "Gameserver"
         },
         "joined_server": {
           "header": "Server-beitritte",
-          "time": "Zeit",
-          "joined_at": "Beigetreten am",
-          "leaved_at": "Verlassen am"
+          "time": "Zeit"
         },
         "permission_denied": "Zugriff Verweigert!",
         "permission_denied_d": "Du musst Moderator sein, um andere Profile sehen zu können!"
@@ -264,6 +265,8 @@
   "common": {
     "created_at": "Erstellt am",
     "modified_at": "Bearbeitet am",
+    "joined_at": "Beigetreten am",
+    "leaved_at": "Verlassen am",
     "bool_as_string": {
       "true": "Ja",
       "false": "Nein"

kdb-web/src/styles.scss

@@ -152,6 +152,10 @@ header {
             margin: 5px 0;
           }
 
+          p-panel {
+            margin: 5px 0;
+          }
+
           .content-input-field {
             width: 50% !important;
             margin: 0 !important;

kdb-web/src/styles/themes/default-dark-theme.scss

@@ -49,7 +49,7 @@
   select:-webkit-autofill:focus {
     border: 1px solid $primaryHeaderColor;
     -webkit-text-fill-color: $primaryTextColor;
-        -webkit-box-shadow: 0 0 0px 1000px $secondaryBackgroundColor inset;
+    -webkit-box-shadow: 0 0 0 1000px $secondaryBackgroundColor inset;
     transition: background-color 5000s ease-in-out 0s;
   }
 
@@ -144,6 +144,31 @@
                 }
               }
             }
+
+            p-panel {
+              .p-panel-header,
+              .p-panel-content {
+                border: $default-border;
+              }
+
+              .p-panel-title {
+                color: $primaryHeaderColor;
+              }
+
+              .p-panel-header {
+                background-color: $primaryBackgroundColor;
+
+                .p-panel-header-icon {
+                  color: $primaryHeaderColor;
+                }
+              }
+            }
+
+            .p-panel-content {
+              background-color: $primaryBackgroundColor;
+              color: $primaryTextColor;
+              border-top: none !important;
+            }
           }
         }
       }
@@ -275,7 +300,7 @@
     .p-panelmenu-content .p-menuitem .p-menuitem-link:hover {
       background-color: $secondaryBackgroundColor !important;
       $border-radius: 20px;
-            border-radius: $border-radius 0px 0px $border-radius;
+      border-radius: $border-radius 0 0 $border-radius;
 
       .p-menuitem-text,
       .p-menuitem-icon,
@@ -286,7 +311,7 @@
     }
 
     .p-panelmenu-content {
-            margin: 5px 0px 5px 10px;
+      margin: 5px 0 5px 10px;
     }
   }
 
@@ -297,6 +322,7 @@
 
     .p-menuitem-link:hover {
       background-color: $primaryBackgroundColor !important;
+
       .p-menuitem-text,
       .p-menuitem-icon {
         color: $primaryHeaderColor !important;
@@ -405,7 +431,7 @@
   p-confirmdialog,
   p-dynamicdialog {
     .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
-            margin-left: 0px !important;
+      margin-left: 0 !important;
     }
 
     .p-dialog {
@@ -472,7 +498,7 @@
     background-color: transparent !important;
     color: $primaryTextColor !important;
     border: 0 !important;
-        padding: 0px !important;
+    padding: 0 !important;
 
     &:hover {
       background-color: transparent !important;
@@ -543,7 +569,6 @@
 
   .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
     background: transparent !important;
-        background-color: transparent !important;
     color: $primaryHeaderColor !important;
   }
 

kdb-web/src/styles/themes/default-light-theme.scss

@@ -49,7 +49,7 @@
   select:-webkit-autofill:focus {
     border: 1px solid $primaryHeaderColor;
     -webkit-text-fill-color: $primaryTextColor;
-        -webkit-box-shadow: 0 0 0px 1000px $primaryBackgroundColor inset;
+    -webkit-box-shadow: 0 0 0 1000px $primaryBackgroundColor inset;
     transition: background-color 5000s ease-in-out 0s;
   }
 
@@ -144,6 +144,31 @@
                 }
               }
             }
+
+            p-panel {
+              .p-panel-header,
+              .p-panel-content {
+                border: $default-border;
+              }
+
+              .p-panel-title {
+                color: $primaryHeaderColor;
+              }
+
+              .p-panel-header {
+                background-color: $primaryBackgroundColor;
+
+                .p-panel-header-icon {
+                  color: $primaryHeaderColor;
+                }
+              }
+            }
+
+            .p-panel-content {
+              background-color: $primaryBackgroundColor;
+              color: $primaryTextColor;
+              border-top: none !important;
+            }
           }
         }
       }
@@ -275,7 +300,7 @@
     .p-panelmenu-content .p-menuitem .p-menuitem-link:hover {
       background-color: $secondaryBackgroundColor !important;
       $border-radius: 20px;
-            border-radius: $border-radius 0px 0px $border-radius;
+      border-radius: $border-radius 0 0 $border-radius;
 
       .p-menuitem-text,
       .p-menuitem-icon,
@@ -286,7 +311,7 @@
     }
 
     .p-panelmenu-content {
-            margin: 5px 0px 5px 10px;
+      margin: 5px 0 5px 10px;
     }
   }
 
@@ -297,6 +322,7 @@
 
     .p-menuitem-link:hover {
       background-color: $primaryBackgroundColor !important;
+
       .p-menuitem-text,
       .p-menuitem-icon {
         color: $primaryHeaderColor !important;
@@ -405,7 +431,7 @@
   p-confirmdialog,
   p-dynamicdialog {
     .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
-            margin-left: 0px !important;
+      margin-left: 0 !important;
     }
 
     .p-dialog {
@@ -472,7 +498,7 @@
     background-color: transparent !important;
     color: $primaryTextColor !important;
     border: 0 !important;
-        padding: 0px !important;
+    padding: 0 !important;
 
     &:hover {
       background-color: transparent !important;
@@ -543,7 +569,6 @@
 
   .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
     background: transparent !important;
-        background-color: transparent !important;
     color: $primaryHeaderColor !important;
   }
 

kdb-web/src/styles/themes/sh-edraft-dark-theme.scss

@@ -49,7 +49,7 @@
   select:-webkit-autofill:focus {
     border: 1px solid $primaryHeaderColor;
     -webkit-text-fill-color: $primaryTextColor;
-        -webkit-box-shadow: 0 0 0px 1000px $secondaryBackgroundColor inset;
+    -webkit-box-shadow: 0 0 0 1000px $secondaryBackgroundColor inset;
     transition: background-color 5000s ease-in-out 0s;
   }
 
@@ -144,6 +144,31 @@
                 }
               }
             }
+
+            p-panel {
+              .p-panel-header,
+              .p-panel-content {
+                border: $default-border;
+              }
+
+              .p-panel-title {
+                color: $primaryHeaderColor;
+              }
+
+              .p-panel-header {
+                background-color: $primaryBackgroundColor;
+
+                .p-panel-header-icon {
+                  color: $primaryHeaderColor;
+                }
+              }
+            }
+
+            .p-panel-content {
+              background-color: $primaryBackgroundColor;
+              color: $primaryTextColor;
+              border-top: none !important;
+            }
           }
         }
       }
@@ -277,7 +302,7 @@
     .p-panelmenu-content .p-menuitem .p-menuitem-link:hover {
       background-color: $secondaryBackgroundColor !important;
       $border-radius: 20px;
-            border-radius: $border-radius 0px 0px $border-radius;
+      border-radius: $border-radius 0 0 $border-radius;
 
       .p-menuitem-text,
       .p-menuitem-icon,
@@ -288,7 +313,7 @@
     }
 
     .p-panelmenu-content {
-            margin: 5px 0px 5px 10px;
+      margin: 5px 0 5px 10px;
     }
   }
 
@@ -299,6 +324,7 @@
 
     .p-menuitem-link:hover {
       background-color: $primaryBackgroundColor !important;
+
       .p-menuitem-text,
       .p-menuitem-icon {
         color: $primaryHeaderColor !important;
@@ -407,7 +433,7 @@
   p-confirmdialog,
   p-dynamicdialog {
     .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
-            margin-left: 0px !important;
+      margin-left: 0 !important;
     }
 
     .p-dialog {
@@ -474,7 +500,7 @@
     background-color: transparent !important;
     color: $primaryTextColor !important;
     border: 0 !important;
-        padding: 0px !important;
+    padding: 0 !important;
 
     &:hover {
       background-color: transparent !important;
@@ -545,7 +571,6 @@
 
   .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
     background: transparent !important;
-        background-color: transparent !important;
     color: $primaryHeaderColor !important;
   }
 

kdb-web/src/styles/themes/sh-edraft-light-theme.scss

@@ -49,7 +49,7 @@
   select:-webkit-autofill:focus {
     border: 1px solid $primaryHeaderColor;
     -webkit-text-fill-color: $primaryTextColor;
-        -webkit-box-shadow: 0 0 0px 1000px $primaryBackgroundColor inset;
+    -webkit-box-shadow: 0 0 0 1000px $primaryBackgroundColor inset;
     transition: background-color 5000s ease-in-out 0s;
   }
 
@@ -117,6 +117,31 @@
             }
           }
 
+          p-panel {
+            .p-panel-header,
+            .p-panel-content {
+              border: $default-border;
+            }
+
+            .p-panel-title {
+              color: $primaryHeaderColor;
+            }
+
+            .p-panel-header {
+              background-color: $primaryBackgroundColor;
+
+              .p-panel-header-icon {
+                color: $primaryHeaderColor;
+              }
+            }
+          }
+
+          .p-panel-content {
+            background-color: $primaryBackgroundColor;
+            color: $primaryTextColor;
+            border-top: none !important;
+          }
+
           .server-list-wrapper {
             .server-filter {
             }
@@ -275,7 +300,7 @@
     .p-panelmenu-content .p-menuitem .p-menuitem-link:hover {
       background-color: $secondaryBackgroundColor !important;
       $border-radius: 20px;
-            border-radius: $border-radius 0px 0px $border-radius;
+      border-radius: $border-radius 0 0 $border-radius;
 
       .p-menuitem-text,
       .p-menuitem-icon,
@@ -286,7 +311,7 @@
     }
 
     .p-panelmenu-content {
-            margin: 5px 0px 5px 10px;
+      margin: 5px 0 5px 10px;
     }
   }
 
@@ -297,6 +322,7 @@
 
     .p-menuitem-link:hover {
       background-color: $primaryBackgroundColor !important;
+
       .p-menuitem-text,
       .p-menuitem-icon {
         color: $primaryHeaderColor !important;
@@ -405,7 +431,7 @@
   p-confirmdialog,
   p-dynamicdialog {
     .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
-            margin-left: 0px !important;
+      margin-left: 0 !important;
     }
 
     .p-dialog {
@@ -472,7 +498,7 @@
     background-color: transparent !important;
     color: $primaryTextColor !important;
     border: 0 !important;
-        padding: 0px !important;
+    padding: 0 !important;
 
     &:hover {
       background-color: transparent !important;
@@ -543,7 +569,6 @@
 
   .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
     background: transparent !important;
-        background-color: transparent !important;
     color: $primaryHeaderColor !important;
   }