add network
This commit is contained in:
118
src/App.vue
118
src/App.vue
@@ -2,18 +2,23 @@
|
||||
import SpaceList from "@/components/space-list/SpaceList.vue";
|
||||
import Toolbar from "@/components/Toolbar.vue";
|
||||
import Toast from "primevue/toast";
|
||||
import { useSpaceStore } from "@/stores/spaceStore";
|
||||
import { useToolbarStore } from "@/stores/toolbar-store";
|
||||
import ProgressSpinner from "primevue/progressspinner";
|
||||
import {useSpaceStore} from "@/stores/spaceStore";
|
||||
import {useToolbarStore} from "@/stores/toolbar-store";
|
||||
import router from "@/router";
|
||||
import { useRoute, onBeforeRouteUpdate } from "vue-router";
|
||||
import { computed, onMounted, onBeforeUnmount, ref, watch } from "vue";
|
||||
import {useRoute} from "vue-router";
|
||||
import {computed, onBeforeUnmount, onMounted, ref, watch} from "vue";
|
||||
import {useToast} from "primevue/usetoast";
|
||||
import {useUserStore} from "@/stores/userStore";
|
||||
|
||||
const spaceStore = useSpaceStore();
|
||||
const toolbarStore = useToolbarStore();
|
||||
const route = useRoute();
|
||||
const platform = ref<string>("unknown")
|
||||
const toast = useToast();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const isLoading = ref(true);
|
||||
|
||||
const tgApp = (window as any)?.Telegram?.WebApp;
|
||||
const isTelegram = computed(() => !!tgApp);
|
||||
@@ -24,9 +29,9 @@ const isSpaceSelected = computed(
|
||||
);
|
||||
|
||||
const menu = [
|
||||
{ name: "Dashboard", icon: "pi pi-chart-bar", link: "/", navStack: 'dashboard' },
|
||||
{ name: "Transactions", icon: "pi pi-cog", link: "/transactions", navStack: 'transactions' },
|
||||
{ name: "Settings", icon: "pi pi-list", link: "/settings", navStack: 'settings' },
|
||||
{name: "Dashboard", icon: "pi pi-chart-bar", link: "/", navStack: 'dashboard'},
|
||||
{name: "Transactions", icon: "pi pi-cog", link: "/transactions", navStack: 'transactions'},
|
||||
{name: "Settings", icon: "pi pi-list", link: "/settings", navStack: 'settings'},
|
||||
];
|
||||
|
||||
function spaceSelected() {
|
||||
@@ -80,7 +85,17 @@ const blurAllInputs = () => {
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(async () => {
|
||||
// setTimeout(async () => {
|
||||
// if (!userStore.isAuthorized) await router.push(`/login?back=${route.path}`)
|
||||
// }, 1000)
|
||||
//
|
||||
await userStore.fetchUserProfile()
|
||||
await spaceStore.getSpace()
|
||||
setTimeout(async () => {
|
||||
if (!userStore.isAuthorized) await router.push(`/login?back=${route.path}`)
|
||||
}, 100)
|
||||
|
||||
toolbarStore.registerHandler("openSpacePicker", () => {
|
||||
isSpaceSelectorVisible.value = true;
|
||||
});
|
||||
@@ -103,6 +118,7 @@ onMounted(() => {
|
||||
console.warn("Telegram WebApp init error:", err);
|
||||
}
|
||||
}
|
||||
isLoading.value = false;
|
||||
});
|
||||
|
||||
// 🔁 следим за изменением маршрута
|
||||
@@ -122,46 +138,54 @@ onBeforeUnmount(() => {
|
||||
|
||||
<template>
|
||||
<Toast/>
|
||||
<!-- {{platform}}-->
|
||||
<!-- {{['ios', 'android'].includes(platform) }}-->
|
||||
<div class="flex flex-col tg " :class="['ios', 'android'].includes(platform) ? '!pt-10' : ''">
|
||||
<SpaceList v-if="isSpaceSelected" @space-selected="spaceSelected" />
|
||||
<div v-if="isLoading">
|
||||
<ProgressSpinner/>
|
||||
</div>
|
||||
|
||||
<div v-else class="flex flex-col w-full gap-4">
|
||||
<div class="w-full flex flex-row items-end justify-end pt-2 pe-4">
|
||||
<Toolbar />
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="!userStore.isAuthorized">
|
||||
<router-view/>
|
||||
</div>
|
||||
<div v-else class="flex flex-col tg " :class="['ios', 'android'].includes(platform) ? '!pt-10' : ''">
|
||||
<SpaceList v-if="isSpaceSelected && userStore.isAuthorized" @space-selected="spaceSelected"/>
|
||||
|
||||
<div class="flex flex-col w-full h-full items-end px-4 gap-4 pb-6">
|
||||
<router-view class=" w-full" />
|
||||
</div>
|
||||
<button
|
||||
v-if="isInputFocused"
|
||||
@click="blurAllInputs"
|
||||
class="fixed bottom-4 right-4 z-50 bg-blue-500 text-white px-4 py-2 rounded-lg shadow-lg"
|
||||
>
|
||||
Готово
|
||||
</button>
|
||||
<nav v-if="isNavVisible"
|
||||
class="fixed inset-x-0 bottom-4 z-50 w-full flex justify-center items-center"
|
||||
style="padding-bottom: var(--tg-content-safe-area-inset-bottom) !important;"
|
||||
>
|
||||
<div class="flex h-full items-center justify-between py-2 bg-white rounded-4xl px-6 w-fit">
|
||||
<!-- <div class="flex h-full justify-items-center items-center justify-between py-2 bg-white rounded-4xl !px-6 w-fit">-->
|
||||
<router-link
|
||||
v-for="item in menu"
|
||||
:key="item.link"
|
||||
:to="item.link"
|
||||
class="flex w-fit h-full flex-col items-center gap-2 !py-2 !px-4"
|
||||
:class="route.meta.navStack === item.navStack ? 'bg-green-100 rounded-2xl ' : ''"
|
||||
>
|
||||
<i class="!text-lg" :class="item.icon" />
|
||||
<span class="font-medium text-gray-900">{{ item.name }}</span>
|
||||
</router-link>
|
||||
<div v-else class="flex flex-col w-full gap-4">
|
||||
<div class="flex w-full flex flex-row items-end justify-end pt-2 pe-4">
|
||||
<Toolbar/>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="h-16" />
|
||||
<div class="flex flex-col w-full h-full items-end px-4 gap-4 pb-6">
|
||||
<router-view class=" w-full"/>
|
||||
</div>
|
||||
<button
|
||||
v-if="isInputFocused"
|
||||
@click="blurAllInputs"
|
||||
class="fixed bottom-4 right-4 z-50 bg-blue-500 text-white px-4 py-2 rounded-lg shadow-lg"
|
||||
>
|
||||
Готово
|
||||
</button>
|
||||
<nav v-if="isNavVisible"
|
||||
class="fixed inset-x-0 bottom-4 z-50 w-full flex justify-center items-center "
|
||||
style="padding-bottom: var(--tg-content-safe-area-inset-bottom) !important;"
|
||||
>
|
||||
|
||||
<div class="flex h-full items-center justify-between py-2 bg-white rounded-4xl px-6 w-fit shadow">
|
||||
<!-- <div class="flex h-full justify-items-center items-center justify-between py-2 bg-white rounded-4xl !px-6 w-fit">-->
|
||||
<router-link
|
||||
v-for="item in menu"
|
||||
:key="item.link"
|
||||
:to="item.link"
|
||||
class="flex w-fit h-full flex-col items-center gap-2 !py-2 !px-4"
|
||||
:class="route.meta.navStack === item.navStack ? 'bg-green-100 rounded-2xl ' : ''"
|
||||
>
|
||||
<i class="!text-lg" :class="item.icon"/>
|
||||
<span class="font-medium text-gray-900">{{ item.name }}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="flex h-16"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -169,10 +193,6 @@ onBeforeUnmount(() => {
|
||||
<style scoped>
|
||||
.tg {
|
||||
width: 100% !important;
|
||||
margin:
|
||||
var(--tg-content-safe-area-inset-top)
|
||||
var(--tg-content-safe-area-inset-right)
|
||||
0
|
||||
var(--tg-content-safe-area-inset-left) !important;
|
||||
margin: var(--tg-content-safe-area-inset-top) var(--tg-content-safe-area-inset-right) 0 var(--tg-content-safe-area-inset-left) !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user