feat(market): basic page + submit

2026-05-23 18:30:50 +02:00
parent ce30539808
commit f7c7eba4da
17 changed files with 866 additions and 9 deletions
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { apiService } from "./services/apiService";
+import type { Market } from "./types";
+import MarketCard from "./components/MarketCard.vue";
+import UserBets from "./components/UserBets.vue";
+
+const markets = ref<Market[]>([]);
+const loading = ref(true);
+const userInfo = ref<any>(null);
+
+const goHome = () => {
+  window.location.href = "/";
+};
+
+const reloadPage = () => {
+  window.location.reload();
+};
+
+onMounted(async () => {
+  // Fetch user info
+  const userResponse = await apiService.getUserInfo();
+  if (userResponse.data) {
+    userInfo.value = userResponse.data;
+  }
+
+  // Fetch markets
+  const response = await apiService.getMarkets();
+  if (response.data) {
+    markets.value = response.data;
+  }
+  loading.value = false;
+});
+</script>
+
+<template>
+  <div class="min-h-screen bg-base-200">
+    <!-- Header -->
+    <div class="navbar bg-base-100 shadow-lg">
+      <div class="container min-w-3/4 mx-auto w-full flex items-center gap-4">
+        <button @click="goHome" class="btn btn-primary btn-sm">
+          <i class="mdi mdi-arrow-left"></i>
+          Back
+        </button>
+        <h1 class="text-xl font-bold">Market</h1>
+        <div class="flex-1"></div>
+        <div class="flex items-center gap-4">
+          <div v-if="userInfo?.is_authenticated" class="flex items-center gap-2">
+            <div class="text-sm">
+              <span class="font-medium">{{ userInfo.username }}</span>
+              <span v-if="userInfo.is_superuser" class="badge badge-warning badge-xs ml-1">Admin</span>
+            </div>
+          </div>
+          <div v-else class="text-sm text-base-content/70">Not logged in</div>
+          <a href="/api/docs" class="btn btn-xs">API docs</a>
+          <a href="/admin" class="btn btn-xs btn-warning">Admin panel</a>
+        </div>
+      </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="container min-w-3/4 mx-auto px-4 py-8">
+      <!-- Header -->
+      <div class="mb-8">
+        <h2 class="text-3xl font-bold mb-2">Market</h2>
+        <p class="text-base-content/70">Place your bets on upcoming events</p>
+      </div>
+
+      <!-- Loading -->
+      <div v-if="loading" class="flex justify-center py-20">
+        <span class="loading loading-spinner loading-lg"></span>
+      </div>
+
+      <!-- Content -->
+      <template v-else>
+        <div class="space-y-8">
+          <!-- My Bets Section -->
+          <div v-if="userInfo?.is_authenticated">
+            <h3 class="text-2xl font-bold mb-4 flex items-center gap-2">
+              <i class="mdi mdi-heart text-error"></i>
+              My Bets
+            </h3>
+            <UserBets :markets="markets" @refresh="reloadPage" />
+          </div>
+
+          <!-- All Markets Section -->
+          <div>
+            <h3 class="text-2xl font-bold mb-4 flex items-center gap-2">
+              <i class="mdi mdi-list"></i>
+              All Markets
+            </h3>
+
+            <div v-if="markets.length === 0" class="alert">
+              <i class="mdi mdi-information mr-2"></i>
+              <span>No markets available</span>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              <MarketCard
+                v-for="market in markets"
+                :key="market.uuid"
+                :market="market"
+                @refresh="reloadPage"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>