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