ha-frontend-cdce8p/hassio/addon-view/hassio-addon-config.html
Paulus Schoutsen ff658c86ff
Fix deprecated CSS (#928)
* Fix nested var

* Fix deprecated @apply syntax

* Hassio
2018-02-26 11:43:58 -08:00

110 lines
2.8 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/paper-button/paper-button.html">
<link rel="import" href="../../src/components/buttons/ha-call-api-button.html">
<dom-module id="hassio-addon-config">
<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%;
font-family: monospace;
}
.syntaxerror {
color: var(--google-red-500);
}
</style>
<paper-card heading='Config'>
<div class="card-content">
<template is='dom-if' if='[[error]]'>
<div class='errors'>[[error]]</div>
</template>
<iron-autogrow-textarea id='config' value="{{config}}"></iron-autogrow-textarea>
</div>
<div class="card-actions">
<ha-call-api-button
class='warning'
hass='[[hass]]'
path="hassio/addons/[[addonSlug]]/options"
data='[[resetData]]'
>Reset to defaults</ha-call-api-button>
<paper-button
on-click='saveTapped'
disabled='[[!configParsed]]'
>Save</paper-button>
</div>
</paper-card>
</template>
</dom-module>
<script>
class HassioAddonConfig extends Polymer.Element {
static get is() { return 'hassio-addon-config'; }
static get properties() {
return {
hass: Object,
addon: {
type: Object,
observer: 'addonChanged',
},
addonSlug: String,
config: {
type: String,
observer: 'configChanged',
},
configParsed: Object,
error: String,
resetData: {
type: Object,
value: {
options: null,
},
},
};
}
addonChanged(addon) {
this.config = addon ? JSON.stringify(addon.options, null, 2) : '';
}
configChanged(config) {
try {
this.$.config.classList.remove('syntaxerror');
this.configParsed = JSON.parse(config);
} catch (err) {
this.$.config.classList.add('syntaxerror');
this.configParsed = null;
}
}
saveTapped() {
this.error = null;
this.hass.callApi('post', `hassio/addons/${this.addonSlug}/options`, {
options: this.configParsed
}).catch((resp) => {
this.error = resp.body.message;
});
}
}
customElements.define(HassioAddonConfig.is, HassioAddonConfig);
</script>