LibreCloud/zterton-status
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore: remove all AppLayout

Browse Source
This commit is contained in:
Jesús Pérez Lorenzo 2021-10-14 15:49:52 +01:00
parent fcb30e52fd
commit d9f96c980a
1 changed files with 0 additions and 300 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

300
src/layouts/_AppLayout.vue
View File

@ -1,300 +0,0 @@
<template>
<div v-if="isCheckin">
<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
v-show="useDragHeader && show_top_pane"
id="pane-top"
:style="`height: ${head_data.h}px`"
class="eexpandable p-3 z-999 bg-gray-200 text-gray-100 dark:bg-gray-800 dark:text-white absolute "
>
<Backdrop :show="show_top_pane" :blur="14" :css="`height: ${head_data.h}px;`" @close="close_top_pane" />
<div class="bg-gray-100 text-gray-900 w-auto p-8 absolute top-2" :class="show_top_pane ? 'z-9999' : ''">
<keep-alive>
<component :is="topPaneComponent" />
</keep-alive>
</div>
</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 -->
<draggable
v-if="useDragHeader"
@start="start_header"
@end="end_header"
>
<header class="flex-shrink-0 border-b dark:border-gray-700 border-gray-200">
<Navbar />
</header>
</draggable>
<div v-else>
<header class="flex-shrink-0 border-b dark:border-gray-700 border-gray-200">
<Navbar />
</header>
</div>
<!-- Main content -->
<main class="flex-1 max-h-full p-1 overflow-hidden overflow-y-scroll dark:bg-cool-gray-800 dark:text-white">
<slot />
</main>
<!-- Main footer -->
<draggable
@start="start_footer"
@end="end_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 === 'a-click'"
:href="itm.link"
class=""
>
{{ t(itm.title) }}
</a>
<router-link
v-if="itm && itm.type === 'router-link'"
:title="t(itm.title)"
:to="{ name: itm.name_to }"
class="flex items-center"
>
{{ 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 === 'a-click'"
:href="itm.link"
class=""
>
<span class="hidden text-sm md:block mr-2"> {{ t(itm.title) }} </span>
<span v-if="itm.img" class="w-11 h-11 dark:bg-gray-200 rounded-full mr-2">
<dsc-logo v-if="itm.img === 'dsc'" />
<img v-else :src="itm.img">
</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 rounded-full 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>
</router-link>
</span>
</div>
</footer>
</draggable>
</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
v-show="useDragFooter && show_bottom_pane"
id="pane-bottom"
:style="`height: ${bottom_data.h}px; top: ${bottom_data.y}px;`"
class="eexpandable p-3 z-999 bg-gray-200 text-gray-100 dark:bg-gray-800 dark:text-white absolute"
>
<Backdrop :show="show_bottom_pane" :blur="14" :css="`height: 100%$; top: ${bottom_data.y}px;`" @close="close_bottom_pane" />
<div class="bg-gray-100 w-screen text-gray-900 my-5 pr-5 z-999 absolute top-2">
<keep-alive>
<component :is="bottomPaneComponent" />
</keep-alive>
</div>
</div>
</div>
</div>
</template>
<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 { toRefs, onMounted, onUnmounted, ref, computed } from 'vue'
import { VueDraggableNext as draggable } from 'vue-draggable-next'
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 Backdrop from '@/global/Backdrop.vue'
import ReqErrorView from '@/ReqErrorView.vue'
import { useI18n } from 'vue-i18n'
import { useStore } from 'vuex'
import useState from '~/hooks/useState'
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, useDragHeader, useDragFooter } = 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, locale } = 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(() => {
return defs.value && defs.value.footer && defs.value.footer.left_items ? defs.value.footer.left_items : []
})
const right_items = computed(() => {
return defs.value && defs.value.footer && defs.value.footer.right_items ? defs.value.footer.right_items : []
})
onMounted(() => {
window.addEventListener('resize', checkScreen)
isCheckin.value = false
})
const head_data = ref({ x: 0, y: 0, h: 0 })
const start_header = (ev: any) => {
head_data.value = { x: ev.originalEvent.pageX, y: ev.originalEvent.pageY, h: 0 }
// console.log(`start header: ${ev.originalEvent.clientX} (${ev.originalEvent.screenX}) ${ev.originalEvent.pageX} / ${ev.originalEvent.clientY} (${ev.originalEvent.screenY}) ${ev.originalEvent.pageY} `)
}
const end_header = (ev: any) => {
// console.log(`end header: ${ev.originalEvent.clientX} (${ev.originalEvent.screenX}) ${ev.originalEvent.pageX} / ${ev.originalEvent.clientY} (${ev.originalEvent.screenY}) ${ev.originalEvent.pageY} `)
// console.log(`target: ${head_data.value.x - ev.originalEvent.pageX} ${ev.originalEvent.pageY - head_data.value.y} `)
head_data.value.h = ev.originalEvent.pageY - head_data.value.y
// console.log(head_data.value.h)
show_top_pane.value = true
}
const close_top_pane = () => {
show_top_pane.value = false
}
const bottom_data = ref({ x: 0, y: 0, h: 0 })
const start_footer = (ev: any) => {
if (useDragFooter.value)
bottom_data.value = { x: ev.originalEvent.pageX, y: ev.originalEvent.pageY, h: 0 }
}
const end_footer = (ev: any) => {
if (useDragFooter.value) {
// console.log(`end footer: ${ev.originalEvent.clientX} (${ev.originalEvent.screenX}) ${ev.originalEvent.pageX} / ${ev.originalEvent.clientY} (${ev.originalEvent.screenY}) ${ev.originalEvent.pageY} `)
// console.log(`target: ${bottom_data.value.x - ev.originalEvent.pageX} ${ev.originalEvent.pageY - bottom_data.value.y} `)
bottom_data.value.h = (ev.originalEvent.pageY - bottom_data.value.y) * -1
bottom_data.value.y = ev.originalEvent.pageY
// console.log(bottom_data.value.h)
// console.log(bottom_data.value.y)
show_bottom_pane.value = true
}
}
const close_bottom_pane = () => {
show_bottom_pane.value = false
}
const topPaneComponent = computed(() => useComponent().topPaneComponent.value)
const bottomPaneComponent = computed(() => useComponent().bottomPaneComponent.value)
const root_url = router.currentRoute.value.meta.rooturl || ''
onMounted(() => {
})
onUnmounted(() => {
window.removeEventListener('resize', checkScreen)
})
</script>
<style scoped>
.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>