some more things in recipe view

vue3/src/components/display/KeywordsBar.vue

@@ -10,7 +10,7 @@ import {Keyword} from "@/openapi";
 import {PropType} from "vue";
 
 export default {
-    name: 'KeywordsComponent',
+    name: 'KeywordsBar',
     mixins: [],
     props: {
         keywords: Array as PropType<Array<Keyword>>,

vue3/src/components/display/RecipeCard.vue

@@ -39,11 +39,11 @@
 
 <script lang="ts">
 import {defineComponent} from 'vue'
-import KeywordsComponent from "@/components/display/KeywordsComponent.vue";
+import KeywordsComponent from "@/components/display/KeywordsBar.vue";
 import {Recipe} from "@/openapi";
 
 export default defineComponent({
-    name: "RecipeCardComponent",
+    name: "RecipeCard",
     components: {KeywordsComponent},
     props: {
         recipe: {} as Recipe

vue3/src/components/display/RecipeView.vue

@@ -1,13 +1,12 @@
 <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-card-title>{{ recipe.name }}</v-card-title>
+
         <v-container>
             <v-row class="text-center text-body-2">
                 <v-col class="pt-1 pb-1">
@@ -19,8 +18,14 @@
                     <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>
+                    <NumberScalerDialog :number="recipe.servings" @change="recipe.servings = $event.number" title="Servings">
+                        <template #activator>
+                            <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>
+                        </template>
+                    </NumberScalerDialog>
+
+
                 </v-col>
 
             </v-row>
@@ -28,7 +33,7 @@
 
         <v-card-subtitle v-if="recipe?.description"> {{ recipe.description }}</v-card-subtitle>
         <v-card-subtitle>
-            <KeywordsComponent :keywords="recipe?.keywords"></KeywordsComponent>
+            <KeywordsBar :keywords="recipe?.keywords"></KeywordsBar>
         </v-card-subtitle>
 
 
@@ -42,44 +47,33 @@
                 <v-icon icon="fas fa-hourglass-half" class="mr-2"></v-icon>
                 {{ recipe.waitingTime }} min
             </v-chip>
+            <v-chip size="small" color="primary" label>
+                <v-icon icon="fas fa-calendar" class="mr-2"></v-icon>
+                {{ recipe.lastCooked }}
+            </v-chip>
+            <v-rating v-model="recipe.rating" color="tandoor"></v-rating>
 
         </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";
+import {Recipe} from "@/openapi"
+import KeywordsBar from "@/components/display/KeywordsBar.vue"
+import NumberScalerDialog from "@/components/inputs/NumberScalerDialog.vue"
 
 export default defineComponent({
-    name: "RecipeViewComponent",
-    components: {KeywordsComponent},
+    name: "RecipeView",
+    components: {NumberScalerDialog, KeywordsBar},
     props: {
-        recipe: {} as PropType<Recipe>
+        recipe: {
+            type: Object as PropType<Recipe>,
+            required: true
+        }
     }
 })
 </script>

vue3/src/components/inputs/NumberScalerDialog.vue

@@ -0,0 +1,98 @@
+<template>
+    <v-dialog width="500" activator="parent" v-model="dialog">
+        <template v-slot:activator="{ props }">
+            <slot name="activator">
+                <v-btn v-bind="props" text="Open Dialog"></v-btn>
+            </slot>
+        </template>
+
+        <template v-slot:default="{ isActive }">
+            <v-card :title="title">
+                <v-card-text>
+                    Change Number
+                </v-card-text>
+
+                <v-card-text>
+                    <v-btn-group divided color="primary">
+                        <v-btn @click="updateNumber( 'half')"><i class="fas fa-divide"></i> 2
+                        </v-btn>
+                        <v-btn @click="updateNumber( 'sub')"><i class="fas fa-minus"></i>
+                        </v-btn>
+                        <v-btn @click="updateNumber('prompt')">
+                            {{ mutable_number }}
+                        </v-btn>
+                        <v-btn @click="updateNumber( 'add')"><i class="fas fa-plus"></i>
+                        </v-btn>
+                        <v-btn @click="updateNumber('double')"><i class="fas fa-times"></i> 2
+                        </v-btn>
+                    </v-btn-group>
+
+                    <v-text-field type="number" v-model.number="mutable_number" @change="updateNumber('set')"></v-text-field>
+                </v-card-text>
+                <v-card-actions>
+                    <v-btn rounded variant="outlined" @click="dialog = false">Close</v-btn>
+                </v-card-actions>
+            </v-card>
+
+        </template>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+
+import {defineComponent} from 'vue'
+
+export default defineComponent({
+    name: "NumberScalerDialog",
+    emits: {
+        change(payload: { number: number }) {
+            return payload
+        }
+    },
+    props: {
+        number: {type: Number, default: 0},
+        title: {type: String, default: 'Number'}
+    },
+    data() {
+        return {
+            dialog: false,
+            mutable_number: 0
+        }
+    },
+    watch: {
+        number: function (newVal) {
+            this.mutable_number = newVal
+        }
+    },
+    mounted() {
+        this.mutable_number = this.number
+    },
+    methods: {
+        /**
+         * perform given operation on linked number
+         * @param operation update mode
+         */
+        updateNumber: function (operation: string) {
+            if (operation === 'half') {
+                this.mutable_number = this.number / 2
+            }
+            if (operation === 'double') {
+                this.mutable_number = this.number * 2
+            }
+            if (operation === 'add') {
+                this.mutable_number = this.number + 1
+            }
+            if (operation === 'sub') {
+                this.mutable_number = this.number - 1
+            }
+
+            this.$emit('change', {number: this.mutable_number})
+        }
+    },
+})
+</script>
+
+
+<style scoped>
+
+</style>