MainUI widgets: Conditionally disable/hide swiper slide

elektrolubach · February 20, 2022, 12:38am

Hi folks,

I am currently writing my own widget for displaying the DWDUnwetter warnings.
For this I created a card widget which displays the relevant data:

uid: UnwetterCard_v1
tags: []
props:
  parameters:
    - context: item
      description: Warning "Headline"
      label: Item
      name: headline
      required: false
      type: TEXT
    - context: item
      description: Warning "Type"
      label: Item
      name: type
      required: false
      type: TEXT
    - context: item
      description: Warning "Severity"
      label: Item
      name: severity
      required: false
      type: TEXT
    - context: item
      description: Warning "Severity color"
      label: Item
      name: severityColor
      required: false
      type: TEXT
    - context: item
      description: Warning "Valid from"
      label: Item
      name: validFrom
      required: false
      type: TEXT
    - context: item
      description: Warning "Valid to"
      label: Item
      name: validTo
      required: false
      type: TEXT
    - context: item
      description: Warning "Description"
      label: Item
      name: description
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Feb 20, 2022, 1:02:43 AM
component: f7-card
config:
  style:
    noShadow: false
    class:
      - padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    margin-left: 5px
    margin-right: 5px
  title: =items[props.headline].state
slots:
  content:
    - component: oh-list-card
      config: {}
      slots:
        default:
          - component: oh-list-item
            config:
              title: =items[props.type].state
              icon: f7:wind
              iconColor: =items[props.severityColor].displayState
              badgeColor: =items[props.severityColor].displayState
              badge: =items[props.severity].displayState
          - component: oh-label-item
            config:
              title: "von:"
              item: =props.validFrom
          - component: oh-label-item
            config:
              title: "bis: "
              item: =props.validTo
    - component: f7-card
      config:
        content: =items[props.description].state

I want to display up to 3 warnings within an oh-swiper-card:

Corresponding code:

component: oh-swiper-card
config:
  scrollbar: false
  pagination: true
  navigation: true
  footer: '="Letzte Aktualisierung: "+items.DWDUnwetterWarnungen_LetzteAktualisierung.displayState'
  noBorder: false
  noShadow: false
  outline: false
slots:
  default:
    - component: widget:UnwetterCard_v1
      config:
        headline: DWDUnwetterWarnungen_Headline1
        type: DWDUnwetterWarnungen_Type1
        severity: DWDUnwetterWarnungen_Severity1
        severityColor: DWDUnwetterWarnungen_SeverityColor1
        validFrom: DWDUnwetterWarnungen_ValidFrom1
        validTo: DWDUnwetterWarnungen_ValidTo1
        description: DWDUnwetterWarnungen_Description1
    - component: widget:UnwetterCard_v1
      config:
        headline: DWDUnwetterWarnungen_Headline2
        type: DWDUnwetterWarnungen_Type2
        severity: DWDUnwetterWarnungen_Severity2
        severityColor: DWDUnwetterWarnungen_SeverityColor2
        validFrom: DWDUnwetterWarnungen_ValidFrom2
        validTo: DWDUnwetterWarnungen_ValidTo2
        description: DWDUnwetterWarnungen_Description2
    - component: widget:UnwetterCard_v1
      config:
        headline: DWDUnwetterWarnungen_Headline3
        type: DWDUnwetterWarnungen_Type3
        severity: DWDUnwetterWarnungen_Severity3
        severityColor: DWDUnwetterWarnungen_SeverityColor3
        validFrom: DWDUnwetterWarnungen_ValidFrom3
        validTo: DWDUnwetterWarnungen_ValidTo3
        description: DWDUnwetterWarnungen_Description3

The invalid warnings are filled with UNDEF, this status can be queried by the “warning” channel of the DWDUnwetter binding:

In my first euphoria I thought I can just set the widgets on the slides to invisible:

- component: widget:UnwetterCard_v1
      config:
        visible: =items.DWDUnwetterWarnungen_Warning3.state==false

but that didn’t work well as the slide is still present but only blank

Is there any way to conditonally exclude the slide component from rendering based on an item’s state?

Thanks for your help!

Cheers
Jonathan

fregger65 · February 20, 2022, 12:59am

Not sure if it helps, but I’m using this for something similar:
visible: =items.GenericMQTTThing_PumpStatus.state === ‘Failure’

JustinG · February 20, 2022, 2:31am

The only way I have found to get the swiper to recalculate the number of slides is to force it to refresh. Read about using the key property here (you only need to force a refresh on item change, you obviously don’t need the section on the automatic timed refresh):

Just add a ‘key’ property to the base of your swiper and ‘visible’ properties to each of the slides. As long as the key is populated with the same item states that determine the slide visibility, when that item changes, the swiper will refresh with only the visible slides.

elektrolubach · February 22, 2022, 10:34pm

Hi @JustinG,

unfortunately I was not able to get the swiper to hide the invisible pages.
Did you really use the oh-swiper-card in your setup?

But: Meanwhile I was doing some searching for the underlaying f7 and vue features and found the solution in building the swiper with native f7 parts:
(this is only an excerpt from a page, actually not a full widget code - if anyone wants to use it rightaway )

- component: f7-card
  config: {}
  slots:
    default:
      - component: f7-card-header
        config:
          visible: false
        slots:
          default:
            - component: Label
              config:
                text: ""
      - component: f7-card-content
        slots:
          default:
            - component: f7-swiper
              config:
                scrollbar: false
                pagination: true
                navigation: true
                noBorder: false
                noShadow: false
                outline: false
                params:
                  slidesPerView: 1
                  observer: true
                  observeParents: true
                  observeSlideChildren: true
                  watchSlidesProgress: true
              slots:
                default:
                  - component: f7-swiper-slide
                    slots:
                      default:
                        - component: widget:UnwetterCard_v1
                          config:
                            headline: DWDUnwetterWarnungen_Headline1
                            type: DWDUnwetterWarnungen_Type1
                            severity: DWDUnwetterWarnungen_Severity1
                            severityColor: DWDUnwetterWarnungen_SeverityColor1
                            validFrom: DWDUnwetterWarnungen_ValidFrom1
                            validTo: DWDUnwetterWarnungen_ValidTo1
                            description: DWDUnwetterWarnungen_Description1
                  - component: f7-swiper-slide
                    config:
                      visible: =items.DWDUnwetterWarnungen_Warning2.state=="ON"
                    slots:
                      default:
                        - component: widget:UnwetterCard_v1
                          config:
                            headline: DWDUnwetterWarnungen_Headline2
                            type: DWDUnwetterWarnungen_Type2
                            severity: DWDUnwetterWarnungen_Severity2
                            severityColor: DWDUnwetterWarnungen_SeverityColor2
                            validFrom: DWDUnwetterWarnungen_ValidFrom2
                            validTo: DWDUnwetterWarnungen_ValidTo2
                            description: DWDUnwetterWarnungen_Description2
                  - component: f7-swiper-slide
                    config:
                      visible: =items.DWDUnwetterWarnungen_Warning3.state=="ON"
                    slots:
                      default:
                        - component: widget:UnwetterCard_v1
                          config:
                            headline: DWDUnwetterWarnungen_Headline3
                            type: DWDUnwetterWarnungen_Type3
                            severity: DWDUnwetterWarnungen_Severity3
                            severityColor: DWDUnwetterWarnungen_SeverityColor3
                            validFrom: DWDUnwetterWarnungen_ValidFrom3
                            validTo: DWDUnwetterWarnungen_ValidTo3
                            description: DWDUnwetterWarnungen_Description3
                  - component: f7-swiper-slide
                    config:
                      visible: =items.DWDUnwetterWarnungen_Warning4.state=="ON"
                    slots:
                      default:
                        - component: widget:UnwetterCard_v1
                          config:
                            headline: DWDUnwetterWarnungen_Headline4
                            type: DWDUnwetterWarnungen_Type4
                            severity: DWDUnwetterWarnungen_Severity4
                            severityColor: DWDUnwetterWarnungen_SeverityColor4
                            validFrom: DWDUnwetterWarnungen_ValidFrom4
                            validTo: DWDUnwetterWarnungen_ValidTo4
                            description: DWDUnwetterWarnungen_Description4
                  - component: f7-swiper-slide
                    config:
                      visible: =items.DWDUnwetterWarnungen_Warning5.state=="ON"
                    slots:
                      default:
                        - component: widget:UnwetterCard_v1
                          config:
                            headline: DWDUnwetterWarnungen_Headline5
                            type: DWDUnwetterWarnungen_Type5
                            severity: DWDUnwetterWarnungen_Severity5
                            severityColor: DWDUnwetterWarnungen_SeverityColor5
                            validFrom: DWDUnwetterWarnungen_ValidFrom5
                            validTo: DWDUnwetterWarnungen_ValidTo5
                            description: DWDUnwetterWarnungen_Description5
      - component: f7-card-footer
        config:
          config: {}
        slots:
          default:
            - component: Label
              config:
                text: '="Letzte Aktualisierung: "+items.DWDUnwetterWarnungen_LetzteAktualisierung.displayState'

The used widget “UnwetterCard_v1” is this one (not completely finished, e.g. the icons for the different types of warnings - currently only “wind” is displayed):

uid: UnwetterCard_v1
tags: []
props:
  parameters:
    - context: item
      description: Warning "Headline"
      label: Item
      name: headline
      required: false
      type: TEXT
    - context: item
      description: Warning "Type"
      label: Item
      name: type
      required: false
      type: TEXT
    - context: item
      description: Warning "Severity"
      label: Item
      name: severity
      required: false
      type: TEXT
    - context: item
      description: Warning "Severity color"
      label: Item
      name: severityColor
      required: false
      type: TEXT
    - context: item
      description: Warning "Valid from"
      label: Item
      name: validFrom
      required: false
      type: TEXT
    - context: item
      description: Warning "Valid to"
      label: Item
      name: validTo
      required: false
      type: TEXT
    - context: item
      description: Warning "Description"
      label: Item
      name: description
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Feb 20, 2022, 3:26:29 PM
component: f7-card
config:
  style:
    noShadow: false
    class:
      - padding: 0px
    margin-left: 5px
    margin-right: 5px
  title: =items[props.headline].state
slots:
  content:
    - component: oh-list-card
      config:
        noBorder: false
        noShadow: true
        outline: false
      slots:
        default:
          - component: oh-list-item
            config:
              title: =items[props.type].state
              icon: f7:wind
              iconColor: =items[props.severityColor].displayState
              badgeColor: =items[props.severityColor].displayState
              badge: =items[props.severity].displayState
          - component: oh-label-item
            config:
              title: "von:"
              item: =props.validFrom
          - component: oh-label-item
            config:
              title: "bis: "
              item: =props.validTo
    - component: f7-card
      config:
        noBorder: false
        noShadow: true
        outline: false
        content: =items[props.description].state

For now, there is no automatic refresh active - I do not need it as the page is not the frontpage and gets usually reloaded when opened on demand. But many thanks for the hint with the key property. I will think about that later.

There is one glitch with the automatic refresh is: When you are just looking on the screen maybe on slide 3 and in that moment the data gets updated (because item refreshed, …) the slides will jump back to slide 1 .

Cheers
Jonathan

JustinG · February 23, 2022, 1:30am

No, I use the base f7 components, but I’m surprised to hear that it doesn’t work with the swiper card, the key change should impact children of the refreshed element as well, as I understand it.

Glad to hear you found a suitable workaround.

anfaenger · December 29, 2024, 8:20am

Hi @elektrolubach
thank’s for that widget. I’m just trying to get it running.
Could you make any progress about the icons for the different types of warnings?
And I’m wondering about the property SeverityColor. I can’t find that channel in my thing.
Can you give me some hints?

elektrolubach · December 31, 2024, 12:57am

Hi @anfaenger,
about the icons for the warnings - this has evolved (at least) a bit:

uid: UnwetterCard_v1
tags: []
props:
  parameters:
    - context: item
      description: Warning "Headline"
      label: Item
      name: headline
      required: false
      type: TEXT
    - context: item
      description: Warning "Type"
      label: Item
      name: type
      required: false
      type: TEXT
    - context: item
      description: Warning "Type icon"
      label: Item
      name: typeIcon
      required: false
      type: TEXT
    - context: item
      description: Warning "Severity"
      label: Item
      name: severity
      required: false
      type: TEXT
    - context: item
      description: Warning "Severity color"
      label: Item
      name: severityColor
      required: false
      type: TEXT
    - context: item
      description: Warning "Valid from"
      label: Item
      name: validFrom
      required: false
      type: TEXT
    - context: item
      description: Warning "Valid to"
      label: Item
      name: validTo
      required: false
      type: TEXT
    - context: item
      description: Warning "Description"
      label: Item
      name: description
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jun 11, 2024, 12:38:46 AM
component: f7-card
config:
  style:
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    margin-left: 5px
    margin-right: 5px
    noShadow: false
    padding: 0px
  title: =items[props.headline].state
slots:
  content:
    - component: oh-list-card
      config:
        mediaList: true
        noBorder: false
        noShadow: true
        outline: false
      slots:
        default:
          - component: oh-list-item
            config:
              badge: =items[props.severity].displayState
              badgeColor: =items[props.severityColor].state
              icon: "=props.typeIcon ? items[props.typeIcon].displayState : 'f7:ant'"
              iconColor: "=props.severityColor ? items[props.severityColor].state : 'black'"
              title: =items[props.type].state
          - component: oh-label-item
            config:
              item: =props.validFrom
              title: "von:"
          - component: oh-label-item
            config:
              item: =props.validTo
              title: "bis: "
    - component: f7-card
      config:
        content: =items[props.description].state
        noBorder: false
        noShadow: true
        outline: false

This is now dynamically filled by the property

props.typeIcon

The typeIcon property is controlled by an Item which is linked to the channel “dwdunwetter:dwdwarnings:DWDUnwetter:event[1…x]” with a MAP transformation using dwdunwetter_typeIcon.map (see below)
The severityColor property is controlled by a n Item which is linked to the channel
“dwdunwetter:dwdwarnings:DWDUnwetter:severity1” with a MAP transformation using dwdunwetter_colors.map (see below)

For reference:
dwdunwetter_colors.map

Minor=yellow
Moderate=orange
Severe=red
Extreme=purple
NULL=black
UNDEF=black
=black

dwdunwetter_severity_de.map

Minor=Wetterwarnung
Moderate=Markante Wetterwarnung
Severe=Unwetterwarnung
Extreme=Extreme Unwetterwarnung
NULL=undefiniert
UNDEF=undefiniert
=undefiniert

dwdunwetter_typeIcon.map

GLÄTTE=f7:snow
FROST=f7:snow
WINDBÖEN=f7:wind
STURMBÖEN=f7:wind
GEWITTER=f7:cloud_bolt
UNDEF=f7:question
NULL=f7:question
=f7:ant

dwdunwetter_urgency_de.map

Immediate=Warnung
Future=Vorabinformation
NULL=undefiniert
UNDEF=undefiniert

Cheers
Jonathan

DrRSatzteil · December 31, 2024, 1:06pm

I hide swiper slides in my universal toggle widget you can find here in the community. There was nothing special about it:


default:
                - component: f7-swiper-slide
                  config:
                    style:
                      height: 100%
                      width: 100%
                    visible: "=(props.maintoggle) ? true : false"