From cb8dd3bc99570522a8143cfe84b9db94fc5f8d66 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Sun, 7 Apr 2024 08:29:21 +0200
Subject: [PATCH] sizing and navs

---
 vue3/src/apps/tandoor/Tandoor.vue             | 32 ++++++++++++-------
 vue3/src/apps/tandoor/main.ts                 |  2 +-
 .../display/HorizontalMealPlanWindow.vue      |  6 ++--
 .../display/HorizontalRecipeWindow.vue        | 13 ++++----
 vue3/src/pages/StartPage.vue                  | 23 +------------
 vue3/src/utils/breakpoint_utils.ts            | 26 +++++++++++++++
 6 files changed, 59 insertions(+), 43 deletions(-)
 create mode 100644 vue3/src/utils/breakpoint_utils.ts

diff --git a/vue3/src/apps/tandoor/Tandoor.vue b/vue3/src/apps/tandoor/Tandoor.vue
index 3cc9cf93f..5c4acfcd8 100644
--- a/vue3/src/apps/tandoor/Tandoor.vue
+++ b/vue3/src/apps/tandoor/Tandoor.vue
@@ -1,39 +1,47 @@
 <template>
-    <v-app >
+    <v-app>
 
         <v-app-bar color="tandoor" flat density="comfortable">
-            <router-link :to="{name: 'view_start', params: {}}">
+            <router-link :to="{name: 'view_home', params: {}}">
                 <v-img src="../../assets/brand_logo.svg" width="140px" class="ms-2"></v-img>
             </router-link>
-            <global-search-dialog></global-search-dialog>
             <v-spacer></v-spacer>
-            <!--            <v-btn density="compact" icon="fas fa-ellipsis-v"></v-btn>-->
+            <global-search-dialog></global-search-dialog>
+            <v-avatar color="cyan" class="me-2">V</v-avatar>
         </v-app-bar>
 
-
         <v-main>
             <router-view></router-view>
         </v-main>
 
-        <v-bottom-navigation grow>
-            <v-btn value="recent" to="/">
-                <v-icon icon="fas fa-book"/>
+        <v-navigation-drawer>
+            <v-list-item title="My Application" subtitle="Vuetify"></v-list-item>
+            <v-divider></v-divider>
+            <v-list-item prepend-icon="fas fa-book" title="Home" :to="{name: 'view_home', params: {}}"></v-list-item>
+            <v-list-item prepend-icon="fas fa-calendar-alt" title="Mealplan" :to="{name: 'view_mealplan', params: {}}"></v-list-item>
+            <v-list-item prepend-icon="fas fa-shopping-cart" title="Shopping" :to="{name: 'view_shopping', params: {}}"></v-list-item>
+            <v-list-item prepend-icon="fas fa-bars" title="More" :to="{name: 'view_books', params: {}}"></v-list-item> <!-- TODO link -->
+        </v-navigation-drawer>
+
+        <v-bottom-navigation grow class="d-lg-none">
+            <v-btn value="recent" :to="{name: 'view_home', params: {}}">
+                <v-icon icon="fa-fw fas fa-book "/>
                 <span>Recipes</span>
             </v-btn>
 
             <v-btn value="favorites" to="/mealplan">
-                <v-icon icon="fas fa-calendar-alt"></v-icon>
+                <v-icon icon="fa-fw fas fa-calendar-alt"></v-icon>
 
                 <span>MealPlan</span>
             </v-btn>
 
             <v-btn value="nearby" to="/shopping">
-                <v-icon icon="fas fa-shopping-cart"></v-icon>
+                <v-icon icon="fa-fw fas fa-shopping-cart"></v-icon>
 
                 <span>Shopping</span>
             </v-btn>
-            <v-btn value="nearby" to="/books">
-                <v-icon icon="fas fa-bars"></v-icon>
+            <v-btn value="nearby" to="/books"> <!-- TODO link -->
+                <v-icon icon="fa-fw fas fa-bars"></v-icon>
 
                 <span>More</span>
             </v-btn>
diff --git a/vue3/src/apps/tandoor/main.ts b/vue3/src/apps/tandoor/main.ts
index 29fc8a82d..719460072 100644
--- a/vue3/src/apps/tandoor/main.ts
+++ b/vue3/src/apps/tandoor/main.ts
@@ -18,7 +18,7 @@ import vueform from '@/vueform'
 import SearchPage from "@/pages/SearchPage.vue";
 
 const routes = [
-    {path: '/', component: StartPage, name: 'view_start'},
+    {path: '/', component: StartPage, name: 'view_home'},
     {path: '/search', component: SearchPage, name: 'view_search'},
     {path: '/shopping', component: ShoppingListPage, name: 'view_shopping'},
     {path: '/mealplan', component: MealPlanPage, name: 'view_mealplan'},
diff --git a/vue3/src/components/display/HorizontalMealPlanWindow.vue b/vue3/src/components/display/HorizontalMealPlanWindow.vue
index abdfa2c84..864fffcec 100644
--- a/vue3/src/components/display/HorizontalMealPlanWindow.vue
+++ b/vue3/src/components/display/HorizontalMealPlanWindow.vue
@@ -62,12 +62,14 @@ import {MealPlan, Recipe, RecipeOverview} from "@/openapi";
 import {useMealPlanStore} from "@/stores/MealPlanStore";
 import {DateTime} from "luxon";
 import MealPlanDialog from "@/components/dialogs/MealPlanDialog.vue";
+import {homePageCols} from "@/utils/breakpoint_utils";
+
 
-const {mdAndUp} = useDisplay()
 const loading = ref(false)
 
 let numberOfCols = computed(() => {
-    return mdAndUp.value ? 5 : 2
+    const {name} = useDisplay()
+    return homePageCols(name.value)
 })
 
 type MealPlanGridItem = {
diff --git a/vue3/src/components/display/HorizontalRecipeWindow.vue b/vue3/src/components/display/HorizontalRecipeWindow.vue
index b30fe48d6..cfd0d2657 100644
--- a/vue3/src/components/display/HorizontalRecipeWindow.vue
+++ b/vue3/src/components/display/HorizontalRecipeWindow.vue
@@ -1,7 +1,7 @@
 <template>
     <v-row justify="space-between">
         <v-col>
-            <h2><i v-if="icon != 'undefined'" :class="icon + ' fa-fw'"></i>  {{ title }}</h2>
+            <h2><i v-if="icon != 'undefined'" :class="icon + ' fa-fw'"></i> {{ title }}</h2>
         </v-col>
     </v-row>
 
@@ -20,7 +20,7 @@
     </v-row>
     <v-row v-if="recipeWindows.length == 0 && skeletons > 0">
         <v-col>
-            <v-window >
+            <v-window>
                 <v-window-item>
                     <v-row>
                         <v-col v-for="n in skeletons">
@@ -38,14 +38,14 @@
 <script lang="ts" setup>
 import {computed, PropType, toRefs} from 'vue'
 import RecipeCard from "@/components/display/RecipeCard.vue";
-import {useDisplay} from "vuetify";
+import {DisplayBreakpoint, useDisplay} from "vuetify";
 import {Recipe, RecipeOverview} from "@/openapi";
+import {homePageCols} from "@/utils/breakpoint_utils";
 
-const {mdAndUp} = useDisplay()
 
 const props = defineProps(
     {
-        title: {type: String as PropType<undefined|String>, required: true},
+        title: {type: String as PropType<undefined | String>, required: true},
         icon: {type: String, required: false},
         skeletons: {type: Number, default: 0},
         recipes: {
@@ -57,7 +57,8 @@ const props = defineProps(
 const {title, recipes} = toRefs(props)
 
 let numberOfCols = computed(() => {
-    return mdAndUp.value ? 4 : 2
+    const {name} = useDisplay()
+    return homePageCols(name.value)
 })
 
 type CustomWindow = {
diff --git a/vue3/src/pages/StartPage.vue b/vue3/src/pages/StartPage.vue
index 74c55a277..92718eb53 100644
--- a/vue3/src/pages/StartPage.vue
+++ b/vue3/src/pages/StartPage.vue
@@ -3,7 +3,6 @@
 
         <horizontal-meal-plan-window></horizontal-meal-plan-window>
 
-
         <!--TODO ideas for "start page": new recipes, meal plan, "last year/month/cooked long ago", high rated, random keyword -->
         <!--TODO if nothing comes up for a category, hide the element, probably move fetch logic into component -->
         <horizontal-recipe-scroller title="New Recipes" :skeletons="4" :recipes="new_recipes" icon="fas fa-calendar-alt"></horizontal-recipe-scroller>
@@ -31,27 +30,7 @@ import MealPlanDialog from "@/components/dialogs/MealPlanDialog.vue";
 export default defineComponent({
     name: "StartPage",
     components: {MealPlanDialog, HorizontalMealPlanWindow, HorizontalRecipeScroller, RecipeCard, GlobalSearchDialog, RecipeCardComponent, KeywordsComponent},
-    computed: {
-
-        meal_plan_grid: function () {
-            let grid = []
-
-            if (useMealPlanStore().plan_list.length > 0) {
-                console.log('found plans')
-                for (const x of Array(4).keys()) {
-                    let grid_day_date = DateTime.now().plus({days: x})
-                    console.log('going trough days ', x, grid_day_date)
-                    grid.push({
-                        date: grid_day_date,
-                        create_default_date: grid_day_date.toISODate(), // improve meal plan edit modal to do formatting itself and accept dates
-                        date_label: grid_day_date.toLocaleString(DateTime.DATE_MED),
-                        plan_entries: useMealPlanStore().plan_list.filter(m => (DateTime.fromJSDate(m.fromDate) <= grid_day_date && DateTime.fromJSDate((m.toDate != undefined) ? m.toDate : m.fromDate) >= grid_day_date)),
-                    })
-                }
-            }
-            return grid
-        },
-    },
+    computed: { },
     data() {
         return {
             recipes: [] as Recipe[],
diff --git a/vue3/src/utils/breakpoint_utils.ts b/vue3/src/utils/breakpoint_utils.ts
new file mode 100644
index 000000000..be3621bc6
--- /dev/null
+++ b/vue3/src/utils/breakpoint_utils.ts
@@ -0,0 +1,26 @@
+
+export function homePageCols(breakpoint: string){
+    switch (breakpoint) {
+        case "xs": {
+            return 1
+        }
+        case "sm": {
+            return 2
+        }
+         case "md": {
+            return 4
+        }
+        case "lg": {
+            return 5
+        }
+        case "xl": {
+            return 6
+        }
+        case "xxl": {
+            return 7
+        }
+        default: {
+            return 1
+        }
+    }
+}
\ No newline at end of file