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.

Sign up for GitHub

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

v3 Climate Component #86

Merged
merged 2 commits into from
May 7, 2024
Merged

v3 Climate Component #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e802728
Inital commit of Climate Component for V3
mattsgreen Apr 21, 2024
8261e56
Merge branch 'dev' into dev
jesserockz May 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions packages/v3/src/css/esp-entity-table.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,4 +76,14 @@ export default css`
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0 !important;
}
.climate {
width: 100%;
display: grid;
text-align: center;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
padding: 10px;
align-items: center;
}
`;
184 changes: 120 additions & 64 deletions packages/v3/src/esp-entity-table.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ interface entityConfig {
current_temperature?: number;
modes?: number[];
mode?: number;
presets?: number[];
preset?: number;
speed_count?: number;
speed_level?: number;
speed: string;
Expand Down Expand Up @@ -92,8 +94,12 @@ export class EntityTable extends LitElement implements RestAction {
unique_id: data.id,
id: parts.slice(1).join("-"),
entity_category: data.entity_category,
value_numeric_history: [data.value],
} as entityConfig;
if (typeof data.value === "number") {
entity.value_numeric_history = [data.value];
} else if (data.current_temperature) {
entity.value_numeric_history = [Number(data.current_temperature)];
}
entity.has_action = this.hasAction(entity);
if (entity.has_action) {
this.has_controls = true;
Expand All @@ -112,11 +118,13 @@ export class EntityTable extends LitElement implements RestAction {
});
this.requestUpdate();
} else {
let history = [...this.entities[idx].value_numeric_history];
if (typeof data.value === "number") {
let history = [...this.entities[idx].value_numeric_history];
history.push(data.value);
this.entities[idx].value_numeric_history = history.splice(-50);
} else if (data.current_temperature) {
history.push(Number(data.current_temperature));
}
this.entities[idx].value_numeric_history = history.splice(-50);

delete data.id;
delete data.domain;
Expand Down Expand Up @@ -217,7 +225,8 @@ export class EntityTable extends LitElement implements RestAction {
? this.control(component)
: html`<div>${component.state}</div>`}
</div>
${component.domain === "sensor"
${component.domain === "sensor" ||
component.domain === "climate"
? html`<esp-entity-chart
.chartdata="${component.value_numeric_history}"
></esp-entity-chart>`
Expand All @@ -238,7 +247,10 @@ export class EntityTable extends LitElement implements RestAction {
}

_handleEntityRowClick(e: any) {
if (e?.currentTarget?.domain === "sensor") {
if (
e?.currentTarget?.domain === "sensor" ||
e?.currentTarget?.domain === "climate"
) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Not important and not certain if this code is being transpiled, but if it is, a bit of redundant code can be reduced by doing something like if (!e?.currentTarget) return; as the first line within this function. That way we're not repeatedly checking and ensuring that e and currentTarget exists (if it does the first time, it will the next n times). Then also TS shouldn't require ? for each reference (e?.currentTarget?... -> e.currentTarget...).

I know this wasn't you, but a good opportunity for tiny clean up if you're willing.

if (!e?.ctrlKey) e.stopPropagation();
e?.currentTarget?.classList.toggle(
"expanded",
Expand Down Expand Up @@ -285,25 +297,71 @@ class ActionRenderer {
</button>`;
}

private _tempSelector(entity: entityConfig, target: string) {
if (!entity) return;
let targetTemp =
target === "high"
? entity.target_temperature_high
: entity.target_temperature || entity.target_temperature_low;
Copy link
Contributor

Choose a reason for hiding this comment

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

One small improvement might be caching this choice to something like const lowTemp = entity.target_temperature || entity.target_temperature_low; and using that reference instead. Probably same for most of the Number casts used multiple times.

let upValue =
target === "high"
? Number(entity.target_temperature_high) + Number(entity.step)
: Number(entity.target_temperature || entity.target_temperature_low) +
Number(entity.step);
let downValue =
target === "high"
? Number(entity.target_temperature_high) - Number(entity.step)
: Number(entity.target_temperature || entity.target_temperature_low) -
Number(entity.step);
upValue =
upValue > Number(entity.max_temp) ? Number(entity.max_temp) : upValue;
downValue =
downValue > Number(entity.max_temp) ? Number(entity.max_temp) : downValue;

let upAction = target
? `set?target_temperature_${target}=${upValue}`
: `set?target_temperature=${upValue}`;
let downAction = target
? `set?target_temperature_${target}=${downValue}`
: `set?target_temperature=${downValue}`;

return html`<button
class="abutton"
@click=${(e: Event) => {
e.stopPropagation();
this.actioner?.restAction(entity, upAction);
}}
>
🔺</button
><br />
<label>${targetTemp}</label><br />
<button
class="abutton"
@click=${(e: Event) => {
e.stopPropagation();
this.actioner?.restAction(entity, downAction);
}}
>
🔻
</button> `;
}

private _datetime(
entity: entityConfig,
type: string,
action: string,
opt: string,
value: string,
value: string
jesserockz marked this conversation as resolved.
Show resolved Hide resolved
) {
return html`
<input
type="${type}"
<input
type="${type}"
name="${entity.unique_id}"
id="${entity.unique_id}"
.value="${value}"
@change="${(e: Event) => {
const val = (<HTMLTextAreaElement>e.target)?.value;
this.actioner?.restAction(
entity,
`${action}?${opt}=${val}`
);
this.actioner?.restAction(entity, `${action}?${opt}=${val}`);
}}"
/>
`;
Expand All @@ -328,7 +386,11 @@ class ActionRenderer {
val: string | number | undefined
) {
return html`<select
@click=${(e: Event) => {
e.stopPropagation();
}}
@change="${(e: Event) => {
e.stopPropagation();
const val = (<HTMLTextAreaElement>e.target)?.value;
this.actioner?.restAction(
entity,
Expand Down Expand Up @@ -356,7 +418,7 @@ class ActionRenderer {
max?: string | undefined,
step = 1
) {
if(entity.mode == 1) {
if (entity.mode == 1) {
return html`<div class="range">
<label>${min || 0}</label>
<input
Expand All @@ -373,22 +435,23 @@ class ActionRenderer {
}}"
/>
<label>${max || 100}</label>
</div>`;
</div>`;
} else {
return html`
<esp-range-slider
return html` <esp-range-slider
name="${entity.unique_id}"
step="${step}"
min="${min}"
max="${max}"
.value="${value}"
@state="${(e: CustomEvent) => {
const val = (<HTMLTextAreaElement>e.target)?.value;
this.actioner?.restAction(entity, `${action}?${opt}=${e.detail.state}`);
}}"
const val = (<HTMLTextAreaElement>e.target)?.value;
this.actioner?.restAction(
entity,
`${action}?${opt}=${e.detail.state}`
);
}}"
></esp-range-slider>`;
}

}

private _textinput(
Expand Down Expand Up @@ -612,57 +675,50 @@ class ActionRenderer {
target_temp_label = html`${this.entity
.target_temperature_low}&nbsp;..&nbsp;${this.entity
.target_temperature_high}`;
target_temp_slider = html`
${this._range(
this.entity,
"set",
"target_temperature_low",
this.entity.target_temperature_low,
this.entity.min_temp,
this.entity.max_temp,
this.entity.step
)}
${this._range(
this.entity,
"set",
"target_temperature_high",
this.entity.target_temperature_high,
this.entity.min_temp,
this.entity.max_temp,
this.entity.step
)}
`;
} else {
target_temp_label = html`${this.entity.target_temperature}`;
target_temp_slider = html`
${this._range(
this.entity,
"set",
"target_temperature",
this.entity.target_temperature!!,
this.entity.min_temp,
this.entity.max_temp,
this.entity.step
)}
`;
}
let modes = html``;
if ((this.entity.modes ? this.entity.modes.length : 0) > 0) {
modes = html`Mode:<br />
${this._select(
this.entity,
"set",
"mode",
this.entity.modes || [],
this.entity.mode || ""
)}`;
modes = html` ${this._select(
this.entity,
"set",
"mode",
this.entity.modes || [],
this.entity.mode || ""
)}`;
}
let presets = html``;
if ((this.entity.presets ? this.entity.presets.length : 0) > 0) {
presets = html` ${this._select(
this.entity,
"set",
"preset",
this.entity.presets || [],
this.entity.preset || ""
)}`;
}

return html`
<label
>Current:&nbsp;${this.entity.current_temperature},
Target:&nbsp;${target_temp_label}</label
>
${target_temp_slider} ${modes}
<section class="climate">
<div>
${this._tempSelector(
this.entity,
this.entity.target_temperature_low ? "low" : ""
)}
</div>
<div>
<label><strong>${this.entity.current_temperature}</strong></label>
</div>
<div>
${this.entity.target_temperature_high
? this._tempSelector(this.entity, "high")
: ""}
</div>
<div>${modes}</div>
<div>${this.entity.state}</div>
<div>${presets}</div>
</section>
`;
}
}