generated from posva/vite-tailwind-starter
-
-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Challenge Page): added more content, and started split in compon…
…ents
- Loading branch information
Showing
4 changed files
with
202 additions
and
111 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
|
Oops, something went wrong.