134 lines
3.9 KiB
Vue
134 lines
3.9 KiB
Vue
<script setup>
|
|
import RadioButton from '@/components/RadioButton.vue';
|
|
import { Button } from '@/components/ui/button';
|
|
import AppLayout from '@/layouts/AppLayout.vue';
|
|
import { Head, router, useForm } from '@inertiajs/vue3';
|
|
import { watch } from 'vue';
|
|
|
|
const props = defineProps({
|
|
locations: Array,
|
|
serverTypes: Array,
|
|
images: Array,
|
|
});
|
|
|
|
const form = useForm({
|
|
provider: 'hetzner',
|
|
location: null,
|
|
server_type: null,
|
|
image: null,
|
|
});
|
|
|
|
const serverProviders = [
|
|
{
|
|
name: 'Hetzner',
|
|
value: 'hetzner',
|
|
},
|
|
{
|
|
name: 'Digital Ocean',
|
|
value: 'digital-ocean',
|
|
disabled: true,
|
|
},
|
|
];
|
|
|
|
watch(
|
|
() => form.provider,
|
|
(provider) => {
|
|
loadLocations();
|
|
},
|
|
);
|
|
|
|
watch (
|
|
() => form.location,
|
|
(location) => {
|
|
loadServerTypes();
|
|
}
|
|
)
|
|
|
|
loadLocations();
|
|
loadServerTypes();
|
|
|
|
function loadLocations() {
|
|
if (form.provider && !props.locations) {
|
|
router.reload({
|
|
only: ['locations'],
|
|
data: {
|
|
provider: form.provider,
|
|
},
|
|
async: true,
|
|
});
|
|
}
|
|
}
|
|
|
|
function loadServerTypes() {
|
|
if (form.location && !props.serverTypes) {
|
|
router.reload({
|
|
only: ['serverTypes', 'images'],
|
|
data: {
|
|
provider: form.provider,
|
|
location: form.location,
|
|
},
|
|
async: true,
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Create Server" />
|
|
|
|
<AppLayout
|
|
:breadcrumbs="[
|
|
{
|
|
title: 'Servers',
|
|
href: route('servers.index', {
|
|
organisation: $page.props.organisation.id,
|
|
}),
|
|
},
|
|
{
|
|
title: 'Create',
|
|
}
|
|
]"
|
|
>
|
|
<div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
|
|
<div class="flex flex-wrap gap-2">
|
|
<RadioButton
|
|
v-for="serverProvider in serverProviders"
|
|
v-model="form.provider"
|
|
:value="serverProvider.value"
|
|
:disabled="serverProvider.disabled"
|
|
name="server-provider"
|
|
>
|
|
{{ serverProvider.name }}
|
|
</RadioButton>
|
|
</div>
|
|
<div v-if="form.provider" class="flex flex-wrap gap-2">
|
|
<RadioButton v-for="location in locations" v-model="form.location" :value="location.id" :disabled="location.disabled" name="location">
|
|
{{ location.city }}
|
|
</RadioButton>
|
|
</div>
|
|
<div v-if="form.location" class="grid gap-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
|
<RadioButton
|
|
v-for="serverType in serverTypes?.sort((a, b) => a.cores - b.cores) ?? []"
|
|
v-model="form.server_type"
|
|
:value="serverType.id"
|
|
:disabled="serverType.disabled"
|
|
name="server-type"
|
|
>
|
|
<h5 class="text-lg font-semibold uppercase tracking-tight">{{ serverType.name }}</h5>
|
|
<p class="text-sm opacity-60">
|
|
{{ serverType.cores }} cores • {{ serverType.memory }} GB RAM • {{ serverType.disk }} GB disk
|
|
</p>
|
|
</RadioButton>
|
|
</div>
|
|
<div v-if="form.server_type" class="flex flex-wrap gap-2">
|
|
<RadioButton v-for="image in images" v-model="form.image" :value="image.id" :disabled="image.disabled" name="image">
|
|
<h5 class="text-lg font-semibold tracking-tight">{{ image.name }}</h5>
|
|
</RadioButton>
|
|
</div>
|
|
<div class="flex items-center justify-end">
|
|
<Button @click="form.post(route('servers.store', { organisation: $page.props.organisation.id }))">Submit</Button>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|