custom-cards/flex-table-card

Using with Octopus Saving Sessions

Opened this issue · 2 comments

Can this card be used with data from events such as the below?

event.octopus_energy_{{ACCOUNT_ID}}_octoplus_saving_session_events

The state of this sensor states when the saving session events were last updated. The attributes of this sensor exposes the current day's rates.

Attribute Type Description
available_events array The collection of saving session events that you haven't joined
joined_events array The collection of saving session events that you have joined. This will include upcoming and past events
Each available event item will include the following attributes

Attribute Type Description
id integer The id of the event
code string The event code of the event. This will be required to join via the join service
start datetime The date/time the event starts
end datetime The date/time the event starts
octopoints_per_kwh integer The number of octopoints that are awarded per kwh saved during the event

I don't think I fully understand, generally any device with a state and attributes should work with this card. If you are trying to list events like the literal events from home-assistant (/developer-tools/event) this will most likely not work. If your integration populates a state (developer-tools/state) then selecting them should work...

I use it for Octopus Savings Sessions:

image

Code:

            - type: custom:flex-table-card
              title: ''
              sort_by: Id-
              clickable: false
              entities:
                include: sensor.energy_rates_session_list
              columns:
                - name: Status
                  hidden: true
                  attr_as_list: all_rates
                  modify: x.mode
                - name: Id
                  hidden: true
                  attr_as_list: all_rates
                  modify: x.id
                - name: Date
                  attr_as_list: all_rates
                  hidden: false
                  modify: x.date_from
                - name: From
                  attr_as_list: all_rates
                  modify: x.time_from
                - name: To
                  attr_as_list: all_rates
                  modify: x.time_to
                - name: Pts
                  attr_as_list: all_rates
                  modify: x.points_offered
                - name: £
                  attr_as_list: all_rates
                  modify: (Number(x.price_offered)).toFixed(2)
                - name: Total
                  attr_as_list: all_rates
                  modify: x.points_rewarded
                - name: £
                  attr_as_list: all_rates
                  modify: (Number(x.price_rewarded)).toFixed(2)
                - name: ''
                  attr_as_list: all_rates
                  modify: |-
                    var XICON;
                    switch(x.rate_source){
                      case '1J':
                        XICON = 'rgb(249,191,0)';
                        '<ha-icon icon="mdi:trophy" style="color: ' + XICON + ';">'
                        break;  
                      case '2J':
                        XICON = 'rgb(138,127,91)';
                        '<ha-icon icon="mdi:trophy" style="color: ' + XICON + ';">'
                        break;  
                      case '1A':
                        XICON = 'rgb(0,153,51)';
                        '<ha-icon icon="mdi:trophy-outline" style="color: ' + XICON + ';">'
                        break;  
                      case '2A':
                        XICON = 'rgb(99,138,112)';
                        '<ha-icon icon="mdi:trophy-outline" style="color: ' + XICON + ';">'
                        break;  
                      default:
                        '';
                    }
              css:
                table+: 'padding: 3px'
                tbody tr: 'background-color: rgba(0,0,0,0) !important'
              card_mod:
                style: |
                  ha-card {
                    background-color: rgba(0,0,0,0.5) !important;
                    border: none !important;
                    overflow: auto;
                    max-height: 550px;
                  }