diff --git a/src/components/ha-network.ts b/src/components/ha-network.ts index a4163ae720..451e709176 100644 --- a/src/components/ha-network.ts +++ b/src/components/ha-network.ts @@ -1,5 +1,12 @@ import "@polymer/paper-tooltip/paper-tooltip"; -import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; +import { + css, + CSSResultGroup, + html, + nothing, + LitElement, + TemplateResult, +} from "lit"; import { customElement, state, property } from "lit/decorators"; import { Adapter, @@ -17,18 +24,19 @@ import "./ha-icon"; const format_addresses = ( addresses: IPv6ConfiguredAddress[] | IPv4ConfiguredAddress[] -): TemplateResult[] => - addresses.map( - (address) => html`${address.address}/${address.network_prefix}` - ); +): TemplateResult => + html`${addresses.map((address, i) => [ + html`${address.address}/${address.network_prefix}`, + i < addresses.length - 1 ? ", " : nothing, + ])}`; const format_auto_detected_interfaces = ( adapters: Adapter[] ): Array => adapters.map((adapter) => adapter.auto - ? html`${adapter.name} (${format_addresses(adapter.ipv4)} - ${format_addresses(adapter.ipv6)} )` + ? html`${adapter.name} + (${format_addresses([...adapter.ipv4, ...adapter.ipv6])})` : "" ); @@ -88,8 +96,7 @@ export class HaNetwork extends LitElement { : ""} - ${format_addresses(adapter.ipv4)} - ${format_addresses(adapter.ipv6)} + ${format_addresses([...adapter.ipv4, ...adapter.ipv6])} ` )