Merge pull request #271 from computas/SP24-779-design-admin

refactor and change simple design

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

@@ -0,0 +1,11 @@
+<div mat-dialog-content class="dialog-content">
+  <h1 align="center" class="dialog-title" mat-dialog-title>Informasjon</h1>
+
+  <div class="dialog-body">
+    <p><b>Navn på iterasjon:</b> {{ data.iterationName }}</p>
+    <p><b>Tidspunktet iterasjonen ble lagd:</b> {{ data.timeCreated }}</p>
+    <p><b>Antall (nye) bilder i treningssettet:</b> {{ data.imageCount }}</p>
+  </div>
+
+  <p class="dialog-footer">(Trykk utenfor boksen for å lukke)</p>
+</div>

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

@@ -0,0 +1,29 @@
+.dialog-content {
+  text-align: center;
+  padding: 20px;
+  max-width: 400px;
+  margin: auto;
+}
+
+.dialog-title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+.dialog-body p {
+  font-size: 16px;
+  margin: 10px 0;
+  font-weight: 500;
+}
+
+.dialog-body b {
+  font-weight: 900;
+}
+
+.dialog-footer {
+  font-size: 14px;
+  color: grey;
+  margin-top: 20px;
+  font-style: italic;
+}

src/app/admin/dialog-template/dialog-template.component.ts → src/app/admin/dialog/dialog.component.ts

@@ -5,11 +5,11 @@ import { DialogData } from '@/app/shared/models/interfaces';
 
 @Component({
   selector: 'app-dialog-template',
-  templateUrl: './dialog-template.component.html',
-  styleUrls: ['./dialog-template.component.scss'],
+  templateUrl: './dialog.component.html',
+  styleUrls: ['./dialog.component.scss'],
   standalone: true,
   imports: [CdkScrollable, MatDialogContent, MatDialogTitle],
 })
-export class DialogTemplateComponent {
+export class DialogComponent {
   constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
 }

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

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { DialogTemplateComponent } from './../dialog-template/dialog-template.component';
+import { DialogComponent } from '../dialog/dialog.component';
 import { ErrorLogDialogComponent } from '../error-dialog/error-dialog.component';
 import { LogData } from '@/app/shared/models/backend-interfaces';
 
@@ -14,7 +14,7 @@ export class InfoDialogComponent {
   constructor(public dialog: MatDialog) {}
 
   openDialog(iterName: string, time: string, imgCount: string) {
-    this.dialog.open(DialogTemplateComponent, {
+    this.dialog.open(DialogComponent, {
       data: {
         iterationName: iterName,
         timeCreated: time,
@@ -23,10 +23,12 @@ export class InfoDialogComponent {
     });
   }
 
-  openErrorLog(logDataArray: LogData[]) {
+openErrorLog(logDataArray: LogData[]) {
 
-    this.dialog.open(ErrorLogDialogComponent, {
-      data: logDataArray,
-    });
-  }
+  this.dialog.open(ErrorLogDialogComponent, {
+    data: logDataArray,
+  });
 }
+
+}
+

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

@@ -0,0 +1,16 @@
+<h1 align="center" class="info-title">Administrative handlinger</h1>
+<br/>
+<div class="btn-group" align="center">
+  <button class="btn btn-lg btn-outline-primary" (click)="getInformation()">Vis informasjon</button>
+  <p></p>
+  <button (click)="clearHighScore()">{{ this.highScoreString }}</button>
+  <p></p>
+  <button (click)="getLogger()">Hent feilmeldingsloggen (backend)</button>
+  <p></p>
+  <button (click)="getLoggerFrontend()">Hent feilmeldingsloggen (frontend)</button>
+</div>
+<br />
+
+<div align="center">
+  <button mat-button class="sign-out-btn" (click)="signOut()">Logg ut</button>
+</div>

src/app/admin/info/info.component.scss → src/app/admin/info-page/info-page.component.scss

@@ -39,7 +39,7 @@ p {
 }
 
 .btn-group button:first-child {
-  background-color: #c78bde;
+  background-color: #734f81;
   margin-top: 2vh;
   border: 1px solid #96a7b1;
 }

src/app/admin/info/info.component.ts → src/app/admin/info-page/info-page.component.ts

@@ -2,20 +2,20 @@ import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { LoginService } from '../login.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { InfoDialogComponent } from './../info-dialog/info-dialog.component';
+import { InfoDialogComponent } from '../info-dialog/info-dialog.component';
 import { PairingService } from '../../game/services/pairing.service';
 import { MatButton } from '@angular/material/button';
 import { LogData, StatusData } from '@/app/shared/models/backend-interfaces';
 import { LoggingService } from '../../game/services/logging.service';
 
 @Component({
   selector: 'app-info',
-  templateUrl: './info.component.html',
-  styleUrls: ['./info.component.scss'],
+  templateUrl: './info-page.component.html',
+  styleUrls: ['./info-page.component.scss'],
   standalone: true,
   imports: [MatButton],
 })
-export class InfoComponent {
+export class InfoPageComponent {
   datasetString = 'Nullstill treningssett til originalen';
   datasetBool = false;
   retrainString = 'Tren maskinlæringsmodellen';
@@ -34,49 +34,7 @@ export class InfoComponent {
     private pairing: PairingService,
     private loggingService: LoggingService
   ) {}
-
-  revertDataset() {
-    let msg = '';
-    if (this.datasetBool) {
-      this.resetDatasetValues();
-      this.loginService.revertDataset().subscribe(
-        () => {
-          this.openSnackBar('Suksess! Treningssett tilbakestilles (dette kan ta noen minutter)');
-        },
-        () => {
-          msg = this.errorMsg;
-          this.openSnackBar(msg);
-        }
-      );
-      this.resetDatasetValues();
-    } else {
-      this.resetHighScoreValues();
-      this.resetRetrainValues();
-      this.setDatasetValues();
-    }
-  }
-
-  retrain() {
-    let msg = '';
-    if (this.retrainBool) {
-      this.resetDatasetValues();
-      this.loginService.retrain().subscribe(
-        () => {
-          this.openSnackBar('Suksess! Modellen blir trent (dette kan ta noen minutter)');
-        },
-        () => {
-          msg = this.errorMsg;
-          this.openSnackBar(msg);
-        }
-      );
-      this.resetRetrainValues();
-    } else {
-      this.resetDatasetValues();
-      this.resetHighScoreValues();
-      this.setRetrainValues();
-    }
-  }
-
+
   clearHighScore() {
     let msg = '';
     if (this.highScoreBool) {
@@ -93,7 +51,6 @@ export class InfoComponent {
       this.resetHighScoreValues();
     } else {
       this.resetDatasetValues();
-      this.resetRetrainValues();
       this.setHighScoreValues();
     }
   }
@@ -103,37 +60,16 @@ export class InfoComponent {
     this.highScoreBool = false;
   }
 
-  resetRetrainValues() {
-    this.retrainString = 'Tren maskinlæringsmodellen';
-    this.retrainBool = false;
-  }
-
   resetDatasetValues() {
     this.datasetString = 'Nullstill treningssett til originalen';
     this.datasetBool = false;
   }
 
-  resetAll() {
-    this.resetHighScoreValues();
-    this.resetRetrainValues();
-    this.resetDatasetValues();
-  }
-
   setHighScoreValues() {
     this.highScoreString = this.secondMsg;
     this.highScoreBool = true;
   }
 
-  setRetrainValues() {
-    this.retrainString = this.secondMsg;
-    this.retrainBool = true;
-  }
-
-  setDatasetValues() {
-    this.datasetString = this.secondMsg;
-    this.datasetBool = true;
-  }
-
   signOut() {
     this.loginService.signOut().subscribe(
       () => {
@@ -148,7 +84,6 @@ export class InfoComponent {
   }
 
   getInformation() {
-    this.resetAll();
     this.loginService.getStatus().subscribe(
       (res: StatusData) => {
         const name = res.CV_iteration_name;
@@ -192,12 +127,4 @@ export class InfoComponent {
       duration: 6000,
     });
   }
-
-  pair(id: string) {
-    this.pairing.setPairID(id);
-  }
-
-  getPairID() {
-    return this.pairing.getPairID();
-  }
 }

src/app/routes.ts

@@ -6,7 +6,7 @@ import { routes as r } from './shared/models/routes';
 import { GameResultComponent } from './game/game-result/game-result.component';
 import { GameDrawComponent } from './game/game-draw/game-draw.component';
 import { AdminComponent } from './admin/admin.component';
-import { InfoComponent } from './admin/info/info.component';
+import { InfoPageComponent } from './admin/info-page/info-page.component';
 import { authGuard } from './admin/auth-guard';
 import { MultiplayerComponent } from './game/game-multiplayer/multiplayer.component';
 
@@ -48,7 +48,7 @@ export const routes: Routes = [
   },
   {
     path: 'admin/info',
-    component: InfoComponent,
+    component: InfoPageComponent,
     canActivate: [authGuard],
   },
 ];