Show validation errors in the UI when setting addon options

https://www.pivotaltracker.com/story/show/145323139
This commit is contained in:
Paulus Schoutsen 2017-05-11 20:45:17 -07:00
parent 6d5a911cb5
commit 37526aca88

View File

@ -13,21 +13,26 @@
paper-card {
display: block;
}
.errors {
color: var(--google-red-500);
margin-bottom: 16px;
}
iron-autogrow-textarea {
width: 100%;
}
</style>
<paper-card heading='Options'>
<div class="card-content">
<template is='dom-if' if='[[errors]]'>
<div class='errors'>[[errors]]</div>
</template>
<iron-autogrow-textarea value="{{options}}"></iron-autogrow-textarea>
</div>
<div class="card-actions">
<ha-call-api-button
hass='[[hass]]'
<paper-button
on-tap='saveTapped'
disabled='[[!optionsParsed]]'
data='[[computeOptionsData(optionsParsed)]]'
path="[[pathOptions(addon)]]"
>Save</ha-call-api-button>
>Save</paper-button>
</div>
</paper-card>
</template>
@ -56,6 +61,11 @@ Polymer({
computed: 'parseOptions(options)',
},
errors: {
type: String,
value: null,
},
addonState: {
type: Object,
value: null,
@ -75,6 +85,16 @@ Polymer({
}
},
saveTapped: function () {
this.errors = null;
this.hass.callApi('post', 'hassio/addons/' + this.addon + '/options', {
options: this.optionsParsed
}).catch(function (resp) {
this.errors = resp.body.message;
}.bind(this));
},
computeOptionsData: function (optionsParsed) {
return {
options: optionsParsed,