Organize JS better (#343)

js/editor/script/call_service.js

@@ -0,0 +1,52 @@
+import { h, Component } from 'preact';
+
+import JSONTextArea from '../json_textarea';
+
+export default class CallServiceAction extends Component {
+  constructor() {
+    super();
+
+    this.onChange = this.onChange.bind(this);
+    this.serviceDataChanged = this.serviceDataChanged.bind(this);
+  }
+
+  onChange(ev) {
+    this.props.onChange(this.props.index, {
+      ...this.props.action,
+      [ev.target.name]: ev.target.value
+    });
+  }
+
+  /* eslint-disable camelcase */
+  serviceDataChanged(data) {
+    this.props.onChange(this.props.index, {
+      ...this.props.action,
+      data,
+    });
+  }
+
+  render({ action }) {
+    const { alias, service, data } = action;
+    return (
+      <div>
+        <paper-input
+          label="Alias"
+          name="alias"
+          value={alias}
+          onChange={this.onChange}
+        />
+        <paper-input
+          label="Service"
+          name="service"
+          value={service}
+          onChange={this.onChange}
+        />
+        Service Data<br />
+        <JSONTextArea
+          value={data}
+          onChange={this.serviceDataChanged}
+        />
+      </div>
+    );
+  }
+}

js/editor/script/index.js

@@ -0,0 +1,50 @@
+import { h, Component } from 'preact';
+
+import ScriptAction from './script_action';
+
+export default class Script extends Component {
+  constructor() {
+    super();
+
+    this.addAction = this.addAction.bind(this);
+    this.actionChanged = this.actionChanged.bind(this);
+  }
+
+  addAction() {
+    const script = this.props.script.concat({
+      service: '',
+    });
+
+    this.props.onChange(script);
+  }
+
+  actionChanged(index, newValue) {
+    const script = this.props.script.concat();
+
+    if (newValue === null) {
+      script.splice(index, 1);
+    } else {
+      script[index] = newValue;
+    }
+
+    this.props.onChange(script);
+  }
+
+  render({ script }) {
+    return (
+      <div class="script">
+        {script.map((act, idx) => (
+          <ScriptAction
+            index={idx}
+            action={act}
+            onChange={this.actionChanged}
+          />))}
+        <paper-card>
+          <div class='card-actions add-card'>
+            <paper-button onTap={this.addAction}>Add action</paper-button>
+          </div>
+        </paper-card>
+      </div>
+    );
+  }
+}

js/editor/script/script_action.js

@@ -0,0 +1,106 @@
+import { h, Component } from 'preact';
+
+import CallService from './call_service';
+
+function getType(action) {
+  if ('service' in action) {
+    return 'Call Service';
+  }
+  return null;
+}
+
+const TYPES = {
+  'Call Service': CallService,
+  Delay: null,
+  'Templated Delay': null,
+  Condition: null,
+  'Fire Event': null,
+};
+
+const OPTIONS = Object.keys(TYPES).sort();
+
+export default class Action extends Component {
+  constructor() {
+    super();
+
+    this.typeChanged = this.typeChanged.bind(this);
+    this.onDelete = this.onDelete.bind(this);
+  }
+
+  typeChanged(ev) {
+    const newType = ev.target.selectedItem.innerHTML;
+    const oldType = getType(this.props.action);
+
+    if (oldType !== newType) {
+      this.props.onChange(this.props.index, {
+        platform: newType,
+      });
+    }
+  }
+
+  onDelete() {
+    // eslint-disable-next-line
+    if (confirm('Sure you want to delete?')) {
+      this.props.onChange(this.props.index, null);
+    }
+  }
+
+  render({ index, action, onChange }) {
+    const type = getType(action);
+    const Comp = TYPES[type];
+    const selected = OPTIONS.indexOf(type);
+    let content;
+
+    if (Comp) {
+      content = (
+        <div>
+          <paper-dropdown-menu-light label="Action Type" no-animations>
+            <paper-listbox
+              slot="dropdown-content"
+              selected={selected}
+              oniron-select={this.typeChanged}
+            >
+              {OPTIONS.map(opt => <paper-item>{opt}</paper-item>)}
+            </paper-listbox>
+          </paper-dropdown-menu-light>
+          <Comp
+            index={index}
+            action={action}
+            onChange={onChange}
+          />
+        </div>
+      );
+    } else {
+      content = (
+        <div>
+          Unsupported action
+          <pre>{JSON.stringify(action, null, 2)}</pre>
+        </div>
+      );
+    }
+
+    return (
+      <paper-card>
+        <div class='card-menu'>
+          <paper-menu-button
+            no-animations
+            horizontal-align="right"
+            horizontal-offset="-5"
+            vertical-offset="-5"
+          >
+            <paper-icon-button
+              icon="mdi:dots-vertical"
+              slot="dropdown-trigger"
+            />
+            <paper-listbox slot="dropdown-content">
+              <paper-item disabled>Duplicate</paper-item>
+              <paper-item onTap={this.onDelete}>Delete</paper-item>
+            </paper-listbox>
+          </paper-menu-button>
+        </div>
+        <div class='card-content'>{content}</div>
+      </paper-card>
+    );
+  }
+
+}