forked from NdoleStudio/httpsms
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdefault.vue
More file actions
121 lines (107 loc) · 2.76 KB
/
Copy pathdefault.vue
File metadata and controls
121 lines (107 loc) · 2.76 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
<script setup lang="ts">
import Pusher from 'pusher-js'
import { useDisplay } from 'vuetify'
import { setAuthHeader } from '~/composables/useApi'
import { getAuth } from 'firebase/auth'
const route = useRoute()
const config = useRuntimeConfig()
const { lgAndUp } = useDisplay()
const authStore = useAuthStore()
const phonesStore = usePhonesStore()
const threadsStore = useThreadsStore()
const appStore = useAppStore()
let poller: ReturnType<typeof setInterval> | null = null
let canPoll = false
const hasDrawer = computed(() => {
return ['threads', 'threads-id'].includes((route.name as string) ?? '')
})
onMounted(() => {
setTimeout(() => {
const pusher = new Pusher(config.public.pusherKey as string, {
cluster: config.public.pusherCluster as string,
})
if (authStore.authUser) {
const channel = pusher.subscribe(authStore.authUser.id)
channel.bind('phone.updated', () => {
canPoll = true
})
}
startPoller()
}, 10_000)
})
onBeforeUnmount(() => {
if (poller) clearInterval(poller)
})
function startPoller() {
poller = setInterval(async () => {
if (!canPoll || authStore.authUser == null) return
appStore.setPolling(true)
if (authStore.authUser && phonesStore.owner) {
const auth = getAuth()
const token = await auth.currentUser?.getIdToken()
if (token) setAuthHeader(token)
await Promise.all([
phonesStore.loadPhones(true),
threadsStore.loadThreads(),
phonesStore.getHeartbeat(),
])
}
canPoll = false
setTimeout(() => appStore.setPolling(false), 1000)
}, 10_000)
}
</script>
<template>
<v-app>
<v-navigation-drawer v-if="lgAndUp && hasDrawer" :width="400" permanent>
<template #prepend>
<div v-if="appStore.isLocal" class="py-2 bg-warning" />
<MessageThreadHeader />
<div class="overflow-y-auto v-navigation-drawer__message-thread">
<MessageThread />
</div>
</template>
</v-navigation-drawer>
<v-main :class="{ 'has-drawer': hasDrawer && lgAndUp }">
<AppToast />
<slot v-if="authStore.authStateChanged" />
<LoadingDashboard v-else />
</v-main>
</v-app>
</template>
<style lang="scss">
.v-application {
.w-full {
width: 100%;
}
.h-full {
height: 100%;
}
.has-drawer {
.v-snackbar {
padding-left: 400px;
}
}
.v-navigation-drawer__message-thread {
height: calc(100vh - 120px);
&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-track {
background: #363636;
}
&::-webkit-scrollbar-thumb {
background: #666666;
border-radius: 8px;
}
}
.hover\:text-decoration-underline {
&:hover {
text-decoration: underline;
}
}
code.hljs {
font-size: 16px;
}
}
</style>