Hi,
I am trying to design a widget to configure my rollershutters.
The items are simple every rollershutter has following config items:
- TimerUpSwitch: a simple switch to control if you want to rollershutter to go up or down on a timer
- TimerUp: a string item which has a time value
- TimerDownSwitch: a simple switch to control if you want to rollershutter to go up or down on a timer
- TimerDown: a string item which has a time value
I need a widget where I can control these timer switches and the timer itself. Already played a bit but I still have a learning gap to create a good widget. With oh-list and oh-input I created this:
It does its job to control for example the timers of going down, however I would like something like this:
With some info:
Anyone more experienced with widgets and could help me ? A good next step would be to seperate my row items in columns so I could put different components in it.
If it helps this is my current widget code
uid: blinds_timers
tags: []
props:
parameters: []
parameterGroups: []
timestamp: Aug 7, 2022, 11:11:43 AM
component: f7-card
config: {}
slots:
default:
- component: oh-input-card
config:
title: Blinds
outline: false
clearButton: false
inputmode: text
type: time
sendButton: true
item: testtimer
useDisplayState: true
- component: oh-list
slots:
default:
- component: oh-repeater
config:
fragement: true
for: item
sourceType: itemsInGroup
groupItem: testtimer
slots:
default:
- component: oh-input-item
config:
outline: false
clearButton: false
inputmode: text
type: time
sendButton: true
item: =loop.item.name
useDisplayState: true
before: test
title: =loop.item.label
```: