Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix issue with config and state updates across instances #48

Merged
merged 4 commits into from
Nov 7, 2023

Conversation

raldred
Copy link

@raldred raldred commented Oct 31, 2023

This PR fixes the issue with config and state updates across instances, it was caused by config being shared between instances by updates being made to the hass config and base_config instead of creating a clone of the config per instance.

This also...

  • adds a shadow DOM, to keep HTML and styling isolated
  • simplifies the way the initial card HTML is setup
  • fixes the title not displaying (renamed from header to match consistency with HA)
  • fixes an issue with the recent entity error handling which inadvertently made other config entries like status_codes required.

In fixing the config and update issues, I've removed a bunch of refreshing logic which is not required since the card will update immediately...

  • when config changes are made
  • when hass state changes

I have verified this with using some mock helpers entities, (screenshot below)

image

@DanteWinters
Copy link
Owner

Hi @raldred
I will respond to your replies on PR #47 , I just first want to ask if that PR and this one are independent of each other? This is an isolated feature, yet the code looks more complicated (As I have stated, my knowledge is limited, but I want to use this as an opportunity to learn more about practical implementations of JS).
The feature implemented here is one that is greatly appreciated and there are some layout things that I am still considering on the other PR. For those reasons, I'd prefer to review this one first, but I don't want that to make more work for you?

@raldred
Copy link
Author

raldred commented Nov 1, 2023

Hey @DanteWinters so this PR is purely to address the config problem you highlighted in your comment on #47 save for the few other little tweaks listed above. Which I ran into when testing.

The main changes to keep each instance of the card isolated is the config cloning and the shadow dom to keep styles and dom queries within the individual card.

This PR It's branched off your current main and does not include the things from #47

I'd be more than happy to jump on a hangout or zoom to discuss if you have time.

const inv_info_element = this.card.querySelector("#taskbar-grid");
if (inv_info_element) {
inv_info_element.innerHTML = hf.generateStatus(this.config);
const card = document.createElement('ha-card');
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apologies for the delayed feedback. I implemented this branch and I get an error here. The solutions was to change
const card = to this.card =
I'm not sure which is better for the card, to use a const at first and then assign, or directly initiate the card as part of the class. I'm reading up on the functions and implementations that you have that I don't know, once I'm done there and this part is fixed, I'll gladly merge this PR and then focus on the other one

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No problem, sorry as per my other comment, I didn't commit the change to this.card correctly.
It needs to be an instance attribute on the class so It can passed to the history graph functions.
We could return the const card, out of the createCard function, but it's completely fine to use instance attributes.

const header = document.createElement("h1");
header.classList.add('card-header');
header.appendChild(document.createTextNode(this._config.title));
card.appendChild(header);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried adding the title. This line also need updating in same as the comment above. Changed to this.card and now it works. Thanks for adding that feature

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry about that, I noticed this when I was testing the history graph which didn't work so I adjusted things to use this.card but didn't commit it properly. My mistake, i've updated the PR.

@DanteWinters
Copy link
Owner

Hi @raldred
I'm completing the PR since you fixed the breaking issues. There are 2 other things that are breaking with this PR but one is formatting so it can be fixed with the other PR. If there is no title, the status message and parallel box are floating too high and exiting the card. Since the title is new and optional, I think people will notice it.
Second is that the label to show when last it was updated isn't working. I quickly tried to for the error but couldn't find it. Please keep these 2 things in mind and update the other PR for the issues.

I'll create a new release once both PRs are sorted and tested.

@DanteWinters DanteWinters merged commit 2e83b7b into DanteWinters:main Nov 7, 2023
1 check passed
@raldred
Copy link
Author

raldred commented Nov 8, 2023

Thanks @DanteWinters I think it's probably best if I create a separate PR to address the small issues individually.
Having large PR with multiple things I think in hindsight is confusing.

I didn't test the parallel stuff, I will improve my mock setup so that I can properly test those areas in future against any changes. Sorry about that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants