You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and dots ('.'), can be up to 35 characters long. Letters must be lowercase.
68 lines
2.9 KiB
68 lines
2.9 KiB
<script setup> |
|
import TextInput from '@/Components/TextInput.vue'; |
|
import { Head, Link, useForm } from '@inertiajs/vue3'; |
|
import PrimaryButton from '@/Components/PrimaryButton.vue'; |
|
import axios from 'axios'; |
|
import Layout from '@/Layouts/Layout.vue'; |
|
import InputError from '@/Components/InputError.vue'; |
|
import InputLabel from '@/Components/InputLabel.vue'; |
|
import { computed } from 'vue'; |
|
|
|
const props = defineProps({ |
|
services: { |
|
type: Object, |
|
default: [] |
|
} |
|
}); |
|
|
|
const form = useForm({ |
|
name: "", |
|
service: props.services[0].uuid, |
|
launch: false, |
|
}); |
|
|
|
const formatPort = computed(() => { |
|
let result = "port"; |
|
let nb = props.services.find(s => form.service == s.uuid).ports.split("|").length; |
|
for(let i = 1; i < nb; i++) result = result + "|port"; |
|
result += ")" |
|
return result; |
|
}); |
|
|
|
const submit = () => { |
|
form.post(route("servers.store")); |
|
} |
|
|
|
console.log(); |
|
</script> |
|
|
|
<template> |
|
<Head title="Spawn" /> |
|
<Layout> |
|
<!-- Création de Serveur --> |
|
<section class="py-20 px-6 text-center"> |
|
<h2 class="text-3xl font-bold mb-10 fade-in">Créer Votre Serveur Gratuitement</h2> |
|
<p class="text-gray-300 max-w-3xl mx-auto fade-in">Nos serveurs sont isolés via Docker et offrent un stockage limité à 10Go. Pour économiser les ressources, un serveur inactif pendant une période prolongée sera automatiquement arrêté.</p> |
|
<form @submit.prevent="submit" class="max-w-lg mx-auto bg-gray-800 p-8 rounded-lg shadow-lg slide-up mt-6"> |
|
<div class="mb-3"> |
|
<InputLabel class="block text-left text-gray-300 mb-2" for="name">Name</InputLabel> |
|
<TextInput v-model="form.name" type="text" class="w-full p-3 rounded bg-gray-700 text-white" placeholder="Server name"></TextInput> |
|
<InputError :message="form.errors.name" class="text-left mt-1"></InputError> |
|
</div> |
|
<div class="mb-4"> |
|
<InputLabel class="block text-left text-gray-300 mb-2" for="service">Service</InputLabel> |
|
<select @change="e => form.service = e.target.value" |
|
class="w-full p-3 rounded bg-gray-700 text-white border-gray-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"> |
|
<option v-for="service in props.services" :value="service.uuid">{{ service.name }}</option> |
|
</select> |
|
</div> |
|
<InputError :message="form.errors.service" class="text-left mt-1"></InputError> |
|
<div class="flex items-center mb-6"> |
|
<p class="text-textColor-700 mr-3">Lancer maintenant</p> |
|
<input type="checkbox" class="rounded bg-gray-500" @click="() => form.launch = !form.launch"> |
|
</div> |
|
<button type="submit" class="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg shadow-md scale-hover">Créer le Serveur</button> |
|
</form> |
|
</section> |
|
</Layout> |
|
</template> |