diff --git a/polymer.json b/polymer.json index 47df9b9c7d..430067d045 100644 --- a/polymer.json +++ b/polymer.json @@ -13,7 +13,6 @@ "src/panels/iframe/ha-panel-iframe.js", "src/panels/logbook/ha-panel-logbook.js", "src/panels/map/ha-panel-map.js", - "src/panels/shopping-list/ha-panel-shopping-list.js", "src/panels/mailbox/ha-panel-mailbox.js", "hassio/src/entrypoint.js" ], diff --git a/src/panels/shopping-list/ha-panel-shopping-list.js b/src/panels/shopping-list/ha-panel-shopping-list.js deleted file mode 100644 index 2229607672..0000000000 --- a/src/panels/shopping-list/ha-panel-shopping-list.js +++ /dev/null @@ -1,245 +0,0 @@ -import "../../layouts/ha-app-layout"; -import "@polymer/app-layout/app-header/app-header"; -import "@polymer/app-layout/app-toolbar/app-toolbar"; -import "@polymer/paper-checkbox/paper-checkbox"; -import "../../components/ha-icon-button"; -import "@polymer/paper-input/paper-input"; -import "@polymer/paper-item/paper-icon-item"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-item/paper-item-body"; -import "@polymer/paper-listbox/paper-listbox"; -import "@material/mwc-list/mwc-list-item"; -import "../../components/ha-button-menu"; -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; -import { isComponentLoaded } from "../../common/config/is_component_loaded"; -import "../../components/ha-card"; -import "../../components/ha-menu-button"; -import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog"; -import LocalizeMixin from "../../mixins/localize-mixin"; -import "../../styles/polymer-ha-style"; -import { mdiDotsVertical } from "@mdi/js"; - -/* - * @appliesMixin LocalizeMixin - */ -class HaPanelShoppingList extends LocalizeMixin(PolymerElement) { - static get template() { - return html` - - - - - - -
[[localize('panel.shopping_list')]]
- - - - - - - [[localize('ui.panel.shopping-list.clear_completed')]] - - - - - -
- - - - - - - - - - -
- [[localize('ui.panel.shopping-list.microphone_tip')]] -
-
- - `; - } - - static get properties() { - return { - hass: Object, - narrow: Boolean, - conversation: { - type: Boolean, - computed: "_computeConversation(hass)", - }, - items: { - type: Array, - value: [], - }, - }; - } - - connectedCallback() { - super.connectedCallback(); - this._fetchData = this._fetchData.bind(this); - - this.hass.connection - .subscribeEvents(this._fetchData, "shopping_list_updated") - .then( - function (unsub) { - this._unsubEvents = unsub; - }.bind(this) - ); - this._fetchData(); - } - - disconnectedCallback() { - super.disconnectedCallback(); - if (this._unsubEvents) this._unsubEvents(); - } - - _fetchData() { - this.hass.callApi("get", "shopping_list").then( - function (items) { - items.reverse(); - this.items = items; - }.bind(this) - ); - } - - _itemCompleteTapped(ev) { - ev.stopPropagation(); - this.hass - .callApi("post", "shopping_list/item/" + ev.model.item.id, { - complete: ev.target.checked, - }) - .catch(() => this._fetchData()); - } - - _addItem(ev) { - this.hass - .callApi("post", "shopping_list/item", { - name: this.$.addBox.value, - }) - .catch(() => this._fetchData()); - this.$.addBox.value = ""; - // Presence of 'ev' means tap on "add" button. - if (ev) { - setTimeout(() => this.$.addBox.focus(), 10); - } - } - - _addKeyPress(ev) { - if (ev.keyCode === 13) { - this._addItem(); - } - } - - _computeConversation(hass) { - return isComponentLoaded(hass, "conversation"); - } - - _showVoiceCommandDialog() { - showVoiceCommandDialog(this); - } - - _saveEdit(ev) { - const { index, item } = ev.model; - const name = ev.target.value; - - if (name === item.name) { - return; - } - - this.set(["items", index, "name"], name); - this.hass - .callApi("post", "shopping_list/item/" + item.id, { - name: name, - }) - .catch(() => this._fetchData()); - } - - _clearCompleted() { - this.hass.callApi("POST", "shopping_list/clear_completed"); - } -} - -customElements.define("ha-panel-shopping-list", HaPanelShoppingList); diff --git a/src/panels/shopping-list/ha-panel-shopping-list.ts b/src/panels/shopping-list/ha-panel-shopping-list.ts new file mode 100644 index 0000000000..aa5915831c --- /dev/null +++ b/src/panels/shopping-list/ha-panel-shopping-list.ts @@ -0,0 +1,130 @@ +import "@polymer/app-layout/app-header/app-header"; +import "@polymer/app-layout/app-toolbar/app-toolbar"; +import { + css, + CSSResultArray, + customElement, + html, + internalProperty, + LitElement, + property, + PropertyValues, + TemplateResult, +} from "lit-element"; +import memoizeOne from "memoize-one"; +import { mdiMicrophone } from "@mdi/js"; + +import { HomeAssistant } from "../../types"; +import { haStyle } from "../../resources/styles"; +import { createCardElement } from "../lovelace/create-element/create-card-element"; +import { LovelaceCard } from "../lovelace/types"; +import { HuiErrorCard } from "../lovelace/cards/hui-error-card"; +import { isComponentLoaded } from "../../common/config/is_component_loaded"; +import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog"; + +import "../../components/ha-menu-button"; +import "../../layouts/ha-app-layout"; + +@customElement("ha-panel-shopping-list") +class PanelShoppingList extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @property({ type: Boolean, reflect: true }) public narrow!: boolean; + + @internalProperty() private _card!: LovelaceCard | HuiErrorCard; + + private _conversation = memoizeOne((_components) => + isComponentLoaded(this.hass, "conversation") + ); + + protected firstUpdated(changedProperties: PropertyValues): void { + super.firstUpdated(changedProperties); + + this._card = createCardElement({ type: "shopping-list" }) as LovelaceCard; + this._card.hass = this.hass; + } + + protected updated(changedProperties: PropertyValues): void { + super.updated(changedProperties); + + if (changedProperties.has("hass")) { + this._card.hass = this.hass; + } + } + + protected render(): TemplateResult { + return html` + + + + +
${this.hass.localize("panel.shopping_list")}
+ ${this._conversation(this.hass.config.components) + ? html` + + + + ` + : ""} + + +
+
+ ${this._card} +
+
+ + `; + } + + private _showVoiceCommandDialog(): void { + showVoiceCommandDialog(this); + } + + static get styles(): CSSResultArray { + return [ + haStyle, + css` + :host { + --mdc-theme-primary: var(--app-header-text-color); + display: block; + height: 100%; + } + :host([narrow]) app-toolbar mwc-button { + width: 65px; + } + .heading { + overflow: hidden; + white-space: nowrap; + margin-top: 4px; + } + #columns { + display: flex; + flex-direction: row; + justify-content: center; + margin-left: 4px; + margin-right: 4px; + } + .column { + flex: 1 0 0; + max-width: 500px; + min-width: 0; + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-panel-shopping-list": PanelShoppingList; + } +} diff --git a/src/translations/en.json b/src/translations/en.json index 3696834639..d1328e0eed 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -7,7 +7,7 @@ "logbook": "Logbook", "history": "History", "mailbox": "Mailbox", - "shopping_list": "Shopping list", + "shopping_list": "Shopping List", "developer_tools": "Developer Tools", "media_browser": "Media Browser", "profile": "Profile" @@ -2790,10 +2790,8 @@ "empty_state": "You have no long-lived access tokens yet." } }, - "shopping-list": { - "clear_completed": "Clear completed", - "add_item": "Add item", - "microphone_tip": "Tap the microphone on the top right and say or type “Add candy to my shopping list”" + "shopping_list": { + "start_conversation": "Start conversation" }, "page-authorize": { "initializing": "Initializing",