Merge pull request #119 from dymajo/react-native-web

New UI

Author: mjdavidson

.babelrc

@@ -6,7 +6,8 @@
         "modules": false
       }
     ],
+    "stage-2",
     "react"
   ],
-  "plugins": ["transform-class-properties"]
-}
+  "plugins": ["lodash", "react-native-web"]
+}

dist/icons/cablecar.svg

@@ -1,22 +1,20 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { BrowserRouter } from 'react-router-dom'
-import { iOS } from './models/ios.js'
+import { Router } from 'react-router-dom'
 
-import Index from './views/index.jsx'
+import { UiStore } from './stores/uiStore.js'
 
-import injectTapEventPlugin from 'react-tap-event-plugin'
-injectTapEventPlugin()
+import Index from './views/shell/index.jsx'
 
 import smoothscroll from 'smoothscroll-polyfill'
 smoothscroll.polyfill()
 
 class App extends React.Component {
   render() {
     return (
-      <BrowserRouter>
+      <Router history={UiStore.customHistory}>
         <Index />
-      </BrowserRouter>
+      </Router>
     )
   }
 }
@@ -33,7 +31,7 @@ document.addEventListener('DOMContentLoaded', function(event) {
 let startApp = function() {
   window.defaultContent = [
     window.location.pathname,
-    (document.querySelector('.default-container') || {}).innerHTML || null
+    (document.querySelector('.default-container') || {}).innerHTML || null,
   ]
   ReactDOM.render(<App />, document.getElementById('app'))
 }

dist/icons/close.svg

@@ -0,0 +1,86 @@
+import local from '../../local'
+
+export class LineData {
+  constructor(props) {
+    this.region = props.region || null
+    this.line_id = props.line_id || null
+    this.shape_id = props.shape_id || null
+    this.trip_id = props.trip_id || null
+  }
+  getMeta() {
+    return new Promise((resolve, reject) => {
+      if (this.region === null || this.line_id === null) {
+        return reject('Requires both region and line_id to be set.')
+      }
+      const line = encodeURIComponent(this.line_id)
+      fetch(`${local.endpoint}/${this.region}/line/${line}`)
+        .then(response => {
+          response.json().then(data => {
+            resolve(data)
+          })
+        })
+        .catch(reject)
+    })
+  }
+  getShape() {
+    return new Promise((resolve, reject) => {
+      if (this.region === null || this.shape_id === null) {
+        return reject('Requires both region and shape_id to be set.')
+      }
+      const shape = encodeURIComponent(this.shape_id)
+      fetch(`${local.endpoint}/${this.region}/shapejson/${shape}`)
+        .then(response => {
+          response.json().then(data => {
+            const bounds = {
+              lon_min: data.coordinates[0][0],
+              lon_max: data.coordinates[0][0],
+              lat_min: data.coordinates[0][1],
+              lat_max: data.coordinates[0][1],
+            }
+            data.coordinates.forEach(item => {
+              if (item[0] < bounds.lon_min) {
+                bounds.lon_min = item[0]
+              }
+              if (item[0] > bounds.lon_max) {
+                bounds.lon_max = item[0]
+              }
+              if (item[1] < bounds.lat_min) {
+                bounds.lat_min = item[1]
+              }
+              if (item[1] > bounds.lat_max) {
+                bounds.lat_max = item[1]
+              }
+            })
+            data.bounds = bounds
+            data.center =
+              data.coordinates[Math.round(data.coordinates.length / 2)]
+            resolve(data)
+          })
+        })
+        .catch(reject)
+    })
+  }
+  getStops() {
+    return new Promise((resolve, reject) => {
+      if (this.region === null) {
+        return reject('Requires region to be set.')
+      }
+
+      let url = `${local.endpoint}/${this.region}/stops/`
+      if (this.trip_id !== null) {
+        url += `trip/${encodeURIComponent(this.trip_id)}`
+      } else if (this.shape_id !== null) {
+        url += `shape/${encodeURIComponent(this.shape_id)}`
+      } else {
+        return reject('Requires shape_id or trip_id to be set.')
+      }
+      fetch(url)
+        .then(response => {
+          response.json().then(data => {
+            resolve(data)
+          })
+        })
+        .catch(reject)
+    })
+  }
+}

dist/icons/locate-2.svg

@@ -11,9 +11,10 @@ route_type_map.set(5, 'cablecar')
 route_type_map.set(6, 'gondola')
 route_type_map.set(7, 'funicular')
 route_type_map.set(-1, 'parkingbuilding')
+route_type_map.set(-2, 'bike')
 
 const style_map = {
-  'normal': new Map(),
+  normal: new Map(),
   'au-syd': new Map(),
 }
 style_map.normal.set('default', [30, 49])
@@ -22,11 +23,12 @@ style_map.normal.set('0-selection', [24, 24])
 style_map.normal.set('2-selection', [28, 28])
 style_map.normal.set('4-selection', [28, 28])
 
-style_map.normal.set(-1, [28,28])
-style_map.normal.set(2,[28, 34])
-style_map.normal.set(3,[26, 32])
-style_map.normal.set(4,[28, 34])
-style_map.normal.set(5,[28, 34])
+style_map.normal.set(-1, [28, 28])
+style_map.normal.set(-2, [26, 32])
+style_map.normal.set(2, [28, 34])
+style_map.normal.set(3, [26, 32])
+style_map.normal.set(4, [28, 34])
+style_map.normal.set(5, [28, 34])
 
 style_map['au-syd'].set('default', [30, 30])
 style_map['au-syd'].set(0, [40, 40])
@@ -39,7 +41,6 @@ style_map['au-syd'].set('2-selection', [40, 40])
 style_map['au-syd'].set('4-selection', [40, 40])
 
 class iconhelper {
-
   getClassName(variant, prefix) {
     if (variant !== null && prefix === 'normal') {
       return 'currentSelectionIcon larger'
@@ -59,20 +60,24 @@ class iconhelper {
     const icon = {}
     let variantfile = ''
     let filetype = '.svg'
-    
+
     if (typeof style_map[prefix] === 'undefined') {
       prefix = 'normal'
     }
     if (prefix !== 'normal' && variant === 'selection') {
       variantfile = '-selection'
     }
 
-
-    icon.iconUrl = '/icons/' + prefix + '/' + this.getFileName(route_type, prefix, variant) + variantfile + filetype
+    icon.iconUrl =
+      '/icons/' +
+      prefix +
+      '/' +
+      this.getFileName(route_type, prefix, variant) +
+      variantfile +
+      filetype
 
     icon.iconSize = this.getSize(route_type, prefix, variant)
 
-    
     icon.className = this.getClassName(variant, prefix)
     return new Icon(icon)
   }
@@ -93,9 +98,9 @@ class iconhelper {
     }
     return style_map[prefix].get('default')
   }
-  getRouteType(route_type){
+  getRouteType(route_type) {
     return route_type_map.get(route_type)
-  } 
+  }
 }
 
-export default iconhelper
+export default iconhelper