Skip to content

Commit

Permalink
fix loading errors
Browse files Browse the repository at this point in the history
  • Loading branch information
tilalx committed Oct 5, 2024
1 parent fcf3222 commit fc0b402
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 59 deletions.
83 changes: 58 additions & 25 deletions app/components/layout/FootBar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,44 @@
<v-row justify="center" align="center">
<v-col cols="auto">
<div class="text-center">
<a
v-if="settings.privacy_url"
:href="settings.privacy_url"
class="footer-link"
target="_blank"
>
{{ $t('legal.privacy') }}
</a>
<span v-if="settings.privacy_url" class="footer-separator">|</span>
<a
v-if="settings.imprint_url"
:href="settings.imprint_url"
class="footer-link"
target="_blank"
>
{{ $t('legal.imprint') }}
</a>
<a
v-if="settings.privacy_url"
:href="settings.privacy_url"
class="footer-link"
target="_blank"
>
{{ $t('legal.privacy') }}
</a>
<span
v-if="settings.privacy_url"
class="footer-separator"
>|</span
>
<a
v-if="settings.imprint_url"
:href="settings.imprint_url"
class="footer-link"
target="_blank"
>
{{ $t('legal.imprint') }}
</a>
</div>
</v-col>
</v-row>
<v-col class="text-center mt-4" cols="12">
&copy; {{ new Date().getFullYear() }} — <strong><a href="https://github.com/tilalx/verti-grade" target="_blank">Verti-Grade</a></strong>.
&copy; {{ currentYear }} —
<strong
><a
href="https://github.com/tilalx/verti-grade"
target="_blank"
>Verti-Grade</a
></strong
>.
</v-col>
<v-row justify="center" align="center">
<v-col cols="auto">
<div class="text-center">
<v-chip color="success" v-if="health.code === 200">{{
<v-chip color="success" v-if="health?.code === 200">{{
$t('notifications.success.health')
}}</v-chip>
<v-chip color="error" v-else>{{
Expand All @@ -50,14 +61,29 @@
</template>

<script setup>
// Import required Vue and Nuxt composables
import { ref, computed, toRefs } from 'vue'
const pb = useServerPocketbase()
const config = useRuntimeConfig()
const appVersion = config.public.appVersion
const pb = usePocketbase()
const currentYear = computed(() => new Date().getFullYear())
const health = await pb.health.check()
const { data: health, error: healthError } = await useAsyncData(
'health',
async () => {
return await pb.health.check() // Fetch health status from Pocketbase
},
)
const online = await pb.send('/api/online')
const { data: online, error: onlineError } = await useAsyncData(
'online',
async () => {
return await pb.send('/api/online') // Fetch online status from API
},
)
const props = defineProps({
settings: {
Expand All @@ -67,17 +93,24 @@ const props = defineProps({
})
const { settings } = toRefs(props)
if (healthError.value || onlineError.value) {
console.error('Error fetching health or online status', {
healthError,
onlineError,
})
}
</script>

<style scoped>
.footer-link {
margin: 0 10px;
text-decoration: none; /* Removes underline */
color: inherit; /* Inherits the color from the parent element */
text-decoration: none;
color: inherit;
}
.footer-link:hover {
text-decoration: none; /* Keeps the underline removed on hover */
text-decoration: none;
}
.footer-separator {
Expand Down
68 changes: 34 additions & 34 deletions app/layouts/default.vue
Original file line number Diff line number Diff line change
@@ -1,80 +1,80 @@
<template>
<NavBar :loggedIn="isLoggedIn" :settings="settings" />
<VMain>
<NuxtPage />
</VMain>
<VMain>
<NuxtPage />
</VMain>
<FootBar :settings="settings" />
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import NavBar from '~/components/layout/NavBar.vue'
import FootBar from '~/components/layout/FootBar.vue'
const pb = usePocketbase()
const isLoggedIn = ref(pb.authStore.isValid)
let intervalId = null
const settings = ref({})
const getSettings = async () => {
try {
const settings = await pb
.collection('settings')
.getOne('settings_123456')
return settings
return await pb.collection('settings').getOne('settings_123456')
} catch (error) {
if (error.data && error.data.code === 404) {
console.log('Settings not found, creating new settings')
try {
const newSettings = await pb.collection('settings').create({
return await pb.collection('settings').create({
id: 'settings_123456',
})
return newSettings
} catch (createError) {
console.error('Error creating new settings:', createError)
throw createError
}
} else {
console.error('An error occurred:', error)
throw error
}
console.error('An error occurred:', error)
throw error
}
}
const settings = await getSettings()
const checkSession = async () => {
isLoggedIn.value = pb.authStore.isValid
}
const refreshSession = async () => {
try {
await pb.authStore.refresh()
isLoggedIn.value = pb.authStore.isValid
pb.authStore.refresh()
} catch (error) {
isLoggedIn.value = false
console.error('Error refreshing session:', error)
}
}
const setFavicon = () => {
if (!settings?.page_icon) return
const favUrl = pb.files.getUrl(settings, settings.page_icon)
let link = document.querySelector("link[rel~='icon']")
if (!link) {
link = document.createElement('link')
link.rel = 'icon'
document.getElementsByTagName('head')[0].appendChild(link)
}
if (!settings.value?.page_icon) return
const favUrl = pb.files.getUrl(settings.value, settings.value.page_icon)
let link = document.querySelector("link[rel~='icon']") || document.createElement('link')
link.rel = 'icon'
link.href = favUrl
document.head.appendChild(link)
}
const checkSession = async () => {
isLoggedIn.value = pb.authStore.isValid
}
// When the component is mounted, check the session immediately
onMounted(async () => {
await refreshSession()
try {
settings.value = await getSettings()
await refreshSession()
setFavicon()
intervalId = setInterval(checkSession, 600)
} catch (error) {
// Handle error (e.g., display notification to user)
console.error('Error during initialization:', error)
}
})
onMounted(() => {
setFavicon()
intervalId = setInterval(() => {
checkSession()
}, 600)
onBeforeUnmount(() => {
if (intervalId) {
clearInterval(intervalId)
}
})
</script>

0 comments on commit fc0b402

Please sign in to comment.