feat: basic dashboard view

1 files changed, 58 insertions, 27 deletions

diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index e486bcb52..1a11925dc 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -5,7 +5,7 @@ import { observer } from "mobx-react";
 import * as React from 'react';
 import { Doc, DocListCast } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
-import { StrCast } from '../../../fields/Types';
+import { Cast, StrCast } from '../../../fields/Types';
 import { Utils } from '../../../Utils';
 import { CurrentUserUtils } from "../../util/CurrentUserUtils";
 import { SettingsManager } from "../../util/SettingsManager";
@@ -20,29 +20,54 @@ import "./TopBar.scss";
  */
 @observer
 export class TopBar extends React.Component {
-    render() {
-        const myDashboards = DocListCast(CurrentUserUtils.MyDashboards.data);
-        return (
-            //TODO:glr Add support for light / dark mode
-            <div style={{ pointerEvents: "all" }} className="topbar-container">
-                <div className="topbar-bar" style={{ background: Colors.DARK_GRAY, borderBottom: Borders.STANDARD }}>
-                    <div className="topbar-left">
+      navigateToHome = () => {
+            Doc.UserDoc().activeDashboard = undefined
+      }
+      render() {
+            const myDashboards = DocListCast(CurrentUserUtils.MyDashboards.data);
+            const activeDashboard = Cast(Doc.UserDoc().activeDashboard, Doc, null)
+            return (
+                  //TODO:glr Add support for light / dark mode
+                  <div style={{ pointerEvents: "all" }} className="topbar-container">
+                        <div className="topbar-bar" style={{ background: Colors.DARK_GRAY, borderBottom: Borders.STANDARD }}>
+                              <div className="topbar-left">
+                                    <div className="topbar-button-text" onClick={this.navigateToHome}>Home</div>
+                              </div>
+                              <div className="topbar-center" >
+                                    <div className="topbar-title">
+                                          {activeDashboard ? StrCast(activeDashboard.title) : "Dash"}
+                                    </div>
+                              </div>
+                              <div className="topbar-right" >
+                                    <div className="topbar-button-icon" >
+                                          <FontAwesomeIcon icon="question-circle" />
+                                    </div>
+                                    <div className="topbar-button-icon" onClick={() => SettingsManager.Instance.open()}>
+                                          <FontAwesomeIcon icon="cog" />
+                                    </div>
+                              </div>
+
+                              {/* <div className="topbar-left">
                         <div className="topbar-lozenge-user">
                             {`${Doc.CurrentUserEmail}`}
                         </div>
                         <div className="topbar-icon" onClick={() => window.location.assign(Utils.prepend("/logout"))}>
                             {"Log out"}
                         </div>
-                    </div>
-                    <div className="topbar-center" >
+                    </div> */}
+                              {/* <div className="topbar-center" >
                         <div className="topbar-lozenge-dashboard">
-                            <select className="topbar-dashSelect" onChange={undoBatch(e => CurrentUserUtils.openDashboard(Doc.UserDoc(), myDashboards[Number(e.target.value)]))}
+                              <div style={{ color: Colors.WHITE }}>
+                                    {activeDashboard ? StrCast(activeDashboard.title) : "Dash"}
+                              </div> */}
+
+                              {/* <select className="topbar-dashSelect" onChange={undoBatch(e => CurrentUserUtils.openDashboard(Doc.UserDoc(), myDashboards[Number(e.target.value)]))}
                                 value={myDashboards.indexOf(CurrentUserUtils.ActiveDashboard)}
                                 style={{ color: Colors.WHITE }}>
                                 {myDashboards.map((dash, i) => <option key={dash[Id]} value={i}> {StrCast(dash.title)} </option>)}
-                            </select>
-                        </div>
-                        <div className="topbar-dashboards">
+                            </select> */}
+                              {/* </div> */}
+                              {/* <div className="topbar-dashboards">
                             <Tooltip title={<div className="dash-tooltip">Create a new dashboard </div>} placement="bottom"><div className="topbar-icon" onClick={async () => {
                                 const batch = UndoManager.StartBatch("new dash");
                                 await CurrentUserUtils.createNewDashboard(Doc.UserDoc());
@@ -65,19 +90,25 @@ export class TopBar extends React.Component {
                                     Explore<FontAwesomeIcon icon="map" />
                                 </div>
                             </Tooltip>
-                        </div>
-                    </div>
-                    <div className="topbar-right" >
-                        <div className="topbar-icon" onClick={() => window.open(
+                        </div> */}
+                              {/* </div> */}
+                              {/* <div className="topbar-right" > */}
+                              {/* <div onClick={() => window.open(
                             "https://brown-dash.github.io/Dash-Documentation/", "_blank")}>
-                            {"Help"}<FontAwesomeIcon icon="question-circle" />
-                        </div>
-                        <div className="topbar-icon" onClick={() => SettingsManager.Instance.open()}>
-                            {"Settings"}<FontAwesomeIcon icon="cog" />
+                              <FontAwesomeIcon icon="question-circle" />
+                          </div>
+                          <div onClick={() => SettingsManager.Instance.open()}>
+                          <FontAwesomeIcon icon="cog" />
+                          </div> */}
+                              {/* <div className="topbar-icon" >
+                                          <FontAwesomeIcon icon="question-circle" />
+                                    </div>
+                                    <div className="topbar-icon" onClick={() => SettingsManager.Instance.open()}>
+                                          <FontAwesomeIcon icon="cog" />
+                                    </div>
+                              </div> */}
                         </div>
-                    </div>
-                </div>
-            </div >
-        );
-    }
+                  </div >
+            );
+      }
 }
\ No newline at end of file