Repository navigation
Expand file tree
/
Copy pathdefault.vue
More file actions
122 lines (106 loc) · 2.65 KB
/
Copy pathdefault.vue
File metadata and controls
122 lines (106 loc) · 2.65 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<template>
<v-app>
<v-divider v-if="$store.getters.isLocal" class="py-1 warning"></v-divider>
<v-navigation-drawer
v-if="$vuetify.breakpoint.lgAndUp && hasDrawer"
:width="400"
app
fixed
>
<template #prepend>
<v-divider
v-if="$store.getters.isLocal"
class="py-1 warning"
></v-divider>
<message-thread-header></message-thread-header>
<div class="overflow-y-auto v-navigation-drawer__message-thread">
<message-thread></message-thread>
</div>
</template>
</v-navigation-drawer>
<v-main :class="{ 'has-drawer': hasDrawer && $vuetify.breakpoint.lgAndUp }">
<Nuxt />
<toast></toast>
</v-main>
</v-app>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
@Component
export default class DefaultLayout extends Vue {
poller: number | null = null
get hasDrawer(): boolean {
return ['threads', 'threads-id'].includes(this.$route.name ?? '')
}
mounted() {
this.startPoller()
if (this.$route.name !== 'index') {
this.$store.dispatch('setNextRoute', this.$route.path)
this.$router.push({ name: 'index' })
}
}
beforeDestroy(): void {
if (this.poller) {
clearInterval(this.poller)
}
}
startPoller() {
this.poller = window.setInterval(async () => {
await this.$store.dispatch('setPolling', true)
const promises = []
if (this.$store.getters.getAuthUser && this.$store.getters.getOwner) {
promises.push(
this.$store.dispatch('loadThreads'),
this.$store.dispatch('getHeartbeat')
)
}
if (this.$store.getters.getAuthUser) {
promises.push(this.$store.dispatch('loadPhones', true))
}
if (this.$store.getters.hasThread && this.$store.getters.getUser) {
promises.push(
this.$store.dispatch(
'loadThreadMessages',
this.$store.getters.getThread.id
)
)
}
await Promise.all(promises)
setTimeout(() => {
this.$store.dispatch('setPolling', false)
}, 1000)
}, 10000)
}
}
</script>
<style lang="scss">
.v-application {
.w-full {
width: 100%;
}
.h-full {
height: 100%;
}
.has-drawer {
.v-snack {
padding-left: 400px;
}
}
.v-navigation-drawer__message-thread {
height: calc(100vh - 120px);
/* width */
&::-webkit-scrollbar {
width: 8px;
}
/* Track */
&::-webkit-scrollbar-track {
background: #363636;
}
/* Handle */
&::-webkit-scrollbar-thumb {
background: #666666;
border-radius: 8px;
}
}
}
</style>