Add script to add strings using the string editor

kanken_online/static/translations.js

@@ -0,0 +1,28 @@
+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")) {
+        // const lang = section.getAttribute("data-lang");
+        // <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">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 }}" name="{{ 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">Submit</button>
+  
 </form>
 {% endblock %}