Commit 4ca2c52a authored by Jaden DIEFENBAUGH's avatar Jaden DIEFENBAUGH Committed by Flavio Tarsetti
Browse files

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

parent ebce0652
......@@ -463,7 +463,7 @@ describe('<ToolchainEditor />', function() {
wrapper.find('rect#block_testing_alg').simulate('click');
wrapper.update();
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.find('button.close').simulate('click');
wrapper.update();
......@@ -484,7 +484,7 @@ describe('<ToolchainEditor />', function() {
wrapper.find('rect#block_analyzer').simulate('click');
wrapper.update();
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.find('button.close').simulate('click');
wrapper.update();
......
......@@ -24,7 +24,7 @@ import {
InputGroupAddon,
Badge,
Modal, ModalBody, ModalHeader, ModalFooter,
UncontrolledButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem,
UncontrolledDropdown, UncontrolledButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem,
} from 'reactstrap';
import CacheInput from '../CacheInput.jsx';
......@@ -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
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 (
<Modal
isOpen={this.props.active}
......@@ -129,27 +143,33 @@ class ToolchainModal extends React.Component<Props, State> {
{ data.hasOwnProperty('synchronized_channel')
&&
<FormGroup>
<Label>Channel: {data.synchronized_channel}</Label>
<Input
type='select'
disabled={channelSelectDisabled}
value={data.synchronized_channel}
onChange={e => this.props.updateBlockChannel(e.target.value)}
title={channelSelectDisabled ? 'Cannot change the synchronized channel because there is not more than one to choose from' : undefined}
>
{ /* 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 */ }
{
Array.from(new Set([...Object.keys(this.props.possibleChannels), data.synchronized_channel]))
.map((channel, i) =>
<option
key={i}
value={channel}
>
{ channel }
</option>
)
}
</Input>
<Label>
Synchronized channel:&nbsp;
<UncontrolledDropdown
id='channelSelector'
disabled={channelSelectDisabled}
style={{display: 'inline-block'}}
>
<DropdownToggle caret outline>
{ formatChannel(currChannel || '') }
</DropdownToggle>
<DropdownMenu>
{
Array.from(new Set([...Object.keys(this.props.possibleChannels), currChannel || '']))
.filter(c => c !== '')
.map((c, i) =>
<DropdownItem
id={`channel-${ c }`}
key={i}
onClick={e => this.props.updateBlockChannel(c)}
>
{ formatChannel(c) }
</DropdownItem>
)
}
</DropdownMenu>
</UncontrolledDropdown>
</Label>
</FormGroup>
}
<Row>
......
Markdown is supported
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