first few pieces

vue3/src/apps/tandoor/Tandoor.vue

@@ -1,46 +1,46 @@
 <template>
     <v-app>
 
-            <v-app-bar color="primary">
-                <template v-slot:prepend>
-                    <v-app-bar-nav-icon></v-app-bar-nav-icon>
-                </template>
+<!--        <v-app-bar color="tandoor">-->
+<!--            <template v-slot:prepend>-->
+<!--                <v-app-bar-nav-icon></v-app-bar-nav-icon>-->
+<!--            </template>-->
 
-                <v-app-bar-title>
-                    <v-img height="40px" src="../../assets/brand_logo.svg"></v-img>
-                </v-app-bar-title>
-            </v-app-bar>
+<!--            <v-app-bar-title>-->
+<!--                Tandoor-->
+<!--            </v-app-bar-title>-->
+<!--        </v-app-bar>-->
 
 
-            <v-main>
-                <v-container>
-                    <router-view></router-view>
-                </v-container>
-            </v-main>
+        <v-main>
+            <v-container fluid class="pa-0 ma-0">
+                <router-view></router-view>
+            </v-container>
+        </v-main>
 
-            <v-bottom-navigation>
-                <v-btn value="recent" to="/">
-                    <v-icon icon="fas fa-book"/>
-                    <span>Recipes</span>
-                </v-btn>
+        <v-bottom-navigation>
+            <v-btn value="recent" to="/">
+                <v-icon icon="fas fa-book"/>
+                <span>Recipes</span>
+            </v-btn>
 
-                <v-btn value="favorites" to="/about">
-                    <v-icon icon="fas fa-calendar-alt"></v-icon>
+            <v-btn value="favorites">
+                <v-icon icon="fas fa-calendar-alt"></v-icon>
 
-                    <span>MealPlan</span>
-                </v-btn>
+                <span>MealPlan</span>
+            </v-btn>
 
-                <v-btn value="nearby">
-                    <v-icon icon="fas fa-shopping-cart"></v-icon>
+            <v-btn value="nearby" to="/shopping">
+                <v-icon icon="fas fa-shopping-cart"></v-icon>
 
-                    <span>Shopping</span>
-                </v-btn>
-                <v-btn value="nearby">
-                    <v-icon icon="fas fa-book-open"></v-icon>
+                <span>Shopping</span>
+            </v-btn>
+            <v-btn value="nearby">
+                <v-icon icon="fas fa-book-open"></v-icon>
 
-                    <span>Books</span>
-                </v-btn>
-            </v-bottom-navigation>
+                <span>Books</span>
+            </v-btn>
+        </v-bottom-navigation>
 
     </v-app>
 </template>

vue3/src/apps/tandoor/main.ts

@@ -12,7 +12,7 @@ import RecipeSearchPage from "@/pages/RecipeSearchPage.vue";
 import RecipeViewPage from "@/pages/RecipeViewPage.vue";
 
 const routes = [
-    {path: '/', component: RecipeSearchPage},
+    {path: '/search', component: RecipeSearchPage},
     {path: '/shopping', component: ShoppingListPage},
     {path: '/recipe/:id', component: RecipeViewPage, props: true},
 ]

vue3/src/components/display/KeywordsComponent.vue

@@ -1,22 +1,21 @@
 <template>
-    <v-chip color="info" size="x-small" v-for="k in keywords"> {{ k?.label }} </v-chip>
+
+    <v-chip color="info" size="x-small" v-for="k in keywords"> {{ k?.label }}</v-chip>
+
 </template>
 
 <script lang="ts">
 
 import {Keyword} from "@/openapi";
+import {PropType} from "vue";
 
 export default {
     name: 'KeywordsComponent',
     mixins: [],
     props: {
-        keywords: [] as Keyword[],
+        keywords: Array as PropType<Array<Keyword>>,
     },
-    computed: {
-
-    },
-    methods: {
-
-    }
+    computed: {},
+    methods: {}
 }
 </script>

vue3/src/components/display/RecipeCardComponent.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-card class="">
+    <v-card :to="`/recipe/${recipe.id}`">
 
         <v-img
             cover
@@ -33,9 +33,7 @@
 
             <div>{{ recipe.description }}</div>
         </v-card-text>
-        <v-card-actions>
-            <v-btn :to="`/recipe/${recipe.id}`">Open</v-btn>
-        </v-card-actions>
+
     </v-card>
 </template>
 

vue3/src/components/display/RecipeViewComponent.vue

@@ -0,0 +1,89 @@
+<template>
+    <v-card to="/search">
+        <v-card-title><i class="fas fa-chevron-left mr-3"></i>{{ recipe.name }}</v-card-title>
+    </v-card>
+
+    <v-img cover lazy :src="recipe.image"></v-img>
+
+
+    <v-card>
+
+        <v-container>
+            <v-row class="text-center text-body-2">
+                <v-col class="pt-1 pb-1">
+                    <i class="fas fa-cogs"></i> {{ recipe.workingTime }} min<br/>
+                    <v-label>Working Time</v-label>
+                </v-col>
+                <v-col class="pt-1 pb-1">
+                    <div><i class="fas fa-hourglass-half"></i> {{ recipe.waitingTime }} min</div>
+                    <div class="text-grey">Waiting Time</div>
+                </v-col>
+                <v-col class="pt-1 pb-1">
+                    <i class="fas fa-calendar-alt"></i> {{ recipe.servings }} <br/>
+                    <div class="text-grey"><span v-if="recipe?.servingsText">{{ recipe.servingsText }}</span><span v-else>Servings</span></div>
+                </v-col>
+
+            </v-row>
+        </v-container>
+
+        <v-card-subtitle v-if="recipe?.description"> {{ recipe.description }}</v-card-subtitle>
+        <v-card-subtitle>
+            <KeywordsComponent :keywords="recipe?.keywords"></KeywordsComponent>
+        </v-card-subtitle>
+
+
+        <v-card-text>
+
+            <v-chip size="small" color="primary" label>
+                <v-icon icon="fa fa-clock" class="mr-2"></v-icon>
+                {{ recipe.workingTime }} min
+            </v-chip>
+            <v-chip size="small" color="primary" label>
+                <v-icon icon="fas fa-hourglass-half" class="mr-2"></v-icon>
+                {{ recipe.waitingTime }} min
+            </v-chip>
+
+        </v-card-text>
+    </v-card>
+
+    <v-btn color="primary" id="id_btn_test">test</v-btn>
+
+    <v-dialog
+    activator="parent">
+
+
+        <template #default>
+            <v-card title="Servings">
+                <v-card-text>
+                    <v-btn>{{recipe.servings / 2}}</v-btn>
+                    <v-text-field v-model="recipe.servings">
+                        <template #append><v-btn @click="recipe.servings++">+</v-btn></template>
+                        <template #prepend><v-btn @click="recipe.servings--">-</v-btn></template>
+                    </v-text-field>
+                    <v-btn>{{recipe.servings * 2}}</v-btn>
+                </v-card-text>
+
+
+            </v-card>
+        </template>
+    </v-dialog>
+
+</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from 'vue'
+import {Recipe} from "@/openapi";
+import KeywordsComponent from "@/components/display/KeywordsComponent.vue";
+
+export default defineComponent({
+    name: "RecipeViewComponent",
+    components: {KeywordsComponent},
+    props: {
+        recipe: {} as PropType<Recipe>
+    }
+})
+</script>
+
+<style scoped>
+
+</style>

vue3/src/pages/RecipeViewPage.vue

@@ -1,18 +1,15 @@
 <template>
-    <v-img max-height="15vh" :src="recipe.image"></v-img>
-    <h3>{{ recipe.name }}</h3>
-    {{ recipe.description }}
-
-    {{recipe}}
+    <RecipeViewComponent :recipe="recipe"></RecipeViewComponent>
 </template>
 
 <script lang="ts">
 import {defineComponent} from 'vue'
 import {ApiApi, Recipe} from "@/openapi";
+import RecipeViewComponent from "@/components/display/RecipeViewComponent.vue";
 
 export default defineComponent({
     name: "RecipeSearchPage",
-    components: {},
+    components: {RecipeViewComponent},
     props: {
         id: Number
     },

vue3/src/vuetify.ts

@@ -12,6 +12,8 @@ export default createVuetify({
         themes: {
             light: {
                 colors: {
+                    background: '#f5efea',
+                    tandoor: '#ddbf86',
                     primary: '#b98766',
                     secondary: '#b55e4f',
                     success: '#82aa8b',