mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2026-01-03 05:11:31 -05:00
added print mode to recipes
This commit is contained in:
vabene1111
@@ -8,56 +8,63 @@
|
||||
|
||||
<!-- </v-table>-->
|
||||
|
||||
<!-- <v-data-table :items="ingredients" hide-default-footer hide-default-header :headers="tableHeaders" density="compact" v-if="ingredients.length > 0" @click:row="handleRowClick"-->
|
||||
<!-- items-per-page="0">-->
|
||||
<!-- <template v-slot:item.checked="{ item }">-->
|
||||
<!-- <v-checkbox-btn v-model="item.checked" color="success" v-if="!item.isHeader"></v-checkbox-btn>-->
|
||||
<!-- </template>-->
|
||||
<!-- <template v-slot:item.amount="{ item }">-->
|
||||
<!-- <template v-if="item.isHeader"><p style="width: 100px"><b>{{ item.note }}</b></p></template>-->
|
||||
<!-- <template v-else>{{ item.amount * props.ingredientFactor }}</template>-->
|
||||
<!-- </template>-->
|
||||
<!-- <v-data-table :items="ingredients" hide-default-footer hide-default-header :headers="tableHeaders" density="compact" v-if="ingredients.length > 0" @click:row="handleRowClick"-->
|
||||
<!-- items-per-page="0">-->
|
||||
<!-- <template v-slot:item.checked="{ item }">-->
|
||||
<!-- <v-checkbox-btn v-model="item.checked" color="success" v-if="!item.isHeader"></v-checkbox-btn>-->
|
||||
<!-- </template>-->
|
||||
<!-- <template v-slot:item.amount="{ item }">-->
|
||||
<!-- <template v-if="item.isHeader"><p style="width: 100px"><b>{{ item.note }}</b></p></template>-->
|
||||
<!-- <template v-else>{{ item.amount * props.ingredientFactor }}</template>-->
|
||||
<!-- </template>-->
|
||||
|
||||
<!-- <template v-slot:item.note="{ item }">-->
|
||||
<!-- <v-icon class="far fa-comment float-right" v-if="item.note != '' && item.note != undefined">-->
|
||||
<!-- <v-tooltip activator="parent" open-on-click location="start">{{ item.note }}</v-tooltip>-->
|
||||
<!-- </v-icon>-->
|
||||
<!-- </template>-->
|
||||
<!-- </v-data-table>-->
|
||||
<!-- <template v-slot:item.note="{ item }">-->
|
||||
<!-- <v-icon class="far fa-comment float-right" v-if="item.note != '' && item.note != undefined">-->
|
||||
<!-- <v-tooltip activator="parent" open-on-click location="start">{{ item.note }}</v-tooltip>-->
|
||||
<!-- </v-icon>-->
|
||||
<!-- </template>-->
|
||||
<!-- </v-data-table>-->
|
||||
|
||||
<v-table density="compact">
|
||||
<tbody>
|
||||
<template v-for="i in ingredients" :key="i.id" @click="i.checked = !i.checked">
|
||||
<tr>
|
||||
<template v-if="i.isHeader">
|
||||
<td colspan="5" class="font-weight-bold">{{ i.note }}</td>
|
||||
</template>
|
||||
<template v-else>
|
||||
<td style="width: 1%; text-wrap: nowrap" class="pa-0 d-print-none" v-if="showCheckbox">
|
||||
<v-checkbox-btn v-model="i.checked" color="success" v-if="!i.isHeader"></v-checkbox-btn>
|
||||
</td>
|
||||
<td style="width: 1%; text-wrap: nowrap" class="pr-1"
|
||||
v-html="calculateFoodAmount(i.amount, props.ingredientFactor, useUserPreferenceStore().userSettings.useFractions)" v-if="!i.noAmount"></td>
|
||||
<td style="width: 1%; text-wrap: nowrap" class="pr-1" v-if="i.noAmount"></td>
|
||||
<td style="width: 1%; text-wrap: nowrap" class="pr-1">
|
||||
<template v-if="i.unit && !i.noAmount"> {{ ingredientToUnitString(i, ingredientFactor) }}</template>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="i.food">
|
||||
<router-link v-if="i.food.recipe" :to="{name: 'RecipeViewPage', params: {id: i.food.recipe.id}}">
|
||||
{{ ingredientToFoodString(i, ingredientFactor) }}
|
||||
</router-link>
|
||||
<a v-else-if="i.food.url" :href="i.food.url" target="_blank">{{ ingredientToFoodString(i, ingredientFactor) }}</a>
|
||||
<span v-else>{{ ingredientToFoodString(i, ingredientFactor) }}</span>
|
||||
<template v-if="i.note != '' && i.note != undefined">
|
||||
<span class="text-disabled font-italic"> {{ i.note }}</span>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<tr v-for="i in ingredients" :key="i.id" @click="i.checked = !i.checked">
|
||||
<template v-if="i.isHeader">
|
||||
<td colspan="5" class="font-weight-bold">{{ i.note }}</td>
|
||||
</template>
|
||||
<template v-else>
|
||||
<td style="width: 1%; text-wrap: nowrap" class="pa-0" v-if="showCheckbox">
|
||||
<v-checkbox-btn v-model="i.checked" color="success" v-if="!i.isHeader"></v-checkbox-btn>
|
||||
</td>
|
||||
<td style="width: 1%; text-wrap: nowrap" class="pr-1" v-html="calculateFoodAmount(i.amount, props.ingredientFactor, useUserPreferenceStore().userSettings.useFractions)" v-if="!i.noAmount"></td>
|
||||
<td style="width: 1%; text-wrap: nowrap" class="pr-1" v-if="i.noAmount"></td>
|
||||
<td style="width: 1%; text-wrap: nowrap" class="pr-1">
|
||||
<template v-if="i.unit && !i.noAmount"> {{ ingredientToUnitString(i, ingredientFactor) }}</template>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="i.food">
|
||||
<router-link v-if="i.food.recipe" :to="{name: 'RecipeViewPage', params: {id: i.food.recipe.id}}">
|
||||
{{ ingredientToFoodString(i, ingredientFactor) }}
|
||||
</router-link>
|
||||
<a v-else-if="i.food.url" :href="i.food.url" target="_blank">{{ ingredientToFoodString(i, ingredientFactor) }}</a>
|
||||
<span v-else>{{ ingredientToFoodString(i, ingredientFactor) }}</span>
|
||||
</template>
|
||||
</td>
|
||||
|
||||
<td style="width: 1%; text-wrap: nowrap">
|
||||
<v-icon class="far fa-comment float-right" v-if="i.note != '' && i.note != undefined">
|
||||
<v-tooltip activator="parent" open-on-click location="start">{{ i.note }}</v-tooltip>
|
||||
</v-icon>
|
||||
</td>
|
||||
</template>
|
||||
</tr>
|
||||
</td>
|
||||
|
||||
<td style="width: 1%; text-wrap: nowrap" class="d-print-none">
|
||||
<v-icon class="far fa-comment float-right" v-if="i.note != '' && i.note != undefined">
|
||||
<v-tooltip activator="parent" open-on-click location="start">{{ i.note }}</v-tooltip>
|
||||
</v-icon>
|
||||
</td>
|
||||
</template>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<v-icon icon="$properties"></v-icon>
|
||||
{{ $t('Properties') }}
|
||||
|
||||
<v-btn-toggle border divided density="compact" class="float-right" v-if="hasRecipeProperties && hasRecipeProperties" v-model="sourceSelectedToShow">
|
||||
<v-btn-toggle border divided density="compact" class="float-right d-print-none" v-if="hasRecipeProperties && hasRecipeProperties" v-model="sourceSelectedToShow">
|
||||
<v-btn size="small" value="food">{{ $t('Food') }}</v-btn>
|
||||
<v-btn size="small" value="recipe">{{ $t('Recipe') }}</v-btn>
|
||||
</v-btn-toggle>
|
||||
@@ -25,9 +25,9 @@
|
||||
<td>{{ $n(p.propertyAmountPerServing) }} {{ p.unit }}</td>
|
||||
<td>{{ $n(p.propertyAmountTotal) }} {{ p.unit }}</td>
|
||||
<td v-if="sourceSelectedToShow == 'food'">
|
||||
<v-btn @click="dialogProperty = p; dialog = true" variant="plain" color="warning" icon="fa-solid fa-triangle-exclamation" size="small"
|
||||
<v-btn @click="dialogProperty = p; dialog = true" variant="plain" color="warning" icon="fa-solid fa-triangle-exclamation" size="small" class="d-print-none"
|
||||
v-if="p.missingValue"></v-btn>
|
||||
<v-btn @click="dialogProperty = p; dialog = true" variant="plain" icon="fa-solid fa-circle-info" size="small" v-if="!p.missingValue"></v-btn>
|
||||
<v-btn @click="dialogProperty = p; dialog = true" variant="plain" icon="fa-solid fa-circle-info" size="small" v-if="!p.missingValue" class="d-print-none"></v-btn>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
<template>
|
||||
|
||||
<v-card class="mt-1">
|
||||
<v-card class="mt-1" v-if="cookLogs.length > 0">
|
||||
<v-card-title>{{ $t('Activity') }}</v-card-title>
|
||||
<v-card-text>
|
||||
|
||||
|
||||
<v-list>
|
||||
<v-list-item v-for="c in cookLogs.sort((a,b) => a.createdAt! > b.createdAt! ? 1 : -1)" :key="c.id">
|
||||
<template #prepend>
|
||||
@@ -31,7 +29,7 @@
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<v-card class="mt-1">
|
||||
<v-card class="mt-1 d-print-none">
|
||||
<v-card-text>
|
||||
<v-textarea :label="$t('Comment')" rows="2" v-model="newCookLog.comment"></v-textarea>
|
||||
<v-row de>
|
||||
|
||||
@@ -89,15 +89,15 @@
|
||||
</v-card-text>
|
||||
|
||||
<v-row class="text-center text-body-2 mb-1 flex-grow-0">
|
||||
<v-col >
|
||||
<v-col>
|
||||
<i class="fas fa-cogs fa-fw mr-1"></i> {{ recipe.workingTime }} {{ $t('min') }}<br/>
|
||||
<div class="text-grey">{{ $t('WorkingTime') }}</div>
|
||||
</v-col>
|
||||
<v-col >
|
||||
<v-col>
|
||||
<div><i class="fas fa-hourglass-half fa-fw mr-1"></i> {{ recipe.waitingTime }} {{ $t('min') }}</div>
|
||||
<div class="text-grey">{{ $t('WaitingTime') }}</div>
|
||||
</v-col>
|
||||
<v-col >
|
||||
<v-col>
|
||||
<div class="cursor-pointer">
|
||||
<i class="fas fa-sort-numeric-up fa-fw mr-1"></i> {{ servings }} <br/>
|
||||
<div class="text-grey"><span v-if="recipe.servingsText">{{ recipe.servingsText }}</span><span v-else>{{ $t('Servings') }}</span></div>
|
||||
@@ -129,56 +129,46 @@
|
||||
|
||||
<property-view v-model="recipe" :servings="servings" v-if="recipe.internal"></property-view>
|
||||
|
||||
<v-expansion-panels class="mt-2">
|
||||
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title>
|
||||
<v-icon icon="fa-solid fa-circle-info" class="me-2"></v-icon>
|
||||
{{ $t('Information') }}
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<v-row>
|
||||
<v-col cols="12" md="3">
|
||||
<v-card
|
||||
variant="outlined"
|
||||
:title="$t('CreatedBy')"
|
||||
:subtitle="recipe.createdBy.displayName"
|
||||
prepend-icon="fa-solid fa-user">
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-card
|
||||
variant="outlined"
|
||||
:title="$t('Created')"
|
||||
:subtitle="DateTime.fromJSDate(recipe.createdAt).toLocaleString(DateTime.DATETIME_MED)"
|
||||
prepend-icon="$create">
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-card
|
||||
variant="outlined"
|
||||
:title="$t('Updated')"
|
||||
:subtitle="DateTime.fromJSDate(recipe.updatedAt).toLocaleString(DateTime.DATETIME_MED)"
|
||||
prepend-icon="$edit">
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3" v-if="recipe.sourceUrl">
|
||||
<v-card
|
||||
variant="outlined"
|
||||
:title="$t('Imported_From')"
|
||||
prepend-icon="$import">
|
||||
<template #subtitle>
|
||||
<a :href="recipe.sourceUrl" target="_blank">{{ recipe.sourceUrl }}</a>
|
||||
</template>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
|
||||
</v-expansion-panels>
|
||||
|
||||
<v-card class="mt-2">
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12" md="3">
|
||||
<v-card
|
||||
variant="outlined"
|
||||
:title="$t('CreatedBy')"
|
||||
:subtitle="recipe.createdBy.displayName"
|
||||
prepend-icon="fa-solid fa-user">
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-card
|
||||
variant="outlined"
|
||||
:title="$t('Created')"
|
||||
:subtitle="DateTime.fromJSDate(recipe.createdAt).toLocaleString(DateTime.DATETIME_MED)"
|
||||
prepend-icon="$create">
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-card
|
||||
variant="outlined"
|
||||
:title="$t('Updated')"
|
||||
:subtitle="DateTime.fromJSDate(recipe.updatedAt).toLocaleString(DateTime.DATETIME_MED)"
|
||||
prepend-icon="$edit">
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3" v-if="recipe.sourceUrl">
|
||||
<v-card
|
||||
variant="outlined"
|
||||
:title="$t('Imported_From')"
|
||||
prepend-icon="$import">
|
||||
<template #subtitle>
|
||||
<a :href="recipe.sourceUrl" target="_blank">{{ recipe.sourceUrl }}</a>
|
||||
</template>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<recipe-activity :recipe="recipe"></recipe-activity>
|
||||
</template>
|
||||
@@ -195,12 +185,13 @@ import RecipeContextMenu from "@/components/inputs/RecipeContextMenu.vue";
|
||||
import KeywordsComponent from "@/components/display/KeywordsBar.vue";
|
||||
import RecipeImage from "@/components/display/RecipeImage.vue";
|
||||
import ExternalRecipeViewer from "@/components/display/ExternalRecipeViewer.vue";
|
||||
import {useWakeLock} from "@vueuse/core";
|
||||
import {useMediaQuery, useWakeLock} from "@vueuse/core";
|
||||
import StepView from "@/components/display/StepView.vue";
|
||||
import {DateTime} from "luxon";
|
||||
import PropertyView from "@/components/display/PropertyView.vue";
|
||||
|
||||
const {request, release} = useWakeLock()
|
||||
const isPrintMode = useMediaQuery('print')
|
||||
|
||||
const recipe = defineModel<Recipe>({required: true})
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<span v-else>{{ $t('Step') }} {{ props.stepNumber }}</span>
|
||||
</v-col>
|
||||
<v-col class="text-right">
|
||||
<v-btn-group density="compact" variant="tonal">
|
||||
<v-btn-group density="compact" variant="tonal" class="d-print-none">
|
||||
<v-btn size="small" color="info" v-if="step.time != undefined && step.time > 0" @click="timerRunning = true"><i
|
||||
class="fas fa-stopwatch mr-1 fa-fw"></i> {{ step.time }}
|
||||
</v-btn>
|
||||
|
||||
Reference in New Issue
Block a user