Merge pull request #735 from pvgenuchten/translations-mapviewer

Translations mapviewer

web-ui/src/main/resources/catalog/components/common/map/print/partials/printmap.html

@@ -14,16 +14,16 @@
            data-translate="">print_scale</label>
     <div class="checkbox">
       <label>
-        <input type="checkbox" ng-model="auto"> Auto
+        <input type="checkbox" ng-model="auto"> {{'Auto'|translate}}
       </label>
     </div>
 
-    <div class="">
+    <div class="" ng-hide="auto">
       <select class="form-control"
               data-ng-model="config.scale"
               data-ng-change="refreshComp()"
               data-ng-options="l.name for l in config.scales"></select>
     </div>
   </div>
-  <button class="btn btn-default" data-ng-click="submit()"><i class="fa fa-print"></i></button>
+  <button class="btn btn-default" data-ng-click="submit()"><i class="fa fa-print"></i> {{'Print'|translate}} </button>
 </form>

web-ui/src/main/resources/catalog/components/viewer/draw/DrawDirective.js

@@ -282,8 +282,8 @@
           getType: '&gnStyleType'
         },
         link: function(scope, element, attrs) {
-          scope.colors = ['red', 'orange', 'blue', 'white', 'black',
-            'yellow', 'green', 'pink', 'brown'];
+          scope.colors = ['red', 'orange', 'blue', 'white', 'black', 'gray',
+            'yellow', 'green', 'pink', 'purple', 'brown'];
         }
       };
     }]);

web-ui/src/main/resources/catalog/components/viewer/draw/partials/draw.html

@@ -1,23 +1,23 @@
 <div gi-btn-group>
   <div class="btn-group flux" >
-    <button gi-btn="active" class="btn btn-default" ng-model="drawPoint.active">Point</button>
-    <button gi-btn="active" class="btn btn-default" ng-model="drawLine.active">Linestring</button>
-    <button gi-btn="active" class="btn btn-default" ng-model="drawPolygon.active">Polygon</button>
-    <button gi-btn="active" class="btn btn-default" ng-model="drawText.active">Text</button>
+    <button gi-btn="active" class="btn btn-default" ng-model="drawPoint.active" data-translate="">Point</button>
+    <button gi-btn="active" class="btn btn-default" ng-model="drawLine.active" data-translate="">Linestring</button>
+    <button gi-btn="active" class="btn btn-default" ng-model="drawPolygon.active" data-translate="">Polygon</button>
+    <button gi-btn="active" class="btn btn-default" ng-model="drawText.active" data-translate="">Text</button>
   </div>
-  <input ng-show="drawText.active" ng-model="text">
+  <input ng-show="drawText.active" ng-model="text" title="{{'tipDrawText'|translate}}">
   <div gn-style-form="featureStyleCfg" gn-style-type="getActiveDrawType()"></div>
 
   <div class="btn-group flux" >
     <button gi-btn="active" class="btn btn-default"
             data-ng-class="{disabled:vector.getSource().getFeatures().length <= 0}"
-            ng-model="modifying">Modify</button>
+            ng-model="modifying" data-translate="">Modify</button>
     <button gi-btn="active" class="btn btn-default"
             data-ng-class="{disabled:vector.getSource().getFeatures().length <= 0}"
-            ng-model="deleteF.active">Effacer</button>
+            ng-model="deleteF.active" data-translate="">Remove</button>
   </div>
   <div class="alert alert-warning" role="alert">
     <span class="fa fa-info-circle"></span>
-    draw_instruction
+	{{'drawInstruction'|translate}}</span>
   </div>
 </div>

web-ui/src/main/resources/catalog/components/viewer/draw/partials/styleform.html

@@ -3,12 +3,12 @@
   <!--Point-->
   <div data-ng-if="getType() == 'point'">
     <div class="form-group">
-      <label>Rayon
-        <input type="number" class="form-control input-sm" data-ng-model="style.image.radius" placeholder="width" >
+      <label>{{'drawRadius'|translate}}
+        <input type="number" class="form-control input-sm" data-ng-model="style.image.radius" placeholder="{{'drawRadius'|translate}}" >
       </label>
     </div>
     <div class="form-group">
-      <label>Couleur
+      <label>{{'drawColor'|translate}}
         <select type="text" class="form-control input-sm" placeholder="Couleur" data-ng-model="style.image.fill.color">
           <option data-ng-repeat="c in colors | orderBy">{{c}}</option>
         </select>
@@ -19,14 +19,14 @@
   <!--Linestring-->
   <div data-ng-if="getType() == 'line'">
     <div class="form-group">
-      <label>Épaisseur
-        <input type="number" class="form-control input-sm" data-ng-model="style.stroke.width" placeholder="width" >
+      <label>{{'drawWidth'|translate}}
+        <input type="number" class="form-control input-sm" data-ng-model="style.stroke.width" placeholder="{{'drawWidth'|translate}}" >
       </label>
     </div>
     <div class="form-group">
-      <label>Couleur
-        <select type="text" class="form-control input-sm" placeholder="Couleur" data-ng-model="style.stroke.color">
-          <option data-ng-repeat="c in colors | orderBy">{{c}}</option>
+      <label>{{'drawColor'|translate}}
+        <select type="text" class="form-control input-sm" placeholder="{{'drawColor'|translate}}" data-ng-model="style.stroke.color">
+          <option data-ng-repeat="c in colors | orderBy" style="background-color:{{c}}">{{c|translate}}</option>
         </select>
       </label>
     </div>
@@ -35,46 +35,46 @@
   <!--Polygon-->
   <div data-ng-if="getType() == 'polygon'">
     <div class="form-group">
-      <label>Épaisseur
-        <input type="number" class="form-control input-sm" data-ng-model="style.stroke.width" placeholder="width" >
+      <label>{{'drawWidth'|translate}}
+        <input type="number" class="form-control input-sm" data-ng-model="style.stroke.width" placeholder="{{'drawWidth'|translate}}" >
       </label>
     </div>
     <div class="form-group">
-      <label>Couleur
-        <select type="text" class="form-control input-sm" placeholder="Couleur" data-ng-model="style.stroke.color">
+      <label>{{'drawStrokeColor'|translate}}
+        <select type="text" class="form-control input-sm" placeholder="{{'drawStrokeColor'|translate}}" data-ng-model="style.stroke.color">
           <option data-ng-repeat="c in colors | orderBy">{{c}}</option>
         </select>
       </label>
     </div>
     <div class="form-group">
-      <label>Remplissage
-        <input type="text" class="form-control" data-ng-model="style.fill.color" placeholder="color" >
+      <label>{{'drawFillColor'|translate}}
+        <input type="text" class="form-control" data-ng-model="style.fill.color" placeholder="{{'drawFillColor'|translate}}" >
       </label>
     </div>
   </div>
 
   <!--Text-->
   <div data-ng-if="getType() == 'text'">
     <div class="form-group">
-      <label>Police
-        <input type="text" class="form-control input-sm" data-ng-model="style.text.font" placeholder="color" >
+      <label>{{'textFont'|translate}}
+        <input type="text" class="form-control input-sm" data-ng-model="style.text.font" placeholder="{{'textFont'|translate}}" >
       </label>
     </div>
     <div class="form-group">
-      <label>Épaisseur
-        <input type="number" class="form-control input-sm" data-ng-model="style.text.stroke.width" placeholder="width" >
+      <label>{{'textWidth'|translate}}
+        <input type="number" class="form-control input-sm" data-ng-model="style.text.stroke.width" placeholder="{{'textWidth'|translate}}" >
       </label>
     </div>
     <div class="form-group">
-      <label>Couleur contours
-        <select type="text" class="form-control input-sm" placeholder="Couleur" data-ng-model="style.text.stroke.color">
+      <label>{{'textStrokeColor'|translate}}
+        <select type="text" class="form-control input-sm" placeholder="{{'textStrokeColor'|translate}}" data-ng-model="style.text.stroke.color">
           <option data-ng-repeat="c in colors | orderBy">{{c}}</option>
         </select>
       </label>
     </div>
     <div class="form-group">
-      <label>Couleur
-        <select type="text" class="form-control input-sm" placeholder="Couleur" data-ng-model="style.text.fill.color">
+      <label>{{'textFillColor'|translate}}
+        <select type="text" class="form-control input-sm" placeholder="{{'textFillColor'|translate}}" data-ng-model="style.text.fill.color">
           <option data-ng-repeat="c in colors | orderBy">{{c}}</option>
         </select>
       </label>

web-ui/src/main/resources/catalog/components/viewer/gfi/partials/gfi-popup.html

@@ -1,11 +1,11 @@
 <div ng-show="results.length > 0" class="results panel panel-default">
 
   <div class="panel-heading">
-    <button type="button" class="btn btn-default close" ng-click="close()">
+    <button type="button" class="btn btn-default close" ng-click="close()" title="{{'close'|translate}}">
       &times;
     </button>
     <h5>
-      <span translate>Results</span>
+      <span data-translate="">Results</span>
       <span></span>
     </h5>
   </div>

web-ui/src/main/resources/catalog/components/viewer/layermanager/partials/layermanageritem.html

@@ -1,33 +1,33 @@
  <div>
-   <button class="btn btn-cog" data-ng-click="showInfo(layer)">
+   <button class="btn btn-cog" data-ng-click="showInfo(layer)" title="{{'layerInfo'|translate}}">
      <span class="fa fa-cog"></span>
    </button>
-   <button class="btn btn-cog" data-ng-click="zoomToExtent(layer, map)">
+   <button class="btn btn-cog" data-ng-click="zoomToExtent(layer, map)" title="{{'layerExtentZoom'|translate}}">
      <span class="fa fa-arrows-alt"></span>
    </button>
    <span class="gn-layer-ordering">
-     <a href="" class="fa fa-arrow-up" ng-if="!$first" ng-click="moveLayer(layer, 1)"></a>
-     <a href="" class="fa fa-arrow-down" ng-if="!$last" ng-click="moveLayer(layer, -1)"></a>
+     <a href="" class="fa fa-arrow-up" ng-if="!$first" ng-click="moveLayer(layer, 1)" title="{{'layerMoveUp'|translate}}"></a>
+     <a href="" class="fa fa-arrow-down" ng-if="!$last" ng-click="moveLayer(layer, -1)"  title="{{'layerMoveDown'|translate}}"></a>
    </span>
    <label>
-     <input type="checkbox" ng-model="layer.visible" />
+     <input type="checkbox" ng-model="layer.visible" title="{{'layerVisible'|translate}}" />
      {{layer.get('label')}}
    </label>
    <div class="details">
-     <button class="metadata" ng-if="layer.get('metadata')" data-ng-click="showMetadata(layer.get('metadata'), layer.get('label'))">
+     <button class="metadata" ng-if="layer.get('metadata')" data-ng-click="showMetadata(layer.get('metadata'), layer.get('label'))" title="{{'layerMetadata'|translate}}">
        <span class="fa fa-file"></span>
-       Voir les métadonnées
+       {{'layerMetadata'|translate}}
      </button>
-     <button class="btn btn-default delete" ng-click="map.removeLayer(layer)">
+     <button class="btn btn-default delete" ng-click="map.removeLayer(layer)" title="{{'layerDelete'|translate}}">
        <span class="fa fa-trash-o"></span>
-       Supprimer
+        {{'layerDelete'|translate}}
      </button>
      <label>Transparence <input type="range" min="0" max="1" step="0.05" ng-model="layer.opacity" /></label>
-     <h6 ng-if="layer.get('legend')">Légende</h6>
+     <h6 ng-if="layer.get('legend')" data-translate="">Legend</h6>
      <p ng-if="layer.get('legend')">
        <img ng-src="{{layer.get('legend')}}"/>
      </p>
-     <h6 ng-if="layer.get('attribution')">Source</h6>
+     <h6 ng-if="layer.get('attribution')" data-translate="">Attribution</h6>
      <p ng-if="layer.get('attribution')"><em>{{layer.get('attribution')}}</em></p>
      <div gn-ncwms-transect="" map="map" layer="layer" data-ng-if="layer.ncInfo"/>
    </div>

web-ui/src/main/resources/catalog/components/viewer/localisation/LocalisationDirective.js

@@ -67,6 +67,7 @@
                     });
                 return (props.length == 0) ? '' : '—' + props.join(', ');
               };
+			  //todo: move api url and username to config
               var url = 'http://api.geonames.org/searchJSON';
               $http.get(url, {
                 params: {

web-ui/src/main/resources/catalog/components/viewer/localisation/LocalisationService.js

@@ -77,6 +77,7 @@
           extent, position)) {
         valid = true;
       } else {
+		//todo: don't use hardcoded projections
         position = ol.proj.transform(position,
             'EPSG:2056', 'EPSG:3857');
         if (ol.extent.containsCoordinate(

web-ui/src/main/resources/catalog/components/viewer/localisation/partials/localisation.html

@@ -1,15 +1,15 @@
 <div class="search-container" data-ng-class="{open : !collapsed}">
-  <i class="fa fa-times-circle clear" ng-click="clearInput()" ng-hide="query==''"></i>
+  <span class="fa fa-times-circle clear" ng-click="clearInput()" ng-hide="query==''" title="{{'clear'|translate}}"></span>
   <input data-ng-model="query" data-ng-change="locCtrl.search(query)" type="search"
          class="form-control" placeholder="{{'searchPlaces' | translate}}">
   <div class="dropdown-menu" role="menu">
-    <h5 ng-if="(localisations | filter:query).length > 0">Zones</h5>
+    <h5 ng-if="(localisations | filter:query).length > 0" data-translate="">Locations</h5>
     <ul class="loc-defaults list-group">
       <li data-ng-repeat="loc in localisations | filter:query" class="list-group-item">
         <a href="" data-ng-click="locCtrl.onClick(loc, map)">{{loc.name}}</a>
       </li>
     </ul>
-    <h5 ng-if="results.length>0">Résultats</h5>
+    <h5 ng-if="results.length>0" data-translate="">Results</h5>
     <ul class="loc-geonames list-group">
       <li data-ng-repeat="loc in results" class="list-group-item">
       <a href="" data-ng-click="locCtrl.onClick(loc, map)">{{loc.name}} <em>{{loc.formattedName}}</em></a>

web-ui/src/main/resources/catalog/components/viewer/owscontext/OwsContextService.js

@@ -22,7 +22,8 @@
     'gnOwsCapabilities',
     '$http',
     'gnViewerSettings',
-    function(gnMap, gnOwsCapabilities, $http, gnViewerSettings) {
+	'$translate',
+    function(gnMap, gnOwsCapabilities, $http, gnViewerSettings, $translate ) {
 
       /**
        * Loads a context, ie. creates layers and centers the map
@@ -64,14 +65,14 @@
         for (i = 0; i < layers.length; i++) {
           var layer = layers[i];
           if (layer.name) {
-            if (layer.group == 'Background layers' && layer.name.match(re)) {
+            if (layer.group == $translate('BackgroundLayers') && layer.name.match(re)) {
               var type = re.exec(layer.name)[1];
               var olLayer = gnMap.createLayerForType(type);
               if (olLayer) {
                 bgLayers.push(olLayer);
                 olLayer.displayInLayerManager = false;
                 olLayer.background = true;
-                olLayer.set('group', 'Background layers');
+                olLayer.set('group', $translate('BackgroundLayers'));
                 olLayer.setVisible(!layer.hidden);
               }
             } else {
@@ -149,6 +150,7 @@
         };
 
         // add the background layers
+		//todo: grab this from config
         angular.forEach(gnViewerSettings.bgLayers, function(layer) {
           var source = layer.getSource();
           var name;

web-ui/src/main/resources/catalog/components/viewer/owscontext/partials/owscontext.html

@@ -1,6 +1,6 @@
 <div class="btn-group context">
   <a class="btn btn-default" data-ng-click="save($event)"
-     download="context.xml">
+     title="{{'downloadContext'|translate}}" download="context.xml">
     <i class="fa fa-save"></i>&nbsp;
     <span data-translate="">downloadContext</span>
   </a>
@@ -12,11 +12,11 @@
   </a>-->
 </div>
 <div class="btn-group context">
-  <button type="button" class="btn btn-default import">
+  <button type="button" class="btn btn-default import" title="{{'uploadContext'|translate}}">
     <i class="fa fa-upload"></i>&nbsp;
     <span data-translate="">uploadContext</span>
   </button>
-  <a class="btn btn-default" data-ng-click="reset($event)">
+  <a class="btn btn-default" data-ng-click="reset($event)" title="{{'resetContext'|translate}}">
     <i class="fa fa-reset"></i>&nbsp;
     <span data-translate="">resetContext</span>
   </a>