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
parent
962de8a426
commit
73d4935c7d
|
@ -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) {
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in New Issue