[WIP] Added server dashboard #72

This commit is contained in:
Sven Heidemann 2022-10-17 19:44:28 +02:00
parent a69c223a33
commit 2a97438417
15 changed files with 181 additions and 14 deletions

View File

@ -57,3 +57,9 @@ class ServerController:
result = await self._discord_service.get_filtered_servers_async(dto)
result.result = result.result.select(lambda x: x.to_dict())
return jsonify(result.to_dict())
@Route.get(f'{BasePath}/get/<id>')
@Route.authorize
async def get_server_by_id(self, id: int) -> Response:
result = await self._discord_service.get_server_by_id_async(id)
return jsonify(result.to_dict())

View File

@ -89,3 +89,10 @@ class DiscordService:
List(ServerDTO, result),
filtered_result.total_count
)
async def get_server_by_id_async(self, id: int) -> ServerDTO:
server = self._servers.get_server_by_id(id)
guild = self._bot.get_guild(server.discord_server_id)
server_dto = ServerTransformer.to_dto(server, guild.name, guild.member_count, guild.icon)
return server_dto

View File

@ -7,6 +7,7 @@ import { AuthGuard } from './modules/shared/guards/auth/auth.guard';
const routes: Routes = [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', loadChildren: () => import('./modules/view/dashboard/dashboard.module').then(m => m.DashboardModule), canActivate: [AuthGuard] },
{ path: 'server', loadChildren: () => import('./modules/view/server/server.module').then(m => m.ServerModule), canActivate: [AuthGuard] },
{ path: 'change-password', loadChildren: () => import('./modules/view/change-password/change-password.module').then(m => m.ChangePasswordModule), canActivate: [AuthGuard] },
{ path: 'user-settings', loadChildren: () => import('./modules/view/user-settings/user-settings.module').then(m => m.UserSettingsModule), canActivate: [AuthGuard] },
{ path: 'auth', loadChildren: () => import('./modules/auth/auth.module').then(m => m.AuthModule) },

View File

@ -26,7 +26,7 @@
</div>
<div class="server-list">
<div class="server" *ngFor="let server of servers">
<div class="server" *ngFor="let server of servers" (click)="selectServer(server)">
<div class="logo">
<img *ngIf="server.iconURL" [src]="server.iconURL">
</div>

View File

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { LazyLoadEvent } from 'primeng/api';
import { catchError, debounceTime, throwError } from 'rxjs';
@ -17,7 +18,6 @@ import { ToastService } from 'src/app/services/toast/toast.service';
})
export class DashboardComponent implements OnInit {
loading = true;
servers: ServerDTO[] = [];
searchCriterions: ServerSelectCriterion = {
@ -40,10 +40,12 @@ export class DashboardComponent implements OnInit {
private toastService: ToastService,
private confirmDialog: ConfirmationDialogService,
private fb: FormBuilder,
private translate: TranslateService
private translate: TranslateService,
private router: Router
) { }
ngOnInit(): void {
this.spinnerService.showSpinner();
this.setFilterForm();
this.loadNextPage();
}
@ -73,13 +75,14 @@ export class DashboardComponent implements OnInit {
}
loadNextPage() {
this.spinnerService.showSpinner();
this.data.getFilteredServers(this.searchCriterions).pipe(catchError(err => {
this.loading = false;
this.spinnerService.hideSpinner();
return throwError(() => err);
})).subscribe(list => {
this.totalRecords = list.totalCount;
this.servers = list.servers;
this.loading = false;
this.spinnerService.hideSpinner();
});
}
@ -102,4 +105,8 @@ export class DashboardComponent implements OnInit {
this.filterForm.reset();
}
selectServer(server: ServerDTO) {
this.router.navigate(['/server', server.serverId]);
}
}

View File

@ -3,7 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './components/dashboard/dashboard.component';
const routes: Routes = [
{path: '', component: DashboardComponent}
{ path: '', component: DashboardComponent }
];
@NgModule({

View File

@ -1,9 +1,9 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { DashboardRoutingModule } from './dashboard-routing.module';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { SharedModule } from '../../shared/shared.module';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { DashboardRoutingModule } from './dashboard-routing.module';
@NgModule({

View File

@ -0,0 +1,36 @@
<h1>
{{'view.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">
<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="data">
<i class="pi pi-users"></i>
{{server.memberCount}}
{{'view.dashboard.server.member_count' | translate}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ServerDashboardComponent } from './server-dashboard.component';
describe('ServerDashboardComponent', () => {
let component: ServerDashboardComponent;
let fixture: ComponentFixture<ServerDashboardComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ServerDashboardComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(ServerDashboardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,45 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { catchError, throwError } from 'rxjs';
import { ServerDTO } from 'src/app/models/discord/server.dto';
import { DataService } from 'src/app/services/data/data.service';
import { SpinnerService } from 'src/app/services/spinner/spinner.service';
@Component({
selector: 'app-server-dashboard',
templateUrl: './server-dashboard.component.html',
styleUrls: ['./server-dashboard.component.scss']
})
export class ServerDashboardComponent implements OnInit {
id!: number;
server!: ServerDTO;
constructor(
private route: ActivatedRoute,
private router: Router,
private data: DataService,
private spinner: SpinnerService
) { }
ngOnInit(): void {
this.route.params.subscribe(params => {
this.id = +params['id'];
if (!this.id) {
this.router.navigate(['/dashboard']);
return;
}
this.spinner.showSpinner();
this.data.getServerByID(this.id).pipe(catchError(err => {
this.spinner.hideSpinner();
return throwError(() => err);
})).subscribe(server => {
this.server = server;
this.spinner.hideSpinner();
});
});
}
}

View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ServerDashboardComponent } from './server-dashboard/server-dashboard.component';
const routes: Routes = [
{ path: '', component: ServerDashboardComponent },
{ path: ':id', component: ServerDashboardComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ServerRoutingModule { }

View File

@ -0,0 +1,19 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ServerDashboardComponent } from './server-dashboard/server-dashboard.component';
import { ServerRoutingModule } from './server-routing.module';
import { SharedModule } from '../../shared/shared.module';
@NgModule({
declarations: [
ServerDashboardComponent
],
imports: [
CommonModule,
ServerRoutingModule,
SharedModule
]
})
export class ServerModule { }

View File

@ -42,4 +42,12 @@ export class DataService {
})
});
}
getServerByID(id: number): Observable<ServerDTO> {
return this.http.get<ServerDTO>(`${this.appsettings.getApiURL()}/api/discord/server/get/${id}`, {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
});
}
}

View File

@ -7,10 +7,8 @@
},
"sidebar": {
"dashboard": "Dashboard",
"domain_list": "Domänen",
"host_list": "Rechner",
"user_list": "Benutzer",
"login_list": "Logins",
"server": "Server",
"server_empty": "Kein Server ausgewählt",
"config": "Konfiguration",
"auth_user_list": "Benutzer"
},
@ -118,6 +116,9 @@
"name": "Name"
}
},
"server": {
"header": "Server"
},
"user-list": {},
"change-password": {
"header": "Passwort ändern",