diff --git a/cookbook/templates/meal_plan_new.html b/cookbook/templates/meal_plan_new.html index e2523eadb..f835d72a9 100644 --- a/cookbook/templates/meal_plan_new.html +++ b/cookbook/templates/meal_plan_new.html @@ -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' %}' {% render_bundle 'meal_plan_view' %} diff --git a/vue/src/apps/MealPlanView/MealPlanView.vue b/vue/src/apps/MealPlanView/MealPlanView.vue index 160e2a6c0..e11dbb944 100644 --- a/vue/src/apps/MealPlanView/MealPlanView.vue +++ b/vue/src/apps/MealPlanView/MealPlanView.vue @@ -6,7 +6,7 @@
@@ -73,7 +76,7 @@ -
+
{{ $t('Meal_Types') }}
- @@ -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; +} \ No newline at end of file diff --git a/vue/src/components/MealPlanCalenderHeader.vue b/vue/src/components/MealPlanCalenderHeader.vue index 065f95bb9..495fe3bdc 100644 --- a/vue/src/components/MealPlanCalenderHeader.vue +++ b/vue/src/components/MealPlanCalenderHeader.vue @@ -1,67 +1,87 @@