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

* Fix deprecated @apply syntax

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

126 lines
3.1 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/paper-input/paper-input.html">
<link rel='import' href='../../src/util/hass-mixins.html'>
<link rel='import' href='../../src/resources/ha-style.html'>
<link rel="import" href="../../src/components/buttons/ha-call-api-button.html">
<dom-module id="hassio-addon-network">
<template>
<style include="ha-style">
:host {
display: block;
}
paper-card {
display: block;
}
.errors {
color: var(--google-red-500);
margin-bottom: 16px;
}
.card-actions {
@apply --layout;
@apply --layout-justified;
}
</style>
<paper-card heading='Network'>
<div class="card-content">
<template is='dom-if' if='[[error]]'>
<div class='errors'>[[error]]</div>
</template>
<table>
<tr>
<th>Container</th>
<th>Host</th>
</tr>
<template
is='dom-repeat'
items='[[config]]'
>
<tr>
<td>
[[item.container]]
</td>
<td>
<paper-input
value='{{item.host}}'
no-label-float
></paper-input>
</td>
</tr>
</template>
</table>
</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'
>Save</paper-button>
</div>
</paper-card>
</template>
</dom-module>
<script>
class HassioAddonNetwork extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'hassio-addon-network'; }
static get properties() {
return {
hass: Object,
addonSlug: String,
config: Object,
addon: {
type: Object,
observer: 'addonChanged',
},
error: String,
resetData: {
type: Object,
value: {
network: null,
},
},
};
}
addonChanged(addon) {
if (!addon) return;
const network = addon.network || {};
const items = Object.keys(network).map(key => ({
container: key,
host: network[key]
}));
this.config = items.sort(function (el1, el2) { return el1.host - el2.host; });
}
saveTapped() {
this.error = null;
const data = {};
this.config.forEach(function (item) {
data[item.container] = parseInt(item.host);
});
const path = `hassio/addons/${this.addonSlug}/options`;
this.hass.callApi('post', path, {
network: data
}).then(() => {
this.fire('hass-api-called', { success: true, path: path });
}, (resp) => {
this.error = resp.body.message;
});
}
}
customElements.define(HassioAddonNetwork.is, HassioAddonNetwork);
</script>