initial commit

posm · Sep 4, 2018 · 9c3fc26 · 9c3fc26
1 parent c5a8e48
commit 9c3fc26
Show file tree

Hide file tree

Showing 21 changed files with 31,001 additions and 80 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
-/node_modules
+/node_modules
+/.vscode
+/dist
diff --git a/.vscode/launch.json b/.vscode/launch.json
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/package.json b/package.json
@@ -6,25 +6,32 @@
   "author": "POSM developers",
   "license": "MIT",
   "scripts": {
-    "build": "webpack",
+    "build:dev": "webpack --mode development",
     "start:dev": "webpack-dev-server --mode development",
-    "test": "mocha --require babel-core/register test/**/*.js"
+    "test": "mocha --require @babel/register test/**/*.js"
   },
   "dependencies": {
     "d3": "^5.7.0",
     "d3-dispatch": "^1.0.5",
+    "d3-ease": "^1.0.5",
     "d3-request": "^1.0.6",
+    "d3-transition": "^1.1.3",
     "uuid": "^3.3.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.0.0",
     "@babel/core": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-es2015": "^7.0.0-beta.53",
+    "@babel/register": "^7.0.0",
     "babel-loader": "^8.0.2",
     "chai": "^4.1.2",
+    "css-loader": "^1.0.0",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.4.2",
     "mocha": "^5.2.0",
+    "style-loader": "^0.23.0",
     "webpack": "^4.17.1",
     "webpack-cli": "^3.1.0",
     "webpack-dev-server": "^3.1.7"

diff --git a/src/handler/index.js b/src/handler/index.js
@@ -0,0 +1,55 @@
+import { dispatch as d3_dispatch } from 'd3-dispatch';
+import Store from '../store';
+
+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)));
+}
+
+class Handler {
+    constructor(enforcer) {
+        if (enforcer !== singletonEnforcer) {
+            throw new Error('Cannot construct singleton');
+        };
+    }
+    static getInstance() {
+        if (!this[singleton]) {
+            this[singleton] = new Handler(singletonEnforcer);
+        }
+        return this[singleton];
+    }
+
+    init() {
+        if (!this._dispatcher) {
+            this._dispatcher = d3_dispatch
+        }
+        _updateLogin(this)
+    }
+
+    call(args) {
+        this._dispatcher.call(...args);
+    }
+
+    dispatch(args) {
+        this._dispatcher.dispatch(...args);
+    }
+
+    on(args) {
+        this._dispatcher.on(...args);
+    }
+}
+
+export default Handler
+
diff --git a/src/index.html b/src/index.html
@@ -3,6 +3,8 @@
 	<head>
 		<meta charset="UTF-8">
 		<title>posm-paths-viewer</title>
+		<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+		rel="stylesheet">	
 	</head>
 	<body>
 	</body>

diff --git a/src/index.js b/src/index.js
@@ -1,9 +1,9 @@
 import { mainUi } from './views';
 import Store from './store';
+import Handler from './handler';
+import css from './styles/main.css';
 
-const mainStore = Store.getInstance(); 
-mainStore.init();
+const mainStore = Store.getInstance(); mainStore.init();
+const mainHandler = Handler.getInstance(); mainHandler.init();
 
-window.onload = () => {
-    mainUi(mainStore).render();
-}
+window.onload = () => mainUi(mainStore.state).render();
diff --git a/src/main.css b/src/main.css
diff --git a/src/store/index.js b/src/store/index.js
@@ -18,6 +18,13 @@ class Store {
         return this._state;
     }
 
+    get(property) {
+        if (!this._state.hasOwnProperty('property')) {
+            throw new Error('state does not have provided property');
+        }
+        return this._state[property];
+    }
+
     init() {
         if (!this._state) {
            this._state = {}
@@ -30,7 +37,7 @@ class Store {
     }
 
     update(updater) {
-        updater(this._state);
+        updater()(this._state);
     }
 }
 

diff --git a/src/styles/main.css b/src/styles/main.css
@@ -0,0 +1,44 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.disabled {
+    display: none;
+}
+
+.nav {
+    width: 100%;
+    height: 8vh;
+    display: flex;
+    align-items: center;
+    background: #eee;
+    border-bottom: 1px solid #000000;
+}
+
+#map {
+    width: 100%;
+}
+
+.control {
+    display: flex;
+    list-style: none;
+    padding: 0 10px;
+}
+
+.control li {
+    margin: 5px 10px;
+    padding: 10px 20px;
+    border: 1px solid #000000;
+    border-radius: 4px;
+}
+
+.control li:hover {
+    background: #696969;
+}
diff --git a/src/styles/modal.css b/src/styles/modal.css
@@ -0,0 +1,34 @@
+.modal {
+    position: fixed;
+    display: block;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: 400px;
+    max-height: 100%;
+    width: 400px;
+    max-width: 100%;
+    background: white;
+    box-shadow: 0 0 60px 20px rgba(0,0,0,0.8);
+    z-index: 100;
+
+}
+
+.modal-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 20px 50px;
+    overflow: auto;
+}
+
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 50;
+}
diff --git a/src/views/index.js b/src/views/index.js
@@ -1 +1,3 @@
-export { mainUi } from './main';
+export { mainUi } from './main';
+export { navUi } from './nav';
+export { loginUi } from './login';
diff --git a/src/views/login.js b/src/views/login.js
@@ -0,0 +1,65 @@
+import { 
+    select as d3_select,
+    selectAll as d3_selectAll
+} from 'd3';
+
+import Handler from '../handler';
+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);
+    }
+
+    function doClose() {
+        d3_selectAll('.modal-overlay').remove()
+        d3_selectAll('.modal').remove()
+    }
+
+    let login = {}
+
+    login.render = () => {
+        // gross, but a modal.
+        body
+            .append('div').attr('class', 'modal-overlay')
+            .append('div').attr('class', 'modal')
+            .append('div').attr('class', 'modal-content')
+
+        let modalContent = d3_select('.modal-content');
+
+        ['username', 'password'].forEach(input => {
+            modalContent
+                .append('div').attr('class', `login-input`).attr('id', `login-input-${input}`)
+                .append('span').attr('class', 'input-name').text(input)
+
+            d3_select(`#login-input-${input}`)
+                .append('input')
+                .attr('class', input)
+                .attr('type', 'text')
+        })
+
+        modalContent
+            .append('ul')
+            .attr('class', 'control')
+            .attr('id', 'login-buttons')
+
+        let loginControls = d3_select('#login-buttons');
+
+        loginControls
+            .append('li').attr('id', 'login-ok').on('click', doLogin)
+            .append('div').attr('id', 'login-ok-text').text('ok')
+
+        loginControls
+            .append('li').attr('id', 'login-close').on('click', doClose)
+            .append('div').attr('id', 'login-close').text('close');
+
+    }
+
+    return login;
+}
diff --git a/src/views/main.js b/src/views/main.js
@@ -1,19 +1,23 @@
 import { select as d3_select } from 'd3';
+import { navUi } from './nav';
+
 
 export function mainUi(context) {
-    var main = {};
-    main.context = context;
+    let main = {};
     main.render = () => {
         const body = d3_select('body');
         // build nav
         body
             .append('div')
-            .attr('id', 'nav')
+            .attr('class', 'nav')
+
+        navUi(context).render();
 
         // build map
-        body
-            .append('div')
-            .attr('id', 'map')
+        // body
+        //     .append('div')
+        //     .attr('id', 'map')
+        //     .call(mapUi(context).render())
 
     }
     return main;

diff --git a/src/views/map.js b/src/views/map.js
diff --git a/src/views/nav.js b/src/views/nav.js
@@ -0,0 +1,45 @@
+import { select as d3_select } from 'd3';
+import { dispatch as d3_dispatch } from 'd3-dispatch';
+import { loginUi } from './index'
+
+export function navUi(context) {
+    let nav = {};
+    d3_dispatch('login', 'logout');
+
+    function login() {
+        if (d3_select('#login-text').text() === 'login') {
+            loginUi(context).render();
+        } else {
+            d3_dispatch.call('logout');
+        }
+    }
+    nav.render = () => {
+        let nav = d3_select('.nav');
+
+        // controls
+        let navControl = nav.append('ul').attr('class', 'control');
+
+        navControl
+            .append('li')
+            .attr('id', 'login')
+            .on('click' , login)
+            .append('div')
+            .attr('id', 'login-text')
+            .text(context.loggedIn ? 'logout' : 'login')
+
+
+        navControl
+            .append('li')
+            .attr('id', 'upload')
+            .append('div')
+            .attr('id', 'upload-text')
+            .text('upload')
+
+        if (!context.loggedIn) {
+            d3_select('#upload').attr('class', 'disabled')
+
+        }
+    }
+
+    return nav;
+}