#106 redesign statusbar, routingInfo component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "geop",
-  "version": "1.5.5",
+  "version": "1.5.6",
   "description": "Estonian geocaching game",
   "main": "index.js",
   "scripts": {

src/geop/Component.js

@@ -1,5 +1,5 @@
 class Component {
-  constructor (target) {
+  constructor (target, opts = {}) {
     // set target and element
     this.target = target
     this.el = null

src/geop/Geop.js

@@ -13,6 +13,7 @@ import Measure from 'Components/measure/Measure'
 import Tooltip from 'Components/featureinfo/Tooltip'
 import Popup from 'Components/featureinfo/Popup'
 import Routing from 'Components/routing/Routing'
+import Navigation from 'Components/routing/Navigation'
 import './Geop.styl'
 
 class Geop extends Component {
@@ -40,7 +41,8 @@ class Geop extends Component {
       measure: getState('app/measureTool') && new Measure(this.target),
       tooltip: getState('app/tooltip') && new Tooltip(this.target),
       popup: getState('app/featureInfo') && new Popup(this.target),
-      routing: getState('app/routing') && new Routing(this.target)
+      routing: getState('app/routing') && new Routing(this.target),
+      navigation: getState('app/routing') && new Navigation(this.target)
     }
     this.components.map.init()
   }

src/geop/components/bookmark/Bookmark.js

@@ -12,24 +12,11 @@ import JSONP from 'jsonpack'
 import QRious from 'qrious'
 import './Bookmark.styl'
 
-/**
- * handle jsonstore.io
- * Get all: https://www.jsonstore.io/4d04eefd7ed4c19866cefcf038d0bebe95786bf33f0e60fdfbd8a554e6ae2670/
- * Delete all: copy these to console and run
- * fetch('https://www.jsonstore.io/4d04eefd7ed4c19866cefcf038d0bebe95786bf33f0e60fdfbd8a554e6ae2670/')
- *   .then(function(response){return response.json() })
- *   .then(function(data) { window.jsonstoredata = data });
- * Object.keys(jsonstoredata.result).forEach(key => {
- *   fetch('https://www.jsonstore.io/4d04eefd7ed4c19866cefcf038d0bebe95786bf33f0e60fdfbd8a554e6ae2670/', {
- *     method: 'DELETE'
- *   })
- * })
- */
 class Bookmark extends Component {
   constructor (target) {
     super(target)
     this.el = $(`
-      <div class="btn-group float-right" id="bookmark"></div>
+      <div class="btn-group"></div>
     `)
     this.modal = $('#modal_bookmark')
     this.state = {

src/geop/components/mouseposition/MousePosition.js

@@ -57,7 +57,7 @@ class MousePosition extends Component {
   constructor (target) {
     super(target)
     this.el = $(`
-      <span id="mouse-position" class="mouse-position float-left d-none d-sm-block"></span>
+      <span class="mouse-position"></span>
     `)
     this.animationEl = $(`
       <svg width="20" height="20"></svg>`)
@@ -122,7 +122,6 @@ class MousePosition extends Component {
       </div>
       <button type="button" class="btn btn-link copy float-left">
         <i class="far fa-clone"></i>
-        <span>${coordFormats[this.state.format].srname}</span>
       </button>
     `)
     this.el.on('click', '.lock', e => {
@@ -141,7 +140,6 @@ class MousePosition extends Component {
       this.state.control.setCoordinateFormat(coordFormats[this.state.format].coordinateFormat)
       this.el.find('a[data-format] i').removeClass('fa-dot-circle').addClass('fa-circle')
       $(e.currentTarget).find('i').removeClass('fa-circle').addClass('fa-dot-circle')
-      this.el.find('button.copy span').html(coordFormats[this.state.format].srname)
     })
     if (!this.state.control) {
       this.state.control = new MousePositionControl({

src/geop/components/mouseposition/MousePosition.styl

@@ -5,7 +5,7 @@
   to
     r: 10px
     opacity: 0
-#mouse-position
+#mouseposition
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
   color: white
   div.coords

src/geop/components/routing/Navigation.js

@@ -7,22 +7,13 @@ import { getDistance } from 'ol/sphere'
 import { toLonLat } from 'ol/proj'
 import Feature from 'ol/Feature'
 import LineString from 'ol/geom/LineString'
-import $ from 'jquery'
-import './Navigation.styl'
 
 class Navigation extends Component {
   constructor (target) {
     super(target)
-    this.el = $(`<div class="text-center d-none" id="navigation">
-      <i class="fas fa-location-arrow"></i>
-      <span></span>
-      <button class="btn btn-link">
-        <i class="fas fa-times"></i>
-      </button>
-    </div>`)
+    this.el = null
     this.state = {
       active: false,
-      hide: target.find('#mouse-position, #scale-line, #bookmark'),
       to: null,
       route: new Feature(new LineString([]))
     }
@@ -32,7 +23,6 @@ class Navigation extends Component {
         width: 1
       }
     }))
-    this.create()
     onchange('navigate/to', (feature) => {
       if (feature) {
         this.activate(feature)
@@ -46,39 +36,27 @@ class Navigation extends Component {
       }
     })
   }
-  render () {
-    this.el.on('click', 'button', e => {
-      this.deactivate()
-    })
-  }
   update () {
     // calculate distance from current location to feature
     const from = getState('map/geolocation/position')
     const to = this.state.to.getGeometry().getCoordinates()
     const angle = getBearing(from, to)
     const distance = getDistance(toLonLat(from), toLonLat(to))
-    this.el.find('span').html(`
+    setState('routing/info', `
       ${formatLength(null, distance, [0, 1])}
       <i>&middot;</i> ${Math.round(angle)}&deg;
     `)
     this.state.route.getGeometry().setCoordinates([from, to])
   }
   activate (feature) {
-    this.state.hide.attr('style', 'display: none !important')
-    this.el.removeClass('d-none')
     this.state.to = feature
     getLayer().getSource().addFeature(this.state.route)
     this.state.active = true
     this.update()
   }
   deactivate () {
-    this.state.hide.removeAttr('style')
-    this.el.addClass('d-none')
-    this.el.find('span').html('')
-    getLayer().getSource().clear()
+    // clear()
     this.state.route.getGeometry().setCoordinates([])
-    // context menu items reset
-    setState('routing/stops', [])
     this.state.active = false
   }
 }

src/geop/components/routing/Routing.js

@@ -1,7 +1,6 @@
 import Component from 'Geop/Component'
 import OSRMProvider from './OSRM'
 import OpenRouteService from './OpenRouteService'
-import Alert from 'Components/statusbar/Alert'
 import { apiUrls } from 'Conf/settings'
 import { getState, setState, onchange } from 'Utilities/store'
 import { t } from 'Utilities/translate'
@@ -22,7 +21,6 @@ const state = {
   to: null
 }
 let routeLayer = null
-const alert = new Alert()
 
 class Routing extends Component {
   constructor (target) {
@@ -67,7 +65,10 @@ class Routing extends Component {
           closeOnClick: true,
           onBtnClick: (e, coord, feature) => {
             e.preventDefault()
-            alert.close()
+            clear()
+            setState('routing/stops', [])
+            setState('routing/info', null)
+            setState('navigate/to', null)
           }
         }
       }
@@ -119,24 +120,19 @@ class Routing extends Component {
       })
     }
   }
-  clear () {
-    clear()
-  }
 }
 
-function clear () {
+export function clear () {
   state.from = null
   state.to = null
   if (routeLayer) {
     routeLayer.setMap(null)
     routeLayer.getSource().clear()
     routeLayer = null
   }
-  setState('routing/stops', [])
-  setState('navigate/to', null)
 }
 
-export function findRoute (coords, openAlert) {
+export function findRoute (coords, updateInfo = false) {
   if (routeLayer && routeLayer.getSource().getFeatures().length) {
     routeLayer.getSource().clear()
   }
@@ -152,7 +148,7 @@ export function findRoute (coords, openAlert) {
     }
     provider.directions(coordinates)
       .then(route => {
-        alert.close()
+        clear()
         if (route) {
           createRouteLayer()
           const routeCoords = route.getGeometry().getCoordinates()
@@ -171,12 +167,12 @@ export function findRoute (coords, openAlert) {
               route.set('distance', distance)
             }
             route.set('bearing', angle)
-            if (openAlert) {
-              alert.open(`<b>${t('Directions')}</b> ${getState('routing/infoFromRoute') ? '' : ` - ${t('As crow flies')}`}<br>
+            if (updateInfo) {
+              setState('routing/info', `<b>${t('Directions')}</b> ${getState('routing/infoFromRoute') ? '' : ` - ${t('As crow flies')}`}
                 ${formatLength(null, route.get('distance'), [0, 1])}
                 <i>&middot;</i> ${Math.round(route.get('bearing'))}&deg;
                 ${getState('routing/infoFromRoute') ? `<i>&middot;</i> ${formatTime(route.get('duration'), 'seconds')}` : ''}
-              `, () => { clear() })
+              `)
             }
             resolve(route)
           } else {

src/geop/components/routing/RoutingInfo.js

@@ -0,0 +1,56 @@
+import Component from 'Geop/Component'
+import { setState, onchange } from 'Utilities/store'
+import { clear } from './Routing'
+import $ from 'jquery'
+import './RoutingInfo.styl'
+
+class Navigation extends Component {
+  constructor (target, opts) {
+    super(target, opts)
+    this.id = 'routinginfo'
+    this.el = $(`<span class="text-center d-none">
+      <i class="fas fa-location-arrow"></i>
+      <span></span>
+      <button class="btn btn-link">
+        <i class="fas fa-times"></i>
+      </button>
+    </span>`)
+    this.state = {
+      active: false,
+      prev: null
+    }
+    this.toggleFn = opts.toggle
+    this.create()
+    onchange('routing/info', data => {
+      if (!this.state.active && data) {
+        this.activate()
+      }
+      if (!data) {
+        this.deactivate()
+      } else {
+        this.el.find('span').html(data)
+      }
+    })
+  }
+  render () {
+    this.el.on('click', 'button', e => {
+      clear()
+      setState('routing/stops', [])
+      setState('routing/info', null)
+      setState('navigate/to', null)
+    })
+  }
+  activate (feature) {
+    this.state.prev = this.toggleFn(this.id)
+    this.el.removeClass('d-none')
+    this.state.active = true
+  }
+  deactivate () {
+    this.toggleFn(this.state.prev)
+    this.el.addClass('d-none')
+    this.el.find('span').html('')
+    this.state.active = false
+  }
+}
+
+export default Navigation

src/geop/components/routing/Navigation.styl → src/geop/components/routing/RoutingInfo.styl

@@ -1,4 +1,4 @@
-#navigation
+#routinginfo
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
   color: white
   margin-top 6px

src/geop/components/scaleline/ScaleLine.js

@@ -1,13 +1,12 @@
 import Component from 'Geop/Component'
 import { getState } from 'Utilities/store'
 import ScaleLineControl from 'ol/control/ScaleLine'
-import $ from 'jquery'
 import './ScaleLine.styl'
 
 class ScaleLine extends Component {
   constructor (target) {
     super(target)
-    this.el = $(`<span class="float-right" id="scale-line"></span>`)
+    this.el = target
     this.state = {
       control: null
     }

src/geop/components/scaleline/ScaleLine.styl

@@ -1,4 +1,4 @@
-#scale-line .ol-scale-line
+#scaleline .ol-scale-line
   position: relative
   background: transparent
   bottom: -8px

src/geop/components/screen/FullScreen.js

@@ -5,24 +5,21 @@ import $ from 'jquery'
 class FullScreen extends Component {
   constructor (target) {
     super(target)
-    this.el = $(`<div class="btn-group float-right" id="fullscreen"></div>`)
+    this.el = $(`<button type="button"
+      title="${t('Toggle fullscreen')}"
+      disabled
+      class="btn btn-secondary">
+      <i class="fa fa-expand-arrows-alt"></i>
+    </button>`)
     this.state = {
       active: false
     }
     this.create()
   }
   render () {
-    this.el.html(`
-      <button type="button"
-        title="${t('Toggle fullscreen')}"
-        disabled
-        class="btn btn-secondary">
-        <i class="fa fa-expand-arrows-alt"></i>
-      </button>
-    `)
     if (this.test()) {
-      this.el.find('button').prop('disabled', false)
-      this.el.on('click', 'button', e => {
+      this.el.prop('disabled', false)
+      this.el.on('click', e => {
         e.preventDefault()
         this.toggle()
       })
@@ -56,10 +53,10 @@ class FullScreen extends Component {
       document.mozFullScreenElement ||
       document.webkitFullscreenElement) {
       this.state.active = true
-      this.el.find('button').addClass('active')
+      this.el.addClass('active')
     } else {
       this.state.active = false
-      this.el.find('button').removeClass('active')
+      this.el.removeClass('active')
     }
   }
   on () {