Commit 460b8ddb authored by Jaden DIEFENBAUGH's avatar Jaden DIEFENBAUGH
Browse files

[js][tc] change tc channel select into dropdown to show colors, closes #121

parent fc61d68e
...@@ -463,7 +463,7 @@ describe('<ToolchainEditor />', function() { ...@@ -463,7 +463,7 @@ describe('<ToolchainEditor />', function() {
wrapper.find('rect#block_testing_alg').simulate('click'); wrapper.find('rect#block_testing_alg').simulate('click');
wrapper.update(); wrapper.update();
expect(wrapper.find('ToolchainModal').props().active).to.equal(true); expect(wrapper.find('ToolchainModal').props().active).to.equal(true);
wrapper.find('.modal select').prop('onChange')( { target: { value: 'testing_data' }}); wrapper.find('.modal #channelSelector DropdownItem#channel-testing_data').simulate('click');
wrapper.update(); wrapper.update();
wrapper.find('button.close').simulate('click'); wrapper.find('button.close').simulate('click');
wrapper.update(); wrapper.update();
...@@ -484,7 +484,7 @@ describe('<ToolchainEditor />', function() { ...@@ -484,7 +484,7 @@ describe('<ToolchainEditor />', function() {
wrapper.find('rect#block_analyzer').simulate('click'); wrapper.find('rect#block_analyzer').simulate('click');
wrapper.update(); wrapper.update();
expect(wrapper.find('ToolchainModal').props().active).to.equal(true); expect(wrapper.find('ToolchainModal').props().active).to.equal(true);
wrapper.find('.modal select').prop('onChange')( { target: { value: 'testing_data' }}); wrapper.find('.modal #channelSelector DropdownItem#channel-testing_data').simulate('click');
wrapper.update(); wrapper.update();
wrapper.find('button.close').simulate('click'); wrapper.find('button.close').simulate('click');
wrapper.update(); wrapper.update();
......
...@@ -24,7 +24,7 @@ import { ...@@ -24,7 +24,7 @@ import {
InputGroupAddon, InputGroupAddon,
Badge, Badge,
Modal, ModalBody, ModalHeader, ModalFooter, Modal, ModalBody, ModalHeader, ModalFooter,
UncontrolledButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem, UncontrolledDropdown, UncontrolledButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem,
} from 'reactstrap'; } from 'reactstrap';
import CacheInput from '../CacheInput.jsx'; import CacheInput from '../CacheInput.jsx';
...@@ -86,6 +86,20 @@ class ToolchainModal extends React.Component<Props, State> { ...@@ -86,6 +86,20 @@ class ToolchainModal extends React.Component<Props, State> {
// TODO: right now this is just an escape hatch for channel changing not propogating throughout the network. this needs to be fixed // TODO: right now this is just an escape hatch for channel changing not propogating throughout the network. this needs to be fixed
const channelSelectDisabled = false; //Object.keys(this.props.possibleChannels).length === 1; const channelSelectDisabled = false; //Object.keys(this.props.possibleChannels).length === 1;
const currChannel: string = data.synchronized_channel || '';
const formatChannel = (channel: string) => {
return (
<span>
<span style={{backgroundColor: this.props.possibleChannels[channel] || '#000000'}}>
&nbsp;&nbsp;&nbsp;&nbsp;
</span>
&nbsp;
{ channel === '' ? '<none>' : channel }
</span>
);
};
return ( return (
<Modal <Modal
isOpen={this.props.active} isOpen={this.props.active}
...@@ -129,27 +143,33 @@ class ToolchainModal extends React.Component<Props, State> { ...@@ -129,27 +143,33 @@ class ToolchainModal extends React.Component<Props, State> {
{ data.hasOwnProperty('synchronized_channel') { data.hasOwnProperty('synchronized_channel')
&& &&
<FormGroup> <FormGroup>
<Label>Channel: {data.synchronized_channel}</Label> <Label>
<Input Synchronized channel:&nbsp;
type='select' <UncontrolledDropdown
disabled={channelSelectDisabled} id='channelSelector'
value={data.synchronized_channel} disabled={channelSelectDisabled}
onChange={e => this.props.updateBlockChannel(e.target.value)} style={{display: 'inline-block'}}
title={channelSelectDisabled ? 'Cannot change the synchronized channel because there is not more than one to choose from' : undefined} >
> <DropdownToggle caret outline>
{ /* TODO: adding the current value in the list of possible values is part of the escape hatch for channel changes not propogating throughout the network. this needs to be fixed */ } { formatChannel(currChannel || '') }
{ </DropdownToggle>
Array.from(new Set([...Object.keys(this.props.possibleChannels), data.synchronized_channel])) <DropdownMenu>
.map((channel, i) => {
<option Array.from(new Set([...Object.keys(this.props.possibleChannels), currChannel || '']))
key={i} .filter(c => c !== '')
value={channel} .map((c, i) =>
> <DropdownItem
{ channel } id={`channel-${ c }`}
</option> key={i}
) onClick={e => this.props.updateBlockChannel(c)}
} >
</Input> { formatChannel(c) }
</DropdownItem>
)
}
</DropdownMenu>
</UncontrolledDropdown>
</Label>
</FormGroup> </FormGroup>
} }
<Row> <Row>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment