feat: click pre solve visits (#210)

Author: jmccollum-woolpert

application/frontend/src/app/core/components/base-visit-request-info-window/base-visit-request-info-window.component.html

@@ -19,7 +19,7 @@
       title="Pickup"></mat-icon>
   </span>
   <!-- title -->
-  <ng-container *ngIf="postSolve && visit; else visitRequestTitleTemplate">
+  <ng-container *ngIf="shipment; else visitRequestTitleTemplate">
     <span>
       Shipment:
       <span [ngClass]="{ link: navigation }" (click)="onShipmentClick()">
@@ -32,26 +32,39 @@
   </ng-template>
 </div>
 <div class="text__caption mt-1">
-  <div>
-    <span>{{ visit | entityName: 'Visit:' }}</span>
-  </div>
-  <div *ngIf="visit">
-    Visit Type: <span class="strong">{{ visit.isPickup ? 'Pickup' : 'Delivery' }}</span>
-  </div>
-  <div *ngIf="shipment?.shipmentType">
-    Shipment Type: <span class="strong">{{ shipment.shipmentType }}</span>
-  </div>
-  <div *ngIf="visit">
+  <div *ngIf="postSolve; else preSolve">
     <div>
-      Arrival: <span class="strong">{{ buildFormattedArrival() }}</span>
+      <span>{{ visit | entityName: 'Visit:' }}</span>
     </div>
-    <div *ngIf="buildFormattedDeparture() as formattedDeparture">
-      Departure: <span class="strong">{{ formattedDeparture }}</span>
+    <div *ngIf="visit">
+      Visit Type: <span class="strong">{{ visit.isPickup ? 'Pickup' : 'Delivery' }}</span>
     </div>
-    <div>
-      Vehicle: <span class="strong">{{ getVehicleName(vehicle) }}</span>
+    <div *ngIf="shipment?.shipmentType">
+      Shipment Type: <span class="strong">{{ shipment.shipmentType }}</span>
+    </div>
+    <div *ngIf="visit">
+      <div>
+        Arrival: <span class="strong">{{ buildFormattedArrival() }}</span>
+      </div>
+      <div *ngIf="buildFormattedDeparture() as formattedDeparture">
+        Departure: <span class="strong">{{ formattedDeparture }}</span>
+      </div>
+      <div>
+        Vehicle: <span class="strong">{{ getVehicleName(vehicle) }}</span>
+      </div>
     </div>
   </div>
+  <ng-template #preSolve>
+    <div *ngIf="visitRequest">
+      <div>
+        Visit Request Type:
+        <span class="strong">{{ visitRequest.pickup ? 'Pickup' : 'Delivery' }}</span>
+      </div>
+      <div *ngIf="visitRequest.duration">
+        Duration: {{ formattedDurationSeconds(durationSeconds(visitRequest.duration)) }}
+      </div>
+    </div>
+  </ng-template>
 </div>
 <div *ngIf="savePending" class="updating-overlay">
   <mat-spinner [diameter]="50"></mat-spinner>

application/frontend/src/app/core/components/base-visit-request-info-window/base-visit-request-info-window.component.ts

@@ -31,6 +31,7 @@ import { MatSelect } from '@angular/material/select';
 import { ConfirmDialogComponent } from 'src/app/shared/components/confirm-dialog/confirm-dialog.component';
 import {
   durationSeconds,
+  formattedDurationSeconds,
   getChosenTimeWindow,
   getEntityName,
   getSoftEndTimeMissedCost,
@@ -65,6 +66,9 @@ export class BaseVisitRequestInfoWindowComponent {
   readonly vehicleCtrl: UntypedFormControl;
   readonly optionItemSize = 48;
 
+  readonly formattedDurationSeconds = formattedDurationSeconds;
+  readonly durationSeconds = durationSeconds;
+
   get visitCategory(): number {
     return this.shipment?.deliveries.includes(this.visitRequest?.id)
       ? VisitCategory.Delivery

application/frontend/src/app/core/services/base-visit-request-layer.service.ts

@@ -179,7 +179,15 @@ export abstract class BaseVisitRequestLayer {
       getSize: 10,
       sizeScale: this.getSizeScale(),
       getPosition: (d) => d.arrivalPosition,
-      pickable: false,
+      pickable: true,
+      onHover: ({ object }) => {
+        this.mapService.map.setOptions({ draggableCursor: object ? 'pointer' : 'grab' });
+      },
+      onClick: ({ object }) => {
+        this.zone.run(() => {
+          this.store.dispatch(UIActions.mapVisitRequestClicked({ id: object.id }));
+        });
+      },
     });
     this.updateLayers();
   }