126 lines
4.1 KiB
Vue
126 lines
4.1 KiB
Vue
<script setup lang="ts">
|
|
const { name, setName } = useIdentity();
|
|
const { pots: visitedPots } = useVisitedPots();
|
|
|
|
const potName = ref('');
|
|
const currency = ref('EUR');
|
|
const creating = ref(false);
|
|
const error = ref('');
|
|
|
|
const currencies = ['EUR', 'USD', 'GBP', 'CHF'];
|
|
|
|
async function createPot() {
|
|
if (!potName.value.trim()) return;
|
|
creating.value = true;
|
|
error.value = '';
|
|
try {
|
|
const pot = await $fetch('/api/pots', {
|
|
method: 'POST',
|
|
body: {
|
|
name: potName.value.trim(),
|
|
currency: currency.value,
|
|
creatorName: name.value,
|
|
},
|
|
});
|
|
await navigateTo(`/p/${pot.slug}/setup`);
|
|
} catch {
|
|
error.value = 'Could not create the Pot. Please try again.';
|
|
} finally {
|
|
creating.value = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-8">
|
|
<div class="space-y-1 text-center">
|
|
<div class="text-4xl">🍯</div>
|
|
<h1 class="text-2xl font-bold text-stone-900 dark:text-stone-100">
|
|
Splitt the Bill
|
|
</h1>
|
|
<p class="text-sm text-stone-500 dark:text-stone-400">
|
|
Track shared costs with friends, the easy way.
|
|
</p>
|
|
</div>
|
|
|
|
<section v-if="visitedPots.length" class="space-y-2">
|
|
<h2 class="text-sm font-semibold text-stone-500 dark:text-stone-400">
|
|
Your Pots
|
|
</h2>
|
|
<ul class="space-y-2">
|
|
<li v-for="pot in visitedPots" :key="pot.slug">
|
|
<NuxtLink
|
|
:to="`/p/${pot.slug}`"
|
|
class="flex items-center justify-between gap-3 rounded-2xl border border-stone-200 bg-white p-3 shadow-sm transition-colors hover:border-orange-300 dark:border-stone-800 dark:bg-stone-900 dark:hover:border-orange-700"
|
|
>
|
|
<span class="font-medium text-stone-900 dark:text-stone-100">{{
|
|
pot.name
|
|
}}</span>
|
|
<span
|
|
class="shrink-0 text-xs font-medium text-stone-400 dark:text-stone-500"
|
|
>{{ pot.currency }}</span
|
|
>
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<NameForm v-if="!name" @submit="setName" />
|
|
|
|
<form
|
|
v-else
|
|
class="space-y-4 rounded-2xl border border-stone-200 bg-white p-5 shadow-sm dark:border-stone-800 dark:bg-stone-900"
|
|
@submit.prevent="createPot"
|
|
>
|
|
<p class="text-sm text-stone-600 dark:text-stone-400">
|
|
Hi {{ name }}! Create a new Pot to start splitting costs.
|
|
</p>
|
|
|
|
<div>
|
|
<label
|
|
for="pot-name"
|
|
class="block text-sm font-medium text-stone-700 dark:text-stone-300"
|
|
>Pot name</label
|
|
>
|
|
<input
|
|
id="pot-name"
|
|
v-model="potName"
|
|
type="text"
|
|
required
|
|
class="mt-1 block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base text-stone-900 shadow-sm placeholder:text-stone-400 focus:border-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-200 dark:border-stone-700 dark:bg-stone-950 dark:text-stone-100 dark:placeholder:text-stone-500 dark:focus:ring-orange-900"
|
|
placeholder="Weekend in Lisbon"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
for="currency"
|
|
class="block text-sm font-medium text-stone-700 dark:text-stone-300"
|
|
>Currency</label
|
|
>
|
|
<select
|
|
id="currency"
|
|
v-model="currency"
|
|
class="mt-1 block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base text-stone-900 shadow-sm focus:border-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-200 dark:border-stone-700 dark:bg-stone-950 dark:text-stone-100 dark:focus:ring-orange-900"
|
|
>
|
|
<option v-for="code in currencies" :key="code" :value="code">
|
|
{{ code }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<p v-if="error" class="text-sm text-rose-600 dark:text-rose-400">
|
|
{{ error }}
|
|
</p>
|
|
|
|
<button
|
|
type="submit"
|
|
:disabled="creating"
|
|
class="w-full rounded-xl bg-orange-500 px-4 py-2 font-medium text-white shadow-sm transition-colors hover:bg-orange-600 active:bg-orange-600 disabled:opacity-50"
|
|
>
|
|
{{ creating ? 'Creating…' : 'Create Pot' }}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</template>
|