added translation generator

app/XDM/translation-generator/translation-gen/src/TextInput.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import './TextInput.css';
-function TextInput(props) {
-    function handleChange(event) {
-        props.updateMappings(props.keyName, event.target.value);
-    }
-    return (
-        <div className="TextInput">
-            <span  style={{paddingBottom: "5px"}}>{props.englishText}</span>
-            <input type="text" value={props.text} onChange={handleChange} />
-        </div>
-    );
-}
-
-export default TextInput;

translation-generator/translation-gen/package-lock.json

@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.16.2",
         "@testing-library/react": "^12.1.3",
         "@testing-library/user-event": "^13.5.0",
+        "bootstrap": "^5.1.3",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-scripts": "5.0.0",
@@ -2819,6 +2820,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4883,6 +4894,18 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "node_modules/bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bootstrap"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.10.2"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -17959,6 +17982,12 @@
         }
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
+      "peer": true
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -19515,6 +19544,12 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "requires": {}
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

translation-generator/translation-gen/package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",

translation-generator/translation-gen/src/App.js

@@ -32,6 +32,10 @@ function App() {
     setMappings(dict);
   }
   function generateTranslation() {
+    if(!language||language.length<1){
+      alert("Please enter valid file name");
+      return;
+    }
     const text = Object.keys(mappings).map(keyName => keyName + "=" + mappings[keyName].text).join("\r\n");
     var MIME_TYPE = "application/octet-stream";
     var blob = new Blob([text], { type: MIME_TYPE });
@@ -45,17 +49,15 @@ function App() {
   }
   return (
     <div className="App">
-      <div style={{
-        position: 'fixed', left: '0px', top: '0px',
-        right: '0px', backgroundColor: 'dodgerblue', padding: '20px',
-        color: 'white', fontSize: '20px', textAlign: 'center'
-      }}>
-        XDM translation generator
+      <nav className="navbar fixed-top navbar-dark bg-dark">
+        <div className="navbar-brand" style={{padding: "10px"}}>XDM translation generator</div>
+      </nav>
+      <div style={{ paddingTop: '100px', paddingBottom: '20px' }}>
+        <label htmlFor='txtname'>Translating to </label>
+        <input className='form-control' type="text" value={language} onChange={(e) => setLanguage(e.target.value)} id="txtname" />
       </div>
-      <div style={{ paddingTop: '100px', paddingBottom:'20px' }}>
-        <span>Translating to </span>
-        <input type="text" value={language} onChange={(e) => setLanguage(e.target.value)} />
-        <span>.txt</span>
+      <div className="alert-info" style={{ padding: "20px", margin: "10px 0px", borderRadius: "5px" }}>
+        Please enter translated text for the specified english text below
       </div>
       <div style={{ paddingBottom: '100px' }}>
         {Object.keys(mappings).map(keyName => (
@@ -69,11 +71,13 @@ function App() {
       </div>
       <div style={{
         position: 'fixed', left: '0px', bottom: '0px',
-        right: '0px', backgroundColor: 'dimgray', padding: '10px',
+        right: '0px', padding: '10px',
         display: 'flex',
-        justifyContent: 'flex-end'
-      }}>
-        <button style={{ padding: '10px', paddingLeft: '20px', paddingRight: '20px' }}
+        justifyContent: 'flex-end',
+        background: 'white',
+        borderTop: '1px solid gray'
+      }} >
+        <button type="button" className="btn btn-primary btn-lg" style={{ padding: '10px', paddingLeft: '20px', paddingRight: '20px' }}
           onClick={generateTranslation}>Generate translation</button>
       </div>
     </div>

translation-generator/translation-gen/src/TextInput.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import './TextInput.css';
+function TextInput(props) {
+    function handleChange(event) {
+        props.updateMappings(props.keyName, event.target.value);
+    }
+    return (
+        <div className="TextInput">
+            <form>
+                <label htmlFor={props.text}>{props.englishText}</label>
+                <input className='form-control' type="text" value={props.text} onChange={handleChange} id={props.text}
+                    placeholder={`Translated text for ${props.englishText}`} />
+            </form>
+        </div>
+    );
+}
+
+export default TextInput;

translation-generator/translation-gen/src/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 ReactDOM.render(
   <React.StrictMode>