113 lines
2.9 KiB
HTML
113 lines
2.9 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-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;
|
|
background-color: var(--primary-text-color);
|
|
color: var(--text-primary-color);
|
|
}
|
|
.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-tap='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>
|