Single layout
This commit is contained in:
parent
997d74069d
commit
34668e7c17
|
@ -10,10 +10,13 @@
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useAppStore } from './store/appStore'
|
import { useAppStore } from './store/appStore'
|
||||||
|
import { onMounted } from 'vue'
|
||||||
|
|
||||||
const appStore = useAppStore()
|
const appStore = useAppStore()
|
||||||
|
|
||||||
appStore.fetchMe()
|
onMounted(async () => {
|
||||||
|
await appStore.fetchMe()
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
.alpha-banner {
|
.alpha-banner {
|
||||||
|
|
|
@ -2,10 +2,11 @@
|
||||||
<v-card
|
<v-card
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
class="printer-card"
|
class="printer-card"
|
||||||
|
:class="{ 'printer-alert': printerAlert }"
|
||||||
:to="{ name: 'Printer', params: { serialNumber: printer.serialNumber } }"
|
:to="{ name: 'Printer', params: { serialNumber: printer.serialNumber } }"
|
||||||
>
|
>
|
||||||
<v-row no-gutters wrap>
|
<v-row no-gutters wrap>
|
||||||
<v-col cols="2" align-self="center">
|
<v-col cols="4" sm="2" align-self="center">
|
||||||
<v-icon
|
<v-icon
|
||||||
v-if="printerAlert"
|
v-if="printerAlert"
|
||||||
class="ma-1 alert"
|
class="ma-1 alert"
|
||||||
|
@ -15,7 +16,7 @@
|
||||||
/>
|
/>
|
||||||
<printer-img class="pa-2" :model="printer.model" />
|
<printer-img class="pa-2" :model="printer.model" />
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="4">
|
<v-col cols="8" sm="4">
|
||||||
<v-list density="compact">
|
<v-list density="compact">
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-list-item-title v-if="printer.friendlyName">
|
<v-list-item-title v-if="printer.friendlyName">
|
||||||
|
@ -56,7 +57,7 @@
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
</v-list>
|
</v-list>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="6" align-self="center">
|
<v-col cols="12" sm="6" align-self="center">
|
||||||
<v-list density="compact">
|
<v-list density="compact">
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-list-item-title>
|
<v-list-item-title>
|
||||||
|
@ -203,6 +204,10 @@ const printerAlert = computed(() => {
|
||||||
border-color: #7a7a7a;
|
border-color: #7a7a7a;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.printer-alert {
|
||||||
|
border-color: #fb8c00;
|
||||||
|
}
|
||||||
|
|
||||||
.alert {
|
.alert {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
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: () =>
|
component: () =>
|
||||||
import(/* webpackChunkName: "home" */ '@/views/Home.vue')
|
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',
|
path: ':serialNumber',
|
||||||
name: 'Printer',
|
name: 'Printer',
|
||||||
|
@ -35,13 +48,6 @@ const routes = [
|
||||||
// which is lazy-loaded when the route is visited.
|
// which is lazy-loaded when the route is visited.
|
||||||
component: () =>
|
component: () =>
|
||||||
import(/* webpackChunkName: "home" */ '@/views/Printer.vue')
|
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()
|
const appStore = useAppStore()
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await appStore.fetchMe()
|
|
||||||
await appStore.fetchPrinters()
|
await appStore.fetchPrinters()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
<template>
|
<template>
|
||||||
<div>Hello</div>
|
<div>Hello</div>
|
||||||
</template>
|
</template>
|
||||||
|
<script lang="ts" setup></script>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user