diff --git a/index.html b/index.html index 14bfc86..92ceb53 100644 --- a/index.html +++ b/index.html @@ -14,9 +14,8 @@ diff --git a/public/menu.json b/public/config.json similarity index 56% rename from public/menu.json rename to public/config.json index c62dcc8..0bca321 100644 --- a/public/menu.json +++ b/public/config.json @@ -1,11 +1,16 @@ { "config": { - + "legacyHeader": "false", + "legacyUrl": "/header", + "stylesheet": "https://data.lillemetropole.fr/public/georchestra.css", + "logoUrl": "https://data.lillemetropole.fr/public/logo-mel.jpg", + "hideLogin": false, + "lang": "es" }, "menu": [ { "label": "Catalogue", - "i18n": "catalogue", + "i18n": "hello", "url": "/datahub/", "active-app" : "datahub" }, @@ -26,5 +31,13 @@ } ] } - ] + ], + "i18n": { + "en": { + "hello": "Hello" + }, + "fr": { + "hello": "Bonjour" + } + } } diff --git a/src/menu.json b/src/config.json similarity index 94% rename from src/menu.json rename to src/config.json index f5c73c7..7b80b4c 100644 --- a/src/menu.json +++ b/src/config.json @@ -1,4 +1,10 @@ { + "defaultConfig": { + "legacyHeader": false, + "legacyUrl": "/header/", + "hideLogin": false, + "style": "" + }, "defaultMenu": [ { "label": "Catalogue", diff --git a/src/header.ce.vue b/src/header.ce.vue index 4c7a0ba..3a0b04d 100644 --- a/src/header.ce.vue +++ b/src/header.ce.vue @@ -3,36 +3,31 @@ import { computed, onMounted, reactive } from 'vue' import { getUserDetails, getPlatformInfos } from './auth' import type { User, PlatformInfos } from './auth' import UserIcon from './ui/UserIcon.vue' -import GeorchestraLogo from './ui/GeorchestraLogo.vue' +import GeorchestraLogo from '@/ui/GeorchestraLogo.vue' import ChevronDownIcon from '@/ui/ChevronDownIcon.vue' -import { LANG_2_TO_3_MAPPER, t } from '@/i18n' -import { defaultMenu } from '@/menu.json' +import { getI18n, i18n } from '@/i18n' +import { defaultMenu, defaultConfig } from '@/config.json' const props = defineProps<{ - hideLogin?: string - lang?: string activeApp?: string - logoUrl?: string - //legacy option : using old iframe option - legacyHeader?: string - legacyUrl?: string - style?: string + configFile?: string stylesheet?: string - menuFile?: string }>() const state = reactive({ user: null as null | User, mobileMenuOpen: false, - lang3: props.lang, platformInfos: null as null | PlatformInfos, menu: defaultMenu, + config: defaultConfig, + lang3: defaultConfig.lang, + legacyHeader: false, + loaded: false, }) const isAnonymous = computed(() => !state.user || state.user.anonymous) const isWarned = computed(() => state.user?.warned) const remainingDays = computed(() => state.user?.remainingDays) - const loginUrl = computed(() => { const current = new URL(window.location.href) current.searchParams.set('login', '') @@ -40,10 +35,6 @@ const loginUrl = computed(() => { }) const logoutUrl = computed(() => '/logout') -function toggleMenu(): void { - state.mobileMenuOpen = !state.mobileMenuOpen -} - function checkCondition(item: object): boolean { const hasRole = item.hasRole if (!state.user) return false @@ -58,58 +49,87 @@ function checkCondition(item: object): boolean { function computeUrl(url: string): string { return url.replace(/:lang3/, state.lang3) } +function t(msg: string) { + return i18n.global.t(msg) +} + +function setI18n(externalI18n: object): void { + state.lang3 = getI18n( + externalI18n, + state.config.lang || navigator.language.substring(0, 2) || 'en' + ) + state.loaded = true +} onMounted(() => { - if (props.menuFile) - fetch(props.menuFile) - .then(res => res.json()) - .then(file => { - state.menu = file.menu - }) - state.lang3 = - LANG_2_TO_3_MAPPER[props.lang || navigator.language.substring(0, 2)] || - 'eng' - getUserDetails().then(user => { - state.user = user - if (user?.adminRoles?.admin) { - getPlatformInfos().then( - platformInfos => (state.platformInfos = platformInfos) - ) - } - }) + getUserDetails() + .then(user => { + state.user = user + if (user?.adminRoles?.admin) { + getPlatformInfos().then( + platformInfos => (state.platformInfos = platformInfos) + ) + } + }) + .then(() => { + if (props.configFile) + fetch(props.configFile) + .then(res => res.json()) + .then(json => { + console.log(json) + state.config = json.config + if (json.menu) { + state.menu = json.menu + } + setI18n(json.i18n) + }) + else setI18n({}) + }) })