Skip to content

Commit

Permalink
fix breaking changes for HA 2023.5
Browse files Browse the repository at this point in the history
  • Loading branch information
nielsfaber committed Apr 1, 2023
1 parent f407523 commit 0919965
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 83 deletions.
92 changes: 45 additions & 47 deletions custom_components/alarmo/frontend/src/alarm-panel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,46 +33,45 @@ export class MyAlarmPanel extends LitElement {
}

render() {
if (!customElements.get('ha-app-layout') || !this.userConfig)
if (!customElements.get('ha-panel-config') || !this.userConfig)
return html`
loading...
`;

const path = getPath();

return html`
<ha-app-layout>
<app-header fixed slot="header">
<app-toolbar>
<ha-menu-button .hass=${this.hass} .narrow=${this.narrow}></ha-menu-button>
<div main-title>
${localize('title', this.hass.language)}
</div>
<div class="version">
v${VERSION}
</div>
</app-toolbar>
<ha-tabs
scrollable
attr-for-selected="page-name"
.selected=${path.page}
@iron-activate=${this.handlePageSelected}
>
<paper-tab page-name="general">
${localize('panels.general.title', this.hass.language)}
</paper-tab>
<paper-tab page-name="sensors">
${localize('panels.sensors.title', this.hass.language)}
</paper-tab>
<paper-tab page-name="codes">
${localize('panels.codes.title', this.hass.language)}
</paper-tab>
<paper-tab page-name="actions">
${localize('panels.actions.title', this.hass.language)}
</paper-tab>
</ha-tabs>
</app-header>
</ha-app-layout>
<div class="header">
<div class="toolbar">
<ha-menu-button .hass=${this.hass} .narrow=${this.narrow}></ha-menu-button>
<div class="main-title">
${localize('title', this.hass.language)}
</div>
<div class="version">
v${VERSION}
</div>
</div>
<ha-tabs
scrollable
attr-for-selected="page-name"
.selected=${path.page}
@iron-activate=${this.handlePageSelected}
>
<paper-tab page-name="general">
${localize('panels.general.title', this.hass.language)}
</paper-tab>
<paper-tab page-name="sensors">
${localize('panels.sensors.title', this.hass.language)}
</paper-tab>
<paper-tab page-name="codes">
${localize('panels.codes.title', this.hass.language)}
</paper-tab>
<paper-tab page-name="actions">
${localize('panels.actions.title', this.hass.language)}
</paper-tab>
</ha-tabs>
</div>
<div class="view">
${this.getView(path)}
</div>
Expand Down Expand Up @@ -126,26 +125,25 @@ export class MyAlarmPanel extends LitElement {
color: var(--primary-text-color);
--paper-card-header-color: var(--primary-text-color);
}
app-header,
app-toolbar {
.header {
background-color: var(--app-header-background-color);
font-weight: 400;
color: var(--app-header-text-color, white);
border-bottom: var(--app-header-border-bottom, none);
}
app-toolbar {
.toolbar {
height: var(--header-height);
display: flex;
align-items: center;
font-size: 20px;
padding: 0 16px;
font-weight: 400;
box-sizing: border-box;
}
ha-app-layout {
display: block;
z-index: 2;
}
app-toolbar [main-title] {
margin-left: 20px;
.main-title {
margin: 0 0 0 24px;
line-height: 20px;
flex-grow: 1;
}
ha-tabs {
margin-left: max(env(safe-area-inset-left), 24px);
margin-right: max(env(safe-area-inset-right), 24px);
Expand Down
45 changes: 18 additions & 27 deletions custom_components/alarmo/frontend/src/load-ha-elements.ts
Original file line number Diff line number Diff line change
@@ -1,46 +1,37 @@

export const loadHaForm = async () => {
if (customElements.get("ha-checkbox") && customElements.get("ha-slider")) return;
if (customElements.get('ha-checkbox') && customElements.get('ha-slider')) return;

await customElements.whenDefined("partial-panel-resolver");
await customElements.whenDefined('partial-panel-resolver');
const ppr = document.createElement('partial-panel-resolver') as any;
ppr.hass = {
panels: [{
url_path: "tmp",
component_name: "config",
}]
panels: [
{
url_path: 'tmp',
component_name: 'config',
},
],
};
ppr._updateRoutes();
await ppr.routerOptions.routes.tmp.load();

await customElements.whenDefined("ha-panel-config");
const cpr = document.createElement("ha-panel-config") as any;
await cpr.routerOptions.routes.automation.load();

ppr.hass = {
panels: [{
url_path: "tmp",
component_name: "developer-tools",
}]
};
ppr._updateRoutes();
await ppr.routerOptions.routes.tmp.load();
await customElements.whenDefined('ha-panel-config');

await customElements.whenDefined("ha-app-layout");
}
const cpr = document.createElement('ha-panel-config') as any;
await cpr.routerOptions.routes.automation.load();
};

export const loadHaYamlEditor = async () => {
if (customElements.get("ha-yaml-editor")) return;
if (customElements.get('ha-yaml-editor')) return;

// Load in ha-yaml-editor from developer-tools-service
const ppResolver = document.createElement("partial-panel-resolver");
const ppResolver = document.createElement('partial-panel-resolver');
const routes = (ppResolver as any).getRoutes([
{
component_name: "developer-tools",
url_path: "a",
component_name: 'developer-tools',
url_path: 'a',
},
]);
await routes?.routes?.a?.load?.();
const devToolsRouter = document.createElement("developer-tools-router");
const devToolsRouter = document.createElement('developer-tools-router');
await (devToolsRouter as any)?.routerOptions?.routes?.service?.load?.();
};
};
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { HomeAssistant, navigate } from 'custom-card-helpers';
import { UnsubscribeFunc } from 'home-assistant-js-websocket';
import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';
import { html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators';

import { localize } from '../../../localize/localize';
import { TableColumn, TableData, TableFilterConfig } from '../../components/alarmo-table';
import { ESensorIcons, ESensorTypes } from '../../const';
import { fetchAreas, fetchSensors, saveSensor } from '../../data/websockets';
import { computeIcon, computeName, handleError, isDefined, prettyPrint, sortAlphabetically } from '../../helpers';
import { computeName, handleError, sortAlphabetically } from '../../helpers';
import { commonStyle } from '../../styles';
import { SubscribeMixin } from '../../subscribe-mixin';
import { AlarmoArea, AlarmoSensor, Dictionary, EArmModes } from '../../types';
Expand Down Expand Up @@ -85,9 +85,9 @@ export class SensorsOverviewCard extends SubscribeMixin(LitElement) {

private tableColumns(): Dictionary<TableColumn> {
const warningTooltip = () => html`
<paper-tooltip animation-delay="0">
<simple-tooltip animation-delay="0">
${localize('panels.sensors.cards.sensors.table.no_area_warning', this.hass.language)}
</paper-tooltip>
</simple-tooltip>
`;

return {
Expand All @@ -103,14 +103,14 @@ export class SensorsOverviewCard extends SubscribeMixin(LitElement) {
<ha-icon icon="mdi:alert" style="color: var(--error-color)"></ha-icon>
`
: html`
<paper-tooltip animation-delay="0">
<simple-tooltip animation-delay="0">
${stateObj
? localize(
`panels.sensors.cards.editor.fields.device_type.choose.${data.type}.name`,
this.hass!.language
)
: this.hass.localize('state_badge.default.entity_not_found')}
</paper-tooltip>
</simple-tooltip>
<ha-icon icon="${icon}" class="${!data.enabled ? 'disabled' : ''}"></ha-icon>
`;
},
Expand Down Expand Up @@ -160,11 +160,11 @@ export class SensorsOverviewCard extends SubscribeMixin(LitElement) {
}

private getTableData(): Record<string, any>[] {
let sensorsList = Object.keys(this.sensors).map(id => {
const sensorsList = Object.keys(this.sensors).map(id => {
const stateObj = this.hass!.states[id];
const config = this.sensors[id];
const modesList = config.area ? modesByArea(this.areas[config.area]) : getModesList(this.areas);
let res: TableData & { name: string } = {
const res: TableData & { name: string } = {
...config,
id: id,
name: computeName(stateObj),
Expand All @@ -187,7 +187,7 @@ export class SensorsOverviewCard extends SubscribeMixin(LitElement) {
}

removeCustomName(id: string) {
let data = {
const data = {
entity_id: id,
name: '',
};
Expand Down

0 comments on commit 0919965

Please sign in to comment.