WIP: implementing new way to change Gauge colorzones #251

src/widget/edit-widget/color-picker.js

@@ -49,15 +49,23 @@ class ColorPicker extends React.Component {
   }
 
   handleChangeComplete = (color) => {
+    
+    let temp = this.state.widget;
+
+    if(this.props.controlId === 'strokeStyle'){
+      temp.customProperties.zones[this.props.zoneIndex]['strokeStyle'] = color.hex;
+    }
+    else{
     let parts = this.props.controlId.split('.');
     let isCustomProperty = true;
+
     if (parts.length === 1){
       isCustomProperty = false;
     }
 
-    let temp = this.state.widget;
     isCustomProperty ? temp[parts[0]][parts[1]] = color.hex : temp[this.props.controlId] = color.hex;
     isCustomProperty ? temp[parts[0]][parts[1] + "_opacity"] = color.rgb.a : temp[this.props.controlId +"_opacity"] = color.rgb.a;
+    }
 
     this.setState({ widget: temp });
   };
@@ -78,20 +86,33 @@ class ColorPicker extends React.Component {
 
   render() {
     let disableOpacity = false;
+    let hexColor;
+    let opacity = 1;
     let parts = this.props.controlId.split('.');
     let isCustomProperty = true;
     if (parts.length === 1){
       isCustomProperty = false;
     }
 
-    if(this.state.widget.type === "Box" && parts[1] === "border_color"){
+    if((this.state.widget.type === "Box" && parts[1] === "border_color") || this.props.controlId === 'strokeStyle'){
       disableOpacity = true;
     }
+    if(this.props.controlId === 'strokeStyle'){
+      if(typeof this.state.widget.customProperties.zones[this.props.zoneIndex] !== 'undefined'){
+    hexColor = this.state.widget.customProperties.zones[this.props.zoneIndex]['strokeStyle'];
+      }
+    }
+    else{
+    hexColor = isCustomProperty ? this.state.widget[parts[0]][parts[1]]: this.state.widget[this.props.controlId];
+    opacity = isCustomProperty ? this.state.widget[parts[0]][parts[1] + "_opacity"]: this.state.widget[this.props.controlId + "_opacity"];
 
-    let hexColor = isCustomProperty ? this.state.widget[parts[0]][parts[1]]: this.state.widget[this.props.controlId];
-    let opacity = isCustomProperty ? this.state.widget[parts[0]][parts[1] + "_opacity"]: this.state.widget[this.props.controlId + "_opacity"];
+    }
+
+    
     let rgbColor = this.hexToRgb(hexColor, opacity);
 
+
+
       return <Dialog show={this.props.show} title='Color Picker' buttonTitle='Save' onClose={(c) => this.onClose(c)} valid={true}>
           <form>
               <SketchPicker

src/widget/edit-widget/edit-widget-color-zones-control.js

@@ -16,12 +16,11 @@
  ******************************************************************************/
 
 import React from 'react';
-import { FormGroup, FormLabel, Button } from 'react-bootstrap';
-
+import { FormGroup, FormControl, Table, FormLabel, Button, Tooltip, OverlayTrigger } from 'react-bootstrap';
+import ColorPicker from './color-picker'
 
 import Icon from '../../common/icon';
-import Table from '../../common/table';
-import TableColumn from '../../common/table-column';
+import {Collapse} from 'react-collapse';
 
 class EditWidgetColorZonesControl extends React.Component {
   constructor(props) {
@@ -33,7 +32,12 @@ class EditWidgetColorZonesControl extends React.Component {
         zones: []
         }
       },
-      selectedZones: []
+      selectedZone: null,
+      selectedIndex: 0,
+      showColorPicker: false,
+      originalColor: null,
+      minValue: 0,
+      maxValue: 100
     };
   }
 
@@ -46,7 +50,16 @@ class EditWidgetColorZonesControl extends React.Component {
   addZone = () => {
     // add row
     const widget = this.state.widget;
-    widget.customProperties.zones.push({ strokeStyle: 'ffffff', min: 0, max: 100 });
+    widget.customProperties.zones.push({ strokeStyle: '#d3cbcb', min: 0, max: 100 });
+    
+    if(widget.customProperties.zones.length > 0){      
+    let length = widget.customProperties.zones.length
+
+    for(let i= 0 ; i < length; i++){
+    widget.customProperties.zones[i].min = i* 100/length;
+    widget.customProperties.zones[i].max = (i+1)* 100/length;
+    }
+    }
 
     this.setState({ widget });
 
@@ -57,11 +70,11 @@ class EditWidgetColorZonesControl extends React.Component {
     // remove zones
     const widget = this.state.widget;
 
-    this.state.selectedZones.forEach(row => {
+    /*this.state.selectedZones.forEach(row => {
       widget.customProperties.zones.splice(row, 1);
     });
 
-    this.setState({ selectedZones: [], widget });
+    this.setState({ selectedZones: [], widget });*/
 
     this.sendEvent(widget);
   }
@@ -83,6 +96,32 @@ class EditWidgetColorZonesControl extends React.Component {
     this.sendEvent(widget);
   }
 
+  editColorZone = (index) => {
+    this.setState({selectedZone: this.state.widget.customProperties.zones[index], selectedIndex: index , minValue: this.state.widget.customProperties.zones[index].min, maxValue: this.state.widget.customProperties.zones[index].max});
+
+  }
+
+  openColorPicker = () =>{
+    
+    let color = this.state.selectedZone.strokeStyle;
+
+    this.setState({showColorPicker: true, originalColor: color});
+  }
+
+  closeEditModal = (data) => {
+    this.setState({showColorPicker: false})
+    if(typeof data === 'undefined'){
+
+      let temp = this.state.selectedZone;
+      temp.strokeStyle = this.state.originalColor;
+      
+      this.setState({ selectedZone : temp });
+    }
+  }
+
+  handleMinMaxChange = () => {
+  }
+
   sendEvent(widget) {
     // create event
     const event = {
@@ -95,37 +134,83 @@ class EditWidgetColorZonesControl extends React.Component {
     this.props.handleChange(event);
   }
 
-  checkedCell = (row, event) => {
-    // update selected rows
-    const selectedZones = this.state.selectedZones;
-
-    if (event.target.checked) {
-      if (selectedZones.indexOf(row) === -1) {
-        selectedZones.push(row);
-      }
-    } else {
-      let index = selectedZones.indexOf(row);
-      if (row > -1) {
-        selectedZones.splice(index, 1);
-      }
-    }
-
-    this.setState({ selectedZones });
-  }
+  
 
   render() {
+
+
+    let tempColor = 'FFFFFF';
+    let collapse = false;
+    if(this.state.selectedZone !== null){
+      collapse = true;
+      tempColor = this.state.selectedZone.strokeStyle;
+    }
+
+    let pickerStyle = {
+      backgroundColor: tempColor,
+      width: '260px', 
+      height: '40px',
+      marginTop: '20px'
+    }
+    
     return <FormGroup>
       <FormLabel>Color zones</FormLabel>
+      <Button  onClick={this.addZone} style={{marginBottom: '10px', marginLeft: '120px'}} disabled={!this.props.widget.customProperties.colorZones}><Icon size='xs' icon="plus" /></Button>
 
-      <Table data={this.state.widget.customProperties.zones}>
-        <TableColumn width="20" checkbox onChecked={this.checkedCell} />
-        <TableColumn title="Color" dataKey="strokeStyle" inlineEditable onInlineChange={this.changeCell}  />
-        <TableColumn title="Minimum" dataKey="min" inlineEditable onInlineChange={this.changeCell} />
-        <TableColumn title="Maximum" dataKey="max" inlineEditable onInlineChange={this.changeCell} />
+    <div>
+      {
+          this.state.widget.customProperties.zones.map((zone, idx) => {
+            let color = zone.strokeStyle;
+            let width = (zone.max - zone.min)*(260/100);
+            let style = {
+              backgroundColor: color,
+              width: width,
+              height: '40px'
+            }
+            
+
+
+            return (<Button
+              style={style} key={idx} onClick={i => this.editColorZone(idx)} disabled={!this.props.widget.customProperties.colorZones}><Icon icon="pen" /></Button>
+            )
+          }
+          )
+
+      }
+      </div>
+      <Collapse isOpened={collapse} >
+      <OverlayTrigger key={0} placement={'right'} overlay={<Tooltip id={`tooltip-${"color"}`}>Change color</Tooltip>} >
+        <Button key={0} style={pickerStyle} onClick={this.openColorPicker.bind(this)}  >
+          <Icon icon="paint-brush"/>
+        </Button>
+        </OverlayTrigger>
+        <Table>
+        <tbody>
+          <tr>
+            <td>
+              Min:
+              <FormControl
+                type="number"
+                step="any"
+                placeholder="Min"
+                value={this.state.minValue}
+                onChange={e => this.handleMinMaxChange(e)} />
+            </td>
+            <td>
+              Max:
+              <FormControl
+                type="number"
+                step="any"
+                placeholder="Max"
+                value={ this.state.maxValue}
+                onChange={e => this.handleMinMaxChange(e)} />
+            </td>
+          </tr>
+        </tbody>
       </Table>
-
-      <Button onClick={this.addZone} disabled={!this.props.widget.customProperties.colorZones}><Icon icon="plus" /> Add</Button>
-      <Button onClick={this.removeZones} disabled={!this.props.widget.customProperties.colorZones}><Icon icon="minus" /> Remove</Button>
+      </Collapse>
+      
+      <ColorPicker show={this.state.showColorPicker} onClose={(data) => this.closeEditModal(data)} widget={this.state.widget} zoneIndex={this.state.selectedIndex} controlId={'strokeStyle'} />
     </FormGroup>;
   }
 }

src/widget/widgets/gauge.js

@@ -219,7 +219,7 @@ class WidgetGauge extends Component {
       const step = (maxValue - minValue) / 100;
 
       zones = zones.map(zone => {
-        return Object.assign({}, zone, { min: (zone.min * step) + +minValue, max: zone.max * step + +minValue, strokeStyle: '#' + zone.strokeStyle });
+        return Object.assign({}, zone, { min: (zone.min * step) + +minValue, max: zone.max * step + +minValue, strokeStyle: zone.strokeStyle });
       });
     }