Dashboard

client/src/app/modules/dashboard/dashboard.component.ts

@@ -1,15 +1,62 @@
-import { Component } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { Component, inject } from '@angular/core';
 import { AgGridAngular } from 'ag-grid-angular';
-import { ColDef } from 'ag-grid-community'; // Column Definition Type Interface
+import { ColDef, GridOptions, GridReadyEvent } from 'ag-grid-community'; // Column Definition Type Interface
+import { ApiService } from '../../shared/api.service';
+import { MatIconModule } from '@angular/material/icon';
+import {MatCardModule} from '@angular/material/card';
+import { RouterModule } from '@angular/router';
+import { AgLoadingComponent } from '../../shared/ag-grid/components/ag-loading/ag-loading.component';
 
 @Component({
   selector: 'app-dashboard',
   standalone: true,
-  imports: [AgGridAngular],
+  imports: [AgGridAngular, MatIconModule, AgGridAngular, MatCardModule, RouterModule],
+  providers: [DatePipe],
   templateUrl: './dashboard.component.html',
   styleUrl: './dashboard.component.scss'
 })
 export class DashboardComponent {
-
+  private api = inject(ApiService);
+  private datePipe = inject(DatePipe);
+  
+  gridOptions: GridOptions = {
+    columnDefs: [
+      { field: 'createdAt', headerName: 'Zeitpunkt', width: 160, 
+        cellRenderer: (data: any) => this.datePipe.transform(new Date(data.value)) },
+      { field: 'message', headerName: 'Aktion', flex: 1 },
+      { field: 'user', headerName: 'Benutzer', flex: 0,
+        cellRenderer: (data: any) => `${data.value?.firstName} ${data.value?.lastName}` }
+    ],
+    pagination: true,
+    paginationPageSize: 10,
+    loading: true,
+    loadingOverlayComponent: AgLoadingComponent
+  };
+  
+  // Stats
+  keyCount = 0;
+  cylinderCount = 0; 
+  systemCount = 0;
+  
+  ngOnInit() {
+    this.loadStats();
+  }
+  
+  loadStats() {
+    this.api.getStats().subscribe(stats => {
+      this.keyCount = stats.keys;
+      this.cylinderCount = stats.cylinders;
+      this.systemCount = stats.systems;
+    });
+  }
+  
+  onGridReady(params: GridReadyEvent) {
+    params.api.setGridOption("loading", true);
+    this.api.getActivities().subscribe(activity => {
+      params.api.setGridOption("rowData", activity)
+      params.api.setGridOption("loading", false);
+    });
+  }
   
 }