85 lines
No EOL
2.3 KiB
Vue
85 lines
No EOL
2.3 KiB
Vue
<template>
|
|
<div class="meal-card">
|
|
<h3>{{ mealTitle }}</h3>
|
|
<h4>{{ dayOfWeek }} <small>{{ date }}</small></h4>
|
|
|
|
<p>
|
|
Cooked by
|
|
<span v-for="(chef, index) in meal.chefs" :key="chef.id">
|
|
{{ chef.name }}{{ englishSeperator(index, meal.chefs) }}
|
|
</span>
|
|
<span v-if="!meal.chefs.length">somebody?</span>
|
|
</p>
|
|
<p>
|
|
For
|
|
<span v-for="(consumer, index) in meal.consumers" :key="consumer.id">
|
|
{{ consumer.name }}{{ englishSeperator(index, meal.consumers) }}
|
|
</span>
|
|
<span v-if="!meal.consumers.length">somebody?</span>
|
|
</p>
|
|
<p v-if="meal.purchase_date">
|
|
Purchased {{ ago(meal.purchase_date) }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
</style>
|
|
|
|
<script>
|
|
|
|
import { ago } from '@/dateformats.js'
|
|
|
|
function englishSeperator(index, list) {
|
|
switch (index) {
|
|
case list.length - 1:
|
|
return '';
|
|
case list.length - 2:
|
|
return ' and ';
|
|
default:
|
|
return ', ';
|
|
}
|
|
}
|
|
|
|
function englishList(list) {
|
|
switch (list.length) {
|
|
case 0:
|
|
return '';
|
|
case 1:
|
|
return list[0];
|
|
case 2:
|
|
return `${list[0]} and ${list[1]}`;
|
|
default:
|
|
return `${list.slice(0, -1).join(', ')}, and ${list.slice(-1)}`;
|
|
}
|
|
}
|
|
|
|
export default {
|
|
name: 'MealCard',
|
|
props: ['meal'],
|
|
computed: {
|
|
date() {
|
|
return this.meal.suggested_date.toLocaleDateString('en-au', { month: 'numeric', day: 'numeric' })
|
|
},
|
|
dayOfWeek() {
|
|
return this.meal.suggested_date.toLocaleDateString('en-au', { weekday: 'long' })
|
|
},
|
|
mealTitle() {
|
|
const recipesText = englishList(this.meal.recipes.map(mealRecipe => mealRecipe.recipe.name));
|
|
const ingredientsText = englishList(this.meal.extra_ingredients.map(ingredient => ingredient.name));
|
|
|
|
if (recipesText && ingredientsText) {
|
|
return `${recipesText} with ${ingredientsText}`;
|
|
} else if (recipesText || ingredientsText) {
|
|
return recipesText || ingredientsText;
|
|
} else {
|
|
return 'Nothing planned';
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
englishSeperator,
|
|
ago
|
|
}
|
|
}
|
|
</script> |