iot/sprocket-ui
1
0
Fork 0
mirror of https://gitlab.com/wirelos/sprocket-ui.git synced 2025-12-16 06:34:32 +01:00
Code Issues Packages Projects Releases Wiki Activity

select input component

Browse Source
This commit is contained in:
0x1d
2018-09-17 10:18:53 +02:00
parent 20e87b30f3
commit 56773fdfad
14 changed files with 287 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/app/components/ParamSelect.js Normal file
View File

@@ -0,0 +1,23 @@
import $ from 'jquery';
import Select from './base/Select/Select';
export default class ParamSelect extends Select {
constructor(ctx, node) {
super(ctx, node);
this.render({
label: this.config.label,
name: this.config.name,
entries: this.config.entries
});
}
onChange(evt) {
let obj = {};
obj[this.config.name] = evt.target.value;
this.ctx.ws.send(JSON.stringify(obj));
}
}

6
src/app/components/base/Select/Select.html Normal file
View File

@@ -0,0 +1,6 @@
<label for="{{name}}">{{label}}</label>
<select name="{{name}}">
{{#entries}}
<option value="{{value}}">{{text}}</option>
{{/entries}}
</select>

21
src/app/components/base/Select/Select.js Normal file
View File

@@ -0,0 +1,21 @@
import $ from 'jquery';
import Component from '../../../core/Component';
import markup from './Select.html';
export default class Select extends Component {
constructor(ctx, node, template) {
super(ctx, node, template || markup);
this.render(this.config);
}
onChange(evt) {
console.log(evt.target.value);
}
subscribe() {
this.node.delegate('select', 'change', this.onChange.bind(this));
}
}

2
src/app/components/exports.js
View File

@@ -1,6 +1,7 @@
export { default as Form } from './base/Form/Form'
export { default as Switch } from './base/Switch/Switch'
export { default as Slider } from './base/Slider/Slider'
export { default as Select } from './base/Select/Select'
export { default as TextInput } from './base/TextInput/TextInput'
export { default as ColorPicker } from './base/ColorPicker/ColorPicker'
export { default as PresetSwitch } from './PresetSwitch'
@@ -8,4 +9,5 @@ export { default as ParamSlider } from './ParamSlider'
export { default as ParamText } from './ParamText'
export { default as ParamColor } from './ParamColor'
export { default as ParamWs } from './ParamWs'
export { default as ParamSelect } from './ParamSelect'
export { default as LedStripPatternSwitch } from './LedStripPatternSwitch'

28
src/pages/index.html
View File

@@ -39,28 +39,12 @@
data-mode="2"
data-name="color2"
data-label="Color 2">
</li>
<li class="form-row LedStripPatternSwitch"
data-group="stripPattern"
data-id="1"
data-mode="3"
data-name="Rainbow"
data-label="Rainbow">
</li>
<li class="form-row LedStripPatternSwitch"
data-group="stripPattern"
data-name="TheaterChase"
data-label="Theater Chase"
data-id="2"
data-mode="3">
</li>
<li class="form-row LedStripPatternSwitch"
data-group="stripPattern"
data-name="Scanner"
data-label="Scanner"
data-id="4"
data-mode="3">
</li>
</li>
<li class="form-row ParamSelect"
data-label="Pattern"
data-name="pattern"
data-entries='[{"text": "None", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}]'
></li>
</ul>
</div>
</form>

39
src/pages/matrix.html → src/pages/test-controls.html
View File

@@ -12,7 +12,7 @@
<body class="sui">
<div class="content">
<form class="param-control container open collapsible">
<!-- <form class="param-control container open collapsible">
<span class="heading">Debug</span>
<div class="content">
<ul>
@@ -25,33 +25,45 @@
</ul>
<br>
</div>
</form>
</form> -->
<form class="param-control container collapsible open" action="#" method="POST">
<span class="heading">Strip</span>
<div class="content">
<ul>
<li class="form-row ParamColor"
data-mode="2"
data-name="color"
data-label="Color"
data-endpoint="/patterns">
data-label="Color">
</li>
<li class="form-row ParamColor"
data-mode="2"
data-name="color2"
data-label="Color 2">
</li>
<li class="form-row ParamSelect"
data-label="Pattern"
data-name="pattern"
></li>
<li class="form-row LedStripPatternSwitch"
data-group="stripPattern"
data-id="1"
data-mode="3"
data-name="Rainbow"
data-label="Rainbow"
data-endpoint="/strip/pattern">
</li>
<li class="form-row LedStripPatternSwitch"
data-group="stripPattern"
data-name="Scanner"
data-label="Scanner"
data-endpoint="/strip/pattern">
data-label="Rainbow">
</li>
<li class="form-row LedStripPatternSwitch"
data-group="stripPattern"
data-name="TheaterChase"
data-label="Theater Chase"
data-endpoint="/strip/pattern">
data-id="2"
data-mode="3">
</li>
<li class="form-row LedStripPatternSwitch"
data-group="stripPattern"
data-name="Scanner"
data-label="Scanner"
data-id="4"
data-mode="3">
</li>
</ul>
</div>
@@ -59,6 +71,7 @@
<div class="settings container collapsible open">
<span class="heading">WiFi Settings</span>
<div class="content">
<!-- <div class="Form" data-name="configForm" data-endpoint="/config.json"></div> -->
<form action="/wifiConfig" method="POST">
<!-- <li class="form-row">
<label for="ap">AP Mode</label>

4
src/styles/form/color.less
View File

@@ -2,6 +2,6 @@
flex: none !important;
background-color: transparent;
border: 0;
height: 50px;
width: 75px;
height: 42px;
width: 42px;
}

4
src/styles/form/input.less
View File

@@ -9,10 +9,10 @@
background: transparent;
border: none;
color: @color-white;
border-bottom: solid 1px @color-main;
&:focus, &:hover {
outline: none;
border-bottom: solid 1px @color-main;
box-shadow: 3px @color-main;
border-bottom: 1px solid @color-main-light;
}
}
input[type="checkbox"] {

17
src/styles/form/select.less Normal file
View File

@@ -0,0 +1,17 @@
.sui {
select {
padding: .5em;
color: @color-white;
background: none;
border: none;
border-bottom: solid 1px @color-main;
&:focus, &:hover {
outline: none;
border: none;
border-bottom: solid 1px @color-main-light !important;
}
option {
background: @color-container;
}
}
}

1
src/styles/main.less
View File

@@ -9,3 +9,4 @@
@import "form/layout.less";
@import "form/input.less";
@import "form/color.less";
@import "form/select.less";