meal plan tweaks

vue3/src/components/display/MealPlanView.vue

@@ -2,7 +2,8 @@
     <v-row class="h-100">
         <v-col>
             <!-- TODO add hint about CTRL key while drag/drop -->
-            <CalendarView
+            <calendar-view
+                :show-date="calendarDate"
                 :items="planItems"
                 class="theme-default"
                 :item-content-height="calendarItemHeight"
@@ -12,9 +13,10 @@
                 :display-period-count="useUserPreferenceStore().deviceSettings.mealplan_displayPeriodCount"
                 :starting-day-of-week="useUserPreferenceStore().deviceSettings.mealplan_startingDayOfWeek"
                 :display-week-numbers="useUserPreferenceStore().deviceSettings.mealplan_displayWeekNumbers"
+                :current-period-label="$t('Today')"
                 @click-date="(date : Date, calendarItems: [], windowEvent: any) => { newPlanDialogDefaultItem.fromDate = date; newPlanDialogDefaultItem.toDate = date; newPlanDialog = true }">
                 <template #header="{ headerProps }">
-                    <CalendarViewHeader :header-props="headerProps"></CalendarViewHeader>
+                    <calendar-view-header :header-props="headerProps" @input="(d:Date) => calendarDate = d"></calendar-view-header>
                 </template>
                 <template #item="{ value, weekStartDate, top }">
                     <meal-plan-calendar-item
@@ -26,7 +28,7 @@
                         :detailed-items="lgAndUp"
                     ></meal-plan-calendar-item>
                 </template>
-            </CalendarView>
+            </calendar-view>
 
             <model-edit-dialog model="MealPlan" v-model="newPlanDialog" :itemDefaults="newPlanDialogDefaultItem"
                                @create="(arg: any) => useMealPlanStore().plans.set(arg.id, arg)"></model-edit-dialog>
@@ -52,6 +54,8 @@ import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
 
 const {lgAndUp} = useDisplay()
 
+const calendarDate = ref(new Date())
+
 const currentlyDraggedMealplan = ref({} as IMealPlanNormalizedCalendarItem)
 
 const newPlanDialog = ref(false)
@@ -74,8 +78,11 @@ const planItems = computed(() => {
     return items
 })
 
+/**
+ * determine item height (one or two rows) based on how much space is available and how many days are shown
+ */
 const calendarItemHeight = computed(() => {
-    if (lgAndUp.value) {
+    if (lgAndUp.value && useUserPreferenceStore().deviceSettings.mealplan_displayPeriod == 'week') {
         return '2.6rem'
     } else {
         return '1.3rem'

vue3/src/components/display/NavigationDrawerContextMenu.vue

@@ -11,12 +11,22 @@
         </v-list-item>
     </template>
 
+    <template v-if="route.name == 'view_mealplan'">
+        <v-divider></v-divider>
+        <v-list-subheader>{{$t('Settings')}}</v-list-subheader>
+        <v-list-item>
+            <meal-plan-device-settings></meal-plan-device-settings>
+        </v-list-item>
+    </template>
+
 </template>
 
 <script setup lang="ts">
 
 import {useRoute} from "vue-router";
 import {getListModels} from "@/types/Models";
+import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
+import MealPlanDeviceSettings from "@/components/settings/MealPlanDeviceSettings.vue";
 
 const route = useRoute()
 

vue3/src/components/settings/MealPlanDeviceSettings.vue

@@ -0,0 +1,45 @@
+<template>
+
+    <v-select v-model="useUserPreferenceStore().deviceSettings.mealplan_displayPeriod" :label="$t('Period')" :hint="$t('Plan_Period_To_Show')" :items="MEALPLAN_PERIODS"
+              persistent-hint></v-select>
+    <v-select v-model="useUserPreferenceStore().deviceSettings.mealplan_displayPeriodCount" :label="$t('Periods')" :hint="$t('Plan_Show_How_Many_Periods')"
+              :items="MEALPLAN_PERIOD_COUNTS" persistent-hint></v-select>
+
+    <v-select v-model="useUserPreferenceStore().deviceSettings.mealplan_startingDayOfWeek" :label="$t('Starting_Day')" :hint="$t('Starting_Day')"
+              :items="MEALPLAN_STARTING_DAYS" persistent-hint></v-select>
+
+    <v-checkbox v-model="useUserPreferenceStore().deviceSettings.mealplan_displayWeekNumbers" :label="$t('Week_Numbers')" :hint="$t('Show_Week_Numbers')"
+                persistent-hint></v-checkbox>
+
+</template>
+
+<script setup lang="ts">
+
+import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
+import {useI18n} from "vue-i18n";
+import {ref} from "vue";
+
+const {t} = useI18n()
+
+const MEALPLAN_PERIODS = ref([
+    {title: t("Week"), value: "week"},
+    {title: t("Month"), value: "month"},
+    {title: t("Year"), value: "year"},
+])
+const MEALPLAN_STARTING_DAYS = ref([
+    {title: t("Sunday"), value: 0},
+    {title: t("Monday"), value: 1},
+    {title: t("Tuesday"), value: 2},
+    {title: t("Wednesday"), value: 3},
+    {title: t("Thursday"), value: 4},
+    {title: t("Friday"), value: 5},
+    {title: t("Saturday"), value: 6},
+])
+const MEALPLAN_PERIOD_COUNTS = ref([1, 2, 3, 4])
+
+</script>
+
+
+<style scoped>
+
+</style>

vue3/src/components/settings/MealPlanSettings.vue

@@ -13,16 +13,7 @@
         <v-divider></v-divider>
         <p class="text-subtitle-2 mb-2">{{ $t('DeviceSettingsHelp') }}</p>
 
-        <v-select v-model="useUserPreferenceStore().deviceSettings.mealplan_displayPeriod" :label="$t('Period')" :hint="$t('Plan_Period_To_Show')" :items="MEALPLAN_PERIODS"
-                  persistent-hint></v-select>
-        <v-select v-model="useUserPreferenceStore().deviceSettings.mealplan_displayPeriodCount" :label="$t('Periods')" :hint="$t('Plan_Show_How_Many_Periods')"
-                  :items="MEALPLAN_PERIOD_COUNTS" persistent-hint></v-select>
-
-        <v-select v-model="useUserPreferenceStore().deviceSettings.mealplan_startingDayOfWeek" :label="$t('Starting_Day')" :hint="$t('Starting_Day')"
-                  :items="MEALPLAN_STARTING_DAYS" persistent-hint></v-select>
-
-        <v-checkbox v-model="useUserPreferenceStore().deviceSettings.mealplan_displayWeekNumbers" :label="$t('Week_Numbers')" :hint="$t('Show_Week_Numbers')"
-                    persistent-hint></v-checkbox>
+        <meal-plan-device-settings></meal-plan-device-settings>
 
         <p class="text-h6 mt-2">{{ $t('Meal_Types') }}
             <v-btn prepend-icon="$create" color="create" size="small" class="float-right">
@@ -59,24 +50,7 @@ import {onMounted, ref} from "vue";
 import {ApiApi, MealType} from "@/openapi";
 import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
 import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
-
-const {t} = useI18n()
-
-const MEALPLAN_PERIODS = ref([
-    {title: t("Week"), value: "week"},
-    {title: t("Month"), value: "month"},
-    {title: t("Year"), value: "year"},
-])
-const MEALPLAN_STARTING_DAYS = ref([
-    {title: t("Sunday"), value: 0},
-    {title: t("Monday"), value: 1},
-    {title: t("Tuesday"), value: 2},
-    {title: t("Wednesday"), value: 3},
-    {title: t("Thursday"), value: 4},
-    {title: t("Friday"), value: 5},
-    {title: t("Saturday"), value: 6},
-])
-const MEALPLAN_PERIOD_COUNTS = ref([1, 2, 3, 4])
+import MealPlanDeviceSettings from "@/components/settings/MealPlanDeviceSettings.vue";
 
 const mealTypes = ref([] as MealType[])