Add simulator line below handle

googlemaps · May 16, 2024 · e15fb85 · e15fb85
1 parent 1f4dc50
commit e15fb85
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 3 deletions.
diff --git a/...ontend/src/app/routes-chart/components/base-routes-chart/base-routes-chart.component.scss b/...ontend/src/app/routes-chart/components/base-routes-chart/base-routes-chart.component.scss
@@ -21,6 +21,8 @@ app-base-routes-chart {
   .column-header-container,
   .marker-handle-container,
   .marker-line-container,
+  .simulator-handle-container,
+  .simulator-line-container,
   .rule-column-header-container,
   .rule-container {
     /** padding consistent with the timeline/POI offset */
@@ -92,10 +94,12 @@ app-base-routes-chart {
     border-radius: 50%;
   }
 
+  .simulator-line,
   .marker-line {
     width: 2px;
   }
 
+  .simulator-line,
   .marker-line,
   .marker-handle {
     background-color: $red-light;

diff --git a/application/frontend/src/app/shared/components/gantt-chart/gantt-chart.component.html b/application/frontend/src/app/shared/components/gantt-chart/gantt-chart.component.html
@@ -24,6 +24,10 @@
               [ngClass]="{ 'simulator-handle-drag': isDraggingSimulator }"
               [style.left]="getSimulatorHandleLeft(simulatorHandle)"
               (mousedown)="onSimulatorMouseDown($event)"></div>
+            <div
+              #simulatorHandleLine
+              class="simulator-handle-line"
+              [style.left]="getSimulatorHandleLeft(simulatorHandleLine)"></div>
           </div>
         </div>
         <div *ngIf="hasMarker" class="marker-handle-container" [style.top]="top">
@@ -62,6 +66,14 @@
             [style.left]="getMarkerElementLeft(markerLine)"></div>
         </div>
       </div>
+      <div *ngIf="hasTravelSimulator" class="simulator-line-container">
+        <div class="relative-position-container">
+          <div
+            #simulatorLine
+            class="simulator-line"
+            [style.left]="getSimulatorHandleLeft(simulatorLine)"></div>
+        </div>
+      </div>
     </div>
   </cdk-virtual-scroll-viewport>
 </section>
diff --git a/application/frontend/src/app/shared/components/gantt-chart/gantt-chart.component.scss b/application/frontend/src/app/shared/components/gantt-chart/gantt-chart.component.scss
@@ -40,6 +40,7 @@ app-gantt-chart {
   }
 
   .marker-line-container,
+  .simulator-line-container,
   .rule-container {
     grid-column: 2;
     grid-row: 2 / -1;
@@ -51,6 +52,13 @@ app-gantt-chart {
     z-index: 1000;
   }
 
+  .simulator-line-container {
+    position: relative;
+    pointer-events: none;
+    z-index: 1000;
+  }
+
+  .simulator-line,
   .marker-line {
     position: absolute;
     top: 0;
@@ -123,14 +131,23 @@ app-gantt-chart {
   }
 
   .simulator-handle-container {
-    z-index: 1003;
+    z-index: 1002;
     pointer-events: none;
   }
 
-  .simulator-handle {
+  .simulator-handle-line {
+    height: 100%;
+    width: 2px;
+  }
+
+  .simulator-handle,
+  .simulator-handle-line {
     position: absolute;
-    border-radius: 40%;
     background-color: $red-light;
+  }
+
+  .simulator-handle {
+    border-radius: 40%;
     top: -12px;
     height: 24px;
     width: 22px;