Skip to content

Commit

Permalink
feat(Challenge Page): added more content, and started split in compon…
Browse files Browse the repository at this point in the history
…ents
  • Loading branch information
TTalex committed Jan 10, 2025
1 parent 0ef5847 commit d702e49
Showing 4 changed files with 202 additions and 111 deletions.
46 changes: 46 additions & 0 deletions src/components/ChallengeExample.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<template>
<v-row v-if="priceExample">
<v-col>
<h2 class="text-h6 mb-1">
A good example of proof to photograph
</h2>
<v-img :src="priceExample.proofUrl" style="max-height: 200px" />
</v-col>
<v-col>
<h2 class="text-h6 mb-1">
A good example of price to add
</h2>
<PriceCard :price="priceExample" :product="priceExample.product" elevation="1" />
</v-col>
</v-row>
</template>

<script>
import { defineAsyncComponent } from 'vue'
import api from '../services/api.js'
export default {
components: {
PriceCard: defineAsyncComponent(() => import('./PriceCard.vue')),
},
props: {
exampleId: {
type: Number,
default: () => {}
}
},
data() {
return {
priceExample: null
}
},
mounted() {
api.getPriceById(this.exampleId)
.then((data) => {
data.proofUrl = `${import.meta.env.VITE_OPEN_PRICES_APP_URL}/img/${data.proof.file_path}`
this.priceExample = data
})
}
}
</script>
58 changes: 58 additions & 0 deletions src/components/ChallengeTimeline.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<template>
<v-timeline direction="horizontal" truncate-line="both">
<v-timeline-item dot-color="success">
<div class="text-h6">
Start
</div>
<template #opposite>
{{ challenge.startDate }}
</template>
</v-timeline-item>
<v-timeline-item dot-color="error">
<template #opposite>
<div class="text-h6">
End
</div>
</template>
{{ challenge.endDate }}
</v-timeline-item>
</v-timeline>
<v-progress-linear
color="info"
height="25"
:model-value="progress"
striped
style="width: 50%; margin-left: 25%; top: -55px; margin-top: -25px"
>
<strong>{{ daysLeftText }}</strong>
</v-progress-linear>
</template>

<script>
export default {
props: {
challenge: {
type: Object,
default: () => {}
}
},
computed: {
nbDays() {
return Math.round((new Date(this.challenge.endDate) - new Date(this.challenge.startDate)) / (1000 * 60 * 60 * 24))
},
todayIndex() {
return Math.round((new Date() - new Date(this.challenge.startDate)) / (1000 * 60 * 60 * 24))
},
daysLeftText() {
const daysLeft = this.nbDays - this.todayIndex
if (daysLeft <= 0) return "Challenge over"
if (daysLeft >= this.nbDays) return "Not started"
return `${daysLeft} days left`
},
progress() {
return Math.min(100, this.todayIndex * 100 / this.nbDays)
}
}
}
</script>

38 changes: 38 additions & 0 deletions src/components/ChallengeTopContributors.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<template>
<h2 class="text-h6 mb-1">
Top 5 contributor
</h2>
<v-list density="compact">
<v-list-item
v-for="(contributor, i) in topContributors.slice(0, 5)"
:key="i"
:value="contributor"
color="primary"
>
<template #prepend>
{{
i === 0 ? '🥇' :
i === 1 ? '🥈' :
i === 2 ? '🥉' :
'🏅'
}}
</template>

<v-list-item-title>
{{ i+1 }}. {{ contributor.user_id }}, {{ contributor.price_count }} prices
</v-list-item-title>
</v-list-item>
</v-list>
</template>

<script>
export default {
props: {
topContributors: {
type: Array,
default: () => []
}
},
}
</script>

Loading

0 comments on commit d702e49

Please sign in to comment.