Improve validations + use angular material

angular.json

@@ -116,5 +116,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

src/app/app.component.css

@@ -30,6 +30,10 @@ button {
   border-radius: 8px;
 }
 
+button:hover {
+  background-color: #43c7ee;
+}
+
 .small {
   padding: 6px 2px;
 }

src/app/app.component.html

@@ -47,12 +47,15 @@ <h3>Import groups (1)</h3>
   <div *ngIf="competitionId && groupService.wcif && ! readyForExport">
     <div  *ngIf="! importStrategy">
       <h3>General configuration (2)</h3>
-      <select class='form-control' [disabled]="groupsGenerated" [(ngModel)]='groupService.configuration.groupStrategy'>
-        <option value='basic'>Random groups (no staff assignments)</option>
-        <option value='basicBySpeed'>Groups by speed, fast first (no staff assignments)</option>
-        <option value='basicBySpeedReverse'>Groups by speed, fast last (no staff assignments)</option>
-        <option value='advanced'>Groups with staffing for one group in every event one competes in</option>
-      </select><br><br>
+      <mat-form-field>
+        <mat-label>Strategy</mat-label>
+        <mat-select [disabled]='groupsGenerated' [(value)]='groupService.configuration.groupStrategy' panelWidth='null'>
+          <mat-option value='basic'>Random groups (no staff assignments)</mat-option>
+          <mat-option value='basicBySpeed'>Groups by speed, fast first (no staff assignments)</mat-option>
+          <mat-option value='basicBySpeedReverse'>Groups by speed, fast last (no staff assignments)</mat-option>
+          <mat-option value='advanced'>Groups with staffing for one group in every event one competes in</mat-option>
+        </mat-select>
+      </mat-form-field>
 
       <div *ngIf="advancedStrategy">
         We'll be using <input type="number" [(ngModel)]="groupService.configuration.totalNumberOfTimers" (ngModelChange)="handleTotalNumberOfTimersSet($event)" min="1" step="1" [disabled]="groupsGenerated"> timers in total<br><br>

src/app/app.component.ts

@@ -10,6 +10,7 @@ import {EventId} from '@wca/helpers';
 import {AnnuntiaWcif} from '../test/annuntia';
 import {ConfirmSaveWcifDialogComponent} from './dialog/confirm-save-wcif-dialog.component';
 import {MatDialog} from '@angular/material/dialog';
+import {NotificationService} from '../common/notification';
 
 declare var $: any;
 
@@ -42,6 +43,7 @@ export class AppComponent  {
     public groupService: GroupService,
     public exportService: ExportService,
     public scoreCardsService: ScoreCardService,
+    public notificationService: NotificationService,
     public dialog: MatDialog
     ) {
       this.Math = Math;
@@ -142,7 +144,7 @@ export class AppComponent  {
       this.groupsGenerated = true;
     } catch (error) {
       console.error(error);
-      alert(error);
+      this.notificationService.show(error);
     }
   }
 

src/app/app.module.ts

@@ -12,6 +12,9 @@ import {MatDialogModule} from '@angular/material/dialog';
 import {MatButtonModule} from '@angular/material/button';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {InfoIconComponent} from './info-icon/info-icon.component';
+import {MatSelectModule} from '@angular/material/select';
+import {MatDividerModule} from '@angular/material/divider';
+import {MatFormFieldModule} from '@angular/material/form-field';
 
 @NgModule({
   imports: [BrowserModule,
@@ -23,8 +26,12 @@ import {InfoIconComponent} from './info-icon/info-icon.component';
     MatDialogModule,
     MatButtonModule,
     MatTooltipModule,
-    MatIconModule],
-  declarations: [ AppComponent, ConfirmSaveWcifDialogComponent, InfoIconComponent ],
-  bootstrap:    [ AppComponent ]
+    MatIconModule,
+    MatSelectModule,
+    MatFormFieldModule,
+    MatDividerModule],
+  declarations: [AppComponent, ConfirmSaveWcifDialogComponent, InfoIconComponent],
+  bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

src/common/group.ts

@@ -5,6 +5,7 @@ import {Activity, AssignmentCode, EventId, Person} from '@wca/helpers';
 import {ActivityHelper} from './activity';
 import {parseActivityCode} from '@wca/helpers/lib/helpers/activity';
 import * as moment from 'moment-timezone';
+import {NotificationService} from './notification';
 
 @Injectable({
   providedIn: 'root'
@@ -15,7 +16,7 @@ export class GroupService {
   userWcaId: string;
   document: Document;
 
-  constructor() {}
+  constructor(private notificationService: NotificationService) {}
 
   generateGrouping(eventId: EventId) {
     if (Helpers.getEvent(eventId, this.wcif).configuration.skip) {
@@ -81,7 +82,7 @@ export class GroupService {
     expectedHeaders.forEach(expectedHeader => {
       if (!headers.includes(expectedHeader)) {
         const error: string = 'Expected header ' + expectedHeader + ' in the selected csv file, but it was not present.';
-        alert(error);
+        this.showError(error);
         throw new Error(error);
       }
     });
@@ -128,10 +129,10 @@ export class GroupService {
     let potentialRunners: Array<any> = this.wcif.persons.filter(p => p[eventId].competing && this.canRun(p, staff));
 
     if (potentialScramblers.length < this.numberOfGroups(event) * event.configuration.scramblers) {
-      alert('Not enough scramblers for ' + eventId + '!\nPlease double check and manually assign more scramblers');
+      this.showError('Not enough scramblers for ' + eventId + '!\nPlease double check and manually assign more scramblers');
     }
     if (potentialRunners.length < this.numberOfGroups(event) * event.configuration.runners) {
-      alert('Not enough runners for ' + eventId + '!\nPlease double check and manually assign more runners');
+      this.showError('Not enough runners for ' + eventId + '!\nPlease double check and manually assign more runners');
     }
 
     let group = 0; // Group starts counting at 0, so always display as group+1
@@ -290,21 +291,21 @@ export class GroupService {
 
   public processWcif(): void {
     if (! this.wcif.events || this.wcif.events.length === 0) {
-      alert('No events found! Please define all rounds and the schedule on the WCA website and then restart.');
+      this.showError('No events found! Please define all rounds and the schedule on the WCA website and then restart.');
       this.wcif = undefined;
       throw new Error('No events');
     }
 
     if (! this.wcif.persons || this.wcif.persons.length === 0) {
-      alert('No competitors found! Maybe registration is not open yet?');
+      this.showError('No competitors found! Maybe registration is not open yet?');
       this.wcif = undefined;
       throw new Error('No competitors');
     }
 
     for (const e of this.wcif.events) {
       e.numberOfRegistrations = 0; // Add field
       if (! e.rounds || ! e.rounds.length) {
-        alert('No rounds found for ' + e.id + '! Please define all rounds and the schedule on the WCA website and then restart.');
+        this.showError('No rounds found for ' + e.id + '! Please define all rounds and the schedule on the WCA website and then restart.');
         this.wcif = undefined;
         throw new Error('No rounds for ' + e.id);
       }
@@ -471,7 +472,7 @@ export class GroupService {
         callback(importedCompetitorsCounter);
       }.bind(this);
     } else {
-      alert('Please select a CSV file to import first');
+      this.showError('Please select a CSV file to import first');
       throw Error('No CSV file to import');
     }
   }
@@ -633,4 +634,8 @@ export class GroupService {
   //   room.stationNumberTo = split;
   // }
 
+  private showError(error: string) {
+    this.notificationService.show(error);
+  }
+
 }

src/common/notification.ts

@@ -0,0 +1,16 @@
+import {Injectable} from '@angular/core';
+import {MatSnackBar} from '@angular/material/snack-bar';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NotificationService {
+
+  constructor(private snackBar: MatSnackBar) {
+  }
+
+  show(message: string, action?: string) {
+    this.snackBar.open(message, action || 'Close',
+      {verticalPosition: 'top', horizontalPosition: 'center'});
+  }
+}