mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2025-12-24 02:39:20 -05:00
number scaler
This commit is contained in:
vabene1111
@@ -19,7 +19,7 @@
|
||||
"vue-multiselect": "^3.0.0-beta.3",
|
||||
"vue-router": "4",
|
||||
"vuedraggable": "^4.1.0",
|
||||
"vuetify": "^3.5.8"
|
||||
"vuetify": "^3.5.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@fortawesome/fontawesome-free": "^6.5.1",
|
||||
|
||||
@@ -1,61 +1,65 @@
|
||||
<template>
|
||||
|
||||
<template v-if="recipe.name != undefined">
|
||||
|
||||
<v-card class="mt-md-4">
|
||||
|
||||
<v-img max-height="25vh" cover lazy :src="recipe.image" v-if="recipe.image != undefined" class="align-end">
|
||||
<KeywordsComponent variant="flat" class="ms-1 mb-2" :keywords="recipe.keywords"></KeywordsComponent>
|
||||
</v-img>
|
||||
<v-card class="mt-md-4">
|
||||
|
||||
<v-img max-height="25vh" cover lazy :src="recipe.image" v-if="recipe.image != undefined" class="align-end">
|
||||
<KeywordsComponent variant="flat" class="ms-1 mb-2" :keywords="recipe.keywords"></KeywordsComponent>
|
||||
</v-img>
|
||||
|
||||
<v-card>
|
||||
<v-sheet class="d-flex align-center">
|
||||
<span class="ps-2 text-h5 text-truncate flex-grow-1">{{ recipe.name }}</span>
|
||||
<recipe-context-menu :recipe="recipe"></recipe-context-menu>
|
||||
</v-sheet>
|
||||
</v-card>
|
||||
|
||||
<!-- <v-card class="mt-1">-->
|
||||
<!-- <v-sheet class="d-flex ">-->
|
||||
<!-- <span class="ps-2 text-h5 flex-grow-1">{{ recipe.name }}</span>-->
|
||||
<!-- <recipe-context-menu :recipe="recipe"></recipe-context-menu>-->
|
||||
<!-- </v-sheet>-->
|
||||
<!-- </v-card>-->
|
||||
|
||||
<v-card>
|
||||
<v-sheet class="d-flex align-center">
|
||||
<span class="ps-2 text-h5 text-truncate flex-grow-1">{{ recipe.name }}</span>
|
||||
<recipe-context-menu :recipe="recipe"></recipe-context-menu>
|
||||
</v-sheet>
|
||||
</v-card>
|
||||
|
||||
<!-- <v-card class="mt-1">-->
|
||||
<!-- <v-sheet class="d-flex ">-->
|
||||
<!-- <span class="ps-2 text-h5 flex-grow-1">{{ recipe.name }}</span>-->
|
||||
<!-- <recipe-context-menu :recipe="recipe"></recipe-context-menu>-->
|
||||
<!-- </v-sheet>-->
|
||||
<!-- </v-card>-->
|
||||
<v-card class="mt-1">
|
||||
<v-container>
|
||||
<v-row class="text-center text-body-2">
|
||||
<v-col class="pt-1 pb-1">
|
||||
<i class="fas fa-cogs"></i> {{ recipe.workingTime }} min<br/>
|
||||
<div class="text-grey">Working Time</div>
|
||||
</v-col>
|
||||
<v-col class="pt-1 pb-1">
|
||||
<div><i class="fas fa-hourglass-half"></i> {{ recipe.waitingTime }} min</div>
|
||||
<div class="text-grey">Waiting Time</div>
|
||||
</v-col>
|
||||
<v-col class="pt-1 pb-1">
|
||||
<NumberScalerDialog :number="servings" @change="servings = $event.number" title="Servings">
|
||||
<template #activator>
|
||||
<div class="cursor-pointer">
|
||||
<i class="fas fa-calendar-alt"></i> {{ servings }} <br/>
|
||||
<div class="text-grey"><span v-if="recipe?.servingsText">{{ recipe.servingsText }}</span><span v-else>Servings</span></div>
|
||||
</div>
|
||||
</template>
|
||||
</NumberScalerDialog>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card>
|
||||
|
||||
</v-card>
|
||||
<v-card class="mt-1" v-if="recipe.steps.length > 1">
|
||||
<StepsOverview :steps="recipe.steps"></StepsOverview>
|
||||
</v-card>
|
||||
|
||||
<v-card class="mt-1">
|
||||
<v-container>
|
||||
<v-row class="text-center text-body-2">
|
||||
<v-col class="pt-1 pb-1">
|
||||
<i class="fas fa-cogs"></i> {{ recipe.workingTime }} min<br/>
|
||||
<div class="text-grey">Working Time</div>
|
||||
</v-col>
|
||||
<v-col class="pt-1 pb-1">
|
||||
<div><i class="fas fa-hourglass-half"></i> {{ recipe.waitingTime }} min</div>
|
||||
<div class="text-grey">Waiting Time</div>
|
||||
</v-col>
|
||||
<v-col class="pt-1 pb-1">
|
||||
<NumberScalerDialog :number="servings" @change="servings = $event.number" title="Servings">
|
||||
<template #activator>
|
||||
<i class="fas fa-calendar-alt"></i> {{ servings }} <br/>
|
||||
<div class="text-grey"><span v-if="recipe?.servingsText">{{ recipe.servingsText }}</span><span v-else>Servings</span></div>
|
||||
</template>
|
||||
</NumberScalerDialog>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card>
|
||||
|
||||
<v-card class="mt-1" v-if="recipe.steps.length > 1">
|
||||
<StepsOverview :steps="recipe.steps"></StepsOverview>
|
||||
</v-card>
|
||||
|
||||
<v-card class="mt-1" v-for="s in recipe.steps" :key="s.id">
|
||||
<Step :step="s" :ingredient_factor="ingredient_factor"></Step>
|
||||
</v-card>
|
||||
|
||||
<!-- <RecipeActivity :recipe="recipe"></RecipeActivity>-->
|
||||
<v-card class="mt-1" v-for="s in recipe.steps" :key="s.id">
|
||||
<Step :step="s" :ingredient_factor="ingredient_factor"></Step>
|
||||
</v-card>
|
||||
|
||||
<!-- <RecipeActivity :recipe="recipe"></RecipeActivity>-->
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@@ -8,29 +8,25 @@
|
||||
|
||||
<template v-slot:default="{ isActive }">
|
||||
<v-card :title="title">
|
||||
<v-card-text>
|
||||
Change Number
|
||||
</v-card-text>
|
||||
|
||||
<v-card-text>
|
||||
<v-btn-group divided color="primary">
|
||||
<v-btn @click="updateNumber( 'half')"><i class="fas fa-divide"></i> 2
|
||||
|
||||
<v-number-input v-model="mutable_number" @update:modelValue="updateNumber('set')" control-variant="split" :min="0" >
|
||||
</v-number-input>
|
||||
|
||||
<v-btn-group divided class="d-flex">
|
||||
<v-btn variant="tonal" class="flex-grow-1" @click="updateNumber( 'half')">
|
||||
<i class="fas fa-divide"></i> 2
|
||||
</v-btn>
|
||||
<v-btn @click="updateNumber( 'sub')"><i class="fas fa-minus"></i>
|
||||
</v-btn>
|
||||
<v-btn @click="updateNumber('prompt')">
|
||||
{{ mutable_number }}
|
||||
</v-btn>
|
||||
<v-btn @click="updateNumber( 'add')"><i class="fas fa-plus"></i>
|
||||
</v-btn>
|
||||
<v-btn @click="updateNumber('double')"><i class="fas fa-times"></i> 2
|
||||
<v-btn variant="tonal" class="flex-grow-1" @click="updateNumber('double')">
|
||||
<i class="fas fa-times"></i> 2
|
||||
</v-btn>
|
||||
</v-btn-group>
|
||||
|
||||
<v-text-field type="number" v-model.number="mutable_number" @change="updateNumber('set')"></v-text-field>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn rounded variant="outlined" @click="dialog = false">Close</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn class="float-right" rounded @click="dialog = false">Close</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
|
||||
@@ -41,9 +37,10 @@
|
||||
<script lang="ts">
|
||||
|
||||
import {defineComponent} from 'vue'
|
||||
|
||||
import {VNumberInput} from 'vuetify/labs/VNumberInput' //TODO remove once component is out of labs
|
||||
export default defineComponent({
|
||||
name: "NumberScalerDialog",
|
||||
components: {VNumberInput},
|
||||
emits: {
|
||||
change(payload: { number: number }) {
|
||||
return payload
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<v-menu open-on-hover open-delay="0" :open-on-click="true">
|
||||
<v-menu open-on-hover open-delay="0" :open-on-click="true" location="start">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props" icon="fas fa-ellipsis-v" variant="plain"></v-btn>
|
||||
</template>
|
||||
|
||||
@@ -936,10 +936,10 @@ vuedraggable@^4.1.0:
|
||||
dependencies:
|
||||
sortablejs "1.14.0"
|
||||
|
||||
vuetify@^3.5.8:
|
||||
version "3.5.8"
|
||||
resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.5.8.tgz#bc8f08dfd3314640e7b5d43b50138a26d650cbbf"
|
||||
integrity sha512-8nGS+lKejZkev55HFwIfsRt+9fOqbeDQNmXxfmLKAlnUT8FtynVwbjAwHMtX/OQAQ3ZwRaR1ptqQQmx3OgxzbQ==
|
||||
vuetify@^3.5.10:
|
||||
version "3.5.11"
|
||||
resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.5.11.tgz#9e5b628544e736de0b7f236b704539d544588152"
|
||||
integrity sha512-us5I0jyFwIQYG4v41PFmVMkoc/oJddVT4C2RFjJTI99ttigbQ92gsTeG5SB8BPfmfnUS4paR5BedZwk6W3KlJw==
|
||||
|
||||
w3c-xmlserializer@^4.0.0:
|
||||
version "4.0.0"
|
||||
|
||||
Reference in New Issue
Block a user