Fix image gen unit handling

karlomikus · Oct 14, 2023 · ded6f9e · ded6f9e
1 parent eb6e686
commit ded6f9e
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 26 deletions.
diff --git a/src/assets/base.css b/src/assets/base.css
@@ -1,5 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Alice&family=Inter:wght@400;700&family=Space+Mono&display=swap');
-/* @import url('https://api.fonts.coollabs.io/css2?family=Alice&family=Inter:wght@400;700&family=Space+Mono&display=swap'); */
+@import url('https://api.fonts.coollabs.io/css2?family=Alice&family=Inter:wght@400;700&family=Space+Mono&display=swap');
 
 :root {
     /* Base color scheme */

diff --git a/src/components/Cocktail/CocktailForm.vue b/src/components/Cocktail/CocktailForm.vue
@@ -128,7 +128,6 @@
 import Utils from './../../Utils.js'
 import UnitHandler from './../../UnitHandler'
 import ApiRequests from './../../ApiRequests.js'
-import Unitz from 'unitz'
 import OverlayLoader from './../OverlayLoader.vue'
 import IngredientModal from './../Cocktail/IngredientModal.vue'
 import ImageUpload from './../ImageUpload.vue'
@@ -394,17 +393,17 @@ export default {
                     .map((cIngredient) => {
                         // Convert oz to ml
                         if (cIngredient.units == 'oz') {
-                            cIngredient.amount = UnitHandler.oz2ml(cIngredient.amount);
+                            cIngredient.amount = UnitHandler.oz2ml(cIngredient.amount)
                             if (cIngredient.amount_max) {
-                                cIngredient.amount_max = UnitHandler.oz2ml(cIngredient.amount_max);
+                                cIngredient.amount_max = UnitHandler.oz2ml(cIngredient.amount_max)
                             }
                             cIngredient.units = 'ml'
                         }
                         // Convert cl to ml
                         if (cIngredient.units == 'cl') {
-                            cIngredient.amount = UnitHandler.cl2ml(cIngredient.amount);
+                            cIngredient.amount = UnitHandler.cl2ml(cIngredient.amount)
                             if (cIngredient.amount_max) {
-                                cIngredient.amount_max = UnitHandler.cl2ml(cIngredient.amount_max);
+                                cIngredient.amount_max = UnitHandler.cl2ml(cIngredient.amount_max)
                             }
                             cIngredient.units = 'ml'
                         }
@@ -414,17 +413,17 @@ export default {
                         // Handle substitutes
                         cIngredient.substitutes.filter(sub => sub.units).map(sub => {
                             if (sub.units == 'oz') {
-                                sub.amount = UnitHandler.oz2ml(sub.amount);
+                                sub.amount = UnitHandler.oz2ml(sub.amount)
                                 if (sub.amount_max) {
-                                    sub.amount_max = UnitHandler.oz2ml(sub.amount_max);
+                                    sub.amount_max = UnitHandler.oz2ml(sub.amount_max)
                                 }
                                 sub.units = 'ml'
                             }
 
                             if (sub.units == 'cl') {
-                                sub.amount = UnitHandler.cl2ml(sub.amount);
+                                sub.amount = UnitHandler.cl2ml(sub.amount)
                                 if (sub.amount_max) {
-                                    sub.amount_max = UnitHandler.cl2ml(sub.amount_max);
+                                    sub.amount_max = UnitHandler.cl2ml(sub.amount_max)
                                 }
                                 sub.units = 'ml'
                             }

diff --git a/src/components/Cocktail/GenerateImageDialog.vue b/src/components/Cocktail/GenerateImageDialog.vue
@@ -5,7 +5,7 @@
         <div class="image-download-preview">
             <img v-if="imagePayload" :src="imagePayload" alt="">
             <div v-else ref="exportElement" class="image-export-wrapper">
-                <PublicRecipe :cocktail="cocktail" :current-unit="currentUnit" :hide-units="true" :hide-header="features.hideHeader" :hide-footer="features.hideFooter"></PublicRecipe>
+                <PublicRecipe :cocktail="cocktail" :hide-units="true" :hide-header="features.hideHeader" :hide-footer="features.hideFooter"></PublicRecipe>
             </div>
         </div>
         <div class="dialog-actions">
@@ -20,7 +20,6 @@
 import * as htmlToImage from 'html-to-image'
 import OverlayLoader from './../OverlayLoader.vue'
 import PublicRecipe from './PublicRecipe.vue'
-import AppState from './../../AppState'
 
 export default {
     components: {
@@ -40,7 +39,6 @@ export default {
         return {
             isLoading: false,
             imagePayload: null,
-            currentUnit: 'ml',
             shareEnabled: false,
             features: {
                 hideHeader: true,
@@ -54,9 +52,6 @@ export default {
         }
     },
     mounted() {
-        const appState = new AppState()
-        this.currentUnit = appState.defaultUnit
-
         if ('share' in navigator) {
             this.shareEnabled = true
         }

diff --git a/src/components/Cocktail/PublicRecipe.vue b/src/components/Cocktail/PublicRecipe.vue
@@ -10,9 +10,9 @@
             <h2 itemprop="name">{{ cocktail.name }}</h2>
             <div v-show="!!cocktail.description" itemprop="description" class="public-cocktail-recipe__content" v-html="parsedDescription"></div>
             <div v-show="hideUnits == false" class="public-cocktail-recipe__units">
-                <button type="button" class="button button--public" :class="{'button--active': scopedUnit == 'ml'}" @click="scopedUnit = 'ml'">ml</button>
-                <button type="button" class="button button--public" :class="{'button--active': scopedUnit == 'oz'}" @click="scopedUnit = 'oz'">oz</button>
-                <button type="button" class="button button--public" :class="{'button--active': scopedUnit == 'cl'}" @click="scopedUnit = 'cl'">cl</button>
+                <button type="button" class="button button--public" :class="{'button--active': currentUnit == 'ml'}" @click="currentUnit = 'ml'">ml</button>
+                <button type="button" class="button button--public" :class="{'button--active': currentUnit == 'oz'}" @click="currentUnit = 'oz'">oz</button>
+                <button type="button" class="button button--public" :class="{'button--active': currentUnit == 'cl'}" @click="currentUnit = 'cl'">cl</button>
             </div>
             <div class="public-cocktail-recipe__summary__section">
                 <h3>{{ $t('ingredients.title') }}</h3>
@@ -41,6 +41,7 @@
 import {micromark} from 'micromark'
 import SiteLogo from '@/components/Layout/SiteLogo.vue'
 import UnitHandler from '../../UnitHandler'
+import AppState from '../../AppState'
 
 export default {
     components: {
@@ -55,10 +56,6 @@ export default {
                 }
             }
         },
-        currentUnit: {
-            type: String,
-            default: 'ml'
-        },
         hideUnits: {
             type: Boolean,
             default: false
@@ -75,7 +72,7 @@ export default {
     data() {
         return {
             isLoading: false,
-            scopedUnit: this.currentUnit
+            currentUnit: 'ml'
         }
     },
     computed: {
@@ -111,9 +108,13 @@ export default {
             return micromark(this.cocktail.garnish)
         },
     },
+    created() {
+        const appState = new AppState()
+        this.currentUnit = appState.defaultUnit
+    },
     methods: {
         parseIngredientAmount(ingredient) {
-            return UnitHandler.print(ingredient, this.scopedUnit)
+            return UnitHandler.print(ingredient, this.currentUnit)
         },
     }
 }