123 lines
3.9 KiB
Vue
123 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted, ref } from 'vue';
|
|
import Navigation from './components/Navigation.vue';
|
|
import FinanceScreen from './components/FinanceScreen.vue';
|
|
import SettingsScreen from './components/SettingsScreen.vue';
|
|
import { getFamilyById } from './api/families';
|
|
import HomeScreen from "@/components/HomeScreen.vue";
|
|
import CalendarScreen from "@/components/CalendarScreen.vue";
|
|
import IntimacyScreen from "@/components/IntimacyScreen.vue";
|
|
import {Heart} from "lucide-vue-next";
|
|
|
|
const activeScreen = ref('home');
|
|
const previousScreen = ref('home');
|
|
const familyName = ref<string | null>(null);
|
|
const familyOwnerId = ref<number | null>(null);
|
|
|
|
const configuredFamilyId = Number.parseInt(import.meta.env.VITE_FAMILY_ID ?? '1', 10);
|
|
const configuredUserId = Number.parseInt(import.meta.env.VITE_USER_ID ?? '', 10);
|
|
|
|
|
|
function handleNavigate(screen: string) {
|
|
if (screen === 'settings') {
|
|
if (activeScreen.value !== 'settings') {
|
|
previousScreen.value = activeScreen.value;
|
|
}
|
|
activeScreen.value = 'settings';
|
|
return;
|
|
}
|
|
|
|
if (screen === 'close-settings') {
|
|
activeScreen.value = previousScreen.value;
|
|
return;
|
|
}
|
|
|
|
activeScreen.value = screen;
|
|
}
|
|
|
|
async function loadFamily() {
|
|
if (!Number.isFinite(configuredFamilyId) || configuredFamilyId <= 0) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const family = await getFamilyById(configuredFamilyId);
|
|
familyName.value = family.name;
|
|
familyOwnerId.value = family.owner_id;
|
|
} catch (error) {
|
|
console.error('Failed to load family', error);
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
void loadFamily();
|
|
});
|
|
|
|
const resolvedUserId = computed(() => {
|
|
if (Number.isFinite(configuredUserId) && configuredUserId > 0) {
|
|
return configuredUserId;
|
|
}
|
|
|
|
return familyOwnerId.value;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Home Screen -->
|
|
<HomeScreen
|
|
v-if="activeScreen === 'home'"
|
|
:family-id="Number.isFinite(configuredFamilyId) && configuredFamilyId > 0 ? configuredFamilyId : undefined"
|
|
:on-navigate="handleNavigate"
|
|
@navigate="handleNavigate"
|
|
/>
|
|
|
|
<!-- Finance Screen -->
|
|
<FinanceScreen
|
|
v-else-if="activeScreen === 'finance'"
|
|
:family-id="Number.isFinite(configuredFamilyId) && configuredFamilyId > 0 ? configuredFamilyId : undefined"
|
|
:user-id="resolvedUserId ?? undefined"
|
|
:on-navigate="handleNavigate"
|
|
@navigate="handleNavigate"
|
|
/>
|
|
|
|
<!-- Settings Screen -->
|
|
<SettingsScreen
|
|
v-else-if="activeScreen === 'settings'"
|
|
@navigate="handleNavigate"
|
|
/>
|
|
|
|
<!-- Calendar Screen -->
|
|
<CalendarScreen
|
|
v-else-if="activeScreen === 'calendar'"
|
|
:family-id="Number.isFinite(configuredFamilyId) && configuredFamilyId > 0 ? configuredFamilyId : undefined"
|
|
@navigate="handleNavigate"
|
|
/>
|
|
|
|
<!-- Intimacy Screen -->
|
|
<IntimacyScreen
|
|
v-else-if="activeScreen === 'intimacy'"
|
|
:family-id="Number.isFinite(configuredFamilyId) && configuredFamilyId > 0 ? configuredFamilyId : undefined"
|
|
@navigate="handleNavigate"
|
|
/>
|
|
|
|
<!-- Fallback for other screens -->
|
|
<div v-else class="min-h-screen bg-[#0A0A0F] dark flex items-center justify-center">
|
|
<div class="text-center px-8">
|
|
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-500 to-blue-600 flex items-center justify-center mx-auto mb-4">
|
|
<Heart :size="32" :stroke-width="2" class="text-white" />
|
|
</div>
|
|
<h2 class="text-white text-[20px] font-bold mb-2">{{ activeScreen.charAt(0).toUpperCase() + activeScreen.slice(1) }}</h2>
|
|
<p class="text-zinc-400 text-[14px] mb-6">
|
|
This screen is coming soon!
|
|
</p>
|
|
<button
|
|
@click="handleNavigate('home')"
|
|
class="px-6 py-3 rounded-[14px] bg-gradient-to-br from-purple-500 to-blue-600 text-white text-[14px] font-semibold hover:shadow-lg hover:shadow-purple-500/30 transition-all"
|
|
>
|
|
Go to Home
|
|
</button>
|
|
</div>
|
|
<Navigation :active-screen="activeScreen" @navigate="handleNavigate" />
|
|
</div>
|
|
</template>
|