From 4bee2c20071d3890f28848e342a419df0aae2e73 Mon Sep 17 00:00:00 2001
From: Gravin <florent.gravin@camptocamp.com>
Date: Wed, 18 Jun 2014 22:54:39 +0200
Subject: [PATCH] set wmsimport as directive

---
 .../viewer/partials/mainviewer.html           |  57 +---------
 .../viewer/wmsimport/WmsImportDirective.js    |  91 +++++-----------
 .../viewer/wmsimport/partials/wmsimport.html  | 100 +++---------------
 .../admin/metadata/metadata-and-template.html |   2 +-
 web-ui/src/main/resources/catalog/tmp/app.css |   4 +-
 5 files changed, 49 insertions(+), 205 deletions(-)

diff --git a/web-ui/src/main/resources/catalog/components/viewer/partials/mainviewer.html b/web-ui/src/main/resources/catalog/components/viewer/partials/mainviewer.html
index 4f9173b03fc..1d72c84c176 100644
--- a/web-ui/src/main/resources/catalog/components/viewer/partials/mainviewer.html
+++ b/web-ui/src/main/resources/catalog/components/viewer/partials/mainviewer.html
@@ -1,6 +1,6 @@
-<div class="wrapper">
+<div class="wrapper" data-ng-controller="gnViewerController">
 
-  <div id="map"></div>
+  <div id="map" class="map" gn-map="" gn-map-map="map"></div>
 
   <div class="search-container">
     <input type="search" class="form-control" placeholder="Recherche">
@@ -86,46 +86,7 @@ <h5>Ajouter une couche</h5>
         <button type="button" class="btn btn-default">Fichier KML</button>
       </div>
 
-      <div class="layerTree collapsed">
-        <form role="form">
-          <div class="form-group">
-            <div class="input-group">
-                  <span class="input-group-addon">
-                    <span class="fa fa-globe"></span>
-                  </span>
-              <input type="text" class="form-control" placeholder="Service URL">
-            </div>
-          </div>
-        </form>
-
-        <ul class="list-group">
-          <li class="list-group-item">
-            <label><input type="checkbox"> ainta nret auie</label></li>
-          <li class="list-group-item">
-            <label><input type="checkbox"> ainta nret auie</label></li>
-          <li class="list-group-item">
-            <label><input type="checkbox"> ainta nret auie</label></li>
-          <li class="list-group-item">
-            <label><input type="checkbox"> ainta nret auie</label>
-            <ul class="list-group">
-              <li class="list-group-item">
-                <label><input type="checkbox"> ainta nret auie</label></li>
-              <li class="list-group-item">
-                <label><input type="checkbox"> ainta nret auie</label></li>
-              <li class="list-group-item">
-                <label><input type="checkbox"> ainta nret auie</label></li>
-              <li class="list-group-item">
-                <label><input type="checkbox"> ainta nret auie</label></li>
-            </ul>
-          </li>
-          <li class="list-group-item">
-            <label><input type="checkbox"> ainta nret auie</label></li>
-          <li class="list-group-item">
-            <label><input type="checkbox"> ainta nret auie</label></li>
-        </ul>
-
-      </div>
-
+      <div gn-wms-import="" gn-wms-import-map="map"></div>
     </div>
 
 
@@ -193,18 +154,6 @@ <h5>Impression</h5>
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script>
-  var map = new ol.Map({
-    layers: [
-      new ol.layer.Tile({
-        source: new ol.source.OSM()
-      })
-    ],
-    target: 'map',
-    view: new ol.View2D({
-      center: [1, 0],
-      zoom: 2
-    })
-  });
   $('.tools:not(.control-tools) .btn').click(function() {
     if ($(this).hasClass('active')) {
       $(this).removeClass('active');
diff --git a/web-ui/src/main/resources/catalog/components/viewer/wmsimport/WmsImportDirective.js b/web-ui/src/main/resources/catalog/components/viewer/wmsimport/WmsImportDirective.js
index 04bc4a45e12..0fcc079a25e 100644
--- a/web-ui/src/main/resources/catalog/components/viewer/wmsimport/WmsImportDirective.js
+++ b/web-ui/src/main/resources/catalog/components/viewer/wmsimport/WmsImportDirective.js
@@ -24,11 +24,23 @@
       scope: {
         map: '=gnWmsImportMap'
       },
-      link: function (scope, element, attrs) {
-        scope.gnOwsCapabilities = gnOwsCapabilities;
-        scope.selection = [];
+      controller: function($scope){
+        this.addLayer = function(getCapLayer) {
 
-        scope.params = {};
+          if (getCapLayer) {
+              var layer = getCapLayer;
+              return gnMap.addWmsToMap($scope.map, {
+                    LAYERS: layer.name
+                  }, {
+                    url: $scope.url,
+                    label: layer.title,
+                    extent: gnOwsCapabilities.getLayerExtentFromGetCap($scope.map, layer)
+                  }
+              );
+          }
+        };
+      },
+      link: function (scope, element, attrs) {
 
         //TODO: remove
         scope.servicesList = [
@@ -37,54 +49,11 @@
           'http://www.ifremer.fr/services/wms/oceanographie_physique'
         ];
         scope.load = function (url) {
-          scope.searchFilter = '';
-          scope.selection = [];
           gnOwsCapabilities.getCapabilities(url)
             .then(function (layers) {
               scope.layers = layers;
             });
         };
-
-        scope.select = function (layer) {
-          if (scope.selection.indexOf(layer) < 0) {
-            scope.selection.push(layer);
-          }
-          else {
-            scope.selection.splice(scope.selection.indexOf(layer), 1);
-          }
-        };
-
-        scope.addLayer = function(getCapLayer, isPreview) {
-
-          if (getCapLayer) {
-
-            try {
-              var layer = getCapLayer;
-
-              return gnMap.addWmsToMap(scope.map,
-                {
-                  LAYERS: layer.name
-                },
-                {
-                  url: scope.params.url,
-                  label: layer.title,
-                  extent: gnOwsCapabilities.getLayerExtentFromGetCap(scope.map, layer)
-                }
-              );
-
-            } catch (e) {
-              scope.userMessage = $translate('add_wms_layer_failed') +
-                e.message;
-              return null;
-            }
-          }
-        };
-
-        scope.loadLayers = function(layers) {
-          angular.forEach(layers, function(layer) {
-            scope.addLayer(layer);
-          });
-        };
       }
     };
   }]);
@@ -95,18 +64,18 @@
    *
    * @description
    * Directive to manage a collection of nested layers from
-   * the capabilities document.
+   * the capabilities document. This directive works with
+   * gnCapTreeElt directive.
    */
   module.directive('gnCapTreeCol', [
     function () {
       return {
-        restrict: "E",
+        restrict: 'E',
         replace: true,
         scope: {
-          collection: '=',
-          selection: '='
+          collection: '='
         },
-        template: "<ul><gn-cap-tree-elt ng-repeat='member in collection' member='member' selection='selection'></gn-cap-tree-elt></ul>"
+        template: "<ul class='list-group'><gn-cap-tree-elt ng-repeat='member in collection' member='member'></gn-cap-tree-elt></ul>"
       }
     }]);
 
@@ -124,24 +93,20 @@
     function ($compile) {
     return {
       restrict: "E",
+      require: '^gnWmsImport',
       replace: true,
       scope: {
         member: '='
       },
-      template: "<li data-ng-click='select(member)'>{{member.title}}</li>",
+      template: "<li class='list-group-item'><label><input type='checkbox' data-ng-model='inmap' data-ng-change='select()'>{{member.title}}</label></li>",
       link: function (scope, element, attrs, controller) {
         if (angular.isArray(scope.member.nestedLayers)) {
-          element.append("<gn-cap-tree-col collection='member.nestedLayers' selection='selection'></gn-cap-tree-col>");
-          $compile(element.contents())(scope)
+          element.append("<gn-cap-tree-col class='list-group' collection='member.nestedLayers'></gn-cap-tree-col>");
+          $compile(element.contents())(scope);
+        }
+        scope.select = function() {
+          controller.addLayer(scope.member);
         }
-        scope.select = function (layer) {
-          if (scope.selection.indexOf(layer) < 0) {
-            scope.selection.push(layer);
-          }
-          else {
-            scope.selection.splice(scope.selection.indexOf(layer), 1);
-          }
-        };
       }
     }
   }]);
diff --git a/web-ui/src/main/resources/catalog/components/viewer/wmsimport/partials/wmsimport.html b/web-ui/src/main/resources/catalog/components/viewer/wmsimport/partials/wmsimport.html
index b252137e8b2..fa5da27ec71 100644
--- a/web-ui/src/main/resources/catalog/components/viewer/wmsimport/partials/wmsimport.html
+++ b/web-ui/src/main/resources/catalog/components/viewer/wmsimport/partials/wmsimport.html
@@ -1,91 +1,21 @@
-<div class="modal-dialog gn-import-wms">
-  <div class="modal-content">
-    <div class="modal-header">
-      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-      <h4 class="modal-title" id="myModalLabel">WMS Import</h4>
-    </div>
-    <div class="modal-body">
-      <form class="form-horizontal" role="form">
-
-        <!-- Service input and dropdown -->
-        <div class="form-group">
-          <div class="col-sm-10">
-            <div class="input-group dropdown">
+<div class="layerTree collapsed">
+  <form role="form">
+    <div class="form-group">
+      <div class="input-group dropdown">
               <span class="input-group-addon">
                  <i class="fa fa-globe"/>
               </span>
-              <input class="form-control" type="text" data-toggle="dropdown" data-ng-model="params.url"
-                 data-ng-change="load(params.url)" placeholder="{{'serviceUrl' | translate}}"/>
-              <ul class="dropdown-menu" role="menu">
-                <li data-ng-repeat="srv in servicesList">
-                  <a href="" data-ng-click="params.url = srv;load(srv)">
-                    {{srv}}
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </form>
-
-      <!--Filter-->
-      <div class="input-group gn-import-wms-filter">
-        <span class="input-group-addon">
-           <i class="fa fa-search"/>
-        </span>
-        <input class="form-control input-sm" type="text" data-toggle="dropdown" data-ng-model="searchFilter"
-           placeholder="{{'search' | translate}}"/>
-       </div>
-
-      <div class="gn-import-wms-container">
-
-        <!-- Layer TREE result -->
-        <gn-cap-tree-col collection='layers.nestedLayers' selection="selection"></gn-cap-tree-col>
-
-
-        <!--Table header-->
-        <table class="table-header table table-condensed">
-          <thead>
-            <tr>
-              <th></th>
-              <th ng-click="reverse = !reverse">
-                <span class="pull-left" translate>title</span>
-                <i class="pull-right fa fa-sort-alpha-asc" ng-hide="reverse"></i>
-                <i class="pull-right fa fa-sort-alpha-desc" ng-show="reverse"></i>
-              </th>
-            </tr>
-          </thead>
-        </table>
-
-        <div class="gn-import-wms-content">
-          <table class="table table-striped table-hover table-condensed">
-            <tbody>
-            <tr ng-repeat="layer in layers | orderBy:'title':reverse | filter : searchFilter"
-                ng-class="{active : selection.indexOf(layer) >= 0}">
-              <td>
-                <div class="icon-zoom-in" ng-click="zoomOnLayerExtent(layer)"></div>
-              </td>
-              <td ng-mouseover="addLayerHovered(layer)"
-                  ng-mouseleave="removeLayerHovered()"
-                  ng-click="select(layer)" >
-                {{layer.title}}
-              </td>
-            </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-<!--
-      <div class="layers-list list-group">
-        <a href="#" ng-repeat="l in layers" class="list-group-item"
-           ng-class="{active : selection.indexOf(l) >= 0}" ng-click="select(l)">{{l.title}}</a>
+        <input class="form-control" type="text" data-toggle="dropdown" data-ng-model="url"
+               data-ng-change="load(url)" placeholder="{{'serviceUrl' | translate}}"/>
+        <ul class="dropdown-menu" role="menu">
+          <li data-ng-repeat="srv in servicesList">
+            <a href="" data-ng-click="params.url = srv;load(srv)">
+              {{srv}}
+            </a>
+          </li>
+        </ul>
       </div>
--->
-    </div>
-    <div class="modal-footer">
-      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-      <button type="button" class="btn btn-primary" data-ng-click="loadLayers(selection)">Load layers</button>
     </div>
-  </div>
+  </form>
+  <gn-cap-tree-col collection='layers.nestedLayers' selection="selection"></gn-cap-tree-col>
 </div>
diff --git a/web-ui/src/main/resources/catalog/templates/admin/metadata/metadata-and-template.html b/web-ui/src/main/resources/catalog/templates/admin/metadata/metadata-and-template.html
index 0ed0792f37b..ea84130ee35 100644
--- a/web-ui/src/main/resources/catalog/templates/admin/metadata/metadata-and-template.html
+++ b/web-ui/src/main/resources/catalog/templates/admin/metadata/metadata-and-template.html
@@ -57,7 +57,7 @@ <h4 class="list-group-item-heading">{{s | translate}}</h4>
       <div class="progress-bar" style="width: 100%"/>
     </div>
 
-    <div class="panel panel-default" data-ng-hide="!loadReport && !loadTplReport"
+    <div class="panel panel-default" id="reportStatus" data-ng-hide="!loadReport && !loadTplReport"
       data-ng-class="loadReport['@status'] == 'true' || loadTplReport['@status'] == 'true' ? 
                         'panel-success' : 'panel-danger'">
       <div class="panel-heading" data-translate="">loadReport</div>
diff --git a/web-ui/src/main/resources/catalog/tmp/app.css b/web-ui/src/main/resources/catalog/tmp/app.css
index d34750eb5b4..72ae8c00ce2 100644
--- a/web-ui/src/main/resources/catalog/tmp/app.css
+++ b/web-ui/src/main/resources/catalog/tmp/app.css
@@ -6,8 +6,8 @@
  * -------------------------- */
 @font-face {
   font-family: 'FontAwesome';
-  src: url('../lib/style/font-awesome/fonts/fontawesome-webfont.eot?v=4.1.0');
-  src: url('../lib/style/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../lib/style/font-awesome/fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../lib/style/font-awesome/fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../lib/style/font-awesome/fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
+  src: url('../lib/style/font-awesome-4.0.3/fonts/fontawesome-webfont.eot?v=4.1.0');
+  src: url('../lib/style/font-awesome-4.0.3/fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../lib/style/font-awesome-4.0.3/fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../lib/style/font-awesome/fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../lib/style/font-awesome/fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
   font-weight: normal;
   font-style: normal;
 }