Shopping list: add clear completed

This commit is contained in:
Paulus Schoutsen 2017-07-29 11:42:32 -07:00
parent 7c313a1083
commit b50ee02534

View File

@ -25,6 +25,20 @@
} }
paper-card { paper-card {
display: block; display: block;
padding-bottom: 16px;
}
.list-header { @apply --paper-font-headline; }
.list-options {
position: absolute;
top: 0;
right: 0;
color: var(--secondary-text-color);
}
.list-header paper-listbox {
width: 150px;
}
.list-header paper-item {
cursor: pointer;
} }
paper-item { paper-item {
--paper-item-focused: { --paper-item-focused: {
@ -37,6 +51,11 @@
paper-input { paper-input {
width: 100%; width: 100%;
} }
.tip {
padding: 24px;
text-align: center;
color: var(--secondary-text-color);
}
</style> </style>
<app-header-layout has-scrolling-region> <app-header-layout has-scrolling-region>
@ -50,9 +69,28 @@
<div class='content'> <div class='content'>
<paper-card> <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]]'> <template is='dom-if' if='[[!items.length]]'>
<div class='card-content'> <div class='card-content'>
No items on your shopping list. Activate voice control and say "Add candy to my shopping list". You have no items on your shopping list.
</div> </div>
</template> </template>
<template is='dom-repeat' items='[[items]]'> <template is='dom-repeat' items='[[items]]'>
@ -88,6 +126,9 @@
</paper-icon-item> </paper-icon-item>
</template> </template>
</paper-card> </paper-card>
<div class='tip'>
Tap the microphone on the top right and say "Add candy to my shopping list"
</div>
</div> </div>
</app-header-layout> </app-header-layout>
</template> </template>
@ -145,7 +186,7 @@ Polymer({
_itemCompleteTapped: function (ev) { _itemCompleteTapped: function (ev) {
ev.stopPropagation(); ev.stopPropagation();
var item = ev.model.item; var item = ev.model.item;
this.hass.callApi('post', 'shopping_list/' + item.id, { this.hass.callApi('post', 'shopping_list/item/' + item.id, {
complete: item.complete complete: item.complete
}).catch(function () { }).catch(function () {
this._fetchData(); this._fetchData();
@ -182,7 +223,7 @@ Polymer({
} }
this.set(['items', index, 'name'], name); this.set(['items', index, 'name'], name);
this.hass.callApi('post', 'shopping_list/' + item.id, { this.hass.callApi('post', 'shopping_list/item/' + item.id, {
name: name name: name
}).catch(function () { }).catch(function () {
this._fetchData(); this._fetchData();
@ -200,5 +241,9 @@ Polymer({
this._cancelEditting(); this._cancelEditting();
} }
}, },
_clearCompleted: function () {
this.hass.callApi('POST', 'shopping_list/clear_completed');
}
}); });
</script> </script>