45 lines
1.6 KiB
Vue
45 lines
1.6 KiB
Vue
<template>
|
|
<section
|
|
v-if="isInternal && matches.length"
|
|
class="fixed top-20 z-40 w-full border-y border-primary-200 bg-primary-50 text-primary-950 shadow-sm"
|
|
>
|
|
<div class="mx-auto flex max-w-7xl items-center gap-3 overflow-x-auto px-4 py-2 text-sm sm:px-6">
|
|
<div
|
|
v-for="match in matches"
|
|
:key="match.meetingId"
|
|
:class="['shrink-0 whitespace-nowrap', match.completed ? 'italic text-gray-600' : 'font-semibold']"
|
|
>
|
|
<span v-if="match.completed">✓ beendet</span>
|
|
<span
|
|
v-else-if="match.hasLiveData"
|
|
class="text-red-700"
|
|
>● LIVE</span>
|
|
<span
|
|
v-else
|
|
class="text-gray-600"
|
|
>◌ Keine Live-Daten</span>
|
|
<span class="mx-2">{{ match.homeTeam }} <strong>{{ match.score }}</strong> {{ match.awayTeam }}</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { useAuthStore } from '~/stores/auth'
|
|
|
|
const route = useRoute()
|
|
const authStore = useAuthStore()
|
|
const matches = ref([])
|
|
const isInternal = computed(() => authStore.isLoggedIn && (route.path.startsWith('/mitgliederbereich') || route.path.startsWith('/cms')))
|
|
let timer
|
|
async function load() {
|
|
if (!isInternal.value) { matches.value = []; return }
|
|
try { matches.value = (await $fetch('/api/mitgliederbereich/live-ticker')).matches || [] } catch { matches.value = [] }
|
|
}
|
|
onMounted(() => { load(); timer = setInterval(load, 30_000) })
|
|
onUnmounted(() => clearInterval(timer))
|
|
watch(isInternal, load)
|
|
</script>
|