Files
drop/pages/admin/settings/services.vue
DecDuck 63ac2b8ffc Depot API & v4 (#298)
* feat: nginx + torrential basics & services system

* fix: lint + i18n

* fix: update torrential to remove openssl

* feat: add torrential to Docker build

* feat: move to self hosted runner

* fix: move off self-hosted runner

* fix: update nginx.conf

* feat: torrential cache invalidation

* fix: update torrential for cache invalidation

* feat: integrity check task

* fix: lint

* feat: move to version ids

* fix: client fixes and client-side checks

* feat: new depot apis and version id fixes

* feat: update torrential

* feat: droplet bump and remove unsafe update functions

* fix: lint

* feat: v4 featureset: emulators, multi-launch commands

* fix: lint

* fix: mobile ui for game editor

* feat: launch options

* fix: lint

* fix: remove axios, use $fetch

* feat: metadata and task api improvements

* feat: task actions

* fix: slight styling issue

* feat: fix style and lints

* feat: totp backend routes

* feat: oidc groups

* fix: update drop-base

* feat: creation of passkeys & totp

* feat: totp signin

* feat: webauthn mfa/signin

* feat: launch selecting ui

* fix: manually running tasks

* feat: update add company game modal to use new SelectorGame

* feat: executor selector

* fix(docker): update rust to rust nightly for torrential build (#305)

* feat: new version ui

* feat: move package lookup to build time to allow for deno dev

* fix: lint

* feat: localisation cleanup

* feat: apply localisation cleanup

* feat: potential i18n refactor logic

* feat: remove args from commands

* fix: lint

* fix: lockfile

---------

Co-authored-by: Aden Lindsay <140392385+AdenMGB@users.noreply.github.com>
2026-01-13 15:32:39 +11:00

92 lines
2.8 KiB
Vue

<template>
<div class="max-w-xl">
<div
class="divide-y divide-white/10 overflow-hidden rounded-lg bg-zinc-900 outline -outline-offset-1 outline-white/20 sm:grid sm:grid-cols-2 sm:divide-y-0"
>
<div
v-for="(service, serviceIdx) in services"
:key="service.name"
:class="[
serviceIdx === 0
? 'rounded-tl-lg rounded-tr-lg sm:rounded-tr-none'
: '',
serviceIdx === 1 ? 'sm:rounded-tr-lg' : '',
serviceIdx === services.length - 2 ? 'sm:rounded-bl-lg' : '',
serviceIdx === services.length - 1
? 'rounded-br-lg rounded-bl-lg sm:rounded-bl-none'
: '',
'group relative border-white/10 bg-zinc-800/50 p-6 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-500 sm:odd:not-nth-last-2:border-b sm:even:border-l sm:even:not-last:border-b',
]"
>
<div>
<span
:class="[
serviceMetadata[service.name].iconBackground,
serviceMetadata[service.name].iconForeground,
'inline-flex rounded-lg p-3',
]"
>
<component
:is="serviceMetadata[service.name].icon"
class="size-6"
aria-hidden="true"
/>
</span>
</div>
<div class="mt-8">
<h3 class="text-base font-semibold text-white">
<a :href="service.href" class="focus:outline-hidden">
<!-- Extend touch target to entire panel -->
<span class="absolute inset-0" aria-hidden="true"></span>
{{ serviceMetadata[service.name].title }}
</a>
</h3>
<p class="mt-2 text-sm text-zinc-400">
{{ serviceMetadata[service.name].description }}
</p>
</div>
<span
class="pointer-events-none absolute top-6 right-6"
aria-hidden="true"
>
<CheckIcon
:class="[
'size-6',
service.healthy ? 'text-green-600' : 'text-zinc-500',
]"
/>
</span>
</div>
</div>
</div>
</template>
<script setup>
import { ArrowDownTrayIcon, CheckIcon } from "@heroicons/vue/24/outline";
definePageMeta({
layout: "admin",
});
const services = await $dropFetch("/api/v1/admin/services");
const { t } = useI18n();
const serviceMetadata = computed(() => ({
torrential: {
title: t("services.torrential.title"),
description: t("services.torrential.description"),
iconForeground: "text-blue-400",
iconBackground: "bg-blue-500/10",
icon: ArrowDownTrayIcon,
},
nginx: {
title: t("services.nginx.title"),
description: t("services.nginx.description"),
iconForeground: "text-green-400",
iconBackground: "bg-green-500/10",
icon: ArrowDownTrayIcon,
},
}));
</script>