added clients to server-dashboard #80

This commit is contained in:
Jonas Drescher 2023-02-19 17:45:50 +01:00
parent a2a0056873
commit bf776177d4
12 changed files with 216 additions and 61 deletions

View File

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

View File

@ -1,6 +1,7 @@
import { Data } from "./data.model"; import {Data} from "./data.model";
import { User } from "./user.model"; import {User} from "./user.model";
import { Level } from "./level.model"; import {Level} from "./level.model";
import {Client} from "./client.model";
export interface Server extends Data { export interface Server extends Data {
id?: number; id?: number;
@ -10,7 +11,7 @@ export interface Server extends Data {
autoRoleCount?: number; autoRoleCount?: number;
autoRoles?: []; autoRoles?: [];
clientCount?: number; clientCount?: number;
clients?: []; clients?: Client[];
levelCount?: number; levelCount?: number;
levels?: Level[]; levels?: Level[];
userCount?: number; userCount?: number;

View File

@ -1,15 +1,4 @@
export class Queries { 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 = ` static serversQuery = `
query ServerInfo($filter: ServerFilter, $page: Page, $sort: Sort) { query ServerInfo($filter: ServerFilter, $page: Page, $sort: Sort) {
@ -18,6 +7,16 @@ export class Queries {
name name
iconURL iconURL
userCount userCount
clients{
id
discordId
name
sentMessageCount
receivedMessageCount
deletedMessageCount
receivedCommandCount
movedUsersCount
}
} }
} }
`; `;

View File

@ -1,19 +1,19 @@
import { Component, OnInit } from "@angular/core"; import {Component, OnInit} from "@angular/core";
import { FormBuilder, FormControl, FormGroup } from "@angular/forms"; import {FormBuilder, FormControl, FormGroup} from "@angular/forms";
import { Router } from "@angular/router"; import {Router} from "@angular/router";
import { TranslateService } from "@ngx-translate/core"; import {TranslateService} from "@ngx-translate/core";
import { debounceTime, throwError } from "rxjs"; import {debounceTime, throwError} from "rxjs";
import { ConfirmationDialogService } from "src/app/services/confirmation-dialog/confirmation-dialog.service"; import {ConfirmationDialogService} from "src/app/services/confirmation-dialog/confirmation-dialog.service";
import { DataService } from "src/app/services/data/data.service"; import {DataService} from "src/app/services/data/data.service";
import { SpinnerService } from "src/app/services/spinner/spinner.service"; import {SpinnerService} from "src/app/services/spinner/spinner.service";
import { ToastService } from "src/app/services/toast/toast.service"; import {ToastService} from "src/app/services/toast/toast.service";
import { Server, ServerFilter } from "../../../../../models/data/server.model"; import {Server, ServerFilter} from "../../../../../models/data/server.model";
import { catchError } from "rxjs/operators"; import {catchError} from "rxjs/operators";
import { Queries } from "../../../../../models/graphql/queries.model"; import {Queries} from "../../../../../models/graphql/queries.model";
import { Page } from "../../../../../models/graphql/filter/page.model"; import {Page} from "../../../../../models/graphql/filter/page.model";
import { Sort } from "../../../../../models/graphql/filter/sort.model"; import {Sort} from "../../../../../models/graphql/filter/sort.model";
import { Query } from "../../../../../models/graphql/query.model"; import {Query} from "../../../../../models/graphql/query.model";
import { SidebarService } from "../../../../../services/sidebar/sidebar.service"; import {SidebarService} from "../../../../../services/sidebar/sidebar.service";
@Component({ @Component({
selector: "app-dashboard", selector: "app-dashboard",
@ -84,7 +84,7 @@ export class DashboardComponent implements OnInit {
loadNextPage() { loadNextPage() {
this.spinnerService.showSpinner(); this.spinnerService.showSpinner();
this.data.query<Query>(Queries.serversListQuery, { this.data.query<Query>(Queries.serversQuery, {
filter: this.filter, filter: this.filter,
page: this.page, page: this.page,
sort: this.sort sort: this.sort

View File

@ -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>

View File

@ -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%;
// }
//}

View File

@ -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();
});
});

View File

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

View File

@ -1,36 +1,42 @@
<h1> <h1>
{{'view.server.dashboard.header' | translate}} {{'view.server.dashboard.header' | translate}}
</h1> </h1>
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content-header"> <div class="content-header">
<h2> <h2>
<i class="pi pi-server"></i> <i class="pi pi-server"></i>
{{'view.dashboard.server.header' | translate}} {{'view.dashboard.server.header' | translate}}
</h2> </h2>
</div> </div>
<div class="content"> <div class="content">
<div class="server-list-wrapper"> <div class="server-list-wrapper">
<div class="server-list"> <div class="server-list">
<div class="server"> <div class="server">
<div class="logo"> <div class="logo">
<img *ngIf="server.iconURL" [src]="server.iconURL"> <img *ngIf="server.iconURL" [src]="server.iconURL">
</div> </div>
<div class="info"> <div class="info">
<h3 class="name"> <h3 class="name">
{{server.name}} {{server.name}}
</h3> </h3>
<div class="data"> <div class="data">
<i class="pi pi-users"></i> <i class="pi pi-users"></i>
{{server.userCount}} {{server.userCount}}
{{'view.dashboard.server.member_count' | translate}} {{'view.dashboard.server.member_count' | translate}}
</div>
</div>
</div>
</div> </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>
</div>
</div> </div>

View File

@ -5,6 +5,7 @@ import { ServerRoutingModule } from './server-routing.module';
import { SharedModule } from '../../shared/shared.module'; import { SharedModule } from '../../shared/shared.module';
import { ProfileComponent } from './profile/profile.component'; import { ProfileComponent } from './profile/profile.component';
import { MembersComponent } from './members/members.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: [ declarations: [
ServerDashboardComponent, ServerDashboardComponent,
ProfileComponent, ProfileComponent,
MembersComponent MembersComponent,
ClientComponent
], ],
imports: [ imports: [
CommonModule, CommonModule,

View File

@ -258,7 +258,6 @@ header {
padding: 20px; padding: 20px;
.logo { .logo {
overflow: hidden;
img { img {
width: 4rem; width: 4rem;
@ -270,7 +269,7 @@ header {
.info { .info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%;
gap: 10px; gap: 10px;
.name { .name {
@ -282,6 +281,41 @@ header {
.data { .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;
}
}
}
}
}
} }
} }
} }

6
package-lock.json generated Normal file
View File

@ -0,0 +1,6 @@
{
"name": "kd_discord_bot",
"lockfileVersion": 3,
"requires": true,
"packages": {}
}