QMAPS-759 display POI image on top right if available

README.md

@@ -82,7 +82,7 @@ It will run chrome headless test suite with a mapbox-gl minimalist mock. The con
 
 *note on mapbox-gl mock*: We include out mapbox-gl mock fork to emulate mapbox-gl behaviour with the advanced support of mocked event & poi.
 
-**hint** : When you debug or add new tests, you may want to launch puppeteer in non headless mode and keep the browser open.
+**hint** : When you debug or add new tests, you may want to launch puppeteer in non headless mode and keep the browser open by setting the environment variable `headless` to `false`.
 
 ### Benchmark
 

config/constants.yml

@@ -70,8 +70,6 @@ pois:
       closed:
         msg: _('Closed')
         color: '#8c0212'
-- apiName: phone
-  panelName: phone
 - apiName: website
   panelName: website
 - apiName: wikipedia
@@ -101,6 +99,8 @@ pois:
   panelName: internet_access
 - apiName: contact
   panelName: contact
+- apiName: images
+  panelName: images
 
 # Map
 map:

src/adapters/poi/idunn_poi.js

@@ -25,14 +25,22 @@ export default class IdunnPoi extends Poi {
     this.localName = rawPoi.local_name
     this.address = IdunnPoi.getAddress(rawPoi)
     this.bbox = rawPoi.geometry.bbox
+
+    if(this.blocks) {
+      let imagesBlock = this.blocks.find((b) => b.type === 'images')
+      if (imagesBlock && imagesBlock.images.length > 0){
+        this.topImageUrl = imagesBlock.images[0].url
+      }
+      this.phoneBlock = this.blocks.find((b) => b.type === 'phone')
+    }
   }
 
   getInputValue() {
     switch (this.type) {
       case 'address':
       case 'street':
         return this.alternativeName
-      default :
+      default:
         return this.name
     }
   }
@@ -50,8 +58,7 @@ export default class IdunnPoi extends Poi {
     } catch (err) {
       if(err === 404) {
         return
-      }
-      else {
+      } else {
         Error.sendOnce(
           'idunn_poi', 'poiApiLoad',
           `unknown error getting idunn poi reaching ${url} with options ${JSON.stringify(requestParams)}`,

src/adapters/poi/latlon_poi.js

@@ -35,9 +35,8 @@ export default class LatLonPoi extends Poi {
         let latLng = {lat : parseFloat(lat), lng : parseFloat(lng)}
         if(urlData[LABEL_POSITION]) {
           return Promise.resolve(new LatLonPoi(latLng, ExtendedString.htmlEncode(urlData[LABEL_POSITION])))
-        } else {
-          return Promise.resolve(new LatLonPoi(latLng))
         }
+        return Promise.resolve(new LatLonPoi(latLng))
       }
     } else {
       let urlData = urlParam.match(/^(.*?)(@(.*))?$/)

src/adapters/poi/map_poi.js

@@ -3,6 +3,6 @@ import Poi,{POI_TYPE} from "./poi";
 export default class MapPoi extends Poi {
   constructor(feature, lngLat) {
     let id = feature.properties.global_id
-    super(id,  feature.name, null, POI_TYPE, lngLat)
+    super(id, feature.name, null, POI_TYPE, lngLat)
   }
 }

src/panel/poi_bloc/images_panel.js

@@ -0,0 +1,10 @@
+import ImagesPanelView from '../../views/poi_bloc/images.dot'
+import Panel from "../../libs/panel";
+
+export default class ImagesPanel {
+    constructor(block){
+      this.panel = new Panel(this, ImagesPanelView)
+      this.name = block.name
+      this.block = block
+    }
+}

src/panel/poi_bloc/poi_bloc_container.js

@@ -27,14 +27,14 @@ PoiBlocContainer.getBlock = function(name) {
   return PoiBlocContainer.blockComponents[name]
 }
 
-PoiBlocContainer.setBock = function(block) {
+PoiBlocContainer.setBlock = function(block) {
   let blockComponent = PoiBlocContainer.blockComponents[block.type]
   return new blockComponent.poiBlockConstructor.default(block, PoiBlocContainer.poi, blockComponent.options)
 }
 
 PoiBlocContainer.renderBlock = function (block) {
   let blockComponent = getBlockComponent(block)
-  if(blockComponent) {
+  if (blockComponent) {
     return blockComponent.render()
   } else {
     console.log(`info : component missing (${block.type})`)
@@ -46,9 +46,8 @@ PoiBlocContainer.toString = function (blocks) {
     let blockComponent = getBlockComponent(block)
     if(blockComponent) {
       return blockComponent.toString()
-    } else {
-       return ''
     }
+    return ''
   }).join(' - ')
 }
 

src/panel/poi_panel.js

@@ -41,15 +41,13 @@ function PoiPanel(sharePanel) {
     if (this.poi) {
       this.poi.stored = await isPoiFavorite(this.poi)
       this.panel.update()
-      endLoad()
     }
   })
 
   store.eventTarget.addEventListener('poi_added', async () => {
     if (this.poi && !this.poi.stored) {
       this.poi.stored = await isPoiFavorite(this.poi)
       this.panel.update()
-      endLoad()
     }
   })
 }
@@ -124,7 +122,6 @@ PoiPanel.prototype.setPoi = async function (poi, options = {}) {
   this.sceneState.setPoiId(this.poi.id)
   await this.panel.update()
   await this.minimalHourPanel.set(this.poi)
-  endLoad()
 }
 
 PoiPanel.prototype.center = function() {
@@ -153,15 +150,18 @@ PoiPanel.prototype.restore = async function(urlShard) {
     if (idSlugMatch && window.hotLoadPoi) {
       let id = idSlugMatch[1]
       await this.restorePoi(id)
-      endLoad()
     }
   }
 }
 
 PoiPanel.prototype.showDetail = function() {
   this.card = false
   this.panel.update()
-  endLoad()
+}
+
+PoiPanel.prototype.backToSmall = function() {
+  this.card = true
+  this.panel.update()
 }
 
 PoiPanel.prototype.backToFavorite = function() {
@@ -186,16 +186,4 @@ async function isPoiFavorite(poi) {
   return false
 }
 
-/* loadable */
-
-function endLoad() {
-  let loadingPanel = document.querySelector('#poi-loading-panel')
-  loadingPanel.style.animation = 'disappear 1s forwards'
-
-  setTimeout(() => {
-    let loadingPanel = document.querySelector('#poi-loading-panel')
-     loadingPanel.style.display = 'none'
-  }, 200)
-}
-
 export default PoiPanel

src/scss/includes/app.scss

@@ -81,8 +81,8 @@ BODY {
 
   .favorite_poi_panel__container {
     position: absolute;
-    bottom: 0;
-    max-height: calc(100vh - 150px);
+    height: 100%;
+    top: 75px;
   }
 
   .map_container .map_control__scale_attribute_container {

src/scss/includes/osm_contribute.scss

@@ -1,7 +1,6 @@
 .osm_contribute {
-  width: calc(100% - 2 * 28px);
+  width: 100%;
   height: 55px;
-  margin: 16px 0 0 25px;
   border: solid 1px $separator_color;
   @include card_radius();
 }
@@ -37,7 +36,7 @@
 
 .osm_contribute__link:hover {
   text-decoration: none;
-  border-bottom: 1px solid $secondary_text_clear;
+  color: $primary_text;
 }
 
 .osm_contribute__icon {