Add download button to assist sentence parser dev tool (#17265)

* Add download button to assist sentence parser dev tool

* Use outlined button

* BLOCK
This commit is contained in:
Paulus Schoutsen 2023-07-12 11:54:33 -04:00 committed by GitHub
parent 52d717a86b
commit 5ed348aa56
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 0 deletions

View File

@ -12,6 +12,7 @@ export class HaButton extends Button {
margin-inline-start: 0px;
margin-inline-end: 8px;
direction: var(--direction);
display: block;
}
.mdc-button {
height: var(--button-height, 36px);

View File

@ -1,3 +1,4 @@
import { mdiDownload } from "@mdi/js";
import { dump } from "js-yaml";
import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
@ -16,6 +17,7 @@ import { haStyle } from "../../../resources/styles";
import { HomeAssistant } from "../../../types";
import { formatLanguageCode } from "../../../common/language/format_language";
import { storage } from "../../../common/decorators/storage";
import { fileDownload } from "../../../util/file_download";
type SentenceParsingResult = {
sentence: string;
@ -146,6 +148,16 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) {
</div>
</ha-card>
${this._results.length
? html`
<div class="result-toolbar">
<ha-button outlined @click=${this._download}>
<ha-svg-icon slot="icon" .path=${mdiDownload}></ha-svg-icon>
Download Results
</button>
</div>
`
: ""}
${this._results.map((r) => {
const { sentence, result, language } = r;
const matched = result != null;
@ -182,6 +194,15 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) {
`;
}
private _download() {
fileDownload(
`data:text/plain;charset=utf-8,${encodeURIComponent(
JSON.stringify({ results: this._results }, null, 2)
)}`,
`intent_results.json`
);
}
static get styles(): CSSResultGroup {
return [
haStyle,
@ -208,6 +229,10 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) {
.form {
margin-bottom: 16px;
}
.result-toolbar {
text-align: center;
margin-bottom: 16px;
}
.result {
margin-bottom: 16px;
}