Merge pull request #178 from EEVengers/features/add-run-button

Features/add run button

Software/waveview/src/components/sidebar/core/runStopButton.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import DefaultColors from '../../../configuration/enums/defaultColors';
+import GraphStatus from '../../../configuration/enums/graphStatus';
+import './../../../css/sidebar/core/runStopButton.css';
+
+class RunStopButton extends React.Component<any,any> {
+
+  changeGraphStatus = () => {
+    this.props.dispatch({type: 'graph/changeStatus'});
+  }
+
+  render() {
+    return (
+      <div className={"RunStopButtonComponent"}>
+        <button
+          className={"RunStopButton"}
+          style={{background: this.props.graph.currentStatus === GraphStatus.On ? DefaultColors.StopButton : DefaultColors.RunButton}}
+          onClick={() => this.changeGraphStatus()}
+        >
+          <label
+            className={"RunStopButtonText"}>
+            {this.props.graph.currentStatus}
+          </label>
+        </button>
+      </div>
+    )
+  }
+}
+
+function mapStateToProps(state: { graph: any }) {
+  return {
+    graph: state.graph
+  };
+}
+
+export default connect(mapStateToProps)(RunStopButton);

Software/waveview/src/components/sidebar/core/singleButton.tsx

@@ -1,24 +1,34 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import './../../../css/sidebar/core/singleButton.css';
 
-function SingleButton() {
-  function handleSingleClick() {
-    alert("Single")
+class SingleButton extends React.Component<any, any> {
+
+  singleClickHandler = () => {
+    this.props.dispatch({type: 'graph/singleMode'});
   }
 
-  return (
-    <div className={"SingleButtonComponent"}>
-      <button
-        className={"SingleButton"}
-        onClick={handleSingleClick}
-      >
-        <label
-          className={"SingleButtonText"}>
-          Single
-        </label>
-      </button>
-    </div>
-  )
+  render() {
+    return (
+      <div className={"SingleButtonComponent"}>
+        <button
+          className={"SingleButton"}
+          onClick={() => this.singleClickHandler()}
+        >
+          <label
+            className={"SingleButtonText"}>
+            Single
+          </label>
+        </button>
+      </div>
+    )
+  }
 }
 
-export default SingleButton;
+function mapStateToProps(state: { graph: any }) {
+  return {
+    graph: state.graph
+  };
+}
+
+export default connect(mapStateToProps)(SingleButton);

Software/waveview/src/components/sidebar/core/stopButton.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import './../../../css/sidebar/core/stopButton.css';
-
-function StopButton() {
-  function handleStopClick() {
-    alert("Stopped")
-  }
-
-  return (
-    <div className={"StopButtonComponent"}>
-      <button
-        className={"StopButton"}
-        onClick={handleStopClick}
-      >
-        <label
-          className={"StopButtonText"}>
-          Stop
-        </label>
-      </button>
-    </div>
-  )
-}
-
-export default StopButton;

Software/waveview/src/components/sidebar/sidebar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import StopButton from './core/stopButton';
+import RunStopButton from './core/runStopButton';
 import SingleButton from './core/singleButton';
 import './../../css/sidebar/sidebar.css';
 import HorizontalWidget from './widgets/horizontalWidget';
@@ -12,7 +12,7 @@ class SideBar extends React.Component {
   render() {
     return (
       <div className="SideBarComponent">
-        <StopButton />
+        <RunStopButton />
         <SingleButton />
         <HorizontalWidget />
         <VerticalWidget />

Software/waveview/src/configuration/enums/defaultColors.tsx

@@ -3,7 +3,9 @@ enum DefaultColors {
   Channel2 = "#00FF19",
   Channel3 = "#0075FF",
   Channel4 = "#FF0000",
-  Math = "#FF00FF"
+  Math = "#FF00FF",
+  StopButton = "#FF0000",
+  RunButton = "#00FF00"
 };
 
 export default DefaultColors;

Software/waveview/src/configuration/enums/graphStatus.tsx

@@ -0,0 +1,6 @@
+enum GraphStatus {
+  On = "Stop",
+  Off = "Run"
+};
+
+export default GraphStatus;

Software/waveview/src/css/sidebar/core/runStopButton.css

@@ -1,4 +1,4 @@
-.StopButton {
+.RunStopButton {
   display: flex;
   flex-direction: column;
   position: relative;
@@ -10,14 +10,15 @@
   z-index: 100;
   border: none;
   user-select: none;
+  outline: none;
 }
 
-.StopButtonComponent {
+.RunStopButtonComponent {
   display: flex;
   flex-direction: column;
 }
 
-.StopButtonText {
+.RunStopButtonText {
   font-weight: bold;
   font-size: 14px;
   display: flex;

Software/waveview/src/css/sidebar/core/singleButton.css

@@ -11,6 +11,7 @@
   z-index: 100;
   border: none;
   user-select: none;
+  outline: none;
 }
 
 .SingleButtonComponent {

Software/waveview/src/redux/initialStates/graphInitialState.tsx

@@ -0,0 +1,7 @@
+import GraphStatus from "../../configuration/enums/graphStatus";
+
+const GraphInitialState = {
+  currentStatus: GraphStatus.On
+};
+
+export default GraphInitialState;

Software/waveview/src/redux/reducers/graphReducer.tsx

@@ -0,0 +1,18 @@
+import GraphStatus from '../../configuration/enums/graphStatus';
+import GraphInitialState from '../initialStates/graphInitialState';
+
+export default function(state = GraphInitialState, action: {type: any, payload: any}) {
+  switch(action.type) {
+    case "graph/changeStatus":
+      var newStatus = state.currentStatus === GraphStatus.On ? GraphStatus.Off : GraphStatus.On;
+      return {
+        ...state,
+        currentStatus: newStatus
+      };
+    case "graph/singleMode":
+      // Handle what needs to happen when clicking the Single button
+      return state;
+    default:
+      return state;
+  }
+}

Software/waveview/src/redux/reducers/index.tsx

@@ -4,6 +4,7 @@ import verticalWidgetReducer from './widgets/verticalWidgetReducer';
 import measurementsWidgetReducer from './widgets/measurementsWidgetReducer';
 import triggerWidgetReducer from './widgets/triggerWidgetReducer';
 import settingsReducer from './settingsReducer';
+import graphReducer from './graphReducer';
 
 export default combineReducers(
   {
@@ -11,6 +12,7 @@ export default combineReducers(
     verticalWidget: verticalWidgetReducer,
     measurementsWidget: measurementsWidgetReducer,
     triggerWidget: triggerWidgetReducer,
-    settings: settingsReducer
+    settings: settingsReducer,
+    graph: graphReducer
   }
 );