Hi everyone,
I just created a simple list item widget to display recommendations for ventilating rooms (I do this manually).
I looks like this:
However I see two problems here and I cannot figure out what is going on or how to fix this:
- You can see that I have multiple analyzer actions depending on which button you press. However only the last two buttons actually open up the analyzer (CO2 button and the ventilation recommendation button/last button in the row). The divs look exactly the same as expected so this might be a limitation of the framework?!
- On the phone the list is too wide. Therefore I added the flex-wrap: wrap style to the f7-row but it does not seem to do anything. On my phone I would either hide the detail items in the list item completely and only show the recommendation button or at least wrap the contents on the next line. Right now I cannot even see the title of the list item anymore and the final button is barely visible…
uid: venting_list_item
tags: []
props:
parameters:
- description: Room name
name: room
required: false
type: TEXT
- context: item
description: Room temperature
label: Temperature
name: temperature
required: true
type: TEXT
- context: item
description: Room humidity
label: Humidity
name: humidity
required: true
type: TEXT
- context: item
description: Room CO2 measurement
label: CO2
name: co2
required: false
type: TEXT
- context: item
description: Room dewpoint
label: Dewpoint
name: dewpoint
required: true
type: TEXT
- context: item
description: Outdoor dewpoint
label: Outdoor dewpoint
name: outdoor_dewpoint
required: true
type: TEXT
- context: item
description: Room venting recommendation
label: Venting recommended
name: venting
required: true
type: TEXT
parameterGroups: []
timestamp: Nov 3, 2024, 1:34:48 PM
component: oh-list-item
config:
title: =props.room
icon: '=items[props.venting].state === "ON" ? "oh:flow" : "oh:humidity-50"'
slots:
after:
- component: f7-row
config:
style:
flex-wrap: wrap
slots:
default:
- component: f7-button
config:
style:
min-width: 70px
iconF7: thermometer
text: =items[props.temperature].displayState || items[props.temperature].state
colorTheme: gray
action: analyzer
actionAnalyzerItems: =[props.temperature]
- component: f7-button
config:
style:
min-width: 70px
iconF7: drop
text: =items[props.humidity].displayState || items[props.humidity].state
colorTheme: gray
action: analyzer
actionAnalyzerItems: =[props.humidity]
- component: oh-button
config:
style:
min-width: 100px
iconF7: wind
text: =items[props.co2].displayState || items[props.co2].state || "- ppm"
colorTheme: gray
action: '=props.co2 == null ? "" : "analyzer"'
actionAnalyzerItems: =[props.co2]
- component: oh-button
config:
style:
min-width: 100px
text: =items[props.venting].displayState || items[props.venting].state
round: true
fill: true
bgColor: '=items[props.venting].state === "ON" ? "red" : "green"'
action: analyzer
actionAnalyzerItems: =[props.humidity, props.temperature, props.dewpoint,
props.outdoor_dewpoint, props.venting]