Feat add option to prefer cl over ml (#438)

* feat: add option to prefer cl over ml

* fix

.eslintrc.json

@@ -13,7 +13,8 @@
         "@typescript-eslint/no-unused-vars": [1],
         "@typescript-eslint/no-empty-function": [1],
         "@typescript-eslint/no-inferrable-types": [1],
-        "@typescript-eslint/no-extraneous-class": [1]
+        "@typescript-eslint/no-extraneous-class": [1],
+        "eqeqeq": ["error", "always", { "null": "ignore" }]
     },
 
     "overrides": [

android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "com.moimob.drinkable"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 14201
-        versionName "1.42.1"
+        versionCode 14300
+        versionName "1.43.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

fastlane/metadata/android/en-US/changelogs/14300.txt

@@ -0,0 +1 @@
+• Added option for users using the metric measurement system to select their preferred unit between ml and cl

src/components/dialogs/cocktail-dialog/cocktail-dialog.html

@@ -242,7 +242,7 @@ <h6 if.bind="ingredientGroup.substituteNames" class="text-sm opacity-75">
 
                         <div if.bind="!isEditMode" class="flex self-center">
                             <p class="${ingredientGroup.isChecked ? 'opacity-50' : ''}">
-                                ${ingredientGroup.amount | amountFormat:multiplier:ingredientGroup.unit}
+                                ${ingredientGroup.amount | amountFormat:multiplier:ingredientGroup.unit:preferCl}
                             </p>
                             <svg
                                 if.bind="ingredientGroup.isInStorage"

src/components/dialogs/cocktail-dialog/cocktail-dialog.ts

@@ -44,6 +44,7 @@ export class CocktailDialog {
     public tags: TagModel[] = [];
     public alcoholInfo: CocktailAlcoholInformation;
     public noteState: 'none' | 'edit' | 'exists' = 'none';
+    public preferCl: boolean;
 
     public filteredIngredientTags: Ingredient[] = [];
     public isBusy: boolean;
@@ -133,6 +134,7 @@ export class CocktailDialog {
             x => !this.extendedIngredientGroup.map(x => x.ingredientId).includes(x.id)
         );
         this.noteState = this.cocktail.notes?.length > 0 ? 'exists' : 'none';
+        this.preferCl = this._localStorageService.getPreferCl();
     }
 
     attached() {

src/converters/amount-format.ts

@@ -8,7 +8,7 @@ import { convertToFraction } from 'functions/utils';
 export class AmountFormatValueConverter {
     constructor(private _localStorageService: LocalStorageService) {}
 
-    toView(value: string, multiplier: number, unit: Unit) {
+    toView(value: string, multiplier: number, unit: Unit, preferCl: boolean) {
         if (value === '' || value === undefined) {
             return value;
         }
@@ -22,6 +22,12 @@ export class AmountFormatValueConverter {
 
         const fraction = convertToFraction(newValue);
 
+        if (preferCl && newUnit === Unit.ML && system === MessuarementSystem.Metric) {
+            const clValue = newValue / 10;
+            const clFraction = convertToFraction(clValue);
+            return `${clFraction} ${Unit.CL}`;
+        }
+
         return newUnit === Unit.None ? fraction : `${fraction} ${newUnit}`;
     }
     getUnit(unit: Unit, system: MessuarementSystem) {

src/domain/entities/setting-entity.ts

@@ -1,8 +1,9 @@
 export class SettingEntity {
-    language?: string;
     showMocktails: boolean;
+    language?: string;
     exploreWidgetState?: number;
     lastSelectedIngredientListId?: number;
+    preferCl?: boolean;
 
     constructor() {
         this.showMocktails = false;

src/locales/en/translation.json

@@ -166,5 +166,6 @@
     "copy-name-to-clipboard": "Copy name to Clipboard",
     "copied-to-clipboard": "Copied to Clipboard",
     "add-to-favorites": "Add to Favorites",
-    "remove-from-favorites": "Remove from Favorites"
+    "remove-from-favorites": "Remove from Favorites",
+    "preferred-unit": "Preferred Unit"
 }

src/modules/home/home.ts

@@ -35,7 +35,7 @@ export class Home {
     }
 
     private setupSnowflakes() {
-        if (new Date().getMonth() == 11) {
+        if (new Date().getMonth() === 11) {
             this.snowflakes = new Snowflakes({
                 count: 10,
                 speed: 0.3,

src/modules/user/settings/settings.html

@@ -9,7 +9,7 @@
             </select>
         </div>
 
-        <div class="form-control w-full">
+        <div class="form-control w-full pt-4">
             <label class="label">
                 <span class="label-text" t="messuarementSystem"></span>
             </label>
@@ -23,14 +23,22 @@
             </select>
         </div>
 
-        <div class="form-control w-full pt-3">
+        <div if.bind="selectedMessuarementSystem === 'Metric'" class="flex items-center justify-between pt-2 pl-1">
+            <p class="text-xs whitespace-nowrap mr-2" t="preferred-unit"></p>
+            <select class="select select-bordered select-sm w-full" value.bind="preferCl">
+                <option model.bind="true">CL</option>
+                <option model.bind="false">ML</option>
+            </select>
+        </div>
+
+        <div class="form-control w-full pt-6">
             <label class="label cursor-pointer">
                 <span class="label-text" t="show-mocktails"></span>
                 <input type="checkbox" class="toggle" checked.bind="showMocktails" />
             </label>
         </div>
 
-        <div class="form-control w-full">
+        <div class="form-control w-full pt-4">
             <label class="label">
                 <span class="label-text" t="language"></span>
             </label>

src/modules/user/settings/settings.ts

@@ -13,6 +13,7 @@ export class Settings {
     @observable public selectedTheme: string;
     @observable public selectedLanguage: string;
     @observable public selectedMessuarementSystem: MessuarementSystem;
+    @observable public preferCl: boolean;
     @observable public showMocktails: boolean;
 
     public themes = [
@@ -73,6 +74,7 @@ export class Settings {
     public attached() {
         this.selectedTheme = this._themeService.getLocalStorageResult();
         this.selectedMessuarementSystem = this._localStorageService.getMessuarementSystem();
+        this.preferCl = this._localStorageService.getPreferCl();
         this._settings = this._localStorageService.getSettings();
         this.selectedLanguage = this._settings.language;
         this.showMocktails = this._settings.showMocktails;
@@ -93,6 +95,14 @@ export class Settings {
         await this._localStorageService.updateMessuarmentSystem(newValue);
     }
 
+    async preferClChanged(newValue: boolean, oldValue: boolean) {
+        if (oldValue === undefined) {
+            return;
+        }
+
+        await this._localStorageService.updatePreferCL(newValue);
+    }
+
     async showMocktailsChanged(newValue: boolean, oldValue: boolean) {
         if (oldValue === undefined) {
             return;

src/services/local-storage-service.ts

@@ -215,6 +215,10 @@ export class LocalStorageService {
         return this._activeIngredientListId;
     }
 
+    public getPreferCl() {
+        return this._settings.preferCl ?? false;
+    }
+
     public getIngredientList() {
         return this._ingredientLists.find(x => x.id === this._activeIngredientListId);
     }
@@ -254,6 +258,11 @@ export class LocalStorageService {
         this._activeIngredientListId = id;
     }
 
+    public async updatePreferCL(preferCl: boolean) {
+        this._settings.preferCl = preferCl;
+        await this.updateSettings(this._settings);
+    }
+
     public async keyExists(key: string): Promise<boolean> {
         const { keys } = await Preferences.keys();
         if (keys.length > 0 && keys.includes(key)) {

tests/converters/amount-format.test.ts

@@ -0,0 +1,88 @@
+import { LocalStorageService } from 'services/local-storage-service';
+import { expect } from '@jest/globals';
+import { AmountFormatValueConverter } from '../../src/converters/amount-format';
+import { Unit } from 'domain/enums/unit';
+import { MessuarementSystem } from 'domain/enums/messuarement-system';
+
+describe('IngredientService', () => {
+    let localStorageService: LocalStorageService;
+    let sut: AmountFormatValueConverter;
+
+    beforeEach(async () => {
+        localStorageService = new LocalStorageService();
+        await localStorageService.initialize();
+
+        sut = new AmountFormatValueConverter(localStorageService);
+    });
+
+    afterEach(() => {
+        window.localStorage.clear();
+    });
+
+    describe('Metric', () => {
+        beforeEach(async () => {
+            await localStorageService.updateMessuarmentSystem(MessuarementSystem.Metric);
+        });
+
+        test('Pass Milliliter - Should return same as input', () => {
+            const result = sut.toView('10', 1, Unit.ML, false);
+
+            expect(result).toEqual('10 ml');
+        });
+
+        test('Pass Milliliter and multiplyer - Should return multiplied value', () => {
+            const result = sut.toView('10', 3, Unit.ML, false);
+
+            expect(result).toEqual('30 ml');
+        });
+
+        test('Pass Milliliter with preferCl - Should return value in Cl', () => {
+            const result = sut.toView('10', 1, Unit.ML, true);
+
+            expect(result).toEqual('1 cl');
+        });
+
+        test('Pass Milliliter with preferCl - Should handle fraction', () => {
+            const result = sut.toView('5', 1, Unit.ML, true);
+
+            expect(result).toEqual('1/2 cl');
+        });
+
+        test('Pass Milliliter and multiplyer with preferCl - Should return multiplied value but in Cl', () => {
+            const result = sut.toView('10', 3, Unit.ML, true);
+
+            expect(result).toEqual('3 cl');
+        });
+    });
+
+    describe('Imperial', () => {
+        test('Pass Milliliter - Should return in fl oz', () => {
+            const result = sut.toView('30', 1, Unit.ML, false);
+
+            expect(result).toEqual('1 fl oz');
+        });
+
+        test('Pass Milliliter with preferCl- Should return same as above', () => {
+            const result = sut.toView('30', 1, Unit.ML, true);
+
+            expect(result).toEqual('1 fl oz');
+        });
+
+        test('Pass Milliliter and multiplyer - Should return multiplied value', () => {
+            const result = sut.toView('30', 3, Unit.ML, false);
+
+            expect(result).toEqual('3 fl oz');
+        });
+
+        test('Pass Milliliter with preferCl - Should return value in Cl', () => {
+            const result = sut.toView('15', 1, Unit.ML, false);
+
+            expect(result).toEqual('1/2 fl oz');
+        });
+
+        test('should return empty string when value is empty', () => {
+            const result = sut.toView('', 1, Unit.ML, false);
+            expect(result).toEqual('');
+        });
+    });
+});