jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-23 17:26:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11848 from home-assistant/dev

Browse Source
This commit is contained in:
Paulus Schoutsen 2022-02-24 16:37:06 -08:00 committed by GitHub
commit ffac3d055e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
64 changed files with 2571 additions and 3330 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

631
.yarn/releases/yarn-3.0.2.cjs vendored
View File

File diff suppressed because one or more lines are too long

785
.yarn/releases/yarn-3.2.0.cjs vendored Executable file
View File

File diff suppressed because one or more lines are too long

2
.yarnrc.yml
View File

@ -6,4 +6,4 @@ plugins:
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
spec: "@yarnpkg/plugin-interactive-tools"
yarnPath: .yarn/releases/yarn-3.0.2.cjs
yarnPath: .yarn/releases/yarn-3.2.0.cjs

2
build-scripts/gulp/gallery.js
View File

@ -3,7 +3,7 @@
const gulp = require("gulp");
const fs = require("fs");
const path = require("path");
const marked = require("marked");
const { marked } = require("marked");
const glob = require("glob");
const yaml = require("js-yaml");

4
build-scripts/gulp/translations.js
View File

@ -7,7 +7,7 @@ const source = require("vinyl-source-stream");
const vinylBuffer = require("vinyl-buffer");
const gulp = require("gulp");
const fs = require("fs");
const foreach = require("gulp-foreach");
const flatmap = require("gulp-flatmap");
const merge = require("gulp-merge-json");
const rename = require("gulp-rename");
const transform = require("gulp-json-transform");
@ -183,7 +183,7 @@ gulp.task("build-merged-translations", () =>
})
.pipe(transform((data, file) => lokaliseTransform(data, data, file)))
.pipe(
foreach((stream, file) => {
flatmap((stream, file) => {
// For each language generate a merged json file. It begins with the master
// translation as a failsafe for untranslated strings, and merges all parent
// tags into one file for each specific subtag

13
cast/src/receiver/layout/hc-lovelace.ts
View File

@ -1,5 +1,5 @@
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { customElement, property, query } from "lit/decorators";
import { fireEvent } from "../../../../src/common/dom/fire_event";
import { LovelaceConfig } from "../../../../src/data/lovelace";
import { Lovelace } from "../../../../src/panels/lovelace/types";
@ -20,6 +20,8 @@ class HcLovelace extends LitElement {
@property() public urlPath: string | null = null;
@query("hui-view") private _huiView?: HTMLElement;
protected render(): TemplateResult {
const index = this._viewIndex;
if (index === undefined) {
@ -78,12 +80,12 @@ class HcLovelace extends LitElement {
this.lovelaceConfig.background;
if (configBackground) {
(this.shadowRoot!.querySelector(
"hui-view"
) as HTMLElement)!.style.setProperty(
this._huiView!.style.setProperty(
"--lovelace-background",
configBackground
);
} else {
this._huiView!.style.removeProperty("--lovelace-background");
}
}
}
@ -116,6 +118,9 @@ class HcLovelace extends LitElement {
:host > * {
flex: 1;
}
hui-view {
background: var(--lovelace-background, var(--primary-background-color));
}
`;
}
}

2
hassio/src/addon-store/hassio-addon-store.ts
View File

@ -14,7 +14,7 @@ import memoizeOne from "memoize-one";
import { atLeastVersion } from "../../../src/common/config/version";
import { fireEvent } from "../../../src/common/dom/fire_event";
import { navigate } from "../../../src/common/navigate";
import "../../../src/common/search/search-input";
import "../../../src/components/search-input";
import { extractSearchParam } from "../../../src/common/url/search-params";
import "../../../src/components/ha-button-menu";
import "../../../src/components/ha-icon-button";

2
hassio/src/dialogs/hardware/dialog-hassio-hardware.ts
View File

@ -3,7 +3,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../../../src/common/dom/fire_event";
import "../../../../src/common/search/search-input";
import "../../../../src/components/search-input";
import { stringCompare } from "../../../../src/common/string/compare";
import "../../../../src/components/ha-dialog";
import "../../../../src/components/ha-expansion-panel";

23
package.json
View File

@ -117,7 +117,7 @@
"leaflet-draw": "^1.0.4",
"lit": "^2.1.2",
"lit-vaadin-helpers": "^0.3.0",
"marked": "^3.0.2",
"marked": "^4.0.12",
"memoize-one": "^5.2.1",
"node-vibrant": "3.2.1-alpha.1",
"proxy-polyfill": "^0.3.2",
@ -137,12 +137,12 @@
"vue": "^2.6.12",
"vue2-daterange-picker": "^0.5.1",
"web-animations-js": "^2.3.2",
"workbox-cacheable-response": "^6.1.5",
"workbox-core": "^6.1.5",
"workbox-expiration": "^6.1.5",
"workbox-precaching": "^6.1.5",
"workbox-routing": "^6.1.5",
"workbox-strategies": "^6.1.5",
"workbox-cacheable-response": "^6.4.2",
"workbox-core": "^6.4.2",
"workbox-expiration": "^6.4.2",
"workbox-precaching": "^6.4.2",
"workbox-routing": "^6.4.2",
"workbox-strategies": "^6.4.2",
"xss": "^1.0.9"
},
"devDependencies": {
@ -171,7 +171,7 @@
"@types/js-yaml": "^4",
"@types/leaflet": "^1",
"@types/leaflet-draw": "^1",
"@types/marked": "^2",
"@types/marked": "^4",
"@types/mocha": "^8",
"@types/qrcode": "^1.4.2",
"@types/sortablejs": "^1",
@ -198,7 +198,7 @@
"fs-extra": "^7.0.1",
"glob": "^7.2.0",
"gulp": "^4.0.2",
"gulp-foreach": "^0.1.0",
"gulp-flatmap": "^1.0.2",
"gulp-json-transform": "^0.4.6",
"gulp-merge-json": "^1.3.1",
"gulp-rename": "^2.0.0",
@ -235,7 +235,7 @@
"webpack-dev-server": "^4.3.0",
"webpack-manifest-plugin": "^4.0.2",
"webpackbar": "^5.0.0-3",
"workbox-build": "^6.1.5"
"workbox-build": "^6.4.2"
},
"_comment": "Polymer 3.2 contained a bug, fixed in https://github.com/Polymer/polymer/pull/5569, add as patch",
"resolutions": {
@ -255,5 +255,6 @@
"prettier": {
"trailingComma": "es5",
"arrowParens": "always"
}
},
"packageManager": "yarn@3.2.0"
}

2
setup.cfg
View File

@ -1,6 +1,6 @@
[metadata]
name = home-assistant-frontend
version = 20220223.0
version = 20220224.0
author = The Home Assistant Authors
author_email = hello@home-assistant.io
license = Apache-2.0

2
src/components/data-table/ha-data-table.ts
View File

@ -21,7 +21,7 @@ import { styleMap } from "lit/directives/style-map";
import memoizeOne from "memoize-one";
import { restoreScroll } from "../../common/decorators/restore-scroll";
import { fireEvent } from "../../common/dom/fire_event";
import "../../common/search/search-input";
import "../search-input";
import { debounce } from "../../common/util/debounce";
import { nextRender } from "../../common/util/render-status";
import { haStyleScrollbar } from "../../resources/styles";

13
src/components/ha-select.ts
View File

@ -1,6 +1,6 @@
import { SelectBase } from "@material/mwc-select/mwc-select-base";
import { styles } from "@material/mwc-select/mwc-select.css";
import { html, nothing } from "lit";
import { css, html, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { debounce } from "../common/util/debounce";
import { nextRender } from "../common/util/render-status";
@ -20,8 +20,6 @@ export class HaSelect extends SelectBase {
></span>`;
}
static override styles = [styles];
connectedCallback() {
super.connectedCallback();
window.addEventListener("translations-updated", this._translationsUpdated);
@ -39,6 +37,15 @@ export class HaSelect extends SelectBase {
await nextRender();
this.layoutOptions();
}, 500);
static override styles = [
styles,
css`
.mdc-select:not(.mdc-select--disabled) .mdc-select__icon {
color: var(--secondary-text-color);
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {

4
src/components/ha-textfield.ts
View File

@ -53,6 +53,10 @@ export class HaTextField extends TextFieldBase {
padding-right: var(--text-field-suffix-padding-right, 0px);
}
.mdc-text-field__icon {
color: var(--secondary-text-color);
}
input {
text-align: var(--text-field-text-align);
}

12
src/common/search/search-input.ts → src/components/search-input.ts
View File

@ -1,12 +1,12 @@
import { mdiClose, mdiMagnify } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query } from "lit/decorators";
import "../../components/ha-icon-button";
import "../../components/ha-svg-icon";
import "../../components/ha-textfield";
import type { HaTextField } from "../../components/ha-textfield";
import { HomeAssistant } from "../../types";
import { fireEvent } from "../dom/fire_event";
import "./ha-icon-button";
import "./ha-svg-icon";
import "./ha-textfield";
import type { HaTextField } from "./ha-textfield";
import { HomeAssistant } from "../types";
import { fireEvent } from "../common/dom/fire_event";
@customElement("search-input")
class SearchInput extends LitElement {

13
src/data/config.ts
View File

@ -1,8 +1,13 @@
import { HomeAssistant } from "../types";
interface ValidationResult {
valid: boolean;
error: string | null;
interface ValidConfig {
valid: true;
error: null;
}
interface InvalidConfig {
valid: false;
error: string;
}
type ValidKeys = "trigger" | "action" | "condition";
@ -12,7 +17,7 @@ export const validateConfig = <
>(
hass: HomeAssistant,
config: T
): Promise<Record<keyof T, ValidationResult>> =>
): Promise<Record<keyof T, ValidConfig | InvalidConfig>> =>
hass.callWS({
type: "validate_config",
...config,

5
src/data/service.ts
View File

@ -1,7 +1,10 @@
import { HomeAssistant } from "../types";
import { Action } from "./script";
export const callExecuteScript = (hass: HomeAssistant, sequence: Action[]) =>
export const callExecuteScript = (
hass: HomeAssistant,
sequence: Action | Action[]
) =>
hass.callWS({
type: "execute_script",
sequence,

2
src/dialogs/config-flow/step-flow-pick-handler.ts
View File

@ -15,7 +15,7 @@ import memoizeOne from "memoize-one";
import { isComponentLoaded } from "../../common/config/is_component_loaded";
import { fireEvent } from "../../common/dom/fire_event";
import { navigate } from "../../common/navigate";
import "../../common/search/search-input";
import "../../components/search-input";
import { caseInsensitiveStringCompare } from "../../common/string/compare";
import { LocalizeFunc } from "../../common/translations/localize";
import "../../components/ha-icon-next";

66
src/dialogs/more-info/controls/more-info-media_player.ts
View File

@ -50,42 +50,38 @@ class MoreInfoMediaPlayer extends LitElement {
const controls = computeMediaControls(stateObj);
return html`
${!controls
? ""
: html`
<div class="controls">
<div class="basic-controls">
${controls!.map(
(control) => html`
<ha-icon-button
action=${control.action}
@click=${this._handleClick}
.path=${control.icon}
.label=${this.hass.localize(
`ui.card.media_player.${control.action}`
)}
>
</ha-icon-button>
`
<div class="controls">
<div class="basic-controls">
${controls!.map(
(control) => html`
<ha-icon-button
action=${control.action}
@click=${this._handleClick}
.path=${control.icon}
.label=${this.hass.localize(
`ui.card.media_player.${control.action}`
)}
</div>
${supportsFeature(stateObj, SUPPORT_BROWSE_MEDIA)
? html`
<mwc-button
.label=${this.hass.localize(
"ui.card.media_player.browse_media"
)}
@click=${this._showBrowseMedia}
>
<ha-svg-icon
.path=${mdiPlayBoxMultiple}
slot="icon"
></ha-svg-icon>
</mwc-button>
`
: ""}
</div>
`}
>
</ha-icon-button>
`
)}
</div>
${supportsFeature(stateObj, SUPPORT_BROWSE_MEDIA)
? html`
<mwc-button
.label=${this.hass.localize(
"ui.card.media_player.browse_media"
)}
@click=${this._showBrowseMedia}
>
<ha-svg-icon
.path=${mdiPlayBoxMultiple}
slot="icon"
></ha-svg-icon>
</mwc-button>
`
: ""}
</div>
${(supportsFeature(stateObj, SUPPORT_VOLUME_SET) ||
supportsFeature(stateObj, SUPPORT_VOLUME_BUTTONS)) &&
![UNAVAILABLE, UNKNOWN, "off"].includes(stateObj.state)

54
src/panels/config/automation/action/ha-automation-action-row.ts
View File

@ -16,10 +16,16 @@ import "../../../../components/ha-icon-button";
import "../../../../components/ha-select";
import type { HaSelect } from "../../../../components/ha-select";
import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
import { validateConfig } from "../../../../data/config";
import { Action, getActionType } from "../../../../data/script";
import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
import { callExecuteScript } from "../../../../data/service";
import {
showAlertDialog,
showConfirmationDialog,
} from "../../../../dialogs/generic/show-dialog-box";
import { haStyle } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
import { showToast } from "../../../../util/toast";
import "./types/ha-automation-action-activate_scene";
import "./types/ha-automation-action-choose";
import "./types/ha-automation-action-condition";
@ -180,6 +186,11 @@ export default class HaAutomationActionRow extends LitElement {
.label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical}
></ha-icon-button>
<mwc-list-item>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.run_action"
)}
</mwc-list-item>
<mwc-list-item .disabled=${!this._uiModeAvailable}>
${yamlMode
? this.hass.localize(
@ -290,17 +301,54 @@ export default class HaAutomationActionRow extends LitElement {
private _handleAction(ev: CustomEvent<ActionDetail>) {
switch (ev.detail.index) {
case 0:
this._switchYamlMode();
this._runAction();
break;
case 1:
fireEvent(this, "duplicate");
this._switchYamlMode();
break;
case 2:
fireEvent(this, "duplicate");
break;
case 3:
this._onDelete();
break;
}
}
private async _runAction() {
const validated = await validateConfig(this.hass, {
action: this.action,
});
if (!validated.action.valid) {
showAlertDialog(this, {
title: this.hass.localize(
"ui.panel.config.automation.editor.actions.invalid_action"
),
text: validated.action.error,
});
return;
}
try {
await callExecuteScript(this.hass, this.action);
} catch (err: any) {
showAlertDialog(this, {
title: this.hass.localize(
"ui.panel.config.automation.editor.actions.run_action_error"
),
text: err.message || err,
});
return;
}
showToast(this, {
message: this.hass.localize(
"ui.panel.config.automation.editor.actions.run_action_success"
),
});
}
private _onDelete() {
showConfirmationDialog(this, {
text: this.hass.localize(

3
src/panels/config/automation/manual-automation-editor.ts
View File

@ -346,7 +346,8 @@ export class HaManualAutomationEditor extends LitElement {
.link-button-row {
padding: 14px;
}
ha-textarea {
ha-textarea,
ha-textfield {
display: block;
}
span[slot="introduction"] a {

13
src/panels/config/automation/trigger/types/ha-automation-trigger-time.ts
View File

@ -23,9 +23,9 @@ export class HaTimeTrigger extends LitElement implements TriggerElement {
private _schema = memoizeOne(
(localize: LocalizeFunc, inputMode?: boolean): HaFormSchema[] => {
const modeSchema = inputMode
? { name: "at", selector: { entity: { domain: "input_datetime" } } }
: { name: "at", selector: { time: {} } };
const atSelector = inputMode
? { entity: { domain: "input_datetime" } }
: { time: {} };
return [
{
@ -47,7 +47,7 @@ export class HaTimeTrigger extends LitElement implements TriggerElement {
],
],
},
modeSchema,
{ name: "at", selector: atSelector },
];
}
);
@ -80,7 +80,7 @@ export class HaTimeTrigger extends LitElement implements TriggerElement {
const schema: HaFormSchema[] = this._schema(this.hass.localize, inputMode);
const data = {
mode: "value",
mode: inputMode ? "input" : "value",
...this.trigger,
};
@ -99,7 +99,8 @@ export class HaTimeTrigger extends LitElement implements TriggerElement {
ev.stopPropagation();
const newValue = ev.detail.value;
this._inputMode = newValue.mode.value === "input";
this._inputMode = newValue.mode === "input";
delete newValue.mode;
Object.keys(newValue).forEach((key) =>
newValue[key] === undefined || newValue[key] === ""

16
src/panels/config/cloud/account/cloud-account.ts
View File

@ -29,6 +29,7 @@ import "./cloud-remote-pref";
import "./cloud-tts-pref";
import "./cloud-webhooks";
import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
@customElement("cloud-account")
export class CloudAccount extends SubscribeMixin(LitElement) {
@ -276,11 +277,22 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
switch (ev.detail.index) {
case 0:
await cloudLogout(this.hass);
fireEvent(this, "ha-refresh-cloud-status");
showConfirmationDialog(this, {
text: this.hass.localize(
"ui.panel.config.cloud.account.sign_out_confirm"
),
confirmText: this.hass!.localize("ui.common.yes"),
dismissText: this.hass!.localize("ui.common.no"),
confirm: () => this._logoutFromCloud(),
});
}
}
private async _logoutFromCloud() {
await cloudLogout(this.hass);
fireEvent(this, "ha-refresh-cloud-status");
}
_computeRTLDirection(hass) {
return computeRTLDirection(hass);
}

2
src/panels/config/core/ha-config-name-form.ts
View File

@ -40,7 +40,7 @@ class ConfigNameForm extends LitElement {
)}
.disabled=${disabled}
.value=${this._nameValue}
@changed=${this._handleChange}
@change=${this._handleChange}
></ha-textfield>
</div>
<div class="card-actions">

105
src/panels/config/dashboard/ha-config-dashboard.ts
View File

@ -43,6 +43,65 @@ import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
import { showToast } from "../../../util/toast";
import { documentationUrl } from "../../../util/documentation-url";
const randomTip = (hass: HomeAssistant) => {
const weighted: string[] = [];
const tips = [
{
content: hass.localize(
"ui.panel.config.tips.join",
"forums",
html`<a
href="https://community.home-assistant.io"
target="_blank"
rel="noreferrer"
>Forums</a
>`,
"twitter",
html`<a
href=${documentationUrl(hass, `/twitter`)}
target="_blank"
rel="noreferrer"
>Twitter</a
>`,
"discord",
html`<a
href=${documentationUrl(hass, `/join-chat`)}
target="_blank"
rel="noreferrer"
>Chat</a
>`,
"blog",
html`<a
href=${documentationUrl(hass, `/blog`)}
target="_blank"
rel="noreferrer"
>Blog</a
>`,
"newsletter",
html`<span class="keep-together"
><a
href=${documentationUrl(hass, `/newsletter`)}
target="_blank"
rel="noreferrer"
>Newsletter</a
>
<ha-svg-icon class="new" .path=${mdiNewBox}></ha-svg-icon
></span>`
),
weight: 2,
},
{ content: hass.localize("ui.dialogs.quick-bar.key_c_hint"), weight: 1 },
];
tips.forEach((tip) => {
for (let i = 0; i < tip.weight; i++) {
weighted.push(tip.content);
}
});
return weighted[Math.floor(Math.random() * weighted.length)];
};
@customElement("ha-config-dashboard")
class HaConfigDashboard extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@ -145,47 +204,7 @@ class HaConfigDashboard extends LitElement {
<div class="tips">
<ha-svg-icon .path=${mdiLightbulbOutline}></ha-svg-icon>
<span class="tip-word">Tip!</span>
<span class="text">
${this.hass.localize(
"ui.panel.config.tips.join",
"forums",
html`<a
href="https://community.home-assistant.io"
target="_blank"
rel="noreferrer"
>Forums</a
>`,
"twitter",
html`<a
href=${documentationUrl(this.hass, `/twitter`)}
target="_blank"
rel="noreferrer"
>Twitter</a
>`,
"discord",
html`<a
href=${documentationUrl(this.hass, `/join-chat`)}
target="_blank"
rel="noreferrer"
>Chat</a
>`,
"blog",
html`<a
href=${documentationUrl(this.hass, `/blog`)}
target="_blank"
rel="noreferrer"
>Blog</a
>`,
"newsletter",
html`<a
href=${documentationUrl(this.hass, `/newsletter`)}
target="_blank"
rel="noreferrer"
>Newsletter</a
>
<ha-svg-icon class="new" .path=${mdiNewBox}></ha-svg-icon>`
)}
</span>
<span class="text">${randomTip(this.hass)}</span>
</div>
</ha-config-section>
</ha-app-layout>
@ -293,6 +312,10 @@ class HaConfigDashboard extends LitElement {
.new {
color: var(--primary-color);
}
.keep-together {
display: inline-block;
}
`,
];
}

12
src/panels/config/devices/ha-config-devices-dashboard.ts
View File

@ -438,6 +438,13 @@ export class HaConfigDeviceDashboard extends LitElement {
)}
.path=${mdiFilterVariant}
></ha-icon-button>
${this.narrow && activeFilters?.length
? html`<mwc-list-item @click=${this._clearFilter}
>${this.hass.localize("ui.components.data-table.filtering_by")}
${activeFilters.join(", ")}
<span class="clear">Clear</span></mwc-list-item
>`
: ""}
<ha-check-list-item
left
@request-selected=${this._showDisabledChanged}
@ -523,6 +530,11 @@ export class HaConfigDeviceDashboard extends LitElement {
ha-button-menu {
margin-left: 8px;
}
.clear {
color: var(--primary-color);
padding-left: 8px;
text-transform: uppercase;
}
`,
haStyle,
];

14
src/panels/config/entities/ha-config-entities.ts
View File

@ -585,6 +585,15 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
)}
.path=${mdiFilterVariant}
></ha-icon-button>
${this.narrow && activeFilters?.length
? html`<mwc-list-item @click=${this._clearFilter}
>${this.hass.localize(
"ui.components.data-table.filtering_by"
)}
${activeFilters.join(", ")}
<span class="clear">Clear</span></mwc-list-item
>`
: ""}
<ha-check-list-item
@request-selected=${this._showDisabledChanged}
.selected=${this._showDisabled}
@ -896,6 +905,11 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
ha-button-menu {
margin-left: 8px;
}
.clear {
color: var(--primary-color);
padding-left: 8px;
text-transform: uppercase;
}
`,
];
}

2
src/panels/config/integrations/ha-config-integrations.ts
View File

@ -15,7 +15,7 @@ import { ifDefined } from "lit/directives/if-defined";
import memoizeOne from "memoize-one";
import type { HASSDomEvent } from "../../../common/dom/fire_event";
import { navigate } from "../../../common/navigate";
import "../../../common/search/search-input";
import "../../../components/search-input";
import { caseInsensitiveStringCompare } from "../../../common/string/compare";
import type { LocalizeFunc } from "../../../common/translations/localize";
import { extractSearchParam } from "../../../common/url/search-params";

8
src/panels/config/integrations/ha-integration-card.ts
View File

@ -213,11 +213,11 @@ export class HaIntegrationCard extends LitElement {
} else {
stateTextExtra = html`
<br />
<a href="/config/logs"
>${this.hass.localize(
<a href=${`/config/logs/?filter=${item.domain}`}>
${this.hass.localize(
"ui.panel.config.integrations.config_entry.check_the_logs"
)}</a
>
)}
</a>
`;
}
}

2
src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts
View File

@ -8,7 +8,7 @@ import {
Node,
} from "vis-network/peer/esm/vis-network";
import { navigate } from "../../../../../common/navigate";
import "../../../../../common/search/search-input";
import "../../../../../components/search-input";
import "../../../../../components/device/ha-device-picker";
import "../../../../../components/ha-button-menu";
import "../../../../../components/ha-checkbox";

2
src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
View File

@ -347,7 +347,7 @@ class ZWaveJSConfigDashboard extends LitElement {
} else {
stateTextExtra = html`
<br />
<a href="/config/logs"
<a href="/config/logs?filter=zwave_js"
>${this.hass.localize(
"ui.panel.config.integrations.config_entry.check_the_logs"
)}</a

4
src/panels/config/logs/ha-config-logs.ts
View File

@ -4,7 +4,7 @@ import "../../../layouts/hass-tabs-subpage";
import { haStyle } from "../../../resources/styles";
import { HomeAssistant, Route } from "../../../types";
import { configSections } from "../ha-panel-config";
import "../../../common/search/search-input";
import "../../../components/search-input";
import { extractSearchParam } from "../../../common/url/search-params";
import "./error-log-card";
import "./system-log-card";
@ -22,7 +22,7 @@ export class HaConfigLogs extends LitElement {
@property() public route!: Route;
@state() private _filter = extractSearchParam("filter") ?? "";
@state() private _filter = extractSearchParam("filter") || "";
@query("system-log-card", true) private systemLog?: SystemLogCard;

29
src/panels/developer-tools/state/developer-tools-state.js
View File

@ -18,6 +18,7 @@ import "../../../components/ha-code-editor";
import "../../../components/ha-icon-button";
import "../../../components/ha-svg-icon";
import "../../../components/ha-checkbox";
import "../../../components/search-input";
import "../../../components/ha-expansion-panel";
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
import { EventsMixin } from "../../../mixins/events-mixin";
@ -85,7 +86,8 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
padding: 0;
}
.filters ha-textfield {
.filters search-input {
display: block;
--mdc-text-field-fill-color: transparent;
}
@ -252,28 +254,27 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
</tr>
<tr class="filters">
<th>
<ha-textfield
<search-input
label="[[localize('ui.panel.developer-tools.tabs.states.filter_entities')]]"
type="search"
value="[[_entityFilter]]"
on-input="_entityFilterChanged"
></ha-textfield>
on-value-changed="_entityFilterChanged"
></search-input>
</th>
<th>
<ha-textfield
<search-input
label="[[localize('ui.panel.developer-tools.tabs.states.filter_states')]]"
type="search"
value="[[_stateFilter]]"
on-input="_stateFilterChanged"
></ha-textfield>
on-value-changed="_stateFilterChanged"
></search-input>
</th>
<th hidden$="[[!computeShowAttributes(narrow, _showAttributes)]]">
<ha-textfield
<search-input
label="[[localize('ui.panel.developer-tools.tabs.states.filter_attributes')]]"
type="search"
value="[[_attributeFilter]]"
on-input="_attributeFilterChanged"
></ha-textfield>
on-value-changed="_attributeFilterChanged"
></search-input>
</th>
</tr>
<tr hidden$="[[!computeShowEntitiesPlaceholder(_entities)]]">
@ -440,15 +441,15 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
}
_entityFilterChanged(ev) {
this._entityFilter = ev.target.value;
this._entityFilter = ev.detail.value;
}
_stateFilterChanged(ev) {
this._stateFilter = ev.target.value;
this._stateFilter = ev.detail.value;
}
_attributeFilterChanged(ev) {
this._attributeFilter = ev.target.value;
this._attributeFilter = ev.detail.value;
}
_getHistoryURL(entityId, inputDate) {

2
src/panels/lovelace/editor/card-editor/hui-card-picker.ts
View File

@ -15,7 +15,7 @@ import { styleMap } from "lit/directives/style-map";
import { until } from "lit/directives/until";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../common/search/search-input";
import "../../../../components/search-input";
import "../../../../components/ha-circular-progress";
import { UNAVAILABLE_STATES } from "../../../../data/entity";
import type {

6
src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
View File

@ -90,11 +90,9 @@ export class HuiAlarmPanelCardEditor
private _computeLabelCallback = (schema: HaFormSchema) => {
if (schema.name === "entity") {
return `${this.hass!.localize(
return this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.entity"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.required"
)})`;
);
}
if (schema.name === "name") {

6
src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts
View File

@ -107,11 +107,9 @@ export class HuiEntityCardEditor
private _computeLabelCallback = (schema: HaFormSchema) => {
if (schema.name === "entity") {
return `${this.hass!.localize(
return this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.entity"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.required"
)})`;
);
}
return this.hass!.localize(

217
src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts
View File

@ -1,25 +1,18 @@
import "@material/mwc-list/mwc-list-item";
import "@polymer/paper-input/paper-input";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import "../../../../components/ha-form/ha-form";
import type { HassEntity } from "home-assistant-js-websocket";
import { html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { assert } from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import { computeDomain } from "../../../../common/entity/compute_domain";
import { domainIcon } from "../../../../common/entity/domain_icon";
import "../../../../components/ha-formfield";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-select";
import "../../../../components/ha-switch";
import { HomeAssistant } from "../../../../types";
import { EntitiesCardEntityConfig } from "../../cards/types";
import "../../components/hui-action-editor";
import "../../components/hui-entity-editor";
import "../../components/hui-theme-select-editor";
import { LovelaceRowEditor } from "../../types";
import type { LocalizeFunc } from "../../../../common/translations/localize";
import type { HaFormSchema } from "../../../../components/ha-form/types";
import type { HomeAssistant } from "../../../../types";
import type { EntitiesCardEntityConfig } from "../../cards/types";
import type { LovelaceRowEditor } from "../../types";
import { entitiesConfigStruct } from "../structs/entities-struct";
import { EditorTarget, EntitiesEditorEvent } from "../types";
import { configElementStyle } from "./config-elements-style";
const SecondaryInfoValues: { [key: string]: { domains?: string[] } } = {
"entity-id": {},
@ -45,127 +38,105 @@ export class HuiGenericEntityRowEditor
this._config = config;
}
get _entity(): string {
return this._config!.entity || "";
}
private _schema = memoizeOne(
(
entity: string,
icon: string | undefined,
entityState: HassEntity,
localize: LocalizeFunc
): HaFormSchema[] => {
const domain = computeDomain(entity);
get _name(): string {
return this._config!.name || "";
}
get _icon(): string {
return this._config!.icon || "";
}
get _secondary_info(): string {
return this._config!.secondary_info || "";
}
return [
{ name: "entity", required: true, selector: { entity: {} } },
{
type: "grid",
name: "",
schema: [
{ name: "name", selector: { text: {} } },
{
name: "icon",
selector: {
icon: {
placeholder: icon || entityState?.attributes.icon,
fallbackPath:
!icon && !entityState?.attributes.icon && entityState
? domainIcon(domain, entityState)
: undefined,
},
},
},
],
},
{
name: "secondary_info",
selector: {
select: {
options: Object.keys(SecondaryInfoValues)
.filter(
(info) =>
!("domains" in SecondaryInfoValues[info]) ||
("domains" in SecondaryInfoValues[info] &&
SecondaryInfoValues[info].domains!.includes(domain))
)
.map((info) => ({
value: info,
label: localize(
`ui.panel.lovelace.editor.card.entities.secondary_info_values.${info}`
),
})),
},
},
},
];
}
);
protected render(): TemplateResult {
if (!this.hass || !this._config) {
return html``;
}
const domain = computeDomain(this._entity);
const entityState = this.hass.states[this._entity];
const entityState = this.hass.states[this._config.entity];
const schema = this._schema(
this._config.entity,
this._config.icon,
entityState,
this.hass.localize
);
return html`
<div class="card-config">
<ha-entity-picker
allow-custom-entity
.hass=${this.hass}
.value=${this._config.entity}
.configValue=${"entity"}
@change=${this._valueChanged}
></ha-entity-picker>
<div class="side-by-side">
<paper-input
.label=${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.name"
)}
.value=${this._config.name}
.configValue=${"name"}
@value-changed=${this._valueChanged}
></paper-input>
<ha-icon-picker
.label=${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.icon"
)}
.value=${this._config.icon}
.configValue=${"icon"}
.placeholder=${entityState?.attributes.icon}
.fallbackPath=${!this._icon &&
!entityState?.attributes.icon &&
entityState
? domainIcon(computeDomain(entityState.entity_id), entityState)
: undefined}
@value-changed=${this._valueChanged}
></ha-icon-picker>
</div>
<ha-select
label="Secondary Info"
.configValue=${"secondary_info"}
@selected=${this._valueChanged}
@closed=${stopPropagation}
.value=${this._config.secondary_info || "none"}
naturalMenuWidth
fixedMenuPosition
>
<mwc-list-item value=""
>${this.hass!.localize(
"ui.panel.lovelace.editor.card.entities.secondary_info_values.none"
)}</mwc-list-item
>
${Object.keys(SecondaryInfoValues).map((info) => {
if (
!("domains" in SecondaryInfoValues[info]) ||
("domains" in SecondaryInfoValues[info] &&
SecondaryInfoValues[info].domains!.includes(domain))
) {
return html`
<mwc-list-item .value=${info}>
${this.hass!.localize(
`ui.panel.lovelace.editor.card.entities.secondary_info_values.${info}`
)}
</mwc-list-item>
`;
}
return "";
})}
</ha-select>
</div>
<ha-form
.hass=${this.hass}
.data=${this._config}
.schema=${schema}
.computeLabel=${this._computeLabelCallback}
@value-changed=${this._valueChanged}
></ha-form>
`;
}
private _valueChanged(ev: EntitiesEditorEvent): void {
if (!this._config || !this.hass) {
return;
}
const target = ev.target! as EditorTarget;
const value = target.value || ev.detail?.item?.value;
if (this[`_${target.configValue}`] === value) {
return;
}
if (target.configValue) {
if (value === "" || !value) {
this._config = { ...this._config };
delete this._config[target.configValue!];
} else {
this._config = {
...this._config,
[target.configValue!]: value,
};
}
}
fireEvent(this, "config-changed", { config: this._config });
private _valueChanged(ev: CustomEvent): void {
fireEvent(this, "config-changed", { config: ev.detail.value });
}
static get styles(): CSSResultGroup {
return configElementStyle;
}
private _computeLabelCallback = (schema: HaFormSchema) => {
if (schema.name === "entity") {
return this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.entity"
);
}
return (
this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
) ||
this.hass!.localize(
`ui.panel.lovelace.editor.card.entity-row.${schema.name}`
)
);
};
}
declare global {

115
src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts
View File

@ -1,16 +1,13 @@
import "@polymer/paper-input/paper-input";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import "../../../../components/ha-form/ha-form";
import { html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { assert, assign, object, optional, string } from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/entity/ha-entity-picker";
import { HomeAssistant } from "../../../../types";
import { HumidifierCardConfig } from "../../cards/types";
import "../../components/hui-theme-select-editor";
import { LovelaceCardEditor } from "../../types";
import type { HaFormSchema } from "../../../../components/ha-form/types";
import type { HomeAssistant } from "../../../../types";
import type { HumidifierCardConfig } from "../../cards/types";
import type { LovelaceCardEditor } from "../../types";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import { EditorTarget, EntitiesEditorEvent } from "../types";
import { configElementStyle } from "./config-elements-style";
const cardConfigStruct = assign(
baseLovelaceCardConfig,
@ -21,7 +18,21 @@ const cardConfigStruct = assign(
})
);
const includeDomains = ["humidifier"];
const SCHEMA: HaFormSchema[] = [
{
name: "entity",
required: true,
selector: { entity: { domain: "humidifer" } },
},
{
type: "grid",
name: "",
schema: [
{ name: "name", selector: { text: {} } },
{ name: "theme", selector: { theme: {} } },
],
},
];
@customElement("hui-humidifier-card-editor")
export class HuiHumidifierCardEditor
@ -37,81 +48,37 @@ export class HuiHumidifierCardEditor
this._config = config;
}
get _entity(): string {
return this._config!.entity || "";
}
get _name(): string {
return this._config!.name || "";
}
get _theme(): string {
return this._config!.theme || "";
}
protected render(): TemplateResult {
if (!this.hass || !this._config) {
return html``;
}
return html`
<div class="card-config">
<ha-entity-picker
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.entity"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.required"
)})"
.hass=${this.hass}
.value=${this._entity}
.configValue=${"entity"}
.includeDomains=${includeDomains}
@change=${this._valueChanged}
allow-custom-entity
></ha-entity-picker>
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.name"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._name}
.configValue=${"name"}
@value-changed=${this._valueChanged}
></paper-input>
<hui-theme-select-editor
.hass=${this.hass}
.value=${this._theme}
.configValue=${"theme"}
@value-changed=${this._valueChanged}
></hui-theme-select-editor>
</div>
<ha-form
.hass=${this.hass}
.data=${this._config}
.schema=${SCHEMA}
.computeLabel=${this._computeLabelCallback}
@value-changed=${this._valueChanged}
></ha-form>
`;
}
private _valueChanged(ev: EntitiesEditorEvent): void {
if (!this._config || !this.hass) {
return;
}
const target = ev.target! as EditorTarget;
if (this[`_${target.configValue}`] === target.value) {
return;
}
if (target.configValue) {
if (target.value === "") {
this._config = { ...this._config };
delete this._config[target.configValue!];
} else {
this._config = { ...this._config, [target.configValue!]: target.value };
}
}
fireEvent(this, "config-changed", { config: this._config });
private _valueChanged(ev: CustomEvent): void {
fireEvent(this, "config-changed", { config: ev.detail.value });
}
static get styles(): CSSResultGroup {
return configElementStyle;
}
private _computeLabelCallback = (schema: HaFormSchema) => {
if (schema.name === "entity") {
return this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.entity"
);
}
return this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
);
};
}
declare global {

104
src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts
View File

@ -1,14 +1,13 @@
import "@polymer/paper-input/paper-input";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import "../../../../components/ha-form/ha-form";
import { html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { assert, assign, object, optional, string } from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import { HomeAssistant } from "../../../../types";
import { IframeCardConfig } from "../../cards/types";
import { LovelaceCardEditor } from "../../types";
import type { HaFormSchema } from "../../../../components/ha-form/types";
import type { HomeAssistant } from "../../../../types";
import type { IframeCardConfig } from "../../cards/types";
import type { LovelaceCardEditor } from "../../types";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import { EditorTarget, EntitiesEditorEvent } from "../types";
import { configElementStyle } from "./config-elements-style";
const cardConfigStruct = assign(
baseLovelaceCardConfig,
@ -19,6 +18,18 @@ const cardConfigStruct = assign(
})
);
const SCHEMA: HaFormSchema[] = [
{ name: "title", selector: { text: {} } },
{
name: "",
type: "grid",
schema: [
{ name: "url", required: true, selector: { text: {} } },
{ name: "aspect_ratio", selector: { text: {} } },
],
},
];
@customElement("hui-iframe-card-editor")
export class HuiIframeCardEditor
extends LitElement
@ -33,85 +44,28 @@ export class HuiIframeCardEditor
this._config = config;
}
get _title(): string {
return this._config!.title || "";
}
get _url(): string {
return this._config!.url || "";
}
get _aspect_ratio(): string {
return this._config!.aspect_ratio || "";
}
protected render(): TemplateResult {
if (!this.hass || !this._config) {
return html``;
}
return html`
<div class="card-config">
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.url"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.required"
)})"
.value=${this._url}
.configValue=${"url"}
@value-changed=${this._valueChanged}
></paper-input>
<div class="side-by-side">
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.title"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._title}
.configValue=${"title"}
@value-changed=${this._valueChanged}
></paper-input>
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.aspect_ratio"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._aspect_ratio}
.configValue=${"aspect_ratio"}
@value-changed=${this._valueChanged}
></paper-input>
</div>
</div>
<ha-form
.hass=${this.hass}
.data=${this._config}
.schema=${SCHEMA}
.computeLabel=${this._computeLabelCallback}
@value-changed=${this._valueChanged}
></ha-form>
`;
}
private _valueChanged(ev: EntitiesEditorEvent): void {
if (!this._config || !this.hass) {
return;
}
const target = ev.target! as EditorTarget;
const value = target.value;
if (this[`_${target.configValue}`] === value) {
return;
}
if (target.configValue) {
if (value === "") {
this._config = { ...this._config };
delete this._config[target.configValue!];
} else {
this._config = { ...this._config, [target.configValue!]: value };
}
}
fireEvent(this, "config-changed", { config: this._config });
private _valueChanged(ev: CustomEvent): void {
fireEvent(this, "config-changed", { config: ev.detail.value });
}
static get styles(): CSSResultGroup {
return configElementStyle;
}
private _computeLabelCallback = (schema: HaFormSchema) =>
this.hass!.localize(`ui.panel.lovelace.editor.card.generic.${schema.name}`);
}
declare global {

166
src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts
View File

@ -1,22 +1,21 @@
import "@polymer/paper-input/paper-input";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { assert, object, optional, string, assign } from "superstruct";
import type { HassEntity } from "home-assistant-js-websocket";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-icon-picker";
import { ActionConfig } from "../../../../data/lovelace";
import { HomeAssistant } from "../../../../types";
import { LightCardConfig } from "../../cards/types";
import type { ActionConfig } from "../../../../data/lovelace";
import type { HomeAssistant } from "../../../../types";
import type { LightCardConfig } from "../../cards/types";
import "../../components/hui-action-editor";
import "../../components/hui-entity-editor";
import "../../components/hui-theme-select-editor";
import { LovelaceCardEditor } from "../../types";
import type { LovelaceCardEditor } from "../../types";
import { actionConfigStruct } from "../structs/action-struct";
import { EditorTarget } from "../types";
import type { EditorTarget } from "../types";
import { configElementStyle } from "./config-elements-style";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import { domainIcon } from "../../../../common/entity/domain_icon";
import { computeDomain } from "../../../../common/entity/compute_domain";
import type { HaFormSchema } from "../../../../components/ha-form/types";
const cardConfigStruct = assign(
baseLovelaceCardConfig,
@ -30,8 +29,6 @@ const cardConfigStruct = assign(
})
);
const includeDomains = ["light"];
@customElement("hui-light-card-editor")
export class HuiLightCardEditor
extends LitElement
@ -46,21 +43,39 @@ export class HuiLightCardEditor
this._config = config;
}
get _name(): string {
return this._config!.name || "";
}
get _theme(): string {
return this._config!.theme || "";
}
get _entity(): string {
return this._config!.entity || "";
}
get _icon(): string {
return this._config!.icon || "";
}
private _schema = memoizeOne(
(
entity: string,
icon: string | undefined,
entityState: HassEntity
): HaFormSchema[] => [
{
name: "entity",
required: true,
selector: { entity: { domain: "light" } },
},
{
type: "grid",
name: "",
schema: [
{ name: "name", selector: { text: {} } },
{
name: "icon",
selector: {
icon: {
placeholder: icon || entityState?.attributes.icon,
fallbackPath:
!icon && !entityState?.attributes.icon && entityState
? domainIcon(computeDomain(entity), entityState)
: undefined,
},
},
},
],
},
{ name: "theme", selector: { theme: {} } },
]
);
get _hold_action(): ActionConfig {
return this._config!.hold_action || { action: "more-info" };
@ -84,59 +99,22 @@ export class HuiLightCardEditor
"none",
];
const entityState = this.hass.states[this._entity];
const entityState = this.hass.states[this._config.entity];
const schema = this._schema(
this._config.entity,
this._config.icon,
entityState
);
return html`
<ha-form
.hass=${this.hass}
.data=${this._config}
.schema=${schema}
.computeLabel=${this._computeLabelCallback}
@value-changed=${this._valueChanged}
></ha-form>
<div class="card-config">
<ha-entity-picker
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.entity"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.required"
)})"
.hass=${this.hass}
.value=${this._entity}
.configValue=${"entity"}
.includeDomains=${includeDomains}
@value-changed=${this._valueChanged}
allow-custom-entity
></ha-entity-picker>
<div class="side-by-side">
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.name"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._name}
.configValue=${"name"}
@value-changed=${this._valueChanged}
></paper-input>
<ha-icon-picker
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.icon"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._icon}
.placeholder=${this._icon || entityState?.attributes.icon}
.fallbackPath=${!this._icon &&
!entityState?.attributes.icon &&
entityState
? domainIcon(computeDomain(entityState.entity_id), entityState)
: undefined}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
></ha-icon-picker>
</div>
<hui-theme-select-editor
.hass=${this.hass}
.value=${this._theme}
.configValue=${"theme"}
@value-changed=${this._valueChanged}
></hui-theme-select-editor>
<hui-action-editor
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.hold_action"
@ -147,7 +125,7 @@ export class HuiLightCardEditor
.config=${this._hold_action}
.actions=${actions}
.configValue=${"hold_action"}
@value-changed=${this._valueChanged}
@value-changed=${this._actionChanged}
></hui-action-editor>
<hui-action-editor
@ -160,13 +138,13 @@ export class HuiLightCardEditor
.config=${this._double_tap_action}
.actions=${actions}
.configValue=${"double_tap_action"}
@value-changed=${this._valueChanged}
@value-changed=${this._actionChanged}
></hui-action-editor>
</div>
`;
}
private _valueChanged(ev: CustomEvent): void {
private _actionChanged(ev: CustomEvent): void {
if (!this._config || !this.hass) {
return;
}
@ -190,9 +168,33 @@ export class HuiLightCardEditor
fireEvent(this, "config-changed", { config: this._config });
}
static get styles(): CSSResultGroup {
return configElementStyle;
private _valueChanged(ev: CustomEvent): void {
fireEvent(this, "config-changed", { config: ev.detail.value });
}
private _computeLabelCallback = (schema: HaFormSchema) => {
if (schema.name === "entity") {
return this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.entity"
);
}
return this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
);
};
static styles: CSSResultGroup = [
configElementStyle,
css`
ha-form,
hui-action-editor {
display: block;
margin-bottom: 24px;
overflow: auto;
}
`,
];
}
declare global {

148
src/panels/lovelace/editor/config-elements/hui-logbook-card-editor.ts
View File

@ -1,5 +1,5 @@
import "@polymer/paper-input/paper-input";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import "../../../../components/ha-form/ha-form";
import { html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import {
array,
@ -12,15 +12,11 @@ import {
} from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/entity/ha-entities-picker";
import "../../../../components/entity/ha-entity-picker";
import { HomeAssistant } from "../../../../types";
import { LogbookCardConfig } from "../../cards/types";
import "../../components/hui-entity-editor";
import "../../components/hui-theme-select-editor";
import { LovelaceCardEditor } from "../../types";
import type { HaFormSchema } from "../../../../components/ha-form/types";
import type { HomeAssistant } from "../../../../types";
import type { LogbookCardConfig } from "../../cards/types";
import type { LovelaceCardEditor } from "../../types";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import { EditorTarget } from "../types";
import { configElementStyle } from "./config-elements-style";
const cardConfigStruct = assign(
baseLovelaceCardConfig,
@ -32,6 +28,18 @@ const cardConfigStruct = assign(
})
);
const SCHEMA: HaFormSchema[] = [
{ name: "title", selector: { text: {} } },
{
name: "",
type: "grid",
schema: [
{ name: "theme", selector: { theme: {} } },
{ name: "hours_to_show", selector: { number: { mode: "box", min: 1 } } },
],
},
];
@customElement("hui-logbook-card-editor")
export class HuiLogbookCardEditor
extends LitElement
@ -41,118 +49,58 @@ export class HuiLogbookCardEditor
@state() private _config?: LogbookCardConfig;
@state() private _configEntities?: string[];
public setConfig(config: LogbookCardConfig): void {
assert(config, cardConfigStruct);
this._config = config;
this._configEntities = config.entities;
}
get _title(): string {
return this._config!.title || "";
}
get _entities(): string[] {
return this._config!.entities || [];
}
get _hours_to_show(): number {
return this._config!.hours_to_show || 24;
}
get _theme(): string {
return this._config!.theme || "";
}
protected render(): TemplateResult {
if (!this.hass || !this._config) {
return html``;
}
return html`
<div class="card-config">
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.title"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._title}
.configValue=${"title"}
@value-changed=${this._valueChanged}
></paper-input>
<div class="side-by-side">
<hui-theme-select-editor
.hass=${this.hass}
.value=${this._theme}
.configValue=${"theme"}
@value-changed=${this._valueChanged}
></hui-theme-select-editor>
<paper-input
type="number"
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.hours_to_show"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._hours_to_show}
min="1"
.configValue=${"hours_to_show"}
@value-changed=${this._valueChanged}
></paper-input>
</div>
<h3>
${`${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.entities"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.required"
)})`}
</h3>
<ha-entities-picker
.hass=${this.hass}
.value=${this._configEntities}
@value-changed=${this._valueChanged}
>
</ha-entities-picker>
</div>
<ha-form
.hass=${this.hass}
.data=${this._config}
.schema=${SCHEMA}
.computeLabel=${this._computeLabelCallback}
@value-changed=${this._valueChanged}
></ha-form>
<h3>
${`${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.entities"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.required"
)})`}
</h3>
<ha-entities-picker
.hass=${this.hass}
.value=${this._entities}
@value-changed=${this._entitiesChanged}
>
</ha-entities-picker>
`;
}
private _valueChanged(ev: CustomEvent): void {
if (!this._config || !this.hass) {
return;
}
const target = ev.target! as EditorTarget;
if (this[`_${target.configValue}`] === target.value) {
return;
}
if (ev.detail && ev.detail.value && Array.isArray(ev.detail.value)) {
this._config = { ...this._config, entities: ev.detail.value };
} else if (target.configValue) {
if (target.value === "") {
this._config = { ...this._config };
delete this._config[target.configValue!];
} else {
let value: any = target.value;
if (target.type === "number") {
value = Number(value);
}
this._config = {
...this._config,
[target.configValue!]: value,
};
}
}
private _entitiesChanged(ev: CustomEvent): void {
this._config = { ...this._config!, entities: ev.detail.value };
fireEvent(this, "config-changed", { config: this._config });
}
static get styles(): CSSResultGroup {
return configElementStyle;
private _valueChanged(ev: CustomEvent): void {
fireEvent(this, "config-changed", { config: ev.detail.value });
}
private _computeLabelCallback = (schema: HaFormSchema) =>
this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
) ||
this.hass!.localize(`ui.panel.lovelace.editor.card.logbook.${schema.name}`);
}
declare global {

142
src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
View File

@ -1,3 +1,4 @@
import "../../../../components/ha-form/ha-form";
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -12,7 +13,6 @@ import {
assign,
} from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
import "../../../../components/ha-formfield";
import "../../../../components/ha-switch";
import { PolymerChangedEvent } from "../../../../polymer-types";
@ -27,6 +27,7 @@ import { entitiesConfigStruct } from "../structs/entities-struct";
import { EditorTarget, EntitiesEditorEvent } from "../types";
import { configElementStyle } from "./config-elements-style";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import { HaFormSchema } from "../../../../components/ha-form/types";
const cardConfigStruct = assign(
baseLovelaceCardConfig,
@ -41,6 +42,20 @@ const cardConfigStruct = assign(
})
);
const SCHEMA: HaFormSchema[] = [
{ name: "title", selector: { text: {} } },
{
name: "",
type: "grid",
schema: [
{ name: "aspect_ratio", selector: { text: {} } },
{ name: "default_zoom", selector: { number: { mode: "box", min: 0 } } },
{ name: "dark_mode", selector: { boolean: {} } },
{ name: "hours_to_show", selector: { number: { mode: "box", min: 1 } } },
],
},
];
@customElement("hui-map-card-editor")
export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
@property({ attribute: false }) public hass?: HomeAssistant;
@ -57,99 +72,24 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
: [];
}
get _title(): string {
return this._config!.title || "";
}
get _aspect_ratio(): string {
return this._config!.aspect_ratio || "";
}
get _default_zoom(): number {
return this._config!.default_zoom || 0;
}
get _geo_location_sources(): string[] {
return this._config!.geo_location_sources || [];
}
get _hours_to_show(): number {
return this._config!.hours_to_show || 0;
}
get _dark_mode(): boolean {
return this._config!.dark_mode || false;
}
protected render(): TemplateResult {
if (!this.hass || !this._config) {
return html``;
}
return html`
<ha-form
.hass=${this.hass}
.data=${this._config}
.schema=${SCHEMA}
.computeLabel=${this._computeLabelCallback}
@value-changed=${this._valueChanged}
></ha-form>
<div class="card-config">
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.title"
)}
(${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._title}
.configValue=${"title"}
@value-changed=${this._valueChanged}
></paper-input>
<div class="side-by-side">
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.aspect_ratio"
)}
(${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._aspect_ratio}
.configValue=${"aspect_ratio"}
@value-changed=${this._valueChanged}
></paper-input>
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.map.default_zoom"
)}
(${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
type="number"
.value=${this._default_zoom}
.configValue=${"default_zoom"}
@value-changed=${this._valueChanged}
></paper-input>
</div>
<div class="side-by-side">
<ha-formfield
.label=${this.hass.localize(
"ui.panel.lovelace.editor.card.map.dark_mode"
)}
.dir=${computeRTLDirection(this.hass)}
>
<ha-switch
.checked=${this._dark_mode}
.configValue=${"dark_mode"}
@change=${this._valueChanged}
></ha-switch
></ha-formfield>
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.map.hours_to_show"
)}
(${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
type="number"
.value=${this._hours_to_show}
.configValue=${"hours_to_show"}
@value-changed=${this._valueChanged}
></paper-input>
</div>
<hui-entity-editor
.hass=${this.hass}
.entities=${this._configEntities}
@ -167,8 +107,7 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
)}
.hass=${this.hass}
.value=${this._geo_location_sources}
.configValue=${"geo_location_sources"}
@value-changed=${this._valueChanged}
@value-changed=${this._geoSourcesChanged}
></hui-input-list-editor>
</div>
</div>
@ -176,18 +115,15 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
}
private _entitiesValueChanged(ev: EntitiesEditorEvent): void {
if (!this._config || !this.hass) {
return;
}
if (ev.detail && ev.detail.entities) {
this._config = { ...this._config, entities: ev.detail.entities };
this._config = { ...this._config!, entities: ev.detail.entities };
this._configEntities = processEditorEntities(this._config.entities);
fireEvent(this, "config-changed", { config: this._config });
fireEvent(this, "config-changed", { config: this._config! });
}
}
private _valueChanged(ev: PolymerChangedEvent<any>): void {
private _geoSourcesChanged(ev: PolymerChangedEvent<any>): void {
if (!this._config || !this.hass) {
return;
}
@ -196,26 +132,34 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
return;
}
let value = target.checked ?? ev.detail.value;
const value = ev.detail.value;
if (value && target.type === "number") {
value = Number(value);
}
if (this[`_${target.configValue}`] === value) {
if (this._geo_location_sources === value) {
return;
}
if (value === "") {
this._config = { ...this._config };
delete this._config[target.configValue!];
} else if (target.configValue) {
delete this._config.geo_location_sources;
} else {
this._config = {
...this._config,
[target.configValue]: value,
geo_location_sources: value,
};
}
fireEvent(this, "config-changed", { config: this._config });
}
private _valueChanged(ev: CustomEvent): void {
fireEvent(this, "config-changed", { config: ev.detail.value });
}
private _computeLabelCallback = (schema: HaFormSchema) =>
this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
) ||
this.hass!.localize(`ui.panel.lovelace.editor.card.map.${schema.name}`);
static get styles(): CSSResultGroup {
return [
configElementStyle,

110
src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts
View File

@ -1,16 +1,13 @@
import "@polymer/paper-input/paper-input";
import "@polymer/paper-input/paper-textarea";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import "../../../../components/ha-form/ha-form";
import { html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { assert, assign, object, optional, string } from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import { HomeAssistant } from "../../../../types";
import { MarkdownCardConfig } from "../../cards/types";
import "../../components/hui-theme-select-editor";
import { LovelaceCardEditor } from "../../types";
import type { HaFormSchema } from "../../../../components/ha-form/types";
import type { HomeAssistant } from "../../../../types";
import type { MarkdownCardConfig } from "../../cards/types";
import type { LovelaceCardEditor } from "../../types";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import { EditorTarget, EntitiesEditorEvent } from "../types";
import { configElementStyle } from "./config-elements-style";
const cardConfigStruct = assign(
baseLovelaceCardConfig,
@ -21,6 +18,12 @@ const cardConfigStruct = assign(
})
);
const SCHEMA: HaFormSchema[] = [
{ name: "title", selector: { text: {} } },
{ name: "content", required: true, selector: { text: { multiline: true } } },
{ name: "theme", selector: { theme: {} } },
];
@customElement("hui-markdown-card-editor")
export class HuiMarkdownCardEditor
extends LitElement
@ -35,90 +38,33 @@ export class HuiMarkdownCardEditor
this._config = config;
}
get _title(): string {
return this._config!.title || "";
}
get _content(): string {
return this._config!.content || "";
}
get _theme(): string {
return this._config!.theme || "";
}
protected render(): TemplateResult {
if (!this.hass || !this._config) {
return html``;
}
return html`
<div class="card-config">
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.title"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._title}
.configValue=${"title"}
@value-changed=${this._valueChanged}
></paper-input>
<paper-textarea
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.markdown.content"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.required"
)})"
.value=${this._content}
.configValue=${"content"}
@keydown=${this._ignoreKeydown}
@value-changed=${this._valueChanged}
autocapitalize="none"
autocomplete="off"
spellcheck="false"
></paper-textarea>
<hui-theme-select-editor
.hass=${this.hass}
.value=${this._theme}
.configValue=${"theme"}
@value-changed=${this._valueChanged}
></hui-theme-select-editor>
</div>
<ha-form
.hass=${this.hass}
.data=${this._config}
.schema=${SCHEMA}
.computeLabel=${this._computeLabelCallback}
@value-changed=${this._valueChanged}
></ha-form>
`;
}
private _ignoreKeydown(ev: KeyboardEvent) {
// Stop keyboard events from the paper-textarea from propagating to avoid accidentally closing the dialog when the user presses Enter.
ev.stopPropagation();
private _valueChanged(ev: CustomEvent): void {
fireEvent(this, "config-changed", { config: ev.detail.value });
}
private _valueChanged(ev: EntitiesEditorEvent): void {
if (!this._config || !this.hass) {
return;
}
const target = ev.target! as EditorTarget;
if (this[`_${target.configValue}`] === target.value) {
return;
}
if (target.configValue) {
if (target.value === "" && target.configValue !== "content") {
this._config = { ...this._config };
delete this._config[target.configValue!];
} else {
this._config = {
...this._config,
[target.configValue!]: target.value,
};
}
}
fireEvent(this, "config-changed", { config: this._config });
}
static get styles(): CSSResultGroup {
return configElementStyle;
}
private _computeLabelCallback = (schema: HaFormSchema) =>
this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
) ||
this.hass!.localize(
`ui.panel.lovelace.editor.card.markdown.${schema.name}`
);
}
declare global {

18
src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts
View File

@ -1,5 +1,5 @@
import "@polymer/paper-input/paper-input";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { assert, object, optional, string, assign } from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
@ -63,7 +63,7 @@ export class HuiPictureCardEditor
return html`
<div class="card-config">
<paper-input
<ha-textfield
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.image"
)} (${this.hass.localize(
@ -71,8 +71,8 @@ export class HuiPictureCardEditor
)})"
.value=${this._image}
.configValue=${"image"}
@value-changed=${this._valueChanged}
></paper-input>
@input=${this._valueChanged}
></ha-textfield>
<hui-theme-select-editor
.hass=${this.hass}
.value=${this._theme}
@ -134,7 +134,15 @@ export class HuiPictureCardEditor
}
static get styles(): CSSResultGroup {
return configElementStyle;
return [
configElementStyle,
css`
ha-textfield {
display: block;
margin-bottom: 8px;
}
`,
];
}
}

279
src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
View File

@ -1,24 +1,16 @@
import "@material/mwc-list/mwc-list-item";
import "@polymer/paper-input/paper-input";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { assert, assign, boolean, object, optional, string } from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
import "../../../../components/ha-formfield";
import "../../../../components/ha-select";
import "../../../../components/ha-switch";
import { ActionConfig } from "../../../../data/lovelace";
import { HomeAssistant } from "../../../../types";
import { PictureEntityCardConfig } from "../../cards/types";
import type { HaFormSchema } from "../../../../components/ha-form/types";
import type { ActionConfig } from "../../../../data/lovelace";
import type { HomeAssistant } from "../../../../types";
import type { PictureEntityCardConfig } from "../../cards/types";
import "../../components/hui-action-editor";
import "../../components/hui-entity-editor";
import "../../components/hui-theme-select-editor";
import { LovelaceCardEditor } from "../../types";
import type { LovelaceCardEditor } from "../../types";
import { actionConfigStruct } from "../structs/action-struct";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import { EditorTarget } from "../types";
import type { EditorTarget } from "../types";
import { configElementStyle } from "./config-elements-style";
const cardConfigStruct = assign(
@ -38,7 +30,38 @@ const cardConfigStruct = assign(
})
);
const includeDomains = ["camera"];
const SCHEMA: HaFormSchema[] = [
{ name: "entity", required: true, selector: { entity: {} } },
{ name: "name", selector: { text: {} } },
{ name: "image", selector: { text: {} } },
{ name: "camera_image", selector: { entity: { domain: "camera" } } },
{
name: "",
type: "grid",
schema: [
{
name: "camera_view",
selector: { select: { options: ["auto", "live"] } },
},
{ name: "aspect_ratio", selector: { text: {} } },
],
},
{
name: "",
type: "grid",
schema: [
{
name: "show_name",
selector: { boolean: {} },
},
{
name: "show_state",
selector: { boolean: {} },
},
],
},
{ name: "theme", selector: { theme: {} } },
];
@customElement("hui-picture-entity-card-editor")
export class HuiPictureEntityCardEditor
@ -54,30 +77,6 @@ export class HuiPictureEntityCardEditor
this._config = config;
}
get _entity(): string {
return this._config!.entity || "";
}
get _name(): string {
return this._config!.name || "";
}
get _image(): string {
return this._config!.image || "";
}
get _camera_image(): string {
return this._config!.camera_image || "";
}
get _camera_view(): string {
return this._config!.camera_view || "auto";
}
get _aspect_ratio(): string {
return this._config!.aspect_ratio || "";
}
get _tap_action(): ActionConfig {
return this._config!.tap_action || { action: "more-info" };
}
@ -86,140 +85,29 @@ export class HuiPictureEntityCardEditor
return this._config!.hold_action;
}
get _show_name(): boolean {
return this._config!.show_name ?? true;
}
get _show_state(): boolean {
return this._config!.show_state ?? true;
}
get _theme(): string {
return this._config!.theme || "";
}
protected render(): TemplateResult {
if (!this.hass || !this._config) {
return html``;
}
const actions = ["more-info", "toggle", "navigate", "call-service", "none"];
const views = ["auto", "live"];
const dir = computeRTLDirection(this.hass!);
const data = {
show_state: true,
show_name: true,
camera_view: "auto",
...this._config,
};
return html`
<ha-form
.hass=${this.hass}
.data=${data}
.schema=${SCHEMA}
.computeLabel=${this._computeLabelCallback}
@value-changed=${this._valueChanged}
></ha-form>
<div class="card-config">
<ha-entity-picker
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.entity"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.required"
)})"
.hass=${this.hass}
.value=${this._entity}
.configValue=${"entity"}
@value-changed=${this._valueChanged}
allow-custom-entity
></ha-entity-picker>
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.name"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._name}
.configValue=${"name"}
@value-changed=${this._valueChanged}
></paper-input>
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.image"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._image}
.configValue=${"image"}
@value-changed=${this._valueChanged}
></paper-input>
<ha-entity-picker
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.camera_image"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.hass=${this.hass}
.value=${this._camera_image}
.configValue=${"camera_image"}
@value-changed=${this._valueChanged}
.includeDomains=${includeDomains}
allow-custom-entity
></ha-entity-picker>
<div class="side-by-side">
<ha-select
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.camera_view"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.configValue=${"camera_view"}
@selected=${this._valueChanged}
@closed=${stopPropagation}
fixedMenuPosition
naturalMenuWidth
.value=${views.indexOf(this._camera_view)}
>
${views.map(
(view) =>
html`<mwc-list-item .value=${view}>${view}</mwc-list-item> `
)}
</ha-select>
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.aspect_ratio"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._aspect_ratio}
.configValue=${"aspect_ratio"}
@value-changed=${this._valueChanged}
></paper-input>
</div>
<div class="side-by-side">
<div>
<ha-formfield
.label=${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.show_name"
)}
.dir=${dir}
>
<ha-switch
.checked=${this._config!.show_name !== false}
.configValue=${"show_name"}
@change=${this._change}
></ha-switch
></ha-formfield>
</div>
<div>
<ha-formfield
.label=${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.show_state"
)}
.dir=${dir}
>
<ha-switch
.checked=${this._config!.show_state !== false}
.configValue=${"show_state"}
@change=${this._change}
></ha-switch
></ha-formfield>
</div>
</div>
<hui-theme-select-editor
.hass=${this.hass}
.value=${this._theme}
.configValue=${"theme"}
@value-changed=${this._valueChanged}
></hui-theme-select-editor>
<div class="side-by-side">
<hui-action-editor
.label="${this.hass.localize(
@ -231,7 +119,7 @@ export class HuiPictureEntityCardEditor
.config=${this._tap_action}
.actions=${actions}
.configValue=${"tap_action"}
@value-changed=${this._valueChanged}
@value-changed=${this._changed}
></hui-action-editor>
<hui-action-editor
.label="${this.hass.localize(
@ -243,32 +131,18 @@ export class HuiPictureEntityCardEditor
.config=${this._hold_action}
.actions=${actions}
.configValue=${"hold_action"}
@value-changed=${this._valueChanged}
@value-changed=${this._changed}
></hui-action-editor>
</div>
</div>
`;
}
private _change(ev: Event) {
if (!this._config || !this.hass) {
return;
}
const target = ev.target! as EditorTarget;
const value = target.checked;
if (this[`_${target.configValue}`] === value) {
return;
}
this._config = {
...this._config,
[target.configValue!]: value,
};
fireEvent(this, "config-changed", { config: this._config });
private _valueChanged(ev: CustomEvent): void {
fireEvent(this, "config-changed", { config: ev.detail.value });
}
private _valueChanged(ev: CustomEvent): void {
private _changed(ev: CustomEvent): void {
if (!this._config || !this.hass) {
return;
}
@ -279,23 +153,36 @@ export class HuiPictureEntityCardEditor
return;
}
if (target.configValue) {
if (value !== false && !value) {
this._config = { ...this._config };
delete this._config[target.configValue!];
} else {
this._config = {
...this._config,
[target.configValue!]: value,
};
}
if (value !== false && !value) {
this._config = { ...this._config };
delete this._config[target.configValue!];
} else {
this._config = {
...this._config,
[target.configValue!]: value,
};
}
fireEvent(this, "config-changed", { config: this._config });
}
static get styles(): CSSResultGroup {
return configElementStyle;
}
private _computeLabelCallback = (schema: HaFormSchema) => {
if (schema.name === "entity") {
return this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.entity"
);
}
return (
this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
) ||
this.hass!.localize(
`ui.panel.lovelace.editor.card.picture-entity.${schema.name}`
)
);
};
static styles: CSSResultGroup = configElementStyle;
}
declare global {

210
src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts
View File

@ -1,25 +1,21 @@
import "@material/mwc-list/mwc-list-item";
import "@polymer/paper-input/paper-input";
import "../../components/hui-action-editor";
import "../../../../components/ha-form/ha-form";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { array, assert, assign, object, optional, string } from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import "../../../../components/entity/ha-entity-picker";
import "../../../../components/ha-select";
import { ActionConfig } from "../../../../data/lovelace";
import { HomeAssistant } from "../../../../types";
import { PictureGlanceCardConfig } from "../../cards/types";
import "../../components/hui-action-editor";
import type { HaFormSchema } from "../../../../components/ha-form/types";
import type { ActionConfig } from "../../../../data/lovelace";
import type { HomeAssistant } from "../../../../types";
import type { PictureGlanceCardConfig } from "../../cards/types";
import "../../components/hui-entity-editor";
import "../../components/hui-theme-select-editor";
import { EntityConfig } from "../../entity-rows/types";
import { LovelaceCardEditor } from "../../types";
import type { EntityConfig } from "../../entity-rows/types";
import type { LovelaceCardEditor } from "../../types";
import { processEditorEntities } from "../process-editor-entities";
import { actionConfigStruct } from "../structs/action-struct";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import { entitiesConfigStruct } from "../structs/entities-struct";
import { EditorTarget } from "../types";
import type { EditorTarget } from "../types";
import { configElementStyle } from "./config-elements-style";
const cardConfigStruct = assign(
@ -38,7 +34,26 @@ const cardConfigStruct = assign(
})
);
const includeDomains = ["camera"];
const actions = ["more-info", "toggle", "navigate", "call-service", "none"];
const SCHEMA: HaFormSchema[] = [
{ name: "title", selector: { text: {} } },
{ name: "image", selector: { text: {} } },
{ name: "camera_image", selector: { entity: { domain: "camera" } } },
{
name: "",
type: "grid",
schema: [
{
name: "camera_view",
selector: { select: { options: ["auto", "live"] } },
},
{ name: "aspect_ratio", selector: { text: {} } },
],
},
{ name: "entity", selector: { entity: {} } },
{ name: "theme", selector: { theme: {} } },
];
@customElement("hui-picture-glance-card-editor")
export class HuiPictureGlanceCardEditor
@ -57,39 +72,6 @@ export class HuiPictureGlanceCardEditor
this._configEntities = processEditorEntities(config.entities);
}
get _entity(): string {
return this._config!.entity || "";
}
get _title(): string {
return this._config!.title || "";
}
get _image(): string {
return (
this._config!.image ||
(this._camera_image
? ""
: "https://www.home-assistant.io/images/merchandise/shirt-frontpage.png")
);
}
get _camera_image(): string {
return this._config!.camera_image || "";
}
get _camera_view(): string {
return this._config!.camera_view || "auto";
}
get _state_image(): Record<string, unknown> {
return this._config!.state_image || {};
}
get _aspect_ratio(): string {
return this._config!.aspect_ratio || "";
}
get _tap_action(): ActionConfig {
return this._config!.tap_action || { action: "toggle" };
}
@ -98,102 +80,27 @@ export class HuiPictureGlanceCardEditor
return this._config!.hold_action || { action: "more-info" };
}
get _theme(): string {
return this._config!.theme || "";
}
protected render(): TemplateResult {
if (!this.hass || !this._config) {
return html``;
}
const actions = ["more-info", "toggle", "navigate", "call-service", "none"];
const views = ["auto", "live"];
const data = { camera_view: "auto", ...this._config };
return html`
<ha-form
.hass=${this.hass}
.data=${data}
.schema=${SCHEMA}
.computeLabel=${this._computeLabelCallback}
@value-changed=${this._valueChanged}
></ha-form>
<div class="card-config">
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.title"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._title}
.configValue=${"title"}
@value-changed=${this._valueChanged}
></paper-input>
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.image"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._image}
.configValue=${"image"}
@value-changed=${this._valueChanged}
></paper-input>
<ha-entity-picker
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.camera_image"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.hass=${this.hass}
.value=${this._camera_image}
.configValue=${"camera_image"}
@value-changed=${this._valueChanged}
allow-custom-entity
.includeDomains=${includeDomains}
></ha-entity-picker>
<div class="side-by-side">
<ha-select
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.camera_view"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.configValue=${"camera_view"}
@selected=${this._valueChanged}
@closed=${stopPropagation}
fixedMenuPosition
naturalMenuWidth
.value=${this._camera_view}
>
${views.map(
(view) =>
html`<mwc-list-item .value=${view}>${view}</mwc-list-item> `
)}
</ha-select>
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.aspect_ratio"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._aspect_ratio}
.configValue=${"aspect_ratio"}
@value-changed=${this._valueChanged}
></paper-input>
</div>
<ha-entity-picker
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.picture-glance.state_entity"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.hass=${this.hass}
.value=${this._entity}
.configValue=${"entity"}
@value-changed=${this._valueChanged}
allow-custom-entity
></ha-entity-picker>
<div class="side-by-side">
<hui-action-editor
.label="${this.hass.localize(
.label=${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.tap_action"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
)}
.hass=${this.hass}
.config=${this._tap_action}
.actions=${actions}
@ -201,11 +108,9 @@ export class HuiPictureGlanceCardEditor
@value-changed=${this._valueChanged}
></hui-action-editor>
<hui-action-editor
.label="${this.hass.localize(
.label=${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.hold_action"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
)}
.hass=${this.hass}
.config=${this._hold_action}
.actions=${actions}
@ -216,19 +121,17 @@ export class HuiPictureGlanceCardEditor
<hui-entity-editor
.hass=${this.hass}
.entities=${this._configEntities}
@entities-changed=${this._valueChanged}
@entities-changed=${this._changed}
></hui-entity-editor>
<hui-theme-select-editor
.hass=${this.hass}
.value=${this._theme}
.configValue=${"theme"}
@value-changed=${this._valueChanged}
></hui-theme-select-editor>
</div>
`;
}
private _valueChanged(ev: CustomEvent): void {
fireEvent(this, "config-changed", { config: ev.detail.value });
}
private _changed(ev: CustomEvent): void {
if (!this._config || !this.hass) {
return;
}
@ -257,9 +160,24 @@ export class HuiPictureGlanceCardEditor
fireEvent(this, "config-changed", { config: this._config });
}
static get styles(): CSSResultGroup {
return configElementStyle;
}
private _computeLabelCallback = (schema: HaFormSchema) => {
if (schema.name === "entity") {
return this.hass!.localize(
"ui.panel.lovelace.editor.card.picture-glance.state_entity"
);
}
return (
this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
) ||
this.hass!.localize(
`ui.panel.lovelace.editor.card.picture-glance.${schema.name}`
)
);
};
static styles: CSSResultGroup = configElementStyle;
}
declare global {

107
src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts
View File

@ -1,16 +1,13 @@
import "@polymer/paper-input/paper-input";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import "../../../../components/ha-form/ha-form";
import { html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { assert, assign, object, optional, string } from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/entity/ha-entity-picker";
import { HomeAssistant } from "../../../../types";
import { PlantStatusCardConfig } from "../../cards/types";
import "../../components/hui-theme-select-editor";
import { LovelaceCardEditor } from "../../types";
import type { HaFormSchema } from "../../../../components/ha-form/types";
import type { HomeAssistant } from "../../../../types";
import type { PlantStatusCardConfig } from "../../cards/types";
import type { LovelaceCardEditor } from "../../types";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import { EditorTarget, EntitiesEditorEvent } from "../types";
import { configElementStyle } from "./config-elements-style";
const cardConfigStruct = assign(
baseLovelaceCardConfig,
@ -21,7 +18,11 @@ const cardConfigStruct = assign(
})
);
const includeDomains = ["plant"];
const SCHEMA: HaFormSchema[] = [
{ name: "entity", required: true, selector: { entity: { domain: "plant" } } },
{ name: "name", selector: { text: {} } },
{ name: "theme", selector: { theme: {} } },
];
@customElement("hui-plant-status-card-editor")
export class HuiPlantStatusCardEditor
@ -37,83 +38,37 @@ export class HuiPlantStatusCardEditor
this._config = config;
}
get _entity(): string {
return this._config!.entity || "";
}
get _name(): string {
return this._config!.name || "";
}
get _theme(): string {
return this._config!.theme || "";
}
protected render(): TemplateResult {
if (!this.hass || !this._config) {
return html``;
}
return html`
<div class="card-config">
<ha-entity-picker
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.entity"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.required"
)})"
.hass=${this.hass}
.value=${this._entity}
.configValue=${"entity"}
.includeDomains=${includeDomains}
@change=${this._valueChanged}
allow-custom-entity
></ha-entity-picker>
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.name"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._name}
.configValue=${"name"}
@value-changed=${this._valueChanged}
></paper-input>
<hui-theme-select-editor
.hass=${this.hass}
.value=${this._theme}
.configValue=${"theme"}
@value-changed=${this._valueChanged}
></hui-theme-select-editor>
</div>
<ha-form
.hass=${this.hass}
.data=${this._config}
.schema=${SCHEMA}
.computeLabel=${this._computeLabelCallback}
@value-changed=${this._valueChanged}
></ha-form>
`;
}
private _valueChanged(ev: EntitiesEditorEvent): void {
if (!this._config || !this.hass) {
return;
}
const target = ev.target! as EditorTarget;
if (this[`_${target.configValue}`] === target.value) {
return;
}
if (target.configValue) {
if (target.value === "") {
this._config = { ...this._config };
delete this._config[target.configValue!];
} else {
this._config = {
...this._config,
[target.configValue!]: target.value,
};
}
}
fireEvent(this, "config-changed", { config: this._config });
private _valueChanged(ev: CustomEvent): void {
fireEvent(this, "config-changed", { config: ev.detail.value });
}
static get styles(): CSSResultGroup {
return configElementStyle;
}
private _computeLabelCallback = (schema: HaFormSchema) => {
if (schema.name === "entity") {
return this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.entity"
);
}
return this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
);
};
}
declare global {

297
src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts
View File

@ -1,7 +1,8 @@
import "@material/mwc-list/mwc-list-item";
import "@polymer/paper-input/paper-input";
import "../../../../components/ha-form/ha-form";
import type { HassEntity } from "home-assistant-js-websocket";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import {
assert,
assign,
@ -13,20 +14,13 @@ import {
union,
} from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import { computeDomain } from "../../../../common/entity/compute_domain";
import { domainIcon } from "../../../../common/entity/domain_icon";
import "../../../../components/entity/ha-entity-picker";
import "../../../../components/ha-formfield";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-select";
import "../../../../components/ha-switch";
import { HomeAssistant } from "../../../../types";
import { SensorCardConfig } from "../../cards/types";
import "../../components/hui-theme-select-editor";
import { LovelaceCardEditor } from "../../types";
import type { HaFormSchema } from "../../../../components/ha-form/types";
import type { HomeAssistant } from "../../../../types";
import type { SensorCardConfig } from "../../cards/types";
import type { LovelaceCardEditor } from "../../types";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import { EditorTarget, EntitiesEditorEvent } from "../types";
import { configElementStyle } from "./config-elements-style";
const cardConfigStruct = assign(
@ -43,8 +37,6 @@ const cardConfigStruct = assign(
})
);
const includeDomains = ["counter", "input_number", "number", "sensor"];
@customElement("hui-sensor-card-editor")
export class HuiSensorCardEditor
extends LitElement
@ -59,200 +51,121 @@ export class HuiSensorCardEditor
this._config = config;
}
get _entity(): string {
return this._config!.entity || "";
}
get _name(): string {
return this._config!.name || "";
}
get _icon(): string {
return this._config!.icon || "";
}
get _graph(): string {
return this._config!.graph || "none";
}
get _unit(): string {
return this._config!.unit || "";
}
get _detail(): number {
return this._config!.detail ?? 1;
}
get _theme(): string {
return this._config!.theme || "";
}
get _hours_to_show(): number | string {
return this._config!.hours_to_show || "24";
}
private _schema = memoizeOne(
(
entity: string,
icon: string | undefined,
entityState: HassEntity
): HaFormSchema[] => [
{
name: "entity",
selector: {
entity: { domain: ["counter", "input_number", "number", "sensor"] },
},
},
{ name: "name", selector: { text: {} } },
{
type: "grid",
name: "",
schema: [
{
name: "icon",
selector: {
icon: {
placeholder: icon || entityState?.attributes.icon,
fallbackPath:
!icon && !entityState?.attributes.icon && entityState
? domainIcon(computeDomain(entity), entityState)
: undefined,
},
},
},
{
name: "graph",
selector: {
select: {
options: [
{
value: "none",
label: "None",
},
{
value: "line",
label: "Line",
},
],
},
},
},
{ name: "unit", selector: { text: {} } },
{ name: "detail", selector: { boolean: {} } },
{ name: "theme", selector: { theme: {} } },
{
name: "hours_to_show",
selector: { number: { min: 1, mode: "box" } },
},
],
},
]
);
protected render(): TemplateResult {
if (!this.hass || !this._config) {
return html``;
}
const graphs = ["line", "none"];
const entityState = this.hass.states[this._config.entity];
const entityState = this.hass.states[this._entity];
const schema = this._schema(
this._config.entity,
this._config.icon,
entityState
);
const data = {
hours_to_show: 24,
graph: "none",
...this._config,
detail: this._config!.detail === 2,
};
return html`
<div class="card-config">
<ha-entity-picker
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.entity"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.required"
)})"
.hass=${this.hass}
.value=${this._entity}
.configValue=${"entity"}
.includeDomains=${includeDomains}
@change=${this._valueChanged}
allow-custom-entity
></ha-entity-picker>
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.name"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._name}
.configValue=${"name"}
@value-changed=${this._valueChanged}
></paper-input>
<div class="side-by-side">
<ha-icon-picker
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.icon"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._icon}
.placeholder=${this._icon || entityState?.attributes.icon}
.fallbackPath=${!this._icon &&
!entityState?.attributes.icon &&
entityState
? domainIcon(computeDomain(entityState.entity_id), entityState)
: undefined}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
></ha-icon-picker>
<ha-select
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.sensor.graph_type"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.configValue=${"graph"}
@selected=${this._valueChanged}
@closed=${stopPropagation}
fixedMenuPosition
naturalMenuWidth
.value=${this._graph}
>
${graphs.map(
(graph) =>
html`<mwc-list-item .value=${graph}>${graph}</mwc-list-item>`
)}
</ha-select>
</div>
<div class="side-by-side">
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.unit"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._unit}
.configValue=${"unit"}
@value-changed=${this._valueChanged}
></paper-input>
<ha-formfield
label=${this.hass.localize(
"ui.panel.lovelace.editor.card.sensor.show_more_detail"
)}
>
<ha-switch
.checked=${this._detail === 2}
.configValue=${"detail"}
@change=${this._change}
></ha-switch>
</ha-formfield>
</div>
<div class="side-by-side">
<hui-theme-select-editor
.hass=${this.hass}
.value=${this._theme}
.configValue=${"theme"}
@value-changed=${this._valueChanged}
></hui-theme-select-editor>
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.hours_to_show"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
type="number"
.value=${this._hours_to_show}
min="1"
.configValue=${"hours_to_show"}
@value-changed=${this._valueChanged}
></paper-input>
</div>
</div>
<ha-form
.hass=${this.hass}
.data=${data}
.schema=${schema}
.computeLabel=${this._computeLabelCallback}
@value-changed=${this._valueChanged}
></ha-form>
`;
}
private _change(ev: Event) {
if (!this._config || !this.hass) {
return;
}
const value = (ev.target! as EditorTarget).checked ? 2 : 1;
if (this._detail === value) {
return;
}
this._config = {
...this._config,
detail: value,
};
fireEvent(this, "config-changed", { config: this._config });
private _valueChanged(ev: CustomEvent): void {
const config = ev.detail.value;
config.detail = config.detail ? 2 : 1;
fireEvent(this, "config-changed", { config });
}
private _valueChanged(ev: EntitiesEditorEvent): void {
if (!this._config || !this.hass) {
return;
private _computeLabelCallback = (schema: HaFormSchema) => {
if (schema.name === "entity") {
return this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.entity"
);
}
const target = ev.target! as EditorTarget;
if (this[`_${target.configValue}`] === target.value) {
return;
if (schema.name === "detail") {
return this.hass!.localize(
"ui.panel.lovelace.editor.card.sensor.show_more_detail"
);
}
if (target.configValue) {
if (
target.value === "" ||
(target.type === "number" && isNaN(Number(target.value)))
) {
this._config = { ...this._config };
delete this._config[target.configValue!];
} else {
let value: any = target.value;
if (target.type === "number") {
value = Number(value);
}
this._config = { ...this._config, [target.configValue!]: value };
}
}
fireEvent(this, "config-changed", { config: this._config });
}
return (
this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
) ||
this.hass!.localize(`ui.panel.lovelace.editor.card.sensor.${schema.name}`)
);
};
static get styles(): CSSResultGroup {
return configElementStyle;

8
src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts
View File

@ -1,4 +1,4 @@
import "@polymer/paper-input/paper-input";
import "../../../../components/ha-textfield";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { assert, assign, object, optional, string } from "superstruct";
@ -57,7 +57,7 @@ export class HuiShoppingListEditor
</div>
`
: ""}
<paper-input
<ha-textfield
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.title"
)} (${this.hass.localize(
@ -65,8 +65,8 @@ export class HuiShoppingListEditor
)})"
.value=${this._title}
.configValue=${"title"}
@value-changed=${this._valueChanged}
></paper-input>
@input=${this._valueChanged}
></ha-textfield>
<hui-theme-select-editor
.hass=${this.hass}
.value=${this._theme}

297
src/panels/lovelace/editor/config-elements/hui-statistics-graph-card-editor.ts
View File

@ -1,7 +1,7 @@
import "@material/mwc-list/mwc-list-item";
import "@polymer/paper-input/paper-input";
import "../../../../components/ha-form/ha-form";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import {
array,
assert,
@ -14,22 +14,15 @@ import {
union,
} from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import type { LocalizeFunc } from "../../../../common/translations/localize";
import "../../../../components/entity/ha-statistics-picker";
import "../../../../components/ha-checkbox";
import "../../../../components/ha-formfield";
import "../../../../components/ha-radio";
import type { HaRadio } from "../../../../components/ha-radio";
import "../../../../components/ha-select";
import { StatisticType } from "../../../../data/history";
import { HomeAssistant } from "../../../../types";
import { StatisticsGraphCardConfig } from "../../cards/types";
import type { HaFormSchema } from "../../../../components/ha-form/types";
import type { HomeAssistant } from "../../../../types";
import type { StatisticsGraphCardConfig } from "../../cards/types";
import { processConfigEntities } from "../../common/process-config-entities";
import { LovelaceCardEditor } from "../../types";
import type { LovelaceCardEditor } from "../../types";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import { entitiesConfigStruct } from "../structs/entities-struct";
import { EditorTarget } from "../types";
import { configElementStyle } from "./config-elements-style";
const statTypeStruct = union([
literal("sum"),
@ -78,133 +71,82 @@ export class HuiStatisticsGraphCardEditor
: [];
}
get _title(): string {
return this._config!.title || "";
}
get _days_to_show(): number {
return this._config!.days_to_show || 30;
}
get _period(): string {
return this._config!.period || "hour";
}
get _chart_type(): StatisticsGraphCardConfig["chart_type"] {
return this._config!.chart_type || "line";
}
get _stat_types(): StatisticType[] {
return this._config!.stat_types
? Array.isArray(this._config!.stat_types)
? this._config!.stat_types
: [this._config!.stat_types]
: ["mean", "min", "max", "sum"];
}
private _schema = memoizeOne((localize: LocalizeFunc) => [
{ name: "title", selector: { text: {} } },
{
name: "",
type: "grid",
schema: [
{
name: "period",
required: true,
selector: {
select: {
options: periods.map((period) => ({
value: period,
label: localize(
`ui.panel.lovelace.editor.card.statistics-graph.periods.${period}`
),
})),
},
},
},
{
name: "days_to_show",
required: true,
selector: { number: { min: 1, mode: "box" } },
},
{
name: "stat_types",
required: true,
type: "multi_select",
options: [
["mean", "Mean"],
["min", "Min"],
["max", "Max"],
["sum", "Sum"],
],
},
{
name: "chart_type",
required: true,
type: "select",
options: [
["line", "Line"],
["bar", "Bar"],
],
},
],
},
]);
protected render(): TemplateResult {
if (!this.hass || !this._config) {
return html``;
}
const schema = this._schema(this.hass.localize);
const stat_types = this._config!.stat_types
? Array.isArray(this._config!.stat_types)
? this._config!.stat_types
: [this._config!.stat_types]
: ["mean", "min", "max", "sum"];
const data = {
chart_type: "line",
period: "hour",
days_to_show: 30,
...this._config,
stat_types,
};
return html`
<div class="card-config">
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.title"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._title}
.configValue=${"title"}
@value-changed=${this._valueChanged}
></paper-input>
<div class="side-by-side">
<ha-select
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.statistics-graph.period"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.configValue=${"period"}
@selected=${this._periodSelected}
@closed=${stopPropagation}
fixedMenuPosition
naturalMenuWidth
.value=${this._period}
>
${periods.map(
(period) =>
html`<mwc-list-item .value=${period}>
${this.hass!.localize(
`ui.panel.lovelace.editor.card.statistics-graph.periods.${period}`
)}
</mwc-list-item>`
)}
</ha-select>
<paper-input
type="number"
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.days_to_show"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._days_to_show}
min="1"
.configValue=${"days_to_show"}
@value-changed=${this._valueChanged}
></paper-input>
</div>
<p>Show stat types:</p>
<div class="side-by-side">
<ha-formfield label="Sum">
<ha-checkbox
.checked=${this._stat_types.includes("sum")}
name="sum"
@change=${this._statTypesChanged}
></ha-checkbox>
</ha-formfield>
<ha-formfield label="Mean">
<ha-checkbox
.checked=${this._stat_types.includes("mean")}
name="mean"
@change=${this._statTypesChanged}
></ha-checkbox>
</ha-formfield>
<ha-formfield label="Min">
<ha-checkbox
.checked=${this._stat_types.includes("min")}
name="min"
@change=${this._statTypesChanged}
></ha-checkbox>
</ha-formfield>
<ha-formfield label="Max">
<ha-checkbox
.checked=${this._stat_types.includes("max")}
name="max"
@change=${this._statTypesChanged}
></ha-checkbox>
</ha-formfield>
</div>
<div class="side-by-side">
<p>Chart type:</p>
<ha-formfield label="Line">
<ha-radio
.checked=${this._chart_type === "line"}
value="line"
name="chart_type"
@change=${this._chartTypeChanged}
></ha-radio>
</ha-formfield>
<ha-formfield label="Bar">
<ha-radio
.checked=${this._chart_type === "bar"}
value="bar"
name="chart_type"
@change=${this._chartTypeChanged}
></ha-radio>
</ha-formfield>
</div>
<ha-form
.hass=${this.hass}
.data=${data}
.schema=${schema}
.computeLabel=${this._computeLabelCallback}
@value-changed=${this._valueChanged}
></ha-form>
<ha-statistics-picker
.hass=${this.hass}
.pickStatisticLabel=${`Add a statistic`}
@ -217,82 +159,23 @@ export class HuiStatisticsGraphCardEditor
`;
}
private _chartTypeChanged(ev: CustomEvent) {
const input = ev.currentTarget as HaRadio;
fireEvent(this, "config-changed", {
config: { ...this._config!, chart_type: input.value },
});
}
private _statTypesChanged(ev) {
const name = ev.currentTarget.name;
const checked = ev.currentTarget.checked;
if (checked) {
fireEvent(this, "config-changed", {
config: { ...this._config!, stat_types: [...this._stat_types, name] },
});
return;
}
const statTypes = [...this._stat_types];
fireEvent(this, "config-changed", {
config: {
...this._config!,
stat_types: statTypes.filter((stat) => stat !== name),
},
});
}
private _periodSelected(ev) {
const newPeriod = ev.target.value
.period as StatisticsGraphCardConfig["period"];
if (newPeriod === this._period) {
return;
}
fireEvent(this, "config-changed", {
config: { ...this._config!, period: newPeriod },
});
}
private _valueChanged(ev: CustomEvent): void {
if (!this._config || !this.hass) {
return;
}
const target = ev.target! as EditorTarget;
const newValue = ev.detail?.value || target.value;
if (this[`_${target.configValue}`] === newValue) {
return;
}
if (newValue === "") {
this._config = { ...this._config };
delete this._config[target.configValue!];
} else {
let value: any = newValue;
if (target.type === "number") {
value = Number(value);
}
this._config = {
...this._config,
[target.configValue!]: value,
};
}
fireEvent(this, "config-changed", { config: this._config });
fireEvent(this, "config-changed", { config: ev.detail.value });
}
static get styles(): CSSResultGroup {
return [
configElementStyle,
css`
ha-statistics-picker {
width: 100%;
}
`,
];
}
private _computeLabelCallback = (schema: HaFormSchema) =>
this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
) ||
this.hass!.localize(
`ui.panel.lovelace.editor.card.statistics-graph.${schema.name}`
);
static styles: CSSResultGroup = css`
ha-statistics-picker {
width: 100%;
}
`;
}
declare global {

6
src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts
View File

@ -66,11 +66,9 @@ export class HuiThermostatCardEditor
private _computeLabelCallback = (schema: HaFormSchema) => {
if (schema.name === "entity") {
return `${this.hass!.localize(
return this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.entity"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.required"
)})`;
);
}
return this.hass!.localize(

290
src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts
View File

@ -1,22 +1,18 @@
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import "../../../../components/ha-form/ha-form";
import { html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { assert, boolean, object, optional, string, assign } from "superstruct";
import { memoize } from "@fullcalendar/common";
import { fireEvent } from "../../../../common/dom/fire_event";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
import "../../../../components/entity/ha-entity-attribute-picker";
import "../../../../components/entity/ha-entity-picker";
import "../../../../components/ha-formfield";
import "../../../../components/ha-radio";
import { HomeAssistant } from "../../../../types";
import { WeatherForecastCardConfig } from "../../cards/types";
import "../../components/hui-theme-select-editor";
import { LovelaceCardEditor } from "../../types";
import type { HomeAssistant } from "../../../../types";
import type { WeatherForecastCardConfig } from "../../cards/types";
import type { LovelaceCardEditor } from "../../types";
import { actionConfigStruct } from "../structs/action-struct";
import { EditorTarget, EntitiesEditorEvent } from "../types";
import { configElementStyle } from "./config-elements-style";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import { UNAVAILABLE } from "../../../../data/entity";
import { WeatherEntity } from "../../../../data/weather";
import type { WeatherEntity } from "../../../../data/weather";
import type { LocalizeFunc } from "../../../../common/translations/localize";
import type { HaFormSchema } from "../../../../components/ha-form/types";
const cardConfigStruct = assign(
baseLovelaceCardConfig,
@ -33,8 +29,6 @@ const cardConfigStruct = assign(
})
);
const includeDomains = ["weather"];
@customElement("hui-weather-forecast-card-editor")
export class HuiWeatherForecastCardEditor
extends LitElement
@ -61,30 +55,6 @@ export class HuiWeatherForecastCardEditor
}
}
get _entity(): string {
return this._config!.entity || "";
}
get _name(): string {
return this._config!.name || "";
}
get _theme(): string {
return this._config!.theme || "";
}
get _show_current(): boolean {
return this._config!.show_current ?? true;
}
get _show_forecast(): boolean {
return this._config!.show_forecast ?? this._has_forecast === true;
}
get _secondary_info_attribute(): string {
return this._config!.secondary_info_attribute || "";
}
get _has_forecast(): boolean | undefined {
if (this.hass && this._config) {
const stateObj = this.hass.states[this._config.entity] as WeatherEntity;
@ -95,146 +65,134 @@ export class HuiWeatherForecastCardEditor
return undefined;
}
private _schema = memoize(
(
entity: string,
localize: LocalizeFunc,
hasForecast?: boolean
): HaFormSchema[] => {
const schema: HaFormSchema[] = [
{
name: "entity",
required: true,
selector: { entity: { domain: "weather" } },
},
{ name: "name", selector: { text: {} } },
{
name: "",
type: "grid",
schema: [
{
name: "secondary_info_attribute",
selector: { attribute: { entity_id: entity } },
},
{ name: "theme", selector: { theme: {} } },
],
},
];
if (hasForecast) {
schema.push({
name: "forecast",
selector: {
select: {
options: [
{
value: "show_both",
label: localize(
"ui.panel.lovelace.editor.card.weather-forecast.show_both"
),
},
{
value: "show_current",
label: localize(
"ui.panel.lovelace.editor.card.weather-forecast.show_only_current"
),
},
{
value: "show_forecast",
label: localize(
"ui.panel.lovelace.editor.card.weather-forecast.show_only_forecast"
),
},
],
},
},
});
}
return schema;
}
);
protected render(): TemplateResult {
if (!this.hass || !this._config) {
return html``;
}
const schema = this._schema(
this._config.entity,
this.hass.localize,
this._has_forecast
);
const data: WeatherForecastCardConfig = {
show_current: true,
show_forecast: this._has_forecast,
...this._config,
};
data.forecast =
data.show_current && data.show_forecast
? "show_both"
: data.show_current
? "show_current"
: "show_forecast";
return html`
<div class="card-config">
<ha-entity-picker
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.entity"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.required"
)})"
.hass=${this.hass}
.value=${this._entity}
.configValue=${"entity"}
.includeDomains=${includeDomains}
@change=${this._valueChanged}
allow-custom-entity
></ha-entity-picker>
<div class="side-by-side">
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.name"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._name}
.configValue=${"name"}
@value-changed=${this._valueChanged}
></paper-input>
<hui-theme-select-editor
.hass=${this.hass}
.value=${this._theme}
.configValue=${"theme"}
@value-changed=${this._valueChanged}
></hui-theme-select-editor>
<ha-entity-attribute-picker
.hass=${this.hass}
.entityId=${this._entity}
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.secondary_info_attribute"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._secondary_info_attribute}
.configValue=${"secondary_info_attribute"}
@value-changed=${this._valueChanged}
></ha-entity-attribute-picker>
</div>
<div class="side-by-side">
<ha-formfield
.label=${this.hass.localize(
"ui.panel.lovelace.editor.card.weather-forecast.show_both"
)}
.dir=${computeRTLDirection(this.hass)}
>
<ha-radio
.disabled=${this._has_forecast === false}
.checked=${this._has_forecast === true &&
this._show_current &&
this._show_forecast}
.configValue=${"show_both"}
@change=${this._valueChanged}
></ha-radio
></ha-formfield>
<ha-formfield
.label=${this.hass.localize(
"ui.panel.lovelace.editor.card.weather-forecast.show_only_current"
)}
.dir=${computeRTLDirection(this.hass)}
>
<ha-radio
.disabled=${this._has_forecast === false}
.checked=${this._has_forecast === false ||
(this._show_current && !this._show_forecast)}
.configValue=${"show_current"}
@change=${this._valueChanged}
></ha-radio
></ha-formfield>
<ha-formfield
.label=${this.hass.localize(
"ui.panel.lovelace.editor.card.weather-forecast.show_only_forecast"
)}
.dir=${computeRTLDirection(this.hass)}
>
<ha-radio
.disabled=${this._has_forecast === false}
.checked=${this._has_forecast === true &&
!this._show_current &&
this._show_forecast}
.configValue=${"show_forecast"}
@change=${this._valueChanged}
></ha-radio
></ha-formfield>
</div>
</div>
<ha-form
.hass=${this.hass}
.data=${data}
.schema=${schema}
.computeLabel=${this._computeLabelCallback}
@value-changed=${this._valueChanged}
></ha-form>
`;
}
private _valueChanged(ev: EntitiesEditorEvent): void {
if (!this._config || !this.hass) {
return;
private _valueChanged(ev: CustomEvent): void {
const config = ev.detail.value;
if (config.forecast === "show_both") {
config.show_current = true;
config.show_forecast = true;
} else if (config.forecast === "show_current") {
config.show_current = true;
config.show_forecast = false;
} else {
config.show_current = false;
config.show_forecast = true;
}
const target = ev.currentTarget! as EditorTarget;
if (this[`_${target.configValue}`] === target.value) {
return;
}
if (target.configValue) {
if (target.configValue.startsWith("show_")) {
this._config = { ...this._config };
if (target.configValue === "show_both") {
/* delete since true is default */
delete this._config.show_current;
delete this._config.show_forecast;
} else if (target.configValue === "show_current") {
delete this._config.show_current;
this._config.show_forecast = false;
} else if (target.configValue === "show_forecast") {
delete this._config.show_forecast;
this._config.show_current = false;
}
} else if (target.value === "") {
this._config = { ...this._config };
delete this._config[target.configValue!];
} else {
this._config = {
...this._config,
[target.configValue!]:
target.checked !== undefined ? target.checked : target.value,
};
}
}
fireEvent(this, "config-changed", { config: this._config });
delete config.forecast;
fireEvent(this, "config-changed", { config });
}
static get styles(): CSSResultGroup {
return configElementStyle;
}
private _computeLabelCallback = (schema: HaFormSchema) => {
if (schema.name === "entity") {
return `${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.entity"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.required"
)})`;
}
return (
this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
) ||
this.hass!.localize(
`ui.panel.lovelace.editor.card.weather_forecast.${schema.name}`
)
);
};
}
declare global {

2
src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
View File

@ -16,7 +16,7 @@ export class HuiDialogEditLovelace extends LitElement {
@state() private _lovelace?: Lovelace;
private _config?: LovelaceConfig;
@state() private _config?: LovelaceConfig;
private _saving = false;

31
src/panels/lovelace/editor/lovelace-editor/hui-lovelace-editor.ts
View File

@ -1,10 +1,9 @@
import "@polymer/paper-input/paper-input";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import "../../../../components/ha-textfield";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import { LovelaceConfig } from "../../../../data/lovelace";
import { HomeAssistant } from "../../../../types";
import { configElementStyle } from "../config-elements/config-elements-style";
import { EditorTarget } from "../types";
declare global {
@ -30,16 +29,14 @@ export class HuiLovelaceEditor extends LitElement {
protected render(): TemplateResult {
return html`
<div class="card-config">
<paper-input
.label=${this.hass.localize(
"ui.panel.lovelace.editor.edit_lovelace.title"
)}
.value=${this._title}
.configValue=${"title"}
@value-changed=${this._valueChanged}
></paper-input>
</div>
<ha-textfield
.label=${this.hass.localize(
"ui.panel.lovelace.editor.edit_lovelace.title"
)}
.value=${this._title}
.configValue=${"title"}
@change=${this._valueChanged}
></ha-textfield>
`;
}
@ -66,9 +63,11 @@ export class HuiLovelaceEditor extends LitElement {
fireEvent(this, "lovelace-config-changed", { config: newConfig });
}
static get styles(): CSSResultGroup {
return configElementStyle;
}
static styles: CSSResultGroup = css`
ha-textfield {
display: block;
}
`;
}
declare global {

223
src/panels/lovelace/editor/view-editor/hui-view-editor.ts
View File

@ -1,24 +1,17 @@
import "@material/mwc-list/mwc-list-item";
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import "../../../../components/ha-form/ha-form";
import { html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import { slugify } from "../../../../common/string/slugify";
import "../../../../components/ha-formfield";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-select";
import "../../../../components/ha-switch";
import { LovelaceViewConfig } from "../../../../data/lovelace";
import { HomeAssistant } from "../../../../types";
import "../../components/hui-theme-select-editor";
import type { HaFormSchema } from "../../../../components/ha-form/types";
import type { LovelaceViewConfig } from "../../../../data/lovelace";
import type { HomeAssistant } from "../../../../types";
import {
DEFAULT_VIEW_LAYOUT,
PANEL_VIEW_LAYOUT,
SIDEBAR_VIEW_LAYOUT,
} from "../../views/const";
import { configElementStyle } from "../config-elements/config-elements-style";
import { EditorTarget } from "../types";
declare global {
interface HASSDomEvents {
@ -38,32 +31,35 @@ export class HuiViewEditor extends LitElement {
private _suggestedPath = false;
get _path(): string {
if (!this._config) {
return "";
}
return this._config.path || "";
}
private _schema = memoizeOne((localize): HaFormSchema[] => [
{ name: "title", selector: { text: {} } },
{
name: "icon",
selector: {
icon: {},
},
},
{ name: "path", selector: { text: {} } },
{ name: "theme", selector: { theme: {} } },
{
name: "type",
selector: {
select: {
options: [
DEFAULT_VIEW_LAYOUT,
SIDEBAR_VIEW_LAYOUT,
PANEL_VIEW_LAYOUT,
].map((type) => ({
value: type,
label: localize(`ui.panel.lovelace.editor.edit_view.types.${type}`),
})),
},
},
},
]);
get _title(): string {
if (!this._config) {
return "";
}
return this._config.title || "";
}
get _icon(): string {
if (!this._config) {
return "";
}
return this._config.icon || "";
}
get _theme(): string {
if (!this._config) {
return "";
}
return this._config.theme || "Backend-selected";
set config(config: LovelaceViewConfig) {
this._config = config;
}
get _type(): string {
@ -75,142 +71,59 @@ export class HuiViewEditor extends LitElement {
: this._config.type || DEFAULT_VIEW_LAYOUT;
}
set config(config: LovelaceViewConfig) {
this._config = config;
}
protected render(): TemplateResult {
if (!this.hass) {
return html``;
}
const schema = this._schema(this.hass.localize);
const data = {
theme: "Backend-selected",
...this._config,
type: this._type,
};
return html`
<div class="card-config">
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.title"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._title}
.configValue=${"title"}
@value-changed=${this._valueChanged}
@blur=${this._handleTitleBlur}
></paper-input>
<ha-icon-picker
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.icon"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._icon}
.placeholder=${this._icon}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
></ha-icon-picker>
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.url"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._path}
.configValue=${"path"}
@value-changed=${this._valueChanged}
></paper-input>
<hui-theme-select-editor
.hass=${this.hass}
.value=${this._theme}
.configValue=${"theme"}
@value-changed=${this._valueChanged}
></hui-theme-select-editor>
<ha-select
.label=${this.hass.localize(
"ui.panel.lovelace.editor.edit_view.type"
)}
.value=${this._type}
@selected=${this._typeChanged}
@closed=${stopPropagation}
fixedMenuPosition
naturalMenuWidth
>
${[DEFAULT_VIEW_LAYOUT, SIDEBAR_VIEW_LAYOUT, PANEL_VIEW_LAYOUT].map(
(type) => html`<mwc-list-item .value=${type}>
${this.hass.localize(
`ui.panel.lovelace.editor.edit_view.types.${type}`
)}
</mwc-list-item>`
)}
</ha-select>
</div>
<ha-form
.hass=${this.hass}
.data=${data}
.schema=${schema}
.computeLabel=${this._computeLabelCallback}
@value-changed=${this._valueChanged}
></ha-form>
`;
}
private _valueChanged(ev: Event): void {
const target = ev.currentTarget! as EditorTarget;
private _valueChanged(ev: CustomEvent): void {
const config = ev.detail.value;
if (this[`_${target.configValue}`] === target.value) {
return;
if (config.type === "masonry") {
delete config.type;
}
let newConfig;
if (target.configValue) {
newConfig = {
...this._config,
[target.configValue!]:
target.checked !== undefined ? target.checked : target.value,
};
}
fireEvent(this, "view-config-changed", { config: newConfig });
}
private _typeChanged(ev): void {
const selected = ev.target.value;
if (selected === "") {
return;
}
const newConfig = {
...this._config,
};
delete newConfig.panel;
if (selected === "masonry") {
delete newConfig.type;
} else {
newConfig.type = selected;
}
fireEvent(this, "view-config-changed", { config: newConfig });
}
private _handleTitleBlur(ev) {
if (
!this.isNew ||
this._suggestedPath ||
this._config.path ||
!ev.currentTarget.value
this.isNew &&
!this._suggestedPath &&
config.title &&
(!this._config.path ||
config.path === slugify(this._config.title || "", "-"))
) {
return;
config.path = slugify(config.title, "-");
}
const config = {
...this._config,
path: slugify(ev.currentTarget.value, "-"),
};
fireEvent(this, "view-config-changed", { config });
}
static get styles(): CSSResultGroup {
return [
configElementStyle,
css`
.panel {
color: var(--secondary-text-color);
display: block;
}
`,
];
}
private _computeLabelCallback = (schema: HaFormSchema) => {
if (schema.name === "path") {
return this.hass!.localize(`ui.panel.lovelace.editor.card.generic.url`);
}
return (
this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
) || this.hass.localize("ui.panel.lovelace.editor.edit_view.type")
);
};
}
declare global {

11
src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts
View File

@ -16,6 +16,7 @@ import "../components/hui-generic-entity-row";
import { createEntityNotFoundWarning } from "../components/hui-warning";
import type { EntityConfig, LovelaceRow } from "./types";
import "../../../components/ha-time-input";
import { computeStateName } from "../../../common/entity/compute_state_name";
@customElement("hui-input-datetime-entity-row")
class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
@ -49,11 +50,19 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
`;
}
const name = this._config.name || computeStateName(stateObj);
return html`
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
<hui-generic-entity-row
.hass=${this.hass}
.config=${this._config}
.hideName=${stateObj.attributes.has_date &&
stateObj.attributes.has_time}
>
${stateObj.attributes.has_date
? html`
<ha-date-input
.label=${stateObj.attributes.has_time ? name : undefined}
.locale=${this.hass.locale}
.disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
.value=${`${stateObj.attributes.year}-${stateObj.attributes.month}-${stateObj.attributes.day}`}

29
src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
View File

@ -1,12 +1,5 @@
import "@material/mwc-list/mwc-list-item";
import {
css,
CSSResultGroup,
html,
LitElement,
PropertyValues,
TemplateResult,
} from "lit";
import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import { computeStateName } from "../../../common/entity/compute_state_name";
@ -87,17 +80,15 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
`;
}
static get styles(): CSSResultGroup {
return css`
hui-generic-entity-row {
display: flex;
align-items: center;
}
ha-select {
width: 100%;
}
`;
}
static styles = css`
hui-generic-entity-row {
display: flex;
align-items: center;
}
ha-select {
width: 100%;
}
`;
private _selectedChanged(ev): void {
const stateObj = this.hass!.states[this._config!.entity];

20
src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts
View File

@ -1,4 +1,4 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../../data/entity";
import { setValue } from "../../../data/input_text";
@ -8,6 +8,7 @@ import "../components/hui-generic-entity-row";
import { createEntityNotFoundWarning } from "../components/hui-warning";
import { EntityConfig, LovelaceRow } from "./types";
import "../../../components/ha-textfield";
import { computeStateName } from "../../../common/entity/compute_state_name";
@customElement("hui-input-text-entity-row")
class HuiInputTextEntityRow extends LitElement implements LovelaceRow {
@ -42,8 +43,13 @@ class HuiInputTextEntityRow extends LitElement implements LovelaceRow {
}
return html`
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
<hui-generic-entity-row
.hass=${this.hass}
.config=${this._config}
hideName
>
<ha-textfield
.label=${this._config.name || computeStateName(stateObj)}
.disabled=${stateObj.state === UNAVAILABLE}
.value=${stateObj.state}
.minlength=${stateObj.attributes.min}
@ -75,6 +81,16 @@ class HuiInputTextEntityRow extends LitElement implements LovelaceRow {
ev.target.blur();
}
static styles = css`
hui-generic-entity-row {
display: flex;
align-items: center;
}
ha-textfield {
width: 100%;
}
`;
}
declare global {

35
src/panels/lovelace/entity-rows/hui-timer-entity-row.ts
View File

@ -23,6 +23,18 @@ class HuiTimerEntityRow extends LitElement {
throw new Error("Invalid configuration");
}
this._config = config;
if (!this.hass) {
return;
}
const stateObj = this.hass!.states[this._config.entity];
if (stateObj) {
this._startInterval(stateObj);
} else {
this._clearInterval();
}
}
public disconnectedCallback(): void {
@ -75,18 +87,19 @@ class HuiTimerEntityRow extends LitElement {
protected updated(changedProps: PropertyValues) {
super.updated(changedProps);
if (changedProps.has("hass")) {
const stateObj = this.hass!.states[this._config!.entity];
const oldHass = changedProps.get("hass") as this["hass"];
const oldStateObj = oldHass
? oldHass.states[this._config!.entity]
: undefined;
if (!this._config || !changedProps.has("hass")) {
return;
}
const stateObj = this.hass!.states[this._config!.entity];
const oldHass = changedProps.get("hass") as this["hass"];
const oldStateObj = oldHass
? oldHass.states[this._config!.entity]
: undefined;
if (oldStateObj !== stateObj) {
this._startInterval(stateObj);
} else if (!stateObj) {
this._clearInterval();
}
if (oldStateObj !== stateObj) {
this._startInterval(stateObj);
} else if (!stateObj) {
this._clearInterval();
}
}

5
src/panels/lovelace/views/hui-sidebar-view.ts
View File

@ -69,7 +69,10 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
this._createCards();
}
if (!changedProperties.has("lovelace")) {
if (
!changedProperties.has("lovelace") &&
!changedProperties.has("_config")
) {
return;
}

23
src/panels/media-browser/ha-bar-media-player.ts
View File

@ -264,7 +264,9 @@ export class BarMediaPlayer extends LitElement {
return html`
<div class="choose-player ${isBrowser ? "browser" : ""}">
${
stateObj && supportsFeature(stateObj, SUPPORT_VOLUME_SET)
!this.narrow &&
stateObj &&
supportsFeature(stateObj, SUPPORT_VOLUME_SET)
? html`
<ha-button-menu corner="BOTTOM_START" y="0" x="76">
<ha-icon-button
@ -601,6 +603,7 @@ export class BarMediaPlayer extends LitElement {
img {
max-height: 100px;
max-width: 100px;
}
.app img {
@ -613,8 +616,8 @@ export class BarMediaPlayer extends LitElement {
}
:host([narrow]) {
min-height: 80px;
max-height: 80px;
min-height: 56px;
max-height: 56px;
}
:host([narrow]) .controls-progress {
@ -622,13 +625,19 @@ export class BarMediaPlayer extends LitElement {
min-width: 48px;
}
:host([narrow]) .media-info {
padding-left: 8px;
}
:host([narrow]) .controls {
display: flex;
padding-bottom: 0;
--mdc-icon-size: 30px;
}
:host([narrow]) .choose-player {
padding-left: 0;
padding-right: 8px;
min-width: 48px;
flex: unset;
justify-content: center;
@ -636,16 +645,16 @@ export class BarMediaPlayer extends LitElement {
:host([narrow]) .choose-player.browser {
justify-content: flex-end;
width: 100%;
}
:host([narrow]) img {
max-height: 80px;
max-height: 56px;
max-width: 56px;
}
:host([narrow]) .blank-image {
height: 80px;
width: 80px;
height: 56px;
width: 56px;
}
:host([narrow]) mwc-linear-progress {

2
src/resources/markdown_worker.ts
View File

@ -1,6 +1,6 @@
// To use comlink under ES5
import { expose } from "comlink";
import marked from "marked";
import { marked } from "marked";
import "proxy-polyfill";
import { filterXSS, getDefaultWhiteList } from "xss";

2
src/state/quick-bar-mixin.ts
View File

@ -58,7 +58,7 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
return false;
}
if (el.parentElement.tagName === "ha-select") {
if (el.parentElement.tagName === "HA-SELECT") {
return false;
}

10
src/translations/en.json
View File

@ -1826,6 +1826,10 @@
"introduction": "The actions are what Home Assistant will do when the automation is triggered.",
"learn_more": "Learn more about actions",
"add": "Add action",
"invalid_action": "Invalid action",
"run_action": "Run action",
"run_action_error": "Error running action",
"run_action_success": "Action run successfully",
"duplicate": "[%key:ui::panel::config::automation::editor::triggers::duplicate%]",
"delete": "[%key:ui::panel::mailbox::delete_button%]",
"delete_confirm": "[%key:ui::panel::config::automation::editor::triggers::delete_confirm%]",
@ -2140,6 +2144,7 @@
"connection_status": "Cloud connection status",
"manage_account": "Manage Account",
"sign_out": "Sign out",
"sign_out_confirm": "Are you sure you want to sign out?",
"integrations": "Integrations",
"integrations_introduction": "Integrations for Home Assistant Cloud allow you to connect with services in the cloud without having to expose your Home Assistant instance publicly on the internet.",
"integrations_introduction2": "Check the website for ",
@ -3515,6 +3520,9 @@
"name": "Entity Filter",
"description": "The Entity Filter card allows you to define a list of entities that you want to track only when in a certain state."
},
"entity-row": {
"secondary_info": "Secondary Information"
},
"gauge": {
"name": "Gauge",
"needle_gauge": "Display as needle gauge?",
@ -3549,6 +3557,8 @@
"name": "Statistics Graph",
"description": "The Statistics Graph card allows you to display a graph of the statistics for each of the entities listed.",
"period": "Period",
"stat_types": "Show stat types",
"chart_type": "Chart type",
"periods": {
"hour": "Hour",
"day": "Day",

1131
yarn.lock
View File

File diff suppressed because it is too large Load Diff