mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
Shopping List: Allow adding items (#647)
* Shopping List: Allow adding items * Remove unused parts
This commit is contained in:
Paulus Schoutsen
GitHub
parent
a960559639
commit
c330b87506
@ -21,38 +21,38 @@
|
||||
:host {
|
||||
height: 100%;
|
||||
}
|
||||
app-toolbar paper-listbox {
|
||||
width: 150px;
|
||||
}
|
||||
app-toolbar paper-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
.content {
|
||||
padding: 24px 0 32px;
|
||||
padding-bottom: 32px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
paper-card {
|
||||
display: block;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
.list-header { @apply --paper-font-headline; }
|
||||
.list-options {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
color: var(--secondary-text-color);
|
||||
paper-icon-item {
|
||||
border-top: 1px solid var(--divider-color);
|
||||
}
|
||||
.list-header paper-listbox {
|
||||
width: 150px;
|
||||
}
|
||||
.list-header paper-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
paper-item {
|
||||
--paper-item-focused: {
|
||||
background-color: white;
|
||||
}
|
||||
paper-icon-item:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
paper-checkbox {
|
||||
padding: 11px 7px;
|
||||
padding: 11px;
|
||||
}
|
||||
paper-input {
|
||||
width: 100%;
|
||||
--paper-input-container-underline: {
|
||||
display: none;
|
||||
}
|
||||
--paper-input-container-underline-focus: {
|
||||
display: none;
|
||||
}
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
.tip {
|
||||
padding: 24px;
|
||||
@ -66,70 +66,63 @@
|
||||
<app-toolbar>
|
||||
<ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
|
||||
<div main-title>Shopping List</div>
|
||||
<ha-start-voice-button hass='[[hass]]'></ha-start-voice-button>
|
||||
<ha-start-voice-button hass='[[hass]]' can-listen='{{canListen}}'></ha-start-voice-button>
|
||||
<paper-menu-button
|
||||
horizontal-align="right"
|
||||
horizontal-offset="-5"
|
||||
vertical-offset="-5"
|
||||
>
|
||||
<paper-icon-button
|
||||
icon="mdi:dots-vertical"
|
||||
slot="dropdown-trigger"
|
||||
></paper-icon-button>
|
||||
<paper-listbox slot="dropdown-content">
|
||||
<paper-item
|
||||
on-tap="_clearCompleted"
|
||||
>Clear completed</paper-item>
|
||||
</paper-listbox>
|
||||
</paper-menu-button>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
<div class='content'>
|
||||
<paper-card>
|
||||
<div class="card-content list-header">Shopping List
|
||||
<div class="list-options">
|
||||
<paper-menu-button
|
||||
horizontal-align="right"
|
||||
horizontal-offset="-5"
|
||||
vertical-offset="-5"
|
||||
>
|
||||
<paper-icon-button
|
||||
icon="mdi:dots-vertical"
|
||||
slot="dropdown-trigger"
|
||||
></paper-icon-button>
|
||||
<paper-listbox slot="dropdown-content">
|
||||
<paper-item
|
||||
on-tap="_clearCompleted"
|
||||
>Clear completed</paper-item>
|
||||
</paper-listbox>
|
||||
</paper-menu-button>
|
||||
</div>
|
||||
</div>
|
||||
<template is='dom-if' if='[[!items.length]]'>
|
||||
<div class='card-content'>
|
||||
You have no items on your shopping list.
|
||||
</div>
|
||||
</template>
|
||||
<paper-icon-item on-focus='_focusRowInput'>
|
||||
<paper-icon-button
|
||||
slot="item-icon"
|
||||
icon="mdi:plus"
|
||||
on-tap='_addItem'
|
||||
></paper-icon-button>
|
||||
<paper-item-body>
|
||||
<paper-input
|
||||
id='addBox'
|
||||
placeholder="Add item"
|
||||
on-keydown='_addKeyPress'
|
||||
no-label-float
|
||||
></paper-input>
|
||||
</paper-item-body>
|
||||
</paper-icon-item>
|
||||
|
||||
<template is='dom-repeat' items='[[items]]'>
|
||||
<paper-icon-item on-tap='_enableEditting'>
|
||||
<paper-checkbox
|
||||
slot="item-icon"
|
||||
checked='{{item.complete}}'
|
||||
on-tap='_itemCompleteTapped'
|
||||
tabindex='0'
|
||||
></paper-checkbox>
|
||||
<paper-checkbox
|
||||
slot="item-icon"
|
||||
checked='{{item.complete}}'
|
||||
on-tap='_itemCompleteTapped'
|
||||
tabindex='0'
|
||||
></paper-checkbox>
|
||||
<paper-item-body>
|
||||
<template is='dom-if' if='[[!_computeIsEditting(_editIndex, index)]]'>
|
||||
[[item.name]]
|
||||
</template>
|
||||
<template is='dom-if' if='[[_computeIsEditting(_editIndex, index)]]' restamp>
|
||||
<paper-input
|
||||
tabindex='0'
|
||||
autofocus
|
||||
id='editBox'
|
||||
no-label-float
|
||||
value='{{_editValue}}'
|
||||
on-keydown='_editKeyPress'
|
||||
></paper-input>
|
||||
</template>
|
||||
<paper-input
|
||||
id='editBox'
|
||||
no-label-float
|
||||
value='[[item.name]]'
|
||||
on-change='_saveEdit'
|
||||
></paper-input>
|
||||
</paper-item-body>
|
||||
<template is='dom-if' if='[[_computeIsEditting(_editIndex, index)]]'>
|
||||
<paper-icon-button
|
||||
icon='mdi:content-save'
|
||||
on-tap='_finishEditting'
|
||||
alt='Save item'
|
||||
></paper-icon-button>
|
||||
</template>
|
||||
</paper-icon-item>
|
||||
</template>
|
||||
</paper-card>
|
||||
<div class='tip'>
|
||||
<div class='tip' hidden$='[[!canListen]]'>
|
||||
Tap the microphone on the top right and say "Add candy to my shopping list"
|
||||
</div>
|
||||
</div>
|
||||
@ -146,26 +139,14 @@ class HaPanelShoppingList extends Polymer.Element {
|
||||
hass: Object,
|
||||
narrow: Boolean,
|
||||
showMenu: Boolean,
|
||||
canListen: Boolean,
|
||||
items: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
_editIndex: {
|
||||
type: Number,
|
||||
value: -1,
|
||||
},
|
||||
_editValue: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
ready() {
|
||||
super.ready();
|
||||
this.addEventListener('keydown', ev => this._checkEsc(ev));
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this._fetchData = this._fetchData.bind(this);
|
||||
@ -183,48 +164,39 @@ class HaPanelShoppingList extends Polymer.Element {
|
||||
_fetchData() {
|
||||
this.hass.callApi('get', 'shopping_list')
|
||||
.then(function (items) {
|
||||
items.reverse();
|
||||
this.items = items;
|
||||
}.bind(this));
|
||||
}
|
||||
|
||||
_computeIsEditting(editIndex, index) {
|
||||
return editIndex === index;
|
||||
}
|
||||
|
||||
_itemCompleteTapped(ev) {
|
||||
ev.stopPropagation();
|
||||
var item = ev.model.item;
|
||||
this.hass.callApi('post', 'shopping_list/item/' + item.id, {
|
||||
complete: item.complete
|
||||
}).catch(function () {
|
||||
this._fetchData();
|
||||
}.bind(this));
|
||||
complete: !item.complete
|
||||
}).catch(() => this._fetchData());
|
||||
}
|
||||
|
||||
_enableEditting(ev) {
|
||||
var item = ev.model.item;
|
||||
var index = this.items.indexOf(item);
|
||||
|
||||
if (index === this._editIndex) return;
|
||||
|
||||
this._editValue = item.name;
|
||||
this._editIndex = index;
|
||||
_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);
|
||||
}
|
||||
}
|
||||
|
||||
_cancelEditting() {
|
||||
this._editIndex = -1;
|
||||
this._editValue = '';
|
||||
_addKeyPress(ev) {
|
||||
if (ev.keyCode === 13) {
|
||||
this._addItem();
|
||||
}
|
||||
}
|
||||
|
||||
_finishEditting(ev) {
|
||||
ev.stopPropagation();
|
||||
|
||||
var index = this._editIndex;
|
||||
var name = this._editValue;
|
||||
var item = this.items[index];
|
||||
|
||||
this._editIndex = -1;
|
||||
this._editValue = '';
|
||||
_saveEdit(ev) {
|
||||
const { index, item } = ev.model;
|
||||
const name = ev.target.value;
|
||||
|
||||
if (name === item.name) {
|
||||
return;
|
||||
@ -233,21 +205,7 @@ class HaPanelShoppingList extends Polymer.Element {
|
||||
this.set(['items', index, 'name'], name);
|
||||
this.hass.callApi('post', 'shopping_list/item/' + item.id, {
|
||||
name: name
|
||||
}).catch(function () {
|
||||
this._fetchData();
|
||||
}.bind(this));
|
||||
}
|
||||
|
||||
_editKeyPress(ev) {
|
||||
if (ev.keyCode === 13) {
|
||||
this._finishEditting(ev);
|
||||
}
|
||||
}
|
||||
|
||||
_checkEsc(ev) {
|
||||
if (ev.keyCode === 27) {
|
||||
this._cancelEditting();
|
||||
}
|
||||
}).catch(() => this._fetchData());
|
||||
}
|
||||
|
||||
_clearCompleted() {
|
||||
|
||||
@ -27,6 +27,7 @@ class HaStartVoiceButton extends window.hassMixins.EventsMixin(Polymer.Element)
|
||||
canListen: {
|
||||
type: Boolean,
|
||||
computed: 'computeCanListen(hass)',
|
||||
notify: true,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user