109 lines
3.9 KiB
Vue
109 lines
3.9 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>
|