Add support for seperate consumption/production entities and a few layout and copy tweaks.

Thank you for creating this wonderful card. I have made a few changes which I'm using myself, I wondered if any of these may be useful to the main branch.

Added support for separate consumption and production entities for flows. Adds flexibility and simplifies use by users of lxp-bridge (maintains support for multiple inverters)
Fixed the header not settable, renamed to title for consistency with other HA cards.
Shows full battery image if SOC >= 99 (Some inverters never return SOC at 100%)
Reworked the arrows and adjust the css grid to help with consistent spacing and sizing
A few label and icon adjustments to align more with current Lux UI

I've split them up here into separate commits here, but I'd be happy to split them into separate PRs if you'd be interesting in merging any or all.

example separate entity config:

grid_flow:
  entities:
    - consumption: sensor.lux_power_from_grid_live
      production: sensor.lux_power_to_grid_live

Hi @raldred I appreciate your contribution and I'm glad that you are making use of the card.

From your PR description, most of it sounds good to me. I'll see how the changes look and feel and then we can merge them in. I'll make a few comments on the PR as I look through the code.

Only issue that I have from the description, is that I want to keep the grid flow to use the entities as they are. The reason for this is because I already changed the config once that broke the config and people needed to reload for it to work. I don't want to annoy people with it happening regularly. That being said, I have no problem with implementing support for the lxp-bridge, I just want it to be compatible with the existing config. I don't know of the lxp-bridge, so if we implement it, I hope you will help maintain that part.

By looking at this PR and your existing repositories, I think your JS skills and knowledge is far ahead of mine. I'd like to ask if you can please take a look at a few things for me, that aren't really bugs but they are things that bug me (when you have time, this is not critical, and it is possible that you might have already fixes it, I just don't know):

Issue #36. There was a suggestion on how the class is loaded as a custom element. I don't understand what caused his issue, or what his suggested code does. I tried to implement it on my side, and the card didn't load. I have this issue on the back-burner.
~~There is a double border around the card. I tried to remove it, but I always ended up with both borders or neither~~
When changing the config (and always the code) I often need to hard reload the page and clear the cache to update. Is there a way around this? Many cards have it that when you change the card config, the card reloads the new config immediately and I would like my card to do the same.
I have 2 instances of HA. One is my first implementation that I now use as a testing environment. One this, I mock all the input values for 2 inverters so that I can test the parallel settings. I tried to add my normal integration there along with the mocked card, but I noticed that they both always report the same? This isn't a normal issue, since I think most people would only have one configuration for the card. I would still like to know if this is solvable. Many dashboard cards don't have this issue, but when I look at the code for those cards, I see they are all in typescript

Hey @DanteWinters I've been very mindful of not trying to propose changes that would require any configuration changes from anyone currently.

The changes I've made to the entities, support both configurations. You can specify a single entity just as you do now, which uses positive and negative values to distinguish consumption and production.

Both configurations are supported, so it retains the config for everyone using it now, using the single entity but provides a way for separating the consumption and production entities.

eg:

grid_flow:
  entities:
    - consumption: sensor.lux_power_from_grid_live
      production: sensor.lux_power_to_grid_live

OR (Still supported)

 grid_flow:
  entities:
    - sensor.lux_grid_flow_live

I'd be more than happy to look at some of the existing issues. I fixed the double border in this PR, it was caused by the duplicate ha-card element creating both in the card_base constant but also in the createCard method.

I have 2 instances of HA. One is my first implementation that I now use as a testing environment. One this, I mock all the input values for 2 inverters so that I can test the parallel settings. I tried to add my normal integration there along with the mocked card, but I noticed that they both always report the same? This isn't a normal issue, since I think most people would only have one configuration for the card. I would still like to know if this is solvable. Many dashboard cards don't have this issue, but when I look at the code for those cards, I see they are all in typescript

This issue could be related to the way the base_config is used.

let new_config = constants.base_config;

(Also no need for it to be a let since new_config itself is not changing, the properties inside the object change still.

This doesn't create a new object new_config, it's just a reference to the base_config.... So we should clone the object as a new object.

There's a couple of main ways to do this... const new_config = { ...constants.base_config }; or const new_config = Object.assign({}, constants.base_config);

//edit, it's not this, althought it wouldn't hurt changing. I think it's related to the way the HTML is constructed. I'm just setting up a demo here.

DanteWinters / lux-power-distribution-card

Add support for seperate consumption/production entities and a few layout and copy tweaks. #47