ign-gpao · ijeuffrard · Apr 18, 2023 · May 30, 2023 · Jun 2, 2023 · Nov 10, 2023
diff --git a/README.md b/README.md
@@ -45,6 +45,7 @@ La configuration de variables d'environnement propres au Monitor est nécessaire
 | GPAO_API_URL | Non | localhost | Nom de la machine qui héberge l'API |
 | GPAO_API_PORT | Non | 8080 | Port de l'API vu par le monitor |
 | GPAO_API_PROTOCOL | Non | http | Protocole de l'API vu par le monitor |
+| GPAO_ACTIVATE_MAP | Non | false | Boolean qui active ou non le volet cartographique de la GPAO sur le monitor |
 
 ## Pour les développeurs
 

diff --git a/middlewares/job.js b/middlewares/job.js
@@ -46,7 +46,8 @@ async function getJobs(req, res, next) {
       title: 'Action',
       orderable: false,
       data: null,
-      defaultContent: '<button type=\\"button\\" data-toggle=\\"tooltip\\" title=\\"Réinitialise le job\\" class=\\"reinit_job btn btn-sm btn-circle btn-warning\\"><i class=\\"fas fa-sync-alt fa-1x\\" aria-hidden=\\"true\\"></i></button>',
+      defaultContent: '<button type=\\"button\\" data-toggle=\\"tooltip\\" title=\\"voir sur la carte\\" class=\\"map_job btn btn-sm btn-circle btn-primary\\"><i class=\\"fas fa-map fa-1x\\" aria-hidden=\\"true\\"></i></button>'
+      + ' <button type=\\"button\\" data-toggle=\\"tooltip\\" title=\\"Réinitialise le job\\" class=\\"reinit_job btn btn-sm btn-circle btn-warning\\"><i class=\\"fas fa-sync-alt fa-1x\\" aria-hidden=\\"true\\"></i></button>',
     },
   ]);
 

diff --git a/package.json b/package.json
@@ -23,6 +23,8 @@
     "ejs": "^3.0.1",
     "express": "^4.6.1",
     "express-validator": "^6.6.1",
+    "leaflet": "^1.9.4",
+    "leaflet-geoserver-request": "^1.3.0",
     "requests": "^0.3.0"
   },
   "devDependencies": {

diff --git a/routes/pages/index.js b/routes/pages/index.js
@@ -17,6 +17,7 @@ router.get('/', topBar.getInfo, projects.getProjectStatus, (req, res) => {
     base: req.app.get('baseUrl'),
     api: req.app.get('apiUrl'),
     version: req.app.get('version'),
+    activateMap: req.app.get('activateMap'),
   });
 });
 
@@ -32,6 +33,7 @@ router.get('/job/:id', topBar.getInfo, jobs.getJob, dependencies.getJobDependenc
     base: req.app.get('baseUrl'),
     api: req.app.get('apiUrl'),
     version: req.app.get('version'),
+    activateMap: req.app.get('activateMap'),
   });
 });
 
@@ -49,6 +51,7 @@ router.get('/project/:id', topBar.getInfo, projects.getProject, projects.getJobs
     base: req.app.get('baseUrl'),
     api: req.app.get('apiUrl'),
     version: req.app.get('version'),
+    activateMap: req.app.get('activateMap'),
   });
 });
 
@@ -64,6 +67,7 @@ router.get('/jobs', topBar.getInfo, jobs.getJobs, projects.getProjects, (req, re
     base: req.app.get('baseUrl'),
     api: req.app.get('apiUrl'),
     version: req.app.get('version'),
+    activateMap: req.app.get('activateMap'),
   });
 });
 
@@ -77,6 +81,7 @@ router.get('/projects', topBar.getInfo, projects.getProjects, (req, res) => {
     base: req.app.get('baseUrl'),
     api: req.app.get('apiUrl'),
     version: req.app.get('version'),
+    activateMap: req.app.get('activateMap'),
   });
 });
 
@@ -92,6 +97,7 @@ router.get('/sessions', topBar.getInfo, sessions.getSessions, hosts.getHosts, (r
     base: req.app.get('baseUrl'),
     api: req.app.get('apiUrl'),
     version: req.app.get('version'),
+    activateMap: req.app.get('activateMap'),
   });
 });
 
@@ -105,6 +111,21 @@ router.get('/hosts', topBar.getInfo, hosts.getHosts, (req, res) => {
     base: req.app.get('baseUrl'),
     api: req.app.get('apiUrl'),
     version: req.app.get('version'),
+    activateMap: req.app.get('activateMap'),
+  });
+});
+
+// map page
+router.get('/map', topBar.getInfo, projects.getProjects, (req, res) => {
+  res.render('pages/map', {
+    topBar: req.topBar,
+    projects: req.projects,
+    jobFilter: req.query.jobFilter,
+    base: req.app.get('baseUrl'),
+    api: req.app.get('apiUrl'),
+    server: req.app.get('server'),
+    version: req.app.get('version'),
+    activateMap: req.app.get('activateMap'),
   });
 });
 

diff --git a/serveur.js b/serveur.js
@@ -19,13 +19,16 @@ const API_URL = process.env.GPAO_API_URL || 'localhost'; // accès api via backe
 const API_PROTOCOL = process.env.GPAO_API_PROTOCOL || 'http';
 const API_PORT = process.env.GPAO_API_PORT || 8080;
 
+const ACTIVATE_MAP = process.env.GPAO_ACTIVATE_MAP || false;
+
 // Dans le cas d'un déploiement de la stack via docker les variables d'environnement:
 // BASE_URL, API, API_PORT, API_PROTOCOL
 // sont surchargées dans le docker-compose.yml.
 
 app.set('baseUrl', `${MONITOR_BASE_URL}`);
 app.set('apiUrl', `${API_PROTOCOL}://${API_URL}:${API_PORT}`);
 app.set('version', process.env.npm_package_version);
+app.set('activateMap', `${ACTIVATE_MAP}`);
 
 // set the view engine to ejs
 app.set('view engine', 'ejs');
@@ -34,6 +37,8 @@ app.use('/vendor', express.static(`${__dirname}/resources/vendor`));
 app.use('/css', express.static(`${__dirname}/resources/css`));
 app.use('/js', express.static(`${__dirname}/resources/js`));
 app.use('/chart.js', express.static(`${__dirname}/node_modules/chart.js`));
+app.use('/leaflet', express.static(`${__dirname}/node_modules/leaflet`));
+app.use('/leaflet-geoserver-request', express.static(`${__dirname}/node_modules/leaflet-geoserver-request`));
 app.use('/images', express.static(`${__dirname}/resources/images`));
 
 // use res.render to load up an ejs view file

diff --git a/start.sh b/start.sh
@@ -1,5 +1,6 @@
-export GPAO_API_URL=localhost
-export GPAO_API_PORT=8080
+export URL_API=localhost
+export API_PORT=8080
+export GPAO_ACTIVATE_MAP=true
 
 if [ "$(docker ps -aq -f name=monitor-gpao)" ]; then
     echo "Suppression du container monitor-gpao"

diff --git a/views/pages/map.ejs b/views/pages/map.ejs
@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+
+    <title>GPAO - Map</title>
+
+    <%- include ("../partials/head") %>
+
+</head>
+
+<body id="page-top">
+
+  <!-- Page Wrapper -->
+  <div id="wrapper">
+
+    <%- include ("../partials/menu/sidebar") %>
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+      <!-- Main Content -->
+      <div id="content">
+
+        <!-- Begin Page Content -->
+        <div class="container-fluid">
+
+          <!-- Page Heading -->
+          <div class="d-sm-flex align-items-center justify-content-between mb-4">
+            <h1 class="h3 mb-0 text-gray-800">Géovisualisation des jobs</h1>
+          </div>
+
+          <%- include ("../partials/menu/topbar") %>
+
+          <!-- Content Row -->
+          <div class="input-group input-group-sm mb-2">
+            <div class="input-group-prepend">
+              <label class="input-group-text">Filtrer par projets</label>
+            </div>
+            <select class="custom-select" name="projects" id="project-select">
+              <option value="-1">-- Tous les projets --</option>
+              <% projects.forEach(function( project ){ %>
+                <option value="<%= project.project_id %>"  > 
+                  <%= project.project_id %> - <%= project.project_name %>
+                </option>
+              <% }) %>
+            </select>    
+          </div>  
+
+          <div id="map" style="height: 70vh;">
+
+          </div>
+
+      </div>
+      <!-- End of Main Content -->
+
+      <%- include ("../partials/footer") %>
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+  </div>
+  <!-- End of Page Wrapper -->
+
+  <!-- Scroll to Top Button-->
+  <a class="scroll-to-top rounded" href="#page-top">
+    <i class="fas fa-angle-up"></i>
+  </a>
+
+  <!-- Custom scripts for all pages-->
+  <script src="<%= base %>/js/sb-admin-2.min.js"></script>
+
+  <!-- Popups Info -->
+  <%- include ("../popups/popup_job_status_info") %>
+
+</body>
+</html>
+
+<script>
+
+  var ortho = L.tileLayer('https://wxs.ign.fr/decouverte/geoportail/wmts?' +
+                          'service=WMTS&request=GetTile&version=1.0.0' +
+                          '&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}' +
+                          '&layer=ORTHOIMAGERY.ORTHOPHOTOS' +
+                          '&format=image/jpeg&style=normal',
+                          {
+                              minZoom : 2,
+                              maxZoom : 21,
+                              tileSize : 256,
+                              attribution : "IGN-F/Géoportail"
+                          });
+
+  var plan = L.tileLayer('https://wxs.ign.fr/{ignApiKey}/geoportail/wmts?'+
+                          '&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&TILEMATRIXSET=PM'+
+                          '&LAYER={ignLayer}&STYLE={style}&FORMAT={format}'+
+                          '&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}',
+                          {
+                            ignApiKey: 'decouverte',
+                            ignLayer: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2',
+                            style: 'normal',
+                            format: 'image/png',
+                            service: 'WMTS',
+                          });
+
+  var contoursAdminLayer = L.Geoserver.wms("http://localhost:8081/geoserver/wms", {
+    layers: "gpao:DEPARTEMENT",
+  });
+
+  var contoursPaysLayer = L.Geoserver.wms("http://localhost:8081/geoserver/wms", {
+    layers: "gpao:frontieres_pays",
+  });
+
+  var map = L.map('map', {center: [46.845,2.424], zoom: 7, layers: [contoursAdminLayer, plan, ortho]});
+
+  var baseMaps = {
+    "Plan IGN": plan,
+    "Photographies aériennes IGN": ortho,
+  };
+
+  var overlays = {
+    "Départements (mode hors connexion)": contoursAdminLayer,
+    "Pays (mode hors connexion)": contoursPaysLayer
+  };
+
+  var layerControl = L.control.layers(baseMaps, overlays).addTo(map);
+  L.control.scale().addTo(map);
+
+  var job_filter  = '<%= jobFilter %>'
+  var fitLayer = true
+  if (job_filter != ''){
+    fitLayer = false
+  }
+
+  var project_filter = $('#project-select').val()
+  $('#project-select').change( function() {
+    var project_filter = $('#project-select').val()
+    history.replaceState("", "", location.pathname)
+    location.reload()
+  } );
+
+  var gpaoLayer = L.Geoserver.wfs("http://localhost:8081/geoserver/wfs", {
+    layers: "gpao:view_jobs_geometry",
+    onEachFeature: function (feature, layer) {
+      layer.bindPopup(
+        "Id : " + feature.properties.id + "<br>" +
+        "Nom : " + '<a href="<%= base %>/job/'+feature.properties.id+'">'+feature.properties.name+'</a>' + "<br>" + 
+        "Satut : " + feature.properties.status + "<br>" +
+        "Date de début : " + feature.properties.date_debut + " " + feature.properties.hms_debut + "<br>" +
+        "Durée : " + feature.properties.duree + " s" + "<br>" +
+        "Machine : " + feature.properties.session_host + "<br>" +
+        "<br>" +
+        "Id du projet : " + feature.properties.id_project+'</a>' + "<br>" +
+        "Nom du projet : " + '<a href="<%= base %>/project/'+feature.properties.id_project+'">' + feature.properties.name_project+'</a>'
+      );
+      if (job_filter == feature.properties.id){
+        if (typeof(layer._bounds) != 'undefined') {
+          map.fitBounds(layer._bounds);
+        }else{
+          map.setView(layer._latlng, 15);
+        }  
+      }
+    },
+    style: function(feature) {
+      switch (feature.properties.status) {
+          case 'done': return {color: '#1cc88a',weight: 2};
+          case 'failed':   return {color: "#e74a3b",weight: 2};
+          case 'running':   return {color: "#f6c23e",weight: 2};
+          case 'waiting':   return {color: "#858796",weight: 2};
+          case 'ready':   return {color: "#4e73df",weight: 2};
+      }
+    },
+    CQL_FILTER: function(feature) {
+      if(project_filter != -1){
+        return "id_project="+project_filter
+      }else{
+        return "INCLUDE"
+      }
+    },
+    fitLayer: fitLayer
+  });
+  gpaoLayer.addTo(map);
+
+</script>
diff --git a/views/partials/components/job_info.ejs b/views/partials/components/job_info.ejs
@@ -31,6 +31,14 @@
               </div>
             </div>
           </li>
+          <li class="list-group-item" id="geom">
+            <div class="d-flex justify-content-between align-items-center">
+              <div id="geom_text">Géometrie : </div>
+              <a id="geom_map" type="button" data-toggle="tooltip" title="voir sur la carte" class="btn btn-sm btn-circle btn-primary" href="<%= base %>/map?jobFilter=<%= job.job_id %>">
+                <i class="fas fa-map" aria-hidden="true"></i>
+              </a>
+            </div>
+          </li>
           <li class="list-group-item">Date de début : <%= job.date_debut %> à  <%= job.hms_debut %> (UTC)</li>
           <li class="list-group-item">Date de fin : <%= job.date_fin %> à  <%= job.hms_fin %> (UTC)</li>
           <li class="list-group-item">Durée : <%= job.duree %> secondes</li>
@@ -64,4 +72,14 @@ $('#tags').on('input', function(event) {
     validateTags('tags','btn-send')
 });
 
+// acces à la géometrie
+if (<%= activateMap %> == false){
+  document.getElementById("geom").style.visibility = "collapse";
+}
+if ('<%= job.job_geometry %>' == ''){
+  document.getElementById("geom_text").innerHTML += "Non";
+  document.getElementById("geom_map").style.visibility = "hidden";
+} else {
+  document.getElementById("geom_text").innerHTML += "Oui";
+}
 </script>
diff --git a/views/partials/head.ejs b/views/partials/head.ejs
@@ -18,6 +18,13 @@
 <!-- Chart js -->
 <script src="<%= base %>/chart.js/dist/chart.js"></script>
 
+<!-- Leaflet -->
+<script src="<%= base %>/leaflet/dist/leaflet.js"></script>
+<link href="<%= base %>/leaflet/dist/leaflet.css" rel="stylesheet"> 
+
+<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
+<script src="<%= base %>/leaflet-geoserver-request/src/L.Geoserver.js"></script>
+
 <!-- Bootstrap core JavaScript-->
 <script src="<%= base %>/vendor/jquery/jquery.min.js"></script>
 <script src="<%= base %>/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

diff --git a/views/partials/menu/sidebar.ejs b/views/partials/menu/sidebar.ejs
@@ -20,6 +20,13 @@
             <span>Dashboard</span></a>
         </li>
 
+        <!-- Nav Item - Dashboard -->
+        <li class="nav-item active" id="mapItem">
+          <a class="nav-link" href="<%= base %>/map">
+            <i class="fas fa-map"></i>
+            <span>Map</span></a>
+        </li>
+
     <!-- Divider -->
     <hr class="sidebar-divider">
 
@@ -119,4 +126,12 @@
       $('#collapseUrl').collapse('hide');
     }
   );
+
+  let mapItem = document.getElementById("mapItem");
+  if(<%= activateMap %>){
+    mapItem.style.display = "block";
+  } else {
+    mapItem.style.display = "none";
+  }
+
 </script>