Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Challenge Page): A page for community challenges #935

Merged
merged 9 commits into from
Jan 15, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions src/components/ChallengeTakePicturesCard.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<template>
<v-card v-if="exampleProofUrl">
<v-card-title>
{{ $t('Challenge.StepTakePictures.Title') }}
</v-card-title>
<v-card-text>
<p class="mb-2">
{{ $t('Challenge.StepTakePictures.line1') }}
</p>
<v-img :src="exampleProofUrl" style="max-height: 200px" />
<p class="mb-2 mt-2">
{{ $t('Challenge.StepTakePictures.line2') }}
</p>
</v-card-text>
<v-card-actions>
<v-row>
<v-col>
<v-btn
class="float-right"
color="success"
variant="flat"
to="/proofs/add/multiple"
>
{{ $t('Challenge.StepTakePictures.AddPictures') }}
</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</template>

<script>
export default {
props: {
exampleProofUrl: {
type: String,
default: () => {}
}
},
}
</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>

37 changes: 37 additions & 0 deletions src/components/ChallengeValidateCard.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<template>
<v-card class="fill-height d-flex flex-column">
<v-card-title>
{{ $t('Challenge.StepValidate.Title') }}
</v-card-title>
<v-card-text class="flex-grow-1">
<p class="mb-2">
{{ $t('Challenge.StepValidate.line1') }}
</p>
<p class="mb-4">
{{ $t('Challenge.StepValidate.line2') }}
</p>
<p class="mb-2">
{{ $t('Challenge.StepValidate.line3') }}
</p>
<p class="mb-4">
{{ $t('Challenge.StepValidate.line4') }}
</p>
</v-card-text>
<v-card-actions>
<v-row>
<v-col>
<v-btn
class="float-right"
color="success"
variant="flat"
to="/experiments/price-validation-assistant"
>
{{ $t('Challenge.StepValidate.ValidatePrices') }}
</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</template>
<script>
</script>
37 changes: 37 additions & 0 deletions src/i18n/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,29 @@
"Submit": "Submit",
"Title": "Type a barcode"
},
"Challenge": {
"Title": "The current challenge is ...",
"Subtitle": "Join other food price enthusiasts in gathering information about {challenge_title} {challenge_subtitle}.",
"StepTakePictures": {
"Title": "Take pictures of price tags in stores",
"line1": "Pictures can include one or more price tags. Barcodes should be readable. For example :",
"line2": "Once ready, find your shop and upload your pictures using the button below.",
"AddPictures": "Add pictures"
},
"StepValidate": {
"Title": "Validate the detected prices",
"line1": "Price tags are automatically detected, but the robots still need your help to validate them.",
"line2": "Visit the price validation page using the button below, edit the barcode and price if needed, and validate !",
"line3": "If you're having trouble reading the label, mark it as unreable.",
"line4": "This is a collaborative effort, even if you didn't send many pictures, you can still help others by validating.",
"ValidatePrices": "Validate prices"
},
"Stats": "Challenge stats",
"MyStats": "My stats",
"PicturesAddedByYou": "Pictures added by you",
"PricesAddedByYou": "Prices added by you",
"MostRecentContributions": "Most recent contributions"
},
"Common": {
"About": "About",
"AddPrice": "Add a price",
Expand Down Expand Up @@ -168,6 +191,10 @@
"Category": "Category",
"Categories": "Categories",
"CategoryTotal": "{count} categories | {count} category | {count} categories",
"Challenge": "Challenge",
"Challenges": "Challenges",
"ChallengeCurrent": "Current challenge",
"ChallengeOngoing": "Ongoing challenge",
"Chart": "Chart",
"Clear": "Clear",
"Contributors": "Contributors",
Expand Down Expand Up @@ -252,12 +279,16 @@
"OrderUserCountDESC": "User count",
"PersonalInfo": "Personal information",
"Physical": "Physical",
"Picture": "Picture",
"Pictures": "Pictures",
"PicturesAdded": "Pictures added",
"PRICE_TAG": "Price tag",
"PriceCount": "{count} prices | {count} price | {count} prices",
"PriceAddedCount": "{count} prices added | {count} price added | {count} prices added",
"PriceToValidateCount": "{count} prices to validate | {count} price to validate | {count} prices to validate",
"PriceCreated": "Price created!",
"PricesMore": "More prices",
"PricesAdded": "Prices added",
"PricesAddedToday": "Prices added today",
"PricesToday": "Prices today",
"Private": "Private",
Expand Down Expand Up @@ -644,6 +675,12 @@
},
"PriceValidationAssistant": {
"Title": "Price Validation Assistant"
},
"Challenge": {
"Title": "Challenge"
},
"CurrentChallenge": {
"Title": "Current Challenge"
}
},
"Search": {
Expand Down
1 change: 1 addition & 0 deletions src/router.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 9 additions & 0 deletions src/services/api.js
Original file line number Diff line number Diff line change
Expand Up @@ -321,6 +321,15 @@ export default {
.then((response) => response.json())
},

getPriceStats(params = {}) {
const url = `${import.meta.env.VITE_OPEN_PRICES_API_URL}/prices/stats?${buildURLParams({...params})}`
return fetch(url, {
method: 'GET',
headers: OP_DEFAULT_HEADERS,
})
.then((response) => response.json())
},

openfoodfactsProductSearch(code) {
const url = `${constants.OFF_API_URL}/${code}.json`
return fetch(url, {
Expand Down
150 changes: 150 additions & 0 deletions src/views/CurrentChallenge.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
<template>
<h1 class="text-h5 mb-1">
{{ $t('Challenge.Title') }} {{ challenge.icon }} {{ challenge.title }} {{ challenge.icon }}
</h1>

<v-row>
<v-col cols="12" lg="6">
<p class="mb-2">
{{ $t('Challenge.Subtitle', {challenge_title: challenge.title, challenge_subtitle: challenge.subtitle}) }}
</p>
</v-col>
<v-col cols="12" lg="6">
<ChallengeTimeline :challenge="challenge" />
</v-col>
</v-row>

<v-row>
<v-col cols="12" lg="6">
<ChallengeTakePicturesCard :exampleProofUrl="challenge.exampleProofUrl" />
</v-col>
<v-col cols="12" lg="6">
<ChallengeValidateCard />
</v-col>
</v-row>

<v-row>
<v-col cols="12">
<h2 class="text-h6 mb-1">
{{ $t('Challenge.Stats') }}
</h2>

<v-row>
<v-col cols="12" md="4">
<StatCard :value="challenge.numberOfProofs" :subtitle="$t('Common.PicturesAdded')" />
</v-col>
<v-col cols="12" md="4">
<StatCard :value="challenge.numberOfContributions" :subtitle="$t('Common.PricesAdded')" />
</v-col>
<v-col cols="12" md="4">
<StatCard :value="challenge.numberOfContributors" :subtitle="$t('Common.Contributors')" />
</v-col>
</v-row>
</v-col>
</v-row>

<v-row>
<v-col v-if="username" cols="12">
<h2 class="text-h6 mb-1">
{{ $t('Challenge.MyStats') }}
</h2>
<v-row>
<v-col cols="12" md="4">
<StatCard :value="challenge.userProofContributions" :subtitle="$t('Challenge.PicturesAddedByYou')" />
</v-col>
<v-col cols="12" md="4">
<StatCard :value="challenge.userContributions" :subtitle="$t('Challenge.PricesAddedByYou')" />
</v-col>
</v-row>
</v-col>
</v-row>

<v-row v-if="challenge.latestContributions.length">
<v-col cols="12">
<h2 class="text-h6">
{{ $t('Challenge.MostRecentContributions') }}
</h2>
</v-col>
<v-col v-for="price in challenge.latestContributions.slice(0, 10)" :key="price" cols="12" sm="6" md="4" xl="3">
<PriceCard :price="price" :product="price.product" elevation="1" height="100%" />
</v-col>
</v-row>
</template>

<script>
import { defineAsyncComponent } from 'vue'
import api from '../services/api.js'
import { mapStores } from 'pinia'
import { useAppStore } from '../store'

export default {
components: {
StatCard: defineAsyncComponent(() => import('../components/StatCard.vue')),
PriceCard: defineAsyncComponent(() => import('../components/PriceCard.vue')),
ChallengeTimeline: defineAsyncComponent(() => import('../components/ChallengeTimeline.vue')),
ChallengeTakePicturesCard: defineAsyncComponent(() => import('../components/ChallengeTakePicturesCard.vue')),
ChallengeValidateCard: defineAsyncComponent(() => import('../components/ChallengeValidateCard.vue')),
},
data() {
return {
challenge: {
title: "Nutella",
subtitle: "(and other hazelnut spreads)",
icon: "🌰",
startDate: "2025-01-20",
endDate: "2025-01-31",
categories: ["en:hazelnut-spreads"],
numberOfContributors: 0,
numberOfContributions: 0,
latestContributions: [],
numberOfProofs: 0,
userContributions: 0,
userProofContributions: 0,
exampleProofUrl: "https://prices.openfoodfacts.org/img/0029/nCWeCVnpQJ.webp"
},
loading: false,
}
},
computed: {
...mapStores(useAppStore),
username() {
return this.appStore.user.username
},
},
mounted() {
this.getStats()
},
methods: {
getStats() {
this.loading = true
api.getPriceStats({ product__categories_tags__contains: this.challenge.categories[0], created__gte: this.challenge.startDate, created__lte: this.challenge.endDate})
.then((data) => {
this.challenge.numberOfContributions = data.price__count
this.loading = false
})

api.getPrices({ size: 10, product__categories_tags__contains: this.challenge.categories[0], created__gte: this.challenge.startDate, created__lte: this.challenge.endDate })
.then((data) => {
this.challenge.latestContributions = data.items
})

api.getProofs({ size: 1, created__gte: this.challenge.startDate, created__lte: this.challenge.endDate })
.then((data) => {
this.challenge.numberOfProofs = data.total
})

if (this.username) {
api.getPriceStats({ product__categories_tags__contains: this.challenge.categories[0], created__gte: this.challenge.startDate, created__lte: this.challenge.endDate, owner: this.username})
.then((data) => {
this.challenge.userContributions = data.price__count
})
api.getProofs({ size: 1, created__gte: this.challenge.startDate, created__lte: this.challenge.endDate, owner: this.username })
.then((data) => {
this.challenge.userProofContributions = data.total
})
}

}
}
}
</script>
Loading
Loading