From 08720e8080be002f8b784beea8b3823a7e55830b Mon Sep 17 00:00:00 2001
From: JAGFx <contact@jagfx.fr>
Date: Sun, 4 Oct 2020 18:25:10 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20#35=20first=20attempt=20to=20cor?=
 =?UTF-8?q?rect=20the=20memory=20leak?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                             |   2 +-
 src/App.vue                                   | 119 ++-
 src/components/Elements/Dashboard.vue         |  34 +-
 src/components/Mixins/AppDashMixins.vue       | 793 +++++++++---------
 src/components/Mixins/AppSkinsMixins.vue      |  76 +-
 src/components/Zone/Game/Game.vue             |   6 +-
 .../components/Mixins/JagfxConfigMixins.vue   | 155 ++--
 7 files changed, 597 insertions(+), 588 deletions(-)

diff --git a/public/index.html b/public/index.html
index 7843e861..84e639fc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -21,7 +21,7 @@
 			var noSleep = new NoSleep();
 			
 			$( 'html' ).on( 'click', '#overlay', function () {
-				console.log( 'Plop' );
+				//console.log( 'Plop' );
 				var elem = document.querySelector( 'html' );
 				
 				/* View in fullscreen */
diff --git a/src/App.vue b/src/App.vue
index 4ed4502d..116fda96 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,30 +1,30 @@
 <template>
 	<main :class="`${telemetry.game && telemetry.game.game.id === 2 ? 'ats' : 'ets2'}`">
 		<b-overlay :show="!gameConnected" :variant="'dark'" no-wrap>
-			<template v-slot:overlay>
-				<div class="d-flex justify-content-center flex-column align-items-center">
-					<transition mode="out-in" name="slide-fade">
-						<div :key="launching.text" class="d-flex justify-content-center align-items-center flex-column">
-							<h1><span class="mb-3" v-html="launching.icon"></span></h1>
-							<h1>{{ launching.text }}</h1>
-							<small class="mb-3">{{ launching.subText }}</small>
-							<b-spinner label="Processing..." type="grow"></b-spinner>
-						</div>
-					</transition>
-				</div>
-			</template>
-		</b-overlay>
-
-		<OverlayElement v-if="gameConnected"></OverlayElement>
-		<EventOverlayElement v-if="gameConnected"></EventOverlayElement>
-		<Game id="game" v-if="gameConnected" />
-		<div class="wrapper menu h-100" v-if="gameConnected" v-show="menuIsDisplayed()">
-			<Menu></Menu>
-		</div>
-		<component v-bind:is="currentSkinComponent()" v-if="gameConnected" v-show="!menuIsDisplayed()"></component>
-		<!--<Events id="events" v-bind="{log}" />-->
-		<!--<Controls id="controls" v-bind="{...controls, transmission: truck.transmission}" />-->
-	</main>
+      <template v-slot:overlay>
+        <div class="d-flex justify-content-center flex-column align-items-center">
+          <transition mode="out-in" name="slide-fade">
+            <div :key="launching.text" class="d-flex justify-content-center align-items-center flex-column">
+              <h1><span class="mb-3" v-html="launching.icon"></span></h1>
+              <h1>{{ launching.text }}</h1>
+              <small class="mb-3">{{ launching.subText }}</small>
+              <b-spinner label="Processing..." type="grow"></b-spinner>
+            </div>
+          </transition>
+        </div>
+      </template>
+    </b-overlay>
+
+    <OverlayElement v-if="gameConnected"></OverlayElement>
+    <EventOverlayElement v-if="gameConnected"></EventOverlayElement>
+    <Game id="game" v-if="gameConnected" />
+    <div class="wrapper menu h-100" v-if="gameConnected" v-show="menuIsDisplayed">
+      <Menu></Menu>
+    </div>
+    <component v-bind:is="currentSkinComponent()" v-if="gameConnected" v-show="!menuIsDisplayed"></component>
+    <!--<Events id="events" v-bind="{log}" />-->
+    <!--<Controls id="controls" v-bind="{...controls, transmission: truck.transmission}" />-->
+  </main>
 </template>
 
 <script>
@@ -100,48 +100,43 @@ export default {
 			 }, 9000);*/
 		},
 
-		methods:  {
+		methods: {
 			currentSkinComponent() {
+        const currentSkin = this.currentSkin; //this.$store.getters[ 'skins/current' ];
 
-				//console.log( this.currentSkin );
-				const currentSkin = this.$store.getters[ 'skins/current' ];
+        if ( currentSkin === undefined || currentSkin === null )
+          return null;
 
-				if ( currentSkin === undefined || currentSkin === null )
-					return null;
-
-				return 'Dash' + currentSkin.id;
-			},
-			/*telemetryData() {
-			 return this.pickData()( DATA_ELEMENTS.game );
-			 },*/
-			...mapGetters( {
-				//pickData:        'telemetry/pick',
-				menuIsDisplayed: 'menu/isDisplayed'
-			} )
-		},
-		computed: {
-			gameConnected() {
-				const gameReady = this.telemetry.game !== null &&
-								  (typeof this.telemetry.game
-								  === 'object'
-								  && Object.keys( this.telemetry.game ).length
-								  > 0);
-
-				//console.log( 'Game', this.telemetry.game, gameReady );
-
-				return gameReady && this.telemetry.game.sdkActive;
-			}
+        return 'Dash' + currentSkin.id;
+      }
 		},
-		sockets:  {
-			connect: function () {
-				console.log( 'connected' );
-				this.launching = {
-					icon:    '<i class="fas fa-truck"></i>',
-					text:    'Connected to telemetry server',
-					subText: 'Ready to delivering'
-				};
-			},
-			update:  function ( data ) {
+  computed:  {
+    gameConnected() {
+      const gameReady = this.telemetry.game !== null &&
+                        (typeof this.telemetry.game
+                        === 'object'
+                        && Object.keys( this.telemetry.game ).length
+                        > 0);
+
+      //console.log( 'Game', this.telemetry.game, gameReady );
+
+      return gameReady && this.telemetry.game.sdkActive;
+    },
+    ...mapGetters( {
+      menuIsDisplayed: 'menu/isDisplayed',
+      currentSkin:     'skins/current'
+    } )
+  },
+  sockets:   {
+    connect:   function () {
+      console.log( 'connected' );
+      this.launching = {
+        icon:    '<i class="fas fa-truck"></i>',
+        text:    'Connected to telemetry server',
+        subText: 'Ready to delivering'
+      };
+    },
+    update:    function ( data ) {
 				let srvData = {};
 
 				for ( const key of Object.keys( data ) ) {
diff --git a/src/components/Elements/Dashboard.vue b/src/components/Elements/Dashboard.vue
index 665bce13..4450b8ff 100644
--- a/src/components/Elements/Dashboard.vue
+++ b/src/components/Elements/Dashboard.vue
@@ -10,24 +10,22 @@
 	import AppDashMixins     from '../Mixins/AppDashMixins';
 	
 	export default {
-		name:    'Dashboard',
-		mixins:  [ AppDashMixins ],
-		methods: {
-			enabledFullScreen() {
-				return process.env.VUE_APP_ENABLE_FULLSCREEN === 'true';
-			},
-			/*telemetryData() {
-			 return this.pickData()();
-			 },*/
-			skinData() {
-				return this.currentSkin();
-			},
-			...mapGetters( {
-				//pickData:    'telemetry/pick',
-				currentSkin: 'skins/current'
-			} )
-		}
-	};
+    name:     'Dashboard',
+    mixins:   [ AppDashMixins ],
+    methods:  {
+      enabledFullScreen() {
+        return process.env.VUE_APP_ENABLE_FULLSCREEN === 'true';
+      },
+      skinData() {
+        return this.currentSkin;
+      }
+    },
+    computed: {
+      ...mapGetters( {
+        currentSkin: 'skins/current'
+      } )
+    }
+  };
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Mixins/AppDashMixins.vue b/src/components/Mixins/AppDashMixins.vue
index aa7fa901..35957d28 100644
--- a/src/components/Mixins/AppDashMixins.vue
+++ b/src/components/Mixins/AppDashMixins.vue
@@ -1,415 +1,416 @@
 <script>
-	import {
-		length as uc_length,
-		mass as uc_mass,
-		pressure as uc_pressure,
-		temperature as uc_temperature,
-		volume as uc_volume
-	}                     from 'units-converter';
-	import { mapGetters } from 'vuex';
-	
-	import * as utils from '../../utils/utils';
-	
-	export default {
-		name:     'AppDashMixins',
-		data() {
-			return {};
-		},
-		created() {
-			//console.log( utils.app.formatConstants );
-			Object.keys( utils.app.formatConstants ).forEach( ( key ) => {
-				const value = utils.app.formatConstants[ key ];
-				this[ key ] = value;
-			} );
-		},
-		filters:  {
-			$dateTimeLocalized( time, dFormat, tFormat ) {
-				return utils.app.dateTimeLocalized( time, dFormat, tFormat );
-			},
-			$toFixed( value, decimal ) {
-				return value.toFixed( decimal );
-			}
-		},
-		methods:  {
+import {
+  length as uc_length,
+  mass as uc_mass,
+  pressure as uc_pressure,
+  temperature as uc_temperature,
+  volume as uc_volume
+}                     from 'units-converter';
+import { mapGetters } from 'vuex';
+
+import * as utils from '../../utils/utils';
+
+export default {
+  name:     'AppDashMixins',
+  data() {
+    return {};
+  },
+  created() {
+    //console.log( utils.app.formatConstants );
+    Object.keys( utils.app.formatConstants ).forEach( ( key ) => {
+      const value = utils.app.formatConstants[ key ];
+      this[ key ] = value;
+    } );
+  },
+  filters:  {
+    $dateTimeLocalized( time, dFormat, tFormat ) {
+      return utils.app.dateTimeLocalized( time, dFormat, tFormat );
+    },
+    $toFixed( value, decimal ) {
+      return value.toFixed( decimal );
+    }
+  },
+  methods:  {
 			// ---------------------------------------
 			// --- Commons methods
-			
+
 			// --- Filters
-			
+
 			unit_speed( value, showValue = true, showSymbol = true ) {
-				const speed = this.$store.getters[ 'config/get' ]( 'unit_speed' );
-				let unit    = '';
-				
-				value = value[ speed ];
-				
-				switch ( speed ) {
-					case 'kph':
-						unit = 'km/h';
-						break;
-					case 'mph':
-						unit = 'm/h';
-						break;
-				}
-				
-				if ( showValue && !showSymbol )
-					return value;
-				
-				if ( !showValue && showSymbol )
-					return unit;
-				
-				return value.toFixed( 0 ) + ' ' + unit;
+        const speed = this.getConfig( 'unit_speed' ); //this.$store.getters[ 'config/get' ]( 'unit_speed' );
+        let unit    = '';
+
+        value = value[ speed ];
+
+        switch ( speed ) {
+          case 'kph':
+            unit = 'km/h';
+            break;
+          case 'mph':
+            unit = 'm/h';
+            break;
+        }
+
+        if ( showValue && !showSymbol )
+          return value;
+
+        if ( !showValue && showSymbol )
+          return unit;
+
+        return value.toFixed( 0 ) + ' ' + unit;
 			},
 			unit_currency( value, showValue = true, showSymbol = true ) {
-				const currencySymbolValue = this.$store.getters[ 'config/get' ]( 'unit_currency' );
-				let unit                  = '';
-				
-				switch ( currencySymbolValue ) {
-					case 'EUR':
-						unit = '€';
-						break;
-					case 'GBP':
-						unit = '£';
-						value *= 0.9;
-						break;
-					case 'USD':
-						unit = '$';
-						value *= 1.1;
-						break;
-				}
-				
-				if ( showValue && !showSymbol )
-					return value;
-				
-				if ( !showValue && showSymbol )
+        const currencySymbolValue = this.getConfig( 'unit_currency' ); //this.$store.getters[ 'config/get' ]( 'unit_currency' );
+        let unit                  = '';
+
+        switch ( currencySymbolValue ) {
+          case 'EUR':
+            unit = '€';
+            break;
+          case 'GBP':
+            unit = '£';
+            value *= 0.9;
+            break;
+          case 'USD':
+            unit = '$';
+            value *= 1.1;
+            break;
+        }
+
+        if ( showValue && !showSymbol )
+          return value;
+
+        if ( !showValue && showSymbol )
 					return unit;
-				
+
 				return unit + ' ' + value.toLocaleString();
 			},
 			unit_length( value, unitFrom = 'm', showValue = true, showSymbol = true ) {
-				const length       = this.$store.getters[ 'config/get' ]( 'unit_length' );
-				const unitExcluded = [ 'in', 'yd', 'ft-us', 'fathom', 'nMi' ];
-				let unit           = '';
-				
-				let conversion = uc_length( value )
-					.from( unitFrom )
-					.to( length );
-				
-				switch ( length ) {
-					case 'm':
-						conversion = uc_length( conversion.value )
-							.from( length )
-							.toBest( { exclude: unitExcluded } );
-						
-						break;
-					case 'ft':
-						conversion = uc_length( conversion.value )
-							.from( length )
-							.toBest( { exclude: unitExcluded } );
-						
-						break;
-				}
-				
-				value = conversion.value;
-				unit  = conversion.unit;
-				
-				if ( showValue && !showSymbol )
-					return value;
-				
-				if ( !showValue && showSymbol )
-					return unit;
-				
-				value = value.toFixed( 1 );
-				
-				return value.toLocaleString() + ' ' + unit;
-			},
+        const length       = this.getConfig( 'unit_length' ); //this.$store.getters[ 'config/get' ]( 'unit_length' );
+        const unitExcluded = [ 'in', 'yd', 'ft-us', 'fathom', 'nMi' ];
+        let unit           = '';
+
+        let conversion = uc_length( value )
+            .from( unitFrom )
+            .to( length );
+
+        switch ( length ) {
+          case 'm':
+            conversion = uc_length( conversion.value )
+                .from( length )
+                .toBest( { exclude: unitExcluded } );
+
+            break;
+          case 'ft':
+            conversion = uc_length( conversion.value )
+                .from( length )
+                .toBest( { exclude: unitExcluded } );
+
+            break;
+        }
+
+        value = conversion.value;
+        unit  = conversion.unit;
+
+        if ( showValue && !showSymbol )
+          return value;
+
+        if ( !showValue && showSymbol )
+          return unit;
+
+        value = value.toFixed( 1 );
+
+        return value.toLocaleString() + ' ' + unit;
+      },
 			unit_weight( value, showValue = true, showSymbol = true ) {
-				const weight       = this.$store.getters[ 'config/get' ]( 'unit_weight' );
-				const unitExcluded = [ 'mcg', 'mg', 'mt', 'oz' ];
-				let unit           = '';
-				
-				let conversion = uc_mass( value )
-					.from( 'kg' )
-					.to( weight );
-				
-				switch ( weight ) {
-					case 'kg':
-						conversion = uc_mass( conversion.value )
-							.from( weight )
-							.toBest( { exclude: unitExcluded } );
-						
-						value = conversion.value;
-						unit  = conversion.unit;
-						
-						if ( value > 1000 ) {
-							value /= 1000;
-							unit = 't';
-						}
-						
-						break;
-					case 'lb':
-						conversion = uc_mass( conversion.value )
-							.from( weight )
-							.toBest( { exclude: unitExcluded } );
-						
-						value = conversion.value;
-						unit  = conversion.unit;
-						
-						break;
-				}
-				
-				if ( showValue && !showSymbol )
-					return value;
-				
-				if ( !showValue && showSymbol )
-					return unit;
-				
-				return value.toFixed( 1 ) + ' ' + unit;
-			},
+        const weight       = this.getConfig( 'unit_weight' ); //this.$store.getters[ 'config/get' ]( 'unit_weight' );
+        const unitExcluded = [ 'mcg', 'mg', 'mt', 'oz' ];
+        let unit           = '';
+
+        let conversion = uc_mass( value )
+            .from( 'kg' )
+            .to( weight );
+
+        switch ( weight ) {
+          case 'kg':
+            conversion = uc_mass( conversion.value )
+                .from( weight )
+                .toBest( { exclude: unitExcluded } );
+
+            value = conversion.value;
+            unit  = conversion.unit;
+
+            if ( value > 1000 ) {
+              value /= 1000;
+              unit = 't';
+            }
+
+            break;
+          case 'lb':
+            conversion = uc_mass( conversion.value )
+                .from( weight )
+                .toBest( { exclude: unitExcluded } );
+
+            value = conversion.value;
+            unit  = conversion.unit;
+
+            break;
+        }
+
+        if ( showValue && !showSymbol )
+          return value;
+
+        if ( !showValue && showSymbol )
+          return unit;
+
+        return value.toFixed( 1 ) + ' ' + unit;
+      },
 			unit_volume( value, showValue = true, showSymbol = true ) {
-				const unitDefined = this.$store.getters[ 'config/get' ]( 'unit_volume' );
-				
-				let unit = '';
-				
-				let conversion = uc_volume( value )
-					.from( 'l' )
-					.to( unitDefined );
-				
-				value = conversion.value;
-				unit  = conversion.unit;
-				
-				if ( showValue && !showSymbol )
-					return value;
-				
-				if ( !showValue && showSymbol )
-					return unit;
-				
-				return value.toFixed( 0 ) + ' ' + unit;
-			},
+        const unitDefined = this.getConfig( 'unit_volume' ); //this.$store.getters[ 'config/get' ]( 'unit_volume' );
+
+        let unit = '';
+
+        let conversion = uc_volume( value )
+            .from( 'l' )
+            .to( unitDefined );
+
+        value = conversion.value;
+        unit  = conversion.unit;
+
+        if ( showValue && !showSymbol )
+          return value;
+
+        if ( !showValue && showSymbol )
+          return unit;
+
+        return value.toFixed( 0 ) + ' ' + unit;
+      },
 			unit_consumption( value, showValue = true, showSymbol = true ) {
-				const unitDefined = this.$store.getters[ 'config/get' ]( 'unit_consumption' );
-				let conversion    = null;
-				
-				let unit = '';
-				
-				value *= 100;
-				
-				switch ( unitDefined ) {
-					case 'lpkm':
-						conversion = {
-							unit:  'L/100',
-							value: value
-						};
-						
-						break;
-					case 'mpg':
-						conversion = {
-							unit:  'MPG',
-							value: (value === 0)
-									   ? 0
-									   : 282.4809363 / value
-						};
-						
-						break;
-				}
-				
-				value = conversion.value;
-				unit  = conversion.unit;
-				
-				if ( showValue && !showSymbol )
-					return value;
-				
-				if ( !showValue && showSymbol )
-					return unit;
-				
-				value = value.toFixed( 1 );
-				
-				return value + ' ' + unit;
-			},
+        const unitDefined = this.getConfig( 'unit_consumption' ); //this.$store.getters[ 'config/get' ]( 'unit_consumption' );
+        let conversion    = null;
+
+        let unit = '';
+
+        value *= 100;
+
+        switch ( unitDefined ) {
+          case 'lpkm':
+            conversion = {
+              unit:  'L/100',
+              value: value
+            };
+
+            break;
+          case 'mpg':
+            conversion = {
+              unit:  'MPG',
+              value: (value === 0)
+                         ? 0
+                         : 282.4809363 / value
+            };
+
+            break;
+        }
+
+        value = conversion.value;
+        unit  = conversion.unit;
+
+        if ( showValue && !showSymbol )
+          return value;
+
+        if ( !showValue && showSymbol )
+          return unit;
+
+        value = value.toFixed( 1 );
+
+        return value + ' ' + unit;
+      },
 			unit_pressure( value, showValue = true, showSymbol = true ) {
-				const unitDefined = this.$store.getters[ 'config/get' ]( 'unit_pressure' );
-				
-				let unit = '';
-				
-				let conversion = uc_pressure( value )
-					.from( 'psi' )
-					.to( unitDefined );
-				
-				value = conversion.value;
-				unit  = conversion.unit;
-				
-				if ( showValue && !showSymbol )
-					return value;
-				
-				if ( !showValue && showSymbol )
-					return unit;
-				
-				return value.toFixed( 0 ) + ' ' + unit;
-			},
+        const unitDefined = this.getConfig( 'unit_pressure' ); //this.$store.getters[ 'config/get' ]( 'unit_pressure' );
+
+        let unit = '';
+
+        let conversion = uc_pressure( value )
+            .from( 'psi' )
+            .to( unitDefined );
+
+        value = conversion.value;
+        unit  = conversion.unit;
+
+        if ( showValue && !showSymbol )
+          return value;
+
+        if ( !showValue && showSymbol )
+          return unit;
+
+        return value.toFixed( 0 ) + ' ' + unit;
+      },
 			unit_degrees( value, showValue = true, showSymbol = true ) {
-				const unitDefined = this.$store.getters[ 'config/get' ]( 'unit_degrees' );
-				
-				let unit = '';
-				
-				let conversion = uc_temperature( value )
-					.from( 'C' )
-					.to( unitDefined );
-				
-				value = conversion.value;
-				unit  = '°' + conversion.unit;
-				
-				if ( showValue && !showSymbol )
-					return value;
-				
-				if ( !showValue && showSymbol )
-					return unit;
-				
-				return value.toFixed( 0 ) + ' ' + unit;
-			},
-			
-			// --- ./Filters
-			
-			
-			// --- Commons
-			
-			$flag( countryName ) {
-				return utils.app.flag( countryName );
-			},
-			$averageDamage( arrayDamage ) {
-				const keyLength = Object.keys( arrayDamage ).length;
-				let sum         = 0;
-				
-				for ( const key in arrayDamage ) {
-					sum += arrayDamage[ key ];
-				}
-				
-				return Math.floor( 100 * (sum / keyLength) );
-			},
+        const unitDefined = this.getConfig( 'unit_degrees' ); //this.$store.getters[ 'config/get' ]( 'unit_degrees' );
+
+        let unit = '';
+
+        let conversion = uc_temperature( value )
+            .from( 'C' )
+            .to( unitDefined );
+
+        value = conversion.value;
+        unit  = '°' + conversion.unit;
+
+        if ( showValue && !showSymbol )
+          return value;
+
+        if ( !showValue && showSymbol )
+          return unit;
+
+        return value.toFixed( 0 ) + ' ' + unit;
+      },
+
+    // --- ./Filters
+
+
+    // --- Commons
+
+    $flag( countryName ) {
+      return utils.app.flag( countryName );
+    },
+    $averageDamage( arrayDamage ) {
+      const keyLength = Object.keys( arrayDamage ).length;
+      let sum         = 0;
+
+      for ( const key in arrayDamage ) {
+        sum += arrayDamage[ key ];
+      }
+
+      return Math.floor( 100 * (sum / keyLength) );
+    },
 			$scale( currentSkin ) {
-				const scaleX = (currentSkin.size.width === 0)
-					? 1
-					: window.innerWidth / currentSkin.size.width;
-				
-				const scaleY = (currentSkin.size.height === 0)
-					? 1
-					: (window.innerHeight - 41) / currentSkin.size.height;
-				
-				return Math.min( scaleX, scaleY );
-			},
+        const scaleX = (currentSkin.size.width === 0)
+            ? 1
+            : window.innerWidth / currentSkin.size.width;
+
+        const scaleY = (currentSkin.size.height === 0)
+            ? 1
+            : (window.innerHeight - 41) / currentSkin.size.height;
+
+        return Math.min( scaleX, scaleY );
+      },
 			$pressureToBar: function ( inPressure, unit = 'bar' ) {
-				let pressure;
-				
-				switch ( unit ) {
-					case 'bar':
-						pressure = inPressure * 0.0689476;
-						break;
-					
-					default:
-						pressure = inPressure;
-						break;
-				}
-				
-				return pressure;
-			},
-			$gameTime() {
-				// TODO Get the correct time
-				const currentGameTime = this.telemetry.game.time.unix;
-				
-				return currentGameTime;
-			},
-			
-			// --- ./Commons
-			
-			
-			// --- Job
-			
-			$hasJob: function () {
-				return (this.telemetry.job.cargo.id.length !== 0);
-			},
-			$jobRemainingTimeDelivery( time ) {
-				const currentGameTime = this.$gameTime();
-				
-				return utils.app.diffDateTimeLocalized( currentGameTime, time );
-			},
-			$jobRemainingTimeToDueDate() {
-				const configData = this.$store.getters[ 'config/all' ];
-				
-				return configData.general_job_remaining === 'due_date';
-			},
-			$nextRestStop( time ) {
-				return utils.app.diffDateTimeLocalized( 0, time, false );
-			},
-			
-			// --- ./Job
-			
-			
-			// --- Trailer
-			
-			$hasTrailer:       function () {
-				return this.telemetry.trailer.model.id.length !== 0;
-			},
-			$hasTrailerAndJob: function () {
-				return this.telemetry.trailer.model.id.length !== 0 && this.telemetry.job.cargo.name.length !== 0;
-			},
-			
-			// --- ./Trailer
-			
-			
-			// --- Navigation
-			
-			$trukGear: function ( transmission, brand ) {
-				/*console.log( this );*/
-				const configSettings          = this.$store.getters[ 'config/all' ];
-				const hShiftLayout            = configSettings[ 'general_h-shift-layout' ];
-				const rangeAndSplitterEnabled = hShiftLayout === 'h-shifter';
-				
-				let gear         = transmission.gear.displayed;
-				let strGear      = gear;
-				let crawlingGear = 0;
-				
-				switch ( brand.name ) {
-					case 'Volvo':
-					case 'Scania':
-					case 'Kenworth':
-						crawlingGear = 2;
-						break;
-				}
-				
-				//console.log( rangeAndSplitterEnabled );
-				if ( transmission.shifterType === 'hshifter' && rangeAndSplitterEnabled ) {
-					let realGearCount = gear - crawlingGear;
-					let spliter       = (realGearCount % 2)
-						? 'L'
-						: 'H';
-					let realGear      = Math.ceil( realGearCount / 2 );
-					strGear           = realGear + spliter;
-				} else {
-					strGear = gear - crawlingGear;
-				}
-				
-				if ( gear <= crawlingGear )
-					strGear = 'C' + Math.abs( gear );
-				
-				if ( transmission.shifterType === 'automatic' )
-					strGear = 'D' + gear;
-				
-				if ( gear === 0 )
-					strGear = 'N';
-				
-				if ( gear < 0 )
-					strGear = 'R' + Math.abs( transmission.gear.displayed );
-				
-				return strGear;
-			}
-			
-			// --- ./Navigation
-		},
-		computed: {
-			// ----------------
-			...mapGetters( {
-				telemetry: 'telemetry/current'
-				//currentSkin: 'skins/current'
-			} )
-		}
-		
-	};
+        let pressure;
+
+        switch ( unit ) {
+          case 'bar':
+            pressure = inPressure * 0.0689476;
+            break;
+
+          default:
+            pressure = inPressure;
+            break;
+        }
+
+        return pressure;
+      },
+    $gameTime() {
+      // TODO Get the correct time
+      const currentGameTime = this.telemetry.game.time.unix;
+
+      return currentGameTime;
+    },
+
+    // --- ./Commons
+
+
+    // --- Job
+
+    $hasJob: function () {
+      return (this.telemetry.job.cargo.id.length !== 0);
+    },
+    $jobRemainingTimeDelivery( time ) {
+      const currentGameTime = this.$gameTime();
+
+      return utils.app.diffDateTimeLocalized( currentGameTime, time );
+    },
+    $jobRemainingTimeToDueDate() {
+      const configData = this.allConfig; //this.$store.getters[ 'config/all' ];
+
+      return configData.general_job_remaining === 'due_date';
+    },
+    $nextRestStop( time ) {
+      return utils.app.diffDateTimeLocalized( 0, time, false );
+    },
+
+    // --- ./Job
+
+
+    // --- Trailer
+
+    $hasTrailer:       function () {
+      return this.telemetry.trailer.model.id.length !== 0;
+    },
+    $hasTrailerAndJob: function () {
+      return this.telemetry.trailer.model.id.length !== 0 && this.telemetry.job.cargo.name.length !== 0;
+    },
+
+    // --- ./Trailer
+
+
+    // --- Navigation
+
+    $trukGear: function ( transmission, brand ) {
+      /*console.log( this );*/
+      const configSettings          = this.allConfig; //this.$store.getters[ 'config/all' ];
+      const hShiftLayout            = configSettings[ 'general_h-shift-layout' ];
+      const rangeAndSplitterEnabled = hShiftLayout === 'h-shifter';
+
+      let gear         = transmission.gear.displayed;
+      let strGear      = gear;
+      let crawlingGear = 0;
+
+      switch ( brand.name ) {
+        case 'Volvo':
+        case 'Scania':
+        case 'Kenworth':
+          crawlingGear = 2;
+          break;
+      }
+
+      //console.log( rangeAndSplitterEnabled );
+      if ( transmission.shifterType === 'hshifter' && rangeAndSplitterEnabled ) {
+        let realGearCount = gear - crawlingGear;
+        let spliter       = (realGearCount % 2)
+            ? 'L'
+            : 'H';
+        let realGear      = Math.ceil( realGearCount / 2 );
+        strGear           = realGear + spliter;
+      } else {
+        strGear = gear - crawlingGear;
+      }
+
+      if ( gear <= crawlingGear )
+        strGear = 'C' + Math.abs( gear );
+
+      if ( transmission.shifterType === 'automatic' )
+        strGear = 'D' + gear;
+
+      if ( gear === 0 )
+        strGear = 'N';
+
+      if ( gear < 0 )
+        strGear = 'R' + Math.abs( transmission.gear.displayed );
+
+      return strGear;
+    }
+
+    // --- ./Navigation
+  },
+  computed: {
+    // ----------------
+    ...mapGetters( {
+      telemetry: 'telemetry/current',
+      allConfig: 'config/all',
+      getConfig: 'config/get'
+    } )
+  }
+
+};
 </script>
diff --git a/src/components/Mixins/AppSkinsMixins.vue b/src/components/Mixins/AppSkinsMixins.vue
index 4e1015fe..b6295b2f 100644
--- a/src/components/Mixins/AppSkinsMixins.vue
+++ b/src/components/Mixins/AppSkinsMixins.vue
@@ -1,36 +1,44 @@
 <script>
-	/**
-	 * @author:	Emmanuel SMITH <hey@emmanuel-smith.me>
-	 * project:	ets2-dashboard-skin
-	 * file: 	skinsMixins.vue
-	 * Date: 	30/04/2020
-	 * Time: 	17:57
-	 */
-	
-	export default {
-		methods: {
-			$isActive( skin ) {
-				const currentSkin = this.$store.getters[ 'skins/current' ];
-				
-				if ( currentSkin === undefined || currentSkin === null )
-					return false;
-				
-				return skin.id === currentSkin.id;
-			},
-			$isDisabled( skin ) {
-				if ( skin === undefined || skin === null )
-					return false;
-				
-				return skin.disabled;
-			},
-			$setActive( skin ) {
-				//console.log( 'Update', skin );
-				this.$store.commit( 'skins/setCurrent', skin );
-				this.$store.dispatch( 'menu/toggle' );
-			},
-			$skins() {
-				return this.$store.getters[ 'skins/all' ];
-			}
-		}
-	};
+/**
+ * @author:	Emmanuel SMITH <hey@emmanuel-smith.me>
+ * project:	ets2-dashboard-skin
+ * file: 	skinsMixins.vue
+ * Date: 	30/04/2020
+ * Time: 	17:57
+ */
+
+import { mapGetters } from 'vuex';
+
+export default {
+  methods:  {
+    $isActive( skin ) {
+      const currentSkin = this.currentSkin;//this.$store.getters[ 'skins/current' ];
+
+      if ( currentSkin === undefined || currentSkin === null )
+        return false;
+
+      return skin.id === currentSkin.id;
+    },
+    $isDisabled( skin ) {
+      if ( skin === undefined || skin === null )
+        return false;
+
+      return skin.disabled;
+    },
+    $setActive( skin ) {
+      //console.log( 'Update', skin );
+      this.$store.commit( 'skins/setCurrent', skin );
+      this.$store.dispatch( 'menu/toggle' );
+    },
+    $skins() {
+      return this.allSkin; //this.$store.getters[ 'skins/all' ];
+    }
+  },
+  computed: {
+    ...mapGetters( {
+      currentSkin: 'skins/current',
+      allSkin:     'skins/all'
+    } )
+  }
+};
 </script>
diff --git a/src/components/Zone/Game/Game.vue b/src/components/Zone/Game/Game.vue
index 3c229758..efb49311 100644
--- a/src/components/Zone/Game/Game.vue
+++ b/src/components/Zone/Game/Game.vue
@@ -10,9 +10,9 @@
 		</div>
 		<ul>
 			<li @click="onClickGear()">
-				<span v-show="!menuIsDisplayed()">Menu <i class="fas fa-bars"></i>️</span>
-				<span v-show="menuIsDisplayed()">Close <i class="fas fa-times"></i>️</span>
-			</li>
+        <span v-show="!menuIsDisplayed">Menu <i class="fas fa-bars"></i>️</span>
+        <span v-show="menuIsDisplayed">Close <i class="fas fa-times"></i>️</span>
+      </li>
 			<li v-if="isOnDevEnvironment()">JAGFx - {{ getVersion() }}<span>&copy;</span></li>
 			<li v-else>
 				<select @change="onEventChange" v-model="event">
diff --git a/src/dashboards/jagfx/components/Mixins/JagfxConfigMixins.vue b/src/dashboards/jagfx/components/Mixins/JagfxConfigMixins.vue
index 0d637d79..ae03b378 100644
--- a/src/dashboards/jagfx/components/Mixins/JagfxConfigMixins.vue
+++ b/src/dashboards/jagfx/components/Mixins/JagfxConfigMixins.vue
@@ -1,48 +1,50 @@
 <script>
-	/**
-	 * @author:	Emmanuel SMITH <hey@emmanuel-smith.me>
-	 * project:	ets2-dashboard-skin
-	 * file: 	JagfxConfigMixins.vue
-	 * Date: 	30/04/2020
-	 * Time: 	13:12
-	 */
-	
-	export default {
-		data() {
-			return {
-				elements:    {
-					right:      [],
-					'middle-t': [],
-					'middle-b': []
-				},
-				maxElements: {
-					right:      7,
-					'middle-t': 4,
-					'middle-b': -1
-				}
-			};
-		},
-		created() {
-			const config = this.$store.getters[ 'config/all' ];
-			const keys   = Object.keys( config );
-			
-			const configRight        = keys.filter( elm => {
-				const isOnSide  = /^jagfx_elements_right/.test( elm );
-				const isEnabled = config[ elm ] === 'true';
-				
-				//console.log( elm, typeof isEnabled );
-				
-				return isOnSide && isEnabled;
-			} );
-			const configMiddleTop    = keys.filter( elm => {
-				const isOnSide  = /^jagfx_elements_mid_top/.test( elm );
-				const isEnabled = config[ elm ] === 'true';
-				
-				return isOnSide && isEnabled;
-			} );
-			const configMiddleBottom = keys.filter( elm => {
-				const isOnSide  = /^jagfx_elements_mid_bottom/.test( elm );
-				const isEnabled = config[ elm ] === 'true';
+/**
+ * @author:	Emmanuel SMITH <hey@emmanuel-smith.me>
+ * project:	ets2-dashboard-skin
+ * file: 	JagfxConfigMixins.vue
+ * Date: 	30/04/2020
+ * Time: 	13:12
+ */
+
+import { mapGetters } from 'vuex';
+
+export default {
+  data() {
+    return {
+      elements:    {
+        right:      [],
+        'middle-t': [],
+        'middle-b': []
+      },
+      maxElements: {
+        right:      7,
+        'middle-t': 4,
+        'middle-b': -1
+      }
+    };
+  },
+  created() {
+    const config = this.allConfig; //this.$store.getters[ 'config/all' ];
+    const keys   = Object.keys( config );
+
+    const configRight        = keys.filter( elm => {
+      const isOnSide  = /^jagfx_elements_right/.test( elm );
+      const isEnabled = config[ elm ] === 'true';
+
+      //console.log( elm, typeof isEnabled );
+
+      return isOnSide && isEnabled;
+    } );
+    const configMiddleTop    = keys.filter( elm => {
+      const isOnSide  = /^jagfx_elements_mid_top/.test( elm );
+      const isEnabled = config[ elm ] === 'true';
+
+      return isOnSide && isEnabled;
+    } );
+    const configMiddleBottom = keys.filter( elm => {
+      const isOnSide  = /^jagfx_elements_mid_bottom/.test( elm );
+      const isEnabled = config[ elm ] === 'true';
 				
 				return isOnSide && isEnabled;
 			} );
@@ -53,34 +55,39 @@
 		},
 		methods: {
 			$elementIsEnabled: function ( side, element, options ) {
-				const config       = this.$store.getters[ 'config/all' ];
-				const sideElements = this.elements[ side ];
-				const indexElement = sideElements.indexOf( element );
-				const isOnSide     = indexElement !== -1;
-				
-				if ( options !== undefined ) {
-					const navElmSide       = options.side;
-					const maxMiddleElement = this.maxElements[ 'middle-t' ];
-					
-					if ( indexElement + 1 > ((maxMiddleElement / 2)) && navElmSide === 'left' )
-						return false;
-					
-					if ( navElmSide === 'right' ) {
-						if ( ((indexElement + 1) <= ((maxMiddleElement / 2))) || ((indexElement + 1)
-																				  > maxMiddleElement) )
-							return false;
-						
-					}
-				}
-				
-				if ( !config[ element ] )
-					return false;
-				
-				return isOnSide;
-			},
-			$elementsLength:   function ( side ) {
-				return this.elements[ side ].length;
-			}
-		}
-	};
+        const config       = this.allConfig; //this.$store.getters[ 'config/all' ];
+        const sideElements = this.elements[ side ];
+        const indexElement = sideElements.indexOf( element );
+        const isOnSide     = indexElement !== -1;
+
+        if ( options !== undefined ) {
+          const navElmSide       = options.side;
+          const maxMiddleElement = this.maxElements[ 'middle-t' ];
+
+          if ( indexElement + 1 > ((maxMiddleElement / 2)) && navElmSide === 'left' )
+            return false;
+
+          if ( navElmSide === 'right' ) {
+            if ( ((indexElement + 1) <= ((maxMiddleElement / 2))) || ((indexElement + 1)
+                                                                      > maxMiddleElement) )
+              return false;
+
+          }
+        }
+
+        if ( !config[ element ] )
+          return false;
+
+        return isOnSide;
+      },
+      $elementsLength:   function ( side ) {
+        return this.elements[ side ].length;
+      }
+    },
+  computed:  {
+    ...mapGetters( {
+      allConfig: 'config/all'
+    } )
+  }
+};
 </script>