recipe view tweaks

TandoorRecipes · Dec 19, 2024 · b9e5126 · b9e5126
1 parent a34fddc
commit b9e5126
Show file tree

Hide file tree

Showing 37 changed files with 95 additions and 44 deletions.
diff --git a/vue3/src/components/display/IngredientsTable.vue b/vue3/src/components/display/IngredientsTable.vue
@@ -2,7 +2,8 @@
     <v-table density="compact" v-if="props.ingredients.length > 0">
 
         <tbody>
-        <IngredientsTableRow v-for="i in props.ingredients" :ingredient="i" :key="i.id" :show-notes="props.showNotes" :draggable="props.draggable"></IngredientsTableRow>
+        <ingredients-table-row v-for="i in props.ingredients" :ingredient="i" :key="i.id" :show-notes="props.showNotes"
+                               :ingredient-factor="ingredientFactor"></ingredients-table-row>
         </tbody>
 
     </v-table>
@@ -23,8 +24,9 @@ const props = defineProps({
         type: Boolean,
         default: true
     },
-    draggable: {
-        type: Boolean,
+    ingredientFactor: {
+        type: Number,
+        required: true,
     },
 })
 

diff --git a/vue3/src/components/display/IngredientsTableRow.vue b/vue3/src/components/display/IngredientsTableRow.vue
@@ -4,17 +4,14 @@
             <td colspan="4"><b>{{ props.ingredient.note }}</b></td>
         </template>
         <template v-else>
-            <td>{{ props.ingredient.amount }}</td>
+            <td>{{ props.ingredient.amount * props.ingredientFactor }}</td>
             <td><span v-if="props.ingredient.unit != null">{{ props.ingredient.unit.name }}</span></td>
             <td><span v-if="props.ingredient.food != null">{{ props.ingredient.food.name }}</span></td>
             <td v-if="props.showNotes">
                 <v-icon class="far fa-comment float-right" v-if="props.ingredient.note != '' && props.ingredient.note != undefined" @click="showTooltip = !showTooltip">
                     <v-tooltip v-model="showTooltip" activator="parent" location="start">{{ props.ingredient.note }}</v-tooltip>
                 </v-icon>
             </td>
-            <td v-if="props.draggable" >
-                <v-icon icon="$dragHandle" class="drag-handle cursor-move"></v-icon>
-            </td>
         </template>
 
     </tr>
@@ -33,8 +30,9 @@ const props = defineProps({
         type: Boolean,
         default: true
     },
-    draggable: {
-        type: Boolean,
+    ingredientFactor: {
+        type: Number,
+        required: true,
     },
 })
 

diff --git a/vue3/src/components/display/RecipeActivity.vue b/vue3/src/components/display/RecipeActivity.vue
@@ -1,24 +1,32 @@
 <template>
 
     <v-card class="mt-1">
-        <v-card-title>Activity</v-card-title>
+        <v-card-title>{{ $t('Activity') }}</v-card-title>
         <v-card-text>
 
-            <v-card v-for="c in cookLogs" :key="c.id" class="mt-1">
-                <v-card-text>
-                    <v-rating density="comfortable" size="x-small" color="tandoor" v-model="c.rating"></v-rating>
-                    <br/>
-                    <span v-if="c.servings != null && c.servings > 0">{{ c.servings }} <span v-if="recipe.servingsText != ''">{{ recipe.servingsText }}</span><span v-else>Servings</span></span> <br/>
+            <v-list>
+                <v-list-item v-for="c in cookLogs" :key="c.id">
+                    <template #prepend>
+                        <v-avatar color="primary">V</v-avatar>
+                    </template>
+                    <v-list-item-title class="font-weight-bold">{{ c.createdBy.displayName }}
+                     <v-rating density="comfortable" size="x-small" color="tandoor" class="float-right" v-model="c.rating"></v-rating>
+                    </v-list-item-title>
 
                     {{ c.comment }}
-                </v-card-text>
-                <v-divider></v-divider>
-                <v-card-subtitle>
-                    {{ DateTime.fromJSDate(c.createdAt).toLocaleString(DateTime.DATETIME_SHORT) }} by {{ c.createdBy.displayName }}
-                </v-card-subtitle>
-            </v-card>
-
 
+                    <p v-if="c.servings != null && c.servings > 0">
+                        {{ c.servings }}
+                        <span v-if="recipe.servingsText != ''">{{ recipe.servingsText }}</span>
+                        <span v-else-if="c.servings == 1">{{ $t('Serving') }}</span>
+                        <span v-else>{{ $t('Servings') }}</span>
+                    </p>
+
+                    <p class="text-disabled">
+                        {{ DateTime.fromJSDate(c.createdAt).toLocaleString(DateTime.DATETIME_SHORT) }}
+                    </p>
+                </v-list-item>
+            </v-list>
 
         </v-card-text>
     </v-card>

diff --git a/vue3/src/components/display/RecipeView.vue b/vue3/src/components/display/RecipeView.vue
@@ -9,14 +9,16 @@
             >
                 <template #overlay>
                     <v-chip class="ms-2" color="primary" variant="flat" size="x-small">by {{ props.recipe.createdBy }}</v-chip>
-                    <KeywordsComponent variant="flat" class="ms-1 mb-2" :keywords="props.recipe.keywords"></KeywordsComponent>
+                    <keywords-component variant="flat" class="ms-1 mb-2" :keywords="props.recipe.keywords"></keywords-component>
                 </template>
             </recipe-image>
 
 
             <v-card>
                 <v-sheet class="d-flex align-center">
-                    <span class="ps-2 text-h5  flex-grow-1" :class="{'text-truncate': !showFullRecipeName}" @click="showFullRecipeName = !showFullRecipeName">{{ props.recipe.name }}</span>
+                    <span class="ps-2 text-h5  flex-grow-1" :class="{'text-truncate': !showFullRecipeName}" @click="showFullRecipeName = !showFullRecipeName">
+                        {{ props.recipe.name }}
+                    </span>
                     <recipe-context-menu :recipe="recipe"></recipe-context-menu>
                 </v-sheet>
             </v-card>
@@ -34,25 +36,26 @@
                         <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-sort-numeric-up fa-fw mr-1"></i> {{ servings }} <br/>
-                                    <div class="text-grey"><span v-if="props.recipe?.servingsText">{{ props.recipe.servingsText }}</span><span v-else>Servings</span></div>
-                                </div>
-                            </template>
-                        </NumberScalerDialog>
+
+                        <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="props.recipe?.servingsText">{{ props.recipe.servingsText }}</span><span v-else>{{ $t('Servings') }}</span></div>
+                            <number-scaler-dialog :number="servings" @confirm="(s: number) => {servings = s}" title="Servings">
+                            </number-scaler-dialog>
+                        </div>
+
+
                     </v-col>
                 </v-row>
             </v-container>
         </v-card>
 
         <v-card class="mt-1" v-if="props.recipe.steps.length > 1">
-            <StepsOverview :steps="props.recipe.steps"></StepsOverview>
+            <steps-overview :steps="props.recipe.steps"></steps-overview>
         </v-card>
 
         <v-card class="mt-1" v-for="(step, index) in props.recipe.steps" :key="step.id">
-            <Step :step="step" :step-number="index+1" :ingredient_factor="ingredientFactor"></Step>
+            <step :step="step" :step-number="index+1" :ingredientFactor="ingredientFactor"></step>
         </v-card>
 
         <recipe-activity :recipe="recipe"></recipe-activity>

diff --git a/vue3/src/components/display/Step.vue b/vue3/src/components/display/Step.vue
@@ -2,23 +2,32 @@
     <v-card>
         <v-card-title>
             <v-row>
-                <v-col><span v-if="props.step.name">{{ props.step.name }}</span><span v-else>Step {{ props.stepNumber }}</span></v-col>
+                <v-col><span v-if="props.step.name">{{ props.step.name }}</span><span v-else>{{ $t('Step') }} {{ props.stepNumber }}</span></v-col>
                 <v-col class="text-right">
                     <v-btn-group density="compact" variant="tonal">
-                        <v-btn size="small" color="info" v-if="props.step.time != undefined && props.step.time > 0" @click="timerRunning = true"><i class="fas fa-stopwatch mr-1 fa-fw"></i> {{ props.step.time }}</v-btn>
-                        <v-btn size="small" color="success" v-if="hasDetails" @click="stepChecked = !stepChecked"><i class="fas fa-fw" :class="{'fa-check': !stepChecked, 'fa-times': stepChecked}"></i></v-btn>
+                        <v-btn size="small" color="info" v-if="props.step.time != undefined && props.step.time > 0" @click="timerRunning = true"><i
+                            class="fas fa-stopwatch mr-1 fa-fw"></i> {{ props.step.time }}
+                        </v-btn>
+                        <v-btn size="small" color="success" v-if="hasDetails" @click="stepChecked = !stepChecked"><i class="fas fa-fw"
+                                                                                                                     :class="{'fa-check': !stepChecked, 'fa-times': stepChecked}"></i>
+                        </v-btn>
                     </v-btn-group>
                 </v-col>
             </v-row>
         </v-card-title>
         <template v-if="!stepChecked">
             <timer :seconds="props.step.time != undefined ? props.step.time*60 : 0" @stop="timerRunning = false" v-if="timerRunning"></timer>
-
-            <IngredientsTable :ingredients="props.step.ingredients"></IngredientsTable>
-
-            <v-card-text v-if="props.step.instructionsMarkdown.length > 0">
-                <instructions :instructions_html="props.step.instructionsMarkdown" :ingredient_factor="ingredient_factor"></instructions>
+            <v-card-text>
+                <v-row>
+                    <v-col cols="12" md="6" v-if="props.step?.ingredients.length > 0">
+                        <ingredients-table :ingredients="props.step.ingredients" :ingredient-factor="ingredientFactor"></ingredients-table>
+                    </v-col>
+                    <v-col cols="12" md="6">
+                        <instructions :instructions_html="props.step.instructionsMarkdown" :ingredient_factor="ingredientFactor"></instructions>
+                    </v-col>
+                </v-row>
             </v-card-text>
+
         </template>
 
     </v-card>
@@ -42,7 +51,7 @@ const props = defineProps({
         required: false,
         default: 1
     },
-    ingredient_factor: {
+    ingredientFactor: {
         type: Number,
         required: true,
     },

diff --git a/vue3/src/locales/ar.json b/vue3/src/locales/ar.json
@@ -1,6 +1,7 @@
 {
   "Access_Token": "",
   "Actions": "",
+  "Activity": "",
   "Add": "",
   "AddAll": "",
   "AddFoodToShopping": "",

diff --git a/vue3/src/locales/bg.json b/vue3/src/locales/bg.json
@@ -1,6 +1,7 @@
 {
   "Access_Token": "",
   "Actions": "",
+  "Activity": "",
   "Add": "Добави",
   "AddAll": "",
   "AddFoodToShopping": "Добавете {food} към списъка си за пазаруване",

diff --git a/vue3/src/locales/ca.json b/vue3/src/locales/ca.json
@@ -3,6 +3,7 @@
   "Access_Token": "",
   "Account": "",
   "Actions": "",
+  "Activity": "",
   "Add": "",
   "AddAll": "",
   "AddFoodToShopping": "",

diff --git a/vue3/src/locales/cs.json b/vue3/src/locales/cs.json
@@ -3,6 +3,7 @@
   "Access_Token": "",
   "Account": "Účet",
   "Actions": "",
+  "Activity": "",
   "Add": "Přidat",
   "AddAll": "",
   "AddFoodToShopping": "Přidat {food} na váš nákupní seznam",

diff --git a/vue3/src/locales/da.json b/vue3/src/locales/da.json
@@ -3,6 +3,7 @@
   "Access_Token": "",
   "Account": "Bruger",
   "Actions": "",
+  "Activity": "",
   "Add": "Tilføj",
   "AddAll": "",
   "AddFoodToShopping": "Tilføj {food} til indkøbsliste",

diff --git a/vue3/src/locales/de.json b/vue3/src/locales/de.json
@@ -3,6 +3,7 @@
   "Access_Token": "Zugriffstoken",
   "Account": "Konto",
   "Actions": "Aktionen",
+  "Activity": "Aktivität",
   "Add": "Hinzufügen",
   "AddAll": "Alle Hinzufügen",
   "AddFoodToShopping": "Fügen Sie {food} zur Einkaufsliste hinzu",

diff --git a/vue3/src/locales/el.json b/vue3/src/locales/el.json
@@ -3,6 +3,7 @@
   "Access_Token": "",
   "Account": "Λογαριασμός",
   "Actions": "",
+  "Activity": "",
   "Add": "Προσθήκη",
   "AddAll": "",
   "AddFoodToShopping": "Προσθήκη του φαγητού {food} στη λίστα αγορών σας",

diff --git a/vue3/src/locales/en.json b/vue3/src/locales/en.json
@@ -3,6 +3,7 @@
   "Access_Token": "Access Token",
   "Account": "Account",
   "Actions": "Actions",
+  "Activity": "Activity",
   "Add": "Add",
   "AddAll": "Add all",
   "AddFoodToShopping": "Add {food} to your shopping list",

diff --git a/vue3/src/locales/es.json b/vue3/src/locales/es.json
@@ -3,6 +3,7 @@
   "Access_Token": "",
   "Account": "Cuenta",
   "Actions": "",
+  "Activity": "",
   "Add": "Añadir",
   "AddAll": "",
   "AddFoodToShopping": "Añadir {food} a la lista de la compra",

diff --git a/vue3/src/locales/fi.json b/vue3/src/locales/fi.json
@@ -1,6 +1,7 @@
 {
   "Access_Token": "",
   "Actions": "",
+  "Activity": "",
   "Add": "Lisää",
   "AddAll": "",
   "AddMany": "",

diff --git a/vue3/src/locales/fr.json b/vue3/src/locales/fr.json
@@ -3,6 +3,7 @@
   "Access_Token": "",
   "Account": "Compte",
   "Actions": "",
+  "Activity": "",
   "Add": "Ajouter",
   "AddAll": "",
   "AddFoodToShopping": "Ajouter l’aliment {food} à votre liste de courses",

diff --git a/vue3/src/locales/he.json b/vue3/src/locales/he.json
@@ -3,6 +3,7 @@
   "Access_Token": "",
   "Account": "חשבון",
   "Actions": "",
+  "Activity": "",
   "Add": "הוספה",
   "AddAll": "",
   "AddFoodToShopping": "הוסף {מזון} לרשימת הקניות",

diff --git a/vue3/src/locales/hu.json b/vue3/src/locales/hu.json
@@ -3,6 +3,7 @@
   "Access_Token": "",
   "Account": "Fiók",
   "Actions": "",
+  "Activity": "",
   "Add": "Hozzáadás",
   "AddAll": "",
   "AddFoodToShopping": "{food} hozzáadása bevásárlólistához",

diff --git a/vue3/src/locales/hy.json b/vue3/src/locales/hy.json
@@ -1,6 +1,7 @@
 {
   "Access_Token": "",
   "Actions": "",
+  "Activity": "",
   "Add": "",
   "AddAll": "",
   "AddMany": "",

diff --git a/vue3/src/locales/id.json b/vue3/src/locales/id.json
@@ -3,6 +3,7 @@
   "Access_Token": "",
   "Account": "",
   "Actions": "",
+  "Activity": "",
   "Add": "Tambahkan",
   "AddAll": "",
   "AddFoodToShopping": "",

diff --git a/vue3/src/locales/is.json b/vue3/src/locales/is.json
@@ -3,6 +3,7 @@
   "Access_Token": "",
   "Account": "",
   "Actions": "",
+  "Activity": "",
   "Add": "",
   "AddAll": "",
   "AddFoodToShopping": "",

diff --git a/vue3/src/locales/it.json b/vue3/src/locales/it.json
@@ -3,6 +3,7 @@
   "Access_Token": "",
   "Account": "Account",
   "Actions": "",
+  "Activity": "",
   "Add": "Aggiungi",
   "AddAll": "",
   "AddFoodToShopping": "Aggiungi {food} alla tua lista della spesa",

diff --git a/vue3/src/locales/lt.json b/vue3/src/locales/lt.json
@@ -3,6 +3,7 @@
   "Access_Token": "",
   "Account": "",
   "Actions": "",
+  "Activity": "",
   "Add": "",
   "AddAll": "",
   "AddFoodToShopping": "",

diff --git a/vue3/src/locales/nb_NO.json b/vue3/src/locales/nb_NO.json
@@ -3,6 +3,7 @@
   "Access_Token": "",
   "Account": "",
   "Actions": "",
+  "Activity": "",
   "Add": "Legg til",
   "AddAll": "",
   "AddFoodToShopping": "Legg til {food] i handlelisten din",

diff --git a/vue3/src/locales/nl.json b/vue3/src/locales/nl.json
@@ -3,6 +3,7 @@
   "Access_Token": "",
   "Account": "Account",
   "Actions": "",
+  "Activity": "",
   "Add": "Voeg toe",
   "AddAll": "",
   "AddFoodToShopping": "Voeg {food} toe aan je boodschappenlijst",

diff --git a/vue3/src/locales/pl.json b/vue3/src/locales/pl.json
@@ -3,6 +3,7 @@
   "Access_Token": "",
   "Account": "Konto",
   "Actions": "",
+  "Activity": "",
   "Add": "Dodaj",
   "AddAll": "",
   "AddFoodToShopping": "Dodaj {food} do swojej listy zakupów",

diff --git a/vue3/src/locales/pt.json b/vue3/src/locales/pt.json
@@ -1,6 +1,7 @@
 {
   "Access_Token": "",
   "Actions": "",
+  "Activity": "",
   "Add": "Adicionar",
   "AddAll": "",
   "AddFoodToShopping": "Adicionar {food} à sua lista de compras",

diff --git a/vue3/src/locales/pt_BR.json b/vue3/src/locales/pt_BR.json
@@ -3,6 +3,7 @@
   "Access_Token": "",
   "Account": "Conta",
   "Actions": "",
+  "Activity": "",
   "Add": "Adicionar",
   "AddAll": "",
   "AddFoodToShopping": "Incluir {food} na sua lista de compras",

diff --git a/vue3/src/locales/ro.json b/vue3/src/locales/ro.json
@@ -3,6 +3,7 @@
   "Access_Token": "",
   "Account": "Cont",
   "Actions": "",
+  "Activity": "",
   "Add": "Adaugă",
   "AddAll": "",
   "AddFoodToShopping": "Adăugă {food} în lista de cumpărături",