mirror of
https://github.com/ericasch6/scrum-poker-internal.git
synced 2026-10-13 14:52:09 +00:00
119 lines
3.3 KiB
Vue
119 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { store } from '@/routes/room';
|
|
import { Head, useForm } from '@inertiajs/vue3';
|
|
|
|
|
|
type Deck = {
|
|
id: number,
|
|
name: string,
|
|
cards: Array<{
|
|
key: string,
|
|
label: string,
|
|
}>;
|
|
};
|
|
|
|
const props = defineProps<{
|
|
decks: Deck[];
|
|
defaultPlayerName: string | null;
|
|
}>()
|
|
|
|
const form = useForm({
|
|
title: '',
|
|
player_name: props.defaultPlayerName ?? '',
|
|
deck_id: props.decks[0]?.id ?? null,
|
|
});
|
|
|
|
function submit(): void {
|
|
form.submit(store());
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<Head title="Raum erstellen" />
|
|
<main class="mx-auto max-w-lg p-6">
|
|
<h1 class="mb-6 text-2xl font-bold">
|
|
Scrum Poker Raum erstellen
|
|
</h1>
|
|
<form class="space-y-5" @submit.prevent="submit">
|
|
<div>
|
|
<label for="player_name" class="mb-1 block font-medium">
|
|
Dein Name
|
|
</label>
|
|
|
|
<input id="player_name" v-model="form.player_name" type="text" maxlength="50" required
|
|
class="w-full rounded border p-2" placeholder="Eric">
|
|
|
|
<p v-if="form.errors.player_name" class="mt-1 text-sm text-red-600">
|
|
|
|
{{ form.errors.player_name }}
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
<label for="title" class="mb-1 block font-medium">
|
|
Raumtitle
|
|
</label>
|
|
|
|
<input id="title" v-model="form.title" type="text" maxlength="100" class="w-full rounded border p-2"
|
|
placeholder="Sprint Planning" />
|
|
|
|
<p v-if="form.errors.title" class="mt-1 text-sm text-red-600">
|
|
|
|
{{ form.errors.title }}
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
<label for="deck_id" class="mb-1 block font-medium">
|
|
Kartendeck
|
|
</label>
|
|
|
|
<select id="deck_id" v-model.number="form.deck_id" required class="w-full rounded border p-2">
|
|
<option v-for="deck in decks" :key="deck.id" :value="deck.id">
|
|
{{ deck.name }}
|
|
|
|
</option>
|
|
|
|
</select>
|
|
|
|
<p v-if="form.errors.deck_id" class="mt-1 text-sm text-red-600">
|
|
|
|
{{ form.errors.deck_id }}
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div v-if="form.deck_id" class="rounded border p-3">
|
|
<p class="mb-2 text-sm font-medium">
|
|
Karten:
|
|
</p>
|
|
|
|
<div class="flex flex-wrap gap-2">
|
|
<template v-for="deck in decks" :key="deck.id">
|
|
<span v-for="card in deck.id === form.deck_id ? deck.cards : []" :key="card.key"
|
|
class="rounded border px-3 py-1">
|
|
{{ card.label }}
|
|
</span>
|
|
|
|
</template>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<button type="submit" :disabled="form.processing || decks.length === 0"
|
|
class="w-full rounded bg-blue-600 px-4 py-2 text-white disabled:opacity-50">
|
|
{{ form.processing ? 'Raum wird erstellt' : 'Raum erstellen' }}
|
|
|
|
</button>
|
|
|
|
</form>
|
|
|
|
<p v-if="decks.length === 0" class="mt-4 text-red-600">
|
|
Es wurden noch keine Kartendecks angelegt.
|
|
</p>
|
|
</main>
|
|
</template> |