cncjs

1
import difference from 'lodash/difference';
2
import find from 'lodash/find';
3
import includes from 'lodash/includes';
4
import union from 'lodash/union';
5
import PropTypes from 'prop-types';
6
import React, { PureComponent } from 'react';
7
import Modal from 'app/components/Modal';
8
import { GRBL, MARLIN, SMOOTHIE, TINYG } from 'app/constants';
9
import controller from 'app/lib/controller';
10
import i18n from 'app/lib/i18n';
11
import store from 'app/store';
12
import WidgetList from './WidgetList';
13

14
class WidgetManager extends PureComponent {
15
    static propTypes = {
16
      onSave: PropTypes.func,
17
      onClose: PropTypes.func.isRequired
18
    };
19

20
    state = {
21
      show: true
22
    };
23

24
    widgetList = [
25
      {
26
        id: 'visualizer',
27
        caption: i18n._('Visualizer Widget'),
28
        details: i18n._('This widget visualizes a G-code file and simulates the tool path.'),
29
        visible: true,
30
        disabled: true
31
      },
32
      {
33
        id: 'connection',
34
        caption: i18n._('Connection Widget'),
35
        details: i18n._('This widget lets you establish a connection to a serial port.'),
36
        visible: true,
37
        disabled: true
38
      },
39
      {
40
        id: 'console',
41
        caption: i18n._('Console Widget'),
42
        details: i18n._('This widget lets you read and write data to the CNC controller connected to a serial port.'),
43
        visible: true,
44
        disabled: false
45
      },
46
      {
47
        id: 'grbl',
48
        caption: i18n._('Grbl Widget'),
49
        details: i18n._('This widget shows the Grbl state and provides Grbl specific features.'),
50
        visible: true,
51
        disabled: false
52
      },
53
      {
54
        id: 'marlin',
55
        caption: i18n._('Marlin Widget'),
56
        details: i18n._('This widget shows the Marlin state and provides Marlin specific features.'),
57
        visible: true,
58
        disabled: false
59
      },
60
      {
61
        id: 'smoothie',
62
        caption: i18n._('Smoothie Widget'),
63
        details: i18n._('This widget shows the Smoothie state and provides Smoothie specific features.'),
64
        visible: true,
65
        disabled: false
66
      },
67
      {
68
        id: 'tinyg',
69
        caption: i18n._('TinyG Widget'),
70
        details: i18n._('This widget shows the TinyG state and provides TinyG specific features.'),
71
        visible: true,
72
        disabled: false
73
      },
74
      {
75
        id: 'axes',
76
        caption: i18n._('Axes Widget'),
77
        details: i18n._('This widget shows the XYZ position. It includes jog controls, homing, and axis zeroing.'),
78
        visible: true,
79
        disabled: false
80
      },
81
      {
82
        id: 'gcode',
83
        caption: i18n._('G-code Widget'),
84
        details: i18n._('This widget shows the current status of G-code commands.'),
85
        visible: true,
86
        disabled: false
87
      },
88
      {
89
        id: 'laser',
90
        caption: i18n._('Laser Widget'),
91
        details: i18n._('This widget allows you control laser intensity and turn the laser on/off.'),
92
        visible: true,
93
        disabled: false
94
      },
95
      {
96
        id: 'macro',
97
        caption: i18n._('Macro Widget'),
98
        details: i18n._('This widget can use macros to automate routine tasks.'),
99
        visible: true,
100
        disabled: false
101
      },
102
      {
103
        id: 'probe',
104
        caption: i18n._('Probe Widget'),
105
        details: i18n._('This widget helps you use a touch plate to set your Z zero offset.'),
106
        visible: true,
107
        disabled: false
108
      },
109
      {
110
        id: 'spindle',
111
        caption: i18n._('Spindle Widget'),
112
        details: i18n._('This widget provides the spindle control.'),
113
        visible: true,
114
        disabled: false
115
      },
116
      {
117
        id: 'custom',
118
        caption: i18n._('Custom Widget'),
119
        details: i18n._('This widget gives you a communication interface for creating your own widget.'),
120
        visible: true,
121
        disabled: false
122
      },
123
      {
124
        id: 'webcam',
125
        caption: i18n._('Webcam Widget'),
126
        details: i18n._('This widget lets you monitor a webcam.'),
127
        visible: true,
128
        disabled: false
129
      }
130
    ];
131

132
    handleSave = () => {
133
      this.setState({ show: false });
134

135
      const allWidgets = this.widgetList.map(item => item.id);
136
      const activeWidgets = this.widgetList
137
        .filter(item => item.visible)
138
        .map(item => item.id);
139
      const inactiveWidgets = difference(allWidgets, activeWidgets);
140

141
      this.props.onSave(activeWidgets, inactiveWidgets);
142
    };
143

144
    handleCancel = () => {
145
      this.setState({ show: false });
146
    };
147

148
    constructor(props) {
149
      super(props);
150

151
      this.widgetList = this.widgetList.filter(widgetItem => {
152
        if (widgetItem.id === 'grbl' && !includes(controller.loadedControllers, GRBL)) {
153
          return false;
154
        }
155
        if (widgetItem.id === 'marlin' && !includes(controller.loadedControllers, MARLIN)) {
156
          return false;
157
        }
158
        if (widgetItem.id === 'smoothie' && !includes(controller.loadedControllers, SMOOTHIE)) {
159
          return false;
160
        }
161
        if (widgetItem.id === 'tinyg' && !includes(controller.loadedControllers, TINYG)) {
162
          return false;
163
        }
164
        return true;
165
      });
166
    }
167

168
    componentDidUpdate() {
169
      if (!(this.state.show)) {
170
        this.props.onClose();
171
      }
172
    }
173

174
    render() {
175
      const defaultWidgets = store.get('workspace.container.default.widgets', [])
176
        .map(widgetId => widgetId.split(':')[0]);
177
      const primaryWidgets = store.get('workspace.container.primary.widgets', [])
178
        .map(widgetId => widgetId.split(':')[0]);
179
      const secondaryWidgets = store.get('workspace.container.secondary.widgets', [])
180
        .map(widgetId => widgetId.split(':')[0]);
181
      const activeWidgets = union(defaultWidgets, primaryWidgets, secondaryWidgets);
182

183
      this.widgetList.forEach(widget => {
184
        if (includes(activeWidgets, widget.id)) {
185
          widget.visible = true;
186
        } else {
187
          widget.visible = false;
188
        }
189
      });
190

191
      return (
192
        <Modal
193
          size="md"
194
          onClose={this.handleCancel}
195
          show={this.state.show}
196
        >
197
          <Modal.Header>
198
            <Modal.Title>{i18n._('Widgets')}</Modal.Title>
199
          </Modal.Header>
200
          <Modal.Body style={{ padding: 0 }}>
201
            <WidgetList
202
              list={this.widgetList}
203
              onChange={(id, checked) => {
204
                const o = find(this.widgetList, { id: id });
205
                if (o) {
206
                  o.visible = checked;
207
                }
208
              }}
209
            />
210
          </Modal.Body>
211
          <Modal.Footer>
212
            <button
213
              type="button"
214
              className="btn btn-default"
215
              onClick={this.handleCancel}
216
            >
217
              {i18n._('Cancel')}
218
            </button>
219
            <button
220
              type="button"
221
              className="btn btn-primary"
222
              onClick={this.handleSave}
223
            >
224
              {i18n._('OK')}
225
            </button>
226
          </Modal.Footer>
227
        </Modal>
228
      );
229
    }
230
}
231

232
export default WidgetManager;
233