property editor

vue3/src/components/display/PropertyView.vue

@@ -0,0 +1,34 @@
+<template>
+{{hasFoodProperties}}
+{{hasRecipeProperties}}
+</template>
+
+<script setup lang="ts">
+
+import {computed, PropType} from "vue";
+import {Recipe} from "@/openapi";
+
+const props = defineProps({
+    recipe: {type: {} as PropType<Recipe>, required: true}
+})
+
+const hasRecipeProperties = computed(() => {
+    return props.recipe.properties != undefined && props.recipe.properties.length > 0
+})
+
+const hasFoodProperties = computed(() => {
+    let propertiesFound = false
+    for (const [key, fp] of Object.entries(props.recipe.foodProperties)) {
+        if (fp.total_value !== 0) {
+            propertiesFound = true
+        }
+    }
+    return propertiesFound
+})
+
+
+</script>
+
+<style scoped>
+
+</style>

vue3/src/components/display/RecipeView.vue

@@ -72,10 +72,16 @@
             </v-card>
         </template>
 
-
         <v-expansion-panels class="mt-2">
+             <v-expansion-panel>
+                <v-expansion-panel-title><v-icon icon="$properties" class="me-2"></v-icon> {{ $t('Properties') }}</v-expansion-panel-title>
+                <v-expansion-panel-text>
+                    <property-view :recipe="recipe"></property-view>
+                </v-expansion-panel-text>
+            </v-expansion-panel>
+
             <v-expansion-panel>
-                <v-expansion-panel-title><i class="fa-solid fa-circle-info me-2"></i> {{ $t('Information') }}</v-expansion-panel-title>
+                <v-expansion-panel-title><v-icon icon="fa-solid fa-circle-info" class="me-2"></v-icon> {{ $t('Information') }}</v-expansion-panel-title>
                 <v-expansion-panel-text>
                     <v-row>
                         <v-col cols="12" md="3">
@@ -116,8 +122,11 @@
                 </v-expansion-panel-text>
             </v-expansion-panel>
 
+
         </v-expansion-panels>
 
+
+
         <recipe-activity :recipe="recipe"></recipe-activity>
     </template>
 </template>
@@ -137,6 +146,7 @@ import {useWakeLock} from "@vueuse/core";
 import StepView from "@/components/display/StepView.vue";
 import IngredientsTable from "@/components/display/IngredientsTable.vue";
 import {DateTime} from "luxon";
+import PropertyView from "@/components/display/PropertyView.vue";
 
 const {request, release} = useWakeLock()