iot/sprocket-ui
1
0
Fork 0
mirror of https://gitlab.com/wirelos/sprocket-ui.git synced 2025-12-14 22:02:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

styling update

Browse Source
This commit is contained in:
0x1d
2018-09-18 18:17:16 +02:00
parent 0a67f05189
commit 56514c297c
10 changed files with 215 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
data/index.html
View File

@@ -12,22 +12,8 @@
<body class="sui"> <body class="sui">
<div class="content"> <div class="content">
<!-- <form class="param-control container open collapsible">
<span class="heading">Debug</span>
<div class="content">
<ul>
<li class="form-row ParamWs"
data-name="scrollText"
data-label="Audio"
data-placeholder="some scroll text"
data-endpoint="audiosprocket.lan/audio">
</li>
</ul>
<br>
</div>
</form> -->
<form class="param-control container collapsible open" action="#" method="POST"> <form class="param-control container collapsible open" action="#" method="POST">
<span class="heading">Strip</span> <span class="heading">Pixels</span>
<div class="content"> <div class="content">
<ul> <ul>
<li class="form-row ParamColor" <li class="form-row ParamColor"
@@ -46,7 +32,7 @@
data-name="pattern" data-name="pattern"
data-topic="pixels/pattern" data-topic="pixels/pattern"
data-default="0" data-default="0"
data-entries='[{"text": "Color", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}, {"text": "Fade", "value": "5"}]' data-entries='[{"text": "None", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}, {"text": "Fade", "value": "5"}]'
></li> ></li>
<!-- <li class="form-row ParamSlider" <!-- <li class="form-row ParamSlider"
data-name="totalSteps" data-name="totalSteps"
@@ -67,38 +53,22 @@
</ul> </ul>
</div> </div>
</form> </form>
<div class="settings container collapsible open"> <div class="settings container collapsible">
<span class="heading">WiFi Settings</span> <span class="heading">Settings</span>
<div class="content"> <div class="content">
<!-- <div class="Form" data-name="configForm" data-endpoint="/config.json"></div> --> <h2>Network</h2>
<form action="/wifiConfig" method="POST"> <div class="Form" data-fileName="/config.json" data-name="configForm" data-from="/config.json" data-endpoint="/config"></div>
<!-- <li class="form-row"> <h2>NeoPixel</h2>
<label for="ap">AP Mode</label> <div class="Form" data-fileName="/pixelConfig.json" data-name="configForm" data-from="/pixelConfig.json" data-endpoint="/config"></div>
<label class="switch ap-mode">
<input type="checkbox" name="apMode">
<span class="slider round" data-bind="apMode" data-state="false"></span>
</label>
</li -->
<li class="form-row">
<label for="ssid">SSID</label>
<input type="text" name="ssid" placeholder="Default AP: Th1ngs4P">
</li>
<li class="form-row">
<label for="password">PW</label>
<input type="password" name="password" placeholder="Default: th3r31sn0sp00n">
</li>
<li class="form-row">
<label for="hostName">Hostname</label>
<input type="text" name="hostName" placeholder="Default: 192.168.1.143">
</li>
<li class="form-row">
<button type="submit">Save</button>
</li>
</ul>
</form>
</div> </div>
</div> </div>
<div class="settings container collapsible">
<span class="heading">System</span>
<div class="content">
<div><label>Free Heap: </label><span class="js-heap"></span><span>&nbsp;bytes</span><br><br></div>
<button class="js-restart">Restart</button>
</div>
</div>
</div> </div>
</body> </body>

99
data/script.js
View File

@@ -10784,12 +10784,30 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
let endpoint = '/pixel';
__WEBPACK_IMPORTED_MODULE_0_jquery___default()(() => { __WEBPACK_IMPORTED_MODULE_0_jquery___default()(() => {
new __WEBPACK_IMPORTED_MODULE_1__core_App__["a" /* default */](__WEBPACK_IMPORTED_MODULE_0_jquery___default()('body')) new __WEBPACK_IMPORTED_MODULE_1__core_App__["a" /* default */](__WEBPACK_IMPORTED_MODULE_0_jquery___default()('body'))
.components(__WEBPACK_IMPORTED_MODULE_2__components_exports__) .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 click = element => element.click();
let check = element => element.setAttribute('checked', 'checked'); 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) { constructor(ctx, node) {
super(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 = []; __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.get(this.config.from, (cfg) => {
let tf1 = new __WEBPACK_IMPORTED_MODULE_2__TextInput_TextInput__["a" /* default */](ctx); this.node.append(
tf1.config = { __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this.formTpl({
name: 'ssid', endpoint: this.config.endpoint,
label: 'SSID', fields: this.configToFormRow(cfg)
placeholder: 'some AP' })).submit(evt => this.ajaxFormhandler(evt))
}; );
tf1.value = 'MyAp';
this.fields.push(tf1);
this.fields.forEach((f) => {
f.render({
name: 'ssid',
label: 'SSID',
placeholder: 'some AP'
});
this.node.prepend(f);
}); });
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 = {}; let obj = {};
obj[this.config.name] = this.value; obj[this.config.name] = this.value;
//this.store.save(obj); //this.store.save(obj);
console.log(this.value); console.log(this.value);
} } */
} }
/* harmony export (immutable) */ __webpack_exports__["a"] = Form; /* harmony export (immutable) */ __webpack_exports__["a"] = Form;

16
data/styles.css
View File

@@ -10,7 +10,7 @@
.sui { .sui {
background: #000000; background: #000000;
color: #0eb8c0; color: #0eb8c0;
font-family: "Open Sans"; font-family: Tahoma, Geneva, sans-serif;
font-size: 16px; font-size: 16px;
} }
.sui * { .sui * {
@@ -37,6 +37,10 @@
display: block; display: block;
margin-bottom: 16px; margin-bottom: 16px;
} }
.sui h2 {
font-size: 16px;
font-weight: 400;
}
.container { .container {
background: #333333; background: #333333;
padding: 16px; padding: 16px;
@@ -231,6 +235,14 @@ form .form-row input[type="checkbox"] {
flex: 3; 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) { @media screen and (min-width: 992px) {
form .form-row > input, form .form-row > input,
form .form-row > span { form .form-row > span {
@@ -245,7 +257,7 @@ form .form-row input[type="checkbox"] {
} }
.sui input[type="text"], .sui input[type="text"],
.sui input[type="password"] { .sui input[type="password"] {
height: 16px; height: 32px;
background: transparent; background: transparent;
border: none; border: none;
color: #eeeeee; color: #eeeeee;

3
src/app/components/base/Form/Form.html
View File

@@ -1,3 +0,0 @@
<form action="{{endpoint}}">
<button class="js-submit">Submit</button>
</form>

77
src/app/components/base/Form/Form.js
View File

@@ -7,37 +7,70 @@ export default class Form extends Component {
constructor(ctx, node) { constructor(ctx, node) {
super(ctx, node); super(ctx, node);
this.store = new Store(this.config.endpoint);
this.render(this.config);
this.fields = []; $.get(this.config.from, (cfg) => {
let tf1 = new TextInput(ctx); this.node.append(
tf1.config = { $(this.formTpl({
name: 'ssid', endpoint: this.config.endpoint,
label: 'SSID', fields: this.configToFormRow(cfg)
placeholder: 'some AP' })).submit(evt => this.ajaxFormhandler(evt))
}; );
tf1.value = 'MyAp';
this.fields.push(tf1);
this.fields.forEach((f) => {
f.render({
name: 'ssid',
label: 'SSID',
placeholder: 'some AP'
});
this.node.prepend(f);
}); });
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 = $(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 = {}; let obj = {};
obj[this.config.name] = this.value; obj[this.config.name] = this.value;
//this.store.save(obj); //this.store.save(obj);
console.log(this.value); console.log(this.value);
} } */
} }

22
src/app/main.js
View File

@@ -4,12 +4,30 @@ import $ from 'jquery';
import App from './core/App'; import App from './core/App';
import * as components from './components/exports'; import * as components from './components/exports';
let endpoint = '/pixel';
$(() => { $(() => {
new App($('body')) new App($('body'))
.components(components) .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 click = element => element.click();
let check = element => element.setAttribute('checked', 'checked'); let check = element => element.setAttribute('checked', 'checked');

60
src/pages/index.html
View File

@@ -12,22 +12,8 @@
<body class="sui"> <body class="sui">
<div class="content"> <div class="content">
<!-- <form class="param-control container open collapsible">
<span class="heading">Debug</span>
<div class="content">
<ul>
<li class="form-row ParamWs"
data-name="scrollText"
data-label="Audio"
data-placeholder="some scroll text"
data-endpoint="audiosprocket.lan/audio">
</li>
</ul>
<br>
</div>
</form> -->
<form class="param-control container collapsible open" action="#" method="POST"> <form class="param-control container collapsible open" action="#" method="POST">
<span class="heading">Strip</span> <span class="heading">Pixels</span>
<div class="content"> <div class="content">
<ul> <ul>
<li class="form-row ParamColor" <li class="form-row ParamColor"
@@ -46,7 +32,7 @@
data-name="pattern" data-name="pattern"
data-topic="pixels/pattern" data-topic="pixels/pattern"
data-default="0" data-default="0"
data-entries='[{"text": "Color", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}, {"text": "Fade", "value": "5"}]' data-entries='[{"text": "None", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}, {"text": "Fade", "value": "5"}]'
></li> ></li>
<!-- <li class="form-row ParamSlider" <!-- <li class="form-row ParamSlider"
data-name="totalSteps" data-name="totalSteps"
@@ -67,38 +53,22 @@
</ul> </ul>
</div> </div>
</form> </form>
<div class="settings container collapsible open"> <div class="settings container collapsible">
<span class="heading">WiFi Settings</span> <span class="heading">Settings</span>
<div class="content"> <div class="content">
<!-- <div class="Form" data-name="configForm" data-endpoint="/config.json"></div> --> <h2>Network</h2>
<form action="/wifiConfig" method="POST"> <div class="Form" data-fileName="/config.json" data-name="configForm" data-from="/config.json" data-endpoint="/config"></div>
<!-- <li class="form-row"> <h2>NeoPixel</h2>
<label for="ap">AP Mode</label> <div class="Form" data-fileName="/pixelConfig.json" data-name="configForm" data-from="/pixelConfig.json" data-endpoint="/config"></div>
<label class="switch ap-mode">
<input type="checkbox" name="apMode">
<span class="slider round" data-bind="apMode" data-state="false"></span>
</label>
</li -->
<li class="form-row">
<label for="ssid">SSID</label>
<input type="text" name="ssid" placeholder="Default AP: Th1ngs4P">
</li>
<li class="form-row">
<label for="password">PW</label>
<input type="password" name="password" placeholder="Default: th3r31sn0sp00n">
</li>
<li class="form-row">
<label for="hostName">Hostname</label>
<input type="text" name="hostName" placeholder="Default: 192.168.1.143">
</li>
<li class="form-row">
<button type="submit">Save</button>
</li>
</ul>
</form>
</div> </div>
</div> </div>
<div class="settings container collapsible">
<span class="heading">System</span>
<div class="content">
<div><label>Free Heap: </label><span class="js-heap"></span><span>&nbsp;bytes</span><br><br></div>
<button class="js-restart">Restart</button>
</div>
</div>
</div> </div>
</body> </body>

14
src/styles/form/layout.less
View File

@@ -31,8 +31,18 @@ form {
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.form-row > input, .form-row > span { .form-row > input, .form-row > span {
flex: 3; flex: 3;
}
}
@media screen and (max-width: 460px) {
.form-row {
&.wrapped {
display: block;
* {
display: block;
}
}
} }
} }
@media screen and (min-width: 992px) { @media screen and (min-width: 992px) {

7
src/styles/heading.less
View File

@@ -2,4 +2,11 @@
font-size: 1.2em; font-size: 1.2em;
display: block; display: block;
margin-bottom: @default-margin; margin-bottom: @default-margin;
}
.sui {
h2 {
font-size: 16px;
font-weight: 400;
}
} }

4
src/styles/theme.less
View File

@@ -1,4 +1,4 @@
@default-font: "Open Sans"; @default-font: Tahoma, Geneva, sans-serif;
@color-black: #000000; @color-black: #000000;
@color-white: #eeeeee; @color-white: #eeeeee;
@@ -15,5 +15,5 @@
@default-border-color: #555555; @default-border-color: #555555;
@default-font-size: 16px; @default-font-size: 16px;
@input-text-height: 16px; @input-text-height: 32px;
@input-checkbox-scale: 2; @input-checkbox-scale: 2;