Merge pull request #971 from vabene1111/feature/meal_plan_shopping
Feature/meal plan shopping
This commit is contained in:
vabene1111
GitHub
commit
8363b1925c
@ -29,6 +29,7 @@
|
||||
window.CUSTOM_LOCALE = '{{ request.LANGUAGE_CODE }}'
|
||||
|
||||
window.ICAL_URL = '{% url 'api_get_plan_ical' 12345 6789 %}'
|
||||
window.SHOPPING_URL = '{% url 'view_shopping' %}'
|
||||
</script>
|
||||
|
||||
{% render_bundle 'meal_plan_view' %}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div class="col-12 calender-parent">
|
||||
<calendar-view
|
||||
:show-date="showDate" :enable-date-selection="true" class="theme-default"
|
||||
@date-selection-finish="createEntryRange" :items="plan_items"
|
||||
:items="plan_items"
|
||||
:display-period-uom="settings.displayPeriodUom"
|
||||
:period-changed-callback="periodChangedCallback" :enable-drag-drop="true"
|
||||
:item-content-height="item_height"
|
||||
@ -20,11 +20,14 @@
|
||||
@open-context-menu="openContextMenu"/>
|
||||
</template>
|
||||
<template #header="{ headerProps }">
|
||||
<meal-plan-calender-header
|
||||
:header-props="headerProps"
|
||||
@input="setShowDate" @delete-dragged="deleteEntry(dragged_item)"
|
||||
@create-new="createEntryClick(new Date())" @set-starting-day-back="setStartingDay(-1)"
|
||||
@set-starting-day-forward="setStartingDay(1)" :i-cal-url="iCalUrl"/>
|
||||
<meal-plan-calender-header ref="header"
|
||||
:header-props="headerProps"
|
||||
@input="setShowDate" @delete-dragged="deleteEntry(dragged_item)"
|
||||
@create-new="createEntryClick(new Date())"
|
||||
@set-starting-day-back="setStartingDay(-1)"
|
||||
@set-starting-day-forward="setStartingDay(1)" :i-cal-url="iCalUrl"
|
||||
:options="options"
|
||||
:settings_prop="settings"/>
|
||||
</template>
|
||||
</calendar-view>
|
||||
</div>
|
||||
@ -73,7 +76,7 @@
|
||||
</b-form-group>
|
||||
</b-form>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-9 col-lg-6">
|
||||
<h5>{{ $t('Meal_Types') }}</h5>
|
||||
<div>
|
||||
<draggable :list="meal_types" group="meal_types"
|
||||
@ -130,7 +133,6 @@
|
||||
</div>
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
|
||||
<ContextMenu ref="menu">
|
||||
<template #menu="{ contextData }">
|
||||
<ContextMenuItem @click="$refs.menu.close();openEntryEdit(contextData.originalItem.entry)">
|
||||
@ -145,6 +147,9 @@
|
||||
<ContextMenuItem @click="$refs.menu.close();createEntry(contextData.originalItem.entry)">
|
||||
<a class="dropdown-item p-2" href="#"><i class="fas fa-copy"></i> {{ $t("Clone") }}</a>
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem @click="$refs.menu.close();addToShopping(contextData)">
|
||||
<a class="dropdown-item p-2" href="#"><i class="fas fa-shopping-cart"></i> {{ $t("Add_to_Shopping") }}</a>
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem @click="$refs.menu.close();deleteEntry(contextData)">
|
||||
<a class="dropdown-item p-2 text-danger" href="#"><i class="fas fa-trash"></i> {{ $t("Delete") }}</a>
|
||||
</ContextMenuItem>
|
||||
@ -154,6 +159,73 @@
|
||||
:entry-editing_initial_meal_type="entryEditing_initial_meal_type" :modal_title="modal_title"
|
||||
:edit_modal_show="edit_modal_show" @save-entry="editEntry"
|
||||
@delete-entry="deleteEntry" @reload-meal-types="refreshMealTypes"></meal-plan-edit-modal>
|
||||
<template>
|
||||
<div>
|
||||
<b-sidebar id="sidebar-shopping" :title="$t('Shopping_list')" backdrop right shadow="sm">
|
||||
<div class="row p-1 no-gutters">
|
||||
<div class="col-12 mt-1" v-if="shopping_list.length === 0">
|
||||
<p class="p-3">{{ $t("Shopping_List_Empty") }}</p>
|
||||
</div>
|
||||
<div class="col-12 mt-1" v-for="entry in shopping_list" v-bind:key="entry.id">
|
||||
<b-card :header="`${entry.meal_type.icon} ${entry.recipe_name}`" no-body>
|
||||
<template #footer>
|
||||
<small class="text-muted">{{ `${$t("Servings")}: ${entry.servings}` }}</small>
|
||||
</template>
|
||||
</b-card>
|
||||
</div>
|
||||
<div class="col-12 mt-1" v-if="shopping_list.length > 0">
|
||||
<b-button-group>
|
||||
<b-button variant="success" @click="saveShoppingList"><i class="fas fa-external-link-alt"></i>
|
||||
{{ $t("Open") }}
|
||||
</b-button>
|
||||
<b-button variant="danger" @click="shopping_list = []"><i class="fa fa-trash"></i> {{ $t("Clear") }}
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
</div>
|
||||
</div>
|
||||
</b-sidebar>
|
||||
</div>
|
||||
</template>
|
||||
<div class="row fixed-bottom p-2 b-1 border-top text-center" style="background:rgba(255,255,255,0.6);">
|
||||
<div class="col-md-3 col-6">
|
||||
<button class="btn btn-block btn-success shadow-none" @click="createEntryClick(new Date())"><i
|
||||
class="fas fa-calendar-plus"></i> {{ $t('Create') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-md-3 col-6">
|
||||
<button class="btn btn-block btn-primary shadow-none" v-b-toggle.sidebar-shopping><i
|
||||
class="fas fa-shopping-cart"></i> {{ $t('Shopping_list') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-md-3 col-6">
|
||||
<a class="btn btn-block btn-primary shadow-none" :href="iCalUrl"><i class="fas fa-download"></i>
|
||||
{{ $t('Export_To_ICal') }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-3 col-6">
|
||||
<button class="btn btn-block btn-primary shadow-none disabled" v-b-tooltip.focus.top :title="$t('Coming-Soon')">{{ $t('Auto-Planner') }}</button>
|
||||
</div>
|
||||
<div class="col-12 d-flex justify-content-center mt-2 d-block d-md-none">
|
||||
<b-button-toolbar key-nav aria-label="Toolbar with button groups">
|
||||
<b-button-group class="mx-1">
|
||||
<b-button v-html="'<<'" @click="setShowDate($refs.header.headerProps.previousPeriod)"></b-button>
|
||||
<b-button v-html="'<'" @click="setStartingDay(-1)"></b-button>
|
||||
</b-button-group>
|
||||
<b-button-group class="mx-1">
|
||||
<b-button @click="setShowDate($refs.header.headerProps.currentPeriod)"><i class="fas fa-home"></i>
|
||||
</b-button>
|
||||
<b-form-datepicker
|
||||
button-only
|
||||
button-variant="secondary"
|
||||
></b-form-datepicker>
|
||||
</b-button-group>
|
||||
<b-button-group class="mx-1">
|
||||
<b-button v-html="'>'" @click="setStartingDay(1)"></b-button>
|
||||
<b-button v-html="'>>'" @click="setShowDate($refs.header.headerProps.nextPeriod)"></b-button>
|
||||
</b-button-group>
|
||||
</b-button-toolbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -164,7 +236,6 @@ import 'bootstrap-vue/dist/bootstrap-vue.css'
|
||||
|
||||
import ContextMenu from "@/components/ContextMenu/ContextMenu";
|
||||
import ContextMenuItem from "@/components/ContextMenu/ContextMenuItem";
|
||||
import "vue-simple-calendar/static/css/default.css"
|
||||
import {CalendarView, CalendarMathMixin} from "vue-simple-calendar/src/components/bundle";
|
||||
import Vue from "vue";
|
||||
import {ApiApiFactory} from "@/utils/openapi/api";
|
||||
@ -177,6 +248,8 @@ import MealPlanCalenderHeader from "@/components/MealPlanCalenderHeader";
|
||||
import EmojiInput from "../../components/Modals/EmojiInput";
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
const {makeToast} = require("@/utils/utils");
|
||||
|
||||
Vue.prototype.moment = moment
|
||||
Vue.use(BootstrapVue)
|
||||
Vue.use(VueCookies)
|
||||
@ -229,6 +302,7 @@ export default {
|
||||
title_placeholder: this.$t('Title')
|
||||
}
|
||||
},
|
||||
shopping_list: [],
|
||||
current_period: null,
|
||||
entryEditing: {},
|
||||
edit_modal_show: false,
|
||||
@ -285,9 +359,13 @@ export default {
|
||||
}
|
||||
},
|
||||
iCalUrl() {
|
||||
let start = moment(this.current_period.periodStart).format('YYYY-MM-DD')
|
||||
let end = moment(this.current_period.periodEnd).format('YYYY-MM-DD')
|
||||
return this.ical_url.replace(/12345/, start).replace(/6789/, end)
|
||||
if (this.current_period !== null) {
|
||||
let start = moment(this.current_period.periodStart).format('YYYY-MM-DD')
|
||||
let end = moment(this.current_period.periodEnd).format('YYYY-MM-DD')
|
||||
return this.ical_url.replace(/12345/, start).replace(/6789/, end)
|
||||
} else {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -307,6 +385,27 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
addToShopping(entry) {
|
||||
if (entry.originalItem.entry.recipe !== null) {
|
||||
this.shopping_list.push(entry.originalItem.entry)
|
||||
makeToast(this.$t("Success"), this.$t("Added_To_Shopping_List"), 'success')
|
||||
} else {
|
||||
makeToast(this.$t("Failure"), this.$t("Cannot_Add_Notes_To_Shopping"), 'danger')
|
||||
}
|
||||
},
|
||||
saveShoppingList() {
|
||||
let url = window.SHOPPING_URL
|
||||
let first = true
|
||||
for (let se of this.shopping_list) {
|
||||
if (first) {
|
||||
url += `?r=[${se.recipe.id},${se.servings}]`
|
||||
first = false
|
||||
} else {
|
||||
url += `&r=[${se.recipe.id},${se.servings}]`
|
||||
}
|
||||
}
|
||||
window.open(url)
|
||||
},
|
||||
setStartingDay(days) {
|
||||
if (this.settings.startingDayOfWeek + days < 0) {
|
||||
this.settings.startingDayOfWeek = 6
|
||||
@ -394,9 +493,6 @@ export default {
|
||||
setShowDate(d) {
|
||||
this.showDate = d;
|
||||
},
|
||||
createEntryRange(data) {
|
||||
console.log(data)
|
||||
},
|
||||
createEntryClick(data) {
|
||||
this.entryEditing = this.options.entryEditing
|
||||
this.entryEditing.date = moment(data).format('YYYY-MM-DD')
|
||||
@ -536,8 +632,7 @@ export default {
|
||||
flex-grow: 1;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
max-height: 80vh;
|
||||
min-height: 40rem;
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
.cv-item {
|
||||
@ -555,4 +650,119 @@ export default {
|
||||
.modal-backdrop {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/*
|
||||
**************************************************************
|
||||
This theme is the default shipping theme, it includes some
|
||||
decent defaults, but is separate from the calendar component
|
||||
to make it easier for users to implement their own themes w/o
|
||||
having to override as much.
|
||||
**************************************************************
|
||||
*/
|
||||
|
||||
/* Header */
|
||||
|
||||
.theme-default .cv-header,
|
||||
.theme-default .cv-header-day {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.theme-default .cv-header .periodLabel {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
/* Grid */
|
||||
|
||||
.theme-default .cv-weeknumber {
|
||||
background-color: #e0e0e0;
|
||||
border-color: #ccc;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.theme-default .cv-weeknumber span {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.theme-default .cv-day.past {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.theme-default .cv-day.outsideOfMonth {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
.theme-default .cv-day.today {
|
||||
background-color: #ffe;
|
||||
}
|
||||
|
||||
.theme-default .cv-day[aria-selected] {
|
||||
background-color: #ffc;
|
||||
}
|
||||
|
||||
/* Events */
|
||||
|
||||
.theme-default .cv-item {
|
||||
border-color: #e0e0f0;
|
||||
border-radius: 0.5em;
|
||||
background-color: #fff;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.theme-default .cv-item.purple {
|
||||
background-color: #f0e0ff;
|
||||
border-color: #e7d7f7;
|
||||
}
|
||||
|
||||
.theme-default .cv-item.orange {
|
||||
background-color: #ffe7d0;
|
||||
border-color: #f7e0c7;
|
||||
}
|
||||
|
||||
.theme-default .cv-item.continued::before,
|
||||
.theme-default .cv-item.toBeContinued::after {
|
||||
content: " \21e2 ";
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.theme-default .cv-item.toBeContinued {
|
||||
border-right-style: none;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.theme-default .cv-item.isHovered.hasUrl {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.theme-default .cv-item.continued {
|
||||
border-left-style: none;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.cv-item.span3,
|
||||
.cv-item.span4,
|
||||
.cv-item.span5,
|
||||
.cv-item.span6,
|
||||
.cv-item.span7 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Event Times */
|
||||
|
||||
.theme-default .cv-item .startTime,
|
||||
.theme-default .cv-item .endTime {
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Drag and drop */
|
||||
|
||||
.theme-default .cv-day.draghover {
|
||||
box-shadow: inset 0 0 0.2em 0.2em yellow;
|
||||
}
|
||||
</style>
|
||||
@ -1,67 +1,87 @@
|
||||
<template>
|
||||
<div class="cv-header">
|
||||
<div class="cv-header-nav">
|
||||
<button
|
||||
:disabled="!headerProps.previousPeriod"
|
||||
class="previousPeriod"
|
||||
aria-label="Previous Period"
|
||||
@click.prevent="onInput(headerProps.previousPeriod)"
|
||||
v-b-tooltip.hover.top
|
||||
:title="$t('Previous_Period')"
|
||||
v-html="previousYearLabel"/>
|
||||
<button
|
||||
class="previousDay"
|
||||
aria-label="Previous Day"
|
||||
@click.prevent="onDayBack"
|
||||
v-b-tooltip.hover.top
|
||||
:title="$t('Previous_Day')"
|
||||
v-html="previousPeriodLabel"/>
|
||||
<button
|
||||
class="currentPeriod"
|
||||
aria-label="Current Period"
|
||||
@click.prevent="onInput(headerProps.currentPeriod)">
|
||||
{{ headerProps.currentPeriodLabel }}
|
||||
</button>
|
||||
<button
|
||||
class="nextDay"
|
||||
aria-label="Next Day"
|
||||
@click.prevent="onDayForward"
|
||||
v-b-tooltip.hover.top
|
||||
:title="$t('Next_Day')"
|
||||
v-html="nextPeriodLabel"/>
|
||||
<button
|
||||
:disabled="!headerProps.nextPeriod"
|
||||
class="nextPeriod"
|
||||
aria-label="Next Period"
|
||||
v-b-tooltip.hover.top
|
||||
:title="$t('Next_Period')"
|
||||
@click.prevent="onInput(headerProps.nextPeriod)"
|
||||
v-html="nextYearLabel"/>
|
||||
<div class="cv-header-nav d-none d-md-block">
|
||||
<b-button-toolbar key-nav aria-label="Toolbar with button groups">
|
||||
<b-button-group class="mx-1">
|
||||
<b-button v-html="'<<'" @click="onInput(headerProps.previousPeriod)" class="text-white" v-b-tooltip.hover.top
|
||||
:title="$t('Previous_Period')"></b-button>
|
||||
<b-button v-html="'<'" @click="onDayBack" class="text-white" v-b-tooltip.hover.top
|
||||
:title="$t('Previous_Day')"></b-button>
|
||||
</b-button-group>
|
||||
<b-button-group class="mx-1">
|
||||
<b-button @click="onInput(headerProps.currentPeriod)" class="text-white" v-b-tooltip.hover.top
|
||||
:title="$t('Current_Period')"><i class="fas fa-home"></i>
|
||||
</b-button>
|
||||
<b-form-datepicker
|
||||
button-only
|
||||
button-variant="secondary"
|
||||
v-b-tooltip.hover.top
|
||||
:title="$t('Date')"
|
||||
@context="dateSelect" class="text-white"
|
||||
></b-form-datepicker>
|
||||
</b-button-group>
|
||||
<b-button-group class="mx-1">
|
||||
<b-button v-html="'>'" @click="onDayForward" class="text-white" v-b-tooltip.hover.top
|
||||
:title="$t('Next_Day')"></b-button>
|
||||
<b-button v-html="'>>'" @click="onInput(headerProps.nextPeriod)" class="text-white" v-b-tooltip.hover.top
|
||||
:title="$t('Next_Period')"></b-button>
|
||||
</b-button-group>
|
||||
</b-button-toolbar>
|
||||
</div>
|
||||
<div class="periodLabel">
|
||||
<slot name="label">{{ headerProps.periodLabel }}</slot>
|
||||
</div>
|
||||
<div class="actionArea">
|
||||
<button class="btn btn-secondary ical-button pt-1 pb-1 pl-3 pr-3 text-body" @click="exportiCal" v-b-tooltip.hover :title="$t('Export_As_ICal')"><i class="fas fa-calendar"></i></button>
|
||||
<button class="btn btn-success plus-button pt-1 pb-1 pl-3 pr-3 mr-1 ml-1 text-body" @click="$emit('create-new')" v-b-tooltip.hover :title="$t('Create_Meal_Plan_Entry')"><i class="fas fa-plus"></i></button>
|
||||
<span class="delete-area text-danger p-1 mr-2 ml-1 d-none d-sm-flex" @drop.prevent="onDeleteDrop($event)"
|
||||
@dragenter.prevent="onDeleteDragEnter($event)" @dragleave.prevent="onDeleteDragLeave($event)" @dragover.prevent="onDeleteDragEnter"><i class="fas fa-trash"></i> {{ $t('Drag_Here_To_Delete') }}</span>
|
||||
<div class="actionArea pt-1 pb-1 d-none d-lg-flex">
|
||||
<span class="period-span-1 pt-1 pb-1 pl-1 pr-1 d-none d-xl-inline-flex text-body align-items-center">
|
||||
<small>Period:</small>
|
||||
<b-form-select
|
||||
class="ml-1"
|
||||
id="UomInput"
|
||||
v-model="settings.displayPeriodUom"
|
||||
:options="options.displayPeriodUom"
|
||||
></b-form-select>
|
||||
</span>
|
||||
<span class="period-span-2 pt-1 pb-1 pl-1 pr-1 mr-1 ml-1 d-none d-xl-inline-flex text-body align-items-center">
|
||||
<small>Periods:</small>
|
||||
<b-form-select
|
||||
class="ml-1"
|
||||
id="UomInput"
|
||||
v-model="settings.displayPeriodCount"
|
||||
:options="options.displayPeriodCount"
|
||||
></b-form-select>
|
||||
</span>
|
||||
<span class="delete-area text-danger p-1 mr-2 ml-1 d-none d-sm-flex align-items-center"
|
||||
@drop.prevent="onDeleteDrop($event)"
|
||||
@dragenter.prevent="onDeleteDragEnter($event)" @dragleave.prevent="onDeleteDragLeave($event)"
|
||||
@dragover.prevent="onDeleteDragEnter"><i class="fa fa-trash"></i> {{ $t('Drag_Here_To_Delete') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "MealPlanCalenderHeader",
|
||||
computed: {
|
||||
settings: {
|
||||
get: function () {
|
||||
return this.settings_prop
|
||||
},
|
||||
set: function (value) {
|
||||
this.$emit('change', value)
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
headerProps: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
options: {},
|
||||
previousYearLabel: {type: String, default: "<<"},
|
||||
previousPeriodLabel: {type: String, default: "<"},
|
||||
nextPeriodLabel: {type: String, default: ">"},
|
||||
nextYearLabel: {type: String, default: ">>"},
|
||||
iCalUrl: {type: String, default: ""},
|
||||
settings_prop: {}
|
||||
},
|
||||
methods: {
|
||||
onDayForward() {
|
||||
@ -70,8 +90,8 @@ export default {
|
||||
onDayBack() {
|
||||
this.$emit("set-starting-day-back")
|
||||
},
|
||||
exportiCal() {
|
||||
window.open(this.iCalUrl)
|
||||
dateSelect(ctx) {
|
||||
this.$emit("input", ctx.selectedDate)
|
||||
},
|
||||
onInput(d) {
|
||||
this.$emit("input", d)
|
||||
@ -117,13 +137,13 @@ export default {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.ical-button {
|
||||
.period-span-1 {
|
||||
margin-left: auto;
|
||||
order: 1;
|
||||
user-select: none
|
||||
}
|
||||
|
||||
.plus-button {
|
||||
.period-span-2 {
|
||||
order: 2;
|
||||
user-select: none
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div v-hover class="card cv-item meal-plan-card p-0" :key="value.id" :draggable="true"
|
||||
:style="`top:${top};height:${item_height}`"
|
||||
:style="`top:${top};max-height:${item_height}`"
|
||||
@dragstart="onDragItemStart(value, $event)"
|
||||
@click="onClickItem(value, $event)"
|
||||
:aria-grabbed="value == currentDragItem"
|
||||
@ -11,7 +11,7 @@
|
||||
<span class="font-light text-center" v-if="entry.entry.meal_type.icon != null">{{
|
||||
entry.entry.meal_type.icon
|
||||
}}</span>
|
||||
<span class="font-light">{{ entry.entry.meal_type.name }}</span>
|
||||
<span class="font-light d-none d-md-inline">{{ entry.entry.meal_type.name }}</span>
|
||||
</div>
|
||||
<div class="card-img-overlay h-100 d-flex flex-column justify-content-right float-right text-right p-0"
|
||||
v-if="detailed">
|
||||
@ -29,7 +29,7 @@
|
||||
<div class="card-header p-1 text-center" v-if="detailed" :style="`background-color: ${background_color}`">
|
||||
<span class="font-light">{{ title }}</span>
|
||||
</div>
|
||||
<b-img fluid class="card-img-bottom" :src="entry.entry.recipe.image" v-if="hasRecipe && detailed"></b-img>
|
||||
<b-img fluid class="card-img-bottom" :src="entry.entry.recipe.image" v-if="hasRecipe && detailed" ></b-img>
|
||||
<b-img fluid class="card-img-bottom" :src="image_placeholder"
|
||||
v-if="detailed && ((!hasRecipe && entry.entry.note === '') || (hasRecipe && entry.entry.recipe.image === null))"></b-img>
|
||||
<div class="card-body p-1" v-if="detailed && entry.entry.recipe == null"
|
||||
@ -94,12 +94,10 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
onDragItemStart(calendarItem, windowEvent) {
|
||||
windowEvent.dataTransfer.setData("text", calendarItem.id.toString())
|
||||
this.$emit("dragstart", calendarItem, windowEvent)
|
||||
return true
|
||||
},
|
||||
onContextMenuOpen(calendarItem, windowEvent) {
|
||||
windowEvent.dataTransfer.setData("text", calendarItem.id.toString())
|
||||
this.$emit("dragstart", calendarItem, windowEvent)
|
||||
return true
|
||||
},
|
||||
|
||||
@ -189,5 +189,14 @@
|
||||
"New_Meal_Type": "New Meal type",
|
||||
"Week_Numbers": "Week numbers",
|
||||
"Show_Week_Numbers": "Show week numbers ?",
|
||||
"Export_As_ICal": "Export current period to .ical format"
|
||||
"Export_As_ICal": "Export current period to iCal format",
|
||||
"Export_To_ICal": "Export .ics",
|
||||
"Cannot_Add_Notes_To_Shopping": "Notes cannot be added to the shopping list",
|
||||
"Added_To_Shopping_List": "Added to shopping list",
|
||||
"Shopping_List_Empty": "Your shopping list is currently empty, you can add items via the context menu of a meal plan entry (right click on the card or left click the menu icon)",
|
||||
"Next_Period": "Next Period",
|
||||
"Previous_Period": "Previous Period",
|
||||
"Current_Period": "Current Period",
|
||||
"Next_Day": "Next Day",
|
||||
"Previous_Day": "Previous Day"
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user