Add layout presets

FtcDashboard/dash/src/actions/settings.js

@@ -0,0 +1,17 @@
+export const SAVE_LAYOUT_PRESET = 'SAVE_LAYOUT_PRESET';
+export const RECEIVE_LAYOUT_PRESET = 'RECEIVE_LAYOUT_PRESET';
+export const GET_LAYOUT_PRESET = 'GET_LAYOUT_PRESET';
+
+export const saveLayoutPreset = (preset) => ({
+  type: SAVE_LAYOUT_PRESET,
+  preset
+});
+
+export const receiveLayoutPreset = (preset) => ({
+  type: RECEIVE_LAYOUT_PRESET,
+  preset
+});
+
+export const getLayoutPreset = () => ({
+  type: GET_LAYOUT_PRESET
+});

FtcDashboard/dash/src/components/TileGrid.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const TileGrid = ({ children }) => (
-  <div className="tile-grid">{children}</div>
+const TileGrid = ({ gridTemplate, children }) => (
+  <div className="tile-grid" style={{ gridTemplate }}>{children}</div>
 );
 
 TileGrid.propTypes = {
+  gridTemplate: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired
 };
 

FtcDashboard/dash/src/configureStore.js

@@ -2,6 +2,7 @@ import { applyMiddleware, createStore } from 'redux';
 import { createLogger } from 'redux-logger';
 import thunk from 'redux-thunk';
 import socketMiddleware from './socketMiddleware';
+import storageMiddleware from './storageMiddleware';
 import reducer from './reducers';
 import { RECEIVE_PING_TIME } from './actions/socket';
 import { RECEIVE_TELEMETRY } from './actions/telemetry';
@@ -12,7 +13,7 @@ const DEBUG = false;
 const HIDDEN_ACTIONS = [RECEIVE_PING_TIME, RECEIVE_TELEMETRY, RECEIVE_ROBOT_STATUS];
 
 const configureStore = () =>  {
-  const middlewares = [thunk, socketMiddleware];
+  const middlewares = [thunk, socketMiddleware, storageMiddleware];
 
   if (DEBUG) {
     const logger = createLogger({

FtcDashboard/dash/src/containers/Dashboard.jsx

@@ -7,10 +7,12 @@ import IconGroup from '../components/IconGroup';
 import Icon from '../components/Icon';
 import LayoutPreset from '../enums/LayoutPreset';
 import { connect, disconnect } from '../actions/socket';
+import { saveLayoutPreset, getLayoutPreset } from '../actions/settings';
 
 class Dashboard extends Component {
   componentDidMount() {
     this.props.dispatch(connect(process.env.HOST, process.env.PORT));
+    this.props.dispatch(getLayoutPreset());
   }
 
   componentWillUnmount() {
@@ -28,11 +30,23 @@ class Dashboard extends Component {
                   <p>{this.props.pingTime}ms&nbsp;&nbsp;&nbsp;&nbsp;</p>
                   : null
               }
+              <select 
+                value={this.props.layoutPreset} 
+                onChange={evt => this.props.dispatch(saveLayoutPreset(evt.target.value))}>
+                {
+                  Object.keys(LayoutPreset)
+                    .filter((key) => typeof LayoutPreset[key] == 'string')
+                    .map((key) => (
+                      <option key={key} value={key}>{LayoutPreset.getName(key)}</option>
+                    ))
+                }
+              </select>
+              &nbsp;&nbsp;&nbsp;
               <Icon icon={this.props.isConnected ? 'wifi' : 'no-wifi'} size="large" />
             </IconGroup>
           </Heading>
         </Header>
-        { LayoutPreset.getContent(LayoutPreset.DEFAULT) }
+        { LayoutPreset.getContent(this.props.layoutPreset) }
       </div>
     );
   }
@@ -41,12 +55,14 @@ class Dashboard extends Component {
 Dashboard.propTypes = {
   isConnected: PropTypes.bool.isRequired,
   pingTime: PropTypes.number.isRequired,
+  layoutPreset: PropTypes.oneOf(Object.keys(LayoutPreset)).isRequired,
   dispatch: PropTypes.func.isRequired
 };
 
-const mapStateToProps = ({ socket }) => ({
+const mapStateToProps = ({ socket, settings }) => ({
   isConnected: socket.isConnected,
-  pingTime: socket.pingTime
+  pingTime: socket.pingTime,
+  layoutPreset: settings.layoutPreset
 });
 
 export default reduxConnect(mapStateToProps)(Dashboard);

FtcDashboard/dash/src/enums/LayoutPreset.jsx

@@ -10,14 +10,16 @@ import FieldView from '../containers/FieldView';
 
 const LayoutPreset = {
   DEFAULT: 'DEFAULT',
-  CAMERA: 'CAMERA'
+  CAMERA: 'CAMERA',
+  GRAPH: 'GRAPH',
+  ORIGINAL: 'ORIGINAL',
 };
 
 const LAYOUT_DETAILS = {
   [LayoutPreset.DEFAULT]: {
     name: 'Default',
     content: (
-      <TileGrid>
+      <TileGrid gridTemplate="150px calc(60% - 150px) 40% / 30% 40% 30%">
         <Tile row={1} col={1}>
           <OpModeView />
         </Tile>
@@ -39,7 +41,7 @@ const LAYOUT_DETAILS = {
   [LayoutPreset.CAMERA]: {
     name: 'Camera',
     content: (
-      <TileGrid>
+      <TileGrid gridTemplate="150px calc(60% - 150px) 40% / 30% 40% 30%">
         <Tile row={1} col={1}>
           <OpModeView />
         </Tile>
@@ -57,6 +59,35 @@ const LAYOUT_DETAILS = {
         </Tile>
       </TileGrid>
     )
+  },
+  [LayoutPreset.GRAPH]: {
+    name: 'Graph',
+    content: (
+      <TileGrid gridTemplate="100% / 50% 50%">
+        <Tile row={1} col={1}>
+          <GraphView />
+        </Tile>
+        <Tile row={1} col={2}>
+          <GraphView />
+        </Tile>
+      </TileGrid>
+    )
+  },
+  [LayoutPreset.ORIGINAL]: {
+    name: 'Original',
+    content: (
+      <TileGrid gridTemplate="60% 40% / 65% 35%">
+        <Tile row="1 / span 2" col={1}>
+          <GraphView />
+        </Tile>=
+        <Tile row={1} col={2}>
+          <ConfigView />
+        </Tile>
+        <Tile row={2} col={2}>
+          <TelemetryView />
+        </Tile>
+      </TileGrid>
+    )
   }
 };
 

FtcDashboard/dash/src/index.css

@@ -16,7 +16,7 @@ html { overflow: hidden; }
 body { font-family: "Roboto", sans-serif; margin: 0; padding: 0; font-size: 14px; }
 header { width: calc(100% - 16px); background-color: #2962ff; color: white; padding: 8px; height: 44px; }
 h1, h2, h3 { font-weight: bold; margin: 0; }
-.tile-grid { display: grid; grid-template: 150px calc(60% - 150px) 40% / 30% 40% 30%; width: 100%; height: calc(100vh - 60px); }
+.tile-grid { display: grid; width: 100%; height: calc(100vh - 60px); }
 .tile { border: 1px solid #EEE; padding: 16px; overflow: auto; }
 .heading { display: flex; justify-content: space-between; align-items: center; }
 table { margin: 0; border-collapse: collapse; text-align: left; }

FtcDashboard/dash/src/reducers/index.js

@@ -4,11 +4,13 @@ import socket from './socket';
 import config from './config';
 import status from './status';
 import camera from './camera';
+import settings from './settings';
 
 export default combineReducers({
   telemetry,
   socket,
   config,
   status,
-  camera
+  camera,
+  settings
 });

FtcDashboard/dash/src/reducers/settings.js

@@ -0,0 +1,20 @@
+import LayoutPreset from '../enums/LayoutPreset';
+import { RECEIVE_LAYOUT_PRESET } from '../actions/settings';
+
+const initialState = {
+  layoutPreset: LayoutPreset.DEFAULT
+};
+
+const telemetry = (state = initialState, action) => {
+  switch (action.type) {
+  case RECEIVE_LAYOUT_PRESET:
+    return {
+      ...state,
+      layoutPreset: action.preset
+    };
+  default:
+    return state;
+  }
+};
+
+export default telemetry;

FtcDashboard/dash/src/storageMiddleware.js

@@ -0,0 +1,33 @@
+import {
+  GET_LAYOUT_PRESET,
+  SAVE_LAYOUT_PRESET,
+  receiveLayoutPreset
+} from './actions/settings';
+import LayoutPreset from './enums/LayoutPreset';
+
+const LAYOUT_PRESET_KEY = 'layoutPreset';
+
+const storageMiddleware = store => next => action => {
+  switch (action.type) {
+  case GET_LAYOUT_PRESET: {
+    const preset = localStorage.getItem(LAYOUT_PRESET_KEY) || LayoutPreset.DEFAULT;
+
+    store.dispatch(receiveLayoutPreset(preset));
+
+    break;
+  }
+  case SAVE_LAYOUT_PRESET: {
+    localStorage.setItem(LAYOUT_PRESET_KEY, action.preset);
+
+    store.dispatch(receiveLayoutPreset(action.preset));
+
+    break;
+  }
+  default:
+    next(action);
+
+    break;
+  }
+};
+
+export default storageMiddleware;