Feature/6 game upload

.github/workflows/build-test-scan-push-images.yml

@@ -95,6 +95,7 @@ jobs:
           image-ref: '${{ env.REGISTRY }}/${{ env.NAMESPACE }}/${{ env.SUB_NAMESPACE }}/${{ matrix.image.name }}:${{ github.sha }}'
           format: 'sarif'
           output: 'trivy-results.sarif'
+          limit-severities-for-sarif: true
           exit-code: '1'
           severity: 'CRITICAL,HIGH'
 

frontend/indiestream/src/app/app.component.html

@@ -204,6 +204,8 @@ <h1>Hello, {{ title }}</h1>
   </table>
 </div>
 
+<app-game-upload></app-game-upload>
+
 
 
 

frontend/indiestream/src/app/app.component.spec.ts

@@ -1,10 +1,11 @@
 import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AppComponent],
+      imports: [AppComponent, BrowserAnimationsModule],
     }).compileComponents();
   });
 

frontend/indiestream/src/app/app.component.ts

@@ -5,11 +5,12 @@ import { Game } from "./modules/games";
 import { CommonModule } from "@angular/common";
 import { MatButtonModule } from '@angular/material/button';
 import { HttpClientModule } from "@angular/common/http";
+import { GameUploadComponent} from "./components/game-upload/game-upload.component";
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, CommonModule, MatButtonModule, HttpClientModule],
+  imports: [RouterOutlet, CommonModule, MatButtonModule, HttpClientModule, GameUploadComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })

frontend/indiestream/src/app/app.config.ts

@@ -1,10 +1,11 @@
-import { ApplicationConfig } from '@angular/core';
+import {ApplicationConfig, importProvidersFrom} from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
-import {provideHttpClient} from "@angular/common/http";
+import { provideHttpClient } from "@angular/common/http";
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import {provideAnimations} from "@angular/platform-browser/animations";
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes), provideHttpClient(), provideAnimationsAsync()]
+  providers: [provideRouter(routes), provideHttpClient(), provideAnimationsAsync(), provideAnimations()]
 };

frontend/indiestream/src/app/components/game-upload/game-upload.component.html

@@ -0,0 +1,29 @@
+<form class="game-upload-container" [formGroup]="gameForm" (ngSubmit)="onUpload()">
+  <div class="input-fields">
+    <mat-form-field subscriptSizing="dynamic" class="input-title">
+      <mat-label>Title of your game</mat-label>
+      <input matInput type="text" formControlName="title">
+    </mat-form-field>
+    <mat-form-field subscriptSizing="dynamic">
+      <input type="file" class="input-file" (change)="onFileSelected($event)" #fileUpload>
+      <mat-label> Chose game</mat-label>
+      <input type="text" readonly matInput formControlName="filename">
+      <button type="button" mat-icon-button matSuffix color="primary"
+              (click)="fileUpload.click()">
+        <mat-icon>attach_file</mat-icon>
+      </button>
+    </mat-form-field>
+  </div>
+  <div class="upload-game">
+    <div *ngIf="uploadProgress" class="progress-bar">
+      <mat-progress-bar mode="determinate"
+                        [value]="uploadProgress">
+      </mat-progress-bar>
+    </div>
+    <button mat-raised-button color="primary" type="submit">
+            <!--(click)="cancelUpload()"-->
+      Upload
+      <mat-icon>cloud_upload</mat-icon>
+    </button>
+  </div>
+</form>

frontend/indiestream/src/app/components/game-upload/game-upload.component.scss

@@ -0,0 +1,20 @@
+.game-upload-container {
+  display: inline-block;
+}
+
+.input-file {
+  display: none;
+}
+
+.input-fields {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.input-title {
+  margin-right: 10px;
+}
+
+.progress-bar {
+  margin-bottom: 5px;
+}

frontend/indiestream/src/app/components/game-upload/game-upload.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GameUploadComponent } from './game-upload.component';
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
+
+describe('GameUploadComponent', () => {
+  let component: GameUploadComponent;
+  let fixture: ComponentFixture<GameUploadComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GameUploadComponent, BrowserAnimationsModule]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GameUploadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/indiestream/src/app/components/game-upload/game-upload.component.ts

@@ -0,0 +1,71 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressBar } from "@angular/material/progress-bar";
+import { MatIcon } from "@angular/material/icon";
+import { HttpClientModule, HttpEventType } from "@angular/common/http";
+import {finalize, Subscription} from "rxjs";
+import {NgIf} from "@angular/common";
+import {GamesService} from "../../services/games.service";
+import {MatFormField, MatHint, MatInput, MatLabel, MatSuffix} from "@angular/material/input";
+import {FormBuilder, ReactiveFormsModule, Validators} from "@angular/forms";
+
+@Component({
+  selector: 'app-game-upload',
+  standalone: true,
+  imports: [
+    MatButtonModule,
+    MatProgressBar,
+    MatIcon,
+    NgIf,
+    MatInput,
+    MatHint,
+    MatFormField,
+    MatLabel,
+    MatSuffix,
+    ReactiveFormsModule,
+    HttpClientModule,
+  ],
+  templateUrl: './game-upload.component.html',
+  styleUrl: './game-upload.component.scss'
+})
+export class GameUploadComponent {
+
+  uploadProgress: number = 0;
+  uploadSub: Subscription = new Subscription();
+  file_store: FileList = new DataTransfer().files;
+  gameForm = this.fb.group({
+    title: ['', Validators.required],
+    filename: ['', Validators.required]
+  });
+
+  constructor(private gamesService: GamesService, private fb: FormBuilder) {}
+
+  onFileSelected(event: any) {
+    const file:File = event.target.files[0];
+    if (file) {
+      this.file_store = event.target.files;
+      this.gameForm.patchValue({ filename: file.name});
+    }
+  }
+
+  onUpload() {
+    const upload$ = this.gamesService.uploadGame(this.file_store[0])
+      .pipe(
+        finalize(() => this.reset())
+      );
+
+    this.uploadSub = upload$.subscribe(event => {
+      if (event.type == HttpEventType.UploadProgress && event.total !== undefined) {
+        this.uploadProgress = Math.round(100 * (event.loaded / event.total));
+      }
+    })
+  }
+
+  reset() {
+    this.uploadProgress = 0;
+    this.uploadSub.unsubscribe();
+    this.uploadSub = new Subscription();
+    this.gameForm.reset();
+    this.file_store = new DataTransfer().files;
+  }
+}

frontend/indiestream/src/app/services/games.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from "@angular/core";
-import { HttpClient } from '@angular/common/http';
+import {HttpClient, HttpEvent} from '@angular/common/http';
 import { Games, Game } from '../modules/games';
 import { Observable } from "rxjs";
 import { environment } from "../environment";
@@ -22,5 +22,12 @@ export class GamesService {
   deleteGame(id: string): void{
     this.http.delete(this.apiUrl + "/games/" + id + "/")
   }
+
+  uploadGame(file: File): Observable<HttpEvent<Object>>{
+    return this.http.post(this.apiUrl + "/games/", file, {
+      reportProgress: true,
+      observe: 'events'
+    });
+  }
 }