56 lines
1.9 KiB
Vue
56 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { api, type Project } from '../api'
|
|
|
|
const { t } = useI18n()
|
|
|
|
const projects = ref<Project[]>([])
|
|
const error = ref<string | null>(null)
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
projects.value = await api.projects()
|
|
} catch (e: unknown) {
|
|
error.value = e instanceof Error ? e.message : String(e)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<h1 class="text-xl font-semibold text-gray-100 mb-6">{{ t('settings.title') }}</h1>
|
|
|
|
<div v-if="error" class="text-red-400 mb-4">{{ error }}</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="text-left text-xs text-gray-500 border-b border-gray-800">
|
|
<th class="pb-2 pr-6 font-medium">Name</th>
|
|
<th class="pb-2 pr-6 font-medium font-mono">ID</th>
|
|
<th class="pb-2 pr-6 font-medium">Mode</th>
|
|
<th class="pb-2 pr-6 font-medium">Status</th>
|
|
<th class="pb-2 font-medium"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="project in projects" :key="project.id" class="border-b border-gray-800 hover:bg-gray-800/30">
|
|
<td class="py-2 pr-6 text-gray-100">{{ project.name }}</td>
|
|
<td class="py-2 pr-6 text-gray-500 font-mono text-xs">{{ project.id }}</td>
|
|
<td class="py-2 pr-6 text-gray-400 text-xs">{{ project.execution_mode ?? '—' }}</td>
|
|
<td class="py-2 pr-6 text-gray-400 text-xs">{{ project.status }}</td>
|
|
<td class="py-2">
|
|
<router-link
|
|
:to="`/project/${project.id}?tab=settings`"
|
|
class="px-3 py-1 text-xs bg-gray-800 text-gray-300 border border-gray-700 rounded hover:bg-gray-700 no-underline"
|
|
>
|
|
{{ t('settings.open_settings') }}
|
|
</router-link>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|