67 lines
1.9 KiB
Vue
67 lines
1.9 KiB
Vue
<template>
|
|
<q-card>
|
|
<q-card-section>
|
|
<div class="q-table__title">Cocktailbuilder</div>
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<ingredients
|
|
v-model="volume.ingredients"
|
|
class="q-pa-sm"
|
|
editable
|
|
@update:modelValue="update"
|
|
/>
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<div class="q-table__title">Du solltest mindest sowiel verlangen oder bezahlen:</div>
|
|
<div class="full-width row q-gutter-sm justify-around">
|
|
<div v-for="min_price in volume.min_prices" :key="min_price.percentage">
|
|
<div>
|
|
<q-badge class="text-h6" color="primary"> {{ min_price.percentage }}% </q-badge>
|
|
</div>
|
|
<div>{{ min_price.price.toFixed(2) }}€</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, onBeforeMount, ref } from 'vue';
|
|
import Ingredients from '../components/CalculationTable/Ingredients.vue';
|
|
import { DrinkPriceVolume, usePricelistStore } from '../store';
|
|
import { calc_min_prices } from '../utils/utils';
|
|
|
|
export default defineComponent({
|
|
name: 'CocktailBuilder',
|
|
components: { Ingredients },
|
|
setup() {
|
|
onBeforeMount(() => {
|
|
void store.get_min_prices().finally(() => {
|
|
volume.value.min_prices = calc_min_prices(volume.value, undefined, store.min_prices);
|
|
});
|
|
void store.getDrinks({ limit: 10 });
|
|
void store.getDrinkTypes();
|
|
void store.getExtraIngredients();
|
|
});
|
|
const store = usePricelistStore();
|
|
|
|
const emptyVolume: DrinkPriceVolume = {
|
|
id: -1,
|
|
_volume: 0,
|
|
min_prices: [],
|
|
prices: [],
|
|
ingredients: [],
|
|
};
|
|
const volume = ref(emptyVolume);
|
|
|
|
function update() {
|
|
volume.value.min_prices = calc_min_prices(volume.value, undefined, store.min_prices);
|
|
}
|
|
|
|
return { volume, update };
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped></style>
|