✨ [feat/maps] #3 add log and message when there are unable to load ma…

…p (config or tiles)
JAGFx · Jan 7, 2021 · 7e81963 · 7e81963
1 parent 7a55233
commit 7e81963
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 29 deletions.
diff --git a/src/dashboards/maps/assets/scss/maps.scss b/src/dashboards/maps/assets/scss/maps.scss
@@ -19,6 +19,11 @@
 		text-align:      center;
 		position:        relative;
 
+		.loader {
+			position:   absolute;
+			background: $cBlackTransparentMid;
+		}
+
 		.controls-wrapper, .ol-zoom, .eta-wrapper, #speed-area {
 			display:         flex;
 			justify-content: center;

diff --git a/src/dashboards/maps/components/DashMaps.vue b/src/dashboards/maps/components/DashMaps.vue
@@ -1,5 +1,17 @@
 <template>
   <Dashboard class="maps wrapper">
+    <div v-if="!ready" class="loader w-100 h-100 d-flex justify-content-center flex-column align-items-center">
+      <transition mode="out-in" name="slide-fade">
+        <div class="d-flex justify-content-center align-items-center flex-column">
+          <h1>
+            <span class="mb-3" v-html="message.icon"></span>
+          </h1>
+          <h1 class="text-center">{{ message.text }}</h1>
+          <small v-if="message.sub.length > 0" class="mb-3">{{ message.sub }}</small>
+          <b-spinner v-show="message.processing" label="Processing..." type="grow"></b-spinner>
+        </div>
+      </transition>
+    </div>
     <div id="map" class="w-100 h-100"></div>
 
     <!-- Speed limit -->
@@ -75,30 +87,52 @@ export default {
   },
   data() {
     return {
-      rotateWithPlayer: _maps.d.gBehaviorRotateWithPlayer
+      rotateWithPlayer: _maps.d.gBehaviorRotateWithPlayer,
+      ready:            false,
+      message:          {
+        icon:       '<i class="fas fa-map-marked-alt"></i>',
+        text:       'Map initialiation',
+        sub:        '',
+        processing: true
+      }
     };
   },
   mounted() {
-    _maps.init( this.telemetry.game.game.name );
-
-    EventBus.$on( 'tmp-update', dataIn => {
-      _maps.updatePlayerPositionAndRotation(
-          dataIn.truck.position.X,
-          dataIn.truck.position.Z,
-          dataIn.truck.orientation.heading,
-          dataIn.truck.speed.kph );
-    } );
-
-    // --- Dev
-    if ( _app.isOnDevEnvironment )
-      setTimeout( () => {
-        _maps.updatePlayerPositionAndRotation(
-            this.telemetry.truck.position.X,
-            this.telemetry.truck.position.Z,
-            this.telemetry.truck.orientation.heading,
-            this.telemetry.truck.speed.kph );
-      }, 1000 );
-    // --- ./Dev
+
+
+    _maps.init( this.telemetry.game.game.name )
+         .then( () => {
+
+           EventBus.$on( 'tmp-update', dataIn => {
+             _maps.updatePlayerPositionAndRotation(
+                 dataIn.truck.position.X,
+                 dataIn.truck.position.Z,
+                 dataIn.truck.orientation.heading,
+                 dataIn.truck.speed.kph );
+           } );
+
+           // --- Dev
+           if ( _app.isOnDevEnvironment )
+             setTimeout( () => {
+               _maps.updatePlayerPositionAndRotation(
+                   this.telemetry.truck.position.X,
+                   this.telemetry.truck.position.Z,
+                   this.telemetry.truck.orientation.heading,
+                   this.telemetry.truck.speed.kph );
+             }, 1000 );
+           // --- ./Dev
+
+           this.ready = true;
+         } )
+         .catch( e => {
+           console.log( 'AAAAA' );
+
+           this.message.icon       = '<i class="fas fa-times"></i>';
+           this.message.text       = 'Unable to load map';
+           this.message.sub        = e;
+           this.message.processing = false;
+         } );
+
   },
   methods:  {
     onClickRotate() {

diff --git a/src/utils/_history.js b/src/utils/_history.js
@@ -14,6 +14,7 @@ const HTY_ZONE      = {
 	MENU:        'Menu',
 	MENU_SKIN:   'Menu/Skin',
 	MENU_CONFIG: 'Menu/Config',
+	MAPS_INIT:   'Maps/Init',
 	ERROR:       'Error'
 };
 const HTY_LEVEL     = {

diff --git a/src/utils/_maps.js b/src/utils/_maps.js
@@ -6,9 +6,11 @@
  * Time: 	21:38
  */
 
-import axios from 'axios';
-import ol    from 'openlayers';
-import store from '../store/index';
+import _history from '@/utils/_history';
+import axios    from 'axios';
+import ol       from 'openlayers';
+import Vue      from 'vue';
+import store    from '../store/index';
 
 let d = {
 	map:                       null,
@@ -35,10 +37,8 @@ const TILES_REMOTE_HOST = 'https://ets2.jagfx.fr';
 // ----
 
 /**
- * TODO: Add logs for init of config, init of tiles location and init of map
  * TODO: Add verification for the min map version and the min map version allowed by the dash
  * FIXME: Correct the CORS not allowed with the remote tile location
- * TODO: Add an automation to extract json files, compress into a tar.gz and publish it on server
  */
 
 const initConfig = ( game ) => {
@@ -48,13 +48,17 @@ const initConfig = ( game ) => {
 		? `${ TILES_REMOTE_HOST }/maps/${ type }/${ game }/`
 		: `http://${ window.location.hostname }:3000/maps/${ type }/${ game }/`;
 
+	Vue.prototype.$pushALog( `Base path: ${ basePath } | Type: ${ type } | Tile location: ${ tilesLocation }`,
+		_history.HTY_ZONE.MAPS_INIT );
+
 	d.paths.base = basePath;
 
 	return axios
 		.get( d.paths.base + d.paths.config )
 		.then( response => {
 			//console.log( 'config', response.data );
 			d.config = response.data;
+			Vue.prototype.$pushALog( `Map config found`, _history.HTY_ZONE.MAPS_INIT );
 
 			const tilesPath = d.paths.tiles.replace( /{[xyz]}/g, 0 );
 
@@ -63,17 +67,22 @@ const initConfig = ( game ) => {
 			return axios
 				.get( d.paths.base + tilesPath )
 				.then( response => {
+					Vue.prototype.$pushALog( `Tiles OK: ${ d.paths.base + tilesPath }`, _history.HTY_ZONE.MAPS_INIT );
 					//console.log( 'tiles', response );
 					//d.config = response.data;
 
 					d.ready = true;
+
 				}, err => {
 					console.error( 'Cant get tiles', err );
-					//throw err;
+					Vue.prototype.$pushALog( `Tiles NOT FOUND`, _history.HTY_ZONE.MAPS_INIT, _history.HTY_LEVEL.ERROR );
+					throw 'Tiles NOT FOUND';
 				} );
+
 		}, err => {
 			console.error( 'Cant get config', err );
-			//throw err;
+			Vue.prototype.$pushALog( `Map config NOT FOUND`, _history.HTY_ZONE.MAPS_INIT, _history.HTY_LEVEL.ERROR );
+			throw 'Map config NOT FOUND';
 		} );
 
 	//console.log( game, type, tilesLocation, basePath );
@@ -240,7 +249,7 @@ const initMap = () => {
 };
 
 const init = ( game ) => {
-	initConfig( game )
+	return initConfig( game )
 		.then( () => initMap() );
 };
 
@@ -323,6 +332,9 @@ const updatePlayerPositionAndRotation = ( lon, lat, rot, speed ) => {
 };
 
 const gameCoordToPixels = ( x, y ) => {
+	if ( d.ready === null )
+		return;
+
 	//let r = [ x / 1.087326 + 57157, y / 1.087326 + 59287 ];
 	let r = [ x / d.config.transposition.x.factor + d.config.transposition.x.offset, y
 																					 / d.config.transposition.y.factor