feat(market): basic page + submit
This commit is contained in:
@@ -0,0 +1,225 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import { apiService } from "../services/apiService";
|
||||
import type { Market, UserBet } from "../types";
|
||||
|
||||
const props = defineProps<{
|
||||
market: Market;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
refresh: [];
|
||||
}>();
|
||||
|
||||
const selectedOption = ref<string | null>(null);
|
||||
const betAmount = ref<number>(0);
|
||||
const loading = ref(false);
|
||||
const error = ref<string>("");
|
||||
const userInfo = ref<any>(null);
|
||||
const userBets = ref<UserBet[]>([]);
|
||||
const existingBet = ref<UserBet | null>(null);
|
||||
|
||||
const timeRemaining = computed(() => {
|
||||
const endDate = new Date(props.market.end_date).getTime();
|
||||
const now = new Date().getTime();
|
||||
const diff = endDate - now;
|
||||
|
||||
if (diff <= 0) return "Ended";
|
||||
|
||||
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
||||
|
||||
if (days > 0) return `${days}d ${hours}h`;
|
||||
if (hours > 0) return `${hours}h ${minutes}m`;
|
||||
return `${minutes}m`;
|
||||
});
|
||||
|
||||
const statusColor = computed(() => {
|
||||
switch (props.market.status) {
|
||||
case "open":
|
||||
return "badge-success";
|
||||
case "closed":
|
||||
return "badge-warning";
|
||||
case "resolved":
|
||||
return "badge-info";
|
||||
default:
|
||||
return "badge-ghost";
|
||||
}
|
||||
});
|
||||
|
||||
const canBet = computed(() => {
|
||||
return props.market.status === "open" && userInfo.value?.is_authenticated && selectedOption.value && betAmount.value > 0;
|
||||
});
|
||||
|
||||
const placeBet = async () => {
|
||||
if (!selectedOption.value || !betAmount.value) return;
|
||||
|
||||
loading.value = true;
|
||||
error.value = "";
|
||||
|
||||
try {
|
||||
const response = await apiService.placeBet(props.market.uuid, {
|
||||
option_uuid: selectedOption.value,
|
||||
amount: betAmount.value,
|
||||
});
|
||||
|
||||
if (response.status === 200 || response.status === 201) {
|
||||
// Reload user bets to reflect the new bet
|
||||
await loadUserBets();
|
||||
betAmount.value = 0;
|
||||
} else {
|
||||
error.value = response.error || "Failed to place bet";
|
||||
}
|
||||
} catch (e) {
|
||||
error.value = "Error placing bet";
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const initializeUserInfo = async () => {
|
||||
const response = await apiService.getUserInfo();
|
||||
if (response.data) {
|
||||
userInfo.value = response.data;
|
||||
}
|
||||
};
|
||||
|
||||
const loadUserBets = async () => {
|
||||
const response = await apiService.getUserBets();
|
||||
if (response.data) {
|
||||
userBets.value = response.data;
|
||||
// Find if user has a bet on this market
|
||||
existingBet.value = response.data.find(bet => bet.market.uuid === props.market.uuid) || null;
|
||||
if (existingBet.value) {
|
||||
selectedOption.value = existingBet.value.option.uuid;
|
||||
betAmount.value = existingBet.value.amount;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await initializeUserInfo();
|
||||
if (userInfo.value?.is_authenticated) {
|
||||
await loadUserBets();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<!-- Header -->
|
||||
<div class="card-body pb-3">
|
||||
<div class="flex justify-between items-start gap-4">
|
||||
<div class="flex-1">
|
||||
<h2 class="card-title text-2xl mb-2">{{ market.title }}</h2>
|
||||
<p class="text-sm text-base-content/70">{{ market.description }}</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-end gap-2">
|
||||
<div :class="['badge', statusColor, 'text-white']">
|
||||
{{ market.status }}
|
||||
</div>
|
||||
<div class="text-sm text-base-content/60 text-right">
|
||||
<div>{{ timeRemaining }}</div>
|
||||
<div class="text-xs">until close</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider my-0"></div>
|
||||
|
||||
<!-- Options -->
|
||||
<div class="card-body py-4">
|
||||
<div class="grid gap-3" :class="market.options.length > 2 ? 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3' : 'grid-cols-1 md:grid-cols-2'">
|
||||
<div v-for="option in market.options" :key="option.uuid" class="form-control">
|
||||
<label
|
||||
:class="[
|
||||
'label cursor-pointer border rounded-lg p-3 hover:bg-base-200 transition h-full',
|
||||
existingBet && existingBet.option.uuid === option.uuid ? 'border-primary border-2 bg-primary/5' : ''
|
||||
]"
|
||||
>
|
||||
<div class="flex flex-col gap-2 flex-1">
|
||||
<span class="label-text font-medium">{{ option.text }}</span>
|
||||
<span
|
||||
v-if="existingBet && existingBet.option.uuid === option.uuid"
|
||||
class="badge badge-primary badge-sm w-fit"
|
||||
>
|
||||
Your bet: {{ existingBet.amount }} pts
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="radio"
|
||||
:value="option.uuid"
|
||||
v-model="selectedOption"
|
||||
class="radio radio-primary"
|
||||
:disabled="market.status !== 'open' || !!(existingBet && existingBet.option.uuid !== option.uuid)"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bet Input -->
|
||||
<div v-if="market.status === 'open' && userInfo?.is_authenticated && selectedOption" class="card-body py-4">
|
||||
<div class="form-control gap-3">
|
||||
<label class="label">
|
||||
<span class="label-text">
|
||||
<span v-if="existingBet">Increase bet (current: {{ existingBet.amount }} pts)</span>
|
||||
<span v-else>Points to bet</span>
|
||||
</span>
|
||||
</label>
|
||||
<input
|
||||
v-model.number="betAmount"
|
||||
type="number"
|
||||
:placeholder="existingBet ? `Enter amount to increase by` : 'Enter points'"
|
||||
class="input input-bordered"
|
||||
min="1"
|
||||
:disabled="loading"
|
||||
/>
|
||||
|
||||
<div v-if="error" class="alert alert-error">
|
||||
<i class="mdi mdi-alert-circle"></i>
|
||||
<span>{{ error }}</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="placeBet"
|
||||
:disabled="!canBet || loading"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
<span v-if="loading" class="loading loading-spinner loading-sm"></span>
|
||||
<span v-else-if="existingBet">Increase Bet</span>
|
||||
<span v-else>Place Bet</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Show existing bet (market closed/resolved) -->
|
||||
<div v-else-if="market.status !== 'open' && existingBet" class="card-body py-4 bg-base-200">
|
||||
<div class="text-sm">
|
||||
<div class="font-semibold">Your Bet</div>
|
||||
<div class="text-base-content/70 mt-1">
|
||||
Option: <span class="font-semibold">{{ existingBet.option.text }}</span>
|
||||
</div>
|
||||
<div class="text-base-content/70">
|
||||
Amount: <span class="font-semibold">{{ existingBet.amount }} pts</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Result -->
|
||||
<div v-else-if="market.status === 'resolved' && market.winning_option" class="card-body py-4 bg-base-200">
|
||||
<div class="text-sm">
|
||||
<div class="font-semibold" :class="existingBet && existingBet.option.uuid === market.winning_option.uuid ? 'text-success' : 'text-error'">
|
||||
<span v-if="existingBet && existingBet.option.uuid === market.winning_option.uuid">✓ You Won!</span>
|
||||
<span v-else-if="existingBet">✗ You Lost</span>
|
||||
<span v-else>Resolved</span>
|
||||
</div>
|
||||
<div class="text-base-content/70 mt-1">
|
||||
Winner: <span class="font-semibold">{{ market.winning_option.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user