Translate logviewer

2020-11-08 10:40:08 +01:00
parent 8550b88dfe
commit 5f6344f400
3 changed files with 60 additions and 8 deletions
@@ -5,7 +5,44 @@
 /* global $ */

 // create main application module
-var app = angular.module('Application', ['angular-md5', 'ui-notification']);
+var app = angular.module('Application', ['pascalprecht.translate', 'ngCookies', 'angular-md5', 'ui-notification']);
+
+app.config(['$translateProvider', function ($translateProvider) {
+    $translateProvider.useStaticFilesLoader({
+        prefix: 'translation/',
+        suffix: '.json'
+    });
+    $translateProvider.useLocalStorage();
+    $translateProvider.preferredLanguage('en');
+    $translateProvider.fallbackLanguage('en');
+}]);
+
+// Add shorthand "tr" filter to avoid having ot use "translate"
+// This is a copy of the code at https://github.com/angular-translate/angular-translate/blob/master/src/filter/translate.js
+// If we find out how to get that function handle somehow dynamically we can use that, otherwise the copy is required
+function translateFilterFactory($parse, $translate) {
+
+  'use strict';
+
+  var translateFilter = function (translationId, interpolateParams, interpolation, forceLanguage) {
+    if (!angular.isObject(interpolateParams)) {
+      var ctx = this || {
+        '__SCOPE_IS_NOT_AVAILABLE': 'More info at https://github.com/angular/angular.js/commit/8863b9d04c722b278fa93c5d66ad1e578ad6eb1f'
+        };
+      interpolateParams = $parse(interpolateParams)(ctx);
+    }
+
+    return $translate.instant(translationId, interpolateParams, interpolation, forceLanguage);
+  };
+
+  if ($translate.statefulFilter()) {
+    translateFilter.$stateful = true;
+  }
+
+  return translateFilter;
+}
+translateFilterFactory.displayName = 'translateFilterFactory';
+app.filter('tr', translateFilterFactory);

 app.controller('LogsController', ['$scope', 'Client', function ($scope, Client) {
    var search = decodeURIComponent(window.location.search).slice(1).split('&').map(function (item) { return item.split('='); }).reduce(function (o, k) { o[k[0]] = k[1]; return o; }, {});
@@ -4,7 +4,7 @@
  <meta charset="utf-8" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

-  <title> Logs </title>
+  <title> {{ 'logs.title' | tr }} </title>

  <link id="favicon" href="/api/v1/cloudron/avatar" rel="icon" type="image/png">
  <link rel="apple-touch-icon" href="/api/v1/cloudron/avatar">
@@ -29,6 +29,7 @@
  <!-- Angularjs scripts -->
  <script type="text/javascript" src="/3rdparty/js/angular.min.js"></script>
  <script type="text/javascript" src="/3rdparty/js/angular-loader.min.js"></script>
+  <script type="text/javascript" src="/3rdparty/js/angular-cookies.min.js"></script>
  <script type="text/javascript" src="/3rdparty/js/angular-animate.min.js"></script>
  <script type="text/javascript" src="/3rdparty/js/angular-base64.min.js"></script>
  <script type="text/javascript" src="/3rdparty/js/angular-md5.min.js"></script>
@@ -38,6 +39,12 @@
  <!-- Angular directives for bootstrap https://angular-ui.github.io/bootstrap/ -->
  <script type="text/javascript" src="/3rdparty/js/ui-bootstrap-tpls-1.3.3.min.js"></script>

+  <!-- Angular translate https://angular-translate.github.io/ -->
+  <script type="text/javascript" src="/3rdparty/js/angular-translate.min.js"></script>
+  <script type="text/javascript" src="/3rdparty/js/angular-translate-loader-static-files.min.js"></script>
+  <script type="text/javascript" src="/3rdparty/js/angular-translate-storage-cookie.min.js"></script>
+  <script type="text/javascript" src="/3rdparty/js/angular-translate-storage-local.min.js"></script>
+
  <!-- Showdown (markdown converter) -->
  <script type="text/javascript" src="/3rdparty/js/showdown-1.9.1.min.js?<%= revision %>"></script>

@@ -54,7 +61,7 @@

 <body class="logs">

-  <a class="offline-banner animateMe" ng-show="client.offline" ng-cloak href="https://docs.cloudron.io/troubleshooting/" target="_blank"><i class="fa fa-circle-notch fa-spin"></i> Cloudron is offline. Reconnecting...</a>
+  <a class="offline-banner animateMe" ng-show="client.offline" ng-cloak href="https://docs.cloudron.io/troubleshooting/" target="_blank"><i class="fa fa-circle-notch fa-spin"></i> {{ 'main.offline' | tr }}</a>

  <div class="animateMe ng-hide layout-root" ng-show="initialized">
    <div class="logs-controls">
@@ -62,10 +69,10 @@

      <!-- logs actions -->
      <div class="pull-right">
-        <a class="btn btn-primary" ng-href="{{ '/terminal.html?id=' + selected.value }}" target="_blank" ng-show="selected.type === 'app'"><i class="fa fa-terminal"></i> Terminal</a>
-        <a class="btn btn-primary" ng-href="{{ '/filemanager.html?appId=' + selected.value }}" target="_blank" ng-show="selected.type === 'app'"><i class="fas fa-folder"></i> File Manager</a>
-        <a class="btn btn-primary" ng-click="clear()"><i class="fa fa-trash"></i> Clear View</a>
-        <a class="btn btn-primary" ng-href="{{ selected.url }}&format=short&lines=-1"><i class="fa fa-download"></i> Download Full Logs</a>
+        <a class="btn btn-primary" ng-href="{{ '/terminal.html?id=' + selected.value }}" target="_blank" ng-show="selected.type === 'app'"><i class="fa fa-terminal"></i> {{ 'terminal.title' | tr }}</a>
+        <a class="btn btn-primary" ng-href="{{ '/filemanager.html?appId=' + selected.value }}" target="_blank" ng-show="selected.type === 'app'"><i class="fas fa-folder"></i> {{ 'filemanager.title' | tr }}</a>
+        <a class="btn btn-primary" ng-click="clear()"><i class="fa fa-trash"></i> {{ 'logs.clear' | tr }}</a>
+        <a class="btn btn-primary" ng-href="{{ selected.url }}&format=short&lines=-1"><i class="fa fa-download"></i> {{ 'logs.download' | tr }}</a>
      </div>
    </div>

@@ -326,6 +326,14 @@
        "clearAll": "Clear All"
    },
    "logs": {
-        "title": "Logs"
+        "title": "Logs",
+        "clear": "Clear View",
+        "download": "Download Full Logs"
+    },
+    "terminal": {
+        "title": "Terminal"
+    },
+    "filemanager": {
+        "title": "File Manager"
    }
 }