Welcome to ESPHome
@@ -51,13 +59,11 @@ class ESPHomeDevicesList extends LitElement {
`;
}
- // catch when 1st load there is no data yet, and we don't want to show no devices message
- if (!this._devices) {
- return html``;
- }
-
const filtered: Array
=
- this._devices!.filter((item) => this._filter(item));
+ this._devices.filter((item) => this._filter(item));
+ const discoveredCount = this._devices.filter(
+ (item) => this._isImportable(item) && !item.ignored,
+ ).length;
let htmlClass = "no-result-container";
let htmlDevices = html`
@@ -73,7 +79,7 @@ class ESPHomeDevicesList extends LitElement {
${this._isImportable(device)
? html``
: html` this.requestUpdate()}>
+ ${!this.showDiscoveredDevices && discoveredCount > 0
+ ? html`
+
+
+ Discovered ${discoveredCount}
+ device${discoveredCount == 1 ? "" : "s"}
+
+
+
+ `
+ : nothing}
${htmlDevices}
`;
}
private _filter(item: ImportableDevice | ConfiguredDevice): boolean {
+ if (!this.showDiscoveredDevices && this._isImportable(item)) {
+ return false;
+ }
+
if (this._search?.value) {
const searchValue = this._search!.value.toLowerCase();
if (item.name!.toLowerCase().indexOf(searchValue) >= 0) {
@@ -132,6 +156,10 @@ class ESPHomeDevicesList extends LitElement {
return true;
}
+ private _handleShowDiscovered() {
+ fireEvent(this, "toggle-discovered-devices");
+ }
+
private _handleOpenWizardClick() {
openWizardDialog();
}
@@ -181,6 +209,15 @@ class ESPHomeDevicesList extends LitElement {
margin-top: 16px;
margin-bottom: 16px;
}
+ .show-discovered-bar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 8px 8px 8px 16px;
+ background-color: var(--primary-footer-bg-color);
+ border-top: 1px solid var(--divider-color);
+ color: var(--mdc-theme-on-primary);
+ }
`;
private async _updateDevices() {
@@ -228,7 +265,20 @@ class ESPHomeDevicesList extends LitElement {
});
if (devices.importable) {
- newList = [...devices.importable, ...newList];
+ newList = [
+ ...devices.importable.sort((a, b) => {
+ // Sort by "ignored" status (ignored items should be at the end)
+ if (a.ignored !== b.ignored) {
+ return Number(a.ignored) - Number(b.ignored); // false (0) comes before true (1)
+ }
+
+ // If "ignored" status is the same, sort by "name"
+ return a.name
+ .toLocaleLowerCase()
+ .localeCompare(b.name.toLocaleLowerCase());
+ }),
+ ...newList,
+ ];
}
this._devices = newList;
diff --git a/src/devices/importable-device-card.ts b/src/devices/importable-device-card.ts
index 5a33dfe5..6d1bf9ba 100644
--- a/src/devices/importable-device-card.ts
+++ b/src/devices/importable-device-card.ts
@@ -1,11 +1,14 @@
import { LitElement, html, css, PropertyValues } from "lit";
import { customElement, property } from "lit/decorators.js";
+import { mdiFilter } from "@mdi/js";
+import type { ActionDetail } from "@material/mwc-list";
import { ImportableDevice } from "../api/devices";
import "@material/mwc-button";
import "../components/esphome-card";
import { fireEvent } from "../util/fire-event";
import { openAdoptDialog } from "../adopt";
import { esphomeCardStyles } from "../styles";
+import { ignoreDevice } from "../api/ignore";
@customElement("esphome-importable-device-card")
class ESPHomeImportableDeviceCard extends LitElement {
@@ -14,7 +17,10 @@ class ESPHomeImportableDeviceCard extends LitElement {
protected render() {
return html`
-
+
@@ -32,9 +38,23 @@ class ESPHomeImportableDeviceCard extends LitElement {
+
+
+
+
+ ${this.device.ignored ? "Unignore" : "Ignore"}
+
+
+
`;
@@ -50,12 +70,25 @@ class ESPHomeImportableDeviceCard extends LitElement {
}, 1000);
}
+ private _handleOverflowAction(ev: CustomEvent) {
+ switch (ev.detail.index) {
+ case 0:
+ ignoreDevice(this.device.name, !this.device.ignored).then(() =>
+ fireEvent(this, "device-updated"),
+ );
+ break;
+ }
+ }
+
static styles = [
esphomeCardStyles,
css`
esphome-card {
--status-color: var(--status-imported);
}
+ esphome-card[ignored] {
+ --status-color: --mdc-theme-primary-no-attention;
+ }
.inlinecode {
box-sizing: border-box;
padding: 0.2em 0.4em;
@@ -73,7 +106,7 @@ class ESPHomeImportableDeviceCard extends LitElement {
];
private async _handleAdopt() {
- openAdoptDialog(this.device, () => fireEvent(this, "adopted"));
+ openAdoptDialog(this.device, () => fireEvent(this, "device-updated"));
}
}
diff --git a/src/editor/esphome-editor.ts b/src/editor/esphome-editor.ts
index b9eed23c..b3ca7522 100644
--- a/src/editor/esphome-editor.ts
+++ b/src/editor/esphome-editor.ts
@@ -227,14 +227,21 @@ class ESPHomeEditor extends LitElement {
const markers: monaco.editor.IMarkerData[] = [];
for (const v of msg.validation_errors.reverse()) {
- markers.push({
+ const marker: monaco.editor.IMarkerData = {
message: v.message,
severity: monaco.MarkerSeverity.Error,
- startLineNumber: v.range?.start_line + 1 ?? 1,
- startColumn: v.range?.start_col + 1 ?? 1,
- endLineNumber: v.range?.end_line + 1 ?? 1,
- endColumn: v.range?.end_col + 11 ?? 1,
- });
+ startLineNumber: 1,
+ startColumn: 1,
+ endLineNumber: 1,
+ endColumn: 1,
+ };
+ if (v.range) {
+ marker.startLineNumber = v.range.start_line + 1;
+ marker.startColumn = v.range.start_col + 1;
+ marker.endLineNumber = v.range.end_line + 1;
+ marker.endColumn = v.range.end_col + 11;
+ }
+ markers.push(marker);
}
for (const v of msg.yaml_errors) {
let yamlError = (v.message as string).match(
diff --git a/src/editor/monaco-provider.ts b/src/editor/monaco-provider.ts
index fef103e5..d553e426 100644
--- a/src/editor/monaco-provider.ts
+++ b/src/editor/monaco-provider.ts
@@ -265,16 +265,16 @@ monaco.languages.setMonarchTokensProvider("esphome", {
],
// First line of a Block Style
- multiString: [[/^( +).+$/, "string", "@multiStringContinued.$1"]],
+ multiString: [[/^([ \t]+).+$/, "string", "@multiStringContinued.$1"]],
// Further lines of a Block Style
// Workaround for indentation detection
multiStringContinued: [
[
- /^( *).+$/,
+ /^([ \t]*).+$/,
{
cases: {
- "$1==$S2": "string",
+ "$1~$S2[ \t]*": "string",
"@default": { token: "@rematch", next: "@popall" },
},
},
@@ -308,7 +308,7 @@ monaco.languages.setMonarchTokensProvider("esphome", {
],
// Start Block Scalar
- blockStyle: [[/[>|][0-9]*[+-]?$/, "operators", "@multiString"]],
+ blockStyle: [[/[>|][0-9]*[+-]?[ \t]*$/, "operators", "@multiString"]],
// Numbers in Flow Collections (terminate with ,]})
flowNumber: [
diff --git a/src/esphome-main.ts b/src/esphome-main.ts
index f02411bb..48983bde 100644
--- a/src/esphome-main.ts
+++ b/src/esphome-main.ts
@@ -14,6 +14,8 @@ class ESPHomeMainView extends LitElement {
@state() private editing?: string;
+ @state() private showDiscoveredDevices = false;
+
protected render() {
if (this.editing) {
return html`
@@ -34,11 +36,18 @@ class ESPHomeMainView extends LitElement {
-
+
@@ -72,6 +81,10 @@ class ESPHomeMainView extends LitElement {
private _handleEditorClose() {
this.editing = undefined;
}
+
+ private _toggleDiscoveredDevices() {
+ this.showDiscoveredDevices = !this.showDiscoveredDevices;
+ }
}
declare global {
diff --git a/tsconfig.json b/tsconfig.json
index bb79d60d..da98cebd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,8 +12,7 @@
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
- "suppressImplicitAnyIndexErrors": true,
"ignoreDeprecations": "5.0",
- "importHelpers": true,
- },
+ "importHelpers": true
+ }
}
-