feat: update admin page

frontend/admin/src/App.vue

@@ -1,10 +1,77 @@
+<template>
+  <div v-if="! settings.error" class="tw:relative">
+    <TopLead/>
+    <ul class="nav nav-tabs">
+      <li :class="{active: route.name === 'general'}">
+        <RouterLink :to="{name: 'general'}">Общие</RouterLink>
+      </li>
+
+      <li :class="{active: route.name === 'telegram'}">
+        <RouterLink :to="{name: 'telegram'}">Telegram</RouterLink>
+      </li>
+
+      <li :class="{active: route.name === 'metrics'}">
+        <RouterLink :to="{name: 'metrics'}">Метрики</RouterLink>
+      </li>
+
+      <li :class="{active: route.name === 'store'}">
+        <RouterLink :to="{name: 'store'}">Магазин</RouterLink>
+      </li>
+
+      <li :class="{active: route.name === 'texts'}">
+        <RouterLink :to="{name: 'texts'}">Тексты</RouterLink>
+      </li>
+
+      <li :class="{active: route.name === 'orders'}">
+        <RouterLink :to="{name: 'orders'}">Заказы</RouterLink>
+      </li>
+
+      <li :class="{active: route.name === 'slider'}">
+        <RouterLink :to="{name: 'slider'}">Слайдер</RouterLink>
+      </li>
+    </ul>
+
+    <section class="form-horizontal tab-content">
+      <RouterView/>
+    </section>
+
+    <section>
+      <Button label="Сохранить настройки" @click="settings.saveSettings"/>
+    </section>
+
+    <div v-if="settings.isLoading" class="tw:w-full tw:h-full tw:absolute tw:top-0 tw:left-0 tw:z-30 tw:backdrop-blur-sm">
+      <div class="tw:fixed tw:top-0 tw:left-0 tw:w-full tw:h-full tw:flex tw:justify-center tw:items-center tw:z-40 tw:text-4xl">
+        <i class="fa fa-spin fa-spinner tw:mr-5"></i>
+        <div>Загрузка...</div>
+      </div>
+    </div>
+    <Toast position="top-right"/>
+  </div>
+
+  <div v-else class="tw:w-full tw:h-full tw:absolute tw:top-0 tw:left-0 tw:z-30 tw:backdrop-blur-sm">
+    <div class="tw:fixed tw:top-0 tw:left-0 tw:w-full tw:h-full tw:flex tw:flex-col tw:justify-center tw:items-center tw:z-40">
+      <i class="fa fa-ban tw:text-4xl"></i>
+      <div class="tw:text-4xl">{{ settings.error }}</div>
+      <div>Обратитесь в поддержку</div>
+    </div>
+  </div>
+</template>
+
 <script setup>
-import { RouterView } from 'vue-router'
+import {RouterView, useRoute} from 'vue-router';
+import {useSettingsStore} from "@/stores/settings.js";
+import Toast from 'primevue/toast';
+import { toastBus } from '@/utils/toastHelper';
+import {useToast} from "primevue";
+import Button from 'primevue/button';
+import TopLead from "@/components/TopLead.vue";
+
+const route = useRoute();
+const settings = useSettingsStore();
+const toast = useToast();
+toastBus.on('show', (data) => toast.add(data));
 </script>
 
-<template>
-  <RouterView />
-</template>
 
 <style scoped>