Merge pull request #263 from codersforcauses/i188-display_message_whe…

…n_challenge_is_achieved

I188 display message when challenge is achieved

client/src/components/ChallengeCompletePopupModal.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-dialog v-model="value" :fullscreen="isFullscreen" max-width="500">
+    <v-card>
+      <div style="height: 8px">
+        <v-img src="/images/Footer-min.jpeg" width="100%" alt="red background" cover />
+      </div>
+      <v-card-item class="d-flex justify-center">
+        <v-card-title class="d-flex justify-center"> Congratulations! </v-card-title>
+        <v-card-subtitle>You completed the {{ challengeName }} challenge!</v-card-subtitle>
+      </v-card-item>
+      <v-card-actions class="d-flex justify-end">
+        <v-btn @click="$emit('update:modelValue', !modelValue)">CLOSE</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const isFullscreen = ref(false)
+const emit = defineEmits(['update:modelValue'])
+const props = defineProps(['modelValue', 'challengeName'])
+
+const value = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+</script>
+
+<style scoped></style>

client/src/views/DashboardView.vue

@@ -30,7 +30,7 @@
                     color="primaryRed"
                     @click="dialog = true"
                   />
-                  <MileageModal v-model="dialog" @handle-submit="updateChallengeProgress" />
+                  <MileageModal v-model="dialog" @handle-submit="updateChallengeProgress(true)" />
                 </v-col>
               </v-row>
             </v-container>
@@ -71,19 +71,27 @@
       <v-divider />
     </v-container>
   </div>
+
+  <ChallengeCompletePopupModalVue
+    v-model="isCompleted"
+    :challenge-name="challengeName"
+  ></ChallengeCompletePopupModalVue>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import MileageModal from '../components/MileageModal.vue'
 import { useUserStore } from '@/stores/user'
 import { useMileageStore } from '@/stores/mileage'
+import ChallengeCompletePopupModalVue from '@/components/ChallengeCompletePopupModal.vue'
 
 const userStore = useUserStore()
 const method = ref()
 const loading = ref(true)
 const user = ref()
 const username = ref()
+const isCompleted = ref(false)
+const challengeName = ref('')
 
 const getIconName = (medium: any) => {
   switch (medium) {
@@ -125,8 +133,18 @@ function getRecentMileage() {
   return 0
 }
 
-function updateChallengeProgress() {
+function updateChallengeProgress(checkForCompletion: boolean) {
+  let oldDistance = distanceTravelled.value
   distanceTravelled.value = getRecentMileage()
+
+  if (checkForCompletion) {
+    challenges.value.forEach((challenge) => {
+      if (oldDistance < challenge.length && distanceTravelled.value >= challenge.length) {
+        challengeName.value = challenge.name
+        isCompleted.value = true
+      }
+    })
+  }
 }
 
 onMounted(async () => {
@@ -136,7 +154,7 @@ onMounted(async () => {
       username.value = user.value.username
       getIconName(user.value.travelMethod)
       await mileageStore.getRecentMileage(userStore.user.id)
-      updateChallengeProgress()
+      updateChallengeProgress(false)
     } catch (error) {
       console.log(error)
     }