some basic views

vue3/src/apps/tandoor/Tandoor.vue

@@ -1,43 +1,48 @@
 <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-title><v-img height="40px" src="../../assets/brand_logo.svg"></v-img></v-app-bar-title>
-        </v-app-bar>
+            <v-app-bar color="primary">
+                <template v-slot:prepend>
+                    <v-app-bar-nav-icon></v-app-bar-nav-icon>
+                </template>
 
-        <v-main>
-            <router-view></router-view>
-        </v-main>
+                <v-app-bar-title>
+                    <v-img height="40px" src="../../assets/brand_logo.svg"></v-img>
+                </v-app-bar-title>
+            </v-app-bar>
 
-        <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-main>
+                <v-container>
+                    <router-view></router-view>
+                </v-container>
+            </v-main>
 
-                <span>MealPlan</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="nearby">
-                <v-icon icon="fas fa-shopping-cart"></v-icon>
+                <v-btn value="favorites" to="/about">
+                    <v-icon icon="fas fa-calendar-alt"></v-icon>
 
-                <span>Shopping</span>
-            </v-btn>
-            <v-btn value="nearby">
-                <v-icon icon="fas fa-book-open"></v-icon>
+                    <span>MealPlan</span>
+                </v-btn>
+
+                <v-btn value="nearby">
+                    <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>Books</span>
+                </v-btn>
+            </v-bottom-navigation>
 
-                <span>Books</span>
-            </v-btn>
-        </v-bottom-navigation>
     </v-app>
-
-
 </template>
 
 <script lang="ts">

vue3/src/apps/tandoor/main.ts

@@ -9,10 +9,12 @@ import 'vite/modulepreload-polyfill';
 import vuetify from "@/vuetify";
 import ShoppingListPage from "@/pages/ShoppingListPage.vue";
 import RecipeSearchPage from "@/pages/RecipeSearchPage.vue";
+import RecipeViewPage from "@/pages/RecipeViewPage.vue";
 
 const routes = [
     {path: '/', component: RecipeSearchPage},
-    {path: '/about', component: ShoppingListPage},
+    {path: '/shopping', component: ShoppingListPage},
+    {path: '/recipe/:id', component: RecipeViewPage, props: true},
 ]
 
 const router = createRouter({

vue3/src/components/display/KeywordsComponent.vue

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

vue3/src/components/display/RecipeCardComponent.vue

@@ -0,0 +1,58 @@
+<template>
+    <v-card class="">
+
+        <v-img
+            cover
+            height="250"
+            :src="recipe.image"
+        ></v-img>
+
+        <v-card-item>
+            <v-card-title>{{ recipe.name }}</v-card-title>
+
+            <v-card-subtitle>
+                <KeywordsComponent :keywords="recipe.keywords"></KeywordsComponent>
+            </v-card-subtitle>
+        </v-card-item>
+
+        <v-card-text>
+            <v-row align="center" class="mx-0" v-if="recipe.rating">
+                <v-rating
+                    :model-value="recipe.rating"
+                    color="amber"
+                    density="compact"
+                    half-increments
+                    readonly
+                    size="small"
+                ></v-rating>
+
+                <div class="text-grey ms-4">
+                    {{ recipe.rating }}
+                </div>
+            </v-row>
+
+            <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>
+
+<script lang="ts">
+import {defineComponent} from 'vue'
+import KeywordsComponent from "@/components/display/KeywordsComponent.vue";
+import {Recipe} from "@/openapi";
+
+export default defineComponent({
+    name: "RecipeCardComponent",
+    components: {KeywordsComponent},
+    props: {
+        recipe: {} as Recipe
+    }
+})
+</script>
+
+<style scoped>
+
+</style>

vue3/src/openapi/runtime.ts

@@ -13,7 +13,7 @@
  */
 
 
-export const BASE_PATH = "http://localhost".replace(/\/+$/, "");
+export let BASE_PATH = typeof window !== 'undefined' ? localStorage.getItem('BASE_PATH') || '' : location.protocol + '//' + location.host;
 
 export interface ConfigurationParameters {
     basePath?: string; // override base path

vue3/src/pages/RecipeSearchPage.vue

@@ -1,13 +1,35 @@
 <template>
     <h2>Search</h2>
-    <v-input placeholde="Search"></v-input>
+    <v-text-field placeholde="Search"></v-text-field>
+
+    <v-row>
+        <v-col cols="12" sm="3" md="4" v-for="r in recipes" :key="r.id">
+            <RecipeCardComponent :recipe="r"></RecipeCardComponent>
+        </v-col>
+    </v-row>
+
 </template>
 
 <script lang="ts">
 import {defineComponent} from 'vue'
+import {ApiApi, Recipe} from "@/openapi";
+import KeywordsComponent from "@/components/display/KeywordsComponent.vue";
+import RecipeCardComponent from "@/components/display/RecipeCardComponent.vue";
 
 export default defineComponent({
-    name: "RecipeSearchPage"
+    name: "RecipeSearchPage",
+    components: {RecipeCardComponent, KeywordsComponent},
+    data() {
+        return {
+            recipes: [] as Recipe[]
+        }
+    },
+    mounted() {
+        const api = new ApiApi()
+        api.listRecipes().then(r => {
+            this.recipes = r.results
+        })
+    }
 })
 </script>
 

vue3/src/pages/RecipeViewPage.vue

@@ -0,0 +1,35 @@
+<template>
+    <v-img max-height="15vh" :src="recipe.image"></v-img>
+    <h3>{{ recipe.name }}</h3>
+    {{ recipe.description }}
+
+    {{recipe}}
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue'
+import {ApiApi, Recipe} from "@/openapi";
+
+export default defineComponent({
+    name: "RecipeSearchPage",
+    components: {},
+    props: {
+        id: Number
+    },
+    data() {
+        return {
+            recipe: {} as Recipe
+        }
+    },
+    mounted() {
+        const api = new ApiApi()
+        api.retrieveRecipe({id: this.id}).then(r => {
+            this.recipe = r
+        })
+    }
+})
+</script>
+
+<style scoped>
+
+</style>