added clients to server-dashboard #80
This commit is contained in:
parent
a2a0056873
commit
bf776177d4
16
kdb-web/src/app/models/data/client.model.ts
Normal file
16
kdb-web/src/app/models/data/client.model.ts
Normal 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;
|
||||||
|
|
||||||
|
}
|
@ -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;
|
||||||
|
@ -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
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
@ -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
|
||||||
|
@ -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>
|
@ -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%;
|
||||||
|
// }
|
||||||
|
//}
|
@ -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();
|
||||||
|
});
|
||||||
|
});
|
@ -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
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
}
|
@ -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>
|
||||||
|
@ -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,
|
||||||
|
@ -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
6
package-lock.json
generated
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"name": "kd_discord_bot",
|
||||||
|
"lockfileVersion": 3,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user