Add team creation, team join and debug login screen

app/pages/index.vue

@@ -1,8 +1,109 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const { loggedIn } = useUserSession();
+const { data, pending, refresh } = await useFetch('/api/home');
+
+watch(loggedIn, () => refresh());
+</script>
 
 <template>
   <h1 class="text-primary text-3xl">{{ $t('hello') }}</h1>
-  <VaButton icon="home" :to="$localePath('/hunt/bremer-stadtrallye-1')" />
+  <VaButton icon="refresh" @click="refresh" :disabled="pending" />
+
+  <div v-if="data">
+    <div v-if="data.own !== null">
+      <h2 class="my-4 text-2xl font-bold">Joined hunts:</h2>
+      <div class="lg-grid-cols-3 grid grid-cols-1 gap-4 md:grid-cols-2">
+        <VaCard
+          v-for="hunt in data.own"
+          :key="hunt.id"
+          stripe
+          :to="$localePath(`/hunt/${sluggy(hunt)}`)"
+        >
+          <VaCardTitle>{{ hunt.name }}</VaCardTitle>
+          <VaCardContent>
+            <h3 class="text-xl">{{ hunt.name }}</h3>
+            {{ hunt.description }}
+            <VaDivider />
+            <div class="flex flex-col gap-2">
+              <p>{{ hunt._count.quests }} Quests</p>
+              <p v-if="hunt.start">
+                Start:
+                {{
+                  $d(hunt.start, {
+                    dateStyle: 'medium',
+                    timeStyle: 'medium'
+                  })
+                }}
+              </p>
+              <p v-if="hunt.end">
+                End:
+                {{
+                  $d(hunt.end, {
+                    dateStyle: 'medium',
+                    timeStyle: 'medium'
+                  })
+                }}
+              </p>
+              <p>{{ hunt._count.teams }} teams joined!</p>
+            </div>
+          </VaCardContent>
+        </VaCard>
+        <VaCard v-if="data.own.length <= 0">
+          <VaCardTitle>No hunt joined yet</VaCardTitle>
+          <VaCardContent>Click on a hunt below and join them!</VaCardContent>
+        </VaCard>
+      </div>
+    </div>
+    <div v-else>
+      <VaButton color="info" icon="login" :to="$localePath(`/login`)"
+        >Login first</VaButton
+      >
+    </div>
+    <div class="mt-8">
+      <VaDivider />
+      <h2 class="my-4 text-2xl font-bold">Open to join hunts:</h2>
+      <div class="lg-grid-cols-3 grid grid-cols-1 gap-4 md:grid-cols-2">
+        <VaCard
+          v-for="hunt in data.others"
+          :key="hunt.id"
+          :to="$localePath(`/hunt/${sluggy(hunt)}`)"
+        >
+          <VaCardTitle>{{ hunt.name }}</VaCardTitle>
+          <VaCardContent>
+            <h3 class="text-xl">{{ hunt.name }}</h3>
+            {{ hunt.description }}
+            <VaDivider />
+            <div class="flex flex-col gap-2">
+              <p>{{ hunt._count.quests }} Quests</p>
+              <p v-if="hunt.start">
+                Start:
+                {{
+                  $d(hunt.start, {
+                    dateStyle: 'medium',
+                    timeStyle: 'medium'
+                  })
+                }}
+              </p>
+              <p v-if="hunt.end">
+                End:
+                {{
+                  $d(hunt.end, {
+                    dateStyle: 'medium',
+                    timeStyle: 'medium'
+                  })
+                }}
+              </p>
+              <p>{{ hunt._count.teams }} teams joined!</p>
+            </div>
+          </VaCardContent>
+        </VaCard>
+        <VaCard v-if="data.others.length <= 0">
+          <VaCardTitle>No hunt created yet</VaCardTitle>
+          <VaCardContent>New hunts will appear soon!</VaCardContent>
+        </VaCard>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>