rocket-app/website/src/pages/ChallengesView.vue at b54155b781b0a3bccf9af14ad4d60984ff56d969 · RealTeamRocket/rocket-app · GitHub

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
96
97
98
99
100
101
102
<template>
  <div class="page-wrapper">
    <Navbar />
    <div class="challenges-view">
      <h1>Challenges</h1>
      <ChallengeList :challenges="challenges"
        @complete="handleCompleteChallenge"
      @invite="handleInvite"/>
    <FriendInvitePopup
      v-if="showInvitePopup"
      :challenge-id="inviteChallengeId!"
      @close="showInvitePopup = false"/>
  </div>
  <Footer />
  <DailyChallengeProgress :completed="completedCount" :total="totalCount" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Navbar from '@/components/Navbar.vue';
import ChallengeList from '@/components/challenges/ChallengeList.vue';
import DailyChallengeProgress from '@/components/challenges/DailyChallengeProgress.vue';
import FriendInvitePopup from '@/components/challenges/FriendInvitePopup.vue';
import backendApi from '@/api/backend-api';
import Footer from '@/components/footer/Footer.vue'

const challenges = ref<{ id: string; text: string; points: number }[]>([]);
const completedCount = ref(0);
const totalCount = ref(0);
const showInvitePopup = ref(false);
const inviteChallengeId = ref<string | null>(null);

const fetchChallenges = async () => {
  try {
    const response = await backendApi.getChallenges();
    challenges.value = response.data;
  } catch (e: any) {
    if (e.response && e.response.status === 404) {
      challenges.value = [];
    } else {
      console.error('Failed to load challenges', e);
    }
  }
};

const fetchProgress = async () => {
  try {
    const response = await backendApi.getChallengeProgress();
    completedCount.value = response.data.completed;
    totalCount.value = response.data.total;
  } catch (e: any) {
    completedCount.value = 0;
    totalCount.value = 0;
    console.error('Failed to load challenge progress', e);
  }
};

const handleCompleteChallenge = async (payload: { id: string, points: number }) => {
  try {
    await backendApi.completeChallenge(payload.id, payload.points);
    challenges.value = challenges.value.filter(c => c.id !== payload.id);
    await fetchChallenges();
    await fetchProgress();
  } catch (e) {
    console.error('Failed to complete challenge', e);
  }
};

const handleInvite = (challengeId: string) => {
  inviteChallengeId.value = challengeId;
  showInvitePopup.value = true;
};

onMounted(async () => {
  await fetchChallenges();
  await fetchProgress();
});

</script>

<style scoped>
.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Make space for the fixed progress bar */
  padding-bottom: 3.5rem;
}
.challenges-view {
  flex: 1;
  padding: 2rem;
}
.challenges-view h1 {
  text-align: center;
}
.footer {
  margin-top: auto;
  /* Add extra bottom padding so it's scrollable above the progress bar */
  padding-bottom: 2.5rem;
}
</style>