Implement time window formatting

Author: jmccollum-woolpert

application/frontend/src/app/core/components/base-pre-solve-vehicle-info-window/base-pre-solve-vehicle-info-window.component.html

@@ -17,10 +17,10 @@
   <div class="strong underline">Start Windows</div>
   <div *ngIf="startTimeWindows.length; else noStartWindows">
     <div *ngFor="let window of startTimeWindows">
-      <span>{{ window | formatHardTimeWindow }}</span>
+      <span>{{ window }}</span>
     </div>
   </div>
   <ng-template #noStartWindows>
     <div>None</div>
   </ng-template>
-</div>
+</div>

application/frontend/src/app/core/components/base-pre-solve-vehicle-info-window/base-pre-solve-vehicle-info-window.component.ts

@@ -13,9 +13,18 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { Vehicle } from '../../models';
-import { timeWindowToDuration } from 'src/app/util';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  Input,
+  LOCALE_ID,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
+import { ITimeWindow, Vehicle } from '../../models';
+import { durationSeconds } from 'src/app/util/duration';
+import { formatDate } from '@angular/common';
 
 @Component({
   selector: 'app-base-pre-solve-vehicle-info-window',
@@ -25,15 +34,14 @@ import { timeWindowToDuration } from 'src/app/util';
 })
 export class BasePreSolveVehicleInfoWindowComponent implements OnChanges {
   @Input() vehicle: Vehicle;
+  @Input() timezoneOffset = 0;
+  @Input() globalDuration: [Long, Long];
 
   loadLimitsNames: string[] = [];
   loadLimitsValues: string[] = [];
-  startTimeWindows: {
-    startDate: string;
-    startTime: string;
-    endDate?: string;
-    endTime: string;
-  }[] = [];
+  startTimeWindows: string[] = [];
+
+  constructor(@Inject(LOCALE_ID) private locale: string) {}
 
   ngOnChanges(_changes: SimpleChanges): void {
     this.getFormattedLoadLimits();
@@ -42,6 +50,17 @@ export class BasePreSolveVehicleInfoWindowComponent implements OnChanges {
 
   getFormattedTimeWindows(): void {
     this.startTimeWindows = [];
+
+    if (!this.vehicle || !this.vehicle.startTimeWindows) {
+      return;
+    }
+
+    this.vehicle.startTimeWindows.forEach((timewindow) => {
+      if (!timewindow.startTime && !timewindow.endTime) {
+        return;
+      }
+      this.startTimeWindows.push(this.formatTimeWindow(timewindow));
+    });
   }
 
   getFormattedLoadLimits(): void {
@@ -59,4 +78,28 @@ export class BasePreSolveVehicleInfoWindowComponent implements OnChanges {
       }
     });
   }
+
+  formatTimeWindow(timewindow: ITimeWindow): string {
+    const startTime = timewindow.startTime
+      ? durationSeconds(timewindow.startTime).toNumber()
+      : this.globalDuration[0].toNumber();
+    const endTime = timewindow.endTime
+      ? durationSeconds(timewindow.endTime).toNumber()
+      : this.globalDuration[1].toNumber();
+
+    const formattedStart = formatDate(
+      (startTime + this.timezoneOffset) * 1000,
+      'yyyy/MM/dd h:mm aa',
+      this.locale,
+      'UTC'
+    ).toLocaleLowerCase(this.locale);
+    const formattedEnd = formatDate(
+      (endTime + this.timezoneOffset) * 1000,
+      'yyyy/MM/dd h:mm aa',
+      this.locale,
+      'UTC'
+    ).toLocaleLowerCase(this.locale);
+
+    return `${formattedStart} - ${formattedEnd}`;
+  }
 }

application/frontend/src/app/core/containers/vehicle-info-window/vehicle-info-window.component.html

@@ -10,5 +10,7 @@
 
 <ng-template #preSolve>
   <app-base-pre-solve-vehicle-info-window
-    [vehicle]="vehicle$ | async"></app-base-pre-solve-vehicle-info-window>
+    [vehicle]="vehicle$ | async"
+    [timezoneOffset]="timezoneOffset$ | async"
+    [globalDuration]="globalDuration$ | async"></app-base-pre-solve-vehicle-info-window>
 </ng-template>

application/frontend/src/app/core/containers/vehicle-info-window/vehicle-info-window.component.ts

@@ -25,6 +25,7 @@ import * as fromVehicle from '../../selectors/vehicle.selectors';
 import { map } from 'rxjs/operators';
 import * as fromConfig from '../../selectors/config.selectors';
 import { selectPage } from '../../selectors/ui.selectors';
+import ShipmentModelSelectors from '../../selectors/shipment-model.selectors';
 
 @Component({
   selector: 'app-vehicle-info-window',
@@ -40,6 +41,7 @@ export class VehicleInfoWindowComponent implements OnInit {
   vehicle$: Observable<Vehicle>;
   shipmentCount$: Observable<number>;
   timezoneOffset$: Observable<number>;
+  globalDuration$: Observable<[Long, Long]>;
 
   constructor(private store: Store<fromRoot.State>) {}
 
@@ -54,6 +56,7 @@ export class VehicleInfoWindowComponent implements OnInit {
       select(ShipmentRouteSelectors.selectRouteShipmentCount(this.vehicleId))
     );
     this.timezoneOffset$ = this.store.pipe(select(fromConfig.selectTimezoneOffset));
+    this.globalDuration$ = this.store.pipe(select(ShipmentModelSelectors.selectGlobalDuration));
   }
 
   onVehicleClick(vehicle: Vehicle): void {