copy old frontend

src/app/components/base/ColorPicker/ColorPicker.html

@@ -0,0 +1,2 @@
+<label for="{{name}}">{{label}}</label>
+<input type="color" class="{{name}} ColorPicker" name="{{name}}">

src/app/components/base/ColorPicker/ColorPicker.js

@@ -0,0 +1,34 @@
+import $ from 'jquery';
+import Component from '../../../core/Component';
+import markup from './ColorPicker.html';
+
+export default class ColorPicker extends Component {
+
+    constructor(ctx, node, template) {
+        super(ctx, node, template || markup);
+        this.render(this.config);
+    }
+
+    onChange(evt) {}
+
+    inputChange(evt) {
+        this.value = evt.target.value;
+        this.onChange(evt);
+    }
+
+
+    subscribe() {
+        // change to event input when ws is implemented
+        this.node.delegate('input', 'input',
+            this.inputChange.bind(this));
+    }
+    
+    /* delegate() {
+        return [{
+            selector: 'input',
+            event: 'input',
+            handler: this.inputChange.bind(this)
+        }];
+    }  */
+
+}

src/app/components/base/Slider/Slider.html

@@ -0,0 +1,2 @@
+<label>{{label}}</label>
+<input type="range" name="{{name}}" value="{{value}}" min="{{min}}" max="{{max}}">

src/app/components/base/Slider/Slider.js

@@ -0,0 +1,25 @@
+import $ from 'jquery';
+import Component from '../../../core/Component';
+import markup from './Slider.html';
+
+export default class Slider extends Component {
+
+    constructor(ctx, node, template) {
+        super(ctx, node, template || markup);
+        this.render(this.config);
+    }
+
+    onChange(evt) {}
+
+    sliderChange(evt) {
+        this.value = evt.target.value;
+        this.onChange(evt);
+    }
+
+
+    subscribe() {
+        this.node.delegate('input', 'input',
+            this.sliderChange.bind(this));
+    }
+
+}

src/app/components/base/Switch/Switch.html

@@ -0,0 +1,5 @@
+<label for="{{name}}">{{label}}</label>
+<label class="switch {{name}}" name="{{name}}">
+  <input type="checkbox" name="{{name}}">
+  <span class="slider round"></span>
+</label>

src/app/components/base/Switch/Switch.js

@@ -0,0 +1,30 @@
+import $ from 'jquery';
+import Component from '../../../core/Component';
+import markup from './Switch.html';
+
+export default class Switch extends Component {
+
+    constructor(ctx, node, template) {
+        super(ctx, node, template || markup);
+        this.state = false;
+        this.render(this.config);
+        this._subscribe();
+    }
+
+    onClick(evt) {}
+
+    switchState(evt) {
+        this.state = !this.state;
+    }
+
+    clickSwitch(evt) {
+        this.switchState(evt);
+        this.onClick(evt);
+    }
+
+    _subscribe() {
+        this.node.delegate('.slider', 'click',
+            this.clickSwitch.bind(this));
+    }
+
+}

src/app/components/base/TextInput/TextInput.html

@@ -0,0 +1,2 @@
+<label for="{{name}}">{{label}}</label>
+<input type="text" class="{{name}}" name="{{name}}" placeholder="{{placeholder}}">

src/app/components/base/TextInput/TextInput.js

@@ -0,0 +1,25 @@
+import $ from 'jquery';
+import Component from '../../../core/Component';
+import markup from './TextInput.html';
+
+export default class TextInput extends Component {
+
+    constructor(ctx, node, template) {
+        super(ctx, node, template || markup);
+        this.render(this.config);
+    }
+
+    onChange(evt) {}
+
+    inputChange(evt) {
+        this.value = evt.target.value;
+        this.onInput(evt);
+    }
+
+
+    subscribe() {
+        this.node.delegate('input', 'input',
+            this.inputChange.bind(this));
+    }
+
+}