Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add custom scaling option #1345

Merged
merged 14 commits into from
Jun 9, 2022
Merged

Add custom scaling option #1345

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
cfe5d0d
Added custom scaling option
Bentipa Jun 5, 2022
21e5599
Merged main into own branch
Bentipa Jun 5, 2022
598f6be
Allow custom scaling with no yield set
Bentipa Jun 5, 2022
9dee22f
Made edit-scale translated
Bentipa Jun 5, 2022
ed63fd0
fixed merge conflict
Bentipa Jun 6, 2022
9109ad7
Refactored scale editor to use menu
Bentipa Jun 6, 2022
b6b415c
replaced vslot with #
Bentipa Jun 6, 2022
f0d2d1f
linter issues
Bentipa Jun 6, 2022
70883c9
fixed linter issues
Bentipa Jun 8, 2022
421bfb1
fixed one more linter issue
Bentipa Jun 8, 2022
186c0ef
format files + minor UI changes
hay-kot Jun 8, 2022
a0e1042
remove console.log
hay-kot Jun 9, 2022
8221770
move buttons into component and setup v-model
hay-kot Jun 9, 2022
5d056e9
drop servings text
hay-kot Jun 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions frontend/lang/messages/de-DE.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,6 +248,7 @@
"description": "Beschreibung",
"disable-amount": "Zutatenmenge deaktivieren",
"disable-comments": "Kommentare deaktivieren",
"edit-scale": "Skalierung bearbeiten",
"fat-content": "Fett",
"fiber-content": "Ballaststoffe",
"grams": "g",
Expand Down
1 change: 1 addition & 0 deletions frontend/lang/messages/en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,6 +248,7 @@
"description": "Description",
"disable-amount": "Disable Ingredient Amounts",
"disable-comments": "Disable Comments",
"edit-scale": "Edit Scale",
"fat-content": "Fat",
"fiber-content": "Fiber",
"grams": "grams",
Expand Down
125 changes: 86 additions & 39 deletions frontend/pages/recipe/_slug/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,72 +175,95 @@
<BaseButton @click="addIngredient"> {{ $t("general.new") }} </BaseButton>
</div>
</div>

<!-- Edit Scale Dialog -->
<BaseDialog v-model="scaleDialog" :icon="$globals.icons.units" :title="$t('recipe.edit-scale').toString()"
:submit-text="$tc('general.save')" @submit="editSaveScale">
<v-card-text>
<div class="mt-4 d-flex align-center">
<v-text-field type="number" v-model="scaleTemp" :label="$t('recipe.edit-scale')" />
<v-tooltip right color="secondary darken-1">
<template v-slot:activator="{ on, attrs }">
<v-btn icon class="mx-1" v-on="on" small @click="scaleTemp = 1">
<v-icon>
{{ $globals.icons.undo }}
</v-icon>
</v-btn>
</template>
<span> Reset Scale </span>
</v-tooltip>
</div>
</v-card-text>
</BaseDialog>

<div class="d-flex justify-space-between align-center pt-2 pb-3">
<v-tooltip v-if="!form" small top color="secondary darken-1">
<template #activator="{ on, attrs }">
<v-btn
v-if="recipe.recipeYield"
dense
small
:hover="false"
type="label"
:ripple="false"
elevation="0"
color="secondary darken-1"
class="rounded-sm static"
v-bind="attrs"
@click="scale = 1"
v-on="on"
>
{{ scaledYield }}
<v-btn v-if="!recipe.settings.disableAmount" dense small :hover="false" type="label" :ripple="false"
elevation="0" color="secondary darken-1" class="rounded-sm static" v-bind="attrs"
@click="scaleTemp = scale; scaleDialog = true" v-on="on">
<span v-if="recipe.recipeYield">
<span v-if="scale == 1">{{ scaledYield }} {{ $tc('recipe.servings') }}</span>
<span v-if="scale != 1"> {{ basicYield }} x {{ scale }} = {{ scaledYield }}
{{ $tc('recipe.servings') }}</span>
</span>
<span v-if="!recipe.recipeYield">
<span> x {{ scale }}</span>
</span>
</v-btn>
</template>
<span> Reset Scale </span>
<span> {{ $t('recipe.edit-scale') }} </span>
</v-tooltip>

<template v-if="!recipe.settings.disableAmount && !form">
<v-btn color="secondary darken-1" class="mx-1" small @click="scale > 1 ? scale-- : null">
<v-icon>
{{ $globals.icons.minus }}
</v-icon>
</v-btn>
<v-btn color="secondary darken-1" small @click="scale++">
<v-icon>
{{ $globals.icons.createAlt }}
</v-icon>
</v-btn>
<v-tooltip top color="secondary darken-1">
<template v-slot:activator="{ on, attrs }">
<v-btn color="secondary darken-1" class="mx-1" small v-on="on" @click="scale > 1 ? scale-- : null">
<v-icon>
{{ $globals.icons.minus }}
</v-icon>
</v-btn>
</template>
<span> Decrease Scale by 1 </span>
</v-tooltip>
<v-tooltip top color="secondary darken-1">
<template v-slot:activator="{ on, attrs }">
<v-btn color="secondary darken-1" small v-on="on" @click="scale++">
<v-icon>
{{ $globals.icons.createAlt }}
</v-icon>
</v-btn>
</template>
<span> Increase Scale by 1 </span>
</v-tooltip>
</template>
<v-spacer></v-spacer>

<RecipeRating
v-if="enableLandscape && $vuetify.breakpoint.smAndUp"
:key="recipe.slug"
:value="recipe.rating"
:name="recipe.name"
:slug="recipe.slug"
/>
<RecipeRating v-if="enableLandscape && $vuetify.breakpoint.smAndUp" :key="recipe.slug"
:value="recipe.rating" :name="recipe.name" :slug="recipe.slug" />
</div>

<v-row>
<v-col cols="12" sm="12" md="4" lg="4">
<RecipeIngredients
v-if="!form"
:value="recipe.recipeIngredient"
:scale="scale"
:disable-amount="recipe.settings.disableAmount"
/>
<RecipeIngredients v-if="!form" :value="recipe.recipeIngredient" :scale="scale"
:disable-amount="recipe.settings.disableAmount" />

<!-- Recipe Tools Display -->
<div v-if="!form && recipe.tools && recipe.tools.length > 0">
<h2 class="mb-2 mt-4">Required Tools</h2>
<v-list-item v-for="(tool, index) in recipe.tools" :key="index" dense>
<<<<<<< HEAD
<v-checkbox v-model="recipe.tools[index].onHand" hide-details class="pt-0 my-auto py-auto"
color="secondary" @change="updateTool(recipe.tools[index])">
=======
Bentipa marked this conversation as resolved.
Show resolved Hide resolved
<v-checkbox
v-model="recipe.tools[index].onHand"
hide-details
class="pt-0 my-auto py-auto"
color="secondary"
@change="toolStore.actions.updateOne(recipe.tools[index])"
>
>>>>>>> abb114c375c79f8f2ca70e68e34aae1a24387430
Bentipa marked this conversation as resolved.
Show resolved Hide resolved
</v-checkbox>
<v-list-item-content>
{{ tool.name }}
Expand Down Expand Up @@ -607,6 +630,8 @@ export default defineComponent({
const state = reactive({
form: false,
scale: 1,
scaleTemp: 1,
scaleDialog: false,
hideImage: false,
imageKey: 1,
skeleton: false,
Expand Down Expand Up @@ -698,6 +723,19 @@ export default defineComponent({
return recipe.value?.recipeYield;
});

const basicYield = computed(() => {
const regMatchNum = /\d+/;
const yieldString = recipe.value?.recipeYield;
const num = yieldString?.match(regMatchNum);

if (num && num?.length > 0) {
const yieldAsInt = parseInt(num[0]);
return yieldString?.replace(num[0], String(yieldAsInt));
}

return recipe.value?.recipeYield;
});

async function uploadImage(fileObject: File) {
if (!recipe.value || !recipe.value.slug) {
return;
Expand Down Expand Up @@ -827,6 +865,13 @@ export default defineComponent({

const drag = ref(false);

// ===============================================================
// Scale

const editSaveScale = () => {
state.scale = state.scaleTemp;
}

return {
// Wake Lock
drag,
Expand All @@ -844,12 +889,14 @@ export default defineComponent({
enableLandscape,
imageHeight,
scaledYield,
basicYield,
toggleJson,
...toRefs(state),
recipe,
api,
loading,
addStep,
editSaveScale,
deleteRecipe,
printRecipe,
closeEditor,
Expand Down
1 change: 1 addition & 0 deletions frontend/utils/icons/icon-type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ export interface Icon {
webhook: string;
windowClose: string;
zip: string;
undo: string;

// Crud
backArrow: string;
Expand Down
2 changes: 2 additions & 0 deletions frontend/utils/icons/icons.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@ import {
mdiChartLine,
mdiHelpCircleOutline,
mdiDocker,
mdiUndo,
} from "@mdi/js";

export const icons = {
Expand Down Expand Up @@ -206,6 +207,7 @@ export const icons = {
webhook: mdiWebhook,
windowClose: mdiWindowClose,
zip: mdiFolderZipOutline,
undo: mdiUndo,

// Crud
backArrow: mdiArrowLeftBoldOutline,
Expand Down