130 lines
3.0 KiB
HTML
130 lines
3.0 KiB
HTML
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
|
|
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
|
|
<link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
|
|
<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
|
|
<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
|
|
|
|
<link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
|
|
|
|
<dom-module id="hassio-addon-options">
|
|
<template>
|
|
<style include="ha-style">
|
|
:host {
|
|
display: block;
|
|
}
|
|
paper-card {
|
|
display: block;
|
|
}
|
|
.card-actions {
|
|
@apply(--layout);
|
|
@apply(--layout-justified);
|
|
}
|
|
.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">
|
|
<paper-button
|
|
on-tap='saveTapped'
|
|
disabled='[[!optionsParsed]]'
|
|
>Save</paper-button>
|
|
<ha-call-api-button
|
|
class='warning'
|
|
hass='[[hass]]'
|
|
path="[[pathOptions(addon)]]"
|
|
data='[[_resetOptionsData]]'
|
|
>Discard changes</ha-call-api-button>
|
|
</div>
|
|
</paper-card>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<script>
|
|
class HassioAddonOptions extends Polymer.Element {
|
|
static get is() { return 'hassio-addon-options'; }
|
|
|
|
static get properties() {
|
|
return {
|
|
hass: {
|
|
type: Object,
|
|
},
|
|
|
|
addon: {
|
|
type: String,
|
|
},
|
|
|
|
options: {
|
|
type: String,
|
|
value: '',
|
|
},
|
|
|
|
optionsParsed: {
|
|
type: Object,
|
|
computed: 'parseOptions(options)',
|
|
},
|
|
|
|
errors: {
|
|
type: String,
|
|
value: null,
|
|
},
|
|
|
|
addonState: {
|
|
type: Object,
|
|
value: null,
|
|
observer: 'addonStateChanged',
|
|
},
|
|
|
|
_resetOptionsData: {
|
|
type: Object,
|
|
value: { options: {} },
|
|
},
|
|
};
|
|
}
|
|
|
|
addonStateChanged(addonState) {
|
|
this.options = addonState ? JSON.stringify(addonState.options, null, 2) : '';
|
|
}
|
|
|
|
parseOptions(options) {
|
|
try {
|
|
return JSON.parse(options);
|
|
} catch (err) {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
saveTapped() {
|
|
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(optionsParsed) {
|
|
return {
|
|
options: optionsParsed,
|
|
};
|
|
}
|
|
|
|
pathOptions(addon) {
|
|
return 'hassio/addons/' + addon + '/options';
|
|
}
|
|
}
|
|
|
|
customElements.define(HassioAddonOptions.is, HassioAddonOptions);
|
|
</script>
|