✨ #74 add another tiles location host

Signed-off-by: JAGFx <contact@jagfx.fr>

src/assets/scss/common/form/_input.scss

@@ -44,8 +44,8 @@
 
 			&[disabled="disabled"] {
 				background: $cBlackTransparentHigh !important;
-				color: $cGray !important;
-				border-color: $cGray !important;
+				color: $cWhiteGray !important;
+				border-color: $cWhiteGray !important;
 				cursor: not-allowed;
 			}
 		}

src/assets/scss/common/form/_select.scss

@@ -27,8 +27,8 @@
 
 			&[disabled="disabled"] {
 				background: $cBlackTransparentHigh;
-				color: $cGray;
-				border-color: $cGray;
+				color: $cWhiteGray !important;
+				border-color: $cWhiteGray !important;
 				cursor: not-allowed;
 			}
 		}

src/assets/scss/common/form/_switch.scss

@@ -36,8 +36,8 @@
 
 			&.disabled {
 				background: $cBlackTransparentHigh;
-				color: $cGray;
-				border-color: $cGray;
+				color: $cWhiteGray !important;
+				border-color: $cWhiteGray !important;
 				cursor: not-allowed;
 			}
 		}

src/components/menu/config-categories/ConfigCategoryMap.vue

@@ -79,19 +79,37 @@
           values: fieldValues( 'maps_map_type' )
         }"
       />
-      <ConfigFieldInput
+      <ConfigFieldChoice
         v-bind="{
           id: 'maps_map_tilesRemotePath',
           label: 'Remote tiles location',
+          disabled: configEnabled( 'maps_map_tilesRemoteUseCustom' ),
+          description: 'Set a remote location for the map tiles. It can be on your local machine',
+          values: fieldValues( 'maps_map_tilesRemotePath' )
+        }"
+      />
+      <ConfigFieldChoice
+        v-bind="{
+          id: 'maps_map_tilesRemoteUseCustom',
+          label: 'Custom tiles',
           disabled: false,
-          description: 'Set a remote location for the map tiles. It can be on your local machine'
+          description: 'Set to ON if you wan to use a custom tiles location',
+          values: fieldValues( 'on_off' )
+        }"
+      />
+      <ConfigFieldInput
+        v-bind="{
+          id: 'maps_map_tilesRemoteCustomPath',
+          label: 'Custom tiles location',
+          disabled: !configEnabled( 'maps_map_tilesRemoteUseCustom' ),
+          description: 'The host of your tiles location',
         }"
       />
       <ConfigFieldChoice
         v-bind="{
           id: 'maps_map_tilesVersion',
           label: 'Game version',
-          disabled: false,
+          disabled: configEnabled( 'maps_map_tilesRemoteUseCustom' ),
           description: 'The latest get the tiles for the latest version, else the specified version',
           values: fieldValues( 'maps_map_tilesVersion' )
         }"

src/components/menu/config-fields/ConfigFieldInput.vue

@@ -6,7 +6,6 @@
     }"
   >
     <div
-      v-if="vals.length === 0"
       class="input d-flex justify-content-between align-items-stretch"
       :class="{ 'processing': appGetProcessing }"
     >
@@ -18,7 +17,19 @@
         :type="type"
         class="form-control input-zone"
         :disabled="disabled"
+        v-bind="listProp"
       >
+      <datalist
+        v-if="vals.length > 0"
+        :id="id + '_' + 'data-list'"
+      >
+        <option
+          v-for="value in vals"
+          :key="value.value"
+          :selected="current( id ) === value.value"
+          :value="value.value"
+        />
+      </datalist>
       <button
         class="input-zone valid"
         :disabled="disabled"
@@ -44,6 +55,13 @@ export default {
       required: false,
       default:  'text'
     }
+  },
+  computed:   {
+    listProp() {
+      return (this.vals.length > 0)
+          ? { list: this.id + '_' + 'data-list' }
+          : {};
+    }
   }
 };
 </script>

src/data/config-field-values.json

@@ -221,6 +221,16 @@
 			"value" : "1.40"
 		}
 	],
+	"maps_map_tilesRemotePath" :        [
+		{
+			"label" : "ets2.jagfx.fr",
+			"value" : "https://ets2.jagfx.fr"
+		},
+		{
+			"label" : "TwinDragon/SCS_Map_Tiles",
+			"value" : "https://raw.githubusercontent.com/TwinDragon/SCS_Map_Tiles/master/"
+		}
+	],
 	"maps_map_navigationRemaining" : [
 		{
 			"label" : "Due date",

src/data/ets2-dashboard-skin.config.json

@@ -65,5 +65,7 @@
 	"maps_map_navigationRemaining" :  "remaining_date",
 	"maps_map_tilesVersion" :         "latest",
 	"general_damage_accurate" :       "damage-diagnostic",
-	"jagfx_elements_right_map" :      false
+	"jagfx_elements_right_map" :      false,
+	"maps_map_tilesRemoteUseCustom": false,
+	"maps_map_tilesRemoteCustomPath": null
 }

src/utils/_map.js

@@ -47,26 +47,36 @@ const ZOOM_DEFAULT = 8;
  * TODO: Add verification for the min map version and the min map version allowed by the dash
  */
 
-const initConfig = ( game ) => {
-	const type               = store.getters[ 'config/get' ]( 'maps_map_type' );
-	const tileRemoteLocation = store.getters[ 'config/get' ]( 'maps_map_tilesRemotePath' );
-	const tilesVersion       = store.getters[ 'config/get' ]( 'maps_map_tilesVersion' );
-	const activeMap          = store.getters[ 'config/get' ]( 'maps_map_activeMap' );
-	const rotateWithPlayer          = store.getters[ 'config/get' ]( 'maps_elements_rotateWithPlayer' );
-	const map                = (type === 'vanilla')
+const basePath = ( game ) => {
+	const type                  = store.getters[ 'config/get' ]( 'maps_map_type' );
+	const activeMap             = store.getters[ 'config/get' ]( 'maps_map_activeMap' );
+	const tileRemoteLocation    = store.getters[ 'config/get' ]( 'maps_map_tilesRemotePath' );
+	const tilesVersion          = store.getters[ 'config/get' ]( 'maps_map_tilesVersion' );
+	const tilesRemoteUseCustom  = store.getters[ 'config/enabled' ]( 'maps_map_tilesRemoteUseCustom' );
+	const tilesRemoteCustomPath = store.getters[ 'config/get' ]( 'maps_map_tilesRemoteCustomPath' );
+	const map                   = (type === 'vanilla')
 		? game
 		: activeMap;
-	const basePath           = `${ tileRemoteLocation }/${ map }/${ tilesVersion }/`;
 
-	Vue.prototype.$pushALog( `Base path: ${ basePath } | Type: ${ type } | Tile version: ${ tilesVersion }`,
+	const path = `${ map }/${ tilesVersion }/`;
+	const host = (tilesRemoteUseCustom)
+		? tilesRemoteCustomPath
+		: tileRemoteLocation;
+
+	Vue.prototype.$pushALog( `Base path: ${ host }/${ path } | Type: ${ type } | Tile version: ${ tilesVersion }`,
 		history.HTY_ZONE.MAPS_INIT );
 
-	d.paths.base = basePath;
+	return `${ host }/${ path }`;
+};
+
+const initConfig = ( game ) => {
+	const rotateWithPlayer   = store.getters[ 'config/get' ]( 'maps_elements_rotateWithPlayer' );
+
+	d.paths.base = basePath( game );
 
 	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 );
 
@@ -76,7 +86,7 @@ const initConfig = ( game ) => {
 				.get( d.paths.base + tilesPath )
 				.then( () => {
 					Vue.prototype.$pushALog( `Tiles OK: ${ d.paths.base + tilesPath }`, history.HTY_ZONE.MAPS_INIT );
-					d.ready = true;
+					d.ready                     = true;
 					d.gBehaviorRotateWithPlayer = rotateWithPlayer;
 
 				}, () => {