Add translation buttons

2022-04-01 12:51:55 +02:00 · 2022-04-01 12:51:55 +02:00 · 2c7fb556dc
commit 2c7fb556dc
parent 592bc4ae0b
31 changed files with 442 additions and 150 deletions
--- a/UI/BigComponents/TranslatorsPanel.ts
+++ b/UI/BigComponents/TranslatorsPanel.ts
@ -0,0 +1,124 @@
+import Toggle from "../Input/Toggle";
+import Lazy from "../Base/Lazy";
+import {Utils} from "../../Utils";
+import Translations from "../i18n/Translations";
+import Combine from "../Base/Combine";
+import Locale from "../i18n/Locale";
+import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
+import {Translation} from "../i18n/Translation";
+import {VariableUiElement} from "../Base/VariableUIElement";
+import Link from "../Base/Link";
+import LinkToWeblate from "../Base/LinkToWeblate";
+import Toggleable from "../Base/Toggleable";
+import Title from "../Base/Title";
+import {UIEventSource} from "../../Logic/UIEventSource";
+import {SubtleButton} from "../Base/SubtleButton";
+import Svg from "../../Svg";
+
+
+class TranslatorsPanelContent extends Combine {
+    constructor(layout: LayoutConfig, isTranslator: UIEventSource<boolean>) {
+        const t = Translations.t.translations
+        const completeness = new Map<string, number>()
+        let total = 0
+        const untranslated = new Map<string, string[]>()
+        Utils.WalkObject(layout, (o, path) => {
+            const translation = <Translation><any>o;
+            for (const lang of translation.SupportedLanguages()) {
+                completeness.set(lang, 1 + (completeness.get(lang) ?? 0))
+            }
+            layout.title.SupportedLanguages().forEach(ln => {
+                const trans = translation.translations
+                if (trans["*"] !== undefined) {
+                    return;
+                }
+                if (trans[ln] === undefined) {
+                    if (!untranslated.has(ln)) {
+                        untranslated.set(ln, [])
+                    }
+                    untranslated.get(ln).push(translation.context)
+                }
+            })
+            if(translation.translations["*"] === undefined){
+                total++
+            }
+        }, o => {
+            if (o === undefined || o === null) {
+                return false;
+            }
+            return o instanceof Translation;
+        })
+
+
+        const seed = t.completeness
+        for (const ln of Array.from(completeness.keys())) {
+            if(ln === "*"){
+                continue
+            }
+            if (seed.translations[ln] === undefined) {
+                seed.translations[ln] = seed.translations["en"]
+            }
+        }
+        
+        const completenessTr = {}
+        const completenessPercentage = {}
+        seed.SupportedLanguages().forEach(ln => {
+            completenessTr[ln] = ""+(completeness.get(ln) ?? 0)
+            completenessPercentage[ln] = ""+Math.round(100 * (completeness.get(ln) ?? 0) / total)
+        })
+        
+        // "translationCompleteness": "Translations for {theme} in {language} are at {percentage}: {translated} out of {total}",
+        const translated = seed.Subs({total, theme: layout.title,
+        percentage: new Translation(completenessPercentage),
+            translated: new Translation(completenessTr)
+        })
+
+        const missingTranslationsFor = (ln: string) => Utils.NoNull(untranslated.get(ln) ?? [])
+            .filter(ctx => ctx.indexOf(':') > 0)
+            .map(ctx => ctx.replace(/note_import_[a-zA-Z0-9_]*/, "note_import"))
+            .map(context => new Link(context, LinkToWeblate.hrefToWeblate(ln, context), true))
+
+        const disable = new SubtleButton(undefined, t.deactivate)
+            .onClick(() => {
+                Locale.showLinkToWeblate.setData(false)
+            })
+
+        super([
+            new Title(
+            Translations.t.translations.activateButton,
+            ),
+            new Toggle(t.isTranslator.SetClass("thanks block"), undefined, isTranslator),
+            t.help,
+            translated,
+            disable,
+            new VariableUiElement(Locale.language.map(ln => {
+
+                const missing = missingTranslationsFor(ln)
+                if (missing.length === 0) {
+                    return undefined
+                }
+                return new Toggleable(
+                    new Title(Translations.t.translations.missing.Subs({count: missing.length})),
+                    new Combine(missing).SetClass("flex flex-col")
+                )
+            }))
+        ])
+
+    }
+}
+
+export default class TranslatorsPanel extends Toggle {
+
+    
+    constructor(state: { layoutToUse: LayoutConfig, isTranslator: UIEventSource<boolean> }, iconStyle?: string) {
+        const t = Translations.t.translations
+        super(
+                new Lazy(() => new TranslatorsPanelContent(state.layoutToUse, state.isTranslator)
+            ).SetClass("flex flex-col"),
+            new SubtleButton(Svg.translate_ui().SetStyle(iconStyle), t.activateButton).onClick(() => Locale.showLinkToWeblate.setData(true)),
+            Locale.showLinkToWeblate 
+        )
+        this.SetClass("hidden-on-mobile")
+        
+    }
+}