mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2026-01-02 20:59:28 -05:00
improved property system to differentiate between unknown and zero
This commit is contained in:
vabene1111
@@ -8,6 +8,7 @@
|
||||
<h2><a :href="resolveDjangoUrl('view_recipe', recipe.id)">{{ recipe.name }}</a></h2>
|
||||
{{ recipe.description }}
|
||||
<keywords-component :recipe="recipe"></keywords-component>
|
||||
|
||||
</div>
|
||||
<div class="col col-4" v-if="recipe.image">
|
||||
<img style="max-height: 10vh" class="img-thumbnail float-right" :src="recipe.image">
|
||||
@@ -17,7 +18,7 @@
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col col-12">
|
||||
<b-button variant="success" href="https://fdc.nal.usda.gov/index.html" target="_blank"><i class="fas fa-external-link-alt"></i> {{$t('FDC_Search')}}</b-button>
|
||||
<b-button variant="success" href="https://fdc.nal.usda.gov/index.html" target="_blank"><i class="fas fa-external-link-alt"></i> {{ $t('FDC_Search') }}</b-button>
|
||||
|
||||
<table class="table table-sm table-bordered table-responsive mt-2 pb-5">
|
||||
<thead>
|
||||
@@ -29,7 +30,7 @@
|
||||
<td v-for="pt in property_types" v-bind:key="pt.id">
|
||||
<b-button variant="primary" @click="editing_property_type = pt" class="btn-block">{{ pt.name }}
|
||||
<span v-if="pt.unit !== ''">({{ pt.unit }}) </span> <br/>
|
||||
<b-badge variant="light" ><i class="fas fa-sort-amount-down-alt"></i> {{ pt.order}}</b-badge>
|
||||
<b-badge variant="light"><i class="fas fa-sort-amount-down-alt"></i> {{ pt.order }}</b-badge>
|
||||
<b-badge variant="success" v-if="pt.fdc_id > 0" class="mt-2" v-b-tooltip.hover :title="$t('property_type_fdc_hint')"><i class="fas fa-check"></i> FDC</b-badge>
|
||||
<b-badge variant="warning" v-if="pt.fdc_id < 1" class="mt-2" v-b-tooltip.hover :title="$t('property_type_fdc_hint')"><i class="fas fa-times"></i> FDC</b-badge>
|
||||
</b-button>
|
||||
@@ -48,7 +49,7 @@
|
||||
<b-input-group>
|
||||
<b-form-input v-model="f.fdc_id" type="number" @change="updateFood(f)" :disabled="f.loading"></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button variant="success" @click="updateFoodFromFDC(f)" :disabled="f.loading"><i class="fas fa-sync-alt" :class="{'fa-spin': loading}"></i></b-button>
|
||||
<b-button variant="success" @click="updateFoodFromFDC(f)" :disabled="f.loading || f.fdc_id < 1"><i class="fas fa-sync-alt" :class="{'fa-spin': loading}"></i></b-button>
|
||||
<b-button variant="info" :href="`https://fdc.nal.usda.gov/fdc-app.html#/food-details/${f.fdc_id}`" :disabled="f.fdc_id < 1" target="_blank"><i class="fas fa-external-link-alt"></i></b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
@@ -67,7 +68,12 @@
|
||||
</td>
|
||||
<td v-for="p in f.properties" v-bind:key="`${f.id}_${p.property_type.id}`">
|
||||
<b-input-group>
|
||||
<b-form-input v-model="p.property_amount" type="number" :disabled="f.loading" v-b-tooltip.focus :title="p.property_type.name" @change="updateFood(f)"></b-form-input>
|
||||
<template v-if="p.property_amount == null">
|
||||
<b-btn class="btn-sm btn-block btn-success" @click="p.property_amount = 0; updateFood(f)">Add</b-btn>
|
||||
</template>
|
||||
<template v-else>
|
||||
<b-form-input v-model="p.property_amount" type="number" :disabled="f.loading" v-b-tooltip.focus :title="p.property_type.name" @change="updateFood(f)"></b-form-input>
|
||||
</template>
|
||||
</b-input-group>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -76,6 +82,40 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b-row class="mt-2">
|
||||
<b-col>
|
||||
<b-card>
|
||||
<b-card-title>
|
||||
<i class="fas fa-calculator"></i> {{ $t('Calculator') }}
|
||||
</b-card-title>
|
||||
<b-card-text>
|
||||
<b-form inline>
|
||||
<b-input type="number" v-model="calculator_from_amount"></b-input>
|
||||
<i class="fas fa-divide fa-fw mr-1 ml-1"></i>
|
||||
<b-input type="number" v-model="calculator_from_per"></b-input>
|
||||
<i class="fas fa-equals fa-fw mr-1 ml-1"></i>
|
||||
|
||||
<b-input-group >
|
||||
<b-input v-model="calculator_to_amount" disabled></b-input>
|
||||
<b-input-group-append>
|
||||
<b-btn variant="success" @click="copyCalculatedResult()"><i class="far fa-copy"></i></b-btn>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
|
||||
|
||||
|
||||
<i class="fas fa-divide fa-fw mr-1 ml-1"></i>
|
||||
<b-input type="number" v-model="calculator_to_per"></b-input>
|
||||
</b-form>
|
||||
</b-card-text>
|
||||
|
||||
</b-card>
|
||||
|
||||
|
||||
</b-col>
|
||||
|
||||
</b-row>
|
||||
|
||||
|
||||
<generic-modal-form
|
||||
:show="editing_property_type !== null"
|
||||
@@ -109,8 +149,8 @@ import {ApiApiFactory} from "@/utils/openapi/api";
|
||||
import GenericMultiselect from "@/components/GenericMultiselect.vue";
|
||||
import GenericModalForm from "@/components/Modals/GenericModalForm.vue";
|
||||
import KeywordsComponent from "@/components/KeywordsComponent.vue";
|
||||
|
||||
|
||||
import VueClipboard from 'vue-clipboard2'
|
||||
Vue.use(VueClipboard)
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
|
||||
@@ -118,7 +158,11 @@ export default {
|
||||
name: "PropertyEditorView",
|
||||
mixins: [ApiMixin],
|
||||
components: {KeywordsComponent, GenericModalForm, GenericMultiselect},
|
||||
computed: {},
|
||||
computed: {
|
||||
calculator_to_amount: function () {
|
||||
return (this.calculator_from_amount / this.calculator_from_per * this.calculator_to_per).toFixed(2)
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
recipe: null,
|
||||
@@ -127,6 +171,10 @@ export default {
|
||||
new_property_type: false,
|
||||
loading: false,
|
||||
foods: [],
|
||||
|
||||
calculator_from_amount: 1,
|
||||
calculator_from_per: 300,
|
||||
calculator_to_per: 100,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -176,7 +224,7 @@ export default {
|
||||
this.property_types.forEach(pt => {
|
||||
let new_food_property = {
|
||||
property_type: pt,
|
||||
property_amount: 0,
|
||||
property_amount: null,
|
||||
}
|
||||
if (pt.id in existing_properties) {
|
||||
new_food_property = existing_properties[pt.id]
|
||||
@@ -217,6 +265,9 @@ export default {
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
|
||||
food.loading = false;
|
||||
})
|
||||
},
|
||||
copyCalculatedResult: function(){
|
||||
this.$copyText(this.calculator_to_amount)
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
@@ -41,10 +41,8 @@
|
||||
|
||||
<td class="align-middle text-center" v-if="!show_recipe_properties">
|
||||
<a href="#" @click="selected_property = p">
|
||||
<!-- <i v-if="p.missing_value" class="text-warning fas fa-exclamation-triangle"></i>-->
|
||||
<!-- <i v-if="!p.missing_value" class="text-muted fas fa-info-circle"></i>-->
|
||||
<i class="text-muted fas fa-info-circle"></i>
|
||||
<!-- TODO find solution for missing values as 0 can either be missing or actually correct for any given property -->
|
||||
<i v-if="p.missing_value" class="text-warning fas fa-exclamation-triangle"></i>
|
||||
<i v-if="!p.missing_value" class="text-muted fas fa-info-circle"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -117,6 +115,7 @@ export default {
|
||||
has_food_properties = true
|
||||
}
|
||||
}
|
||||
console.log('has food propers', has_food_properties)
|
||||
return has_food_properties
|
||||
},
|
||||
property_list: function () {
|
||||
|
||||
@@ -83,6 +83,7 @@
|
||||
"Open_Data_Import": "Open Data Import",
|
||||
"Properties_Food_Amount": "Properties Food Amount",
|
||||
"Properties_Food_Unit": "Properties Food Unit",
|
||||
"Calculator": "Calculator",
|
||||
"FDC_ID": "FDC ID",
|
||||
"FDC_Search": "FDC Search",
|
||||
"FDC_ID_help": "FDC database ID",
|
||||
|
||||
Reference in New Issue
Block a user