Jeppe Bundgaard
ee04e213f1
- Introduced `ConnectivityIssue.vue` for handling and displaying connectivity problems. - Added new route for the connectivity issue error page. - Enhanced accessibility by wrapping table headers in `OrderBookingsTable.vue` with `<thead>` and `<tbody>` tags. - Included connectivity-related internationalization keys across various locale files. - Updated components to integrate `ConnectivityIssue` as a fallback display for connection errors.
104 lines
3.1 KiB
Vue
104 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import {useI18n} from "vue-i18n";
|
|
import {BButton, BIcon} from "buefy";
|
|
const { t } = useI18n();
|
|
import { SessionUser } from "@/components/session/token/SessionUser.vue";
|
|
// font awesome icon name
|
|
const iconName = 'wifi';
|
|
const connectionStatus = ref<'loading' | 'ok' | 'error'>('loading');
|
|
const check_connection = () => {
|
|
reset_timer();
|
|
try {
|
|
SessionUser.request('/ping')
|
|
.then((response: any) => {
|
|
connectionStatus.value = 'ok';
|
|
console.warn('Connection OK', response);
|
|
})
|
|
.catch((error: any) => {
|
|
// Keep the user on the error page if the connection check fails
|
|
connectionStatus.value = 'error';
|
|
console.error('Connection failed, staying on the error page', error);
|
|
});
|
|
} catch (error) {
|
|
connectionStatus.value = 'error';
|
|
console.error('Unexpected error during connection check', error);
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
check_connection();
|
|
// Check every 5 seconds
|
|
setInterval(() => {
|
|
check_connection();
|
|
}, 5000);
|
|
})
|
|
|
|
const timer = ref<NodeJS.Timeout | null>(null);
|
|
const clear_timer_interval = () => {
|
|
if (timer.value) {
|
|
clearInterval(timer.value);
|
|
timer.value = null;
|
|
}
|
|
}
|
|
|
|
const reset_timer = () => {
|
|
clear_timer_interval();
|
|
start_timer_interval();
|
|
}
|
|
|
|
const start_timer_interval = () => {
|
|
time_until_retry.value = 5;
|
|
timer.value = setInterval(() => {
|
|
time_until_retry.value--;
|
|
if (time_until_retry.value === 0) {
|
|
clearInterval(timer.value);
|
|
}
|
|
}, 1000)
|
|
}
|
|
const time_until_retry = ref(5);
|
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<template v-if="connectionStatus === 'error'">
|
|
<section class="hero is-light" v-if="connectionStatus === 'error'">
|
|
<div class="hero-body">
|
|
<div class="container has-text-centered">
|
|
<div class="icon is-large mb-5">
|
|
<b-icon :icon="iconName" type="is-danger" size="is-large" style="animation: pulse 2s infinite;" pack="fas"></b-icon>
|
|
</div>
|
|
<h1 class="title mb-4">{{ t('connectivity.title') }}</h1>
|
|
<h2 class="subtitle mb-5">{{ t('connectivity.subtitle') }}</h2>
|
|
<p class="content mt-6">{{ t('connectivity.description') }}</p>
|
|
<!-- Retry timer -->
|
|
<p class="content mt-2">
|
|
<span v-if="time_until_retry > 0">{{ t('connectivity.retry_in', { seconds: time_until_retry }) }}</span>
|
|
<span v-else>{{ t('connectivity.retry_now') }}</span>
|
|
</p>
|
|
|
|
<b-button
|
|
class="mt-6"
|
|
type="is-primary"
|
|
size="is-large"
|
|
icon-left="refresh"
|
|
iconPack="fas"
|
|
@click="check_connection()"
|
|
>
|
|
{{ t('connectivity.retry') }}
|
|
</b-button>
|
|
</div>
|
|
</div>
|
|
<div class="hero-foot">
|
|
<div class="container has-text-centered">
|
|
<p class="is-size-7 has-text-grey">{{ t('connectivity.footer') }}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
<template v-if="connectionStatus === 'ok' || connectionStatus === 'loading'">
|
|
<slot></slot>
|
|
</template>
|
|
</template>
|