-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.vue.example
95 lines (85 loc) · 2.66 KB
/
index.vue.example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<script setup lang="ts">
const route = useRoute();
const user = useState("user");
import { useState } from "#app";
import { getUserLikes, addUserLike, removeUserLike } from "~/composables/useLike";
const player = ref(null);
const config = useRuntimeConfig();
const playerLikes = ref(null);
const { data } = await useFetch(
`https://api.balldontlie.io/mlb/v1/teams/${route.params.id}`
// `https://api-web.nhle.com/v1/roster/${route.params.id}/${config.public.SEASON}`
// https://api-web.nhle.com/v1/roster/buf/20232024
);
const playerIds = [...data.value.roster].map((player) => {
return player.person.id;
});
playerLikes.value = await getUserLikes(playerIds.toString());
/* METHODS */
async function likePlayer(id) {
if (!user.value) return useRouter().push("/login");
try {
const like = await addUserLike({ playerId: id, userId: user.value.id });
if (playerLikes.value[id]) {
playerLikes.value[id].push({ ...like });
} else {
playerLikes.value[id] = [{ ...like }];
}
} catch (error) {
console.log(error);
}
}
async function unlikePlayer({ id, playerId }) {
try {
await removeUserLike(id);
const index = playerLikes.value[playerId].findIndex((like) => like.id === id);
playerLikes.value[playerId].splice(index, 1);
} catch (error) {
console.log(error);
}
}
async function showPlayer(id) {
player.value = null;
const res = await Promise.all([
useFetch(`https://statsapi.web.nhl.com/api/v1/people/${id}`),
useFetch(
`https://statsapi.web.nhl.com/api/v1/people/${id}/stats/?stats=statsSingleSeason&season=${config.public.SEASON}`
),
]);
player.value = {
...res[0].data.value.people[0],
stats: res[1].data.value.stats[0].splits[0],
};
}
</script>
<template>
<main>
<Head>
<Script
defer
data-domain="mlbdfs.com"
src="https://plausible.io/js/plausible.js"
/>
</Head>
<section>
<h2 class="text-2xl mt-3 mb-4 text-center">Team Page</h2>
<p class="text-md mb-4 text-center">Select Player to View Stats</p>
<p class="text-md mb-4 text-center">Sign in or register to like and comment on your favorite plays</p>
<off-canvas :player="player" />
<div
class="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-3 px-4"
>
<player-card
v-for="player in data.roster"
:user-id="user ? user.id : undefined"
:player="player"
:likes="playerLikes[player.person.id]"
:key="player.person.id"
@show-player="showPlayer"
@like-player="likePlayer"
@unlike-player="unlikePlayer"
/>
</div>
</section>
</main>
</template>