[WIP] Added server dashboard #72

kdb-bot/src/bot_api/controller/discord/server_controller.py

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

kdb-bot/src/bot_api/service/discord_service.py

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

kdb-web/src/app/app-routing.module.ts

@@ -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) },

kdb-web/src/app/modules/view/dashboard/components/dashboard/dashboard.component.html

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

kdb-web/src/app/modules/view/dashboard/components/dashboard/dashboard.component.ts

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

kdb-web/src/app/modules/view/dashboard/dashboard.module.ts

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

kdb-web/src/app/modules/view/server/server-dashboard/server-dashboard.component.html

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

kdb-web/src/app/modules/view/server/server-dashboard/server-dashboard.component.spec.ts

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

kdb-web/src/app/modules/view/server/server-dashboard/server-dashboard.component.ts

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

kdb-web/src/app/modules/view/server/server-routing.module.ts

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

kdb-web/src/app/modules/view/server/server.module.ts

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

kdb-web/src/app/services/data/data.service.ts

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

kdb-web/src/assets/i18n/de.json

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