feat: Update timeline view styling

application/frontend/src/app/core/components/post-solve-timeline-legend/post-solve-timeline-legend.component.html

@@ -29,7 +29,13 @@
     </div>
     <div class="percent-label">
       <svg width="100%" height="14">
-        <line class="break-time" stroke="url(#BreakPattern)" x1="10%" y1="50%" x2="90%" y2="50%" />
+        <rect
+          x="10%"
+          y="3.5px"
+          width="80%"
+          height="7px"
+          class="break-time"
+          mask="url(#BreakMask)"></rect>
       </svg>
       <div class="mat-body-strong">
         {{ formattedVehicleTimeAverages?.breakTime || 0 | number: '1.0-0' }}%

application/frontend/src/app/core/components/post-solve-timeline-legend/post-solve-timeline-legend.component.scss

@@ -1,3 +1,5 @@
+@import '../../../../styles/variables.scss';
+
 .legend-container {
   display: flex;
   flex-direction: row;
@@ -10,3 +12,13 @@
     min-width: 70px;
   }
 }
+
+line.driving,
+line.idle-time,
+line.service {
+  stroke: $blue-dark;
+}
+
+rect.break-time {
+  fill: $blue-dark;
+}

application/frontend/src/app/core/components/post-solve-timeline-legend/post-solve-timeline-legend.component.ts

@@ -21,7 +21,6 @@ import {
   OnChanges,
   ElementRef,
   ViewChild,
-  ChangeDetectorRef,
 } from '@angular/core';
 import { TimeSet } from '../../models';
 
@@ -45,8 +44,6 @@ export class PostSolveTimelineLegendComponent implements OnChanges {
     travel: [0, 0],
   };
 
-  constructor(private changeRef: ChangeDetectorRef) {}
-
   ngOnChanges(): void {
     if (this.vehicleTimeAverages) {
       this.formattedVehicleTimeAverages = {

application/frontend/src/app/core/components/shared-defs/shared-defs.component.html

@@ -1,5 +1,8 @@
 <svg>
   <defs>
+    <mask id="BreakMask">
+      <rect x="0" y="0" width="100vw" height="100%" fill="url(#BreakPattern)"></rect>
+    </mask>
     <pattern
       id="BreakPattern"
       viewBox="0,0,7,8"
@@ -8,7 +11,6 @@
       width="7"
       height="8"
       patternUnits="userSpaceOnUse">
-      <rect fill="white" width="7" height="8" />
       <path class="break-time" d="M0 4L3 0" />
     </pattern>
     <linearGradient id="ScrubMaskPattern" x1="0%" y1="0%" x2="100%" y2="0%" spreadMethod="pad">

application/frontend/src/app/core/selectors/routes-chart.selectors.ts

@@ -102,6 +102,9 @@ const selectSelectedRoutesColors = createSelector(
   }
 );
 
+const selectRouteColor = (id: number) =>
+  createSelector(selectSelectedRoutesColors, (colors) => colors[id]);
+
 const selectSelectedRoutesVisitIds = createSelector(
   selectSelectedRoutes,
   ShipmentRouteSelectors.selectRoutesVisitIdsFn,
@@ -352,6 +355,7 @@ export const RoutesChartSelectors = {
   selectSelectedRoutesLookup,
   selectSelectedRoutesColorIndexes,
   selectSelectedRoutesColors,
+  selectRouteColor,
   selectSelectedRoutesVisitIds,
   selectSelectedRoute,
   selectFilteredRoutes,

application/frontend/src/app/routes-chart/components/base-routes-row/base-routes-row.component.html

@@ -52,7 +52,8 @@
     [availability]="availability"
     [timeline]="timeline"
     [offset]="7"
-    [timezoneOffset]="timezoneOffset">
+    [timezoneOffset]="timezoneOffset"
+    [color]="color">
   </app-timeline>
   <app-points-of-interest
     [routeId]="route?.id"
@@ -64,6 +65,7 @@
     [timezoneOffset]="timezoneOffset"
     [pendingNewPois]="pendingNewPois"
     [pendingOldVisitIds]="pendingOldVisitIds"
+    [color]="color"
     (pointOfInterestClick)="pointOfInterestClick.emit($event)">
   </app-points-of-interest>
 </div>

application/frontend/src/app/routes-chart/components/base-routes-row/base-routes-row.component.ts

@@ -27,10 +27,8 @@ import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 import {
   PointOfInterest,
   ShipmentRoute,
-  PointOfInterestStartDrag,
   Timeline,
   Vehicle,
-  PointOfInterestTimelineOverlapBegin,
   PointOfInterestClick,
   ChangedVisits,
 } from 'src/app/core/models';
@@ -59,6 +57,7 @@ export class BaseRoutesRowComponent implements OnInit {
   @Input() relaxationTimes: Long[];
   @Input() timezoneOffset: number;
   @Input() changedVisits: ChangedVisits;
+  @Input() color = '#1a73e8';
   @Output() selectedChange = new EventEmitter<boolean>();
   @Output() pointOfInterestClick = new EventEmitter<PointOfInterestClick>();
   @Output() editVehicle = new EventEmitter<number>();

application/frontend/src/app/routes-chart/containers/routes-row/routes-row.component.html

@@ -14,6 +14,7 @@
   [changedVisits]="changedVisits$ | async"
   [relaxationTimes]="relaxationTimes$ | async"
   [range]="range$ | async"
+  [color]="color$ | async"
   (pointOfInterestClick)="onPointOfInterestClick($event)"
   (editVehicle)="onEditVehicle($event)"
   (viewMetadata)="onViewMetadata($event)">

application/frontend/src/app/routes-chart/containers/routes-row/routes-row.component.ts

@@ -75,6 +75,7 @@ export class RoutesRowComponent implements OnChanges, OnInit, OnDestroy {
   relaxationTimes$: Observable<Long[]>;
   timezoneOffset$: Observable<number>;
   changedVisits$: Observable<ChangedVisits>;
+  color$: Observable<string>;
   private readonly route$ = new BehaviorSubject<ShipmentRoute>(null);
 
   constructor(
@@ -189,6 +190,13 @@ export class RoutesRowComponent implements OnChanges, OnInit, OnDestroy {
       })
     );
     this.range$ = this.store.pipe(select(RoutesChartSelectors.selectRange));
+
+    this.color$ = this.route$.pipe(
+      switchMap((route) =>
+        this.store.pipe(select(RoutesChartSelectors.selectRouteColor(route.id)))
+      ),
+      map((color) => color?.hex)
+    );
   }
 
   ngOnDestroy(): void {

application/frontend/src/app/shared/components/points-of-interest/points-of-interest.component.html

@@ -9,34 +9,68 @@
 </div>
 <ng-container *ngFor="let p of points">
   <ng-container [ngSwitch]="p[1]" *ngIf="imageAttributeLookup[p[1]] as attr">
-    <mat-icon
+    <svg
       *ngSwitchCase="2"
+      viewBox="0 0 42 42"
       class="poi select-poi"
       [style.left.px]="p[2] - attr.width / 2"
-      [style.top.px]="13 - attr.height + attr.yOffset"
+      [style.top.px]="15 - attr.height + attr.yOffset"
       [attr.width]="attr.width"
       [attr.height]="attr.height"
       (mousedown)="onMouseDown($event, p)"
-      title="{{ attr.title + ' ' + p[3] + (isPendingOldPoi(p) ? ' (pending)' : '') }}"
       [ngClass]="{
         'poi-validation-error': changedVisits[p[0]],
         'pending-poi-old': isPendingOldPoi(p)
-      }"
-      svgIcon="pickup"></mat-icon>
-    <mat-icon
+      }">
+      <title>{{ attr.title + ' ' + p[3] + (isPendingOldPoi(p) ? ' (pending)' : '') }}</title>
+      <g transform="matrix(1,0,0,-1,-75,43)">
+        <g transform="matrix(0.973684,0,0,0.973684,3.5,-12.0789)">
+          <circle
+            cx="95"
+            cy="35"
+            r="19"
+            style="fill: white; stroke-width: 4.11px"
+            [style.stroke]="color" />
+        </g>
+        <g transform="matrix(0.431818,0,0,-0.330214,53.25,39.9873)">
+          <path
+            d="M77,66L99,42.943L121,66"
+            style="fill: white; stroke-width: 15.61px"
+            [style.stroke]="color" />
+        </g>
+      </g>
+    </svg>
+    <svg
       *ngSwitchCase="3"
+      viewBox="0 0 42 42"
       class="poi select-poi"
       [style.left.px]="p[2] - attr.width / 2"
-      [style.top.px]="13 - attr.height + attr.yOffset"
+      [style.top.px]="15 - attr.height + attr.yOffset"
       [attr.width]="attr.width"
       [attr.height]="attr.height"
       (mousedown)="onMouseDown($event, p)"
-      title="{{ attr.title + ' ' + p[3] + (isPendingOldPoi(p) ? ' (pending)' : '') }}"
       [ngClass]="{
         'poi-validation-error': changedVisits[p[0]],
         'pending-poi-old': isPendingOldPoi(p)
-      }"
-      svgIcon="dropoff"></mat-icon>
+      }">
+      <title>{{ attr.title + ' ' + p[3] + (isPendingOldPoi(p) ? ' (pending)' : '') }}</title>
+      <g transform="matrix(1,0,0,1,-75,-1.00004)">
+        <g transform="matrix(0.973684,0,0,0.973684,3.5,-12.0789)">
+          <circle
+            cx="95"
+            cy="35"
+            r="19"
+            style="fill: white; stroke-width: 4.11px"
+            [style.stroke]="color" />
+        </g>
+        <g transform="matrix(0.431818,0,0,-0.330214,53.25,39.9873)">
+          <path
+            d="M77,66L99,42.943L121,66"
+            style="fill: white; stroke-width: 15.61px"
+            [style.stroke]="color" />
+        </g>
+      </g>
+    </svg>
     <svg
       *ngSwitchCase="1"
       class="poi"

application/frontend/src/app/shared/components/points-of-interest/points-of-interest.component.ts

@@ -67,6 +67,7 @@ export class PointsOfInterestComponent implements OnChanges {
   @Input() timezoneOffset: number;
   @Input() routeId: number;
   @Input() changedVisits: ChangedVisits;
+  @Input() color: string;
   @Output() pointOfInterestClick = new EventEmitter<PointOfInterestClick>();
 
   get imageAttributeLookup(): { [key: string]: PointsOfInterestImageAttribute } {

application/frontend/src/app/shared/components/timeline/timeline.component.html

@@ -17,18 +17,14 @@
     y2="50%" />
   <g *ngIf="availabilityRange">
     <title>Vehicle availability {{ getSegmentTitle(availability[0], availability[1]) }}</title>
-    <line
-      class="availability-padding"
-      [attr.x1]="availabilityRange[0]"
-      y1="50%"
-      [attr.x2]="availabilityRange[1]"
-      y2="50%" />
-    <line
-      class="availability"
-      [attr.x1]="availabilityRange[0]"
-      y1="50%"
-      [attr.x2]="availabilityRange[1]"
-      y2="50%" />
+    <rect
+      [attr.x]="availabilityRange[0]"
+      y="0"
+      [attr.width]="availabilityRange[1] - availabilityRange[0]"
+      height="100%"
+      fill="none"
+      [attr.stroke]="color"
+      stroke-width="2px" />
   </g>
   <line
     [attr.x1]="segmentsBound[0]"
@@ -40,13 +36,24 @@
   <g *ngFor="let s of segments">
     <g *ngIf="lineAttributeLookup[s[0]] as attr">
       <title>{{ attr.title + ' ' + s[3] }}</title>
-      <line
-        [attr.x1]="s[1]"
-        y1="50%"
-        [attr.x2]="s[2]"
-        y2="50%"
-        [ngClass]="attr.class"
-        [attr.stroke]="attr.stroke" />
+      <ng-container *ngIf="attr.class !== 'break-time'; else breakRect">
+        <line
+          [attr.x1]="s[1]"
+          y1="50%"
+          [attr.x2]="s[2]"
+          y2="50%"
+          [ngClass]="attr.class"
+          [attr.stroke]="attr.stroke ?? color" />
+      </ng-container>
+      <ng-template #breakRect>
+        <rect
+          [attr.x]="s[1]"
+          [attr.width]="s[2] - s[1]"
+          y="3.5px"
+          height="7px"
+          [attr.fill]="color"
+          mask="url(#BreakMask)" />
+      </ng-template>
     </g>
   </g>
   <g *ngIf="scrubTimePoint">

application/frontend/src/app/shared/components/timeline/timeline.component.ts

@@ -59,7 +59,6 @@ export class TimelineComponent implements OnChanges, OnInit, OnDestroy {
       class: 'break-time',
       offset: 0,
       zIndex: 2,
-      stroke: 'url(#BreakPattern)',
       title: 'Break time',
     },
   };
@@ -77,6 +76,7 @@ export class TimelineComponent implements OnChanges, OnInit, OnDestroy {
   @Input() pointsOfInterest: PointOfInterest[];
   @Input() offset?: number;
   @Input() timezoneOffset = 0;
+  @Input() color = '#1a73e8';
 
   get lineAttributeLookup(): { [key: number]: TimelineLineAttribute } {
     return TimelineComponent.lineAttributeLookup;

application/frontend/src/app/shared/models/points-of-interest-image.ts

@@ -34,16 +34,16 @@ export const pointsOfInterestImages = {
   },
   [PointOfInterestCategory.Pickup]: {
     href: `/assets/images/pickup.svg`,
-    width: 12.316,
-    height: 10.526,
+    width: 13,
+    height: 13,
     yOffset: 0,
     title: 'Pickup',
   },
   [PointOfInterestCategory.Delivery]: {
     href: '/assets/images/dropoff.svg',
-    width: 12.315,
-    height: 10.527,
-    yOffset: -1,
+    width: 13,
+    height: 13,
+    yOffset: 0,
     title: 'Delivery',
   },
   [PointOfInterestCategory.ServiceCall]: {

application/frontend/src/styles/main.scss

@@ -284,19 +284,16 @@ line.availability-padding {
 }
 
 line.service {
-  stroke: $blue-dark;
   stroke-width: 7px;
   stroke-linecap: round;
 }
 
 line.driving {
-  stroke: $blue-light;
   stroke-width: 4px;
   stroke-linecap: round;
 }
 
 line.idle-time {
-  stroke: $blue-dark;
   stroke-width: 4px;
   stroke-linecap: round;
   stroke-dasharray: 0 7px;
@@ -307,7 +304,7 @@ line.break-time {
 }
 
 path.break-time {
-  stroke: $blue-light;
+  stroke: white;
   stroke-width: 3px;
   stroke-linecap: round;
   transform: translate(1.5px, 1.5px);