Features/trigger widget #101

Merged
A-Nilfgaardian merged 4 commits from features/trigger-widget into master 2021-02-09 23:58:27 +00:00
4 changed files with 95 additions and 2 deletions
Showing only changes of commit 222be888c3 - Show all commits

View File

@ -6,6 +6,7 @@ import './../../css/sidebar/sidebar.css';
import HorizontalWidget from './widgets/horizontalWidget';
import VerticalWidget from './widgets/verticalWidget';
import MeasurementsWidget from './widgets/measurementsWidget';
import TriggerWidget from './widgets/triggerWidget';
class SideBar extends React.Component {
@ -18,6 +19,7 @@ class SideBar extends React.Component {
<HorizontalWidget />
<VerticalWidget />
<MeasurementsWidget />
<TriggerWidget />
</div>
)
}

View File

@ -0,0 +1,53 @@
import React from 'react';
import { connect } from 'react-redux';
import './../../../css/sidebar/widgets/triggerWidget.css';
class TriggerWidget extends React.Component<any, any> {
// Trigger Channel
increaseChannel = () => {
this.props.dispatch({type: 'trigger/increaseChannel'});
}
decreaseChannel = () => {
this.props.dispatch({type: 'trigger/decreaseChannel'});
}
render() {
return (
<div className="TriggerWidget">
<div className="WidgetTitle">
Trigger
</div>
<div className="TriggerWidgetAdjustChannelBlock">
<button
className="MinusButton"
onClick={() => this.decreaseChannel()}>
-
</button>
<label
className="AdjustChannelBlockValue"
style={{color: this.props.triggerWidget.channelColorsList[this.props.triggerWidget.triggerChannel-1]}}
>
CH{this.props.triggerWidget.triggerChannel.toString()}
</label>
<button
className="PlusButton"
onClick={() => this.increaseChannel()}>
+
</button>
</div>
</div>
)
}
}
function mapStateToProps(state: { triggerWidget: any; }) {
return {
triggerWidget: state.triggerWidget
};
}
export default connect(mapStateToProps)(TriggerWidget);

View File

@ -0,0 +1,17 @@
.TriggerWidget {
text-align: center;
display: flex;
flex-direction: column;
user-select: none;
}
.WidgetTitle {
background-color: #4B4B4B;
color: black;
margin: 10px;
}
.AdjustChannelBlockValue {
padding-left: 2vw;
padding-right: 2vw;
}

View File

@ -1,15 +1,36 @@
import TriggerType from '../../configuration/enums/triggerType';
import DefaultChannelColor from '../../configuration/enums/defaultChannelColor';
const initialState = {
triggerChannel: 1,
channelColorsList: [
DefaultChannelColor.Channel1,
DefaultChannelColor.Channel2,
DefaultChannelColor.Channel3,
DefaultChannelColor.Channel4
],
triggerType: TriggerType.RisingEdge,
triggerLevel: 0
};
export default function(state = initialState, action: {type: any, payload: any}) {
switch(action.type) {
case "trigger/test":
return { ...state };
case "trigger/increaseChannel":
if (state.triggerChannel >= 4) {
return { ...state }
}
return {
...state,
activeChannel: state.triggerChannel + 1
};
case "trigger/decreaseChannel":
if (state.triggerChannel == 1) {
return { ...state }
}
return {
...state,
activeChannel: state.triggerChannel - 1
};
default:
return state;
}