From bd4549a7116fcabbdebe923c6ae911dc1f972d8a Mon Sep 17 00:00:00 2001 From: Iris Jeuffrard <114398946+ijeuffrard@users.noreply.github.com> Date: Tue, 18 Apr 2023 10:00:54 +0200 Subject: [PATCH 1/9] ebauche map --- routes/pages/index.js | 10 ++++ views/pages/map.ejs | 115 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 125 insertions(+) create mode 100644 views/pages/map.ejs diff --git a/routes/pages/index.js b/routes/pages/index.js index cc78278..7508d1e 100644 --- a/routes/pages/index.js +++ b/routes/pages/index.js @@ -108,4 +108,14 @@ router.get('/hosts', topBar.getInfo, hosts.getHosts, (req, res) => { }); }); +// hosts page +router.get('/map', (req, res) => { + res.render('pages/map', { + base: req.app.get('baseUrl'), + api: req.app.get('apiUrl'), + server: req.app.get('server'), + version: req.app.get('version'), + }); +}); + module.exports = router; diff --git a/views/pages/map.ejs b/views/pages/map.ejs new file mode 100644 index 0000000..730ce3c --- /dev/null +++ b/views/pages/map.ejs @@ -0,0 +1,115 @@ + + + + + + GPAO - Job + + <%- include ("../partials/head") %> + + + + + + + + + +
+ + <%- include ("../partials/menu/sidebar") %> + + +
+ + +
+ + +
+ + +
+

Map

+
+ +
+ + + +
+ + + <%- include ("../partials/footer") %> + +
+ + +
+ + + + + + + + + + + + <%- include ("../popups/popup_job_status_info") %> + + + \ No newline at end of file From 7cb3001d3e9ce16455e7eede90ec86d22bdfc290 Mon Sep 17 00:00:00 2001 From: Iris Jeuffrard <114398946+ijeuffrard@users.noreply.github.com> Date: Tue, 30 May 2023 17:45:13 +0200 Subject: [PATCH 2/9] add geoserver layer --- package.json | 2 ++ serveur.js | 2 ++ views/pages/map.ejs | 43 ++++++++++++++++++++++++++++++----------- views/partials/head.ejs | 7 +++++++ 4 files changed, 43 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 1a67173..5f6e10c 100644 --- 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/serveur.js b/serveur.js index 0208bd9..d85d5c4 100644 --- a/serveur.js +++ b/serveur.js @@ -34,6 +34,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/views/pages/map.ejs b/views/pages/map.ejs index 730ce3c..87d25c3 100644 --- a/views/pages/map.ejs +++ b/views/pages/map.ejs @@ -7,13 +7,6 @@ <%- include ("../partials/head") %> - - - @@ -65,7 +58,7 @@ service: 'WMTS', }); - var map = L.map('map', {center: [46.845,2.424], zoom: 6, layers: [ortho, plan]}); + var map = L.map('map', {center: [46.845,2.424], zoom: 2, layers: [ortho, plan]}); var baseMaps = { "Ortho": ortho, @@ -82,10 +75,38 @@ // [47.51, -0.047] // ]).addTo(map); - var geojsonFeature = require('../../../test_map.json') + // var geojsonFeature = require('../../../test_map.json') - - L.geoJSON(geojsonFeature).addTo(map); + // var states = [{ + // "type": "Feature", + // "properties": {"party": "Republican"}, + // "geometry": { + // "type": "Polygon", + // "coordinates": [[ + // [2.424,46], + // [-0.06, 46], + // [-0.047, 47] + // ]] + // } + // }, { + // "type": "Feature", + // "properties": {"party": "Democrat"}, + // "geometry": { + // "type": "Polygon", + // "coordinates": [[ + // [3,49], + // [4, 44], + // [6, 43] + // ]] + // } + // }]; + + // L.geoJSON(states).addTo(map); + + var wmsLayer = L.Geoserver.wms("http://localhost:8081/geoserver/wms", { + layers: "topp:states", + }); + wmsLayer.addTo(map); diff --git a/views/partials/head.ejs b/views/partials/head.ejs index 8e02539..dc306ce 100644 --- a/views/partials/head.ejs +++ b/views/partials/head.ejs @@ -18,6 +18,13 @@ + + + + + + + From 2ee14b3e1b579f9b3eacdcda2a48bbba78188357 Mon Sep 17 00:00:00 2001 From: Iris Jeuffrard <114398946+ijeuffrard@users.noreply.github.com> Date: Fri, 2 Jun 2023 16:59:17 +0200 Subject: [PATCH 3/9] layer gpao on geoserver - style - popup -filter --- routes/pages/index.js | 6 +- views/pages/map.ejs | 172 +++++++++++++++++--------------- views/partials/menu/sidebar.ejs | 7 ++ 3 files changed, 101 insertions(+), 84 deletions(-) diff --git a/routes/pages/index.js b/routes/pages/index.js index 7508d1e..939c7ad 100644 --- a/routes/pages/index.js +++ b/routes/pages/index.js @@ -108,9 +108,11 @@ router.get('/hosts', topBar.getInfo, hosts.getHosts, (req, res) => { }); }); -// hosts page -router.get('/map', (req, res) => { +// map page +router.get('/map', projects.getProjects, (req, res) => { res.render('pages/map', { + projects: req.projects, + filter: req.query.filter, base: req.app.get('baseUrl'), api: req.app.get('apiUrl'), server: req.app.get('server'), diff --git a/views/pages/map.ejs b/views/pages/map.ejs index 87d25c3..9d1aab3 100644 --- a/views/pages/map.ejs +++ b/views/pages/map.ejs @@ -3,7 +3,7 @@ - GPAO - Job + GPAO - Map <%- include ("../partials/head") %> @@ -27,88 +27,26 @@
-

Map

+

Géovisualisation des jobs

+ +
+
+ +
+ +
+ +
-
- - +
@@ -133,4 +71,74 @@ <%- include ("../popups/popup_job_status_info") %> - \ No newline at end of file + + + \ No newline at end of file diff --git a/views/partials/menu/sidebar.ejs b/views/partials/menu/sidebar.ejs index 8a5e71f..3988b18 100644 --- a/views/partials/menu/sidebar.ejs +++ b/views/partials/menu/sidebar.ejs @@ -20,6 +20,13 @@ Dashboard + +
  • + + + Map +
    • +
    From aa26de042ae59bea540414b35ad92100fdfd8fd7 Mon Sep 17 00:00:00 2001 From: Iris Jeuffrard <114398946+ijeuffrard@users.noreply.github.com> Date: Fri, 10 Nov 2023 16:16:57 +0100 Subject: [PATCH 4/9] add topbar and layer departement --- routes/pages/index.js | 3 ++- views/pages/map.ejs | 20 ++++++++++++++++---- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/routes/pages/index.js b/routes/pages/index.js index 939c7ad..1e5e7de 100644 --- a/routes/pages/index.js +++ b/routes/pages/index.js @@ -109,8 +109,9 @@ router.get('/hosts', topBar.getInfo, hosts.getHosts, (req, res) => { }); // map page -router.get('/map', projects.getProjects, (req, res) => { +router.get('/map', topBar.getInfo, projects.getProjects, (req, res) => { res.render('pages/map', { + topBar: req.topBar, projects: req.projects, filter: req.query.filter, base: req.app.get('baseUrl'), diff --git a/views/pages/map.ejs b/views/pages/map.ejs index 9d1aab3..2a45567 100644 --- a/views/pages/map.ejs +++ b/views/pages/map.ejs @@ -30,6 +30,9 @@

    Géovisualisation des jobs

    + <%- include ("../partials/menu/topbar") %> + +
    @@ -99,12 +102,21 @@ service: 'WMTS', }); - var map = L.map('map', {center: [46.845,2.424], zoom: 7, layers: [plan, ortho]}); + var contoursAdminLayer = L.Geoserver.wms("http://localhost:8081/geoserver/wms", { + layers: "gpao:DEPARTEMENT", + }); + + + var map = L.map('map', {center: [46.845,2.424], zoom: 7, layers: [contoursAdminLayer, plan, ortho]}); var baseMaps = { "Photographies aériennes IGN": ortho, - "Plan IGN": plan + "Plan IGN": plan, + }; + var overlays = { + "Départements (mode hors connexion)": contoursAdminLayer }; - var layerControl = L.control.layers(baseMaps).addTo(map); + + var layerControl = L.control.layers(baseMaps, overlays).addTo(map); L.control.scale().addTo(map); var project_filter = $('#project-select').val() @@ -114,7 +126,7 @@ } ); var gpaoLayer = L.Geoserver.wfs("http://localhost:8081/geoserver/wfs", { - layers: "gpao:emprises", + layers: "gpao:view_jobs_geometry", onEachFeature: function (feature, layer) { layer.bindPopup( "Id : " + feature.properties.id + "
    " + From 006d8f9f97aa3d1e2ca3f193395637e6adbdc0cf Mon Sep 17 00:00:00 2001 From: Iris Jeuffrard <114398946+ijeuffrard@users.noreply.github.com> Date: Mon, 13 Nov 2023 16:41:36 +0100 Subject: [PATCH 5/9] add attributs jobs --- views/pages/map.ejs | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/views/pages/map.ejs b/views/pages/map.ejs index 2a45567..e074267 100644 --- a/views/pages/map.ejs +++ b/views/pages/map.ejs @@ -131,7 +131,13 @@ layer.bindPopup( "Id : " + feature.properties.id + "
    " + "Nom : " + ''+feature.properties.name+'' + "
    " + - "Id du projet : " + ''+feature.properties.id_project+'' + "Satut : " + feature.properties.status + "
    " + + "Date de début : " + feature.properties.date_debut + " " + feature.properties.hms_debut + "
    " + + "Durée : " + feature.properties.duree + " s" + "
    " + + "Machine : " + feature.properties.session_host + "
    " + + "
    " + + "Id du projet : " + feature.properties.id_project+'' + "
    " + + "Nom du projet : " + '' + feature.properties.name_project+'' ); }, style: function(feature) { From adac9180c6bd0d49adae33f5c1f1daf37e2b8bb6 Mon Sep 17 00:00:00 2001 From: Iris Jeuffrard <114398946+ijeuffrard@users.noreply.github.com> Date: Fri, 17 Nov 2023 16:29:51 +0100 Subject: [PATCH 6/9] add border country on map --- views/pages/map.ejs | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/views/pages/map.ejs b/views/pages/map.ejs index e074267..06633ea 100644 --- a/views/pages/map.ejs +++ b/views/pages/map.ejs @@ -106,14 +106,20 @@ 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 = { - "Photographies aériennes IGN": ortho, - "Plan IGN": plan, + "Plan IGN": plan, + "Photographies aériennes IGN": ortho, }; + var overlays = { - "Départements (mode hors connexion)": contoursAdminLayer + "Départements (mode hors connexion)": contoursAdminLayer, + "Pays (mode hors connexion)": contoursPaysLayer }; var layerControl = L.control.layers(baseMaps, overlays).addTo(map); From 91719becceba955e5d93172cc154f8a7ea105907 Mon Sep 17 00:00:00 2001 From: Iris Jeuffrard <114398946+ijeuffrard@users.noreply.github.com> Date: Fri, 17 Nov 2023 16:57:21 +0100 Subject: [PATCH 7/9] add environnement variable to activate map --- routes/pages/index.js | 8 ++++++++ serveur.js | 3 +++ start.sh | 5 +++-- views/partials/menu/sidebar.ejs | 10 +++++++++- 4 files changed, 23 insertions(+), 3 deletions(-) diff --git a/routes/pages/index.js b/routes/pages/index.js index 1e5e7de..7bf79dd 100644 --- 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,7 @@ 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'), }); }); @@ -118,6 +125,7 @@ router.get('/map', topBar.getInfo, projects.getProjects, (req, res) => { 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 index d85d5c4..815db79 100644 --- a/serveur.js +++ b/serveur.js @@ -19,6 +19,8 @@ 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. @@ -26,6 +28,7 @@ const API_PORT = process.env.GPAO_API_PORT || 8080; 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'); diff --git a/start.sh b/start.sh index aedf3a3..5cf7e1a 100755 --- 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/partials/menu/sidebar.ejs b/views/partials/menu/sidebar.ejs index 3988b18..d7ff752 100644 --- a/views/partials/menu/sidebar.ejs +++ b/views/partials/menu/sidebar.ejs @@ -21,7 +21,7 @@ -
  • +
    • -
    +
    @@ -125,10 +125,17 @@ 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() - location.reload(); + history.replaceState("", "", location.pathname) + location.reload() } ); var gpaoLayer = L.Geoserver.wfs("http://localhost:8081/geoserver/wfs", { @@ -145,6 +152,13 @@ "Id du projet : " + feature.properties.id_project+'' + "
    " + "Nom du projet : " + '' + feature.properties.name_project+'' ); + 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) { @@ -161,7 +175,8 @@ }else{ return "INCLUDE" } - } + }, + fitLayer: fitLayer }); gpaoLayer.addTo(map); diff --git a/views/partials/components/job_info.ejs b/views/partials/components/job_info.ejs index 3788643..5a9ba97 100644 --- a/views/partials/components/job_info.ejs +++ b/views/partials/components/job_info.ejs @@ -31,6 +31,14 @@
    +
  • +
    +
    Géometrie :
    + + + +
    +
  • Date de début : <%= job.date_debut %> à <%= job.hms_debut %> (UTC)
  • Date de fin : <%= job.date_fin %> à <%= job.hms_fin %> (UTC)
  • Durée : <%= job.duree %> secondes
    • @@ -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"; +} \ No newline at end of file diff --git a/views/partials/tab/jobs_tab.ejs b/views/partials/tab/jobs_tab.ejs index 78a58db..76c59aa 100644 --- a/views/partials/tab/jobs_tab.ejs +++ b/views/partials/tab/jobs_tab.ejs @@ -53,8 +53,10 @@ $(document).ready(function() { "columns": columns, "autoWidth": false, "createdRow": function( row, data, dataIndex, cells ) { - if (data.job_status !== 'failed') + if (<%= activateMap %> == false || data.job_geometry == null) $('button', cells[9])[0].style.visibility = "hidden"; + if (data.job_status !== 'failed') + $('button', cells[9])[1].style.visibility = "hidden"; }, "rowCallback": function( row, data, index ) { var job_id = $('td:eq(0)', row); @@ -98,6 +100,14 @@ $(document).ready(function() { reinitJobs({"ids":[row.data().job_id]}); } ); + $('#dataTable tbody').on('click', 'button.map_job', function () { + var tr = $(this).closest('tr'); + var row = table.row( tr ); + var job_id = row.data().job_id; + console.log(job_id) + location.href='<%= base %>/map?jobFilter='+job_id + } ); + var i = jQuery(''); i.addClass('fas fa-sync-alt fa-1x')