From bf776177d4ac91771e4665306e3da4c490f0bf0d Mon Sep 17 00:00:00 2001
From: Jonas Drescher <gedankenmuseum@gmail.com>
Date: Sun, 19 Feb 2023 17:45:50 +0100
Subject: [PATCH] added clients to server-dashboard #80

---
 kdb-web/src/app/models/data/client.model.ts   | 16 +++++
 kdb-web/src/app/models/data/server.model.ts   |  9 +--
 .../src/app/models/graphql/queries.model.ts   | 21 ++++---
 .../dashboard/dashboard.component.ts          | 34 +++++------
 .../components/client/client.component.html   | 34 +++++++++++
 .../components/client/client.component.scss   |  9 +++
 .../client/client.component.spec.ts           | 23 ++++++++
 .../components/client/client.component.ts     | 25 ++++++++
 .../server-dashboard.component.html           | 58 ++++++++++---------
 .../app/modules/view/server/server.module.ts  |  4 +-
 kdb-web/src/styles.scss                       | 38 +++++++++++-
 package-lock.json                             |  6 ++
 12 files changed, 216 insertions(+), 61 deletions(-)
 create mode 100644 kdb-web/src/app/models/data/client.model.ts
 create mode 100644 kdb-web/src/app/modules/view/server/server-dashboard/components/client/client.component.html
 create mode 100644 kdb-web/src/app/modules/view/server/server-dashboard/components/client/client.component.scss
 create mode 100644 kdb-web/src/app/modules/view/server/server-dashboard/components/client/client.component.spec.ts
 create mode 100644 kdb-web/src/app/modules/view/server/server-dashboard/components/client/client.component.ts
 create mode 100644 package-lock.json

diff --git a/kdb-web/src/app/models/data/client.model.ts b/kdb-web/src/app/models/data/client.model.ts
new file mode 100644
index 00000000..0ed0585f
--- /dev/null
+++ b/kdb-web/src/app/models/data/client.model.ts
@@ -0,0 +1,16 @@
+import {Server} from "./server.model";
+import {Data} from "./data.model";
+
+export interface Client extends Data {
+
+  id?: number;
+  discordId?: string;
+  name?: string;
+  sentMessageCount?: number;
+  receivedMessageCount?: number;
+  deletedMessageCount?: number;
+  receivedCommandCount?: number;
+  movedUsersCount?: number;
+  server?: Server;
+
+}
diff --git a/kdb-web/src/app/models/data/server.model.ts b/kdb-web/src/app/models/data/server.model.ts
index a6ae0d99..8df91d13 100644
--- a/kdb-web/src/app/models/data/server.model.ts
+++ b/kdb-web/src/app/models/data/server.model.ts
@@ -1,6 +1,7 @@
-import { Data } from "./data.model";
-import { User } from "./user.model";
-import { Level } from "./level.model";
+import {Data} from "./data.model";
+import {User} from "./user.model";
+import {Level} from "./level.model";
+import {Client} from "./client.model";
 
 export interface Server extends Data {
   id?: number;
@@ -10,7 +11,7 @@ export interface Server extends Data {
   autoRoleCount?: number;
   autoRoles?: [];
   clientCount?: number;
-  clients?: [];
+  clients?: Client[];
   levelCount?: number;
   levels?: Level[];
   userCount?: number;
diff --git a/kdb-web/src/app/models/graphql/queries.model.ts b/kdb-web/src/app/models/graphql/queries.model.ts
index 73baaf4a..be97aec4 100644
--- a/kdb-web/src/app/models/graphql/queries.model.ts
+++ b/kdb-web/src/app/models/graphql/queries.model.ts
@@ -1,15 +1,4 @@
 export class Queries {
-  static serversListQuery = `
-    query ServerInfo($filter: ServerFilter, $page: Page, $sort: Sort) {
-      serverCount
-      servers(filter: $filter, page: $page, sort: $sort) {
-        id
-        name
-        iconURL
-        userCount
-      }
-    }
-  `;
 
   static serversQuery = `
     query ServerInfo($filter: ServerFilter, $page: Page, $sort: Sort) {
@@ -18,6 +7,16 @@ export class Queries {
         name
         iconURL
         userCount
+        clients{
+          id
+          discordId
+          name
+          sentMessageCount
+          receivedMessageCount
+          deletedMessageCount
+          receivedCommandCount
+          movedUsersCount
+        }
       }
     }
   `;
diff --git a/kdb-web/src/app/modules/view/dashboard/components/dashboard/dashboard.component.ts b/kdb-web/src/app/modules/view/dashboard/components/dashboard/dashboard.component.ts
index 0121b314..5d266fd8 100644
--- a/kdb-web/src/app/modules/view/dashboard/components/dashboard/dashboard.component.ts
+++ b/kdb-web/src/app/modules/view/dashboard/components/dashboard/dashboard.component.ts
@@ -1,19 +1,19 @@
-import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormControl, FormGroup } from "@angular/forms";
-import { Router } from "@angular/router";
-import { TranslateService } from "@ngx-translate/core";
-import { debounceTime, throwError } from "rxjs";
-import { ConfirmationDialogService } from "src/app/services/confirmation-dialog/confirmation-dialog.service";
-import { DataService } from "src/app/services/data/data.service";
-import { SpinnerService } from "src/app/services/spinner/spinner.service";
-import { ToastService } from "src/app/services/toast/toast.service";
-import { Server, ServerFilter } from "../../../../../models/data/server.model";
-import { catchError } from "rxjs/operators";
-import { Queries } from "../../../../../models/graphql/queries.model";
-import { Page } from "../../../../../models/graphql/filter/page.model";
-import { Sort } from "../../../../../models/graphql/filter/sort.model";
-import { Query } from "../../../../../models/graphql/query.model";
-import { SidebarService } from "../../../../../services/sidebar/sidebar.service";
+import {Component, OnInit} from "@angular/core";
+import {FormBuilder, FormControl, FormGroup} from "@angular/forms";
+import {Router} from "@angular/router";
+import {TranslateService} from "@ngx-translate/core";
+import {debounceTime, throwError} from "rxjs";
+import {ConfirmationDialogService} from "src/app/services/confirmation-dialog/confirmation-dialog.service";
+import {DataService} from "src/app/services/data/data.service";
+import {SpinnerService} from "src/app/services/spinner/spinner.service";
+import {ToastService} from "src/app/services/toast/toast.service";
+import {Server, ServerFilter} from "../../../../../models/data/server.model";
+import {catchError} from "rxjs/operators";
+import {Queries} from "../../../../../models/graphql/queries.model";
+import {Page} from "../../../../../models/graphql/filter/page.model";
+import {Sort} from "../../../../../models/graphql/filter/sort.model";
+import {Query} from "../../../../../models/graphql/query.model";
+import {SidebarService} from "../../../../../services/sidebar/sidebar.service";
 
 @Component({
   selector: "app-dashboard",
@@ -84,7 +84,7 @@ export class DashboardComponent implements OnInit {
 
   loadNextPage() {
     this.spinnerService.showSpinner();
-    this.data.query<Query>(Queries.serversListQuery, {
+    this.data.query<Query>(Queries.serversQuery, {
       filter: this.filter,
       page: this.page,
       sort: this.sort
diff --git a/kdb-web/src/app/modules/view/server/server-dashboard/components/client/client.component.html b/kdb-web/src/app/modules/view/server/server-dashboard/components/client/client.component.html
new file mode 100644
index 00000000..a56aef02
--- /dev/null
+++ b/kdb-web/src/app/modules/view/server/server-dashboard/components/client/client.component.html
@@ -0,0 +1,34 @@
+<div class="client">
+  <div class="client-info">
+    <label class="client-info-header">Id: </label>
+    <label class="client-info-value">{{client.id}}</label>
+  </div>
+  <div class="client-info">
+    <label class="client-info-header">Discord Id: </label>
+    <label class="client-info-value">{{client.discordId}}</label>
+  </div>
+  <div class="client-info">
+    <label class="client-info-header">Name: </label>
+    <label class="client-info-value">{{client.name}}</label>
+  </div>
+  <div class="client-info">
+    <label class="client-info-header">Send Message Count: </label>
+    <label class="client-info-value">{{client.sentMessageCount}}</label>
+  </div>
+  <div class="client-info">
+    <label class="client-info-header">Received Message Count: </label>
+    <label class="client-info-value">{{client.receivedMessageCount}}</label>
+  </div>
+  <div class="client-info">
+    <label class="client-info-header">Deleted Message Count: </label>
+    <label class="client-info-value">{{client.deletedMessageCount}}</label>
+  </div>
+  <div class="client-info">
+    <label class="client-info-header">Received Command Count: </label>
+    <label class="client-info-value">{{client.receivedCommandCount}}</label>
+  </div>
+  <div class="client-info">
+    <label class="client-info-header">Moved Users Count: </label>
+    <label class="client-info-value">{{client.movedUsersCount}}</label>
+  </div>
+</div>
diff --git a/kdb-web/src/app/modules/view/server/server-dashboard/components/client/client.component.scss b/kdb-web/src/app/modules/view/server/server-dashboard/components/client/client.component.scss
new file mode 100644
index 00000000..884b4c33
--- /dev/null
+++ b/kdb-web/src/app/modules/view/server/server-dashboard/components/client/client.component.scss
@@ -0,0 +1,9 @@
+////@media screen and (max-width: 1660px) {
+//  .client {
+//    //flex-direction: column !important;
+//    align-content: flex-start !important;
+//  }
+//  .client-info {
+//    margin-bottom: 5%;
+//  }
+//}
diff --git a/kdb-web/src/app/modules/view/server/server-dashboard/components/client/client.component.spec.ts b/kdb-web/src/app/modules/view/server/server-dashboard/components/client/client.component.spec.ts
new file mode 100644
index 00000000..3002a16e
--- /dev/null
+++ b/kdb-web/src/app/modules/view/server/server-dashboard/components/client/client.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ClientComponent } from './client.component';
+
+describe('ClientComponent', () => {
+  let component: ClientComponent;
+  let fixture: ComponentFixture<ClientComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ClientComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ClientComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kdb-web/src/app/modules/view/server/server-dashboard/components/client/client.component.ts b/kdb-web/src/app/modules/view/server/server-dashboard/components/client/client.component.ts
new file mode 100644
index 00000000..90462b4b
--- /dev/null
+++ b/kdb-web/src/app/modules/view/server/server-dashboard/components/client/client.component.ts
@@ -0,0 +1,25 @@
+import {Component, Input} from '@angular/core';
+import {Client} from "../../../../../../models/data/client.model";
+
+@Component({
+  selector: 'app-client',
+  templateUrl: './client.component.html',
+  styleUrls: ['./client.component.scss']
+})
+export class ClientComponent {
+
+  @Input() client: Client = {
+    createdAt: "", modifiedAt: "",
+    deletedMessageCount: 0,
+    discordId: "",
+    id: 0,
+    movedUsersCount: 0,
+    name: "",
+    receivedCommandCount: 0,
+    receivedMessageCount: 0,
+    sentMessageCount: 0,
+    server: undefined
+  };
+
+
+}
diff --git a/kdb-web/src/app/modules/view/server/server-dashboard/server-dashboard.component.html b/kdb-web/src/app/modules/view/server/server-dashboard/server-dashboard.component.html
index 74666a33..36005f1e 100644
--- a/kdb-web/src/app/modules/view/server/server-dashboard/server-dashboard.component.html
+++ b/kdb-web/src/app/modules/view/server/server-dashboard/server-dashboard.component.html
@@ -1,36 +1,42 @@
 <h1>
-    {{'view.server.dashboard.header' | translate}}
+  {{'view.server.dashboard.header' | translate}}
 </h1>
 <div class="content-wrapper">
-    <div class="content-header">
-        <h2>
-            <i class="pi pi-server"></i>
-            {{'view.dashboard.server.header' | translate}}
-        </h2>
-    </div>
+  <div class="content-header">
+    <h2>
+      <i class="pi pi-server"></i>
+      {{'view.dashboard.server.header' | translate}}
+    </h2>
+  </div>
 
-    <div class="content">
-        <div class="server-list-wrapper">
-            <div class="server-list">
-                <div class="server">
-                    <div class="logo">
-                        <img *ngIf="server.iconURL" [src]="server.iconURL">
-                    </div>
+  <div class="content">
+    <div class="server-list-wrapper">
+      <div class="server-list">
+        <div class="server">
+          <div class="logo">
+            <img *ngIf="server.iconURL" [src]="server.iconURL">
+          </div>
 
-                    <div class="info">
-                        <h3 class="name">
-                            {{server.name}}
-                        </h3>
+          <div class="info">
+            <h3 class="name">
+              {{server.name}}
+            </h3>
 
-                        <div class="data">
-                            <i class="pi pi-users"></i>
-                            {{server.userCount}}
-                            {{'view.dashboard.server.member_count' | translate}}
-                        </div>
-                    </div>
-
-                </div>
+            <div class="data">
+              <i class="pi pi-users"></i>
+              {{server.userCount}}
+              {{'view.dashboard.server.member_count' | translate}}
             </div>
+
+            <div class="client-data"
+                 *ngFor="let client of server.clients">
+              <i class="pi pi-discord"></i>
+              <app-client class="client-component" [client]="client"></app-client>
+            </div>
+          </div>
+
         </div>
+      </div>
     </div>
+  </div>
 </div>
diff --git a/kdb-web/src/app/modules/view/server/server.module.ts b/kdb-web/src/app/modules/view/server/server.module.ts
index dad9964a..1e4b2a8a 100644
--- a/kdb-web/src/app/modules/view/server/server.module.ts
+++ b/kdb-web/src/app/modules/view/server/server.module.ts
@@ -5,6 +5,7 @@ import { ServerRoutingModule } from './server-routing.module';
 import { SharedModule } from '../../shared/shared.module';
 import { ProfileComponent } from './profile/profile.component';
 import { MembersComponent } from './members/members.component';
+import { ClientComponent } from './server-dashboard/components/client/client.component';
 
 
 
@@ -12,7 +13,8 @@ import { MembersComponent } from './members/members.component';
   declarations: [
     ServerDashboardComponent,
     ProfileComponent,
-    MembersComponent
+    MembersComponent,
+    ClientComponent
   ],
   imports: [
     CommonModule,
diff --git a/kdb-web/src/styles.scss b/kdb-web/src/styles.scss
index 0fa6ae5a..6af8ef9f 100644
--- a/kdb-web/src/styles.scss
+++ b/kdb-web/src/styles.scss
@@ -258,7 +258,6 @@ header {
                 padding: 20px;
 
                 .logo {
-                  overflow: hidden;
 
                   img {
                     width: 4rem;
@@ -270,7 +269,7 @@ header {
                 .info {
                   display: flex;
                   flex-direction: column;
-
+                  width: 100%;
                   gap: 10px;
 
                   .name {
@@ -282,6 +281,41 @@ header {
 
                   .data {
                   }
+
+                  .client-data {
+                    display: flex;
+                    flex-direction: row;
+                    width: 100%;
+
+                    .client-component {
+
+                      width: 100%;
+
+                      .client {
+                        display: flex;
+                        flex-direction: row;
+                        align-content: stretch !important;
+                        flex-wrap: wrap;
+                        gap: 10px;
+
+                        .client-info {
+                          display: flex;
+                          flex-direction: column;
+                          margin-left: 2%;
+
+                          .client-info-header {
+                            margin-bottom: 5px;
+                            white-space: nowrap;
+                            font-weight: bold
+                          }
+
+                          .client-info-value {
+                            white-space: nowrap;
+                          }
+                        }
+                      }
+                    }
+                  }
                 }
               }
             }
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..9f4677cd
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "kd_discord_bot",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}