Added Frontend
This commit is contained in:
275
frontend/layouts/mobile.vue
Normal file
275
frontend/layouts/mobile.vue
Normal file
@@ -0,0 +1,275 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from "vue"
|
||||
|
||||
import dayjs from "dayjs";
|
||||
import {useAuthStore} from "~/stores/auth.js";
|
||||
|
||||
const route = useRoute()
|
||||
const auth = useAuthStore()
|
||||
|
||||
const month = dayjs().format("MM")
|
||||
|
||||
|
||||
const hideNav = ref(false)
|
||||
let lastScrollY = 0
|
||||
let scrollElement = null
|
||||
let returnTimer = null
|
||||
|
||||
const SHOW_DELAY = 1000 // 1 Sekunden
|
||||
|
||||
function showNavAfterDelay() {
|
||||
clearTimeout(returnTimer)
|
||||
returnTimer = setTimeout(() => {
|
||||
hideNav.value = false
|
||||
}, SHOW_DELAY)
|
||||
}
|
||||
|
||||
const handleScroll = () => {
|
||||
const current = scrollElement.scrollTop
|
||||
|
||||
// Runter scrollen -> verstecken
|
||||
if (current > lastScrollY + 10) {
|
||||
hideNav.value = true
|
||||
showNavAfterDelay()
|
||||
}
|
||||
|
||||
// Hoch scrollen -> sofort zeigen
|
||||
if (current < lastScrollY - 10) {
|
||||
hideNav.value = false
|
||||
clearTimeout(returnTimer)
|
||||
}
|
||||
|
||||
lastScrollY = current
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
scrollElement = document.querySelector('.mobile-scroll-area')
|
||||
if (scrollElement) {
|
||||
scrollElement.addEventListener('scroll', handleScroll)
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (scrollElement) scrollElement.removeEventListener('scroll', handleScroll)
|
||||
clearTimeout(returnTimer)
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="!auth.loading">
|
||||
<div v-if="auth.activeTenantData?.locked === 'maintenance_tenant'">
|
||||
<UContainer class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
|
||||
<UCard class="max-w-lg text-center p-10">
|
||||
<UColorModeImage
|
||||
light="/Logo_Hell_Weihnachten.png"
|
||||
dark="/Logo_Dunkel_Weihnachten.png"
|
||||
class=" mx-auto my-10"
|
||||
v-if="month === '12'"
|
||||
/>
|
||||
<UColorModeImage
|
||||
light="/Logo.png"
|
||||
dark="/Logo_Dark.png"
|
||||
class="mx-auto my-10"
|
||||
v-else
|
||||
/>
|
||||
<div class="flex justify-center mb-6">
|
||||
<UIcon name="i-heroicons-exclamation-triangle-solid" class="w-16 h-16 text-yellow-500" />
|
||||
</div>
|
||||
|
||||
<h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Wartungsarbeiten
|
||||
</h1>
|
||||
<p class="text-gray-600 dark:text-gray-300 mb-8">
|
||||
Dieser FEDEO Mandant wird derzeit gewartet. Bitte versuche es in einigen Minuten erneut oder verwende einen anderen Mandanten.
|
||||
</p>
|
||||
<div class="mx-auto text-left flex flex-row justify-between my-3" v-for="tenant in auth.tenants">
|
||||
{{tenant.name}}
|
||||
<UButton
|
||||
:disabled="tenant.locked"
|
||||
@click="auth.switchTenant(tenant.id)"
|
||||
>Wählen</UButton>
|
||||
</div>
|
||||
|
||||
|
||||
</UCard>
|
||||
</UContainer>
|
||||
</div>
|
||||
<div v-else-if="auth.activeTenantData?.locked === 'maintenance'">
|
||||
<UContainer class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
|
||||
<UCard class="max-w-lg text-center p-10">
|
||||
<UColorModeImage
|
||||
light="/Logo_Hell_Weihnachten.png"
|
||||
dark="/Logo_Dunkel_Weihnachten.png"
|
||||
class=" mx-auto my-10"
|
||||
v-if="month === '12'"
|
||||
/>
|
||||
<UColorModeImage
|
||||
light="/Logo.png"
|
||||
dark="/Logo_Dark.png"
|
||||
class="mx-auto my-10"
|
||||
v-else
|
||||
/>
|
||||
<div class="flex justify-center mb-6">
|
||||
<UIcon name="i-heroicons-exclamation-triangle-solid" class="w-16 h-16 text-yellow-500" />
|
||||
</div>
|
||||
|
||||
<h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Wartungsarbeiten
|
||||
</h1>
|
||||
<p class="text-gray-600 dark:text-gray-300 mb-8">
|
||||
FEDEO wird derzeit gewartet. Bitte versuche es in einigen Minuten erneut.
|
||||
</p>
|
||||
|
||||
|
||||
</UCard>
|
||||
</UContainer>
|
||||
</div>
|
||||
<div v-else-if="auth.activeTenantData?.locked === 'no_subscription'">
|
||||
<UContainer class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
|
||||
<UCard class="max-w-lg text-center p-10">
|
||||
<UColorModeImage
|
||||
light="/Logo_Hell_Weihnachten.png"
|
||||
dark="/Logo_Dunkel_Weihnachten.png"
|
||||
class=" mx-auto my-10"
|
||||
v-if="month === '12'"
|
||||
/>
|
||||
<UColorModeImage
|
||||
light="/Logo.png"
|
||||
dark="/Logo_Dark.png"
|
||||
class="mx-auto my-10"
|
||||
v-else
|
||||
/>
|
||||
<div class="flex justify-center mb-6">
|
||||
<UIcon name="i-heroicons-credit-card" class="w-16 h-16 text-red-600" />
|
||||
</div>
|
||||
|
||||
<h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Kein Aktives Abonnement für diesen Mandant.
|
||||
</h1>
|
||||
<p class="text-gray-600 dark:text-gray-300 mb-8">
|
||||
Bitte wenden Sie sich an den FEDEO Support um ein Abonnement zu erhalten oder verwenden Sie einen anderen Mandanten.
|
||||
</p>
|
||||
<div class="mx-auto text-left flex flex-row justify-between my-3" v-for="tenant in auth.tenants">
|
||||
{{tenant.name}}
|
||||
<UButton
|
||||
:disabled="tenant.locked"
|
||||
@click="auth.switchTenant(tenant.id)"
|
||||
>Wählen</UButton>
|
||||
</div>
|
||||
|
||||
|
||||
</UCard>
|
||||
</UContainer>
|
||||
</div>
|
||||
<UDashboardLayout class="safearea" v-else>
|
||||
|
||||
<UDashboardPage style="height: 90vh">
|
||||
<UDashboardPanel grow>
|
||||
<slot />
|
||||
</UDashboardPanel>
|
||||
</UDashboardPage>
|
||||
|
||||
<!-- Modernisierte Mobile Navigation -->
|
||||
<nav
|
||||
:class="[
|
||||
'fixed bottom-0 left-0 right-0 z-50', // ← bottom-0 hinzugefügt!
|
||||
'h-[70px] bg-white/80 dark:bg-gray-950/80 backdrop-blur-xl',
|
||||
'border-t border-gray-200 dark:border-gray-800',
|
||||
'flex justify-around items-center pt-2 pb-[max(env(safe-area-inset-bottom),0.5rem)]',
|
||||
'transition-transform duration-300 ease-in-out',
|
||||
hideNav ? 'translate-y-full' : 'translate-y-0'
|
||||
]"
|
||||
>
|
||||
<UButton
|
||||
icon="i-heroicons-home"
|
||||
to="/mobile/"
|
||||
variant="ghost"
|
||||
:color="route.fullPath === '/mobile' ? 'primary' : 'gray'"
|
||||
class="nav-btn"
|
||||
/>
|
||||
|
||||
<UButton
|
||||
icon="i-heroicons-clipboard-document-check"
|
||||
to="/standardEntity/tasks"
|
||||
variant="ghost"
|
||||
:color="route.fullPath === '/standardEntity/tasks' ? 'primary' : 'gray'"
|
||||
class="nav-btn"
|
||||
/>
|
||||
|
||||
<UButton
|
||||
icon="i-heroicons-rectangle-stack"
|
||||
to="/standardEntity/projects"
|
||||
variant="ghost"
|
||||
:color="route.fullPath === '/standardEntity/projects' ? 'primary' : 'gray'"
|
||||
class="nav-btn"
|
||||
/>
|
||||
|
||||
<UButton
|
||||
icon="i-heroicons-bars-4"
|
||||
to="/mobile/menu"
|
||||
variant="ghost"
|
||||
:color="route.fullPath === '/mobile/menu' ? 'primary' : 'gray'"
|
||||
class="nav-btn"
|
||||
/>
|
||||
</nav>
|
||||
|
||||
|
||||
</UDashboardLayout>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="flex flex-col"
|
||||
>
|
||||
<UColorModeImage
|
||||
light="/Logo_Hell_Weihnachten.png"
|
||||
dark="/Logo_Dunkel_Weihnachten.png"
|
||||
class="w-1/3 mx-auto my-10"
|
||||
v-if="month === '12'"
|
||||
/>
|
||||
<UColorModeImage
|
||||
light="/Logo.png"
|
||||
dark="/Logo_Dark.png"
|
||||
class="w-1/3 mx-auto my-10"
|
||||
v-else
|
||||
/>
|
||||
<div v-if="!auth.activeTenant && auth.tenants?.length > 0 " class="w-full mx-auto text-center">
|
||||
<!-- Tenant Selection -->
|
||||
<h3 class="text-center font-bold text-2xl mb-5">Kein Aktiver Mandant. <br>Bitte wählen Sie ein Mandant.</h3>
|
||||
<div class="mx-auto w-5/6 flex flex-row justify-between my-3" v-for="tenant in auth.tenants">
|
||||
<span class="text-left">{{tenant.name}}</span>
|
||||
<UButton
|
||||
@click="auth.switchTenant(tenant.id)"
|
||||
>Wählen</UButton>
|
||||
</div>
|
||||
<UButton
|
||||
variant="outline"
|
||||
color="rose"
|
||||
@click="auth.logout()"
|
||||
>Abmelden</UButton>
|
||||
|
||||
|
||||
</div>
|
||||
<div v-else>
|
||||
<UProgress animation="carousel" class="w-3/4 mx-auto mt-10" />Test
|
||||
{{auth.tenants}}
|
||||
|
||||
<UButton
|
||||
variant="outline"
|
||||
color="rose"
|
||||
@click="auth.logout()"
|
||||
>Abmelden</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.nav-btn {
|
||||
@apply w-12 h-12 flex justify-center items-center rounded-xl active:scale-95 transition;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user