Merge pull request #143 from PnX-SI/dev

Dev > Master / 1.2.0

.gitignore

@@ -3,6 +3,7 @@ backend/static/custom/css/custom-style.css
 backend/static/custom/css/page-style.css
 backend/static/custom/logo/logo_txt_blanc.png
 backend/static/custom/logo/logo_txt_color.png
+backend/static/custom/logo/favicon.ico
 
 messages.pot 
 messages.po

README.md

@@ -2,21 +2,25 @@
 
 Application web permettant de publier un observatoire photographique des paysages.
 
+## Exemples 
+
+- http://paysages.vanoise-parcnational.fr
+- http://paysages.ecrins-parcnational.fr
+- https://paysages.parc-naturel-pilat.fr
+
 ## Installation
 
-Documentation d'installation : https://github.com/PnX-SI/GeoPaysages/tree/master/docs/installation.rst
+Documentation d'installation : https://github.com/PnX-SI/GeoPaysages/tree/master/docs/installation.md
 
 ## Contexte
 
-L'Observatoire photographique des paysages de Vanoise a été mis en place en 2006 pour suivre l'évolution des paysages au sein du Parc national de la Vanoise à travers des séries de photographies reconduites, sur des sites définis, selon le même cadrage. Les gardes-moniteurs assurent régulièrement les prises de vue.
-
-Le site internet initial de l'OPPV a été mis hors service mi-2016 en raison du changement de plateforme internet (mutualisation de tous les sites des Parcs nationaux). Ce site était articulé sur la carte interactive avec des accès multiples, par exemple les référence des sites, mots-clés paysagers etc. Il présentait 189 sites photographiques, dont 103 sont encore suivis aujourd'hui par reconductions régulières. Il y ades données photographiques et textuelles pour l'ensemble des sites photos.
+La première version de cet outil libre et générique a été développée en 2019 pour le Parc national de la Vanoise, par la société Natural Solutions.
 
-Un nouveau site internet grand public va être mis en oeuvre pour partager au plus grand nombre le travail effectué depuis la création de l'Observatoire photographique des paysages.
+Depuis, différentes évolutions ont été apportées par différentes structures utilisant cet outil.
 
-Le projet est porté par le Parc national de la Vanoise. Le site qui sera développé courant 2018 sera sous licence libre. Dans la même lignée que GeoNature, le projet sera générique et disponible pour les autres parcs nationaux et pour d'autres structures depuis ce repository. La prestation de développement par la société Natural Solutions va débuter courant mai 2018.
+L'Observatoire photographique des paysages de Vanoise a été mis en place en 2006 pour suivre l'évolution des paysages au sein du Parc national de la Vanoise à travers des séries de photographies reconduites, sur des sites définis, selon le même cadrage. Les gardes-moniteurs assurent régulièrement les prises de vue.
 
-A suivre...
+Le site internet initial de l'OPPV a été mis hors service mi-2016 en raison du changement de plateforme internet (mutualisation de tous les sites des Parcs nationaux). Ce site était articulé sur la carte interactive avec des accès multiples, par exemple les référence des sites, mots-clés paysagers etc. Il présentait 189 sites photographiques, dont 103 sont encore suivis aujourd'hui par reconductions régulières. Il y a des données photographiques et textuelles pour l'ensemble des sites photos.
 
 ![alt text](./docs/screenshot.jpg) 
 
@@ -25,8 +29,3 @@ A suivre...
 - CCTP 2017 : http://geonature.fr/documents/autres/geopaysages/2017-11-13-CDC-OPPV-PNV.pdf
 - Annexe CCTP 2017 : http://geonature.fr/documents/autres/geopaysages/2017-11-24-OPPV-PNV-ANNEXES-CDC.zip
 - Réflexion 2016 : http://geonature.fr/documents/autres/geopaysages/2016-11-OPP-reflexion.pdf
-
-## DEMO 
-
-http://5.196.209.137/
-

VERSION

@@ -1 +1 @@
-1.1.0
+1.2.0

backend/routes.py

@@ -1,5 +1,6 @@
 from flask import render_template, Blueprint, url_for, abort
 from sqlalchemy import text
+from sqlalchemy.sql.expression import desc
 import models
 import utils
 from config import DATA_IMAGES_PATH, IGN_KEY, COMPARATOR_VERSION, DEFAULT_SORT_SITES
@@ -55,7 +56,7 @@ def home():
         models.TPhoto.id_photo.in_(photo_ids)
     )
     dump_photos = photo_schema.dump(query_photos)
-
+    # WAHO tordu l'histoire!
     if len(sites_without_photo):
         sql_missing_photos_str = "select distinct on (id_site) * from geopaysages.t_photo where id_site IN (" + ",".join(sites_without_photo) + ") order by id_site, filter_date desc"
         sql_missing_photos = text(sql_missing_photos_str)
@@ -69,11 +70,15 @@ def home():
         models.Communes.code_commune.in_(code_communes)
     )
     dump_communes = communes_schema.dump(query_commune)
-
     for site in sites:
         id_site = site.get('id_site')
-        photo = next(photo for photo in dump_photos if (photo.get('t_site') == id_site))
-        site['photo'] = utils.getMedium(photo).get('output_url')
+        photo = None
+        try:
+            photo = next(photo for photo in dump_photos if (photo.get('t_site') == id_site))
+        except StopIteration:
+            pass
+        if photo:
+            site['photo'] = utils.getMedium(photo).get('output_url')
         site['commune'] = next(commune for commune in dump_communes if (commune.get('code_commune') == site.get('code_city_site')))
 
 
@@ -140,10 +145,15 @@ def gallery():
     for site in dump_sites:
         print('PHOTO')
         id_site = site.get('id_site')
-        photo = next(photo for photo in dump_photos if (photo.get('t_site') == id_site))
-        site['photo'] = utils.getThumbnail(photo).get('output_url')
+        photo = None
+        try:
+            photo = next(photo for photo in dump_photos if (photo.get('t_site') == id_site))
+        except StopIteration:
+            pass 
+        if photo:
+            site['photo'] = utils.getThumbnail(photo).get('output_url')
         site['ville'] = next(ville for ville in dump_villes if (ville.get('code_commune') == site.get('code_city_site')))
-    
+
     return render_template('gallery.html', sites=dump_sites)
 
 @main.route('/sites/<int:id_site>')
@@ -231,7 +241,7 @@ def site_photos_last(id_site):
 
     site = site[0]
 
-    get_photos_by_site = models.TPhoto.query.filter_by(id_site = id_site, display_gal_photo=True).order_by('filter_date desc').limit(1)
+    get_photos_by_site = models.TPhoto.query.filter_by(id_site = id_site, display_gal_photo=True).order_by(desc(models.TPhoto.filter_date)).limit(1)
     photos = photo_schema.dump(get_photos_by_site)
     photo=photos[0]
 
@@ -354,6 +364,34 @@ def sites():
         'subthemes': subthemes,
         'township': townships
     }
+
+    photo_ids = []
+    sites_without_photo = []
+    for site in sites:
+        photo_id = site.get('main_photo')
+        if photo_id:
+            photo_ids.append(site.get('main_photo'))
+        else:
+            sites_without_photo.append(str(site.get('id_site')))
+
+    query_photos = models.TPhoto.query.filter(
+        models.TPhoto.id_photo.in_(photo_ids)
+    )
+    dump_photos = photo_schema.dump(query_photos).data
+
+    if len(sites_without_photo):
+        sql_missing_photos_str = "select distinct on (id_site) * from geopaysages.t_photo where id_site IN (" + ",".join(sites_without_photo) + ") order by id_site, filter_date desc"
+        sql_missing_photos = text(sql_missing_photos_str)
+        missing_photos_result = db.engine.execute(sql_missing_photos).fetchall()
+        missing_photos = [dict(row) for row in missing_photos_result]
+        for missing_photo in missing_photos:
+            missing_photo['t_site'] = missing_photo.get('id_site')
+            dump_photos.append(missing_photo)
+
+    for site in sites:
+        id_site = site.get('id_site')
+        photo = next(photo for photo in dump_photos if (photo.get('t_site') == id_site))
+        site['photo'] = utils.getThumbnail(photo).get('output_url')
 
     def getItem(name, id):
         return next(item for item in dbs.get(name) if item.get('id') == id)
@@ -383,4 +421,4 @@ def about():
     if (not utils.isDbPagePublished('about')):
         return abort(404)
 
-    return render_template('db-page.html', name='about', page=utils.getDbPage('about'))
+    return render_template('db-page.html', name='about', page=utils.getDbPage('about'))

backend/static/css/comparator-v2.css

@@ -45,7 +45,7 @@
 }
 
 .page-site .app-comparator .mode-selector-label {
-  background: rgba(120, 190, 32, 0.8);
+  background: var(--color-secondary);
   color: #fff;
   padding: 6px 0 0 12px;
 }

backend/static/css/site.css

@@ -1,22 +1,29 @@
 .page-site {
-    --padding-x: 90px;
+  --padding-x: 90px;
 }
 
 .page-site #header {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
-.page-site:not(.with-testimonial) .text-collapse.text-collapsable.text-collapsed .target {
-    max-height: 220px;
+.page-site:not(.with-testimonial)
+  .text-collapse.text-collapsable.text-collapsed
+  .target {
+  max-height: 220px;
 }
 
 .page-site .page-content .map-wrapper {
-    height: 315px;
-    margin-bottom: 20px;
+  height: 315px;
+  margin-bottom: 20px;
 }
 
 @media (min-width: 992px) {
-    .page-site .info {
-        padding: 0 var(--padding-x);
-    }
-}
+  .page-site .info {
+    padding: 0 var(--padding-x);
+  }
+}
+
+button > .current-image {
+  border-bottom: solid !important;
+  font-weight: bold;
+}

backend/static/css/style.css

@@ -444,13 +444,19 @@ h1 .light, h2 .light, h3 .light, h4 .light, h5 .light, h6 .light {
 
 /* HEADER */
 
-header h1 {
+
+
+.header-title {
     text-transform: uppercase;
-    font-size: 1.5em;
     line-height: 20px;
+    text-align: center;
+  }
+
+.header-title h1 {
+font-size: 1.75em;
 }
 
-header h3 {
+header-title h3 {
     line-height: 20px;
 }
 

backend/static/js/comparator-v2.js

@@ -177,65 +177,58 @@ geopsg.comparator = (options) => {
     template: '#tpl-app-comparator-v2-selector',
     props: ['items', 'selectedItem', 'right'],
     data: () => {
+      // {id : this.right ? this.items[0].id : this.items[this.items.length -1].items}
+      const sharedData = {
+        dateFrom: null,
+        dateTo: null,
+        currentPage: 1,
+        perPage: 10,
+        pageItems: [],
+        nbFilteredItems: 0,
+        selectedStep: null,
+        currentItem: {},
+      };
       if (options.dbconf.comparator_date_format == 'year') {
-        return {
-          dateFrom: null,
-          dateTo: null,
-          currentPage: 1,
-          perPage: 10,
-          pageItems: [],
-          nbFilteredItems: 0,
-          steps: [{
-            label: "1 an",
-            value: 3600 * 24 * 365
-          }],
-          selectedStep: null
-        }
+        sharedData.steps = [{
+          label: "1 an",
+          value: 3600 * 24 * 365
+        }];
       }
-      if (options.dbconf.comparator_date_format == 'month') {
-        return {
-          dateFrom: null,
-          dateTo: null,
-          currentPage: 1,
-          perPage: 10,
-          pageItems: [],
-          nbFilteredItems: 0,
-          steps: [{
-            label: "1 mois",
-            value: 3600 * 24 * 30
-          }, {
-            label: "1 an",
-            value: 3600 * 24 * 365
-          }],
-          selectedStep: null
-        }
+      else if (options.dbconf.comparator_date_format == 'month') {
+        sharedData.steps = [{
+          label: "1 mois",
+          value: 3600 * 24 * 30
+        }, {
+          label: "1 an",
+          value: 3600 * 24 * 365
+        }]
+      } else {
+        sharedData.steps = [{
+          label: "0",
+          value: 0
+        }, {
+          label: "1 jour",
+          value: 3600 * 24
+        }, {
+          label: "1 semaine",
+          value: 3600 * 24 * 7
+        }, {
+          label: "1 mois",
+          value: 3600 * 24 * 30
+        }, {
+          label: "1 an",
+          value: 3600 * 24 * 365
+        }];
       }
-      else {
-        return {
-          dateFrom: null,
-          dateTo: null,
-          currentPage: 1,
-          perPage: 10,
-          pageItems: [],
-          nbFilteredItems: 0,
-          steps: [{
-            label: "0",
-            value: 0
-          }, {
-            label: "1 jour",
-            value: 3600 * 24
-          }, {
-            label: "1 semaine",
-            value: 3600 * 24 * 7
-          }, {
-            label: "1 mois",
-            value: 3600 * 24 * 30
-          }, {
-            label: "1 an",
-            value: 3600 * 24 * 365
-          }],
-          selectedStep: null
-        }
+      return sharedData;
+    },
+    created(){
+      // set current page at the end for right comparator
+      if(this.right) {
+        this.currentPage = Math.ceil(this.items.length / 10);
+        this.currentItem = this.items[this.items.length - 1];
+      } else {
+        this.currentItem = this.items[0];
       }
     },
     beforeMount() {
@@ -256,6 +249,9 @@ geopsg.comparator = (options) => {
       },
       currentPage(val) {
         this.setPageItems();
+      },
+      items: function(newV, oldV) {
+        console.log("items changes", newV);
       }
     },
     methods: {
@@ -269,19 +265,25 @@ geopsg.comparator = (options) => {
         if (itemIndex < 0) {
           itemIndex = this.filteredItems.length - 1;
         }
-        this.setSelectedItem(this.filteredItems[itemIndex]);
+        this.currentItem = this.filteredItems[itemIndex];
+        this.setSelectedItem(this.currentItem);
+        this.currentPage = Math.ceil((itemIndex +1) / 10);
+
       },
       onNextBtnClick() {
         const dateFrom = new Date(this.selectedItem.shot_on);
-        console.log(this.selectedStep.value)
         dateFrom.setSeconds(dateFrom.getSeconds() + (this.selectedStep.value || 1), 0);
         let itemIndex = this.searchDateFromIndex(this.filteredItems, dateFrom, 0, this.filteredItems.length - 1);
         if (itemIndex < 0) {
           itemIndex = 0;
         }
-        this.setSelectedItem(this.filteredItems[itemIndex]);
+        this.currentItem = this.filteredItems[itemIndex];
+        this.setSelectedItem(this.currentItem);
+        this.currentPage = Math.ceil((itemIndex +1) / 10);
+
       },
       onItemClick(item) {
+        this.currentItem = item;
         this.setSelectedItem(item);
       },
       setSelectedItem(item) {

backend/static/js/sites.js

@@ -179,7 +179,10 @@ geopsg.initSites = (options) => {
           let marker = L.marker(site.latlon)
           site.marker = marker
           markerText = site.name_site + '<br />' + site.ville.label
-          marker.bindPopup('<div class="img" style="background-image: url(' + site.photos[site.photos.length - 1].url + ');"></div><div class="title">' + markerText + '</div>', {
+          if (site.ref_site) {
+            markerText += '<br/>' + '(réf : ' + site.ref_site + ')'
+          }
+          marker.bindPopup('<div class="img" style="background-image: url(' + site.photo + ');"></div><div class="title">' + markerText + '</div>', {
             closeButton: false
           })
           marker.on('mouseover', (e) => {