Display help in upload dialog

googlemaps · Jan 31, 2024 · 1c635b0 · 1c635b0
1 parent c384934
commit 1c635b0
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git a/application/frontend/src/app/core/containers/upload-dialog/upload-dialog.component.css b/application/frontend/src/app/core/containers/upload-dialog/upload-dialog.component.css
@@ -21,3 +21,13 @@
 .mat-dialog-content {
   overflow-x: hidden;
 }
+
+.help-icon {
+  display: inline-flex;
+  font-size: 1rem;
+}
+
+.mat-ligature-font[fontIcon]::before {
+  position: relative;
+  top: 2px;
+}
diff --git a/application/frontend/src/app/core/containers/upload-dialog/upload-dialog.component.html b/application/frontend/src/app/core/containers/upload-dialog/upload-dialog.component.html
@@ -1,6 +1,14 @@
 <form [formGroup]="form" autocomplete="off" novalidate (ngSubmit)="solve()">
-  <h1 mat-dialog-title>Upload an existing scenario or solution</h1>
+  <h1 mat-dialog-title>Upload a scenario or solution</h1>
   <div mat-dialog-content>
+    <mat-divider class="mb-4"></mat-divider>
+    <h3 class="strong">What file types can I use?</h3>
+    <h4 class="strong">
+      Load scenario and solution files
+      <a (click)="openScenarioSolutionHelp()">
+        <mat-icon fontIcon="help" class="help-icon"></mat-icon>
+      </a>
+    </h4>
     <p>
       Have an existing vehicle routing problem you want to solve? You can upload a JSON description
       of the problem to see the routes that Cloud Fleet Routing recommends, and then download the

diff --git a/application/frontend/src/app/core/containers/upload-dialog/upload-dialog.component.ts b/application/frontend/src/app/core/containers/upload-dialog/upload-dialog.component.ts
@@ -14,7 +14,7 @@ import {
   UntypedFormGroup,
   ValidationErrors,
 } from '@angular/forms';
-import { MatDialogRef, MatDialogState } from '@angular/material/dialog';
+import { MatDialog, MatDialogRef, MatDialogState } from '@angular/material/dialog';
 import { select, Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 import { merge } from 'lodash';
@@ -26,6 +26,7 @@ import { IWaypoint } from '../../models/dispatcher.model';
 import * as fromConfig from '../../selectors/config.selectors';
 import { DispatcherService, FileService, PlacesService, UploadService } from '../../services';
 import { toDispatcherLatLng } from 'src/app/util';
+import { ScenarioSolutionHelpDialogComponent } from 'src/app/core/containers/scenario-solution-help-dialog/scenario-solution-help-dialog.component';
 
 @Component({
   selector: 'app-upload-dialog',
@@ -63,6 +64,7 @@ export class UploadDialogComponent {
   constructor(
     private store: Store<fromRoot.State>,
     private dialogRef: MatDialogRef<UploadDialogComponent>,
+    private dialog: MatDialog,
     private dispatcherService: DispatcherService,
     private fileService: FileService,
     private placesService: PlacesService,
@@ -75,6 +77,12 @@ export class UploadDialogComponent {
     this.messages$ = this.store.pipe(select(fromConfig.selectMessagesConfig));
   }
 
+  openScenarioSolutionHelp(): void {
+    this.dialog.open(ScenarioSolutionHelpDialogComponent, {
+      maxWidth: '600px',
+    });
+  }
+
   cancel(): void {
     this.dialogRef.close();
   }