-
Notifications
You must be signed in to change notification settings - Fork 153
/
terminals.vue
76 lines (69 loc) · 1.99 KB
/
terminals.vue
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
<script setup lang="ts">
definePageMeta({
icon: 'carbon-terminal',
title: 'Terminals',
layout: 'full',
show() {
return !!useTerminals().value?.length
},
badge() {
return useTerminals().value?.filter(i => !i.isTerminated).length
},
})
const terminals = useTerminals()
const route = useRoute()
const router = useRouter()
const selected = computed(() => {
const id = route.query.id as string
return terminals.value?.find(t => t.id === id)
})
function remove(id: string) {
rpc.runTerminalAction(id, 'remove')
router.replace('/modules/terminals')
}
watchEffect(() => {
if (!route.query.id && terminals.value?.length)
router.replace(`/modules/terminals?id=${encodeURIComponent(terminals.value[0].id)}`)
})
</script>
<template>
<div v-if="terminals?.length" h-full w-full of-hidden grid="~ rows-[max-content_1fr_max-content]">
<!-- TODO: Refactor to have general component -->
<div flex="~" border="b base" flex-1 items-center navbar-glass>
<NuxtLink
v-for="t of terminals"
:key="t.id" border="r base"
flex="~ gap-2" items-center px3 py2
:class="t.id === selected?.id ? 'bg-active' : ''"
:to="`/modules/terminals?id=${encodeURIComponent(t.id)}` "
>
<NIcon v-if="t.icon " :icon="t.icon" />
<span :class="t.id === selected?.id ? '' : 'op50'">
{{ t.name }}{{ t.isTerminated ? ' (terminated)' : '' }}
</span>
<NIconButton
v-if="t.isTerminated"
icon="carbon-close" mx--2
@click.stop="remove(t.id)"
/>
</NuxtLink>
</div>
<template v-if="selected">
<TerminalView :id="selected.id" :key="selected.id" />
</template>
<template v-else>
<div p10>
Terminal <code>{{ route.query.id }}</code> not found
</div>
</template>
</div>
<div v-else h-full flex items-center justify-center>
<em op50>No terminal attached</em>
</div>
</template>
<style>
.xterm {
padding-left: 1rem;
padding-right: 1rem;
}
</style>