120 lines
4.0 KiB
Vue
120 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue";
|
|
import { polylanSubmitterApiGetUserInfo, marketApiListMarkets } from "./api";
|
|
import type { UserInfoOut } from "./api/types.gen";
|
|
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<UserInfoOut | undefined>();
|
|
|
|
const goHome = () => {
|
|
window.location.href = "/";
|
|
};
|
|
|
|
const reloadPage = () => {
|
|
window.location.reload();
|
|
};
|
|
|
|
onMounted(async () => {
|
|
// Fetch user info
|
|
const userResponse = await polylanSubmitterApiGetUserInfo();
|
|
if (userResponse.data) {
|
|
userInfo.value = userResponse.data;
|
|
}
|
|
|
|
// Fetch markets
|
|
const response = await marketApiListMarkets();
|
|
if (response.data) {
|
|
markets.value = response.data as unknown as Market[];
|
|
}
|
|
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">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-2xl font-bold flex items-center gap-2">
|
|
<i class="mdi mdi-heart text-error"></i>
|
|
My Bets
|
|
</h3>
|
|
<div class="text-lg font-semibold">
|
|
<span class="text-primary">{{ userInfo.points }}</span>
|
|
<span class="text-base-content/60 ml-1">pts</span>
|
|
</div>
|
|
</div>
|
|
<UserBets :markets="markets" @refresh="reloadPage" />
|
|
</div>
|
|
|
|
<!-- All Markets Section -->
|
|
<div>
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-2xl font-bold flex items-center gap-2">
|
|
<i class="mdi mdi-list"></i>
|
|
All Markets
|
|
</h3>
|
|
<a v-if="userInfo?.is_superuser" href="/admin/market/market/add/" class="btn btn-sm btn-primary">
|
|
<i class="mdi mdi-plus"></i>
|
|
Create Market
|
|
</a>
|
|
</div>
|
|
|
|
<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>
|