Add product picture to ozw node dashboard (#7203)

This commit is contained in:
Charles Garwood 2020-10-15 17:20:54 -04:00 committed by GitHub
parent 213c53e307
commit 2dd7f292b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -87,19 +87,29 @@ class OZWNodeDashboard extends LitElement {
${this._node ${this._node
? html` ? html`
<ha-card class="content"> <ha-card class="content">
<div class="card-content"> <div class="card-content flex">
<b <div class="node-details">
>${this._node.node_manufacturer_name} <b>
${this._node.node_product_name}</b ${this._node.node_manufacturer_name}
><br /> ${this._node.node_product_name}
Node ID: ${this._node.node_id}<br /> </b>
Query Stage: ${this._node.node_query_stage} <br />
${this._metadata?.metadata.ProductManualURL Node ID: ${this._node.node_id}<br />
? html` <a Query Stage: ${this._node.node_query_stage}
href="${this._metadata.metadata.ProductManualURL}" ${this._metadata?.metadata.ProductManualURL
> ? html` <a
<p>Product Manual</p> href="${this._metadata.metadata.ProductManualURL}"
</a>` >
<p>Product Manual</p>
</a>`
: ``}
</div>
${this._metadata?.metadata.ProductPicBase64
? html`<img
class="product-image"
src="data:image/png;base64,${this._metadata?.metadata
.ProductPicBase64}"
/>`
: ``} : ``}
</div> </div>
<div class="card-actions"> <div class="card-actions">
@ -199,6 +209,11 @@ class OZWNodeDashboard extends LitElement {
max-width: 600px; max-width: 600px;
} }
.flex {
display: flex;
justify-content: space-between;
}
.card-actions.warning ha-call-service-button { .card-actions.warning ha-call-service-button {
color: var(--error-color); color: var(--error-color);
} }
@ -219,6 +234,15 @@ class OZWNodeDashboard extends LitElement {
[hidden] { [hidden] {
display: none; display: none;
} }
.product-image {
padding: 12px;
max-height: 140px;
max-width: 140px;
}
.card-actions {
clear: right;
}
`, `,
]; ];
} }