From 120bcb8e1e571df5aea6798b942cf1ffc24fc1c5 Mon Sep 17 00:00:00 2001
From: ChaotiCryptidz <chaoticryptidz@owo.monster>
Date: Wed, 19 Jan 2022 15:04:58 +0000
Subject: [PATCH] add translation completeness to language selection boxes

---
 checkTranslations.mjs                     |  1 -
 src/translationUtils.ts                   | 31 +++++++++++++++++++++++
 src/ui/pages/SetLanguage.tsx              |  5 +++-
 src/ui/pages/Settings/GeneralSettings.tsx |  5 +++-
 4 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 src/translationUtils.ts

diff --git a/checkTranslations.mjs b/checkTranslations.mjs
index 942b0f6..244eb2b 100644
--- a/checkTranslations.mjs
+++ b/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"])
diff --git a/src/translationUtils.ts b/src/translationUtils.ts
new file mode 100644
index 0000000..296c5ac
--- /dev/null
+++ b/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}%`;
+}
diff --git a/src/ui/pages/SetLanguage.tsx b/src/ui/pages/SetLanguage.tsx
index 773cfc4..53884c2 100644
--- a/src/ui/pages/SetLanguage.tsx
+++ b/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>
diff --git a/src/ui/pages/Settings/GeneralSettings.tsx b/src/ui/pages/Settings/GeneralSettings.tsx
index 58d765b..122f6a7 100644
--- a/src/ui/pages/Settings/GeneralSettings.tsx
+++ b/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>