uid: energy_flow_custom_v1
tags: []
props:
  parameters:
    - context: item
      label: Solar Power Item
      name: power_solar
      required: false
      type: TEXT
    - context: item
      label: Autonomy Item (in %)
      name: autonomy
      required: false
      type: TEXT
    - context: item
      label: House Consumption Item
      name: power_house
      required: false
      type: TEXT
    - context: item
      label: Grid Power Item
      name: power_grid
      required: false
      type: TEXT
    - context: item
      label: Heater Power Item
      name: power_heater
      required: false
      type: TEXT
    - context: item
      label: Heater Temp Item
      name: temp_heater
      required: false
      type: TEXT
    - context: item
      label: EV/Wallbox Power Item
      name: power_ev
      required: false
      type: TEXT
    - context: item
      label: Charge Enabled Item
      name: charge_enabled
      required: false
      type: TEXT
    - label: Wallbox-Kachel anzeigen?
      name: show_ev
      type: BOOLEAN
      default: true
    - label: Heizstab-Kachel anzeigen?
      name: show_heater
      type: BOOLEAN
      default: true
component: f7-block
config:
  style:
    padding: 10px
slots:
  default:
    - component: f7-row
      config:
        style:
          justify-content: center
          margin-bottom: 20px
      slots:
        default:
          - component: oh-button
            config:
              text: '="PV: " + Math.round(items[props.power_solar].numericState || 0) + " W | Autarkie: " + Math.round(items[props.autonomy].numericState || 0) + " %"'
              iconF7: sun_max_fill
              fill: true
              color: yellow
              style:
                width: 100%
                height: 50px
                font-size: 18px
                font-weight: bold
    - component: f7-row
      config:
        style:
          justify-content: space-around
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: f7-card
                  config:
                    title: Haus 🏠
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style: {padding: "15px", align-items: center, min-height: "75px"}
                        slots:
                          default:
                            - component: Label
                              config:
                                text: =Math.round(Math.abs(items[props.power_house].numericState || 0)) + " W"
                                style: {color: '=(Math.abs(items[props.power_solar].numericState || 0) < Math.abs(items[props.power_house].numericState || 0)) ? "red" : "green"', font-weight: bold, font-size: "16px"}
                            - component: Label
                              config:
                                text: Verbrauch
                                style: {font-size: "12px", color: "gray", margin-top: "5px"}
                - component: f7-card
                  config:
                    title: Wallbox 🔋
                    visible: =props.show_ev === true
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style: {padding: "15px", align-items: center, min-height: "75px"}
                        slots:
                          default:
                            - component: Label
                              config:
                                text: =Math.round(Math.abs(items[props.power_ev].numericState || 0)) + " W"
                                style: {font-weight: bold, font-size: "16px"}
                            - component: Label
                              config:
                                text: '=(items[props.power_ev].numericState > 0 ? "Wird geladen" : (items[props.charge_enabled].state === "ON" ? "Laden bereit" : "Standby"))'
                                style: {color: '=(items[props.power_ev].numericState > 0 ? "blue" : (items[props.charge_enabled].state === "ON" ? "green" : "gray"))', font-size: "12px", margin-top: "5px", font-style: "italic"}
          - component: f7-col
            slots:
              default:
                - component: f7-card
                  config:
                    title: Netzbilanz ⚡
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style: {padding: "15px", align-items: flex-start, min-height: "75px"}
                        slots:
                          default:
                            - component: f7-row
                              config:
                                style: {justify-content: flex-start, align-items: center, width: "100%"}
                              slots:
                                default:
                                  - component: oh-icon
                                    config:
                                      icon: '=(items[props.power_grid].numericState < 0) ? "f7:arrow_up_circle_fill" : "f7:arrow_down_circle_fill"'
                                      color: '=(items[props.power_grid].numericState < 0) ? "green" : "red"'
                                      width: 25
                                  - component: Label
                                    config:
                                      text: =Math.round(Math.abs(items[props.power_grid].numericState || 0)) + " W"
                                      style: {color: '=(items[props.power_grid].numericState < 0) ? "green" : "red"', font-weight: bold, font-size: "16px", margin-left: "10px"}
                            - component: Label
                              config:
                                text: '=(items[props.power_grid].numericState < 0 ? "Einspeisung" : "Bezug")'
                                style: {font-size: "12px", color: "gray", margin-top: "5px", text-align: "left", width: "100%"}
                - component: f7-card
                  config:
                    title: Heizstab ♨️
                    visible: =props.show_heater === true
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style: {padding: "15px", align-items: center, min-height: "75px"}
                        slots:
                          default:
                            - component: Label
                              config:
                                text: =Math.round(Math.abs(items[props.power_heater].numericState || 0)) + " W"
                                style: {font-weight: bold, font-size: "16px"}
                            - component: Label
                              config:
                                text: =Math.round(items[props.temp_heater].numericState || 0) + " °C"
                                style: {font-size: "12px", color: "gray", margin-top: "5px"}