From 79f3469df8a1f22b42a96f993bc3a2f6e5e4a88f Mon Sep 17 00:00:00 2001
From: Paul Bienkowski <pb@opatut.de>
Date: Wed, 27 Oct 2021 17:32:07 +0200
Subject: [PATCH] frontend: add MapPage and make OBS data vector tiles URL
 configurable

---
 frontend/config.dev.json                      |  3 +-
 frontend/config.example.json                  |  3 +-
 frontend/src/App.js                           |  8 ++++
 frontend/src/components/Page/Page.module.scss |  4 ++
 frontend/src/components/Page/index.tsx        |  6 +--
 frontend/src/config.ts                        |  3 +-
 frontend/src/index.js                         |  2 +
 frontend/src/pages/HomePage.tsx               | 19 ++++----
 frontend/src/pages/MapPage.module.scss        |  5 ++
 frontend/src/pages/MapPage.tsx                | 47 +++++++++++++++++++
 frontend/src/pages/index.js                   |  1 +
 11 files changed, 86 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/pages/MapPage.module.scss
 create mode 100644 frontend/src/pages/MapPage.tsx

diff --git a/frontend/config.dev.json b/frontend/config.dev.json
index 2130e5d..064a7b5 100644
--- a/frontend/config.dev.json
+++ b/frontend/config.dev.json
@@ -17,5 +17,6 @@
     "zoom": 15,
     "longitude": 7.8302,
     "latitude": 47.9755
-  }
+  },
+  "obsMapSource": "http://localhost:3002/data/v3.json"
 }
diff --git a/frontend/config.example.json b/frontend/config.example.json
index 4063eef..35a791f 100644
--- a/frontend/config.example.json
+++ b/frontend/config.example.json
@@ -17,5 +17,6 @@
     "zoom": 15,
     "longitude": 9.1797,
     "latitude": 48.7784
-  }
+  },
+  "obsMapSource": "http://api.example.com/tileserver/data/v3.json"
 }
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 4ef6842..a0e90ee 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -14,6 +14,7 @@ import {
   LoginRedirectPage,
   LogoutPage,
   NotFoundPage,
+  MapPage,
   SettingsPage,
   TrackEditor,
   TrackPage,
@@ -49,6 +50,10 @@ const App = connect((state) => ({login: state.login}))(function App({login}) {
             OpenBikeSensor
           </Link>
 
+          {config?.obsMapSource && <Link component={MenuItemForLink} to="/map" as="a">
+            Map
+          </Link>}
+
           <Link component={MenuItemForLink} to="/tracks" as="a">
             Tracks
           </Link>
@@ -76,6 +81,9 @@ const App = connect((state) => ({login: state.login}))(function App({login}) {
         <Route path="/" exact>
           <HomePage />
         </Route>
+        <Route path="/map" exact>
+          <MapPage />
+        </Route>
         <Route path="/tracks" exact>
           <TracksPage />
         </Route>
diff --git a/frontend/src/components/Page/Page.module.scss b/frontend/src/components/Page/Page.module.scss
index a367418..b678c6e 100644
--- a/frontend/src/components/Page/Page.module.scss
+++ b/frontend/src/components/Page/Page.module.scss
@@ -10,3 +10,7 @@
   margin-left: auto;
   margin-right: auto;
 }
+
+.fullScreen {
+  margin: none;
+}
diff --git a/frontend/src/components/Page/index.tsx b/frontend/src/components/Page/index.tsx
index 8c99fa9..245fdff 100644
--- a/frontend/src/components/Page/index.tsx
+++ b/frontend/src/components/Page/index.tsx
@@ -4,10 +4,10 @@ import {Container} from 'semantic-ui-react'
 
 import styles from './Page.module.scss'
 
-export default function Page({small, children}: {small?: boolean, children: ReactNode}) {
+export default function Page({small, children, fullScreen}: {small?: boolean, children: ReactNode, fullScreen?: boolean}) {
   return (
-    <main className={classnames(styles.page, small && styles.small)}>
-      <Container>{children}</Container>
+    <main className={classnames({page: true, small, fullScreen})}>
+      {fullScreen ? children : <Container>{children}</Container>}
     </main>
   )
 }
diff --git a/frontend/src/config.ts b/frontend/src/config.ts
index ba9d5ef..1d6854b 100644
--- a/frontend/src/config.ts
+++ b/frontend/src/config.ts
@@ -1,12 +1,13 @@
 import React from 'react'
 
-interface Config {
+export interface Config {
   apiUrl: string
   mapHome: {
     latitude: number
     longitude: number
     zoom: number
   }
+  obsMapSource?: string
 }
 
 async function loadConfig(): Promise<Config> {
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 204586d..73fea25 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -6,6 +6,8 @@ import 'semantic-ui-less/semantic.less'
 import './index.css'
 import App from './App'
 
+import 'maplibre-gl/dist/maplibre-gl.css'
+
 import {Provider} from 'react-redux'
 
 import store from './store'
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 46b7396..ad300b6 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -12,33 +12,32 @@ import {useConfig} from 'config'
 import {TrackListItem} from './TracksPage'
 import styles from './HomePage.module.scss'
 
-import 'ol/ol.css';
+import 'ol/ol.css'
 import {obsRoads} from '../mapstyles'
 import ReactMapGl from 'react-map-gl'
 
-function WelcomeMap() {
+function WelcomeMap({mapSource}: {mapSource: string}) {
+  const mapStyle = React.useMemo(() => obsRoads(mapSource), [mapSource])
   const config = useConfig()
-  const mapStyle = React.useMemo(() => obsRoads(), [])
   const [viewport, setViewport] = React.useState({
     longitude: 0,
     latitude: 0,
     zoom: 0,
-  });
+  })
 
   React.useEffect(() => {
-    if (config?.mapHome)  {
-    setViewport(config.mapHome)
+    if (config?.mapHome) {
+      setViewport(config.mapHome)
     }
   }, [config])
 
   return (
     <div className={styles.welcomeMap}>
-      <ReactMapGl mapStyle={mapStyle} width="100%" height="100%" onViewportChange={setViewport } {...viewport } />
+      <ReactMapGl mapStyle={mapStyle} width="100%" height="100%" onViewportChange={setViewport} {...viewport} />
     </div>
   )
 }
 
-
 function MostRecentTrack() {
   const track: Track | null = useObservable(
     () =>
@@ -68,12 +67,14 @@ function MostRecentTrack() {
 }
 
 export default function HomePage() {
+  const {obsMapSource: mapSource} = useConfig() || {}
+
   return (
     <Page>
       <Grid stackable>
         <Grid.Row>
           <Grid.Column width={10}>
-            <WelcomeMap />
+            {mapSource ?  <WelcomeMap {...{mapSource}} /> : null}
           </Grid.Column>
           <Grid.Column width={6}>
             <Stats />
diff --git a/frontend/src/pages/MapPage.module.scss b/frontend/src/pages/MapPage.module.scss
new file mode 100644
index 0000000..10e32db
--- /dev/null
+++ b/frontend/src/pages/MapPage.module.scss
@@ -0,0 +1,5 @@
+.mapContainer {
+  height: calc(100vh - 60px);
+  background: red;
+  position: relative;
+}
diff --git a/frontend/src/pages/MapPage.tsx b/frontend/src/pages/MapPage.tsx
new file mode 100644
index 0000000..bb98682
--- /dev/null
+++ b/frontend/src/pages/MapPage.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+// import {Grid, Loader, Header, Item} from 'semantic-ui-react'
+
+// import api from 'api'
+import {Page} from 'components'
+import {useConfig, Config} from 'config'
+
+import styles from './MapPage.module.scss'
+
+import 'ol/ol.css'
+import {obsRoads} from '../mapstyles'
+import ReactMapGl from 'react-map-gl'
+
+function BigMap({mapSource, config}: {mapSource: string ,config: Config}) {
+  const mapStyle = React.useMemo(() => obsRoads(mapSource), [mapSource])
+  const [viewport, setViewport] = React.useState({
+    longitude: 0,
+    latitude: 0,
+    zoom: 0,
+  })
+
+  React.useEffect(() => {
+    if (config?.mapHome) {
+      setViewport(config.mapHome)
+    }
+  }, [config])
+
+  return (
+    <div className={styles.mapContainer}>
+      <ReactMapGl mapStyle={mapStyle} width="100%" height="100%" onViewportChange={setViewport} {...viewport} />
+    </div>
+  )
+}
+
+export default function MapPage() {
+  const config = useConfig() || {}
+  if (!config) return null;
+  const {obsMapSource: mapSource} = config
+
+  if (!mapSource) return null;
+
+  return (
+    <Page fullScreen>
+      <BigMap {...{mapSource, config}} />
+    </Page>
+  )
+}
diff --git a/frontend/src/pages/index.js b/frontend/src/pages/index.js
index 5f5b013..070cbd9 100644
--- a/frontend/src/pages/index.js
+++ b/frontend/src/pages/index.js
@@ -1,6 +1,7 @@
 export {default as HomePage} from './HomePage'
 export {default as LoginRedirectPage} from './LoginRedirectPage'
 export {default as LogoutPage} from './LogoutPage'
+export {default as MapPage} from './MapPage'
 export {default as NotFoundPage} from './NotFoundPage'
 export {default as SettingsPage} from './SettingsPage'
 export {default as TrackEditor} from './TrackEditor'