feat(all): display translation progress in percentage (#211)

* feat(all): display translation progress in percentage

* add cocktails

* update version

android/app/build.gradle

@@ -6,8 +6,8 @@ android {
         applicationId "com.moimob.drinkable"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 11801
-        versionName "1.18.1"
+        versionCode 11901
+        versionName "1.19.1"
         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/11900.txt

@@ -0,0 +1,3 @@
+• Added more cocktails 🍸
+• Added Russian language
+• Added Polish language

src/data/cocktail-data.ts

@@ -1713,5 +1713,43 @@ const cocktails: Cocktail[] = [
             { amount: '10', ingredientId: '3', unit: Unit.ML },
             { amount: '0.5', ingredientId: '99', unit: '' }
         ]
+    },
+    {
+        id: '121',
+        imageSrc: 'images/absolut_limousine.jpg',
+        isImagePortrait: false,
+        name: 'Absolut limousine',
+        category: DrinkCategory.Cocktail,
+        instructions: 'Fill Absolut into a glass. Add Lime juice. Add Ice and lime wedges.',
+        ingredientGroups: [
+            { amount: '30', ingredientId: '51', unit: Unit.ML },
+            { amount: '15', ingredientId: '2', unit: Unit.ML },
+            { amount: '', ingredientId: '7', unit: '' }
+        ]
+    },
+    {
+        id: '122',
+        imageSrc: 'images/zizi_coin-coin.jpg',
+        isImagePortrait: false,
+        name: 'Zizi Coin-coin',
+        category: DrinkCategory.Cocktail,
+        instructions:
+            'Pour Cointreau on ice, add fresh lemon (or lime) juice, stir gently, and finally add slices of lemon/lime in glass',
+        ingredientGroups: [
+            { amount: '50', ingredientId: '92', unit: Unit.ML },
+            { amount: '20', ingredientId: '10', unit: Unit.ML }
+        ]
+    },
+    {
+        id: '123',
+        imageSrc: 'images/cream_soda.jpg',
+        isImagePortrait: false,
+        name: 'Cream Soda',
+        category: DrinkCategory.Cocktail,
+        instructions: 'Pour 1oz of Spiced Rum into a highball glass with ice. Fill with Ginger Ale.',
+        ingredientGroups: [
+            { amount: '40', ingredientId: '21', unit: Unit.ML },
+            { amount: '', ingredientId: '24', unit: '' }
+        ]
     }
 ];

src/locales/sv/translation.json

@@ -95,4 +95,4 @@
     "or": "eller",
     "show-mocktails": "Visa Mocktails",
     "all-ingredients": "Alla ingredienser"
-}
+}

src/modules/settings/general-settings/general-settings.html

@@ -44,62 +44,68 @@
                     <option repeat.for="language of languages" model.bind="language.value">${language.name}</option>
                 </select>
 
-                <div
-                    if.bind="translationStatus.basic !== undefined"
-                    class="flex pt-2"
-                    data-cy="translation-status-basic">
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        class="h-6 w-6 text-success self-center pr-1"
-                        stroke="currentColor"
-                        viewBox="0 0 512 512">
-                        <title>Checkmark</title>
-                        <path
-                            fill="none"
+                <div if.bind="!translationStatus.isDefaultLanguage">
+                    <div class="flex pt-2" data-cy="translation-status-basic">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="h-6 w-6 ${translationStatus.basic === 100 ? 'text-success' : 'text-warning'} self-center pr-1"
                             stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                            d="M416 128L192 384l-96-96" />
-                    </svg>
-                    <p t="basic-app-translations"></p>
-                </div>
+                            viewBox="0 0 512 512">
+                            <title>Checkmark</title>
+                            <path
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="32"
+                                d="M416 128L192 384l-96-96" />
+                        </svg>
+                        <p>
+                            <span t="basic-app-translations"></span>
+                            <span if.bind="translationStatus.basic > 0 && 100 > translationStatus.basic">
+                                (${translationStatus.basic}%)</span
+                            >
+                        </p>
+                    </div>
 
-                <div
-                    if.bind="translationStatus.ingredients !== undefined"
-                    class="flex pt-2"
-                    data-cy="translation-status-ingredient">
-                    <svg
-                        if.bind="translationStatus.ingredients === true"
-                        xmlns="http://www.w3.org/2000/svg"
-                        class="h-6 w-6 text-success self-center pr-1"
-                        stroke="currentColor"
-                        viewBox="0 0 512 512">
-                        <title>Checkmark</title>
-                        <path
-                            fill="none"
+                    <div class="flex pt-2" data-cy="translation-status-ingredient">
+                        <svg
+                            if.bind="translationStatus.ingredients !== 0"
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="h-6 w-6 ${translationStatus.ingredients === 100 ? 'text-success' : 'text-warning'} self-center pr-1"
                             stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                            d="M416 128L192 384l-96-96" />
-                    </svg>
-                    <svg
-                        else
-                        xmlns="http://www.w3.org/2000/svg"
-                        class="h-6 w-6 text-error self-center pr-1"
-                        stroke="currentColor"
-                        viewBox="0 0 512 512">
-                        <title>Close</title>
-                        <path
-                            fill="none"
+                            viewBox="0 0 512 512">
+                            <title>Checkmark</title>
+                            <path
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="32"
+                                d="M416 128L192 384l-96-96" />
+                        </svg>
+                        <svg
+                            else
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="h-6 w-6 text-error self-center pr-1"
                             stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                            d="M368 368L144 144M368 144L144 368" />
-                    </svg>
-                    <p t="ingredient-translations"></p>
+                            viewBox="0 0 512 512">
+                            <title>Close</title>
+                            <path
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="32"
+                                d="M368 368L144 144M368 144L144 368" />
+                        </svg>
+                        <p>
+                            <span t="ingredient-translations"></span>
+                            <span if.bind="translationStatus.ingredients > 0 && 100 > translationStatus.ingredients">
+                                (${translationStatus.ingredients}%)</span
+                            >
+                        </p>
+                    </div>
                 </div>
             </div>
         </div>

src/modules/settings/general-settings/general-settings.ts

@@ -7,6 +7,7 @@ import { I18N } from 'aurelia-i18n';
 import { IngredientService } from 'services/ingredient-service';
 import { getLanguages } from 'data/languages';
 import { CocktailService } from 'services/cocktail-service';
+import { TranslationStatus } from './translation-status';
 
 @inject(ThemeService, LocalStorageService, I18N, IngredientService, CocktailService)
 export class GeneralSettings {
@@ -24,13 +25,42 @@ export class GeneralSettings {
 
     public messuarementSystems = [{ value: MessuarementSystem.Imperial }, { value: MessuarementSystem.Metric }];
 
-    public translationStatus = {
+    public translationStatus: TranslationStatus = {
         basic: undefined,
-        ingredients: undefined
+        ingredients: undefined,
+        isDefaultLanguage: true
     };
 
     private _settings: SettingEntity;
 
+    private ignoreKeys: string[] = [
+        'now',
+        'second_ago',
+        'second_ago_other',
+        'second_in',
+        'second_in_other',
+        'minute_ago',
+        'minute_ago_other',
+        'minute_in',
+        'minute_in_other',
+        'hour_ago',
+        'hour_ago_other',
+        'hour_in',
+        'hour_in_other',
+        'day_ago',
+        'day_ago_other',
+        'day_in',
+        'day_in_other',
+        'month_ago',
+        'month_ago_other',
+        'month_in',
+        'month_in_other',
+        'year_ago',
+        'year_ago_other',
+        'year_in',
+        'year_in_other'
+    ];
+
     constructor(
         private _themeService: ThemeService,
         private _localStorageService: LocalStorageService,
@@ -87,17 +117,34 @@ export class GeneralSettings {
     }
 
     private setTranslationStatus(locale: string) {
+        let enTranslationKeys = Object.keys(this._i18n.i18next.store.data['en']?.translation).filter(
+            x => !this.ignoreKeys.includes(x)
+        ).length;
+
+        let enIngredientKeys = Object.keys(this._i18n.i18next.store.data['en']?.ingredients).length;
+
         if (locale === undefined || locale === 'en') {
             this.translationStatus = {
                 basic: undefined,
-                ingredients: undefined
+                ingredients: undefined,
+                isDefaultLanguage: true
             };
             return;
         }
 
+        let translationKeys = Object.keys(this._i18n.i18next.store.data[locale].translation).filter(
+            x => !this.ignoreKeys.includes(x)
+        ).length;
+
+        let ingredientKeys =
+            this._i18n.i18next.store.data[locale]?.ingredients !== undefined
+                ? Object.keys(this._i18n.i18next.store.data[locale]?.ingredients)?.length
+                : 0;
+
         this.translationStatus = {
-            basic: true,
-            ingredients: this._i18n.i18next.store.data[locale]?.ingredients !== undefined
+            basic: Math.floor((translationKeys / enTranslationKeys) * 100),
+            ingredients: Math.floor((ingredientKeys / enIngredientKeys) * 100),
+            isDefaultLanguage: false
         };
     }
 

src/modules/settings/general-settings/translation-status.ts

@@ -0,0 +1,5 @@
+export class TranslationStatus {
+    public basic: number | undefined;
+    public ingredients: number | undefined;
+    public isDefaultLanguage: boolean;
+}

tests/locales/locales.test.ts

@@ -0,0 +1,25 @@
+import ca from '../../src/locales/ca/translation.json';
+import de from '../../src/locales/de/translation.json';
+import en from '../../src/locales/en/translation.json';
+import es from '../../src/locales/es/translation.json';
+import fr from '../../src/locales/fr/translation.json';
+import it from '../../src/locales/it/translation.json';
+import nl from '../../src/locales/nl/translation.json';
+import pl from '../../src/locales/pl/translation.json';
+import ru from '../../src/locales/ru/translation.json';
+import sv from '../../src/locales/sv/translation.json';
+
+describe('Locales Test', () => {
+    test('No empty values', () => {
+        expect(Object.values(ca).filter(x => x.toString().trim() === '').length).toEqual(0);
+        expect(Object.values(de).filter(x => x.toString().trim() === '').length).toEqual(0);
+        expect(Object.values(en).filter(x => x.toString().trim() === '').length).toEqual(0);
+        expect(Object.values(es).filter(x => x.toString().trim() === '').length).toEqual(0);
+        expect(Object.values(fr).filter(x => x.toString().trim() === '').length).toEqual(0);
+        expect(Object.values(it).filter(x => x.toString().trim() === '').length).toEqual(0);
+        expect(Object.values(nl).filter(x => x.toString().trim() === '').length).toEqual(0);
+        expect(Object.values(pl).filter(x => x.toString().trim() === '').length).toEqual(0);
+        expect(Object.values(ru).filter(x => x.toString().trim() === '').length).toEqual(0);
+        expect(Object.values(sv).filter(x => x.toString().trim() === '').length).toEqual(0);
+    });
+});