cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add rating to recipe card

Browse Source
This commit is contained in:
smilerz 2023-12-20 13:51:04 -06:00
parent 4de9be5c89
commit 089677d799
No known key found for this signature in database
GPG Key ID: 39444C7606D47126
2 changed files with 75 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
vue/src/components/RecipeCard.vue
View File

@ -2,8 +2,7 @@
<div> <div>
<template v-if="recipe && recipe.loading"> <template v-if="recipe && recipe.loading">
<b-card no-body v-hover style="height: 100%"> <b-card no-body v-hover style="height: 100%">
<b-card-img-lazy style="height: 15vh; object-fit: cover" class="" :src="placeholder_image" <b-card-img-lazy style="height: 15vh; object-fit: cover" class="" :src="placeholder_image" v-bind:alt="$t('Recipe_Image')" top></b-card-img-lazy>
v-bind:alt="$t('Recipe_Image')" top></b-card-img-lazy>
<b-card-body class="p-4"> <b-card-body class="p-4">
<h6> <h6>
@ -20,30 +19,32 @@
</template> </template>
<template v-else> <template v-else>
<b-card no-body v-hover v-if="recipe" style="height: 100%"> <b-card no-body v-hover v-if="recipe" style="height: 100%">
<a :href="recipe_link"> <a :href="recipe_link">
<div class="content"> <div class="content">
<div class="content-overlay" v-if="recipe.description !== null && recipe.description !== ''"></div> <div class="content-overlay" v-if="recipe.description !== null && recipe.description !== ''"></div>
<b-card-img-lazy style="height: 15vh; object-fit: cover" class="" :src="recipe_image" <b-card-img-lazy style="height: 15vh; object-fit: cover" class="" :src="recipe_image" v-bind:alt="$t('Recipe_Image')" top></b-card-img-lazy>
v-bind:alt="$t('Recipe_Image')" top></b-card-img-lazy>
<div class="content-details" > <div class="content-details">
<p class="content-text"> <p class="content-text">
{{ recipe.description }} {{ recipe.description }}
</p> </p>
</div> </div>
<div class="card-img-overlay d-flex flex-column justify-content-left float-left text-left pt-2" style="width:40%" <b-row class="card-img-overlay pt-1">
v-if="recipe.working_time !== 0 || recipe.waiting_time !== 0"> <b-col cols="6">
<b-badge pill variant="light" class="mt-1 font-weight-normal" v-if="recipe.working_time !== 0 && recipe.working_time !== undefined"> <div v-if="recipe.working_time !== 0 || recipe.waiting_time !== 0">
<i <b-badge pill variant="light" class="mt-1 font-weight-normal" v-if="recipe.working_time !== 0 && recipe.working_time !== undefined">
class="fa fa-clock"></i> {{ working_time }} <i class="fa fa-clock"></i> {{ working_time }}
</b-badge> </b-badge>
<b-badge pill variant="secondary" class="mt-1 font-weight-normal" <b-badge pill variant="secondary" class="mt-1 font-weight-normal" v-if="recipe.waiting_time !== 0 && recipe.waiting_time !== undefined">
v-if="recipe.waiting_time !== 0 && recipe.waiting_time !== undefined"> <i class="fa fa-pause"></i> {{ waiting_time }}
<i class="fa fa-pause"></i> {{ waiting_time }} </b-badge>
</b-badge> </div>
</div> </b-col>
<b-col cols="6" class="text-right">
<recipe-rating :recipe="recipe" :pill="true"></recipe-rating>
</b-col>
</b-row>
</div> </div>
</a> </a>
@ -51,18 +52,20 @@
<div class="d-flex flex-row"> <div class="d-flex flex-row">
<div class="flex-grow-1"> <div class="flex-grow-1">
<a :href="recipe_link" class="text-body font-weight-bold two-row-text"> <a :href="recipe_link" class="text-body font-weight-bold two-row-text">
<template v-if="recipe !== null">{{ recipe.name }}</template> <template v-if="recipe !== null">{{ recipe.name }}</template>
<template v-else>{{ meal_plan.title }}</template> <template v-else>{{ meal_plan.title }}</template>
</a> </a>
</div> </div>
<div class="justify-content-end"> <div class="justify-content-end">
<recipe-context-menu :recipe="recipe" class="justify-content-end float-right align-items-end pr-0" <recipe-context-menu
:disabled_options="context_disabled_options" :recipe="recipe"
v-if="recipe !== null && show_context_menu"></recipe-context-menu> class="justify-content-end float-right align-items-end pr-0"
:disabled_options="context_disabled_options"
v-if="recipe !== null && show_context_menu"
></recipe-context-menu>
</div> </div>
</div> </div>
<b-card-text style="text-overflow: ellipsis"> <b-card-text style="text-overflow: ellipsis">
<template v-if="recipe !== null"> <template v-if="recipe !== null">
<div v-if="show_detail"> <div v-if="show_detail">
@ -71,34 +74,29 @@
<p class="mt-1 mb-1"> <p class="mt-1 mb-1">
<last-cooked :recipe="recipe"></last-cooked> <last-cooked :recipe="recipe"></last-cooked>
<keywords-component :recipe="recipe" :limit="3" :enable_keyword_links="enable_keyword_links" <keywords-component
style="margin-top: 4px; position: relative; z-index: 3;"></keywords-component> :recipe="recipe"
:limit="3"
:enable_keyword_links="enable_keyword_links"
style="margin-top: 4px; position: relative; z-index: 3"
></keywords-component>
</p> </p>
<transition name="fade" mode="in-out"> <transition name="fade" mode="in-out">
<div class="row mt-3" v-if="show_detail"> <div class="row mt-3" v-if="show_detail">
<div class="col-md-12"> <div class="col-md-12">
<h6 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t("Ingredients") }} <h6 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t("Ingredients") }}</h6>
</h6>
<ingredients-card <ingredients-card :steps="recipe.steps" :header="false" :detailed="false" :servings="recipe.servings" />
:steps="recipe.steps"
:header="false"
:detailed="false"
:servings="recipe.servings"/>
</div> </div>
</div> </div>
</transition> </transition>
<b-badge pill variant="info" v-if="recipe.internal !== undefined && !recipe.internal">{{ $t("External") }}</b-badge> <b-badge pill variant="info" v-if="recipe.internal !== undefined && !recipe.internal">{{ $t("External") }}</b-badge>
</template> </template>
</b-card-text> </b-card-text>
</b-card-body> </b-card-body>
</b-card> </b-card>
</template> </template>
</div> </div>
<!-- <!--
@ -123,14 +121,14 @@
</template> </template>
<script> <script>
import RecipeContextMenu from "@/components/RecipeContextMenu" import IngredientsCard from "@/components/IngredientsCard"
import KeywordsComponent from "@/components/KeywordsComponent" import KeywordsComponent from "@/components/KeywordsComponent"
import {resolveDjangoUrl, ResolveUrlMixin, calculateHourMinuteSplit} from "@/utils/utils" import LastCooked from "@/components/LastCooked"
import RecipeContextMenu from "@/components/RecipeContextMenu"
import RecipeRating from "@/components/RecipeRating" import RecipeRating from "@/components/RecipeRating"
import { ResolveUrlMixin, calculateHourMinuteSplit, resolveDjangoUrl } from "@/utils/utils"
import moment from "moment/moment" import moment from "moment/moment"
import Vue from "vue" import Vue from "vue"
import LastCooked from "@/components/LastCooked"
import IngredientsCard from "@/components/IngredientsCard"
Vue.prototype.moment = moment Vue.prototype.moment = moment
@ -141,19 +139,20 @@ export default {
LastCooked, LastCooked,
KeywordsComponent, KeywordsComponent,
"recipe-context-menu": RecipeContextMenu, "recipe-context-menu": RecipeContextMenu,
IngredientsCard IngredientsCard,
RecipeRating,
}, },
props: { props: {
recipe: Object, recipe: Object,
meal_plan: Object, meal_plan: Object,
use_plural: {type: Boolean, default: false}, use_plural: { type: Boolean, default: false },
footer_text: String, footer_text: String,
footer_icon: String, footer_icon: String,
detailed: {type: Boolean, default: true}, detailed: { type: Boolean, default: true },
show_context_menu: {type: Boolean, default: true}, show_context_menu: { type: Boolean, default: true },
context_disabled_options: Object, context_disabled_options: Object,
open_recipe_on_click: {type: Boolean, default: true}, open_recipe_on_click: { type: Boolean, default: true },
enable_keyword_links: {type: Boolean, default: true}, enable_keyword_links: { type: Boolean, default: true },
}, },
data() { data() {
return { return {
@ -161,8 +160,7 @@ export default {
} }
}, },
mounted() { mounted() {},
},
computed: { computed: {
show_detail: function () { show_detail: function () {
return this.recipe?.steps !== undefined && this.detailed return this.recipe?.steps !== undefined && this.detailed
@ -180,13 +178,13 @@ export default {
waiting_time: function () { waiting_time: function () {
return calculateHourMinuteSplit(this.recipe.waiting_time) return calculateHourMinuteSplit(this.recipe.waiting_time)
}, },
recipe_link: function (){ recipe_link: function () {
if(this.open_recipe_on_click){ if (this.open_recipe_on_click) {
return this.recipe.id !== undefined ? resolveDjangoUrl('view_recipe', this.recipe.id) : null return this.recipe.id !== undefined ? resolveDjangoUrl("view_recipe", this.recipe.id) : null
} else { } else {
return "#" return "#"
} }
} },
}, },
methods: {}, methods: {},
directives: { directives: {
@ -210,8 +208,7 @@ export default {
transition: opacity 0.5s; transition: opacity 0.5s;
} }
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
{
opacity: 0; opacity: 0;
} }

38
vue/src/components/RecipeRating.vue
View File

@ -1,24 +1,30 @@
<template> <template>
<div> <div>
<span class="d-inline" v-if="recipe.rating > 0"> <span class="d-inline" v-if="recipe.rating > 0">
<i class="fas fa-star fa-xs text-primary" v-for="i in Math.floor(recipe.rating)" v-bind:key="i"></i> <div v-if="!pill">
<i class="fas fa-star-half-alt fa-xs text-primary" v-if="recipe.rating % 1 > 0"></i> <i class="fas fa-star fa-xs text-primary" v-for="i in Math.floor(recipe.rating)" v-bind:key="i"></i>
<i class="far fa-star fa-xs text-secondary" v-for="i in (5 - Math.ceil(recipe.rating))" v-bind:key="i + 10"></i> <i class="fas fa-star-half-alt fa-xs text-primary" v-if="recipe.rating % 1 > 0"></i>
</span> <i class="far fa-star fa-xs text-secondary" v-for="i in 5 - Math.ceil(recipe.rating)" v-bind:key="i + 10"></i>
</div> </div>
<div v-else>
<b-badge pill variant="light" class="mt-1 font-weight-normal">
<i class="fas fa-star fa-xs text-dark" v-for="i in Math.floor(recipe.rating)" v-bind:key="i"></i>
<i class="fas fa-star-half-alt fa-xs text-dark" v-if="recipe.rating % 1 > 0"></i>
<i class="far fa-star fa-xs text-dark" v-for="i in 5 - Math.ceil(recipe.rating)" v-bind:key="i + 10"></i>
</b-badge>
</div>
</span>
</div>
</template> </template>
<script> <script>
export default { export default {
name: "RecipeRating", name: "RecipeRating",
props: { props: {
recipe: Object recipe: Object,
} pill: { required: false, type: Boolean, default: false },
},
} }
</script> </script>
<style scoped> <style scoped></style>
</style>