styling update

data/script.js

@@ -10784,12 +10784,30 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
 
 
+let endpoint = '/pixel';
+
 __WEBPACK_IMPORTED_MODULE_0_jquery___default()(() => {
     new __WEBPACK_IMPORTED_MODULE_1__core_App__["a" /* default */](__WEBPACK_IMPORTED_MODULE_0_jquery___default()('body'))
         .components(__WEBPACK_IMPORTED_MODULE_2__components_exports__)
-        .websocket(new WebSocket('ws://192.168.1.246/pixel'));
-});
+        .websocket(new WebSocket(endpoint.indexOf('/') === 0 ? "ws://" + window.location.host + endpoint : endpoint));
 
+    // TODO make components
+    __WEBPACK_IMPORTED_MODULE_0_jquery___default()('.collapsible').each((i, container) => {
+        container.querySelector('.heading').addEventListener('click', (item) => {
+            container.classList.toggle('open');
+        });
+    });
+
+    __WEBPACK_IMPORTED_MODULE_0_jquery___default()('.js-restart').click((evt) => {
+        __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.post('/restart');
+        alert('restarting...');
+    });
+
+    __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.get('/heap', (data) => {
+        __WEBPACK_IMPORTED_MODULE_0_jquery___default()('.js-heap').html(data);
+    });
+
+});
 
 /* let click = element => element.click();
 let check = element => element.setAttribute('checked', 'checked');
@@ -11035,38 +11053,71 @@ class Form extends __WEBPACK_IMPORTED_MODULE_1__core_Component__["a" /* default
 
     constructor(ctx, node) {
         super(ctx, node);
-        this.store = new __WEBPACK_IMPORTED_MODULE_3__core_store_RestStore__["a" /* default */](this.config.endpoint);
-        this.render(this.config);
         
-        this.fields = [];
-        let tf1 = new __WEBPACK_IMPORTED_MODULE_2__TextInput_TextInput__["a" /* default */](ctx); 
-        tf1.config = {
-            name: 'ssid',
-            label: 'SSID',
-            placeholder: 'some AP'
-        };
-        tf1.value = 'MyAp';
-
-        this.fields.push(tf1);
-        this.fields.forEach((f) => {
-            f.render({
-                name: 'ssid',
-                label: 'SSID',
-                placeholder: 'some AP'
-            });
-            this.node.prepend(f);
+        __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.get(this.config.from, (cfg) => {
+            this.node.append(
+                __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this.formTpl({
+                    endpoint: this.config.endpoint,
+                    fields: this.configToFormRow(cfg)
+                })).submit(evt => this.ajaxFormhandler(evt))
+            );
         });
 
-        this.node.delegate('click', '.js-submit', this.onSubmit.bind(this));
+        //this.node.delegate('click', '.js-submit', this.onSubmit.bind(this));
     }
 
-    onSubmit(evt) {
+    formTpl(data) {
+        return `
+            <form action="${data.endpoint}">
+                ${data.fields.join('')}
+                <div class="form-row">
+                    <button type="submit" class="js-submit">Submit</button>
+                </div>
+            </form>
+        `;    
+    } 
+
+    formRowTpl(data) {
+        return `
+            <div class="form-row wrapped">
+                <label for="${data.name}">${data.label}</label>
+                <input type="${data.fieldType}" name="${data.name}" id="${data.name}" value="${data.value}"><br>
+            </div>
+        `;
+    }
+
+    configToFormRow (cfg){
+        let arr = [];
+        for (let key in cfg) {
+            arr.push(this.formRowTpl({
+                label: key,
+                name: key,
+                value: cfg[key],
+                fieldType: key.indexOf('assword') > -1 ? 'password' : 'text'
+            }))
+        }
+        return arr;
+    };
+    
+    ajaxFormhandler(evt){
+        evt.preventDefault();
+        let data = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(evt.currentTarget)
+            .serializeArray()
+            .reduce((obj, item) => {
+                obj[item.name] = item.value;
+                return obj;
+            }, {});
+        __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.post(this.config.endpoint, { fileName: this.config.filename, config: JSON.stringify(data) });
+    };
+
+
+    /* onSubmit(evt) {
         let obj = {};
 
         obj[this.config.name] = this.value;
         //this.store.save(obj);
         console.log(this.value);
-    }
+    } */
 
 }
 /* harmony export (immutable) */ __webpack_exports__["a"] = Form;