forked from sh-edraft.de/sh_discord_bot
		
	[WIP] Added server dashboard #72
This commit is contained in:
		| @@ -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()) | ||||
|   | ||||
| @@ -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 | ||||
|   | ||||
| @@ -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) }, | ||||
|   | ||||
| @@ -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> | ||||
|   | ||||
| @@ -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]); | ||||
|   } | ||||
|  | ||||
| } | ||||
|   | ||||
| @@ -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({ | ||||
|   | ||||
| @@ -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({ | ||||
|   | ||||
| @@ -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> | ||||
| @@ -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(); | ||||
|   }); | ||||
| }); | ||||
| @@ -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(); | ||||
|       }); | ||||
|     }); | ||||
|   } | ||||
|  | ||||
| } | ||||
							
								
								
									
										14
									
								
								kdb-web/src/app/modules/view/server/server-routing.module.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										14
									
								
								kdb-web/src/app/modules/view/server/server-routing.module.ts
									
									
									
									
									
										Normal 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 { } | ||||
							
								
								
									
										19
									
								
								kdb-web/src/app/modules/view/server/server.module.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										19
									
								
								kdb-web/src/app/modules/view/server/server.module.ts
									
									
									
									
									
										Normal 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 { } | ||||
| @@ -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' | ||||
|       }) | ||||
|     }); | ||||
|   } | ||||
| } | ||||
|   | ||||
| @@ -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", | ||||
|   | ||||
		Reference in New Issue
	
	Block a user