Skip to content

Commit 35b97ad

Browse files
JonasDoebertinJonasDoebertin
committed
♻️ refactoring to TypeScript (wip)
1 parent cd24851 commit 35b97ad

File tree

11 files changed

+202
-179
lines changed

11 files changed

+202
-179
lines changed

‎src/elements/card.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
:host {
22
--tc-spacing: 1rem;
3-
--tc-indicator-spacing: 0.5rem;
3+
--tc-indicator-spacing: 0.75rem;
44
--tc-indicator-width: 0.5rem;
55
}
66

‎src/elements/card.ts‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
import styles from "bundle-text:./card.css";
22
import {CSSResult, html, LitElement, nothing, TemplateResult, unsafeCSS} from 'lit';
3-
import {customElement, state} from 'lit/decorators.js';
3+
import {customElement, property, state} from 'lit/decorators.js';
44
import {assert} from "superstruct";
5-
import {getEvents} from "../functions/calendar.js";
5+
import {getEvents} from "../functions/calendar";
66
import {computeCssColor} from "../functions/colors";
7-
import {processEditorEntities} from "../functions/config.js";
7+
import {processEditorEntities} from "../functions/config";
88
import localize from "../localization/localize";
9-
import {CardConfig} from "../structs/config";
9+
import {CardConfig, EntitiesRowConfig} from "../structs/config";
1010
import {HomeAssistant} from "custom-card-helpers";
1111
import CalendarEvent from "../structs/event";
1212

1313
@customElement('today-card')
1414
export class TodayCard extends LitElement {
15-
// @property({ attribute: false }) public hass!: HomeAssistant;
16-
@state() private config: CardConfig;
17-
@state() private content: TemplateResult;
15+
@property({attribute: false}) public hass!: HomeAssistant;
16+
@state() private config: CardConfig | undefined;
17+
@state() private entities: EntitiesRowConfig[] = [];
18+
@state() private content: TemplateResult = html``;
1819
private initialized: boolean = false;
19-
private _hass?: HomeAssistant;
2020

21-
set hass(hass: HomeAssistant) {
22-
this._hass = hass;
21+
static get styles(): CSSResult {
22+
return unsafeCSS(styles);
2323
}
2424

2525
static getConfigElement(): HTMLElement {
@@ -49,13 +49,16 @@ export class TodayCard extends LitElement {
4949

5050
setConfig(config: CardConfig) {
5151
assert(config, CardConfig);
52-
this.config = {...config, entities: processEditorEntities(config.entities, true)};
52+
53+
let entities = processEditorEntities(config.entities, true);
54+
this.config = {...config, entities: entities};
55+
this.entities = entities;
56+
5357
this.content = html``;
5458
}
5559

5660
async updateEvents() {
57-
console.log('Updating events');
58-
const events = await getEvents(this.config, this._hass);
61+
const events = await getEvents(this.config, this.entities, this.hass);
5962

6063
let eventsHtml = events.map((event: CalendarEvent) => {
6164
return html`
@@ -77,22 +80,17 @@ export class TodayCard extends LitElement {
7780
}
7881

7982
render() {
80-
console.log('Rendering');
8183
if (!this.initialized) {
8284
this.updateEvents();
8385
this.initialized = true;
8486
}
8587

8688
return html`
87-
<ha-card header="${this.config.title}">
89+
<ha-card header="${this.config?.title || nothing}">
8890
<div class="card-content">
8991
${this.content}
9092
</div>
9193
</ha-card>
9294
`;
9395
}
94-
95-
static get styles(): CSSResult {
96-
return unsafeCSS(styles);
97-
}
9896
}

‎src/elements/editor.ts‎

Lines changed: 31 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import styles from "bundle-text:./editor.css";
2-
import {html, LitElement, nothing, unsafeCSS} from "lit";
3-
import {customElement} from "lit/decorators.js";
2+
import {CSSResult, html, LitElement, TemplateResult, unsafeCSS} from "lit";
3+
import {customElement, property, state} from "lit/decorators.js";
44
import {assert} from "superstruct";
5-
import {fireEvent, processEditorEntities} from "../functions/config.js";
5+
import {fireEvent, processEditorEntities} from "../functions/config";
66
import {loadHaComponents} from "../functions/hacks";
7-
import {CardConfig} from "../structs/config";
7+
import {CardConfig, EntitiesRowConfig} from "../structs/config";
8+
import {HomeAssistant} from "custom-card-helpers";
89

910
const FORM_SCHEMA = [
1011
{
@@ -37,83 +38,74 @@ const FORM_SCHEMA = [
3738
];
3839

3940
@customElement('today-card-editor')
40-
export class TodayCardEditor extends LitElement
41-
{
41+
export class TodayCardEditor extends LitElement {
42+
@property({attribute: false}) public hass!: HomeAssistant;
43+
@state() private config: CardConfig | undefined;
44+
@state() private entities: EntitiesRowConfig[] = [];
4245

43-
static styles = unsafeCSS(styles);
44-
45-
static get properties()
46-
{
47-
return {
48-
hass: {},
49-
_config: {state: true},
50-
_entities: {state: true},
51-
};
46+
static get styles(): CSSResult {
47+
return unsafeCSS(styles);
5248
}
5349

54-
connectedCallback()
55-
{
50+
connectedCallback(): void {
5651
super.connectedCallback();
5752
loadHaComponents();
5853
}
5954

60-
setConfig(config)
61-
{
55+
setConfig(config: CardConfig): void {
6256
assert(config, CardConfig);
6357

6458
let entities = processEditorEntities(config.entities, false);
65-
this._config = {...config, entities: entities};
66-
this._entities = entities;
59+
this.config = {...config, entities: entities};
60+
this.entities = entities;
6761
}
6862

69-
render()
70-
{
71-
if (!this.hass || !this._config) {
72-
return nothing;
63+
render(): TemplateResult {
64+
if (!this.hass || !this.config) {
65+
return html``;
7366
}
7467

7568
return html`
7669
<ha-form
7770
.hass=${this.hass}
78-
.data=${this._config}
71+
.data=${this.config}
7972
.schema=${FORM_SCHEMA}
80-
.computeLabel=${this._computeLabel}
81-
@value-changed=${this._valueChanged}
73+
.computeLabel=${this.computeLabel}
74+
@value-changed=${this.valueChanged}
8275
></ha-form>
8376
<today-card-entities-editor
8477
.hass=${this.hass}
85-
.entities=${this._entities}
86-
@entities-changed=${this._entitiesChanged}
78+
.entities=${this.entities}
79+
@entities-changed=${this.entitiesChanged}
8780
></today-card-entities-editor>
8881
`;
8982
}
9083

91-
_valueChanged(event)
92-
{
84+
private valueChanged(event: Event): void {
9385
event.stopPropagation();
94-
if (!this._config || !this.hass) {
86+
if (!this.config || !this.hass) {
9587
return;
9688
}
9789

90+
// @ts-ignore
9891
let config = event.detail.value;
9992

10093
fireEvent(this, "config-changed", {config});
10194
}
10295

103-
_entitiesChanged(event)
104-
{
96+
private entitiesChanged(event: Event) {
10597
event.stopPropagation();
106-
if (!this._config || !this.hass) {
98+
if (!this.config || !this.hass) {
10799
return;
108100
}
109101

110-
let config = {...this._config, entities: event.detail.entities};
102+
// @ts-ignore
103+
let config = {...this.config, entities: event.detail.entities};
111104

112105
fireEvent(this, "config-changed", {config});
113106
}
114107

115-
_computeLabel(schema)
116-
{
108+
private computeLabel(schema: Record<string, unknown>): string {
117109
switch (schema.name) {
118110
case "title":
119111
return "Title";

‎src/elements/entity-editor.ts‎

Lines changed: 25 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
11
import {mdiClose} from "@mdi/js";
22
import styles from "bundle-text:./entity-editor.css";
3-
import {html, LitElement, nothing, unsafeCSS} from "lit";
4-
import {customElement} from "lit/decorators.js";
3+
import {CSSResult, html, LitElement, TemplateResult, unsafeCSS} from "lit";
4+
import {customElement, property, state} from "lit/decorators.js";
55
import {repeat} from "lit/directives/repeat";
6-
import {fireEvent} from "../functions/config.js";
6+
import {fireEvent} from "../functions/config";
7+
import {HomeAssistant} from "custom-card-helpers";
8+
import {EntitiesRowConfig} from "../structs/config";
79

810
@customElement('today-card-entities-editor')
9-
export class TodayCardEntitiesEditor extends LitElement
10-
{
11-
static styles = unsafeCSS(styles);
11+
export class TodayCardEntitiesEditor extends LitElement {
12+
@property({attribute: false}) public hass!: HomeAssistant;
13+
@state() private entities: EntitiesRowConfig[] = [];
1214

13-
static get properties()
14-
{
15-
return {
16-
hass: {state: true},
17-
entities: {state: true},
18-
};
15+
static get styles(): CSSResult {
16+
return unsafeCSS(styles);
1917
}
2018

21-
render()
22-
{
19+
render(): TemplateResult {
2320
if (!this.entities || !this.hass) {
24-
return nothing;
21+
return html``;
2522
}
2623

2724
return html`
@@ -46,14 +43,14 @@ export class TodayCardEntitiesEditor extends LitElement
4643
.includeNone=${true}
4744
.includeState=${false}
4845
.index=${index}
49-
@value-changed=${this._changeColor}
46+
@value-changed=${this.changeColor}
5047
></ha-color-picker>
5148
<ha-icon-button
5249
.label="Clear"
5350
.path=${mdiClose}
5451
class="remove-icon"
5552
.index=${index}
56-
@click=${this._removeRow}
53+
@click=${this.removeRow}
5754
></ha-icon-button>
5855
</div>
5956
</div>
@@ -64,14 +61,15 @@ export class TodayCardEntitiesEditor extends LitElement
6461
class="add-entity"
6562
.hass=${this.hass}
6663
.includeDomains="${['calendar']}"
67-
@value-changed=${this._addRow}
64+
@value-changed=${this.addRow}
6865
></ha-entity-picker>
6966
`;
7067
}
7168

72-
_changeColor(event)
73-
{
69+
private changeColor(event: Event): void {
70+
// @ts-expect-error
7471
const index = event.currentTarget.index;
72+
// @ts-expect-error
7573
const value = event.detail.value;
7674

7775
const newEntities = this.entities.concat();
@@ -83,27 +81,28 @@ export class TodayCardEntitiesEditor extends LitElement
8381
fireEvent(this, "entities-changed", {entities: newEntities});
8482
}
8583

86-
_addRow(event)
87-
{
84+
private addRow(event: Event): void {
85+
// @ts-expect-error
8886
const value = event.detail.value;
8987
if (value === "") {
9088
return;
9189
}
9290

93-
const newEntities = this.entities.concat({entity: value});
91+
const newEntities = this.entities.concat({entity: value, color: ""});
92+
93+
// @ts-expect-error
9494
event.target.value = "";
9595

9696
fireEvent(this, "entities-changed", {entities: newEntities});
9797
}
9898

99-
_removeRow(event)
100-
{
99+
private removeRow(event: Event): void {
100+
// @ts-expect-error
101101
const index = event.currentTarget.index;
102102

103103
const newEntities = this.entities.concat();
104104
newEntities.splice(index, 1);
105105

106106
fireEvent(this, "entities-changed", {entities: newEntities});
107107
}
108-
109108
}

0 commit comments

Comments
 (0)