Add translation JSONs

kanken_online/__init__.py

@@ -1,5 +1,6 @@
+import json
 import os
-from flask import Flask, redirect, render_template, g, request, session
+from flask import Flask, redirect, render_template, g, request, session, url_for
 from pathlib import Path
 from .auth import login_required
 
@@ -74,21 +75,6 @@ def create_app(test_config=None):
     def kotoba_page(kotoba: str):
         return render_template("kotoba.html", kotoba=kotoba)
     
-    @app.route("/translations", methods=["GET", "POST"])
-    def strings_translation():
-        if request.method == "GET":
-            strings = {}
-            for language, language_data in lang.LANGUAGES.items():
-                strings[language] = {
-                    string: translation for string, translation in language_data.items()
-                }
-
-            return render_template("translations.html", strings=strings)
-        else:
-            # TODO
-            print(request.form)
-            return redirect("/translations")
-
     from . import database
     database.initialize_app(app)
 
@@ -101,6 +87,28 @@ def create_app(test_config=None):
 
     from . import lang
 
+    @app.route("/translations", methods=["GET", "POST"])
+    def strings_translation():
+        if request.method == "GET":
+            strings = {}
+            for language, language_data in lang.LANGUAGES.items():
+                strings[language] = {
+                    string: translation for string, translation in language_data.items()
+                }
+
+            return render_template("translations.html", strings=strings)
+        else:
+            strings = {}
+            for i, language in enumerate(lang.LANGUAGES):
+                strings[language] = {
+                    string: request.form.getlist(string)[i] for string in request.form
+                }
+                with open(Path(app.root_path, "static", "lang", f"{language}.json"), mode="w") as f:
+                    json.dump(strings[language], f, ensure_ascii=False, indent=0)
+            
+            lang.update_languages()
+            return redirect("/translations")
+
     # def use_english(text_id: str):
     #     return lang.localize(text_id, lang.JAPANESE)
     app.jinja_env.globals.update(localize=lang.localize)

kanken_online/lang.py

@@ -1,98 +1,26 @@
+import json
+from pathlib import Path
 from flask import session
 
-EXISTING_STRINGS = {
-    "kanken_online",
-    "options",
-    "log_in",
-    "register",
-    "log_out",
-    "kanji",
-    "forum",
-    "main_page",
-    "username",
-    "password",
-    "search",
-    "search_placeholder",
-    "include_kanji",
-    "include_kotoba",
-    "username_required",
-    "password_required",
-    "incorrect_username",
-    "incorrect_password"
-    "about",
-    "about-para",
-    "indices",
-    "translations"
-}
+LanguageMapping = dict[str, str]
 
-ENGLISH = {
-    "kanken_online": "KankenOnline",
-    "options": "Options",
-    "log_in": "Log in",
-    "register": "Register",
-    "log_out": "Log out",
-    "kanji": "Kanji",
-    "forum": "Forum",
-    "main_page": "Main Page",
-    "username": "Username",
-    "password": "Password",
-    "search": "Search",
-    "search_placeholder": "Enter kanji or word",
-    "include_kanji": "Include kanji",
-    "include_kotoba": "Include kotoba",
-    "username_required": "Username required.",
-    "password_required": "Password required.",
-    "incorrect_username": "Incorrect username.",
-    "incorrect_password": "Incorrect password.",
-    "about": "About KankenOnline",
-    "about-para": "KankenOnline is a website seeking to provide resources to pass the Kanji Kentei level 1 exam. You can search through the approximately 6,300 characters included in Kanken, as well as generate a number of study materials automatically. For example, you can generate a PDF-format exam resembling the Kanken level 1 exam, which has the goal of mirroring the real thing as closely as possible for your preparation. Additionally, a variety of information about kanji is provided, among which phonetic series, rimes/kanji phonology, radicals, inseparable kanji, character origins and etymologies.",
-    "indices": "Indices",
-    "radical_index": "Radical index",
-    "indivisible_index": "Indivisible kanji index",
-    "phonetic_series": "Phonetic series",
-    "dark_theme": "Dark theme",
-    "light_theme": "Light theme",
-    "language": "Language",
-    "theme": "Color settings",
-    "translations": "Translations",
-}
+def load_language(lang_code: str) -> LanguageMapping:
+    with open(Path("kanken_online/static/lang", f"{lang_code}.json")) as f:
+        return json.load(f)
 
-JAPANESE = {
-    "kanken_online": "漢検オンライン",
-    "options": "設定",
-    "log_in": "ログイン",
-    "register": "登録",
-    "log_out": "ログアウト",
-    "kanji": "漢字",
-    "forum": "掲示板",
-    "main_page": "ホームページ",
-    "username": "ユーザー名",
-    "password": "パスワード",
-    "search": "検索",
-    "search_placeholder": "漢字・言葉を入力",
-    "include_kanji": "漢字を含む",
-    "include_kotoba": "言葉を含む",
-    "username_required": "ユーザー名が必要です",
-    "password_required": "パスワードが必要です",
-    "incorrect_username": "ユーザー名が違います",
-    "incorrect_password": "パスワードが違います",
-    "about": "漢検オンラインとは",
-    "about-para": "漢検オンラインとは、漢検一級合格を目当てにした資料を供用しているサイトです。ここで漢検のやく６３００字を検索でき、いろんな勉強材を自動的に作ることができます。たとえば、漢検一級模様の試験PDFを作ることができて、本物の漢検試験に大抵該当することが目的です。さらに、色々漢字についての情報を取り集めております。諧声域（かいせいいき）・音韻学・部首・不可分漢字・字源・語源などがその内です。",
-    "indices": "索引",
-    "radical_index": "部首索引",
-    "indivisible_index": "不可分漢字索引",
-    "phonetic_series": "諧声域索引",
-    "dark_theme": "ダークモード",
-    "light_theme": "ライトモード",
-    "language": "言語",
-    "theme": "色設定",
-    "translations": "翻訳",
-}
+LANGUAGES = {}
 
-LANGUAGES = {
-    "en": ENGLISH,
-    "ja": JAPANESE
-}
+def update_languages():
+    ENGLISH = load_language("en")
+    JAPANESE = load_language("ja")
+
+    global LANGUAGES
+    LANGUAGES = {
+        "en": ENGLISH,
+        "ja": JAPANESE
+    }
+
+update_languages()
 
 # assert all(all(key in lang for key in EXISTING_STRINGS) for lang in LANGUAGES)  # Ensure all strings are mapped for all existing languages
 # assert not [key for lang in LANGUAGES for key in lang if ((key in lang) and (key not in EXISTING_STRINGS))]

kanken_online/static/lang/en.json

@@ -0,0 +1,35 @@
+{
+"kanken_online": "KankenOnline",
+"options": "Options",
+"log_in": "Log in",
+"register": "Register",
+"log_out": "Log out",
+"kanji": "Kanji",
+"forum": "Forum",
+"main_page": "Main Page",
+"username": "Username",
+"password": "Password",
+"search": "Search",
+"search_placeholder": "Enter kanji or word",
+"include_kanji": "Include kanji",
+"include_kotoba": "Include kotoba",
+"username_required": "Username required.",
+"password_required": "Password required.",
+"incorrect_username": "Incorrect username.",
+"incorrect_password": "Incorrect password.",
+"about": "About KankenOnline",
+"about-para": "KankenOnline is a website seeking to provide resources to pass the Kanji Kentei level 1 exam. You can search through the approximately 6,300 characters included in Kanken, as well as generate a number of study materials automatically. For example, you can generate a PDF-format exam resembling the Kanken level 1 exam, which has the goal of mirroring the real thing as closely as possible for your preparation. Additionally, a variety of information about kanji is provided, among which phonetic series, rimes/kanji phonology, radicals, inseparable kanji, character origins and etymologies.",
+"indices": "Indices",
+"radical_index": "Radical index",
+"indivisible_index": "Indivisible kanji index",
+"phonetic_series": "Phonetic series",
+"dark_theme": "Dark theme",
+"light_theme": "Light theme",
+"language": "Language",
+"theme": "Color settings",
+"translations": "Translations",
+"en": "English",
+"ja": "Japanese",
+"add_string": "Add string",
+"submit": "Submit"
+}

kanken_online/static/lang/ja.json

@@ -0,0 +1,35 @@
+{
+"kanken_online": "漢検オンライン",
+"options": "設定",
+"log_in": "ログイン",
+"register": "登録",
+"log_out": "ログアウト",
+"kanji": "漢字",
+"forum": "掲示板",
+"main_page": "ホームページ",
+"username": "ユーザー名",
+"password": "パスワード",
+"search": "検索",
+"search_placeholder": "漢字・言葉を入力",
+"include_kanji": "漢字を含む",
+"include_kotoba": "言葉を含む",
+"username_required": "ユーザー名が必要です",
+"password_required": "パスワードが必要です",
+"incorrect_username": "ユーザー名が違います",
+"incorrect_password": "パスワードが違います",
+"about": "漢検オンラインとは",
+"about-para": "漢検オンラインとは、漢検一級合格を目当てにした資料を供用しているサイトです。ここで漢検のやく６３００字を検索でき、いろんな勉強材を自動的に作ることができます。たとえば、漢検一級模様の試験PDFを作ることができて、本物の漢検試験に大抵該当することが目的です。さらに、色々漢字についての情報を取り集めております。諧声域（かいせいいき）・音韻学・部首・不可分漢字・字源・語源などがその内です。",
+"indices": "索引",
+"radical_index": "部首索引",
+"indivisible_index": "不可分漢字索引",
+"phonetic_series": "諧声域索引",
+"dark_theme": "ダークモード",
+"light_theme": "ライトモード",
+"language": "言語",
+"theme": "色設定",
+"translations": "翻訳",
+"en": "英語",
+"ja": "日本語",
+"add_string": "翻訳語を追加",
+"submit": "投入"
+}

kanken_online/static/translations.js

@@ -0,0 +1,27 @@
+const addStringButton = document.getElementById("add-string-button");
+addStringButton.addEventListener("click", (e) => {
+    const stringName = prompt("Enter a string name: ");
+    if (stringName == "") {
+        return;
+    }
+    for (let section of document.getElementsByClassName("translation-section")) {
+        // <label for="{{ string }}">{{ string }}</label>
+        // <input type="text" id="{{ string }}" name="{{ string }}" value="{{ translation }}">
+        // <br>
+        const label = document.createElement("label");
+        label.setAttribute("for", stringName);
+        label.innerText = stringName;
+        
+        const input = document.createElement("input");
+        input.setAttribute("type", "text");
+        input.setAttribute("id", stringName);
+        input.setAttribute("name", stringName);
+        input.setAttribute("value", "");
+
+        const br = document.createElement("br");
+
+        section.appendChild(label);
+        section.appendChild(input);
+        section.appendChild(br);
+    }
+});

kanken_online/templates/translations.html

@@ -1,19 +1,27 @@
 {% extends 'base.html' %}
 
+{% block scripts %}
+  <script src="/static/translations.js" defer></script>
+{% endblock %}
+
 {% block header %}
   <h1>{% block title %}{{ localize("translations") }}{% endblock %}</h1>
 {% endblock %}
 
 {% block content %}
+<button id="add-string-button">{{ localize("add_string") }}</button>
 <form method="post">
   {% for language, data in strings.items() %}
-  <h2>{{ language }}</h2>
-  {% for string, translation in data.items() %}
-      <label for="{{ string }}">{{ string }}</label>
-      <input type="text" id="{{ string }}" value="{{ translation }}">
-      <br>
-  {% endfor %}
-  {% endfor %}
-  <button type="submit">Submit</button>
+  <div id="{{language}}-translation-section" class="translation-section" lang="{{language}}">
+    <h2>{{ language }}</h2>
+    {% for string, translation in data.items() %}
+        <label lang="en" for="{{ string }}">{{ string }}</label>
+        <input type="text" id="{{ string }}" name="{{ string }}" value="{{ translation }}">
+        <br>
+    {% endfor %}
+  </div>
+    {% endfor %}
+    <button type="submit">{{ localize("submit") }}</button>
+  
 </form>
 {% endblock %}