basic set up for login & map

ref #2 ref #3
posm · Sep 9, 2018 · de7ac91 · de7ac91
1 parent 9c3fc26
commit de7ac91
Show file tree

Hide file tree

Showing 16 changed files with 562 additions and 5,300 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,6 @@
 /node_modules
 /.vscode
-/dist
+/disr
+
+*.log
+
diff --git a/README.md b/README.md
@@ -0,0 +1,15 @@
+### develop
+
+```
+nvm use
+yarn install
+yarn start:dev
+```
+
+
+
+### test
+
+```
+yarn test
+```
diff --git a/dist/bundle.js.map b/dist/bundle.js.map
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "d3-ease": "^1.0.5",
     "d3-request": "^1.0.6",
     "d3-transition": "^1.1.3",
+    "mapbox-gl": "^0.49.0-beta.1",
     "uuid": "^3.3.2"
   },
   "devDependencies": {

diff --git a/src/handler/index.js b/src/handler/index.js
@@ -6,16 +6,9 @@ let store = Store.getInstance();
 const singleton = Symbol();
 const singletonEnforcer = Symbol();
 
-
-const _updateLogin = (context) => {
-    context.dispatch('login');
-    let loginUpdater = (login) => {
-        return (state) => {
-            state = Object.assign({}, state);
-            state.loggedIn = login;
-        }
-    }
-    context.on('login', (login) => store.update(loginUpdater(login)));
+const _updateLogin = (login) => {
+    store.update('loggedIn', login);
+    Handler.getInstance().call(login ? 'loggedIn' : 'loginFailed');
 }
 
 class Handler {
@@ -33,23 +26,35 @@ class Handler {
 
     init() {
         if (!this._dispatcher) {
-            this._dispatcher = d3_dispatch
+            this._dispatcher = null
         }
-        _updateLogin(this)
-    }
 
-    call(args) {
-        this._dispatcher.call(...args);
+        if (!this._events) {
+            this._handlersMap = {
+                'login': _updateLogin,
+                'loggedIn': () => {},
+                'loginFailed': () => {}
+            }
+
+            this._events = Object.keys(this._handlersMap);
+            this._dispatcher = d3_dispatch.apply(d3_dispatch, this._events);
+
+            for (let i = 0; i < this._events.length; i++) {
+                const eventType = this._events[i];
+                this.on(eventType, this._handlersMap[eventType]);
+            }
+
+        }
     }
 
-    dispatch(args) {
-        this._dispatcher.dispatch(...args);
+    call(_) {
+        this._dispatcher.call.apply(this._dispatcher, arguments);
     }
 
-    on(args) {
-        this._dispatcher.on(...args);
+    on(_) {
+        this._dispatcher.on.apply(this._dispatcher, arguments)
     }
 }
 
-export default Handler
+export default Handler;
 
diff --git a/src/index.html b/src/index.html
@@ -3,8 +3,8 @@
 	<head>
 		<meta charset="UTF-8">
 		<title>posm-paths-viewer</title>
-		<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-		rel="stylesheet">	
+		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />	
+		<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.css' rel='stylesheet' />
 	</head>
 	<body>
 	</body>

diff --git a/src/store/index.js b/src/store/index.js
@@ -36,8 +36,10 @@ class Store {
         }
     }
 
-    update(updater) {
-        updater()(this._state);
+    update(_) {
+        const key = arguments[0], value = arguments[1];
+        this._state = Object.assign({}, this._state);
+        this._state[key] = value;
     }
 }
 

diff --git a/src/styles/main.css b/src/styles/main.css
@@ -1,29 +1,35 @@
-* {
+html,
+body {
     margin: 0;
     padding: 0;
 }
 
 body {
     display: flex;
-    justify-content: center;
-    align-items: center;
+    flex-direction: column;
+}
+
+.row {
+    display: flex;
 }
 
 .disabled {
     display: none;
 }
 
-.nav {
-    width: 100%;
-    height: 8vh;
-    display: flex;
+#nav {
     align-items: center;
     background: #eee;
     border-bottom: 1px solid #000000;
+    height: 5vh;
+}
+
+#nav * { 
+    margin: 10px; 
 }
 
 #map {
-    width: 100%;
+    height: 95vh;
 }
 
 .control {
@@ -32,13 +38,26 @@ body {
     padding: 0 10px;
 }
 
-.control li {
+.button {
     margin: 5px 10px;
     padding: 10px 20px;
     border: 1px solid #000000;
     border-radius: 4px;
 }
 
-.control li:hover {
+.button:hover {
     background: #696969;
+}
+
+.button-long {
+    padding: 10px 50px;
+}
+
+.alert {
+    padding: 4px 8px;
+    border-radius: 4px;
+}
+
+.alert-warning {
+    background: #f1c2c2;
 }
diff --git a/src/styles/modal.css b/src/styles/modal.css
@@ -4,13 +4,14 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    height: 400px;
+    height: 300px;
     max-height: 100%;
     width: 400px;
     max-width: 100%;
     background: white;
-    box-shadow: 0 0 60px 20px rgba(0,0,0,0.8);
+    box-shadow: 0 0 4px 2px rgba(0,0,0,0.2);
     z-index: 100;
+    border-radius: 10px;
 
 }
 
@@ -20,8 +21,9 @@
     left: 0;
     width: 100%;
     height: 100%;
-    padding: 20px 50px;
     overflow: auto;
+    display: flex;
+    flex-direction: column;
 }
 
 .modal-overlay {
@@ -32,3 +34,39 @@
     height: 100%;
     z-index: 50;
 }
+
+.login-input {
+    margin: 10px 0;
+}
+
+.login-input * {
+    margin: 10px;
+}
+
+.login-input-text {
+    max-width: 175px;
+}
+
+#login-username {
+    margin-top: 10%;
+}
+
+#login-buttons {
+    list-style: none;
+    display: flex;
+}
+
+#login-controls {
+    margin: auto;
+    margin-top: 20px;
+}
+
+#login-fail {
+    margin-top: 15px;
+}
+
+.login-component {
+    margin-left: 10px;
+    margin-right: 10px;
+    text-align: center;
+}
diff --git a/src/views/login.js b/src/views/login.js
@@ -4,24 +4,35 @@ import {
 } from 'd3';
 
 import Handler from '../handler';
+import Store from '../store';
 import css from '../styles/modal.css';
 
 export function loginUi (context) {
     const body = d3_select('body');
     const handler = Handler.getInstance();
-
-    d3_dispatch('loggedIn')
-
+
     function doLogin() {
         // place where interaction w/rails app will go
-        handler.call('loggedIn', true);
+        handler.call('login', Store.getInstance(), true);
     }
 
     function doClose() {
         d3_selectAll('.modal-overlay').remove()
         d3_selectAll('.modal').remove()
     }
 
+    function doLoginWarn () {
+        if (d3_select('#login-fail').empty()) {
+            d3_select('.modal-content')
+                .append('div').attr('class', 'login-component').attr('id', 'login-fail')
+                .append('span').attr('class', 'alert alert-warning').text('Login Failed!')
+        }
+    }
+
+    // on loggedIn, close!
+    handler.on('loggedIn', doClose);
+    handler.on('loginFailed', doLoginWarn);
+
     let login = {}
 
     login.render = () => {
@@ -35,29 +46,29 @@ export function loginUi (context) {
 
         ['username', 'password'].forEach(input => {
             modalContent
-                .append('div').attr('class', `login-input`).attr('id', `login-input-${input}`)
+                .append('div').attr('class', `login-input login-component`).attr('id', `login-${input}`)
                 .append('span').attr('class', 'input-name').text(input)
 
-            d3_select(`#login-input-${input}`)
+            d3_select(`#login-${input}`)
                 .append('input')
-                .attr('class', input)
+                .attr('class', 'login-input-text')
+                .attr('id', `login-${input}-input`)
                 .attr('type', 'text')
         })
 
         modalContent
-            .append('ul')
-            .attr('class', 'control')
-            .attr('id', 'login-buttons')
+            .append('div').attr('id', 'login-buttons').attr('class', 'login-component')
+            .append('ul').attr('id', 'login-controls').attr('class', 'control');
 
-        let loginControls = d3_select('#login-buttons');
+        let loginControls = d3_select('#login-controls');
 
         loginControls
             .append('li').attr('id', 'login-ok').on('click', doLogin)
-            .append('div').attr('id', 'login-ok-text').text('ok')
+            .append('div').attr('id', 'login-ok-text').attr('class', 'button button-long').text('ok')
 
         loginControls
             .append('li').attr('id', 'login-close').on('click', doClose)
-            .append('div').attr('id', 'login-close').text('close');
+            .append('div').attr('id', 'login-close').attr('class', 'button button-long').text('close');
 
     }
 

diff --git a/src/views/main.js b/src/views/main.js
@@ -1,6 +1,6 @@
 import { select as d3_select } from 'd3';
 import { navUi } from './nav';
-
+import { mapUi } from './map';
 
 export function mainUi(context) {
     let main = {};
@@ -9,15 +9,18 @@ export function mainUi(context) {
         // build nav
         body
             .append('div')
-            .attr('class', 'nav')
+            .attr('id', 'nav')
+            .attr('class', 'row')
 
         navUi(context).render();
 
         // build map
-        // body
-        //     .append('div')
-        //     .attr('id', 'map')
-        //     .call(mapUi(context).render())
+        body
+            .append('div')
+            .attr('id', 'map')
+            .attr('class', 'row')
+
+        mapUi(context).render();
 
     }
     return main;

diff --git a/src/views/map.js b/src/views/map.js
@@ -0,0 +1,21 @@
+import { select as d3_select } from 'd3';
+import mapboxgl from 'mapbox-gl';
+
+export function mapUi(context) {
+    const body = d3_select('body');
+
+    let map = {};
+    let glMap = () => { 
+        mapboxgl.accessToken = 'pk.eyJ1IjoibWF4Z3Jvc3NtYW4iLCJhIjoiY2loZTQ5bHpxMGlyaXRwbHpsN3FscjA3bSJ9.ry1OJsQ5SCbhrH7fYd7adg';
+        new mapboxgl.Map({
+            container: 'map',
+            style: 'mapbox://styles/mapbox/streets-v9'
+        });
+    };
+
+
+    map.render = () => {
+        glMap();
+    }
+    return map;
+}