Project switcher and user dropdown

[osm/UI.git] / skyquake / framework / widgets / skyquake_nav / skyquakeNav.jsx

diff --git a/skyquake/framework/widgets/skyquake_nav/skyquakeNav.jsx b/skyquake/framework/widgets/skyquake_nav/skyquakeNav.jsx
index 01158c7..a61ee54 100644 (file)
--- a/skyquake/framework/widgets/skyquake_nav/skyquakeNav.jsx
+++ b/skyquake/framework/widgets/skyquake_nav/skyquakeNav.jsx
@@ -52,26 +52,65 @@ class LogoutAppMenuItem extends React.Component {
     }
 }
 
-
-class UserNav extends React.Component {
+class SelectProject extends React.Component {
     constructor(props) {
         super(props);
     }
     selectProject(e) {
-        let value = JSON.parse(e.currentTarget.value)
+        let value = JSON.parse(e.currentTarget.value);
         console.log('selected project', value)
     }
     render() {
+        let props = this.props;
+        let currentValue = JSON.stringify(props.currentProject);
         let projects = this.props.projects.map((p,i) => {
             return {
                 label: p.name,
-                value: p
+                value: p.name
             }
-        })
+        });
         return (
-            <div className="userSection">
+            <div className="userSection app">
                 Project:
-                <SelectOption options={projects} onChange={this.selectProject} className="projectSelect"/>
+                <SelectOption
+                    options={projects}
+                    value={currentValue}
+                    defaultValue={currentValue}
+                    onChange={props.onSelectProject}
+                    className="projectSelect" />
+            </div>
+        )
+    }
+}
+
+class UserNav extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    handleLogout() {
+        Utils.clearAuthentication();
+    }
+    selectProject(e) {
+        let value = JSON.parse(e.currentTarget.value)
+        console.log('selected project', value)
+    }
+    render() {
+        let props = this.props;
+        return (
+            <div className="app">
+                <h2>
+                    <a>
+                        {props.currentUser}
+                    </a>
+                    <span className="oi" data-glyph="caret-bottom"></span>
+                </h2>
+                <ul className="menu">
+                    <li>
+                        <a onClick={this.handleLogout}>
+                            Logout
+                        </a>
+                    </li>
+                </ul>
             </div>
         )
     }
@@ -211,8 +250,12 @@ export function buildNav(nav, currentPlugin, props) {
     let secondaryNavHTML = (
         <div className="secondaryNav" key="secondaryNav">
             {secondaryNav}
-            <UserNav projects={props.projects}/>
-            <LogoutAppMenuItem />
+            <SelectProject
+                onSelectProject={props.store.selectActiveProject}
+                projects={props.projects}
+                currentProject={props.currentProject} />
+            <UserNav
+                currentUser={props.currentUser}  />
         </div>
     )
     for (let k in nav) {