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

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

@ -1,24 +1,30 @@
<template>
<div>
<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>
<i class="fas fa-star-half-alt fa-xs text-primary" v-if="recipe.rating % 1 > 0"></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>
</span>
</div>
<div>
<span class="d-inline" v-if="recipe.rating > 0">
<div v-if="!pill">
<i class="fas fa-star fa-xs text-primary" v-for="i in Math.floor(recipe.rating)" v-bind:key="i"></i>
<i class="fas fa-star-half-alt fa-xs text-primary" v-if="recipe.rating % 1 > 0"></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>
</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>
<script>
export default {
name: "RecipeRating",
props: {
recipe: Object
}
name: "RecipeRating",
props: {
recipe: Object,
pill: { required: false, type: Boolean, default: false },
},
}
</script>
<style scoped>
</style>
<style scoped></style>