Skip to content

Add product picture to ozw node dashboard #7203

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zsarnett merged 4 commits into from
Oct 15, 2020
Merged

Add product picture to ozw node dashboard #7203

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
686d74b
Add product picture to ozw node dashboard
cgarwood Oct 2, 2020
f7b360b
float -> flexbox
cgarwood Oct 13, 2020
d29877f
Simplify markup
cgarwood Oct 14, 2020
1af3b1b
Forgot to move the class to the img tag
cgarwood Oct 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 37 additions & 13 deletions src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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);
}
Expand All @@ -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;
}
`,
];
}
Expand Down