🚧 #3 add eta on map

JAGFx · Dec 19, 2020 · 066d102 · 066d102
1 parent 017a344
commit 066d102
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 13 deletions.
diff --git a/src/dashboards/maps/assets/scss/maps.scss b/src/dashboards/maps/assets/scss/maps.scss
@@ -27,10 +27,10 @@
 			height: 1.5rem;
 
 			button {
-				background: $cBlack;
-				border: 1px solid $cRed;
-				border-width: 0 0 .15rem 0;
-				color: #fff;
+				color: $cWhite;
+				border: 0;
+				border-bottom: 2px solid $cRed;
+				background: $cBlackTransparentMid;
 				font-size: 1rem;
 				padding: 0 0 .1rem 0;
 				margin-right: .15rem;
@@ -44,7 +44,7 @@
 			}
 		}
 
-		#rotate-button-div {
+		#rotate-wrapper {
 			font-size: .7rem;
 			position: absolute;
 			right: .3rem;
@@ -61,7 +61,36 @@
 				i {
 					padding: .2rem 0 0 0;
 				}
+
+				&:not(.enable) {
+					background: $cBlackTransparentHigh;
+					border-color: $cGray;
+					color: $cGray;
+				}
 			}
 		}
+
+		#eta {
+
+			position: absolute;
+			left: .3rem;
+			width: auto;
+			bottom: .3rem;
+
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			text-align: center;
+			font-size: .6rem;
+			color: $cWhite;
+			border: 0;
+			border-bottom: 2px solid $cRed;
+			background: $cBlackTransparentMid;
+			padding: .1rem 0.5rem 0;
+			margin-right: .15rem;
+			outline: 0;
+			//width: 1.5rem;
+			height: 1.5rem;
+		}
 	}
 }
diff --git a/src/dashboards/maps/components/DashMaps.vue b/src/dashboards/maps/components/DashMaps.vue
@@ -2,11 +2,16 @@
   <Dashboard class="maps wrapper">
     <div id="map" class="w-100 h-100">
     </div>
-    <div id="rotate-button-div" class="ol-unselectable ol-control">
-      <button id="rotate-button" @click="onClickRotate">
-        <i :style="this.arrowRotate" class="fas fa-location-arrow"></i>
+    <div id="rotate-wrapper" class="ol-unselectable ol-control">
+      <button id="rotate-button" :class="{ enable: rotateWithPlayer }" @click="onClickRotate">
+        <i class="fas fa-location-arrow"></i>
       </button>
     </div>
+    <div id="eta">
+      ETA:
+      {{ $jobRemainingTimeDelivery( telemetry.job.deliveryTime.unix ) }},
+      {{ unit_length( telemetry.job.plannedDistance.km, 'km' ) }}
+    </div>
   </Dashboard>
 </template>
 
@@ -21,18 +26,20 @@ export default {
   },
   data() {
     return {
-      arrowRotate: ''
+      rotateWithPlayer: _maps.d.gBehaviorRotateWithPlayer
     };
   },
   mounted() {
     _maps.init();
   },
   methods:    {
     onClickRotate() {
-      console.log( 'R', _maps.d );
+      //console.log( 'R', _maps.d );
       _maps.d.gBehaviorRotateWithPlayer = (_maps.d.gBehaviorCenterOnPlayer)
           ? !_maps.d.gBehaviorRotateWithPlayer
           : true;
+
+      this.rotateWithPlayer = _maps.d.gBehaviorRotateWithPlayer;
     }
   },
   sockets:    {

diff --git a/src/data/scs_sdk_plugin_parsed_data.json b/src/data/scs_sdk_plugin_parsed_data.json
@@ -491,7 +491,7 @@
 					"Z" : 0.00044083595275878906
 				},
 				"orientation" : {
-					"heading" : 0.00006426678010029718,
+					"heading" : 1.5708,
 					"pitch" :   -0.00019189035810995847,
 					"roll" :    -0.001383037306368351
 				}
@@ -594,7 +594,7 @@
 			"unix" :  1590693700
 		},
 		"plannedDistance" : {
-			"km" :    1,
+			"km" :    1562,
 			"miles" : 1
 		},
 		"cargo" :           {

diff --git a/src/utils/_maps.js b/src/utils/_maps.js
@@ -79,7 +79,7 @@ const init = () => {
 	// Creating custom controls.
 	let rotate_control = new ol.control.Control( {
 		//target: 'rotate-button-div'
-		element: document.getElementById( 'rotate-button-div' )
+		element: document.getElementById( 'rotate-wrapper' )
 	} );
 	/*let speed_limit_control = new ol.control.Control({
 	 element: document.getElementById('speed-limit')