dancefinder/dancefinder-app
5
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Activity

feat: add i18n support and implement Grafana plugin

Browse Source 
Adds internationalization support in filters and origins pages by 
importing the useI18n function. Expands ESLint configuration to 
include new rules and plugins, ensuring improved code quality. 
Introduces Grafana monitoring plugin to enhance performance 
tracking capabilities in the application.
This commit is contained in:
Joakim Olsson
2025-06-13 15:21:27 +02:00
parent 7bbd8f522a
commit c80fd0313c
28 changed files with 1989 additions and 1948 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/default.vue
+38 -18
View File
@@ -1,42 +1,50 @@
<template>
<v-app :key="$i18n.locale + isAuthenticated">
<v-navigation-drawer v-model="nav" temporary app>
<v-app :key='locale + isAuthenticated'>
<v-navigation-drawer v-model='nav' temporary app>
<v-list dense>
<v-list-item v-if="isAuthenticated && user" :title="user.name" :prepend-avatar="user.picture" />
<v-list-item v-if='isAuthenticated && user' :title='user.name' :prepend-avatar='user.picture' />
<v-list-item>
<v-switch v-model="darkMode" color="primary" :label="$t('app.darkMode')" hide-details class="ms-1" />
<v-switch v-model='darkMode' color='primary' :label="t('app.darkMode')" hide-details class='ms-1' />
</v-list-item>
<v-list-item title="In English" :to="switchLocalePath('en')">
<!-- eslint-disable-next-line vue/no-bare-strings-in-template -->
<v-list-item title='In English' :to="switchLocalePath('en')">
<template #prepend>
<div class="d-flex d-inline-flex text-h5 me-8">
<!-- eslint-disable-next-line vue/no-bare-strings-in-template -->
<div class='d-flex d-inline-flex text-h5 me-8'>
🇬🇧
</div>
</template>
</v-list-item>
<v-list-item title="På Svenska" :to="switchLocalePath('sv')">
<!-- eslint-disable-next-line vue/no-bare-strings-in-template -->
<v-list-item title='På Svenska' :to="switchLocalePath('sv')">
<template #prepend>
<div class="d-flex d-inline-flex text-h5 me-8">
<!-- eslint-disable-next-line vue/no-bare-strings-in-template -->
<div class='d-flex d-inline-flex text-h5 me-8'>
🇸🇪
</div>
</template>
</v-list-item>
<v-list-item to="/" :title="$t('app.links.events')" prepend-icon="mdi-calendar-outline" />
<v-list-item v-if="isAuthenticated" to="/origins/" :title="$t('app.links.origins')" prepend-icon="mdi-home" />
<v-list-item v-if="isAuthenticated" to="/filters/" :title="$t('app.links.filters')" prepend-icon="mdi-magnify" />
<v-list-item v-if="!user" link :title="$t('app.login')" prepend-icon="mdi-login" @click="doLogin" />
<v-list-item v-if="isAuthenticated" link :title="$t('app.logout')" prepend-icon="mdi-logout" @click="doLogout" />
<v-list-item to='/' :title="t('app.links.events')" prepend-icon='mdi-calendar-outline' />
<v-list-item v-if='isAuthenticated' to='/origins/' :title="t('app.links.origins')" prepend-icon='mdi-home' />
<v-list-item
v-if='isAuthenticated' to='/filters/' :title="t('app.links.filters')"
prepend-icon='mdi-magnify' />
<v-list-item v-if='!user' link :title="t('app.login')" prepend-icon='mdi-login' @click='doLogin' />
<v-list-item
v-if='isAuthenticated' link :title="t('app.logout')" prepend-icon='mdi-logout'
@click='doLogout' />
</v-list>
</v-navigation-drawer>
<v-app-bar app scroll-off-screen>
<v-app-bar-nav-icon @click="nav = !nav" />
<v-toolbar-title :title="title" />
<v-app-bar-nav-icon @click='nav = !nav' />
<v-toolbar-title :title='title' />
<v-spacer />
<v-toolbar-items>
<v-list-item v-if="isAuthenticated && user" :prepend-avatar="user.picture" :title="user.name" />
<v-list-item v-if='isAuthenticated && user' :prepend-avatar='user.picture' :title='user.name' />
</v-toolbar-items>
</v-app-bar>
<v-main>
<v-container v-if="!isLoading" fluid>
<v-container v-if='!isLoading' fluid>
<slot />
</v-container>
</v-main>
@@ -44,12 +52,15 @@
</template>
<script setup lang='ts'>
import { useAuth0 } from '@auth0/auth0-vue'
import { computed, onMounted, ref } from 'vue'
import { useTheme } from 'vuetify'
import { useAuth0 } from '@auth0/auth0-vue'
import { useSwitchLocalePath } from '#i18n'
import { useState } from '~/store'
const { t, locale } = useI18n()
const { $faro } = useNuxtApp()
const switchLocalePath = useSwitchLocalePath()
const state = useState()
const { isLoading, isAuthenticated, user, loginWithRedirect, logout } =
@@ -88,4 +99,13 @@ const darkMode = computed<boolean>({
const nav = ref(false)
const title = computed(() => state.title)
watchEffect(() => {
if ($faro && !isLoading.value && user.value) {
$faro.api.setUser({
id: user.value.sub,
email: user.value.email,
username: user.value.preferred_username,
})
}
})
</script>