Improved translator web application.
Ylian Saint-Hilaire committed
Dec 5, 2019 at 15:33 UTC
7b5bcf7329668cc579fbed79f7d8e72b9a7e32c4
3 files changed
+179
-17
package.json
+1
-1
@@ -1,6 +1,6 @@
1
{
2
"name": "meshcentral",
3
- "version": "0.4.5-h",
3
+ "version": "0.4.5-i",
4
"keywords": [
5
"Remote Management",
6
"Intel AMT",
public/translator.htm
+133
-16
@@ -8,6 +8,7 @@
8
<meta name="format-detection" content="telephone=no" />
9
<link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
10
<script type="text/javascript" src="scripts/common-0.0.1.js"></script>
11
+ <script type="text/javascript" src="scripts/filesaver.js"></script>
12
<style>
13
.listItem {
14
width: calc(100vh - 8);
@@ -23,6 +24,15 @@
24
background-color: darkgray;
25
}
26
27
+ .listItemSel {
28
+ width: calc(100vh - 8);
29
+ background-color: #CFC;
30
+ border-radius: 5px;
31
+ box-sizing: border-box;
32
+ margin: 4px;
33
+ padding: 6px;
34
+ text-align: left;
35
+ }
36
</style>
37
</head>
38
<body style="overflow:hidden">
@@ -30,13 +40,18 @@
40
<div id=deskarea0>
41
<div id="bigok" style="display:none;left:calc((100vh / 2))"><b>✓</b></div>
42
<div id="bigfail" style="display:none;left:calc((100vh / 2))"><b>✗</b></div>
33
- <div id=deskarea1 class="areaHead">
43
+ <div id=deskarea0 style="position:absolute;left:0;right:0;top:0;height:28px;background-color:#036;color:#c8c8c8">
44
+ <div style="float:right;padding:2px" id="mainStatus"></div>
45
+ <div style="font-size:20px;font-family:Arial;padding:3px"><b>MeshCentral Translator</b></div>
46
+ </div>
47
+ <div id=deskarea1 class="areaHead" style="margin-top:28px">
48
<div class="toright2" style="margin-top:3px;margin-right:5px">
49
<span id="status"></span>
50
</div>
51
<div>
38
- <input id="OpenFileButton" type=button value="Open File..." onclick="openfile()">
39
- <input id="SaveFileButton" type=button value="Save File..." onclick="savefile()">
52
+ <input id="OpenFileButton" type=button value="Open File..." onclick="openfile()" style="display:none">
53
+ <input id="SaveFileButton" type=button value="Save to Server..." onclick="saveServerTranslations()">
54
+ <input id="SaveFileButton" type=button value="Save to File..." onclick="saveToFile()">
55
<select id="langSelector" onclick="langSelectorChange()" onchange="langSelectorChange()">
56
<option value="ar">Arabic (ar)</option>
57
<option value="fr">French (fr)</option>
@@ -56,17 +71,19 @@
71
<option value="zh-CHT">Traditional Chinese (zh-CHT)</option>
72
<option value="es">Spanish (es)</option>
73
</select>
74
+ <input id="searchInput" type="text" placeholder="Search" onchange="onSearchChanged()" onkeyup="onSearchChanged()">
75
+ <input id="showLocCheck" type="checkbox" onchange="onLocChanged()"> Show Location
76
</div>
77
</div>
78
<div id=deskarea2 style="">
62
- <div class="areaProgress"><div id="progressbar" style=""></div></div>
79
+ <div class="areaProgress"><div id="progressbar" style="background-color:blue"></div></div>
80
</div>
64
- <div id=deskarea3x style="max-height:calc(100vh - 54px);height:calc(100vh - 54px);background-color:gray">
81
+ <div id=deskarea3x style="max-height:calc(100vh - 82px);height:calc(100vh - 54px);background-color:gray">
82
<div id="masterListArea" style="height:calc(33.33vh);overflow-y:scroll">
83
<div class="listItem"><div style="display:inline-block;width:calc(40% - 10px)"></div><div style="display:inline-block;width:calc(40% - 10px)"></div><div style="display:inline-block;width:calc(20% - 10px)"></div></div>
84
</div>
68
- <textarea id="defaultTextArea" readonly style="height:calc(33.33vh);overflow-y:scroll;width:calc(100% - 5px);resize:none"></textarea>
69
- <textarea id="translatedTextArea" style="height:calc(33.33vh - 70px);overflow-y:scroll;width:calc(100% - 5px);resize:none"></textarea>
85
+ <textarea id="defaultTextArea" autocomplete=off readonly style="height:calc(33.33vh);overflow-y:scroll;width:calc(100% - 5px);resize:none;background-color:#EFE"></textarea>
86
+ <textarea id="translatedTextArea" autocomplete=off style="height:calc(33.33vh - 70px);overflow-y:scroll;width:calc(100% - 5px);resize:none"></textarea>
87
</div>
88
<div id=deskarea4 class="areaFoot">
89
<div class="toright2">
@@ -111,13 +128,20 @@
128
document.ondragleave = ondragleave;
129
document.onkeypress = onkeypress;
130
updateMasterList();
131
+ loadServerTranslations();
132
}
133
116
- function langSelectorChange() { selectedLanguage = Q('langSelector').value; updateMasterList(); }
134
+ function langSelectorChange() {
135
+ selectedLanguage = Q('langSelector').value;
136
+ updateMasterList();
137
+ onSearchChanged(true);
138
+ }
139
140
function cleanup() {
141
translationFile = null;
142
updateMasterList();
143
+ Q('searchInput').value = '';
144
+ currentSearchFilter = '';
145
}
146
147
function ondrop(e) {
@@ -190,7 +214,10 @@
214
if ((file != null) && (typeof file.strings == 'object') && (file.strings.length > 0)) {
215
translations = file.strings;
216
translations.sort(enSort);
217
+ Q('searchInput').value = '';
218
+ currentSearchFilter = '';
219
updateMasterList();
220
+ select(0, true);
221
}
222
};
223
fr.readAsText(translationFile);
@@ -205,23 +232,37 @@
232
var target = '';
233
if (translations[i][selectedLanguage] != null) { target = EscapeHtml(translations[i][selectedLanguage]); }
234
var comment = '';
208
- x.push('<div class="listItem" name=' + i + ' onclick=select(' + i + ')><div style="display:inline-block;width:calc(40% - 10px)">' + source + '</div><div style="display:inline-block;width:calc(40% - 10px)">' + target + '</div><div style="display:inline-block;width:calc(20% - 10px)">' + comment + '</div></div>');
235
+ // <span id=ns' + i + ' style=display:none>▶ </span>
236
+ x.push('<div class="listItem" id=nx' + i + ' onclick=select(' + i + ')><div style="display:inline-block;width:calc(40% - 10px)">' + source + '</div><div style="display:inline-block;width:calc(40% - 10px)">' + target + '</div><div style="display:inline-block;width:calc(20% - 10px)">' + comment + '</div></div>');
237
}
238
}
239
QH('masterListArea', x.join(''));
240
updateButtons();
241
}
242
215
- function select(i) {
243
+ function select(i, scroll) {
244
+ Q('nx' + selectedItem).classList.remove('listItemSel');
245
+ Q('nx' + selectedItem).classList.add('listItem');
246
selectedItem = i;
217
- QH('defaultTextArea', translations[i].en);
218
- if (translations[i][selectedLanguage] != null) { QH('translatedTextArea', translations[i][selectedLanguage]); } else { QH('translatedTextArea', ''); }
247
+ Q('nx' + selectedItem).classList.remove('listItem');
248
+ Q('nx' + selectedItem).classList.add('listItemSel');
249
+ if (scroll === true) {
250
+ var x = (Q('masterListArea').clientHeight / 2) - (Q('nx' + selectedItem).clientHeight / 2);
251
+ if (x < 0) { x = 0; }
252
+ Q('masterListArea').scrollTop = Q('nx' + selectedItem).offsetTop - x;
253
+ }
254
+ onLocChanged();
255
+ if (translations[i][selectedLanguage] != null) {
256
+ QH('translatedTextArea', translations[selectedItem][selectedLanguage]);
257
+ } else {
258
+ QH('translatedTextArea', '');
259
+ }
260
Q('translatedTextArea').focus();
261
updateButtons();
262
}
263
223
- function next() { select(selectedItem + 1); }
224
- function prev() { select(selectedItem - 1); }
264
+ function next() { select(selectedItem + 1, true); }
265
+ function prev() { select(selectedItem - 1, true); }
266
function copySource() { QH('translatedTextArea', translations[selectedItem].en); Q('translatedTextArea').focus(); }
267
268
function updateButtons() {
@@ -240,6 +281,82 @@
281
282
function enSort(a, b) { if (a.en.toLowerCase() > b.en.toLowerCase()) return 1; if (a.en.toLowerCase() < b.en.toLowerCase()) return -1; return 0; }
283
284
+ var currentSearchFilter = '';
285
+ function onSearchChanged(force) {
286
+ if ((force != true) && (currentSearchFilter == Q('searchInput').value)) return;
287
+ currentSearchFilter = Q('searchInput').value;
288
+ if (translations != null) {
289
+ for (var i in translations) {
290
+ if (currentSearchFilter == '') {
291
+ QV('nx' + i, true);
292
+ } else {
293
+ QV('nx' + i, ((translations[i][selectedLanguage] != null) && (translations[i][selectedLanguage].indexOf(currentSearchFilter) >= 0)) || (translations[i]['en'].indexOf(currentSearchFilter) >= 0));
294
+ }
295
+ }
296
+ }
297
+ }
298
+
299
+ function onLocChanged() {
300
+ if (Q('showLocCheck').checked) {
301
+ if ((translations[selectedItem].xloc != null) && (translations[selectedItem].xloc.length > 0)) {
302
+ if (translations[selectedItem].xloc.length == 1) {
303
+ QH('defaultTextArea', translations[selectedItem]['en'] + '\r\n\r\nLocation:\r\n' + translations[selectedItem].xloc.join('\r\n'));
304
+ } else {
305
+ QH('defaultTextArea', translations[selectedItem]['en'] + '\r\n\r\nLocations:\r\n' + translations[selectedItem].xloc.join('\r\n'));
306
+ }
307
+ } else {
308
+ QH('defaultTextArea', translations[selectedItem]['en'] + '\r\n\r\nNo locations.');
309
+ }
310
+ } else {
311
+ QH('defaultTextArea', translations[selectedItem]['en']);
312
+ }
313
+ }
314
+
315
+ // Poll the server, if it responds, refresh the page.
316
+ function loadServerTranslations() {
317
+ var xdr = null;
318
+ try { xdr = new XDomainRequest(); } catch (e) { }
319
+ if (!xdr) xdr = new XMLHttpRequest();
320
+ xdr.open('POST', window.location.origin + '/translations');
321
+ xdr.timeout = 30000;
322
+ xdr.onload = function () {
323
+ var x = null;
324
+ try { x = JSON.parse(this.responseText); } catch (ex) { }
325
+ if ((x == null) || (typeof x.strings != 'object')) { messagebox('Translations', 'ERROR: Unable to parse translations from the server.'); return; }
326
+ translations = x.strings;
327
+ translations.sort(enSort);
328
+ Q('searchInput').value = '';
329
+ currentSearchFilter = '';
330
+ updateMasterList();
331
+ select(0, true);
332
+ };
333
+ xdr.onerror = function () {
334
+ messagebox('Translations', 'ERROR: Unable to load translations from the server.');
335
+ };
336
+ xdr.send('{ "action":"getTranslations" }');
337
+ }
338
+
339
+ // Save to server
340
+ function saveServerTranslations() {
341
+ var xdr = null;
342
+ try { xdr = new XDomainRequest(); } catch (e) { }
343
+ if (!xdr) xdr = new XMLHttpRequest();
344
+ xdr.open('POST', window.location.origin + '/translations');
345
+ xdr.timeout = 30000;
346
+ xdr.onload = function () {
347
+ var x = null;
348
+ try { x = JSON.parse(this.responseText); } catch (ex) { }
349
+ if ((x == null) || (typeof x.strings != 'object')) { messagebox('Translations', 'ERROR: Unable to parse server response.'); return; }
350
+ // x
351
+ };
352
+ xdr.onerror = function () { messagebox('Translations', 'ERROR: Unable to save translations to server.'); };
353
+ xdr.send(JSON.stringify({ 'action': 'setTranslations', strings: translations }));
354
+ }
355
+
356
+ function saveToFile() {
357
+ saveAs(data2blob(JSON.stringify({ strings: translations })), 'translate.json');
358
+ }
359
+
360
//
361
// POPUP DIALOG
362
//
@@ -276,8 +393,8 @@
393
if (((b & 8) || x) && f) f(x, t);
394
}
395
279
- function messagebox(t, m) { setSessionActivity(); QH('id_dialogMessage', m); setDialogMode(1, t, 1); }
280
- function statusbox(t, m) { setSessionActivity(); QH('id_dialogMessage', m); setDialogMode(1, t); }
396
+ function messagebox(t, m) { QH('id_dialogMessage', m); setDialogMode(1, t, 1); }
397
+ function statusbox(t, m) { QH('id_dialogMessage', m); setDialogMode(1, t); }
398
function haltEvent(e) { if (e.preventDefault) e.preventDefault(); if (e.stopPropagation) e.stopPropagation(); return false; }
399
function pad2(num) { var s = '00' + num; return s.substr(s.length - 2); }
400
function format(format) { var args = Array.prototype.slice.call(arguments, 1); return format.replace(/{(\d+)}/g, function (match, number) { return typeof args[number] != 'undefined' ? args[number] : match; }); };
webserver.js
+45
@@ -1937,6 +1937,50 @@ module.exports.CreateWebServer = function (parent, db, args, certificates) {
1937
}
1938
}
1939
1940
+ // Handle translation request
1941
+ function handleTranslationsRequest(req, res) {
1942
+ const domain = checkUserIpAddress(req, res);
1943
+ //if ((domain.loginkey != null) && (domain.loginkey.indexOf(req.query.key) == -1)) { res.sendStatus(404); return; } // Check 3FA URL key
1944
+ if ((obj.userAllowedIp != null) && (checkIpAddressEx(req, res, obj.userAllowedIp, false) === false)) { return; } // Check server-wide IP filter only.
1945
+
1946
+ var user = null;
1947
+ if (obj.args.user != null) {
1948
+ // A default user is active
1949
+ user = obj.users['user/' + domain.id + '/' + obj.args.user];
1950
+ if (!user) { parent.debug('web', 'handleTranslationsRequest: user not found.'); res.sendStatus(401); return; }
1951
+ } else {
1952
+ // Check if the user is logged and we have all required parameters
1953
+ if (!req.session || !req.session.userid) { parent.debug('web', 'handleTranslationsRequest: failed checks (2).'); res.sendStatus(401); return; }
1954
+
1955
+ // Get the current user
1956
+ user = obj.users[req.session.userid];
1957
+ if (!user) { parent.debug('web', 'handleTranslationsRequest: user not found.'); res.sendStatus(401); return; }
1958
+ if (user.siteadmin != 0xFFFFFFFF) { parent.debug('web', 'handleTranslationsRequest: user not site administrator.'); res.sendStatus(401); return; }
1959
+ }
1960
+
1961
+ var data = '';
1962
+ req.setEncoding('utf8');
1963
+ req.on('data', function (chunk) { data += chunk; });
1964
+ req.on('end', function () {
1965
+ try { data = JSON.parse(data); } catch (ex) { data = null; }
1966
+ if (data == null) { res.sendStatus(404); return; }
1967
+ if (data.action == 'getTranslations') {
1968
+ if (obj.fs.existsSync(obj.path.join(obj.parent.datapath, 'translate.json'))) {
1969
+ // Return the translation file (JSON)
1970
+ try { res.sendFile(obj.path.join(obj.parent.datapath, 'translate.json')); } catch (ex) { res.sendStatus(404); }
1971
+ } else if (obj.fs.existsSync(obj.path.join(__dirname, 'translate', 'translate.json'))) {
1972
+ // Return the default translation file (JSON)
1973
+ try { res.sendFile(obj.path.join(__dirname, 'translate', 'translate.json')); } catch (ex) { res.sendStatus(404); }
1974
+ } else { res.sendStatus(404); }
1975
+ } else if (data.action == 'setTranslations') {
1976
+ obj.fs.writeFile(obj.path.join(obj.parent.datapath, 'translate.json'), JSON.stringify({ strings: data.strings } ), function (err) { res.send(JSON.stringify({ response:err })); });
1977
+ } else {
1978
+ // Unknown request
1979
+ res.sendStatus(404);
1980
+ }
1981
+ });
1982
+ }
1983
+
1984
// Handle welcome image request
1985
function handleWelcomeImageRequest(req, res) {
1986
const domain = checkUserIpAddress(req, res);
@@ -3395,6 +3439,7 @@ module.exports.CreateWebServer = function (parent, db, args, certificates) {
3439
obj.app.ws(url + 'webider.ashx', function (ws, req) { PerformWSSessionAuth(ws, req, false, function (ws1, req1, domain, user, cookie) { obj.meshIderHandler.CreateAmtIderSession(obj, obj.db, ws1, req1, obj.args, domain, user); }); });
3440
obj.app.ws(url + 'control.ashx', function (ws, req) { PerformWSSessionAuth(ws, req, false, function (ws1, req1, domain, user, cookie) { obj.meshUserHandler.CreateMeshUser(obj, obj.db, ws1, req1, obj.args, domain, user); }); });
3441
obj.app.get(url + 'logo.png', handleLogoRequest);
3442
+ obj.app.post(url + 'translations', handleTranslationsRequest);
3443
obj.app.get(url + 'welcome.jpg', handleWelcomeImageRequest);
3444
obj.app.ws(url + 'amtactivate', handleAmtActivateWebSocket);
3445
if (parent.pluginHandler != null) {