Merge pull request #283 from computas/develop

merge 2.1.3 dev into release

.dockerignore

@@ -0,0 +1,15 @@
+node_modules
+Dockerfile*
+docker-compose*
+.dockerignore
+.git
+.gitignore
+README.md
+LICENSE
+.vscode
+Makefile
+helm-charts
+.env
+.editorconfig
+.idea
+coverage*

Dockerfile

@@ -0,0 +1,60 @@
+FROM node:18 AS base
+WORKDIR /app
+
+# Copy package.json and bun.lockb
+COPY package.json .
+COPY bun.lockb .
+
+# Install Bun
+RUN curl -fsSL https://bun.sh/install | bash
+
+# Add Bun to PATH
+ENV BUN_INSTALL="/root/.bun"
+ENV PATH="$BUN_INSTALL/bin:$PATH"
+
+# Install dependencies using Bun
+RUN bun install --frozen-lockfile
+RUN npm install -g @angular/cli
+RUN bun install
+
+# --- DEVELOPMENT STAGE ---
+
+FROM base AS development
+ENV NODE_ENV=development
+
+COPY . /app
+
+EXPOSE 4200
+
+# Run the app in development mode using ng serve
+CMD ["bun", "run", "start"]
+
+# --- BUILD STAGE ---
+FROM base AS build
+
+# Copy all files for the build
+COPY . /app
+
+RUN ng build --configuration ComputasProd
+
+RUN apt update && apt install -y nginx && \
+    rm -rf /var/lib/apt/lists/*
+
+# --- PRODUCTION STAGE ---
+FROM nginx:alpine AS production
+ENV NODE_ENV=production
+
+# Copy the source code for building the production build
+COPY . /app
+
+# Copy built files from the build stage to the Nginx html directory
+COPY --from=build /app/dist/tekniskmuseum /usr/share/nginx/html
+
+# Copy the custom Nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Expose the Nginx port
+EXPOSE 80
+
+# Start Nginx
+CMD ["nginx", "-g", "daemon off;"]

nginx.conf

@@ -0,0 +1,16 @@
+server {
+    listen 80;
+
+    server_name localhost;
+
+    root /usr/share/nginx/html;  
+
+    location / {
+        try_files $uri $uri/ /index.html;  
+    }
+
+    location /assets/ {
+
+        try_files $uri $uri/ /index.html;  
+    }
+}

package.json

@@ -6,7 +6,7 @@
   "version": "0.0.0",
   "scripts": {
     "prettier": "prettier --end-of-line=crlf --write src/**/*.ts",
-    "start": "ng serve",
+    "start": "ng serve --host 0.0.0.0",
     "build": "ng build",
     "build:ci": "ng build --configuration production",
     "build:computas": "ng build --configuration computas",
@@ -22,12 +22,17 @@
     "@angular/forms": "^18.0.2",
     "@angular/localize": "^18.0.4",
     "@angular/material": "^18.0.2",
+    "@angular/material-moment-adapter": "^18.2.7",
     "@angular/platform-browser": "^18.0.2",
     "@angular/platform-browser-dynamic": "^18.0.2",
     "@angular/router": "^18.0.2",
     "@angular/service-worker": "^18.0.2",
+    "@canvasjs/angular-charts": "^1.2.0",
+    "@canvasjs/charts": "^3.10.10",
+    "angular-moment": "^1.3.0",
     "canvas-confetti": "^1.9.3",
     "howler": "^2.2.4",
+    "moment": "^2.30.1",
     "rxjs": "~7.8.1",
     "socket.io-client": "^4.7.5",
     "tslib": "^2.6.3",

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

@@ -9,5 +9,5 @@
       </p>
       <p> </p>
     }</div>
-  <button mat-button mat-dialog-close (click)="closeDialog()">Lukk</button></div>
+  </div>
 </div>

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

@@ -13,8 +13,4 @@ export class ErrorLogDialogComponent {
 
   logs = this.data
 
-  closeDialog(): void {
-    this.dialogRef.close();
-  }
-
 }

src/app/admin/graph/graph.component.html

@@ -0,0 +1,5 @@
+<div class="chart-container">
+    @if (render) {
+        <canvasjs-chart [options]="chartOptions" [ngStyle]="{'width': '100%', 'height': '400px'}"></canvasjs-chart>
+    }
+</div>    

src/app/admin/graph/graph.component.scss

@@ -0,0 +1,22 @@
+.chart-container {
+    justify-content: center; /* Center horizontally */
+    align-items: center; /* Center vertically */
+    margin: 20px 0; /* Add some vertical margin */
+    width: 100%; /* Full width */
+    display: flex;
+    height: 500px;
+}
+
+.canvasjs-chart {
+    width: 90%; /* Default to 60% width */
+    height: 100px; /* Set height */
+    position: relative;
+}
+
+@media (max-width: 768px) {
+    .canvasjs-chart {
+        width: 90%; /* Increase width on smaller screens */
+    }
+}
+
+.canvasjs-chart>canvas:first-of-type { position: relative !important; }

src/app/admin/graph/graph.component.ts

@@ -0,0 +1,109 @@
+import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnDestroy, Renderer2 } from '@angular/core';
+import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { endpoints } from '@/app/shared/models/endpoints';
+import { RouterOutlet } from '@angular/router';
+import { CommonModule } from '@angular/common';
+
+interface DataPoint {
+  x: Date;
+  y: number;
+}
+
+type ScoresPerMonthResponse = Record<string, number>;
+
+@Component({
+  selector: 'app-graph-component',
+  standalone: true,
+  imports: [RouterOutlet, CommonModule, CanvasJSAngularChartsModule],
+  templateUrl: './graph.component.html',
+  styleUrls: ['./graph.component.scss'],
+})
+export class GraphComponent implements OnChanges, OnDestroy, AfterViewInit {
+  @Input() year = ''; 
+  dataList: Record<string, number> = {};
+  render = false;
+  chartOptions = {
+    animationEnabled: true,
+    theme: "light2",
+    title: {
+      text: "Statistikk for året "
+    },
+    axisX: {
+      valueFormatString: "MMM",
+      intervalType: "month",
+      interval: 1
+    },
+    axisY: {
+      title: "Antall spilte spill",
+      suffix: ""
+    },
+    toolTip: {
+      shared: true
+    },
+    legend: {
+      cursor: "pointer",
+      itemclick: function (e: { dataSeries: { visible: boolean; }; }) {
+        e.dataSeries.visible = typeof e.dataSeries.visible === "undefined" || e.dataSeries.visible ? false : true;
+      }
+    },
+    data: [{
+      type: "line",
+      name: "Antall spill",
+      showInLegend: true,
+      dataPoints: [] as DataPoint[]
+    }]
+  };
+
+  constructor(private http: HttpClient, private el: ElementRef, private renderer: Renderer2) {}
+
+  ngOnChanges() {
+    if (this.year) {
+      this.getDataList().subscribe({
+        next: (res) => {
+          this.dataList = res;
+          this.updateChartData();
+		  this.render = true;
+        },
+        error: (err) => {
+          console.error('Failed to get data from backend', err);
+        }
+      });
+    }
+  }
+
+  updateChartData() {
+    const dataPoints: DataPoint[] = Object.entries(this.dataList).map(([month, scoreCount]) => ({
+      x: new Date(+this.year, Number(month) - 1, 1),
+      y: Number(scoreCount)
+    }));
+
+	this.chartOptions.data[0].dataPoints = dataPoints;
+  this.chartOptions.title.text += this.year;
+
+
+  }
+
+  getDataList(): Observable<ScoresPerMonthResponse> {
+    return this.http.get<ScoresPerMonthResponse>(
+      `${endpoints.TEKNISKBACKEND}/${endpoints.ADMIN}/${endpoints.GETSCORESPERMONTH}?year=${this.year}`,
+      {
+        withCredentials: true,
+      }
+    );
+  }
+
+  ngOnDestroy(): void {
+	  this.render = false;
+  }
+
+  ngAfterViewInit(): void {
+    const canvasChart = this.el.nativeElement.querySelector('canvasjs-chart');
+    if (canvasChart) {
+      this.renderer.setStyle(canvasChart, 'width', '100%');
+      this.renderer.setStyle(canvasChart, 'height', '400px');
+    }
+  }
+
+}

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

@@ -3,6 +3,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { DialogComponent } from '../dialog/dialog.component';
 import { ErrorLogDialogComponent } from '../error-dialog/error-dialog.component';
 import { LogData } from '@/app/shared/models/backend-interfaces';
+import { StatisticsComponent } from '../statistics/statistics.component';
 
 @Component({
   selector: 'app-info-dialog',
@@ -23,12 +24,13 @@ export class InfoDialogComponent {
     });
   }
 
-openErrorLog(logDataArray: LogData[]) {
-
-  this.dialog.open(ErrorLogDialogComponent, {
-    data: logDataArray,
-  });
-}
-
-}
+  openErrorLog(logDataArray: LogData[]) {
+    this.dialog.open(ErrorLogDialogComponent, {
+      data: logDataArray,
+    });
+  }
 
+  openStatistics() {
+    this.dialog.open(StatisticsComponent);
+  }
+}

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

@@ -3,6 +3,8 @@ <h1 align="center" class="info-title">Administrative handlinger</h1>
 <div class="btn-group" align="center">
   <button class="btn btn-lg btn-outline-primary" (click)="getInformation()">Vis informasjon</button>
   <p></p>
+  <button (click)="getStatistics()">Vis statistikk</button>
+  <p></p>
   <button (click)="clearHighScore()">{{ this.highScoreString }}</button>
   <p></p>
   <button (click)="getLogger()">Hent feilmeldingsloggen (backend)</button>

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

@@ -112,3 +112,4 @@ br {
 p + p {
   margin-top: 0.5rem;
 }
+

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

@@ -2,18 +2,21 @@ 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 { 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';
+import { GraphComponent } from '../graph/graph.component';
+import { StatisticsComponent } from '../statistics/statistics.component';
+import { MatDialog } from '@angular/material/dialog';
+import { DialogComponent } from '../dialog/dialog.component';
+import { ErrorLogDialogComponent } from '../error-dialog/error-dialog.component';
 
 @Component({
   selector: 'app-info',
   templateUrl: './info-page.component.html',
   styleUrls: ['./info-page.component.scss'],
   standalone: true,
-  imports: [MatButton],
+  imports: [MatButton, GraphComponent],
 })
 export class InfoPageComponent {
   datasetString = 'Nullstill treningssett til originalen';
@@ -30,10 +33,10 @@ export class InfoPageComponent {
     private router: Router,
     private loginService: LoginService,
     private _snackBar: MatSnackBar,
-    private _dialog: InfoDialogComponent,
-    private pairing: PairingService,
-    private loggingService: LoggingService
+    private dialog: MatDialog, 
+    private loggingService: LoggingService,
   ) {}
+
 
   clearHighScore() {
     let msg = '';
@@ -89,18 +92,24 @@ export class InfoPageComponent {
         const name = res.CV_iteration_name;
         const time = res.CV_time_created;
         const count = res.BLOB_image_count;
-        this._dialog.openDialog(name, time, count.toString());
+        this.dialog.open(DialogComponent, {
+          data: { iterationName: name, timeCreated: time, imageCount: count.toString() },
+        });
       },
       () => {
         this.openSnackBar(this.errorMsg);
       }
     );
   }
 
+  getStatistics() {
+    this.dialog.open(StatisticsComponent);
+  }
+
   getLogger() {
     this.loginService.getLogger().subscribe(
       (res: LogData[]) => { 
-        this._dialog.openErrorLog(res)
+        this.dialog.open(ErrorLogDialogComponent, {data: res});
       },
       (error) => {
         this.openSnackBar(error);
@@ -118,7 +127,7 @@ export class InfoPageComponent {
       message: str.slice(80,115),
     }))
 
-    this._dialog.openErrorLog(formatted_logs)
+    this.dialog.open(ErrorLogDialogComponent, {data: formatted_logs});
 
   }