add translation completeness to language selection boxes

checkTranslations.mjs

@@ -14,7 +14,6 @@ function arrayDiff(a, b) {
 for (let lang_num in langs) {
   let lang = new Map(Object.entries(translations[langs[lang_num]]));
   if (lang == "en") continue;
-  let lang_keys = [...lang.keys()];
   let di = arrayDiff(en_keys, [...lang.keys()])
   console.log("Language Code:", langs[lang_num])
   console.log("Language Name:", translations[langs[lang_num]]["language_name"])

src/translationUtils.ts

@@ -0,0 +1,31 @@
+// @ts-ignore
+import translations from "./translations/index.mjs";
+
+export function arrayDiff(
+  a: string[],
+  b: string[],
+): { missing: string[]; extra: string[]; common: string[] } {
+  return {
+    common: a.filter((x) => b.includes(x)),
+    missing: a.filter((x) => !b.includes(x)),
+    extra: b.filter((x) => !a.includes(x)),
+  };
+}
+
+export function getTranslationKeys(translation_id: string): string[] {
+  return [
+    ...new Map(Object.entries(translations[translation_id] as Record<string, unknown>)).keys(),
+  ];
+}
+
+export function getTranslationCompletePercentage(translation_id: string): string {
+  const en_keys = getTranslationKeys("en");
+  const translation_keys = getTranslationKeys(translation_id);
+  const diff_between = arrayDiff(en_keys, translation_keys);
+
+  const percent_num = Math.round(
+    ((en_keys.length - diff_between.missing.length) / en_keys.length) * 100,
+  );
+
+  return `${percent_num}%`;
+}

src/ui/pages/SetLanguage.tsx

@@ -9,6 +9,7 @@ import { Form } from "../elements/Form";
 import { Margin } from "../elements/Margin";
 import { MarginInline } from "../elements/MarginInline";
 import { PageTitle } from "../elements/PageTitle";
+import { getTranslationCompletePercentage } from "../../translationUtils";
 import { route } from "preact-router";
 import i18next from "i18next";
 
@@ -25,7 +26,9 @@ export class SetLanguage extends Component<DefaultPageProps> {
             <select class="uk-select uk-form-width-large" name="language">
               {Object.getOwnPropertyNames(translations).map((languageID) => (
                 <option value={languageID} selected={this.props.settings.language == languageID}>
-                  {i18next.getFixedT(languageID, null)("language_name")}
+                  {i18next.getFixedT(languageID, null)("language_name") +
+                    " " +
+                    ("(" + getTranslationCompletePercentage(languageID) + ")")}
                 </option>
               ))}
             </select>

src/ui/pages/Settings/GeneralSettings.tsx

@@ -4,6 +4,7 @@ import { InputWithTitle } from "../../elements/InputWithTitle";
 import i18next from "i18next";
 
 // @ts-ignore
+import { getTranslationCompletePercentage } from "../../../translationUtils";
 import { settingsSavedNotification } from "./Settings";
 import translations from "../../../translations/index.mjs";
 
@@ -74,7 +75,9 @@ export class GeneralSettings extends Component<DefaultPageProps> {
           >
             {Object.getOwnPropertyNames(translations).map((languageID) => (
               <option value={languageID} selected={this.props.settings.language == languageID}>
-                {i18next.getFixedT(languageID, null)("language_name")}
+                {i18next.getFixedT(languageID, null)("language_name") +
+                  " " +
+                  ("(" + getTranslationCompletePercentage(languageID) + ")")}
               </option>
             ))}
           </select>