WIP - new race dialog

package-lock.json

@@ -25876,6 +25876,7 @@
       }
     },
     "packages/bridge-shared/trackmania.io-f": {
+      "name": "trackmania.io",
       "version": "3.2.2",
       "license": "GPL-3.0",
       "dependencies": {

packages/bridge-ui/src/app/components/new-race-dialog/new-race-dialog.component.html

@@ -0,0 +1,28 @@
+<div class="signInForm">
+    <h1 mat-dialog-title>Login</h1>
+    <div mat-dialog-content>
+        <mat-form-field class="full-width">
+            <mat-label>Map UID</mat-label>
+            <input matInput type="text" id="mapUID" [formControl]="mapUID" name="mapUID" required>
+        </mat-form-field>
+        <br/>
+        <mat-form-field class="full-width">
+            <mat-label>Start Date</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" [formControl]="startDate" name="startDate" id="startDate" required>
+            <mat-hint>MM/DD/YYYY</mat-hint>
+            <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+            <mat-datepicker #picker></mat-datepicker>
+        </mat-form-field>
+        <mat-form-field class="full-width">
+            <mat-label>End Date</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="endpicker" [formControl]="endDate" name="endDate" id="endDate" required>
+            <mat-hint>MM/DD/YYYY</mat-hint>
+            <mat-datepicker-toggle matIconSuffix [for]="endpicker"></mat-datepicker-toggle>
+            <mat-datepicker #endpicker></mat-datepicker>
+        </mat-form-field>
+    </div>
+    <mat-dialog-actions align="end">
+        <button mat-button mat-dialog-close>Cancel</button>
+        <button mat-button mat-dialog-close (click)="submit()">Submit</button>
+    </mat-dialog-actions>
+</div>

packages/bridge-ui/src/app/components/new-race-dialog/new-race-dialog.component.spec.ts

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

packages/bridge-ui/src/app/components/new-race-dialog/new-race-dialog.component.ts

@@ -0,0 +1,70 @@
+import { Component, Inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormControl } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+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 { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
+
+import { MatDialog, MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle,  MatDialogContent, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
+
+import * as TMIO from 'trackmania.io';
+
+@Component({
+  selector: 'app-new-race-dialog',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatInputModule,
+    MatFormFieldModule,
+    FormsModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose,
+    MatDatepickerModule,
+    MatNativeDateModule
+  ],
+  providers: [  
+    MatDatepickerModule, MatNativeDateModule
+  ],
+  templateUrl: './new-race-dialog.component.html',
+  styleUrl: './new-race-dialog.component.scss'
+})
+export class NewRaceDialogComponent {
+  mapUID = new FormControl('');
+  startDate = new FormControl('');
+  endDate = new FormControl('');
+
+  minDate: Date;
+  maxDate: Date;
+
+  seasonId: string; 
+
+  tmio: any;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) additionalData: any,
+  )
+  {
+    this.seasonId = additionalData.seasonId;
+    const currentYear = new Date().getFullYear();
+    this.minDate = new Date(Date.now());
+    this.maxDate = new Date(currentYear + 1, 11, 31);
+    //this.tmio = new TMIO.Client();
+
+    //this.mapUID.registerOnChange()
+  }
+
+  submit() {
+
+  }
+
+}

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

@@ -3,6 +3,12 @@
         <h1>{{season.title}}</h1>
         <h3>{{season.subTitle}}</h3>
 
+        @if(isAuthed()) {
+            <button mat-raised-button color="warn" (click)="openNewRaceDialog(season.id)">New Race</button>
+            <mat-divider></mat-divider>
+            <br/>
+        }
+
         <button mat-raised-button class="full-width-button" color="primary" (click)="openUploadReplayDialog(season.id)">Upload Replay</button>
         <mat-divider></mat-divider>
         <br/>

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

@@ -13,8 +13,10 @@ import { UploadReplayDialogComponent } from '../../components/upload-replay-dial
 
 import { SeasonsService } from '../../services/seasons.service';
 import { RacesService } from '../../services/races.service';
+import { AuthService } from '../../services/auth.service';
 import { Season } from '../../models/season.model';
 import { Race } from '../../models/race.model';
+import { NewRaceDialogComponent } from '../../components/new-race-dialog/new-race-dialog.component';
 
 @Component({
   selector: 'app-season-details',
@@ -40,6 +42,7 @@ export class SeasonDetailsComponent {
     private seasonsService: SeasonsService,
     private racesService: RacesService,
     private dialog: MatDialog,
+    private authService: AuthService,
     ) {}
   
   ngOnInit() {
@@ -61,10 +64,21 @@ export class SeasonDetailsComponent {
     });
   }
 
+  isAuthed() {
+    return this.authService.isAuthenticated();
+  }
+
   openUploadReplayDialog(id: string) {
     this.dialog.open(UploadReplayDialogComponent,
       {
         data: { seasonId: id }
       });
   }
+
+  openNewRaceDialog(id: string) {
+    this.dialog.open(NewRaceDialogComponent,
+      {
+        data: { seasonId: id }
+      });
+  }
 }