Sp24 740 get logger

src/app/admin/dialog-template/dialog-template.component.html

@@ -5,7 +5,7 @@ <h1 align="center" class="dialog-title" mat-dialog-title>Informasjon:</h1>
   <p>Navn på iterasjon: {{ data.iterationName }}</p>
 </div>
 <div mat-dialog-content class="content">
-  <p>Tidspunk iterasjonen ble lagd: {{ data.timeCreated }}</p>
+  <p>Tidspunktet iterasjonen ble lagd: {{ data.timeCreated }}</p>
 </div>
 <div mat-dialog-content class="content">
   <p>Antall (nye) bilder i treningssettet: {{ data.imageCount }}</p>

src/app/admin/error-dialog/error-dialog.component.html

@@ -0,0 +1,10 @@
+<div mat-dialog-content class="content">
+  <div id="logMessage"> @for (log of logs; track log.time) {
+    <p>{{log.date}} {{log.time}} {{ log.level }} {{log.message}}</p>
+    <br>
+    }</div>
+    <p></p>
+  <button mat-button mat-dialog-close>Close</button>
+</div>
+
+

src/app/admin/error-dialog/error-dialog.component.scss

@@ -0,0 +1,32 @@
+
+  .mat-dialog-container {
+    border-radius: 56px;
+    width: 698px;
+    height: 546px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow-y: auto;
+  }
+
+  #logMessage {
+    margin-bottom: 16px; // Add some space below the log messages
+    p {
+      font-size: 16px; 
+      margin: 4px 0; 
+      padding: 4px; 
+      background-color: #ffffff; 
+      border-left: 4px solid #2196F3; 
+    }
+  }
+
+  button {
+    margin-top: 16px; 
+    background-color: #2196F3; 
+    color: white; 
+    &:hover {
+      background-color: #1976D2; 
+    }
+  }
+

src/app/admin/error-dialog/error-dialog.component.ts

@@ -0,0 +1,14 @@
+import { LogData } from '@/app/shared/models/backend-interfaces';
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+@Component({
+  selector: 'app-error-dialog',
+  templateUrl: 'error-dialog.component.html',
+  styleUrls: ['./error-dialog.component.scss']}
+)
+export class ErrorLogDialogComponent {
+  constructor(@Inject(MAT_DIALOG_DATA) public data: LogData[]) {}
+
+  logs = this.data
+
+}

src/app/admin/info-dialog/info-dialog.component.ts

@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { DialogTemplateComponent } from './../dialog-template/dialog-template.component';
+import { ErrorLogDialogComponent } from '../error-dialog/error-dialog.component';
+import { LogData } from '@/app/shared/models/backend-interfaces';
 
 @Component({
   selector: 'app-info-dialog',
@@ -20,4 +22,11 @@ export class InfoDialogComponent {
       },
     });
   }
+
+  openErrorLog(logDataArray: LogData[]) {
+
+    this.dialog.open(ErrorLogDialogComponent, {
+      data: logDataArray,
+    });
+  }
 }

src/app/admin/info/info.component.html

@@ -10,6 +10,8 @@ <h3 align="center">Advarsel!</h3>
   <button (click)="retrain()">{{ this.retrainString }}</button>
   <p></p>
   <button (click)="clearHighScore()">{{ this.highScoreString }}</button>
+  <p></p>
+  <button (click)="getLogger()">Hent feilmeldingsloggen</button>
 </div>
 <br />
 <div class="pairing" align="center">

src/app/admin/info/info.component.ts

@@ -5,7 +5,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { InfoDialogComponent } from './../info-dialog/info-dialog.component';
 import { PairingService } from '../../game/services/pairing.service';
 import { MatButton } from '@angular/material/button';
-import { StatusData } from '@/app/shared/models/backend-interfaces';
+import { LogData, StatusData } from '@/app/shared/models/backend-interfaces';
 
 @Component({
   selector: 'app-info',
@@ -39,7 +39,7 @@ export class InfoComponent {
       this.resetDatasetValues();
       this.loginService.revertDataset().subscribe(
         () => {
-          this.openSnackBar('Suksess! treningssett tilbakestilles (dette kan ta noen minutter)');
+          this.openSnackBar('Suksess! Treningssett tilbakestilles (dette kan ta noen minutter)');
         },
         () => {
           msg = this.errorMsg;
@@ -160,6 +160,17 @@ export class InfoComponent {
     );
   }
 
+  getLogger() {
+    this.loginService.getLogger().subscribe(
+      (res: LogData[]) => { 
+        this._dialog.openErrorLog(res)
+      },
+      (error) => {
+        this.openSnackBar(error);
+      }
+    );
+  } 
+
   openSnackBar(msg = 'suksess!') {
     this._snackBar.open(msg, 'Lukk', {
       duration: 6000,

src/app/admin/login.service.ts

@@ -1,7 +1,7 @@
 import { endpoints } from '../shared/models/endpoints';
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { AuthStatus, StatusData } from '../shared/models/backend-interfaces';
+import { AuthStatus, LogData, StatusData } from '../shared/models/backend-interfaces';
 import { Observable } from 'rxjs';
 
 @Injectable({
@@ -93,4 +93,13 @@ export class LoginService {
       }
     );
   }
-}
+
+  getLogger() {
+    return this.http.get<LogData[]>(
+      `${endpoints.TEKNISKBACKEND}/${endpoints.ADMIN}/${endpoints.LOGGER}`,
+      {
+        withCredentials: true,
+      }
+    );
+  }
+}

src/app/shared/models/backend-interfaces.ts

@@ -68,3 +68,10 @@ export interface MultiplayerClassifyParams {
   time_left: number;
   lang: SupportedLanguages;
 }
+
+export interface LogData {
+  date: string,
+  time: string,
+  level: string,
+  message: string,
+}

src/app/shared/models/endpoints.ts

@@ -16,4 +16,5 @@ export const endpoints = {
   GETSTATUS: 'status',
   LOGOUT: 'logout',
   GETEXAMPLEDRAWINGS: 'getExampleDrawings',
+  LOGGER: 'logging'
 };

src/main.ts

@@ -1,5 +1,4 @@
 import { enableProdMode, importProvidersFrom } from '@angular/core';
-
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
 import { provideAnimations } from '@angular/platform-browser/animations';