anbraten/splitt-the-bill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 add env to useDb and apply prettier
tinyedge/deploy Deployed by TinyEdge
Details

Browse Source
This commit is contained in:
anbraten
2026-08-07 13:28:26 +02:00
parent 67727f96ab
commit cbe1b42f6e
54 changed files with 5492 additions and 2406 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/index.vue
+45 -28
View File
@@ -1,30 +1,32 @@
<script setup lang="ts">
const { name, setName } = useIdentity()
const { pots: visitedPots } = useVisitedPots()
const { name, setName } = useIdentity();
const { pots: visitedPots } = useVisitedPots();
const potName = ref('')
const currency = ref('EUR')
const creating = ref(false)
const error = ref('')
const potName = ref('');
const currency = ref('EUR');
const creating = ref(false);
const error = ref('');
const currencies = ['EUR', 'USD', 'GBP', 'CHF']
const currencies = ['EUR', 'USD', 'GBP', 'CHF'];
async function createPot() {
if (!potName.value.trim()) return
creating.value = true
error.value = ''
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
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>
@@ -32,9 +34,7 @@ async function createPot() {
<template>
<div class="space-y-8">
<div class="space-y-1 text-center">
<div class="text-4xl">
🍯
</div>
<div class="text-4xl">🍯</div>
<h1 class="text-2xl font-bold text-stone-900 dark:text-stone-100">
Splitt the Bill
</h1>
@@ -53,8 +53,13 @@ async function createPot() {
: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>
<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>
@@ -62,13 +67,21 @@ async function createPot() {
<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">
<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>
<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"
@@ -76,11 +89,15 @@ async function createPot() {
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>
<label
for="currency"
class="block text-sm font-medium text-stone-700 dark:text-stone-300"
>Currency</label
>
<select
id="currency"
v-model="currency"