85 lines
2.9 KiB
Vue
85 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { useTerminal } from '~/composables/useTerminal'
|
|
|
|
const connections = useConnectionStore()
|
|
const showHostDialog = ref(false)
|
|
const editingHost = ref<any>(null)
|
|
const showGroupDialog = ref(false)
|
|
|
|
// Terminal composable for connect-on-click
|
|
const { createTerminal, connectToHost } = useTerminal()
|
|
|
|
onMounted(async () => {
|
|
await Promise.all([connections.fetchHosts(), connections.fetchTree()])
|
|
})
|
|
|
|
function openNewHost(groupId?: number) {
|
|
editingHost.value = groupId ? { groupId } : null
|
|
showHostDialog.value = true
|
|
}
|
|
|
|
function openEditHost(host: any) {
|
|
editingHost.value = host
|
|
showHostDialog.value = true
|
|
}
|
|
|
|
function connectHost(host: any) {
|
|
if (host.protocol !== 'ssh') {
|
|
// RDP support in Phase 3
|
|
return
|
|
}
|
|
// We connect via useTerminal — TerminalInstance will handle the actual mount
|
|
// Here we just trigger SessionContainer to render a new TerminalInstance
|
|
// The terminal composable is invoked inside TerminalInstance on mount
|
|
// We signal the session store directly to open a pending session slot
|
|
// TerminalInstance picks up the hostId prop and opens the WS connection
|
|
const sessions = useSessionStore()
|
|
const pendingId = `pending-${Date.now()}`
|
|
sessions.addSession({
|
|
id: pendingId,
|
|
hostId: host.id,
|
|
hostName: host.name,
|
|
protocol: 'ssh',
|
|
color: host.color,
|
|
active: true,
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex w-full">
|
|
<!-- Sidebar: Group tree -->
|
|
<aside class="w-64 bg-gray-900 border-r border-gray-800 flex flex-col overflow-y-auto shrink-0">
|
|
<div class="p-3 flex items-center justify-between">
|
|
<span class="text-sm font-medium text-gray-400">Connections</span>
|
|
<div class="flex gap-1">
|
|
<button @click="showGroupDialog = true" class="text-xs text-gray-500 hover:text-wraith-400" title="New Group">+ Group</button>
|
|
<button @click="openNewHost()" class="text-xs text-gray-500 hover:text-wraith-400" title="New Host">+ Host</button>
|
|
</div>
|
|
</div>
|
|
<HostTree :groups="connections.groups" @select-host="openEditHost" @new-host="openNewHost" />
|
|
</aside>
|
|
|
|
<!-- Main: host list -->
|
|
<main class="flex-1 p-4 overflow-y-auto">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
|
<HostCard
|
|
v-for="host in connections.hosts"
|
|
:key="host.id"
|
|
:host="host"
|
|
@connect="connectHost(host)"
|
|
@edit="openEditHost(host)"
|
|
@delete="connections.deleteHost(host.id)"
|
|
/>
|
|
</div>
|
|
<p v-if="!connections.hosts.length && !connections.loading" class="text-gray-600 text-center mt-12">
|
|
No hosts yet. Click "+ Host" to add your first connection.
|
|
</p>
|
|
</main>
|
|
|
|
<!-- Dialogs -->
|
|
<HostEditDialog v-model:visible="showHostDialog" :host="editingHost" @saved="connections.fetchHosts()" />
|
|
<GroupEditDialog v-model:visible="showGroupDialog" @saved="connections.fetchTree()" />
|
|
</div>
|
|
</template>
|