35 lines
1.6 KiB
Vue
35 lines
1.6 KiB
Vue
<template>
|
|
<!-- Offline Banner -->
|
|
<div v-if="isOffline && !store.isReconnecting && store.isAuthenticated" class="path-option-card mx-6 mt-6 px-6 py-3 border-l-4 border-yellow-500">
|
|
<div class="flex items-center gap-2 text-yellow-200">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
<span class="font-medium">
|
|
{{ isRestarting ? 'Server is restarting...' : isShuttingDown ? 'Server is shutting down...' : 'Connection lost' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Reconnecting Banner -->
|
|
<div v-if="store.isReconnecting && store.isAuthenticated" class="path-option-card mx-6 mt-6 px-6 py-3 border-l-4 border-blue-500">
|
|
<div class="flex items-center gap-2 text-blue-200">
|
|
<svg class="w-5 h-5 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
<span class="font-medium">Reconnecting...</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useAppStore } from '@/stores/app'
|
|
|
|
const store = useAppStore()
|
|
|
|
const isOffline = computed(() => store.isOffline)
|
|
const isRestarting = computed(() => store.isRestarting)
|
|
const isShuttingDown = computed(() => store.isShuttingDown)
|
|
</script>
|