Custom-card "Afvalophaling"

!! Attention !!

This card can only be used if the integration "Home-Assistant-Sensor-Afvalbeheer" from pippyn is installed.

Credits

• Author: AndyVRD - 2021
• Version: 1.0.0

Changelog

1.0.0

Initial release

Usage

- type: "custom:button-card"
  template:
    - card_afvalophaling
  variables:
    ulm_card_ophaling_vandaag: "sensor.limburg_net_afvalophaling_vandaag"
    ulm_card_ophaling_morgen: "sensor.limburg_net_afvalophaling_morgen"
    ulm_card_datum_gft: "sensor.limburg_net_afvalophaling_gft"
    ulm_card_datum_pmd: "sensor.limburg_net_afvalophaling_pmd"
    ulm_card_datum_rest: "sensor.limburg_net_afvalophaling_restafval"
    ulm_card_datum_papier: "sensor.limburg_net_afvalophaling_papier"

Requirements

Integration from HACS: "Home-Assistant-Sensor-Afvalbeheer" from pippyn

Variables

Variable	Example	Required	Explanation
ulm_card_ophaling_vandaag	sensor.limburg_net_afvalophaling_vandaag	yes	Collection(s) for today
ulm_card_ophaling_morgen	sensor.limburg_net_afvalophaling_morgen	yes	Collection(s) for tomorrow
ulm_card_datum_gft	sensor.limburg_net_afvalophaling_gft	yes	GFT collection date
ulm_card_datum_pmd	sensor.limburg_net_afvalophaling_pmd	yes	PMD collection date
ulm_card_datum_rest	sensor.limburg_net_afvalophaling_rest	yes	Restafval collection date
ulm_card_datum_papier	sensor.limburg_net_afvalophaling_papier	yes	Papier collection date

Template Code

card_afvalophaling.yaml

---
card_afvalophaling:
  template:
    - "ulm_language_variables"
    - "icon_info_afvalophaling"
    - "custom_colors"
  triggers_update: "all"
  icon: "mdi:delete"
  name: >
        [[[
          if((variables.ulm_card_ophaling_vandaag && states[variables.ulm_card_ophaling_vandaag].state !== 'Geen') ||
            (variables.ulm_card_ophaling_morgen && states[variables.ulm_card_ophaling_morgen].state !== 'Geen')) {
            return variables.ulm_ophaling
          } else {
            return variables.ulm_volgende_ophaling
          }
        ]]]
  label: |
        [[[
          if(variables.ulm_card_ophaling_vandaag && states[variables.ulm_card_ophaling_vandaag].state !== 'Geen'){
            return states[variables.ulm_card_ophaling_vandaag].state
          }

          if(variables.ulm_card_ophaling_morgen && states[variables.ulm_card_ophaling_morgen].state !== 'Geen'){
            return states[variables.ulm_card_ophaling_morgen].state
          }

          var collections = [];
          if(variables.ulm_card_datum_rest){
            collections.push("Restafval " + ' • ' + states[variables.ulm_card_datum_rest].state);
          }

          if(variables.ulm_card_datum_papier){
            collections.push("Papier " + ' • ' + states[variables.ulm_card_datum_papier].state);
          }

          if(variables.ulm_card_datum_pmd){
            collections.push("PMD " + ' • ' + states[variables.ulm_card_datum_pmd].state);
          }

          if(variables.ulm_card_datum_gft){
            collections.push("GFT " + ' • ' + states[variables.ulm_card_datum_gft].state);
          }

          if(variables.ulm_card_datum_glas){
            collections.push("Glas " + ' • ' + states[variables.ulm_card_datum_glas].state);
          }

          return collections.join('<br>');
        ]]]
custom_colors:
  state:
    - styles:
        icon:
          - color: "rgba(var(--color-green),1)"
        img_cell:
          - background-color: "rgba(var(--color-green), 0.2)"
      value: >
        [[[
          return (variables.ulm_card_ophaling_vandaag && states[variables.ulm_card_ophaling_vandaag].state !== "Geen") || (variables.ulm_card_ophaling_morgen && states[variables.ulm_card_ophaling_morgen].state !== "Geen")
        ]]]
      icon: "mdi:recycle"
      operator: "template"
    - styles:
        icon:
          - color: "rgba(var(--color-blue),1)"
        img_cell:
          - background-color: "rgba(var(--color-blue), 0.2)"
      value: >
        [[[
          return (variables.ulm_card_ophaling_vandaag && states[variables.ulm_card_ophaling_vandaag].state === "glas") || (variables.ulm_card_ophaling_morgen && states[variables.ulm_card_ophaling_morgen].state === "glas")
        ]]]
      icon: "mdi:bottle-wine-outline"
      operator: "template"
icon_info_afvalophaling:
  color: "var(--google-grey)"
  show_icon: "true"
  show_label: "true"
  show_name: "true"
  state:
    - value: "unavailable"
      styles:
        icon:
          - color: "rgba(var(--color-red),1)"
        img_cell:
          - background-color: "rgba(var(--color-red), 0.2)"
        custom_fields:
          notification:
            - border-radius: "50%"
            - position: "absolute"
            - left: "42px"
            - top: "10px"
            - height: "16px"
            - width: "16px"
            - font-size: "12px"
            - line-height: "14px"
            - background-color: >
                [[[
                  return "rgba(var(--color-red),1)";
                ]]]
  styles:
    icon:
      - color: "rgba(var(--color-theme),0.2)"
    label:
      - justify-self: "start"
      - align-self: "start"
      - font-weight: "bold"
      - font-size: "12px"
      - filter: "opacity(40%)"
      - margin-left: "12px"
      - text-align: "start"
    name:
      - align-self: "end"
      - justify-self: "start"
      - font-weight: "bold"
      - font-size: "14px"
      - margin-left: "12px"
      - margin-bottom: "4px"
    state:
      - justify-self: "start"
      - align-self: "start"
      - font-weight: "bold"
      - font-size: "12px"
      - filter: "opacity(40%)"
      - margin-left: "12px"
    img_cell:
      - background-color: "rgba(var(--color-theme),0.05)"
      - border-radius: "50%"
      - place-self: "center"
      - width: "42px"
      - height: "42px"
    grid:
      - grid-template-areas: "'i n' 'i l'"
      - grid-template-columns: "min-content auto"
      - grid-template-rows: "min-content min-content"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"
  custom_fields:
    notification: >
      [[[
        if ((variables.ulm_card_ophaling_vandaag && states[variables.ulm_card_ophaling_vandaag].state =='unavailable') ||
          (variables.ulm_card_ophaling_morgen && states[variables.ulm_card_ophaling_morgen].state =='unavailable')) {
          return `<ha-icon icon="mdi:help" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>`
        }
      ]]]
  size: "20px"