munch-ease-frontend/src/components/shopping/MealSelectionList.vue

<template>

<ul>
    <li v-for="meal in meals" :key="meal.id">
        <!-- Have a checkbox and card for each meal, show the image and name -->
        <!-- Emit meal-selected event on checked and meal-unselected on unchecked -->
        <input type="checkbox" :id="meal.id" :checked="isChecked(meal)" @change="mealCheckChanged" :disabled="!!meal.purchase_date" />
        <label :for="meal.id" :style="getImageStyling(meal)">
            {{ formatDate(meal.suggested_date) }}
        </label>
    </li>
</ul>

</template>

<style scoped>

ul {
    padding: 0;
}

li {
    display: inline-block;
    list-style-type: none;
    border: 1px solid #ccc;
    border-radius: 0.5em;
    margin-bottom: 1em;
    padding: none;
    overflow: hidden;
    text-align: center;
}

/* Hide the default checkbox formatting, and format the card instead */
input[type="checkbox"] {
    display: none;
}

label {
    display: inline-block;
    padding: 0.1vh 0.3em;
    /* Help the visibility of the text over the image */
    background-color: rgba(255, 255, 255, 0.9);
    border: 3px solid transparent;
    border-radius: 0.5em;
    margin: 0;
    font-weight: normal;
    cursor: pointer;
    color: #3d5447;
}

input[type="checkbox"]:checked + label {
    border: 3px solid #3d5447;
    text-shadow: #ccc 0 0 0.1em;
}

input[type="checkbox"]:disabled + label {
    cursor: not-allowed;
}

/* Show the image as the background image of the card */
.meal-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Position the text in the center of the card */
label {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: larger;
    font-weight: bold;
}

</style>

<script>

const nth = (d) => {
  if (d > 3 && d < 21) return 'th';
  switch (d % 10) {
    case 1:  return "st";
    case 2:  return "nd";
    case 3:  return "rd";
    default: return "th";
  }
};

const formatDate = (date) => {
    return `${date.toLocaleDateString('en-AU', { weekday: 'short' })} ${date.getDate()}${nth(date.getDate())}`
}

const getUrl = (meal) => {
    // First non empty value in meal.recipe/image_urls
    for (const recipe of meal.recipes) {
        if (recipe.image_urls.length && recipe.image_urls[0]) {
            return recipe.image_urls[0];
        }
    }

    // First meal.extra_ingredient with a product with an image
    for (const ingredient of meal.extra_ingredients) {
        if (ingredient.product) {
            if (ingredient.product.img_large) {
                return ingredient.product.img_large;
            }

            if (ingredient.product.img_small) {
                return ingredient.product.img_small;
            }
        }
    }

    return null;
}

export default {
    name: 'MealSelectionList',
    props: {
        meals: Array,
        checked: Array,
    },
    methods: {
        formatDate,
        getImageStyling(meal) {
            const imageUrl = getUrl(meal);            
            if (!imageUrl) {
                return null;
            }
            
            const opacity = 0.7;
            return {background: `linear-gradient(to bottom, rgba(255, 255, 255, ${ opacity }) 0%, rgba(255, 255, 255, ${ opacity }) 100%), url('${imageUrl}') center/cover no-repeat`};
        },
        mealCheckChanged(event) {
            const mealId = parseInt(event.target.id);
            const meal = this.meals.find(m => m.id === mealId);
            if (event.target.checked) {
                this.$emit('meal-selected', meal);
            } else {
                this.$emit('meal-unselected', meal);
            }
        },
        isChecked(meal) {
            for (const checkedMeal of this.checked) {
                if (checkedMeal.id === meal.id) {
                    return true;
                }
            }
            return false;
        }
    }
}

</script>