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

Add visibility option to sections (conditional section) #20805

Merged
merged 12 commits into from
May 21, 2024
Merged

Conversation

piitaya
Copy link
Member

@piitaya piitaya commented May 16, 2024

Proposed change

Adds the possibility to hide/show sections based on certains conditions. For example, you may want to only display a section on mobile, where you're at home and when the kitchen lights are on.

It uses the same conditions as condition cards (https://www.home-assistant.io/dashboards/conditional/#conditions-options) which are :

  • Entity numeric state
  • Entity state
  • User
  • Screen
  • And
  • Or

It's not a new section but a new visibility options in the section config.

Example of UI configuration

CleanShot 2024-05-16 at 12 40 44

Example of YAML configuration

title: Kitchen
type: grid
cards:
   - 
visibility:
  - condition: user
    users:
      - 6b64d00c17624ce4a7b7bf438eb63813
  - condition: state
    entity: person.paul
    state: home
  - condition: screen
    media_query: "(min-width: 0px) and (max-width: 767px)"
  - condition: state
    entity: light.kitchen_lights
    state: "on"

Demo time 🎉

demo-section-visibility.mp4

Type of change

  • Dependency upgrade
  • Bugfix (non-breaking change which fixes an issue)
  • New feature (thank you!)
  • Breaking change (fix/feature causing existing functionality to break)
  • Code quality improvements to existing code or addition of tests

Additional information

  • This PR fixes or closes issue: fixes #
  • This PR is related to issue or discussion:
  • Link to documentation pull request:

Checklist

  • The code change is tested and works locally.
  • There is no commented out code in this PR.
  • Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

@@ -338,6 +342,7 @@ export class HaChartBase extends LitElement {
options: this._createOptions(),
plugins: this._createPlugins(),
});
this._loading = false;
Copy link
Member

Choose a reason for hiding this comment

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

Should we put this in a finally block so an exception won't leave you in a forever loading state?

this._config = findLovelaceContainer(this._params.lovelaceConfig, [
this._params.viewIndex,
this._params.sectionIndex,
]) as LovelaceSectionRawConfig;
Copy link
Member

Choose a reason for hiding this comment

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

For another day, but I feel like we should be able to teach TS that passing an array with 2 numbers to findLovelaceContainer always returns LovelaceSectionRawConfig

`ui.panel.lovelace.editor.edit_section.visibility.explanation`
)}
</ha-alert>
<ha-card-conditions-editor
Copy link
Member

Choose a reason for hiding this comment

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

Hooray for composability 🎉

}
this._clearMediaQueries();
this._listeners = createConditionMediaQueriesListeners(
Copy link
Member

Choose a reason for hiding this comment

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

btw is create the right word? attach is more appropriate maybe?

balloob
balloob previously approved these changes May 20, 2024
Copy link
Member

@balloob balloob left a comment

Choose a reason for hiding this comment

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

Swweeeeet

@piitaya piitaya merged commit a2a8950 into dev May 21, 2024
13 checks passed
@piitaya piitaya deleted the section-visibility branch May 21, 2024 08:43
c0ffeeca7 added a commit to home-assistant/home-assistant.io that referenced this pull request Jun 4, 2024
- update views page to include the background tab
- update sections view to include background and conditions
- move steps on adding cards and section and on deleting a section into separate procedures
- related to home-assistant/frontend#20708 and home-assistant/frontend#20805
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants