From 066d1021619c0b32f326b3be4d4366938093ccd5 Mon Sep 17 00:00:00 2001
From: JAGFx <contact@jagfx.fr>
Date: Sat, 19 Dec 2020 13:59:20 +0100
Subject: [PATCH] :construction: #3 add eta on map

---
 src/dashboards/maps/assets/scss/maps.scss   | 39 ++++++++++++++++++---
 src/dashboards/maps/components/DashMaps.vue | 17 ++++++---
 src/data/scs_sdk_plugin_parsed_data.json    |  4 +--
 src/utils/_maps.js                          |  2 +-
 4 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/src/dashboards/maps/assets/scss/maps.scss b/src/dashboards/maps/assets/scss/maps.scss
index 2cbe56cf..674712c2 100644
--- 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
index 6560a530..36c8d896 100644
--- 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,7 +26,7 @@ export default {
   },
   data() {
     return {
-      arrowRotate: ''
+      rotateWithPlayer: _maps.d.gBehaviorRotateWithPlayer
     };
   },
   mounted() {
@@ -29,10 +34,12 @@ export default {
   },
   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
index 674c5d2a..a052f05f 100644
--- 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
index 943b18e5..11058792 100644
--- 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')