[[errors]]
-
-
- ${this._element}
+ ${this._elements}
`;
}
@@ -54,30 +57,47 @@ export class HuiUnusedEntities extends LitElement {
return html`
`;
}
- private _createElement(): void {
- if (this._hass) {
- const entities = computeUnusedEntities(this._hass, this._config!).map(
- (entity) => ({
- entity,
- secondary_info: "entity-id",
- })
- );
- this._element = createCardElement({
- type: "entities",
- title: "Unused entities",
- entities,
- show_header_toggle: false,
- });
- this._element!.hass = this._hass;
+ private _createElements(): void {
+ if (!this._hass) {
+ return;
}
+ const domains: { [domain: string]: string[] } = {};
+ computeUnusedEntities(this._hass, this._config!).forEach((entity) => {
+ const domain = computeDomain(entity);
+
+ if (!(domain in domains)) {
+ domains[domain] = [];
+ }
+ domains[domain].push(entity);
+ });
+ this._elements = Object.keys(domains)
+ .sort()
+ .map((domain) => {
+ const el = createCardElement({
+ type: "entities",
+ title: this._hass!.localize(`domain.${domain}`) || domain,
+ entities: domains[domain].map((entity) => ({
+ entity,
+ secondary_info: "entity-id",
+ })),
+ show_header_toggle: false,
+ });
+ el.hass = this._hass;
+ return el;
+ });
}
}
From 7773589e2cd6eca906799a5009846be39ec79694 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen [[computeName(automation, localize)]]
-
-
-
-
+ ${this.automation
+ ? computeStateName(this.automation)
+ : this.hass.localize(
+ "ui.panel.config.automation.editor.default_name"
+ )}
+
+
+ ${this._errors
+ ? html`
+
+ ${this._errors}
+ `
+ : ""}
+
+
-
+
From 46e11399467f4c3d6cfb88b6db78432f1d1f19ab Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen ${this._params.entry ? this._params.entry.name : "New Person"}
+${this._error}
+ `
+ : ""}
+
+
+ + Note: people configured via configuration.yaml cannot be + edited via the UI. +
+ ` + : ""} + +
+ Looks like you have no people yet!
+
+ CREATE PERSON
+
+ `
+ : html``}
+
- 
-
-
- `;
- }
-
- static get styleTemplate() {
- return html`
-
- `;
- }
-
- static get properties() {
- return {
- hass: {
- type: Object,
- observer: "_hassChanged",
- },
- entity: String,
- image: String,
- stateImage: Object,
- cameraImage: String,
- aspectRatio: String,
- filter: String,
- stateFilter: Object,
- _imageSrc: String,
- };
- }
-
- static get observers() {
- return ["_configChanged(image, stateImage, cameraImage, aspectRatio)"];
- }
-
- connectedCallback() {
- super.connectedCallback();
- if (this.cameraImage) {
- this.timer = setInterval(
- () => this._updateCameraImageSrc(),
- UPDATE_INTERVAL
- );
- }
- }
-
- disconnectedCallback() {
- super.disconnectedCallback();
- clearInterval(this.timer);
- }
-
- _configChanged(image, stateImage, cameraImage, aspectRatio) {
- const ratio = parseAspectRatio(aspectRatio);
-
- if (ratio && ratio.w > 0 && ratio.h > 0) {
- this.$.wrapper.style.paddingBottom = `${(
- (100 * ratio.h) /
- ratio.w
- ).toFixed(2)}%`;
- this.$.wrapper.classList.add("ratio");
- }
-
- if (cameraImage) {
- this._updateCameraImageSrc();
- } else if (image && !stateImage) {
- this._imageSrc = image;
- }
- }
-
- _onImageError() {
- this._imageSrc = null;
- this.$.image.classList.add("hidden");
- if (!this.$.wrapper.classList.contains("ratio")) {
- this.$.brokenImage.style.setProperty(
- "height",
- `${this._lastImageHeight || "100"}px`
- );
- }
- this.$.brokenImage.classList.remove("hidden");
- }
-
- _onImageLoad() {
- this.$.image.classList.remove("hidden");
- this.$.brokenImage.classList.add("hidden");
- if (!this.$.wrapper.classList.contains("ratio")) {
- this._lastImageHeight = this.$.image.offsetHeight;
- }
- }
-
- _hassChanged(hass) {
- if (this.cameraImage || !this.entity) {
- return;
- }
-
- const stateObj = hass.states[this.entity];
- const newState = !stateObj ? "unavailable" : stateObj.state;
-
- if (newState === this._currentState) return;
- this._currentState = newState;
-
- this._updateStateImage();
- this._updateStateFilter(stateObj);
- }
-
- _updateStateImage() {
- if (!this.stateImage) {
- this._imageFallback = true;
- return;
- }
- const stateImg = this.stateImage[this._currentState];
- this._imageSrc = stateImg || this.image;
- this._imageFallback = !stateImg;
- }
-
- _updateStateFilter(stateObj) {
- let filter;
- if (!this.stateFilter) {
- filter = this.filter;
- } else {
- filter = this.stateFilter[this._currentState] || this.filter;
- }
-
- const isOff = !stateObj || STATES_OFF.includes(stateObj.state);
- this.$.image.style.filter =
- filter || (isOff && this._imageFallback && DEFAULT_FILTER) || "";
- }
-
- async _updateCameraImageSrc() {
- try {
- const { content_type: contentType, content } = await this.hass.callWS({
- type: "camera_thumbnail",
- entity_id: this.cameraImage,
- });
- this._imageSrc = `data:${contentType};base64, ${content}`;
- this._onImageLoad();
- } catch (err) {
- this._onImageError();
- }
- }
-}
-
-customElements.define("hui-image", HuiImage);
diff --git a/src/panels/lovelace/components/hui-image.ts b/src/panels/lovelace/components/hui-image.ts
new file mode 100644
index 0000000000..cdc7b06aa1
--- /dev/null
+++ b/src/panels/lovelace/components/hui-image.ts
@@ -0,0 +1,226 @@
+import "@polymer/paper-toggle-button/paper-toggle-button";
+
+import { STATES_OFF } from "../../../common/const";
+
+import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
+import {
+ LitElement,
+ TemplateResult,
+ html,
+ property,
+ CSSResult,
+ css,
+ PropertyValues,
+ query,
+} from "lit-element";
+import { HomeAssistant } from "../../../types";
+import { styleMap } from "lit-html/directives/style-map";
+import { classMap } from "lit-html/directives/class-map";
+import { b64toBlob } from "../../../common/file/b64-to-blob";
+import { fetchThumbnail } from "../../../data/camera";
+
+const UPDATE_INTERVAL = 10000;
+const DEFAULT_FILTER = "grayscale(100%)";
+
+export interface StateSpecificConfig {
+ [state: string]: string;
+}
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HuiImage extends LitElement {
+ @property() public hass?: HomeAssistant;
+ @property() public entity?: string;
+ @property() public image?: string;
+ @property() public stateImage?: StateSpecificConfig;
+ @property() public cameraImage?: string;
+ @property() public aspectRatio?: string;
+ @property() public filter?: string;
+ @property() public stateFilter?: StateSpecificConfig;
+
+ @property() private _loadError?: boolean;
+ @property() private _cameraImageSrc?: string;
+ @query("img") private _image!: HTMLImageElement;
+ private _lastImageHeight?: number;
+ private _cameraUpdater?: number;
+ private _attached?: boolean;
+
+ public connectedCallback() {
+ super.connectedCallback();
+ this._attached = true;
+ this._startUpdateCameraInterval();
+ }
+
+ public disconnectedCallback() {
+ super.disconnectedCallback();
+ this._attached = false;
+ this._stopUpdateCameraInterval();
+ }
+
+ protected render(): TemplateResult | void {
+ const ratio = this.aspectRatio ? parseAspectRatio(this.aspectRatio) : null;
+ const stateObj =
+ this.hass && this.entity ? this.hass.states[this.entity] : undefined;
+ const state = stateObj ? stateObj.state : "unavailable";
+
+ // Figure out image source to use
+ let imageSrc: string | undefined;
+ // Track if we are we using a fallback image, used for filter.
+ let imageFallback = !this.stateImage;
+
+ if (this.cameraImage) {
+ imageSrc = this._cameraImageSrc;
+ } else if (this.stateImage) {
+ const stateImage = this.stateImage[state];
+
+ if (stateImage) {
+ imageSrc = stateImage;
+ } else {
+ imageSrc = this.image;
+ imageFallback = true;
+ }
+ } else {
+ imageSrc = this.image;
+ }
+
+ // Figure out filter to use
+ let filter = this.filter || "";
+
+ if (this.stateFilter && this.stateFilter[state]) {
+ filter = this.stateFilter[state];
+ }
+
+ if (!filter && this.entity) {
+ const isOff = !stateObj || STATES_OFF.includes(state);
+ filter = isOff && imageFallback ? DEFAULT_FILTER : "";
+ }
+
+ return html`
+ 0 && ratio.h > 0
+ ? `${((100 * ratio.h) / ratio.w).toFixed(2)}%`
+ : "",
+ })}
+ class=${classMap({
+ ratio: Boolean(ratio && ratio.w > 0 && ratio.h > 0),
+ })}
+ >
+ 
+
+
+ `;
+ }
+
+ protected updated(changedProps: PropertyValues): void {
+ if (changedProps.has("cameraImage")) {
+ this._updateCameraImageSrc();
+ this._startUpdateCameraInterval();
+ return;
+ }
+ }
+
+ private _startUpdateCameraInterval() {
+ this._stopUpdateCameraInterval();
+ if (this.cameraImage && this._attached) {
+ this._cameraUpdater = window.setInterval(
+ () => this._updateCameraImageSrc(),
+ UPDATE_INTERVAL
+ );
+ }
+ }
+
+ private _stopUpdateCameraInterval() {
+ if (this._cameraUpdater) {
+ clearInterval(this._cameraUpdater);
+ }
+ }
+
+ private _onImageError() {
+ this._loadError = true;
+ }
+
+ private async _onImageLoad() {
+ this._loadError = false;
+ await this.updateComplete;
+ this._lastImageHeight = this._image.offsetHeight;
+ }
+
+ private async _updateCameraImageSrc() {
+ if (!this.hass || !this.cameraImage) {
+ return;
+ }
+ if (this._cameraImageSrc) {
+ URL.revokeObjectURL(this._cameraImageSrc);
+ this._cameraImageSrc = undefined;
+ }
+ try {
+ const { content_type: contentType, content } = await fetchThumbnail(
+ this.hass,
+ this.cameraImage
+ );
+ this._cameraImageSrc = URL.createObjectURL(
+ b64toBlob(content, contentType)
+ );
+ this._onImageLoad();
+ } catch (err) {
+ this._onImageError();
+ }
+ }
+
+ static get styles(): CSSResult {
+ return css`
+ img {
+ display: block;
+ height: auto;
+ transition: filter 0.2s linear;
+ width: 100%;
+ }
+
+ .ratio {
+ position: relative;
+ width: 100%;
+ height: 0;
+ }
+
+ .ratio img,
+ .ratio div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+
+ #brokenImage {
+ background: grey url("/static/images/image-broken.svg") center/36px
+ no-repeat;
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-image": HuiImage;
+ }
+}
+
+customElements.define("hui-image", HuiImage);
From 44dca3b86dd6c985b8cab1b6b482eb8ebd1953fc Mon Sep 17 00:00:00 2001
From: yosilevy <37745463+yosilevy@users.noreply.github.com>
Date: Tue, 12 Feb 2019 00:18:17 +0200
Subject: [PATCH 19/29] Make yaml editor scrollabel in RTL mode (#2706)
* Make yaml editor scrollabel in RTL mode
* Refactor
* Refactor scopped CSS
* Refactor
* Fixes
* Refactor
---
.../lovelace/components/hui-yaml-editor.ts | 66 ++++++++++++++-----
.../editor/card-editor/hui-edit-card.ts | 1 +
src/panels/lovelace/ha-panel-lovelace.ts | 1 +
src/panels/lovelace/hui-editor.ts | 5 +-
4 files changed, 56 insertions(+), 17 deletions(-)
diff --git a/src/panels/lovelace/components/hui-yaml-editor.ts b/src/panels/lovelace/components/hui-yaml-editor.ts
index ae2a9b65ad..2162225ae3 100644
--- a/src/panels/lovelace/components/hui-yaml-editor.ts
+++ b/src/panels/lovelace/components/hui-yaml-editor.ts
@@ -3,7 +3,10 @@ import CodeMirror from "codemirror";
import "codemirror/mode/yaml/yaml";
// @ts-ignore
import codeMirrorCSS from "codemirror/lib/codemirror.css";
+import { HomeAssistant } from "../../../types";
import { fireEvent } from "../../../common/dom/fire_event";
+import { computeRTL } from "../../../common/util/compute_rtl";
+
declare global {
interface HASSDomEvents {
"yaml-changed": {
@@ -14,6 +17,7 @@ declare global {
}
export class HuiYamlEditor extends HTMLElement {
+ public _hass?: HomeAssistant;
public codemirror: CodeMirror;
private _value: string;
@@ -26,25 +30,40 @@ export class HuiYamlEditor extends HTMLElement {
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.innerHTML = `
`;
}
+ set hass(hass: HomeAssistant) {
+ this._hass = hass;
+ if (this._hass) {
+ this.setScrollBarDirection();
+ }
+ }
+
set value(value: string) {
if (this.codemirror) {
if (value !== this.codemirror.getValue()) {
@@ -76,7 +95,12 @@ export class HuiYamlEditor extends HTMLElement {
cm.replaceSelection(spaces);
},
},
+ gutters:
+ this._hass && computeRTL(this._hass!)
+ ? ["rtl-gutter", "CodeMirror-linenumbers"]
+ : [],
});
+ this.setScrollBarDirection();
this.codemirror.on("changes", () => this._onChange());
} else {
this.codemirror.refresh();
@@ -86,6 +110,16 @@ export class HuiYamlEditor extends HTMLElement {
private _onChange(): void {
fireEvent(this, "yaml-changed", { value: this.codemirror.getValue() });
}
+
+ private setScrollBarDirection() {
+ if (!this.codemirror) {
+ return;
+ }
+
+ this.codemirror
+ .getWrapperElement()
+ .classList.toggle("rtl", computeRTL(this._hass!));
+ }
}
declare global {
diff --git a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
index 0022c045b2..1e08ff49dd 100644
--- a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
@@ -119,6 +119,7 @@ export class HuiEditCard extends LitElement {
? this._configElement
: html`
${this._params.entry ? this._params.entry.name : "New Area"}
++ ${this._params.entry + ? this._params.entry.name + : this.hass.localize( + "ui.panel.config.area_registry.editor.default_name" + )} +
- Looks like you have no areas yet!
+ ${this.hass.localize(
+ "ui.panel.config.area_registry.picker.no_areas"
+ )}
- CREATE AREA
+ ${this.hass.localize(
+ "ui.panel.config.area_registry.picker.create_area"
+ )}
+
`
: html``}
diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts
index 4d00ececa8..02d50e67f5 100644
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/src/panels/config/automation/ha-automation-editor.ts
@@ -11,6 +11,7 @@ import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-fab/paper-fab";
+import { classMap } from "lit-html/directives/class-map";
import { h, render } from "preact";
@@ -24,6 +25,7 @@ import { haStyle } from "../../../resources/ha-style";
import { HomeAssistant } from "../../../types";
import { AutomationEntity, AutomationConfig } from "../../../data/automation";
import { navigate } from "../../../common/navigate";
+import { computeRTL } from "../../../common/util/compute_rtl";
function AutomationEditor(mountEl, props, mergeEl) {
return render(h(Automation, props), mountEl, mergeEl);
@@ -92,7 +94,12 @@ class HaAutomationEditor extends LitElement {
${this._errors}
`
: ""}
-
+
+
+ `
+ )}
+
+
+ `;
+ }
+
+ private _entityFilter: HaEntityPickerEntityFilterFunc = (
+ stateObj: HassEntity
+ ) => !this.value || !this.value.includes(stateObj.entity_id);
+
+ private get _currentEntities() {
+ return this.value || [];
+ }
+
+ private async _updateEntities(entities) {
+ fireEvent(this, "value-changed", {
+ value: entities,
+ });
+
+ this.value = entities;
+ }
+
+ private _entityChanged(event: PolymerChangedEvent[[_computeStateName(item)]]
- [[item.entity_id]]
- [[_computeStateName(item)]]
+ [[item.entity_id]]
+ + ${this.hass.localize( + "ui.panel.config.person.detail.device_tracker_intro" + )} +
+