Skip to content

Commit 64720a3

Browse files
stvncodestvncode
committed
Updates on details page and filter html in urls
1 parent cf703e2 commit 64720a3

File tree

12 files changed

+527
-73
lines changed

12 files changed

+527
-73
lines changed

‎src/components/details.ts‎

Lines changed: 34 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export interface DetailsConfig {
2626
heroCtaLabel?: string;
2727
heroCta?: unknown;
2828
customActions?: unknown;
29+
footer?: unknown;
2930
}
3031

3132
@customElement('details-page')
@@ -87,16 +88,16 @@ export class DetailsPage extends LitElement {
8788
.hero {
8889
background: white;
8990
border-radius: 16px;
90-
padding: 0 32px 0 32px;
91+
padding: 0 32px;
9192
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
9293
height: 100%;
9394
display: flex;
9495
flex-direction: column;
9596
}
9697
97-
.hero h1 {
98+
.hero-title {
9899
color: #333;
99-
margin: 32px 0 16px 0;
100+
margin-top: 32px;
100101
font-size: 2.2rem;
101102
font-weight: 600;
102103
}
@@ -105,7 +106,7 @@ export class DetailsPage extends LitElement {
105106
color: #03a9f4;
106107
font-size: 1.1rem;
107108
font-weight: 500;
108-
margin: 0 0 20px 0;
109+
margin: 0 0 10px 0;
109110
}
110111
111112
.hero .description {
@@ -175,6 +176,23 @@ export class DetailsPage extends LitElement {
175176
color: #fff;
176177
}
177178
179+
button.install {
180+
color: #03a9f4;
181+
background: #fff;
182+
border: 1px solid #03a9f4;
183+
border-radius: 8px;
184+
padding: 10px 16px;
185+
font-weight: 600;
186+
cursor: pointer;
187+
font-size: 1rem;
188+
margin: 10px 0;
189+
}
190+
191+
button.install:hover {
192+
background: #03a9f4;
193+
color: #fff;
194+
}
195+
178196
.actions-list {
179197
background: white;
180198
border-radius: 16px;
@@ -319,7 +337,7 @@ export class DetailsPage extends LitElement {
319337
}
320338

321339
render() {
322-
const { hero, actions, heroCtaLabel, heroCta, customActions } =
340+
const { hero, actions, heroCtaLabel, heroCta, customActions, footer } =
323341
this.config ?? ({} as DetailsConfig);
324342
if (!hero) {
325343
return null;
@@ -348,15 +366,19 @@ export class DetailsPage extends LitElement {
348366
class="hero"
349367
data-expanded="${this.isDescriptionExpanded ? 'true' : 'false'}"
350368
>
351-
<h1>${hero.title}</h1>
369+
<div class="hero-title">${hero.title}</div>
352370
${hero.subtitle
353371
? html`<p class="subtitle">${hero.subtitle}</p>`
354372
: nothing}
355-
<p
356-
class="description ${this.isDescriptionExpanded ? '' : 'clamped'}"
357-
>
358-
${hero.description}
359-
</p>
373+
${hero.description
374+
? html`<p
375+
class="description ${this.isDescriptionExpanded
376+
? ''
377+
: 'clamped'}"
378+
>
379+
${hero.description}
380+
</p>`
381+
: nothing}
360382
${hero.secondaryDescription
361383
? html`<p class="secondary-description">
362384
${hero.secondaryDescription}
@@ -391,6 +413,7 @@ export class DetailsPage extends LitElement {
391413
<wa-button variant="primary">${heroCtaLabel}</wa-button>
392414
</div>`
393415
: nothing}
416+
${footer ? html`<div>${footer}</div>` : nothing}
394417
</div>
395418
396419
${actions && actions.length

‎src/pages/vpe-install.ts‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { LitElement, css, html } from 'lit';
2+
import { customElement } from 'lit/decorators.js';
3+
4+
import '../components/details.js';
5+
6+
@customElement('vpe-install')
7+
export class VPEInstallPage extends LitElement {
8+
static styles = css`
9+
:host {
10+
display: block;
11+
padding: 20px;
12+
}
13+
`;
14+
15+
render() {
16+
const config = {
17+
hero: {
18+
title: 'Install firmware',
19+
subtitle:
20+
'Flash the latest Voice PE firmware directly to your device using our web installer',
21+
description:
22+
'Home Assistant will be able to provide the latest firmware when you have the Home Assistant Voice Preview Edition set up. To factory reset the device, you can hold the middle button pressed for 30 seconds or install new firmware below:',
23+
},
24+
actions: [],
25+
footer: html`
26+
<div style="margin: 20px 0;">
27+
<esp-web-install-button
28+
manifest="https://firmware.esphome.io/home-assistant-voice-pe/home-assistant-voice/manifest.json"
29+
>
30+
</esp-web-install-button>
31+
</div>
32+
`,
33+
} as const;
34+
35+
return html`<details-page
36+
.config=${config}
37+
history-back
38+
back-href="/vpe"
39+
></details-page>`;
40+
}
41+
}
42+
43+
declare global {
44+
interface HTMLElementTagNameMap {
45+
'vpe-install': VPEInstallPage;
46+
}
47+
}

‎src/pages/zwa2-details.ts‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -30,25 +30,6 @@ export class ZWA2Details extends LitElement {
3030
`;
3131

3232
render() {
33-
return html`<details-page .config=${detailsByKey.zwa2}></details-page>
34-
<!-- <div class="firmware-section">
35-
<h2>Install Firmware</h2>
36-
37-
<div class="firmware-option">
38-
<h3>Home Assistant ZWA-2</h3>
39-
<p>Official Home Assistant firmware for ZWA-2</p>
40-
<esp-web-install-button
41-
manifest="https://firmware.esphome.io/ha-connect-zwa-2/home-assistant-zwa-2/manifest.json"
42-
></esp-web-install-button>
43-
</div>
44-
45-
<div class="firmware-option">
46-
<h3>Z-Wave ESP Bridge</h3>
47-
<p>Z-Wave proxy firmware</p>
48-
<esp-web-install-button
49-
manifest="https://firmware.esphome.io/ha-connect-zwa-2/zwave-esp-bridge/manifest.json"
50-
></esp-web-install-button>
51-
</div>
52-
</div> --> `;
33+
return html`<details-page .config=${detailsByKey.zwa2}></details-page>`;
5334
}
5435
}

‎src/pages/zwa2-install-original.ts‎

Lines changed: 55 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,63 @@ export class Zwa2InstallOriginalPage extends LitElement {
2525
hero: {
2626
title: 'Install original firmware',
2727
subtitle: 'Connect ZWA-2 directly to Home Assistant via USB',
28-
description:
29-
'This installation will flash the original firmware to your ZWA-2 so it can be used directly over USB with your Home Assistant hub.',
3028
},
3129
actions: [],
32-
heroCta: html`<button class="install" @click=${this.handleInstall}>
33-
Install
34-
</button>`,
30+
footer: html`
31+
<p style="margin-top: 6px;">
32+
This is the original firmware that is pre-installed on the Home
33+
Assistant Connect ZWA-2. It allows you to use the device directly
34+
connected to Home Assistant with the included USB cable.
35+
</p>
36+
<p>
37+
Follow this tutorial to restore the original firmware on your ZWA-2.
38+
</p>
39+
<h3>Requirements</h3>
40+
<ul>
41+
<li>
42+
<a
43+
href="https://www.home-assistant.io"
44+
target="_blank"
45+
rel="noopener noreferrer"
46+
>Home Assistant</a
47+
>
48+
</li>
49+
<li>
50+
<a
51+
href="https://www.home-assistant.io/connect/zwa-2/"
52+
target="_blank"
53+
rel="noopener noreferrer"
54+
>Home Assistant Connect ZWA-2</a
55+
>
56+
</li>
57+
<li>
58+
<a
59+
href="https://amzn.to/4mLqa6S"
60+
target="_blank"
61+
rel="noopener noreferrer"
62+
>USB-C to C cable</a
63+
>
64+
</li>
65+
</ul>
66+
<p>To get started, follow these steps:</p>
67+
<ol>
68+
<li>Make a backup of your Z-Wave network in Home Assistant.</li>
69+
<ol type="a">
70+
<li>
71+
You can do this on the
72+
<a
73+
href="https://my.home-assistant.io/redirect/config_zwave_js/"
74+
target="_blank"
75+
rel="noopener noreferrer"
76+
>Z-Wave config panel in Home Assistant</a
77+
>. Config -> Devices & services -> Z-Wave -> Settings icon.
78+
</li>
79+
<li>Download backup is at the bottom of the page.</li>
80+
</ol>
81+
<li>nstall the ESP Serial Bridge firmware</li>
82+
</ol>
83+
<button class="install" @click=${this.handleInstall}>Install</button>
84+
`,
3585
} as const;
3686

3787
return html`<details-page

0 commit comments

Comments
 (0)