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

add calculator to property editore

Browse Source
This commit is contained in:
vabene1111
2025-03-20 21:27:45 +01:00
parent 96e0be0a78
commit 4a13cc63ae
1 changed files with 116 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
vue3/src/pages/PropertyEditorPage.vue
View File

@@ -6,7 +6,8 @@
<model-select append-to-body model="Recipe" v-model="recipe" @update:model-value="loadRecipe(recipe.id!)"></model-select>
</v-card-text>
</v-card>
<v-row>
<v-col>
<v-table class="mt-2">
<thead>
<tr>
@@ -43,9 +44,11 @@
<tr v-for="[i, food] in foods.entries()">
<td>{{ food.name }}</td>
<td>
<v-text-field type="number" v-model="food.fdcId" density="compact" hide-details @change="updateFood(food)" style="min-width: 180px" :loading="food.loading">
<v-text-field type="number" v-model="food.fdcId" density="compact" hide-details @change="updateFood(food)" style="min-width: 180px"
:loading="food.loading">
<template #append-inner>
<v-btn @click="updateFoodFdcData(food)" icon="fa-solid fa-arrows-rotate" size="small" density="compact" variant="plain" v-if="food.fdcId"></v-btn>
<v-btn @click="updateFoodFdcData(food)" icon="fa-solid fa-arrows-rotate" size="small" density="compact" variant="plain"
v-if="food.fdcId"></v-btn>
<v-btn :href="`https://fdc.nal.usda.gov/food-details/${food.fdcId}/nutrients`" target="_blank" icon="fa-solid fa-arrow-up-right-from-square"
size="small" variant="plain" v-if="food.fdcId"></v-btn>
</template>
@@ -72,6 +75,48 @@
</tr>
</tbody>
</v-table>
</v-col>
</v-row>
<v-row>
<v-col>
<v-card prepend-icon="fa-solid fa-calculator" :title="$t('Calculator')">
<v-card-text>
<v-row dense>
<v-col cols="3">
<v-text-field type="number" v-model="calculatorFromNumerator">
<template #append>
<i class="fa-solid fa-divide"></i>
</template>
</v-text-field>
</v-col>
<v-col cols="3">
<v-text-field type="number" v-model="calculatorFromDenominator">
<template #append>
<i class="fa-solid fa-equals"></i>
</template>
</v-text-field>
</v-col>
<v-col cols="3">
<v-text-field type="number" v-model="calculatorToNumerator">
<template #append>
<i class="fa-solid fa-divide"></i>
</template>
<template #append-inner>
<btn-copy variant="plain" :copy-value="calculatorToNumerator"></btn-copy>
</template>
</v-text-field>
</v-col>
<v-col cols="3">
<v-text-field type="number" v-model="calculatorToDenominator"></v-text-field>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
<v-dialog v-model="dialog" max-width="600">
@@ -100,20 +145,29 @@
<script setup lang="ts">
import {onMounted, ref} from "vue";
import {computed, onMounted, ref} from "vue";
import {ApiApi, Food, Property, PropertyType, Recipe, Unit} from "@/openapi";
import ModelSelect from "@/components/inputs/ModelSelect.vue";
import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
import VClosableCardTitle from "@/components/dialogs/VClosableCardTitle.vue";
import {useUrlSearchParams} from "@vueuse/core";
import BtnCopy from "@/components/buttons/BtnCopy.vue";
const params = useUrlSearchParams('history', {})
const calculatorToNumerator = computed(() => {
return (calculatorFromNumerator.value / calculatorFromDenominator.value * calculatorToDenominator.value).toFixed(2)
})
const dialog = ref(false)
const dialogAmount = ref(100)
const dialogUnit = ref<undefined | Unit>(undefined)
const calculatorFromNumerator = ref(250)
const calculatorFromDenominator = ref(500)
const calculatorToDenominator = ref(100)
const recipe = ref<undefined | Recipe>()
const propertyTypes = ref([] as PropertyType[])
const foods = ref(new Map<number, Food & { loading?: boolean }>())