Single layout
This commit is contained in:
parent
997d74069d
commit
34668e7c17
|
@ -10,10 +10,13 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { useAppStore } from './store/appStore'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
appStore.fetchMe()
|
||||
onMounted(async () => {
|
||||
await appStore.fetchMe()
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
.alpha-banner {
|
||||
|
|
|
@ -2,10 +2,11 @@
|
|||
<v-card
|
||||
variant="outlined"
|
||||
class="printer-card"
|
||||
:class="{ 'printer-alert': printerAlert }"
|
||||
:to="{ name: 'Printer', params: { serialNumber: printer.serialNumber } }"
|
||||
>
|
||||
<v-row no-gutters wrap>
|
||||
<v-col cols="2" align-self="center">
|
||||
<v-col cols="4" sm="2" align-self="center">
|
||||
<v-icon
|
||||
v-if="printerAlert"
|
||||
class="ma-1 alert"
|
||||
|
@ -15,7 +16,7 @@
|
|||
/>
|
||||
<printer-img class="pa-2" :model="printer.model" />
|
||||
</v-col>
|
||||
<v-col cols="4">
|
||||
<v-col cols="8" sm="4">
|
||||
<v-list density="compact">
|
||||
<v-list-item>
|
||||
<v-list-item-title v-if="printer.friendlyName">
|
||||
|
@ -56,7 +57,7 @@
|
|||
</v-list-item>
|
||||
</v-list>
|
||||
</v-col>
|
||||
<v-col cols="6" align-self="center">
|
||||
<v-col cols="12" sm="6" align-self="center">
|
||||
<v-list density="compact">
|
||||
<v-list-item>
|
||||
<v-list-item-title>
|
||||
|
@ -203,6 +204,10 @@ const printerAlert = computed(() => {
|
|||
border-color: #7a7a7a;
|
||||
}
|
||||
|
||||
.printer-alert {
|
||||
border-color: #fb8c00;
|
||||
}
|
||||
|
||||
.alert {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
9
web/src/layouts/single/Default.vue
Normal file
9
web/src/layouts/single/Default.vue
Normal file
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<v-app>
|
||||
<default-view />
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import DefaultView from './View.vue'
|
||||
</script>
|
55
web/src/layouts/single/View.vue
Normal file
55
web/src/layouts/single/View.vue
Normal file
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<v-app>
|
||||
<v-progress-linear
|
||||
v-if="appStore.loadingPrinters"
|
||||
style="position: fixed; z-index: 9999"
|
||||
color="primary"
|
||||
indeterminate
|
||||
/>
|
||||
<v-app-bar :elevation="0">
|
||||
<v-btn icon="mdi-arrow-left" @click="router.back" />
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
icon="mdi-refresh"
|
||||
class="mr-1"
|
||||
color="primary"
|
||||
title="Atualizar"
|
||||
@click="appStore.fetchPrinters"
|
||||
:disabled="appStore.loadingPrinters"
|
||||
></v-btn>
|
||||
|
||||
<v-chip color="primary">
|
||||
<v-avatar
|
||||
v-if="appStore.me?.thumbnailPhoto"
|
||||
:image="appStore.me?.thumbnailPhoto"
|
||||
start
|
||||
/>
|
||||
{{ appStore.me?.displayName }}
|
||||
</v-chip>
|
||||
<v-btn class="mx-2" @click="logout" icon size="small">
|
||||
<v-icon icon="mdi-logout"></v-icon>
|
||||
</v-btn>
|
||||
</v-app-bar>
|
||||
|
||||
<v-main>
|
||||
<router-view />
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useAppStore } from '@/store/appStore'
|
||||
import { removeJwtToken } from '@/auth'
|
||||
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
function logout() {
|
||||
removeJwtToken()
|
||||
|
||||
router.push({ name: 'Login' })
|
||||
}
|
||||
</script>
|
|
@ -27,6 +27,19 @@ const routes = [
|
|||
component: () =>
|
||||
import(/* webpackChunkName: "home" */ '@/views/Home.vue')
|
||||
},
|
||||
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
name: 'NotFound',
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "notfound" */ '@/views/404.vue')
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/:serialNumber',
|
||||
component: () => import('@/layouts/single/Default.vue'),
|
||||
children: [
|
||||
{
|
||||
path: ':serialNumber',
|
||||
name: 'Printer',
|
||||
|
@ -35,13 +48,6 @@ const routes = [
|
|||
// which is lazy-loaded when the route is visited.
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "home" */ '@/views/Printer.vue')
|
||||
},
|
||||
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
name: 'NotFound',
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "notfound" */ '@/views/404.vue')
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
@ -23,7 +23,6 @@ import { onMounted } from 'vue'
|
|||
const appStore = useAppStore()
|
||||
|
||||
onMounted(async () => {
|
||||
await appStore.fetchMe()
|
||||
await appStore.fetchPrinters()
|
||||
})
|
||||
</script>
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
<template>
|
||||
<div>Hello</div>
|
||||
</template>
|
||||
<script lang="ts" setup></script>
|
||||
|
|
Loading…
Reference in New Issue
Block a user