Hook up the uplaod dialog in the FE

package-lock.json

@@ -7470,9 +7470,9 @@
       "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
     },
     "node_modules/@types/node": {
-      "version": "20.9.1",
+      "version": "20.9.2",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.9.1.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.9.2.tgz",
-      "integrity": "sha512-HhmzZh5LSJNS5O8jQKpJ/3ZcrrlG6L70hpGqMIAoM9YVD0YBRNWYsfwcXq8VnSjlNpCpgLzMXdiPo+dxcvSmiA==",
+      "integrity": "sha512-WHZXKFCEyIUJzAwh3NyyTHYSR35SevJ6mZ1nWwJafKtiQbqRTIKSRcw3Ma3acqgsent3RRDqeVwpHntMk+9irg==",
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -23468,6 +23468,7 @@
         "@angular/cli": "^17.0.1",
         "@angular/compiler-cli": "^17.0.0",
         "@types/jasmine": "~5.1.0",
+        "@types/node": "^20.9.2",
         "jasmine-core": "~5.1.0",
         "karma": "~6.4.0",
         "karma-chrome-launcher": "~3.2.0",

packages/bridge-ui/package.json

@@ -31,6 +31,7 @@
     "@angular/cli": "^17.0.1",
     "@angular/compiler-cli": "^17.0.0",
     "@types/jasmine": "~5.1.0",
+    "@types/node": "^20.9.2",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",

packages/bridge-ui/src/app/components/upload-replay-dialog/upload-replay-dialog.component.html

@@ -0,0 +1,16 @@
+<div class="signInForm">
+    <input type="file" accept=".gbx" class="file-input" (change)="onFileSelected($event)" #fileUpload>
+    <h1 mat-dialog-title>Replay Upload</h1>
+    <div mat-dialog-content class="full-width">
+        <mat-label>File</mat-label>
+        {{fileName || "No file uploaded yet."}}
+        <button mat-fab color="primary" class="upload-btn"
+            (click)="fileUpload.click()">
+            <mat-icon>attach_file</mat-icon>
+        </button>
+    </div>
+    <mat-dialog-actions align="end">
+        <button mat-button mat-dialog-close>Cancel</button>
+        <button mat-button mat-dialog-close (click)="onClickSubmit()">Submit</button>
+    </mat-dialog-actions>
+</div>

packages/bridge-ui/src/app/components/upload-replay-dialog/upload-replay-dialog.component.scss

@@ -0,0 +1,16 @@
+.file-input {
+    display: none;
+}
+
+.signInForm {
+    width: 400px;
+    padding: 12px 24px 24px;
+  
+    igx-input-group + igx-input-group {
+        margin-top: 24px;
+    }
+  }
+  
+  .full-width {
+      width: 100%;
+  }

packages/bridge-ui/src/app/components/upload-replay-dialog/upload-replay-dialog.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UploadReplayDialogComponent } from './upload-replay-dialog.component';
+
+describe('UploadReplayDialogComponent', () => {
+  let component: UploadReplayDialogComponent;
+  let fixture: ComponentFixture<UploadReplayDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UploadReplayDialogComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(UploadReplayDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/bridge-ui/src/app/components/upload-replay-dialog/upload-replay-dialog.component.ts

@@ -0,0 +1,58 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormControl } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+import { MatDialog, MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle,
+         MatDialogContent, MatDialogActions, MatDialogClose,} from '@angular/material/dialog';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+  selector: 'app-upload-replay-dialog',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatInputModule,
+    MatFormFieldModule,
+    FormsModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose,
+    MatIconModule,
+  ],
+  templateUrl: './upload-replay-dialog.component.html',
+  styleUrl: './upload-replay-dialog.component.scss'
+})
+export class UploadReplayDialogComponent {
+  fileName: string = "";
+  file?: File;
+
+  onFileSelected(event: any) {
+    const file: File = event.target.files[0];
+    if (file) 
+    {
+        this.fileName = file.name;
+        this.file = file;
+    }
+  }
+
+  onClickSubmit() {
+     /*
+        let formData = new FormData();
+        formData.append("file", file);
+        let local = this.seasonId.seasonId;
+        formData.append("seasonId", local);
+        const upload$ = this.apiService.postReplayUpload(formData);
+        upload$.subscribe();
+      */
+  }
+}

packages/bridge-ui/src/app/pages/season-details/season-details.component.ts

@@ -5,9 +5,11 @@ import { ActivatedRoute } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule }  from '@angular/material/divider';
 import { MatTabsModule } from '@angular/material/tabs';
+import { MatDialog } from '@angular/material/dialog';
 
 import { RaceDetailsComponent } from '../../components/race-details/race-details.component';
 import { SeasonStandingsComponent } from '../../components/season-standings/season-standings.component';
+import { UploadReplayDialogComponent } from '../../components/upload-replay-dialog/upload-replay-dialog.component';
 
 import { SeasonsService } from '../../services/seasons.service';
 import { RacesService } from '../../services/races.service';
@@ -24,6 +26,7 @@ import { Race } from '../../models/race.model';
     MatTabsModule,
     RaceDetailsComponent,
     SeasonStandingsComponent,
+    UploadReplayDialogComponent
   ],
   templateUrl: './season-details.component.html',
   styleUrl: './season-details.component.scss'
@@ -36,6 +39,7 @@ export class SeasonDetailsComponent {
     private route: ActivatedRoute,
     private seasonsService: SeasonsService,
     private racesService: RacesService,
+    private dialog: MatDialog,
     ) {}
   
   ngOnInit() {
@@ -58,6 +62,6 @@ export class SeasonDetailsComponent {
   }
 
   openUploadReplayDialog(id: string) {
-
+    this.dialog.open(UploadReplayDialogComponent);
   }
 }