-
-
-
-
-
-
-
-
-
-
- last uri:
-
- last respone:
-
-
-
+
-
-
- -
- Wifi Settings
+ WiFi Settings
+
+
+ last uri:
+
+ last respone:
+
+
+
\ No newline at end of file
diff --git a/data/styles.css b/data/styles.css
index f62a1b5..88db805 100644
--- a/data/styles.css
+++ b/data/styles.css
@@ -1,53 +1,94 @@
-body {
+form .form-row {
+ display: flex;
+ justify-content: flex-end;
+ padding: .2em;
+}
+form .form-row > label {
+ padding: .5em 1em .5em 0;
+ flex: 1;
+}
+form .form-row > input {
+ flex: 2;
+}
+form .form-row > span {
+ flex: 2;
+}
+form .form-row > input,
+form .form-row > button {
+ padding: .5em;
+}
+form .form-row input[type="checkbox"] {
+ margin-top: 12px;
+}
+@media screen and (min-width: 768px) {
+ form .form-row > input,
+ form .form-row > span {
+ flex: 3;
+ }
+}
+@media screen and (min-width: 992px) {
+ form .form-row > input,
+ form .form-row > span {
+ flex: 4;
+ }
+}
+@media screen and (min-width: 1200px) {
+ form .form-row > input,
+ form .form-row > span {
+ flex: 5;
+ }
+}
+.sui {
background: #000000;
color: #0eb8c0;
margin: 0;
padding: 0;
}
-body ul {
+.sui ul {
padding: 0;
}
-body ul li {
- margin: 0 0 16px 0;
+.sui ul li {
+ margin: 0 0 0 0;
}
-body p {
+.sui p {
padding: 0;
margin: 0;
}
-body .content {
+.sui > .content {
padding: 32px;
}
-body .content .heading {
+.sui > .content .heading {
font-size: 1.2em;
margin-bottom: 16px;
display: block;
}
-body .content .container {
+.sui > .content .container {
background: #333333;
padding: 16px;
+ border-radius: 4px;
+ border: solid 1px #555555;
+ margin-bottom: 8px;
}
-body .content input {
- height: 24px;
+.sui > .content input[type="text"] {
+ height: 16px;
}
-.settings .flex-outer li,
-.settings .flex-inner {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
+.sui > .content input[type="checkbox"] {
+ transform: scale(2);
}
-.settings .flex-outer > li > label,
-.settings .flex-outer li p {
- flex: 1 0;
+.sui > .content .form-row > button {
+ background: #097479;
+ color: white;
+ border: 0;
}
-.settings .flex-outer > li > label + *,
-.settings .flex-inner {
- flex: 1 0;
-}
-.spiro-control label {
- width: 10%;
- display: inline-block;
-}
-.spiro-control input[type="range"] {
- width: 80%;
- display: inline-block;
+/*
+.spiro-control {
+ label {
+ width: 10%;
+ display: inline-block;
+ }
+ input[type="range"] {
+ width: 80%;
+ display: inline-block;
+ }
}
+*/
diff --git a/data/wifi.json b/data/wifi.json
index 5ce3d79..c9a0a97 100644
--- a/data/wifi.json
+++ b/data/wifi.json
@@ -1,5 +1,5 @@
{
"apMode": 0,
- "SSID": "myAP",
- "Password": "myAP_password"
+ "SSID": "LaserSpiro",
+ "Password": "th3r31sn0sp00n"
}
\ No newline at end of file
diff --git a/frontend/pages/index.html b/frontend/pages/index.html
index 90b0321..87735da 100644
--- a/frontend/pages/index.html
+++ b/frontend/pages/index.html
@@ -7,51 +7,60 @@
-
+
+
+
+ +
-
-
-
-
-
-
-
-
-
-
-
- last uri:
-
- last respone:
-
-
-
+
-
-
- -
- Wifi Settings
+ WiFi Settings
+
+
+ last uri:
+
+ last respone:
+
+
+
\ No newline at end of file
diff --git a/frontend/scripts/core/App.js b/frontend/scripts/core/App.js
deleted file mode 100644
index 1c90052..0000000
--- a/frontend/scripts/core/App.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import $ from 'jquery';
-
-import * as Components from '../components/exports';
-
-
-export default class App {
-
- constructor() {
- this.dataStores = [];
- }
-
- withDataStore(dataStore) {
- this.dataStores[dataStore.constructor.name] = dataStore;
- return this;
- }
-
- getStore(dataStore) {
- return this.dataStores[dataStore];
- }
-
- run(ctx) {
- this._loadComponents(ctx);
- this._beforeInitComponents();
- this._initComponents();
- return this;
- }
-
- _loadComponents(ctx) {
- this.components = this.components || [];
- for (let c in Components) {
- let nodes = ctx ? ctx.find('.' + c) : [];
- for (let i = 0; i < nodes.length; i++) {
- let component = new Components[c](this, $(nodes[i]));
- this.components.push(component);
- };
- }
- }
-
- _initComponents() {
- this.components.forEach(this._initComponent);
- }
-
- _beforeInitComponents() {
- this.components.forEach(this._beforeInitComponent);
- }
-
- _initComponent(component) {
- component.init();
- }
-
- _beforeInitComponent(component) {
- component.beforeInit();
- }
-
- render() {
- for (let component in this.components) {
- this.components[component].render();
- }
- return this;
- }
-
-}
\ No newline at end of file
diff --git a/frontend/scripts/core/Component.js b/frontend/scripts/core/Component.js
deleted file mode 100644
index 67e5fdf..0000000
--- a/frontend/scripts/core/Component.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import Mustache from 'mustache';
-import $ from 'jquery';
-import DataField from './data/DataField';
-
-export default class Component {
-
- constructor(ctx, node, withTemplate = true) {
- this.ctx = ctx;
- this.node = node;
- this.component = this.constructor.name;
- this.template = withTemplate ? $.get(this.component + '.html') : undefined; //document.querySelector('#' + this.component).import.body.textContent;
- this.data = {};
- //console.log('init ' + this.component);
- }
-
- beforeInit() {
- this.subscribe();
- }
-
- init() {}
- subscribe() {}
- templateHelpers() { return {}; }
-
- bindData() {
- let _this = this;
- this.node.find('[data-bind]').each(function() {
- var field = $(this);
- _this.data[field.data('bind')] = new DataField(field);
- });
- }
-
- render(data) {
- if (data) data.helpers = this.templateHelpers();
- return this.template
- .then((template) => {
- return new Promise((fulfill, reject) => {
- this.node.html(Mustache.render(template, data));
- this.bindData();
- //this.ctx._loadComponents(this.node);
- fulfill();
- });
- });
- }
-
-}
\ No newline at end of file
diff --git a/frontend/scripts/core/Mediator.js b/frontend/scripts/core/Mediator.js
deleted file mode 100644
index dbc6559..0000000
--- a/frontend/scripts/core/Mediator.js
+++ /dev/null
@@ -1,20 +0,0 @@
-export default class Mediator {
-
- constructor() {
- this.events = [];
- }
-
- on(event, callback, context){
- this.events[event] = this.events[event] || [];
- this.events[event].push(context ? callback.bind(context) : callback);
- };
-
- trigger(event, args){
- if(this.events[event]){
- for (var i = this.events[event].length - 1; i >= 0; i--) {
- this.events[event][i](args || {});
- };
- }
- };
-
-}
diff --git a/frontend/scripts/core/data/DataBinding.js b/frontend/scripts/core/data/DataBinding.js
deleted file mode 100644
index 7821bce..0000000
--- a/frontend/scripts/core/data/DataBinding.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import $ from 'jquery';
-
-export default class DataBinding {
-
- inputChange(node, model = {}) {
- node.on('keyup', function() {
- model.value = this.value;
- });
- return model;
- }
-
- inputHandler() {
- return {
- set: function(target, prop, newValue) {
- if (prop == 'value' && target.id) {
- target[prop] = newValue;
- $('[data-bind="' + target.id + '"]').val(newValue);
- return true;
- } else return false;
-
- },
- get: function(target, name) {
- return target[name];
- }
- };
- }
-
-}
\ No newline at end of file
diff --git a/frontend/scripts/core/data/DataField.js b/frontend/scripts/core/data/DataField.js
deleted file mode 100644
index 0e87f7f..0000000
--- a/frontend/scripts/core/data/DataField.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import DataBinding from './DataBinding';
-
-export default class DataField {
-
- constructor(node, data) {
- this.node = node;
- this.data = {
- id: this.node.data('bind')
- };
- this.bind();
- }
- bind() {
- this.dataBinding = new DataBinding();
- this.dataBinding.inputChange(this.node, this.data);
- this.proxy = new Proxy(this.data, this.dataBinding.inputHandler());
- }
- get value() {
- return this.proxy.value;
- }
- set value(newValue) {
- this.proxy.value = newValue;
- }
-}
\ No newline at end of file
diff --git a/frontend/scripts/core/store/DataStore.js b/frontend/scripts/core/store/DataStore.js
deleted file mode 100644
index 5adf513..0000000
--- a/frontend/scripts/core/store/DataStore.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export default class DataStore {
- constructor(mediator){
- this.mediator = mediator;
- }
- load(entry){}
- save(entry){}
- add(entry){}
- delete(entry){}
-}
diff --git a/frontend/scripts/core/store/RestStore.js b/frontend/scripts/core/store/RestStore.js
deleted file mode 100644
index 07d9e3d..0000000
--- a/frontend/scripts/core/store/RestStore.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import $ from 'jquery';
-import Mediator from '../Mediator';
-import DataStore from './DataStore';
-import StoreAction from './StoreAction';
-
-export default class RestStore extends DataStore {
- constructor(endpoint, mediator = new Mediator()){
- super(mediator);
- this.endpoint = endpoint;
- }
- load(entry){
- return this.request(StoreAction.LOAD, 'GET', entry);
- }
- save(entry){
- return this.request(StoreAction.SAVE, 'POST', entry);
- }
- add(entry){
- return this.request(StoreAction.ADD, 'PUT', entry);
- }
- delete(entry){
- return this.request(StoreAction.DELETE, 'POST', entry);
- }
- request(event, type, payload){
- return $.ajax({
- url: this.endpoint,
- type: type,
- data: payload
- })
- .then(JSON.parse)
- .then((response) => {
- this.mediator.trigger(event, response);
- });
- }
- on(event, subscriber, context){
- this.mediator.on(event, subscriber, context);
- }
-}
diff --git a/frontend/scripts/core/store/StoreAction.js b/frontend/scripts/core/store/StoreAction.js
deleted file mode 100644
index b09a554..0000000
--- a/frontend/scripts/core/store/StoreAction.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
- LOAD: 'load',
- SAVE: 'save',
- ADD: 'add',
- DELETE: 'delete'
-}
diff --git a/frontend/styles/form.less b/frontend/styles/form.less
new file mode 100644
index 0000000..576244e
--- /dev/null
+++ b/frontend/styles/form.less
@@ -0,0 +1,44 @@
+form {
+ .form-row {
+ display: flex;
+ justify-content: flex-end;
+ padding: .2em;
+
+ }
+ .form-row > label {
+ padding: .5em 1em .5em 0;
+ flex: 1;
+ }
+ .form-row > input {
+ flex: 2;
+
+ }
+ .form-row > span {
+ flex: 2;
+ }
+ .form-row > input,
+ .form-row > button {
+ padding: .5em;
+ }
+ .form-row input[type="checkbox"] {
+ margin-top: 12px;
+ }
+ .form-row input[type="range"] {
+
+ }
+ @media screen and (min-width: 768px) {
+ .form-row > input, .form-row > span {
+ flex: 3;
+ }
+ }
+ @media screen and (min-width: 992px) {
+ .form-row > input, .form-row > span {
+ flex: 4;
+ }
+ }
+ @media screen and (min-width: 1200px) {
+ .form-row > input, .form-row > span {
+ flex: 5;
+ }
+ }
+}
\ No newline at end of file
diff --git a/frontend/styles/main.less b/frontend/styles/main.less
index 48c8b41..15a5528 100644
--- a/frontend/styles/main.less
+++ b/frontend/styles/main.less
@@ -1,17 +1,23 @@
+@import "form.less";
@color-black: #000000;
@color-white: #eeeeee;
-@color-main: #0eb8c0;
+@color-main: #097479;
+@color-main-light: #0eb8c0;
@color-container: #333333;
@default-padding: 16px;
@default-margin: 16px;
+@default-margin-small: 8px;
+@default-border-radius: 4px;
+@default-border-color: #555555;
-@input-height: 24px;
+@input-text-height: 16px;
+@input-checkbox-scale: 2;
-body {
+.sui {
background: @color-black;
- color: @color-main;
+ color: @color-main-light;
margin: 0;
padding: 0;
@@ -19,7 +25,7 @@ body {
ul {
padding: 0;
li {
- margin: 0 0 @default-margin 0;
+ margin: 0 0 0 0;
}
}
@@ -28,7 +34,7 @@ body {
margin: 0;
}
- .content {
+ > .content {
padding: @default-padding * 2;
.heading {
font-size: 1.2em;
@@ -38,10 +44,22 @@ body {
.container {
background: @color-container;
padding: @default-padding;
+ border-radius: @default-border-radius;
+ border: solid 1px @default-border-color;
+ margin-bottom: @default-margin-small;
}
- input {
- height: @input-height;
+ input[type="text"] {
+ height: @input-text-height;
}
+ input[type="checkbox"] {
+ transform: scale(@input-checkbox-scale);
+ }
+ .form-row > button {
+ background: @color-main;
+ color: white;
+ border: 0;
+ }
+
}
.sidebar {
.item {
@@ -51,24 +69,8 @@ body {
}
.settings {
- .flex-outer li,
- .flex-inner {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- }
-
- .flex-outer > li > label,
- .flex-outer li p {
- flex: 1 0;
- }
-
- .flex-outer > li > label + *,
- .flex-inner {
- flex: 1 0;
- }
}
-
+/*
.spiro-control {
label {
width: 10%;
@@ -79,3 +81,4 @@ body {
display: inline-block;
}
}
+*/
\ No newline at end of file
+
+
+ +