Skip to content

Commit

Permalink
number, date and time input using hints
Browse files Browse the repository at this point in the history 
Signed-off-by: Mark Herwege <[email protected]>
  • Loading branch information
@mherwege
mherwege committed Mar 10, 2023
1 parent bbd3400 commit 197008d
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 34 deletions.
55 changes: 51 additions & 4 deletions ...rg.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/InputRenderer.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
import org.openhab.core.i18n.TranslationProvider;
import org.openhab.core.items.Item;
import org.openhab.core.items.ItemNotFoundException;
import org.openhab.core.library.types.DateTimeType;
import org.openhab.core.model.sitemap.sitemap.Input;
import org.openhab.core.model.sitemap.sitemap.Widget;
import org.openhab.core.types.State;
Expand Down Expand Up @@ -58,17 +59,51 @@ public boolean canRender(Widget w) {

@Override
public EList<Widget> renderWidget(Widget w, StringBuilder sb, String sitemap) throws RenderException {
Input input = (Input) w;

String snippet = getSnippet("input");

snippet = preprocessSnippet(snippet, w);

String dataState = getValue(w);
String inputHint = input.getInputHint();
inputHint = inputHint == null ? "text" : inputHint.toLowerCase();
snippet = snippet.replace("%input_hint%", inputHint);

String inputType = inputHint;
String inputPattern = "";
if ("number".equals(inputType)) {
inputType = "text";
inputPattern = "pattern=\"[0-9]*([\\.|,][0-9]*)?\"";
} else if ("date".equals(inputType)) {
inputPattern = "pattern=\"[0-9]{4}-[0-9]d{2}-[0-9]d{2}\"";
} else if ("time".equals(inputType)) {
inputPattern = "pattern=\"[0-9]{2}:[0-9]{2}\"";
} else if ("datetime".equals(inputType)) {
inputType = "datetime-local";
inputPattern = "pattern=\"[0-9]{4}-[0-9]d{2}-[0-9]d{2}T[0-9]{2}:[0-9]{2}\"";
}
snippet = snippet.replace("%input_type%", inputType);
snippet = snippet.replace("%input_pattern%", inputPattern);

String displayState = getValue(w);
State state = itemUIRegistry.getState(w);
if (state == null || state instanceof UnDefType) {
snippet = snippet.replace("%undef_state%", dataState);
snippet = snippet.replace("%undef_state%", displayState);
snippet = snippet.replace("%data_state%", "");
} else {
snippet = snippet.replace("%undef_state%", "");
String dataState = displayState;
if ("number".equals(inputHint)) {
dataState = displayState.trim().split(" ")[0];
} else if (state instanceof DateTimeType) {
if ("date".equals(inputHint)) {
dataState = ((DateTimeType) state).format("%1$tY-%1$tm-%1$td");
} else if ("time".equals(inputHint)) {
dataState = ((DateTimeType) state).format("%1$tT");
} else if ("datetime".equals(inputHint)) {
dataState = ((DateTimeType) state).format("%1$tY-%1$tm-%1$tdT%1$tT");
}
}
snippet = snippet.replace("%data_state%", dataState);
}

Expand All @@ -80,12 +115,24 @@ public EList<Widget> renderWidget(Widget w, StringBuilder sb, String sitemap) th
}
String dataType;
if (item != null && item.getAcceptedDataTypes().stream().anyMatch(o -> Number.class.isAssignableFrom(o))) {
dataType = "Number";
dataType = "number";
} else if (item != null
&& item.getAcceptedDataTypes().stream().anyMatch(o -> DateTimeType.class.isAssignableFrom(o))) {
dataType = "datetime";
} else {
dataType = "Text";
dataType = "text";
}
snippet = snippet.replace("%data_type%", dataType);

String unitSnippet = "";
if ("number".equals(inputHint)) {
String[] dataStateArray = displayState.trim().split(" ");
if (dataStateArray.length > 1) {
unitSnippet = "<span %valuestyle% class=\"mdl-form__input-unit\">" + dataStateArray[1] + "</span>";
}
}
snippet = snippet.replace("%unit_snippet%", unitSnippet);

// Process the color tags
snippet = processColor(w, snippet);

Expand Down
36 changes: 21 additions & 15 deletions bundles/org.openhab.ui.basic/src/main/resources/snippets/input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,27 @@
%label%
</span>
<div
class="mdl-form__control mdl-form__input mdl-textfield mdl-js-textfield"
data-control-type="input"
data-item="%item%"
data-widget-id="%widget_id%"
data-item-type=%data_type%
for="oh-input-%item%"
class="mdl-form__input"
>
<input
%valuestyle% type="text"
id="oh-input-%item%"
class="mdl-textfield__input"
value="%data_state%"
/>
<label for="oh-input-%item%" class="mdl-textfield__label">
%undef_state%
</label>
<div
class="mdl-form__control mdl-form__input-container mdl-textfield mdl-js-textfield"
data-control-type="input"
data-item="%item%"
data-widget-id="%widget_id%"
data-item-type="%data_type%"
data-input-hint="%input_hint%"
for="oh-input-%item%"
>
<input
%valuestyle% type="%input_type%" %input_pattern%
id="oh-input-%item%"
class="mdl-textfield__input"
value="%data_state%"
/>
<label for="oh-input-%item%" class="mdl-textfield__label">
%undef_state%
</label>
</div>
%unit_snippet%
</div>
</div>
29 changes: 23 additions & 6 deletions bundles/org.openhab.ui.basic/web-src/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,12 +228,8 @@
font-weight: 700;
}
&__label {
@media screen and (max-width: $layout-tablet-size-threshold) {
margin: 0 -12px;
padding: 0 12px 0 0;
}
margin: 0 -16px;
padding: 0 16px 0 0;
margin: 0;
padding: 0;
}
}
}
Expand Down Expand Up @@ -265,6 +261,27 @@
}
&__input {
width: 60%;
display: flex;
align-items: center;
box-sizing: border-box;
@media screen and (max-width: $layout-tablet-size-threshold) {
padding: 0 12px 0 0;
}
padding: 0 16px 0 0;
&-container {
flex-grow: 1;
width: auto;
padding-right: 0;
}
&-unit {
display: inline-block;
box-sizing: border-box;
font-family: "Helvetica","Arial",sans-serif;
font-size: 14px;
font-weight: 700;
text-align: right;
padding-left: 8px;
}
}
&__title {
margin: 0;
Expand Down
40 changes: 31 additions & 9 deletions bundles/org.openhab.ui.basic/web-src/smarthome.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1530,34 +1530,41 @@
var
_t = this;

_t.input = _t.parentNode.querySelector("input[type=text]");
_t.input = _t.parentNode.querySelector("input");
_t.itemType = _t.parentNode.getAttribute(o.itemTypeAttribute);
_t.inputHint = _t.parentNode.getAttribute(o.inputHintAttribute);
_t.verify = undefined;

var
lastValue = _t.input.value,
numberPattern = /^(\+|-)?[0-9\.,]+/,
dotSeparatorPattern = /^-?(([0-9]{1,3}(,[0-9]{3})*)|([0-9]*))?(\.[0-9]+)?$/,
commaSeparatorPattern = /^-?(([0-9]{1,3}(\.[0-9]{3})*)|([0-9]*))?(,[0-9]+)?$/;

function onChange() {
var
changeValue = _t.input.value,
changed = true;
if (_t.itemType === "Number") {

if (_t.itemType === "number") {
changeValue = changeValue.trim();
var numberValue = changeValue.match(numberPattern)[0];
if (numberValue === undefined) {
changed = false;
} else {
var unitValue = changeValue.substring(numberValue.length).trim();
changeValue = numberValue.replace(/^\+/, "");
var numberValueMatch = changeValue.match(numberPattern);
if (numberValueMatch && (numberValueMatch.length > 0)) {
var numberValue = numberValueMatch[0];
var unitValue = changeValue.substring(numberValue.length).trim();
changeValue = numberValue.replace(/^\+/, "");
if (commaSeparatorPattern.test(changeValue) && !dotSeparatorPattern.test(changeValue)) {
changeValue = changeValue.replace(/\./g, "").replace(",", ".");
}
if (unitValue.length > 1) {
changeValue = changeValue + " " + unitValue;
}
} else {
changed = false;
}
} else if (_t.itemtype === "datetime") {
changeValue = changeValue.trim();
changeValue = new Date(changeValue).getTime();
}

if (!changed) {
Expand All @@ -1580,7 +1587,21 @@
if (_t.verify) {
_t.verify.cancel();
}
_t.input.value = value;
if (_t.inputHint === "number") {
var numberValueMatch = value.trim().match(numberPattern);
if (numberValueMatch && (numberValueMatch.length > 0)) {
_t.input.value = numberValueMatch[0];
}
} else if (_t.inputHint === "date") {
_t.input.value = value.trim().split("T")[0];
} else if (_t.inputHint === "time") {
_t.input.value = value.trim().split("T")[1].split(".")[0]
} else if (_t.inputHint === "datetime") {
_t.input.value = value.trim().split(".")[0]
} else {
_t.input.value = value;
}
_t.input.parentNode.MaterialTextfield.checkValidity();
lastValue = value;
};

Expand Down Expand Up @@ -2514,6 +2535,7 @@
})({
itemAttribute: "data-item",
itemTypeAttribute: "data-item-type",
inputHintAttribute: "data-input-hint",
idAttribute: "data-widget-id",
iconAttribute: "data-icon",
iconTypeAttribute: "data-icon-type",
Expand Down

0 comments on commit 197008d

Please sign in to comment.