mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-02 04:39:54 -05:00
Code Issues Packages Projects Releases Wiki Activity

basic food property viewer in recipe view

Browse Source
This commit is contained in:
vabene1111
2023-04-11 16:48:38 +02:00
parent ec083214ef
commit 7d9fcac0c7
5 changed files with 156 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
vue/src/apps/TestView/TestView.vue
View File

@@ -6,32 +6,38 @@
<div class="row" v-if="recipe !== undefined">
<div class="col-6">
<div class="card">
<table>
<tbody v-for="p in recipe.food_properties" v-bind:key="`id_${p.id}`">
<tr>
<td><b-button v-b-toggle="`id_collapse_property_${p.id}`" size="sm"><i class="fas fa-caret-right"></i></b-button></td>
<td>{{ p.icon }}</td>
<td>{{ p.name }}</td>
<td>{{ p.total_value }} {{ p.unit }}</td>
</tr>
<b-collapse :id="`id_collapse_property_${p.id}`" class="mt-2">
<tr>
<td colspan="4">
{{p.description}}
</td>
</tr>
<tr v-for="f in p.food_values" v-bind:key="`id_${p.id}_food_${f.id}`">
<td>{{f.food}}</td>
<td>{{f.value}} {{ p.unit }}</td>
</tr>
</b-collapse>
</tbody>
<table class="table table-bordered table-sm">
<tr v-for="p in recipe.food_properties" v-bind:key="`id_${p.id}`">
<td>
<button class="btn btn-danger btn-sm"
@click="selected_property = p"><i
class="fas fa-exclamation-triangle"></i>
</button>
{{ p.icon }} {{ p.name }}
</td>
<td>{{ p.total_value }} {{ p.unit }}</td>
</tr>
</table>
</div>
</div>
</div>
<b-modal id="id_modal_property_overview" title="Property Overview" v-model="show_modal" @hidden="selected_property = undefined">
<template v-if="selected_property !== undefined">
{{ selected_property.description }}
<table class="table table-bordered">
<tr v-for="f in selected_property.food_values" v-bind:key="`id_${selected_property.id}_food_${f.id}`">
<td>{{ f.food }}</td>
<td>{{ f.value }} {{ selected_property.unit }}</td>
</tr>
</table>
</template>
</b-modal>
</div>
</template>
@@ -57,9 +63,14 @@ export default {
data() {
return {
recipe: undefined,
selected_property: undefined,
}
},
computed: {
show_modal: function () {
return this.selected_property !== undefined
},
},
mounted() {
this.$i18n.locale = window.CUSTOM_LOCALE
let apiClient = new ApiApiFactory()
@@ -74,4 +85,5 @@ export default {
<style>
</style>