ical export and tooltips for new meal plan
This commit is contained in:
parent
a9d3267ca3
commit
2e2b79c093
@ -27,6 +27,8 @@
|
|||||||
window.IMAGE_PLACEHOLDER = "{% static 'assets/recipe_no_image.svg' %}"
|
window.IMAGE_PLACEHOLDER = "{% static 'assets/recipe_no_image.svg' %}"
|
||||||
|
|
||||||
window.CUSTOM_LOCALE = '{{ request.LANGUAGE_CODE }}'
|
window.CUSTOM_LOCALE = '{{ request.LANGUAGE_CODE }}'
|
||||||
|
|
||||||
|
window.ICAL_URL = '{% url 'api_get_plan_ical' 12345 6789 %}'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{% render_bundle 'meal_plan_view' %}
|
{% render_bundle 'meal_plan_view' %}
|
||||||
|
@ -23,7 +23,7 @@
|
|||||||
<meal-plan-calender-header
|
<meal-plan-calender-header
|
||||||
:header-props="headerProps"
|
:header-props="headerProps"
|
||||||
@input="setShowDate" @delete-dragged="deleteEntry(dragged_item)"
|
@input="setShowDate" @delete-dragged="deleteEntry(dragged_item)"
|
||||||
@create-new="createEntryClick(new Date())"/>
|
@create-new="createEntryClick(new Date())" :i-cal-url="iCalUrl"/>
|
||||||
</template>
|
</template>
|
||||||
</calendar-view>
|
</calendar-view>
|
||||||
</div>
|
</div>
|
||||||
@ -152,15 +152,15 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
import {BootstrapVue} from 'bootstrap-vue'
|
||||||
|
import 'bootstrap-vue/dist/bootstrap-vue.css'
|
||||||
|
|
||||||
import ContextMenu from "@/components/ContextMenu/ContextMenu";
|
import ContextMenu from "@/components/ContextMenu/ContextMenu";
|
||||||
import ContextMenuItem from "@/components/ContextMenu/ContextMenuItem";
|
import ContextMenuItem from "@/components/ContextMenu/ContextMenuItem";
|
||||||
import "vue-simple-calendar/static/css/default.css"
|
import "vue-simple-calendar/static/css/default.css"
|
||||||
import {CalendarView, CalendarMathMixin} from "vue-simple-calendar/src/components/bundle";
|
import {CalendarView, CalendarMathMixin} from "vue-simple-calendar/src/components/bundle";
|
||||||
import Vue from "vue";
|
import Vue from "vue";
|
||||||
import {BootstrapVue} from "bootstrap-vue";
|
|
||||||
import {ApiApiFactory} from "@/utils/openapi/api";
|
import {ApiApiFactory} from "@/utils/openapi/api";
|
||||||
import RecipeCard from "../../components/RecipeCard";
|
|
||||||
import MealPlanCard from "../../components/MealPlanCard";
|
import MealPlanCard from "../../components/MealPlanCard";
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
import {ApiMixin, StandardToasts} from "@/utils/utils";
|
import {ApiMixin, StandardToasts} from "@/utils/utils";
|
||||||
@ -224,7 +224,8 @@ export default {
|
|||||||
},
|
},
|
||||||
current_period: null,
|
current_period: null,
|
||||||
entryEditing: {},
|
entryEditing: {},
|
||||||
edit_modal_show: false
|
edit_modal_show: false,
|
||||||
|
ical_url: window.ICAL_URL
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -276,6 +277,11 @@ export default {
|
|||||||
return "1.6rem"
|
return "1.6rem"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
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)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$nextTick(function () {
|
this.$nextTick(function () {
|
||||||
|
@ -42,9 +42,10 @@
|
|||||||
<div class="periodLabel">
|
<div class="periodLabel">
|
||||||
<slot name="label">{{ headerProps.periodLabel }}</slot>
|
<slot name="label">{{ headerProps.periodLabel }}</slot>
|
||||||
</div>
|
</div>
|
||||||
<div class="actionArea d-none d-sm-flex">
|
<div class="actionArea">
|
||||||
<button class="btn btn-success plus-button pt-1 pb-1" @click="$emit('create-new')"><i class="fas fa-plus"></i></button>
|
<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>
|
||||||
<span class="delete-area text-danger p-1 mr-2 ml-2" @drop.prevent="onDeleteDrop($event)"
|
<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
|
@dragenter.prevent="onDeleteDragEnter($event)" @dragleave.prevent="onDeleteDragLeave($event)" @dragover.prevent="onDeleteDragEnter"><i
|
||||||
class="fas fa-trash"></i> {{ $t('Drag_Here_To_Delete') }}</span>
|
class="fas fa-trash"></i> {{ $t('Drag_Here_To_Delete') }}</span>
|
||||||
</div>
|
</div>
|
||||||
@ -62,8 +63,12 @@ export default {
|
|||||||
previousPeriodLabel: {type: String, default: "<"},
|
previousPeriodLabel: {type: String, default: "<"},
|
||||||
nextPeriodLabel: {type: String, default: ">"},
|
nextPeriodLabel: {type: String, default: ">"},
|
||||||
nextYearLabel: {type: String, default: ">>"},
|
nextYearLabel: {type: String, default: ">>"},
|
||||||
|
iCalUrl: {type: String, default: ""},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
exportiCal() {
|
||||||
|
window.open(this.iCalUrl)
|
||||||
|
},
|
||||||
onInput(d) {
|
onInput(d) {
|
||||||
this.$emit("input", d)
|
this.$emit("input", d)
|
||||||
},
|
},
|
||||||
@ -108,17 +113,20 @@ export default {
|
|||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.plus-button {
|
.ical-button {
|
||||||
border-style: dotted;
|
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
order: 1;
|
order: 1;
|
||||||
user-select: none
|
user-select: none
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.plus-button {
|
||||||
|
order: 2;
|
||||||
|
user-select: none
|
||||||
|
}
|
||||||
|
|
||||||
.delete-area {
|
.delete-area {
|
||||||
border-style: dotted;
|
border-style: dotted;
|
||||||
margin-left: auto;
|
order: 3;
|
||||||
order: 2;
|
|
||||||
user-select: none
|
user-select: none
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
@dragstart="onDragItemStart(value, $event)"
|
@dragstart="onDragItemStart(value, $event)"
|
||||||
@click="onClickItem(value, $event)"
|
@click="onClickItem(value, $event)"
|
||||||
:aria-grabbed="value == currentDragItem"
|
:aria-grabbed="value == currentDragItem"
|
||||||
:class="value.classes" :title="title"
|
:class="value.classes"
|
||||||
@contextmenu.prevent="$emit('open-context-menu', $event, value)">
|
@contextmenu.prevent="$emit('open-context-menu', $event, value)">
|
||||||
<div class="card-header p-1 text-center text-primary border-bottom-0" v-if="detailed"
|
<div class="card-header p-1 text-center text-primary border-bottom-0" v-if="detailed"
|
||||||
:style="`background-color: ${background_color}`">
|
:style="`background-color: ${background_color}`">
|
||||||
@ -24,24 +24,26 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-header p-1 text-center" v-if="detailed" :style="`background-color: ${background_color}`">
|
<div class="card-header p-1 text-center" v-if="detailed" :style="`background-color: ${background_color}`">
|
||||||
<span class="font-light">{{ title }}</span>
|
<span class="font-light">{{ title }}</span>
|
||||||
</div>
|
</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>
|
<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"
|
<div class="card-body p-1" v-if="detailed && entry.entry.recipe == null"
|
||||||
:style="`background-color: ${background_color}`">
|
:style="`background-color: ${background_color}`">
|
||||||
<p>{{ entry.entry.note }}</p>
|
<p>{{ entry.entry.note }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="row p-1 flex-nowrap" v-if="!detailed" :style="`background-color: ${background_color}`">
|
<div class="row p-1 flex-nowrap" v-if="!detailed" :style="`background-color: ${background_color}`">
|
||||||
<div class="col-2">
|
<div class="col-2">
|
||||||
<span class="font-light text-center" v-if="entry.entry.meal_type.icon != null">{{
|
<span class="font-light text-center" v-if="entry.entry.meal_type.icon != null" v-b-tooltip.hover.left
|
||||||
|
:title=" entry.entry.meal_type.name">{{
|
||||||
entry.entry.meal_type.icon
|
entry.entry.meal_type.icon
|
||||||
}}</span>
|
}}</span>
|
||||||
<span class="font-light text-center" v-if="entry.entry.meal_type.icon == null">❓</span>
|
<span class="font-light text-center" v-if="entry.entry.meal_type.icon == null" v-b-tooltip.hover.left
|
||||||
|
:title=" entry.entry.meal_type.name">❓</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-10 d-inline-block text-truncate" :style="`max-height:${item_height}`">
|
<div class="col-10 d-inline-block text-truncate" :style="`max-height:${item_height}`">
|
||||||
<span class="font-light">{{ title }}</span>
|
<span class="font-light">{{ title }}</span>
|
||||||
|
@ -186,5 +186,6 @@
|
|||||||
"Meal_Type_Required": "Meal type is required",
|
"Meal_Type_Required": "Meal type is required",
|
||||||
"Title_or_Recipe_Required": "Title or recipe selection required",
|
"Title_or_Recipe_Required": "Title or recipe selection required",
|
||||||
"Color": "Color",
|
"Color": "Color",
|
||||||
"New_Meal_Type": "New Meal type"
|
"New_Meal_Type": "New Meal type",
|
||||||
|
"Export_As_ICal": "Export current period to .ical format"
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user