GSLUX-701: Missing text "No layer selected" when offline

src/assets/main.css

@@ -7,7 +7,7 @@
   src: url('https://map.geoportail.lu/static-ngeo/28867F_0_0.c8a814.woff')
     format('woff');
 }
-/* Font inlcudes all lux icons from various "old" icon font files:
+/* Font includes all lux icons from various "old" icon font files:
 ** "geoportail-icons", "urban-farming", "apart-geoportail", "Geoportail-Grande-Region", "statec-icons"
 ** Codes for icons from "geoportail-icons" are identical, but different for those coming from other fonts.
 ** All lux icons can be found in the range between "e000" and "e064".
@@ -399,6 +399,9 @@
     --sig_secours-primary: #2979ff;
     --sig_secours-secondary: #75a7ff;
     --sig_secours-tertiary: #004ecb;
+    --school-primary: #756bb1;
+    --school-secondary: #9e9ac8;
+    --school-tertiary: #54278f;
     --button-bg-color: #ccc;
   }
 }

src/components/layer-manager/layer-manager.vue

@@ -10,7 +10,6 @@ import { useMetadataStore } from '@/stores/metadata.store'
 import type { Layer, LayerId } from '@/stores/map.store.model'
 import { BLANK_BACKGROUNDLAYER } from '@/composables/background-layer/background-layer.model'
 import useMvtStyles from '@/composables/mvt-styles/mvt-styles.composable'
-import useOffline from '@/composables/offline/offline.composable'
 import { useSliderComparatorStore } from '@/stores/slider-comparator.store'
 import { isFireFox } from '@/services/utils'
 
@@ -26,6 +25,8 @@ const styles = useMvtStyles()
 const sliderStore = useSliderComparatorStore()
 const { bgLayer } = storeToRefs(mapStore)
 const { sliderActive } = storeToRefs(sliderStore)
+const { isOffLine } = storeToRefs(appStore)
+const { setRemoteLayersOpen } = appStore
 
 const layers = computed(() => [...mapStore.layers].reverse())
 const layers3d = computed(() => [...mapStore.layers3d].reverse())
@@ -34,10 +35,9 @@ const dragHandleClassName = 'drag-handle'
 const bgLayerIsEditable = computed(() =>
   styles.isLayerStyleEditable(bgLayer.value)
 )
-const showAddLayerButton = computed(() => !useOffline().isOffLine.value)
+const showAddLayerButton = computed(() => !isOffLine.value)
 
 const emit = defineEmits(['displayCatalog'])
-const { setRemoteLayersOpen } = useAppStore()
 
 onMounted(() => {
   const sortableParams = <Sortable.Options>{
@@ -98,6 +98,9 @@ function toggleLayerComparator() {
 
 <template>
   <div>
+    <div v-if="isOffLine && layers.length === 0" class="text-black">
+      {{ t('No layer selected', { ns: 'client' }) }}
+    </div>
     <ul class="mb-4 sortable-layers-3d" v-if="layers3d.length > 0">
       <li
         v-for="(layer, index) in layers3d"

src/composables/offline/offline-layers.composable.ts

@@ -47,7 +47,7 @@ export default function useOfflineLayers() {
       OfflineLayerTypeValue.LAYER_OFFLINE_BG_VECTOR,
     ]
 
-    if (validOfflineLayer.indexOf(offlineLayerSpec.layerType) > -1) {
+    if (validOfflineLayer.includes(offlineLayerSpec.layerType)) {
       try {
         const layer = initLayer(offlineLayerToLayer(offlineLayerSpec))
 

src/stores/app.store.ts

@@ -13,7 +13,7 @@ export const useAppStore = defineStore(
     const layersOpen = ref(DEFAULT_LAYER_PANEL_OPENED)
     const myLayersTabOpen = ref(DEFAULT_MY_LAYERS_TAB_OPENED)
     const themeGridOpen = ref(DEFAULT_THEME_GRID_OPENED)
-    const mapId: Ref<string | undefined> = ref()
+    const mapId: Ref<string | undefined> = ref() // => MyMaps map id
     const remoteLayersOpen = ref()
     const styleEditorOpen = ref(false)
     const drawToolbarOpen = ref(false)

tailwind.config.cjs

@@ -28,6 +28,7 @@ const themes = [
   'prof' /*PRIVATE THEME*/,
   'go' /*PRIVATE THEME*/,
   'sig_secours' /*PRIVATE THEME*/,
+  'school',
 ]
 
 const icons = [
@@ -128,7 +129,7 @@ module.exports = {
         cadastre_hertzien: '"\\e02d"',
         urban_farming: '"\\e054"',
         energie: '"\\e048"',
-        atlas_demographique: '"\\e05c"',
+        atlas_demographique: '"\\e028"',
         logement: '"\\e055"',
         np_our: '"\\e005"',
         geosciences: '"\\e05b"',
@@ -156,6 +157,7 @@ module.exports = {
           "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath style='fill:white;' d='M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128H144zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39V392c0 13.3 10.7 24 24 24s24-10.7 24-24V257.9l39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80z'/%3E%3C/svg%3E\")",
         uu: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128H144zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39V392c0 13.3 10.7 24 24 24s24-10.7 24-24V257.9l39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80z"/></svg>',
         dd: '"\\f0ee"',
+        school: '"\\e047"',
       },
     },
   },