#6423 OtherOptionsWidget, OtherOptionsModel

twosigma · Jan 29, 2018 · e0a79a5 · e0a79a5
1 parent 12a2db6
commit e0a79a5
Showing 1 changed file with 196 additions and 5 deletions.
diff --git a/js/lab/src/tree/JVMOptions/OtherOptionsWidget.ts b/js/lab/src/tree/JVMOptions/OtherOptionsWidget.ts
@@ -15,12 +15,24 @@
  */
 
 import * as $ from "jquery";
+import * as _ from "underscore";
 import { Widget } from "@phosphor/widgets";
+import { MessageLoop, Message } from "@phosphor/messaging";
+import { IOtherJVMOptions } from "../BeakerxApi";
+import { Messages } from "./Messages";
+import OtherOptionsChangedMessage = Messages.OtherOptionsChangedMessage;
 
-export default class OtherOptionsWidget extends Widget {
+export class OtherOptionsWidget extends Widget {
 
+  public readonly ADD_BUTTON_SELECTOR = '#add_option_jvm_sett';
+  public readonly PANEL_SELECTOR = '#other_property';
 
   public readonly HTML_ELEMENT_TEMPLATE = `
+<style>
+#other_property .form-control {
+    margin-right: 10px;
+}
+</style>
 <fieldset>
   <div class="panel panel-default">
     <div class="panel-heading">
@@ -41,13 +53,192 @@ export default class OtherOptionsWidget extends Widget {
 </fieldset>
 `;
 
+  public get $node(): JQuery<HTMLElement> {
+      return $(this.node);
+  }
+
   constructor() {
     super();
-    this.createContent();
+
+    $(this.HTML_ELEMENT_TEMPLATE).appendTo(this.node);
+    this.$node
+      .find(this.ADD_BUTTON_SELECTOR)
+      .on('click', this.addOptionButtonClickedHandler.bind(this));
+  }
+  private clear() {
+    this.$node.find(this.PANEL_SELECTOR).empty();
+  }
+
+  public onLoad(otherOptions: IOtherJVMOptions) {
+    this.clear();
+    this._options = [];
+    for (let option of otherOptions) {
+      this.addFormElement(option);
+    }
+  }
+
+  private addOptionButtonClickedHandler(evt) {
+    this.addFormElement();
+  }
+
+  private createFormRowElement(): JQuery<HTMLElement> {
+    return $('<div>', {
+      class: 'form-group form-inline'
+    });
+  }
+
+  private createInputElement(val: string = ''): JQuery<HTMLElement> {
+    return $('<input>', {
+      class: 'form-control',
+      type: 'text',
+      placeholder: 'value',
+    }).val(val)
+      .data('val', val);
+  }
+
+  private createRemoveButtonElement(): JQuery<HTMLElement> {
+    return $('<button>', {
+      'type': 'button',
+      'class': 'btn btn-default'
+    }).append(
+      $('<i>', { class: 'fa fa-times'})
+    );
+  }
+
+  private addFormElement(value: string = ''): void {
+    let element = this.createFormRowElement()
+      .append(this.createInputElement(value))
+      .append(this.createRemoveButtonElement());
+    element.appendTo(this.$node.find(this.PANEL_SELECTOR))
+
+    MessageLoop.sendMessage(this, new Private.ElementAddedMessage(element));
+  }
+
+  public processMessage(msg: Message): void {
+    switch (msg.type) {
+      case Private.TYPE_ELEMENT_ADDED:
+        this.onElementAdded(msg as Private.ElementAddedMessage);
+        break;
+      case Private.TYPE_ELEMENT_REMOVED:
+        this.onElementRemoved(msg as Private.ElementRemovedMessage);
+        break;
+      default:
+        super.processMessage(msg);
+    }
+  }
+
+  private onElementAdded(msg: Private.ElementAddedMessage): void {
+    let el = msg.element;
+    el.find('button')
+      .on('click', { el: el }, this.removeOptionButtonClickedHandler.bind(this));
+    let input = el.find('input');
+    input
+      .on('change', _.debounce(
+        this.inputChangedHandler.bind(this), 1000
+      ));
+    this.addOption(input.val().toString());
+  }
+
+  private onElementRemoved(msg: Private.ElementRemovedMessage): void {
+    let el = msg.element;
+    let option = el.find('input').val().toString();
+    this.removeOption(option);
+  }
+
+  private removeOptionButtonClickedHandler(evt) {
+    let el: JQuery<HTMLElement> = evt.data.el;
+    el.remove();
+    MessageLoop.sendMessage(this, new Private.ElementRemovedMessage(el));
   }
 
-  private createContent() {
-    $(this.HTML_ELEMENT_TEMPLATE)
-      .appendTo(this.node);
+  private inputChangedHandler(evt): void {
+    let el = $(evt.currentTarget);
+    let prev = el.data('val');
+    let curr = `${el.val()}`;
+    el.data('val', curr);
+    if ('' === prev) {
+      this.addOption(curr);
+      return;
+    }
+    if ('' === curr) {
+      this.removeOption(prev);
+      return;
+    }
+    this.changeOption(prev, curr);
+  }
+
+  private _options: IOtherJVMOptions = [];
+  private addOption(option: string): void {
+    if ('' === option) {
+      return;
+    }
+
+    this._options.push(option);
+    this.optionsChanged();
+  }
+
+  private removeOption(option): void {
+    if ('' === option) {
+      return;
+    }
+    let index = this._options.indexOf(option);
+    if (-1 === index) {
+      return;
+    }
+    this._options.splice(index, 1);
+    this.optionsChanged();
+  }
+
+  private changeOption(from, to): void {
+    let index = this._options.indexOf(from);
+    this._options[index] = to;
+    this.optionsChanged();
+  }
+
+  private optionsChanged() {
+    let msg = new OtherOptionsChangedMessage(this._options);
+    MessageLoop.sendMessage(this.parent, msg);
+  }
+}
+
+export class OtherOptionsModel {
+  constructor(private widget: OtherOptionsWidget) {
+
+  }
+
+  update(otherOptions: IOtherJVMOptions) {
+    this.widget.onLoad(otherOptions);
+  }
+}
+
+namespace Private {
+  export const TYPE_ELEMENT_ADDED = 'element-added';
+
+  export class ElementAddedMessage extends Message {
+    constructor(element: JQuery<HTMLElement>) {
+      super(TYPE_ELEMENT_ADDED);
+      this._element = element;
+    }
+
+    public get element(): JQuery<HTMLElement> {
+      return this._element;
+    }
+
+    private _element: JQuery<HTMLElement>;
+  }
+
+  export const TYPE_ELEMENT_REMOVED = 'element-removed';
+
+  export class ElementRemovedMessage extends Message {
+    constructor(element: JQuery<HTMLElement>) {
+      super(TYPE_ELEMENT_REMOVED);
+      this._element = element;
+    }
+
+    public get element(): JQuery<HTMLElement> {
+      return this._element;
+    }
+
+    private _element: JQuery<HTMLElement>;
   }
 }