chore: clean ui, profile

src/hooks/useState.ts

@@ -1,6 +1,5 @@
 import { ref, computed } from 'vue'
-// import type { ListCloudBoxesType } from '~/typs/clouds'
+import type { SideMenuItemType, UiPanelsType } from '~/typs/cmpnts'
-// import type { SideMenuItemType } from '~/typs/cmpnts'
 
 const reqError = ref({ defs: '', lang: '', data: '', gql: '', api: '' })
 
@@ -9,38 +8,120 @@ const isSidebarOpen = ref(false)
 const toggleSidebar = () => {
   isSidebarOpen.value = !isSidebarOpen.value
 }
+const showModal = ref(false)
+
+const isAsidePanelOpen = ref(false)
+
+const sideSettingButton = ref(false)
+
+const isSettingsPanelOpen = ref(false)
+
+const isSearchPanelOpen = ref(false)
+const usideSettingButton = ref(false)
+
+const isNotificationsPanelOpen = ref(false)
+
+const useSettings = ref(false)
+
+const useSearch = ref(false)
+
+const search = ref('')
+
 const bcPath = ref('')
 
+const navTitle = ref({
+  text: '',
+  textclick: null as null | Function,
+  title: '',
+  cmpnt: '',
+  ops: [] as any[],
+  btntype: '',
+  cllbck: null as null | Function,
+})
+const dfltNavTitle = () => {
+  navTitle.value = {
+    text: '',
+    textclick: null as null | Function,
+    title: '',
+    cmpnt: '',
+    ops: [] as any[],
+    btntype: '',
+    cllbck: null as null | Function,
+  }
+}
+// '#fa-book/biomagnetismo/microorganismos/virus'
+
+const bookCllbck = ref()
+const bookSelec = (data: string) => {
+  if (data === '#') {
+    bcPath.value = ''
+    dfltNavTitle()
+  }
+  else {
+    if (bookCllbck.value)
+      bookCllbck.value(data)
+    // else ...
+  }
+}
+const sidebarMenuItems = ref([] as SideMenuItemType[])
+
+const checkin = ref(false)
+const connection = ref({
+  state: '',
+}) 
+
 const tsksrvcs = 'tsksrvcs'
 const appsrvcs = 'appsrvcs'
 const srvcstatus = 'srvcstatus'
 
-const menu_items = ref([
+// const menu_items = ref([
-  { id: tsksrvcs, title: 'Tasks', active: false, link: '#' },
+//   { id: tsksrvcs, title: 'Tasks', active: false, link: '#' },
-  { id: appsrvcs, title: 'Applications', active: false, link: '#' },
+//   { id: appsrvcs, title: 'Applications', active: false, link: '#' },
-  { id: srvcstatus, title: 'Services Status', active: false, link: '#' },
+//   { id: srvcstatus, title: 'Informations', active: false, link: '#' },
-])
+// ])
 
-const showModal = ref(false)
+const side_menu_click = ref()
+const app_home_click = ref()
 
-const checkin = ref(false)
+const backdrop_blur = ref(14)
-const connection = ref({
+const back_opacity = ref(60)
-  state: '',
+const panels = ref({} as UiPanelsType)
-})
+
+const show_profile = ref(false)
 
 export default function useState() {
   return {
-    tsksrvcs,
+		reqError,
-    appsrvcs,
-    srvcstatus,
-    menu_items,
-    reqError,
     currentMapKey,
     isSidebarOpen,
     toggleSidebar,
-		bcPath,
+    isAsidePanelOpen,
-    showModal,
+    isSettingsPanelOpen,
+    isSearchPanelOpen,
+    isNotificationsPanelOpen,
+		useSettings,
+    usideSettingButton,
+    sideSettingButton,
+    bcPath,
+    bookSelec,
+    bookCllbck,
+    navTitle,
+    dfltNavTitle,
     checkin,
     connection,
+    sidebarMenuItems,
+    showModal,
+    tsksrvcs,
+    appsrvcs,
+    srvcstatus,
+    // menu_items,
+		side_menu_click,
+		app_home_click,
+		useSearch,
+		search,
+		back_opacity,
+		backdrop_blur,
+		panels,
+		show_profile,
   }
 }

src/hooks/utils.ts

@@ -163,12 +163,10 @@ export const load_data = async(data_path: RequestInfo, ato: number, timeout = 20
   //  return `error no auth for ${data_path}`
 
   try {
+		const headers = token !== "" ? { Authorization: `Bearer ${token}`} : {}   
+    // 'content-type': 'application/json',
     const res = await self.fetch(data_path, {
-      headers: {
+      headers
-        Authorization: `Bearer ${token}`,
-        // 'content-type': 'application/json',
-      },
-
     })
     // setTimeout(async() => {
     let dataloaded = {}

src/layouts/AppLayout.vue

@@ -1,7 +1,224 @@
 <template>
-  <div class="antialiased text-gray-900 bg-white">
+  <div v-if="isCheckin">
-    <slot />
+    <div class="spinner" style="margin: 100px auto; width: 80px; height: 80px;">
+      <div class="dot1" />
+      <div class="dot2" />
+    </div>
+    <div class="flex justify-center text-2xl">
+      {{ t('message.loadding') }} ...
+    </div>
+  </div>
+  <div v-else>
+    <div>
+      <div class="antialiased text-gray-900 bg-white dark:bg-gray-800 dark:text-white">
+        <div class="flex h-screen overflow-y-hidden bg-white">
+          <!-- Sidebar -->
+          <Sidebar />
+
+          <div class="flex flex-col flex-1 h-full overflow-hidden">
+            <!-- Navbar -->
+            <header class="flex-shrink-0 border-b dark:border-gray-700 border-gray-200">
+               <Navbar @on-nav-menu="onNavMenu" />
+            </header>
+            <!-- Main content -->
+            <main class="flex-1 max-h-full overflow-hidden overflow-y-scroll  dark:bg-cool-gray-800 dark:text-white">
+              <slot />
+            </main>
+            <!-- Main footer -->
+						<footer class="flex items-center justify-between flex-shrink-0 p-4 border-t dark:border-gray-700 border-gray-200 max-h-14  dark:bg-cool-gray-800 dark:text-white">
+							<div class="flex">
+								<span
+									v-for="(itm,index) in left_items"
+									:key="`${String(index)}-${itm.title}`"
+								>
+									<a
+										v-if="itm && itm.type === NavItemType.app_link"
+										:href="itm.href"
+										class="text-xs"
+									>
+										{{ t(itm.title) }}
+									</a>
+									<router-link
+										v-if="itm && itm.type === 'router_link'"
+										:title="t(itm.title)"
+										:to="{ name: itm.name_to }"
+										class="small-text flex items-center text-shadow-xs"
+									>
+										{{ t(itm.title) }}
+									</router-link>
+								</span>
+							</div>
+							<div class="text-sm">
+								<Footer />
+							</div>
+							<div class="flex">
+								<span
+									v-for="(itm,index) in right_items"
+									:key="`${String(index)}-${itm.title}`"
+								>
+									<a
+										v-if="itm && itm.type === NavItemType.app_link"
+										:href="itm.href"
+										class="flex items-center"
+									>
+										<span class="hidden text-sm md:block mr-2"> {{ t(itm.title) }} </span>
+										<span v-if="itm.img" class="w-11 h-11 mr-2">
+											<app-img v-if="itm.img === 'librecloudd'" />
+											<img v-else class="h-11 w-auto rounded" :src="`/assets/images/${itm.img}.svg`" alt="App">
+										</span>
+									</a>
+									<router-link
+										v-if="itm && itm.type === 'router_link'"
+										:title="t(itm.title)"
+										:to="{ name: itm.name_to }"
+										class="flex items-center"
+									>
+										<span class="hidden text-sm md:block mr-2"> {{ t(itm.title) }} </span>
+										<span v-if="itm.img" class="w-11 h-11 mr-2">
+											<app-img v-if="itm.img === 'librecloudd'" />
+											<img v-else class="h-11 w-auto" :src="`/assets/images/${itm.img}.svg`" alt="App">
+										</span>
+									</router-link>
+								</span>
+							</div>
+						</footer>
+          </div>
+          <!-- Setting panel button -->
+          <div v-if="sideSettingButton" v-show="useSettings" class="fixed right-0 transform rotate-90 translate-x-8 top-1/2">
+            <Button class="text-sm font-medium z-999 text-white uppercase bg-gray-600" @click="isSettingsPanelOpen = true">
+              Settings
+            </Button>
+          </div>
+          <SettingsPanel :show="isSettingsPanelOpen" @close="isSettingsPanelOpen = false" />
+          <SearchPanel left :show="isSearchPanelOpen" @close="isSearchPanelOpen = false" />
+          <NotificationsPanel left :show="isNotificationsPanelOpen" @close="isNotificationsPanelOpen = false" />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup lang="ts">
+/*
+  <suspense v-else>
+      <template #default>
+      </template>
+      <template #fallback>
+        <div class="space-up">
+          <div class="spinner" style="margin: 100px auto; width: 80px; height: 80px;">
+            <div class="dot1" />
+            <div class="dot2" />
+          </div>
+          <div class="flex justify-center text-2xl">
+            Check-in ...
+          </div>
+        </div>
+      </template>
+    </suspense>
+
+       <div>
+        <a
+          href="https://karyo.dev"
+          target="_blank"
+          class="flex items-center space-x-1"
+        >
+
+          <span class="w-11 h-11 dark:bg-gray-200 rounded-full mr-2">
+            <dsc-logo />
+          </span>
+          <span class="hidden text-sm md:block">Z-Terton</span>
+
+        </a>
+      </div>
+*/
+import { onMounted, onUnmounted, ref, computed } from 'vue'
+
+import { useRouter } from 'vue-router'
+import Sidebar from '@/sidebar/Sidebar.vue'
+import Navbar from '@/navbar/Navbar.vue'
+import SettingsPanel from '@/panels/SettingsPanel.vue'
+import SearchPanel from '@/panels/SearchPanel.vue'
+import NotificationsPanel from '@/panels/NotificationsPanel.vue'
+import Button from '@/global/Button.vue'
+import Footer from '@/Footer.vue'
+import AppImg from '@/icons/AppImg.vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
+import useState from '~/hooks/useState'
+import { SideMenuItemType } from '~/typs/cmpnts'
+import { NavItemType } from '~/typs'
+
+// import { AppDefsAction } from '~/store/types'
+// import useComponent, { DynComponent } from '~/hooks/useComponent'
+// import { check_credentials } from '~/hooks/utils'
+
+//const { reqError, isSidebarOpen, isAsidePanelOpen, isSettingsPanelOpen, isSearchPanelOpen, isNotificationsPanelOpen, sideSettingButton } = useState()
+const { isSidebarOpen, isSettingsPanelOpen, isSearchPanelOpen, isNotificationsPanelOpen, sideSettingButton, useSettings } = useState()
+
+const checkScreen = () => {
+  if (window.innerWidth <= 1024)
+    isSidebarOpen.value = false
+}
+
+// const props = defineProps<{
+//   appdefs: any
+// }>()
+// const { appdefs } = toRefs(props)
+
+// const use_panels = true
+// const show_top_pane = ref(false)
+// const show_bottom_pane = ref(false)
+
+const isCheckin = ref(true)
+const { t } = useI18n()
+const router = useRouter()
+const map_key = router.currentRoute.value.meta.uiMapkey || 'ui'
+
+const store = useStore()
+
+const defs = computed(() => store.state.app_defs.main.get(map_key) || {})
+
+const left_items = computed((): SideMenuItemType[]  => {
+  return defs.value && defs.value.footer && defs.value.footer.left_items ? defs.value.footer.left_items : [] as SideMenuItemType[]
+})
+const right_items = computed((): SideMenuItemType[]  => {
+  return defs.value && defs.value.footer && defs.value.footer.right_items ? defs.value.footer.right_items : [] as SideMenuItemType[]
+})
+
+const onNavMenu = (itm: SideMenuItemType) => {
+	useState().show_profile.value = true
+}
+onMounted(() => {
+  window.addEventListener('resize', checkScreen)
+  isCheckin.value = false
+})
+
+// const topPaneComponent = computed(() => useComponent().topPaneComponent.value)
+// const bottomPaneComponent = computed(() => useComponent().bottomPaneComponent.value)
+// const root_url = router.currentRoute.value.meta.rooturl || ''
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkScreen)
+})
+
+</script>
+<style scoped>
+.small-text {
+	font-size: 75%;
+}
+.expandable {
+  background: #dadada;
+  overflow: hidden;
+
+  transition: all .5s ease-in-out;
+  line-height: 0;
+  padding: 0 1em;
+  color: transparent;
+}
+.expandable:target {
+  line-height: 1.5;
+  padding-top: 1em;
+  padding-bottom: 1em;
+  color: black;
+}
+</style>

src/main.ts

@@ -8,6 +8,9 @@ import 'virtual:windi-utilities.css'
 // windicss devtools support (dev only)
 import 'virtual:windi-devtools'
 
+import VueAnimXYZ from '@animxyz/vue'  // import AnimXZY vue package
+import '@animxyz/core' 
+
 // register vue composition api globally
 import { createApp } from 'vue'
 // import { createRouter, createWebHistory } from 'vue-router'
@@ -24,6 +27,7 @@ import 'a17t'
 import { messages } from './modules/i18n'
 // import GuestLayout from '~/layouts/GuestLayout.vue'
 import AppLayout from '~/layouts/AppLayout.vue'
+import SimpleLayout from '~/layouts/SimpleLayout.vue'
 
 const app = createApp(App)
 
@@ -43,11 +47,13 @@ const head = createHead()
 //   history: createWebHistory(),
 //   routes,
 // })
+app.use(VueAnimXYZ)
 app.use(store)
 app.use(i18n)
 app.use(routes)
 // app.use(router)
 app.use(head)
 app.component('AppLayout', AppLayout)
+app.component('SimpleLayout', SimpleLayout)
 // app.component('GuestLayout', GuestLayout)
 app.mount('#app')

src/router.ts

@@ -14,9 +14,11 @@ import useState from '~/hooks/useState'
 import store from '~/store'
 
 import Home from '~/views/Home.vue'
+import About from '~/views/about.md'
 // import Register from '~/views/auth/Register.vue'
 import Login from '~/views/Login.vue'
 import Logout from '~/views/Logout.vue'
+import Profile from '~/components/Profile.vue'
 
 import { verify_auth, check_credentials } from '~/hooks/utils'
 // import {
@@ -68,7 +70,18 @@ const check_auth = async(to: any, _from: any, next: any) => {
   const auth = localStorage.getItem('auth') || ''
   const check_url = `${window.ROOT_LOCATION || location.origin}/checkin`
   const login_url = `${location.origin}/ui/login`
+  const login_route = '/login'
   const mapkey = to.meta.uimapkey || 'ui'
+	const map_route_to = () => {
+		if (to.meta.requireAuth) {
+			return login_route
+		} 
+		if (to.meta.pubLayout) {
+			to.meta.layout = to.meta.pubLayout
+			to.meta.useNav = !to.meta.useNav 
+		}
+		return 
+	}
   if (auth !== '') {
     const defs = store.state.app_defs.main.get(mapkey)
     if (defs && defs.checkin && useState().checkin.value) {
@@ -81,10 +94,16 @@ const check_auth = async(to: any, _from: any, next: any) => {
       // TODO redirect to a connection error page or consider PWA offline mode
       if (res && res.defs)
         next()
-      else next('/login')
+      else {
+				const route=map_route_to()
+				next(route)
+			}
     }
   }
-  else { next('/login') }
+	else {
+		const route=map_route_to()
+		next(route)
+	}
 }
 
 const get_defs = async(mapkey: string) => {
@@ -123,13 +142,16 @@ const routes: RouteRecordRaw[] = [
     name: 'Home',
     component: Home,
     meta: {
-      requireAuth: true,
+      requireAuth: false,
       layout: 'AppLayout',
+			ctx: 'home',
+//			useNav: false,
+//			pubLayout: 'SimpleLayout',
       mapkey: 'kloud',
       uiMapkey: 'ui',
       rooturl,
     },
-  //  beforeEnter: check_auth,
+    beforeEnter: check_auth,
     // (_to: any, _from: any, next: any) => {
     //   req_lang(lang_url, () => next())
     // },
@@ -146,6 +168,28 @@ const routes: RouteRecordRaw[] = [
     component: Logout,
     meta: { layout: 'empty', rooturl, use_logo: true },
   },
+  {
+    path: '/about',
+    name: 'About',
+		meta: {
+      layout: 'AppLayout',
+			ctx: 'about',
+			rooturl,
+			use_loog: true,
+		},
+    component: About,
+  },
+	{
+    path: '/profile',
+    name: 'Profile',
+		meta: {
+      layout: 'AppLayout',
+			ctx: 'profile',
+			rooturl,
+			use_loog: true,
+		},
+    component: Profile,
+  },
   // {
   //   path: '/auth/register',
   //   name: 'Register',