Consider semantics for default standalone/item/cell widget selection (#1558)

See https://github.com/openhab/openhab-webui/pull/1558#issuecomment-1345574684 for details.

Closes #1494.

Signed-off-by: Florian Michel <florianmichel@hotmail.de>
Also-by: Yannick Schaus <github@schaus.net>
pull/1573/head^2
Florian Michel 2022-12-11 16:30:00 +01:00 committed by GitHub
parent 962de8a426
commit 73d4935c7d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 188 additions and 0 deletions

View File

@ -3,10 +3,14 @@
in the "cellWidget" metadata namespace of the item
*/
import * as Semantics from '@/assets/semantics'
export default function itemDefaultCellComponent (item, itemNameAsFooter) {
const stateDescription = item.stateDescription || {}
const metadata = (item.metadata && item.metadata.cellWidget) ? item.metadata.cellWidget : {}
let component = null
let semanticClass = {}
let semanticProperty = {}
if (metadata.value && metadata.value !== ' ') {
component = {
@ -14,6 +18,15 @@ export default function itemDefaultCellComponent (item, itemNameAsFooter) {
config: Object.assign({}, metadata.config)
}
} else {
item.tags.forEach((tag) => {
if (Semantics.Points.indexOf(tag) >= 0) {
semanticClass = tag
}
if (Semantics.Properties.indexOf(tag) >= 0) {
semanticProperty = tag
}
})
if (item.type === 'Switch' && !stateDescription.readOnly) {
component = {
component: 'oh-cell',
@ -78,6 +91,48 @@ export default function itemDefaultCellComponent (item, itemNameAsFooter) {
// }
// }
// }
if ((semanticClass === 'Control' || semanticClass === 'Setpoint') && !stateDescription.readOnly) {
if (item.type === 'Number:Temperature' || semanticProperty === 'Temperature') {
component = {
component: 'oh-knob-cell',
config: {
min: stateDescription.minimum,
max: stateDescription.maximum,
stepSize: stateDescription.step
}
}
}
if (semanticProperty === 'ColorTemperature' || semanticProperty === 'Level' || semanticProperty === 'SoundVolume') {
component = {
component: 'oh-slider-cell',
config: {
color: 'blue',
action: 'toggle',
actionItem: item.name,
actionCommand: 'ON',
actionCommandAlt: 'OFF',
scaleSubSteps: 5,
min: stateDescription.minimum,
max: stateDescription.maximum,
step: stateDescription.step
}
}
}
}
if (semanticClass === 'Switch' && !stateDescription.readOnly) {
component = {
component: 'oh-cell',
config: {
color: 'blue',
action: 'toggle',
actionItem: item.name,
actionCommand: 'ON',
actionCommandAlt: 'OFF'
}
}
}
}
if (!component) {

View File

@ -3,10 +3,15 @@
in the "widget" metadata namespace of the item
*/
import { DateTimeFunctions } from '@/assets/item-types'
import * as Semantics from '@/assets/semantics'
export default function itemDefaultStandaloneComponent (item) {
const stateDescription = item.stateDescription || {}
const metadata = (item.metadata && item.metadata.widget) ? item.metadata.widget : {}
let component = null
let semanticClass = {}
let semanticProperty = {}
if (metadata.value && metadata.value !== ' ') {
component = {
@ -14,6 +19,15 @@ export default function itemDefaultStandaloneComponent (item) {
config: Object.assign({}, metadata.config)
}
} else {
item.tags.forEach((tag) => {
if (Semantics.Points.indexOf(tag) >= 0) {
semanticClass = tag
}
if (Semantics.Properties.indexOf(tag) >= 0) {
semanticProperty = tag
}
})
if (item.type === 'Switch' && !stateDescription.readOnly) {
component = {
component: 'oh-toggle-card'
@ -73,6 +87,58 @@ export default function itemDefaultStandaloneComponent (item) {
}
}
}
if ((semanticClass === 'Control' || semanticClass === 'Setpoint') && !stateDescription.readOnly) {
if (item.type === 'DateTime') {
component = {
component: 'oh-input-card',
config: {
type: 'datetime-local',
sendButton: true
}
}
}
if (item.type === 'Number') {
component = {
component: 'oh-input-card',
config: {
type: 'number',
inputmode: 'decimal',
sendButton: true
}
}
}
if (item.type === 'Number:Temperature' || semanticProperty === 'Temperature') {
component = {
component: 'oh-stepper-card',
config: {
min: stateDescription.minimum,
max: stateDescription.maximum,
step: stateDescription.step,
buttonsOnly: false
}
}
}
if (semanticProperty === 'ColorTemperature' || semanticProperty === 'Level' || semanticProperty === 'SoundVolume') {
component = {
component: 'oh-slider-card',
config: {
scale: true,
label: true,
scaleSubSteps: 5,
min: stateDescription.minimum,
max: stateDescription.maximum,
step: stateDescription.step
}
}
}
}
if (semanticClass === 'Switch' && !stateDescription.readOnly) {
component = {
component: 'oh-toggle-card'
}
}
}
if (!component) {

View File

@ -5,10 +5,15 @@
* @param {object} [footer] configuration of the label of the component footer. If undefined nothing is displayed in the footer.
* Refer to {@see itemContextLabel} for valid options.
*/
import * as Semantics from '@/assets/semantics'
export default function itemDefaultListComponent (item, footer) {
const stateDescription = item.stateDescription || {}
const metadata = (item.metadata && item.metadata.listWidget) ? item.metadata.listWidget : {}
let component = null
let semanticClass = {}
let semanticProperty = {}
if (metadata.value && metadata.value !== ' ') {
component = {
@ -16,6 +21,15 @@ export default function itemDefaultListComponent (item, footer) {
config: Object.assign({}, metadata.config)
}
} else {
item.tags.forEach((tag) => {
if (Semantics.Points.indexOf(tag) >= 0) {
semanticClass = tag
}
if (Semantics.Properties.indexOf(tag) >= 0) {
semanticProperty = tag
}
})
if (item.type === 'Switch' && !stateDescription.readOnly) {
component = {
component: 'oh-toggle-item'
@ -66,6 +80,59 @@ export default function itemDefaultListComponent (item, footer) {
}
}
}
if ((semanticClass === 'Control' || semanticClass === 'Setpoint') && !stateDescription.readOnly) {
if (item.type === 'DateTime') {
component = {
component: 'oh-input-item',
config: {
type: 'datetime-local',
sendButton: true,
clearButton: true
}
}
}
if (item.type === 'Number') {
component = {
component: 'oh-input-item',
config: {
type: 'number',
inputmode: 'decimal',
sendButton: true
}
}
}
if (item.type === 'Number:Temperature' || semanticProperty === 'Temperature') {
component = {
component: 'oh-stepper-item',
config: {
min: stateDescription.minimum,
max: stateDescription.maximum,
step: stateDescription.step,
buttonsOnly: false
}
}
}
if (semanticProperty === 'ColorTemperature' || semanticProperty === 'Level' || semanticProperty === 'SoundVolume') {
component = {
component: 'oh-slider-item',
config: {
scale: true,
label: true,
scaleSubSteps: 5,
min: stateDescription.minimum,
max: stateDescription.maximum,
step: stateDescription.step
}
}
}
}
if (semanticClass === 'Switch' && !stateDescription.readOnly) {
component = {
component: 'oh-toggle-item'
}
}
}
if (!component) {