diff --git a/src/data/shopping-list.ts b/src/data/shopping-list.ts index 2bb9f17126..b5eac717cc 100644 --- a/src/data/shopping-list.ts +++ b/src/data/shopping-list.ts @@ -29,3 +29,11 @@ export const completeItem = ( export const clearItems = (hass: HomeAssistant): Promise => hass.callApi("POST", "shopping_list/clear_completed"); + +export const addItem = ( + hass: HomeAssistant, + name: string +): Promise => + hass.callApi("POST", "shopping_list/item", { + name, + }); diff --git a/src/panels/lovelace/cards/hui-shopping-list-card.ts b/src/panels/lovelace/cards/hui-shopping-list-card.ts index d7946fcb67..a9191f1dcb 100644 --- a/src/panels/lovelace/cards/hui-shopping-list-card.ts +++ b/src/panels/lovelace/cards/hui-shopping-list-card.ts @@ -1,8 +1,8 @@ import { html, LitElement } from "@polymer/lit-element"; import { repeat } from "lit-html/directives/repeat"; import { TemplateResult } from "lit-html"; +import { PaperInputElement } from "@polymer/paper-input/paper-input"; import "@polymer/paper-checkbox/paper-checkbox"; -import "@polymer/paper-input/paper-input"; import "../../../components/ha-card"; import "../../../components/ha-icon"; @@ -16,6 +16,7 @@ import { saveEdit, ShoppingListItem, clearItems, + addItem, } from "../../../data/shopping-list"; interface Config extends LovelaceConfig { @@ -77,6 +78,27 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement) return html` ${this.renderStyle()} +
+ + + + + +
${ repeat( this._uncheckedItems!, @@ -165,10 +187,15 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement) private renderStyle(): TemplateResult { return html` `; } @@ -244,6 +274,29 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement) clearItems(this.hass).catch(() => this._fetchData()); } } + + private get _newItem(): PaperInputElement { + return this.shadowRoot!.querySelector(".addBox") as PaperInputElement; + } + + private _addItem(ev): void { + const newItem = this._newItem; + + if (newItem.value!.length > 0) { + addItem(this.hass!, newItem.value!).catch(() => this._fetchData()); + } + + newItem.value = ""; + if (ev) { + newItem.focus(); + } + } + + private _addKeyPress(ev): void { + if (ev.keyCode === 13) { + this._addItem(null); + } + } } declare global { diff --git a/src/translations/en.json b/src/translations/en.json index b9ebe3dd9a..6e02f555f9 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -761,7 +761,8 @@ "cards": { "shopping-list": { "checked_items": "Checked items", - "clear_items": "Clear checked items" + "clear_items": "Clear checked items", + "add_item": "Add item" } } },