lbsadmin/ESPUI
1
0
Fork 0
mirror of https://github.com/s00500/ESPUI.git synced 2025-06-11 18:00:38 +00:00
Code Issues Releases Activity

Added 'type' proptert to text input elements

Browse Source 
Now the text input element can support other HTML input types suxh as date, time, color, password, etc
This commit is contained in:
pcbbc
2022-05-22 23:31:48 +01:00
parent a958feb152
commit a53124de42
12 changed files with 33 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
data/js/controls.js vendored
View File

@ -212,7 +212,7 @@ function start() {
window.location.port != 443
) {
websock = new WebSocket(
"ws://" + window.location.hostname + ":" + window.location.port + "/ws"
"ws://" + window.location.hostname + ":" + window.location.port + "/ws"
);
} else {
websock = new WebSocket("ws://" + window.location.hostname + "/ws");
@ -769,6 +769,7 @@ var addToHTML = function(data) {
var elementHTML = function(data) {
var id = data.id
var elementStyle = data.hasOwnProperty('elementStyle') ? " style='" + data.elementStyle + "' " : "";
var inputType = data.hasOwnProperty('inputType') ? " type='" + data.inputType + "' " : "";
switch(data.type) {
case UI_LABEL:
return "<span id='l" + id + "' " + elementStyle +
@ -814,7 +815,7 @@ var elementHTML = function(data) {
return "<input style='color:black;' " + elementStyle + " id='num" + id +
"' type='number' value='" + data.value + "' onchange='numberchange(" + id + ")' />";
case UI_TEXT_INPUT:
return "<input style='color:black;' " + elementStyle + " id='text" + id +
return "<input " + inputType + "style='color:black;' " + elementStyle + " id='text" + id +
"' value='" + data.value + "' onchange='textchange(" + id + ")' />";
case UI_SELECT:
return "<select style='color:black;' " + elementStyle + " id='select" + id +

4
data/js/controls.min.js vendored
View File

@ -65,7 +65,7 @@ elementHTML(data)+
"<h5>"+data.label+"</h5><hr/></div>";break;case UI_TIME:break;}
parent.append(html);}else{var parent=$("#id"+data.parentControl);parent.append(elementHTML(data));}}
var elementHTML=function(data){var id=data.id
var elementStyle=data.hasOwnProperty('elementStyle')?" style='"+data.elementStyle+"' ":"";switch(data.type){case UI_LABEL:return"<span id='l"+id+"' "+elementStyle+
var elementStyle=data.hasOwnProperty('elementStyle')?" style='"+data.elementStyle+"' ":"";var inputType=data.hasOwnProperty('inputType')?" type='"+data.inputType+"' ":"";switch(data.type){case UI_LABEL:return"<span id='l"+id+"' "+elementStyle+
" class='label label-wrap'>"+data.value+"</span>";case UI_BUTTON:return"<button id='btn"+id+"' "+elementStyle+
" onmousedown='buttonclick("+id+", true)'"+
" onmouseup='buttonclick("+id+", false)'>"+
@ -93,7 +93,7 @@ data.value+"</button>";case UI_SWITCHER:return"<label id='sl"+id+"' "+elementSty
"<input id='sl"+id+"' type='range' min='0' max='100' value='"+data.value+"' "+
elementStyle+" class='range-slider__range'><span class='range-slider__value'>"+
data.value+"</span></div>";case UI_NUMBER:return"<input style='color:black;' "+elementStyle+" id='num"+id+
"' type='number' value='"+data.value+"' onchange='numberchange("+id+")' />";case UI_TEXT_INPUT:return"<input style='color:black;' "+elementStyle+" id='text"+id+
"' type='number' value='"+data.value+"' onchange='numberchange("+id+")' />";case UI_TEXT_INPUT:return"<input "+inputType+"style='color:black;' "+elementStyle+" id='text"+id+
"' value='"+data.value+"' onchange='textchange("+id+")' />";case UI_SELECT:return"<select style='color:black;' "+elementStyle+" id='select"+id+
"' onchange='selectchange("+id+")' />";case UI_GRAPH:return"<figure id='graph"+id+"'><figcaption>"+data.label+"</figcaption></figure>";case UI_GAUGE:return"WILL BE A GAUGE <input style='color:black;' id='gauge"+id+
"' type='number' value='"+data.value+"' onchange='numberchange("+id+")' />";case UI_ACCEL:return"ACCEL // Not implemented fully!<div class='accelerometer' id='accel"+id+