57 lines
2.1 KiB
Vue
57 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
const connections = useConnectionStore()
|
|
const showHostDialog = ref(false)
|
|
const editingHost = ref<any>(null)
|
|
const showGroupDialog = ref(false)
|
|
|
|
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
|
|
}
|
|
</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 or active sessions (sessions added in Phase 2) -->
|
|
<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"
|
|
@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>
|