diff --git a/data/index.html b/data/index.html
index fd5a08c..2b38b6b 100644
--- a/data/index.html
+++ b/data/index.html
@@ -12,22 +12,8 @@
-
+
+
System
+
+
bytes
+
+
+
+
+
+
+ `;
+ }
+
+ 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;
diff --git a/data/styles.css b/data/styles.css
index 0746973..56f95d5 100644
--- a/data/styles.css
+++ b/data/styles.css
@@ -10,7 +10,7 @@
.sui {
background: #000000;
color: #0eb8c0;
- font-family: "Open Sans";
+ font-family: Tahoma, Geneva, sans-serif;
font-size: 16px;
}
.sui * {
@@ -37,6 +37,10 @@
display: block;
margin-bottom: 16px;
}
+.sui h2 {
+ font-size: 16px;
+ font-weight: 400;
+}
.container {
background: #333333;
padding: 16px;
@@ -231,6 +235,14 @@ form .form-row input[type="checkbox"] {
flex: 3;
}
}
+@media screen and (max-width: 460px) {
+ form .form-row.wrapped {
+ display: block;
+ }
+ form .form-row.wrapped * {
+ display: block;
+ }
+}
@media screen and (min-width: 992px) {
form .form-row > input,
form .form-row > span {
@@ -245,7 +257,7 @@ form .form-row input[type="checkbox"] {
}
.sui input[type="text"],
.sui input[type="password"] {
- height: 16px;
+ height: 32px;
background: transparent;
border: none;
color: #eeeeee;
diff --git a/src/app/components/base/Form/Form.html b/src/app/components/base/Form/Form.html
index d781886..e69de29 100644
--- a/src/app/components/base/Form/Form.html
+++ b/src/app/components/base/Form/Form.html
@@ -1,3 +0,0 @@
-
\ No newline at end of file
diff --git a/src/app/components/base/Form/Form.js b/src/app/components/base/Form/Form.js
index 0e9c640..d5a2b29 100644
--- a/src/app/components/base/Form/Form.js
+++ b/src/app/components/base/Form/Form.js
@@ -7,37 +7,70 @@ export default class Form extends Component {
constructor(ctx, node) {
super(ctx, node);
- this.store = new Store(this.config.endpoint);
- this.render(this.config);
- this.fields = [];
- let tf1 = new TextInput(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);
+ $.get(this.config.from, (cfg) => {
+ this.node.append(
+ $(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 `
+
+ `;
+ }
+
+ formRowTpl(data) {
+ return `
+
+
+
+
+ `;
+ }
+
+ 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 = $(evt.currentTarget)
+ .serializeArray()
+ .reduce((obj, item) => {
+ obj[item.name] = item.value;
+ return obj;
+ }, {});
+ $.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);
- }
+ } */
}
\ No newline at end of file
diff --git a/src/app/main.js b/src/app/main.js
index 3e0200a..856743f 100644
--- a/src/app/main.js
+++ b/src/app/main.js
@@ -4,12 +4,30 @@ import $ from 'jquery';
import App from './core/App';
import * as components from './components/exports';
+let endpoint = '/pixel';
+
$(() => {
new App($('body'))
.components(components)
- .websocket(new WebSocket('ws://192.168.1.246/pixel'));
-});
+ .websocket(new WebSocket(endpoint.indexOf('/') === 0 ? "ws://" + window.location.host + endpoint : endpoint));
+ // TODO make components
+ $('.collapsible').each((i, container) => {
+ container.querySelector('.heading').addEventListener('click', (item) => {
+ container.classList.toggle('open');
+ });
+ });
+
+ $('.js-restart').click((evt) => {
+ $.post('/restart');
+ alert('restarting...');
+ });
+
+ $.get('/heap', (data) => {
+ $('.js-heap').html(data);
+ });
+
+});
/* let click = element => element.click();
let check = element => element.setAttribute('checked', 'checked');
diff --git a/src/pages/index.html b/src/pages/index.html
index fd5a08c..2b38b6b 100644
--- a/src/pages/index.html
+++ b/src/pages/index.html
@@ -12,22 +12,8 @@
-
+
+
System
+
+
bytes
+
+
+