Help needed to extend a custom:button-card

I managed to build a “card” for my UI with the help of the Custom:Button-Card. So far it works as I wanted it.

grafik

It displays the first weather warning fetched by the Deutscher Wetterdienst Weather Warnings integration

This integration can provide more than a single weather warning. And there lies my problem: How can I “modify” or “extend” my solution, so that it reacts to the number of warnings to display? The card should expand downwards to show all the warnings.

The “problem” is, that the DWD integration stores the different warnings in attributes named like this: warning_X_name, warning_X_description, warning_X_start, and so on.

The ‘X’ stands for a number going from 1 to the max number of current warnings.

Here is my YAML code so far:

type: custom:button-card
entity: sensor.dwd_current_warning_level
tap_action: none
show_icon: false
show_name: true
show_entity_picture: true
name: |
  [[[ return entity.attributes.warning_1_name + " Warnung";  ]]]
custom_fields:
  description: |
    [[[ return entity.attributes.warning_1_description;  ]]]
  start: >
    [[[ return helpers.formatTimeWeekday(entity.attributes.warning_1_start) + "
    - " + helpers.formatTimeWeekday(entity.attributes.warning_1_end);  ]]]
entity_picture: |
  [[[
    const warnimgs = new Map([
      [ 22, "warn_icons_frost.png"],
      [ 31, "warn_icons_gewitter.png"],
      [ 33, "warn_icons_gewitter.png"],
      [ 34, "warn_icons_gewitter.png"],
      [ 36, "warn_icons_gewitter.png"],
      [ 38, "warn_icons_gewitter.png"],
      [ 40, "warn_icons_gewitter.png"],
      [ 41, "warn_icons_gewitter.png"],
      [ 42, "warn_icons_gewitter.png"],
      [ 44, "warn_icons_gewitter.png"],
      [ 45, "warn_icons_gewitter.png"],
      [ 46, "warn_icons_gewitter.png"],
      [ 48, "warn_icons_gewitter.png"],
      [ 49, "warn_icons_gewitter.png"],
      [ 51, "warn_icons_sturm.png"],
      [ 52, "warn_icons_sturm.png"],
      [ 53, "warn_icons_sturm.png"],
      [ 54, "warn_icons_sturm.png"],
      [ 55, "warn_icons_sturm.png"],
      [ 56, "warn_icons_sturm.png"],
      [ 57, "warn_icons_sturm.png"],
      [ 58, "warn_icons_sturm.png"],
      [ 59, "warn_icons_nebel.png"],
      [ 61, "warn_icons_regen.png"],
      [ 62, "warn_icons_regen.png"],
      [ 63, "warn_icons_regen.png"],
      [ 64, "warn_icons_regen.png"],
      [ 65, "warn_icons_regen.png"],
      [ 66, "warn_icons_regen.png"],
      [ 70, "warn_icons_frost.png"],
      [ 71, "warn_icons_frost.png"],
      [ 72, "warn_icons_frost.png"],
      [ 73, "warn_icons_frost.png"],
      [ 74, "warn_icons_frost.png"],
      [ 75, "warn_icons_frost.png"],
      [ 76, "warn_icons_frost.png"],
      [ 79, "warn_icons_frost.png"],
      [ 82, "warn_icons_frost.png"],
      [ 84, "warn_icons_glatteis.png"],
      [ 85, "warn_icons_glatteis.png"],
      [ 86, "warn_icons_glatteis.png"],
      [ 87, "warn_icons_glatteis.png"],
      [ 88, "warn_icons_tauwetter.png"],
      [ 89, "warn_icons_tauwetter.png"],
      [ 90, "warn_icons_gewitter.png"],
      [ 91, "warn_icons_gewitter.png"],
      [ 92, "warn_icons_gewitter.png"],
      [ 93, "warn_icons_gewitter.png"],
      [ 95, "warn_icons_gewitter.png"],
      [ 96, "warn_icons_gewitter.png"],
      [ 246, "warn_icons_uv.png"],
      [ 247, "warn_icons_hitze.png"],
      [ 248, "warn_icons_hitze.png"]
    ]);
    const warntype = Number(entity.attributes.warning_1_type);
    const warnimg = warnimgs.get(warntype);
    return "/local/icons/" + warnimg;
  ]]]
styles:
  name:
    - position: absolute
    - font-size: 18pt
    - font-weight: bold
    - font-variant: small-caps
    - text-align: left
    - left: 120px
    - top: 40px
    - border-block: |
        [[[ return "3px dashed " + entity.attributes.warning_1_color;
        ]]]
  entity_picture:
    - position: absolute
    - left: 1px
    - top: null
    - width: 100px
    - height: 100px
  card:
    - height: 140px
    - padding: 3px
    - background-image: |
        [[[
          const conditionImages = new Map([
              [1, "gelb.png"],
              [2, "orange.png"],
              [3, "rot.png"],
              [4, "dunkelrot.png"]
          ]);
          const warnlevel = Number(entity.attributes.warning_1_level);
          const conditionImage = conditionImages.get(warnlevel);
          return "var(--weather-background-image, url(/local/icons/" + conditionImage + "))";
        ]]]
    - background-size: auto
    - background-position: 4px 50%
    - background-repeat: no-repeat;
  custom_fields:
    description:
      - font-size: 12pt
      - font-style: oblique
      - position: absolute
      - left: 120px
      - top: 85px
      - height: 50px
      - text-align: left
      - white-space: wrap
      - overflow: clip
    start:
      - font-size: 10pt
      - position: absolute
      - left: 120px
      - top: 10px