playing around with better meal plan view
This commit is contained in:
vabene1111
parent
73be817c10
commit
6af3d7c98f
@ -812,7 +812,7 @@
|
|||||||
</b-dropdown>
|
</b-dropdown>
|
||||||
|
|
||||||
<b-button variant="outline-primary" size="sm" class="shadow-none ml-1"
|
<b-button variant="outline-primary" size="sm" class="shadow-none ml-1"
|
||||||
@click="resetSearch()"><i class="fas fa-file-alt"></i> {{
|
@click="resetSearch()" v-if="searchFiltered()"><i class="fas fa-file-alt"></i> {{
|
||||||
search.pagination_page
|
search.pagination_page
|
||||||
}}/{{ Math.ceil(pagination_count / ui.page_size) }} {{ $t("Reset") }} <i
|
}}/{{ Math.ceil(pagination_count / ui.page_size) }} {{ $t("Reset") }} <i
|
||||||
class="fas fa-times-circle"></i>
|
class="fas fa-times-circle"></i>
|
||||||
@ -828,11 +828,50 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<template v-if="!searchFiltered() && ui.show_meal_plan">
|
||||||
|
<hr/>
|
||||||
|
<div class="row" >
|
||||||
|
|
||||||
|
<div class="col col-md-12">
|
||||||
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 0.5rem;row-gap: 1rem; grid-auto-rows: max-content; ">
|
||||||
|
<b-list-group v-for="day in meal_plan_grid" v-bind:key="day.day">
|
||||||
|
<b-list-group-item>
|
||||||
|
<div class="d-flex flex-row align-items-center">
|
||||||
|
<div>
|
||||||
|
<h4>{{ day.date_label }}</h4>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1 text-right">
|
||||||
|
<b-button class=""><i class="fa fa-plus"></i></b-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</b-list-group-item>
|
||||||
|
<b-list-group-item v-for="plan in day.plan_entries" v-bind:key="plan.id">
|
||||||
|
<div class="d-flex flex-row align-items-center">
|
||||||
|
<div>
|
||||||
|
<b-img style="height: 50px; width: 50px; object-fit: cover" :src="plan.recipe.image" rounded="circle"></b-img>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1 ml-2">
|
||||||
|
<span class="two-row-text">{{ plan.recipe.name }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</b-list-group-item>
|
||||||
|
|
||||||
|
</b-list-group>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<hr/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<div v-if="recipes.length > 0" class="mt-4">
|
<div v-if="recipes.length > 0" class="mt-4">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col col-md-12">
|
<div class="col col-md-12">
|
||||||
<div
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 0.5rem;row-gap: 1rem; grid-auto-rows: max-content; ">
|
||||||
style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 0.5rem;row-gap: 1rem; grid-auto-rows: max-content; ">
|
|
||||||
<template v-if="!searchFiltered()">
|
<template v-if="!searchFiltered()">
|
||||||
<recipe-card
|
<recipe-card
|
||||||
v-bind:key="`mp_${m.id}`"
|
v-bind:key="`mp_${m.id}`"
|
||||||
@ -844,6 +883,7 @@
|
|||||||
footer_icon="far fa-calendar-alt"
|
footer_icon="far fa-calendar-alt"
|
||||||
></recipe-card>
|
></recipe-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<recipe-card v-for="r in recipes" v-bind:key="r.id" :recipe="r"
|
<recipe-card v-for="r in recipes" v-bind:key="r.id" :recipe="r"
|
||||||
:footer_text="isRecentOrNew(r)[0]"
|
:footer_text="isRecentOrNew(r)[0]"
|
||||||
:footer_icon="isRecentOrNew(r)[1]"
|
:footer_icon="isRecentOrNew(r)[1]"
|
||||||
@ -1018,6 +1058,15 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
meal_plan_grid: function () {
|
||||||
|
let grid = []
|
||||||
|
for (const x of Array(5).keys()) {
|
||||||
|
let moment_date = moment().add(x, "d")
|
||||||
|
grid.push({date: moment_date, date_label: moment_date.format('DD.MM'), plan_entries: this.meal_plans.filter((m) => moment(m.date).isSame(moment_date, 'day'))})
|
||||||
|
}
|
||||||
|
|
||||||
|
return grid
|
||||||
|
},
|
||||||
locale: function () {
|
locale: function () {
|
||||||
return window.CUSTOM_LOCALE
|
return window.CUSTOM_LOCALE
|
||||||
},
|
},
|
||||||
@ -1579,4 +1628,13 @@ export default {
|
|||||||
width: 30px;
|
width: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.two-row-text {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2; /* number of lines to show */
|
||||||
|
line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,82 +1,48 @@
|
|||||||
<template>
|
<template>
|
||||||
|
|
||||||
<div id="app">
|
<div id="app">
|
||||||
|
<hr/>
|
||||||
DIV
|
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-12">
|
<div class="col col-md-12">
|
||||||
<div style="height: 25vh; width: 15vw;">
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 0.5rem;row-gap: 1rem; grid-auto-rows: max-content; ">
|
||||||
<b-img style="height: 15vh; width: 15vw; object-fit: cover"
|
<b-list-group v-for="x in Array(5).keys()" v-bind:key="x">
|
||||||
src="http://127.0.0.1:8000/media/recipes/6a2fd228-c589-4a14-b21f-365bca3fbd94_119.png"
|
<b-list-group-item >
|
||||||
rounded></b-img>
|
<h4>Monday </h4>
|
||||||
<div style="height: 10vh">
|
</b-list-group-item>
|
||||||
<span style="font-size: 18px" class="two-row-text"><b>Zwiebelkuchen mit einem wirklich langen namen und einer ewigen Beschreibung</b></span>
|
<b-list-group-item v-for="y in Array(Math.round(Math.random()*4) ).keys()" v-bind:key="y">
|
||||||
<span style="font-size: 14px" class="two-row-text text-muted">
|
<div class="d-flex flex-row align-items-center">
|
||||||
<a href="#">Import 1</a> -
|
<div>
|
||||||
<a href="#">Hauptgang</a> -
|
<b-img style="height: 50px; width: 50px; object-fit: cover" src="http://127.0.0.1:8000/media/recipes/6a2fd228-c589-4a14-b21f-365bca3fbd94_119.png" rounded="circle"></b-img>
|
||||||
<a href="#">Backen</a> </span>
|
</div>
|
||||||
|
<div class="flex-grow-1 ml-2">
|
||||||
<i class="fas fa-ellipsis-v"></i>
|
<span class="two-row-text">{{ recipe.name }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</b-list-group-item>
|
||||||
|
<b-list-group-item class="justify-content-center text-center">
|
||||||
|
<b-button><i class="fa fa-plus"></i></b-button>
|
||||||
|
</b-list-group-item>
|
||||||
|
</b-list-group>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-3">
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-12">
|
|
||||||
<b-img style="height: 15vh; width: 15vw; object-fit: cover"
|
|
||||||
src="http://127.0.0.1:8000/media/recipes/6a2fd228-c589-4a14-b21f-365bca3fbd94_119.png"
|
|
||||||
rounded></b-img>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row mt-3">
|
|
||||||
<div class="col-1">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="col-10">
|
|
||||||
<span style="font-size: 18px"><b>Zwiebelkuchen mit einem wirklich langen namen und einer ewigen Beschreibung</b></span> <br/>
|
|
||||||
<span style="font-size: 14px" class="text-muted text-small">
|
|
||||||
<a href="#">Import 1</a> -
|
|
||||||
<a href="#">Hauptgang</a> -
|
|
||||||
<a href="#">Backen</a> </span>
|
|
||||||
</div>
|
|
||||||
<div class="col-1 align-items-end">
|
|
||||||
<i class="fas fa-ellipsis-v"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="mt-3"/>
|
|
||||||
|
|
||||||
Recipe Card
|
|
||||||
<b-checkbox v-model="recipe_detailed"></b-checkbox>
|
|
||||||
<div class="row ">
|
|
||||||
<div class="col-md-3">
|
|
||||||
<recipe-card
|
|
||||||
v-if="recipe !== undefined"
|
|
||||||
:recipe="recipe"
|
|
||||||
:detailed="recipe_detailed"
|
|
||||||
></recipe-card>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
Meal Plan Card
|
<hr/>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-3">
|
<div class="col col-md-12">
|
||||||
<recipe-card
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 0.5rem;row-gap: 1rem; grid-auto-rows: max-content; ">
|
||||||
v-if="recipe !== undefined && meal_plan !== undefined"
|
<recipe-card :recipe="recipe" :detailed="false"></recipe-card>
|
||||||
:recipe="recipe"
|
<recipe-card :recipe="recipe" :detailed="false"></recipe-card>
|
||||||
:detailed="recipe_detailed"
|
<recipe-card :recipe="recipe" :detailed="false"></recipe-card>
|
||||||
:meal_plan="meal_plan"
|
<recipe-card :recipe="recipe" :detailed="false"></recipe-card>
|
||||||
:footer_text="meal_plan.meal_type_name"
|
<recipe-card :recipe="recipe" :detailed="false"></recipe-card>
|
||||||
footer_icon="far fa-calendar-alt"
|
<recipe-card :recipe="recipe" :detailed="false"></recipe-card>
|
||||||
></recipe-card>
|
<recipe-card :recipe="recipe" :detailed="false"></recipe-card>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -84,10 +50,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!--
|
|
||||||
<span class="text-muted text-small">📥 Import 1 - 🍽 Hauptgang - 🔥 Backen</span>
|
|
||||||
|
|
||||||
-->
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Vue from "vue"
|
import Vue from "vue"
|
||||||
@ -97,6 +59,7 @@ import "bootstrap-vue/dist/bootstrap-vue.css"
|
|||||||
import {ApiApiFactory} from "@/utils/openapi/api";
|
import {ApiApiFactory} from "@/utils/openapi/api";
|
||||||
import RecipeCard from "@/components/RecipeCard.vue";
|
import RecipeCard from "@/components/RecipeCard.vue";
|
||||||
|
|
||||||
|
|
||||||
Vue.use(BootstrapVue)
|
Vue.use(BootstrapVue)
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user