136 lines
3.8 KiB
HTML
136 lines
3.8 KiB
HTML
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
|
|
<link rel='import' href='../../bower_components/app-route/app-route.html'>
|
|
<link rel='import' href='../../bower_components/app-layout/app-header-layout/app-header-layout.html'>
|
|
<link rel='import' href='../../bower_components/app-layout/app-header/app-header.html'>
|
|
<link rel='import' href='../../bower_components/app-layout/app-toolbar/app-toolbar.html'>
|
|
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
|
|
|
|
<link rel='import' href='../../src/components/ha-menu-button.html'>
|
|
<link rel='import' href='../../src/resources/ha-style.html'>
|
|
|
|
<link rel="import" href="./hassio-addon-info.html">
|
|
<link rel="import" href="./hassio-addon-config.html">
|
|
<link rel="import" href="./hassio-addon-network.html">
|
|
<link rel="import" href="./hassio-addon-logs.html">
|
|
|
|
<dom-module id="hassio-addon-view">
|
|
<template>
|
|
<style include="iron-flex ha-style">
|
|
:host {
|
|
color: var(--primary-text-color);
|
|
--paper-card-header-color: var(--primary-text-color);
|
|
}
|
|
.content {
|
|
padding: 24px 0 32px;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
hassio-addon-info,
|
|
hassio-addon-network,
|
|
hassio-addon-config {
|
|
margin-bottom: 24px;
|
|
}
|
|
</style>
|
|
<app-route
|
|
route='[[route]]'
|
|
pattern='/addon/:slug'
|
|
data="{{routeData}}"
|
|
active='{{routeMatches}}'
|
|
></app-route>
|
|
<app-header-layout has-scrolling-region>
|
|
<app-header fixed slot='header'>
|
|
<app-toolbar>
|
|
<ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
|
|
<paper-icon-button
|
|
icon='mdi:arrow-left'
|
|
on-click='backTapped'
|
|
></paper-icon-button>
|
|
<div main-title>Hass.io: add-on details</div>
|
|
</app-toolbar>
|
|
</app-header>
|
|
<div class='content'>
|
|
<hassio-addon-info
|
|
hass='[[hass]]'
|
|
addon='[[addon]]'
|
|
addon-slug='[[routeData.slug]]'
|
|
></hassio-addon-info>
|
|
|
|
<template is='dom-if' if='[[addon.version]]'>
|
|
<hassio-addon-config
|
|
hass='[[hass]]'
|
|
addon='[[addon]]'
|
|
addon-slug='[[routeData.slug]]'
|
|
></hassio-addon-config>
|
|
|
|
<template is='dom-if' if='[[addon.network]]'>
|
|
<hassio-addon-network
|
|
hass='[[hass]]'
|
|
addon='[[addon]]'
|
|
addon-slug='[[routeData.slug]]'
|
|
></hassio-addon-network>
|
|
</template>
|
|
|
|
<hassio-addon-logs
|
|
hass='[[hass]]'
|
|
addon-slug='[[routeData.slug]]'
|
|
></hassio-addon-logs>
|
|
</template>
|
|
</div>
|
|
</app-header-layout>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<script>
|
|
class HassioAddonView extends Polymer.Element {
|
|
static get is() { return 'hassio-addon-view'; }
|
|
|
|
static get properties() {
|
|
return {
|
|
hass: Object,
|
|
showMenu: Boolean,
|
|
narrow: Boolean,
|
|
route: Object,
|
|
routeData: {
|
|
type: Object,
|
|
observer: 'routeDataChanged',
|
|
},
|
|
routeMatches: Boolean,
|
|
addon: Object,
|
|
};
|
|
}
|
|
|
|
ready() {
|
|
super.ready();
|
|
this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
|
|
}
|
|
|
|
apiCalled(ev) {
|
|
const path = ev.detail.path;
|
|
|
|
if (!path) return;
|
|
|
|
if (path.substr(path.lastIndexOf('/') + 1) === 'uninstall') {
|
|
this.backTapped();
|
|
} else {
|
|
this.routeDataChanged(this.routeData);
|
|
}
|
|
}
|
|
|
|
routeDataChanged(routeData) {
|
|
if (!this.routeMatches || !routeData || !routeData.slug) return;
|
|
this.hass.callApi('get', `hassio/addons/${routeData.slug}/info`)
|
|
.then((info) => {
|
|
this.addon = info.data;
|
|
}, () => {
|
|
this.addon = null;
|
|
});
|
|
}
|
|
|
|
backTapped() {
|
|
history.back();
|
|
}
|
|
}
|
|
|
|
customElements.define(HassioAddonView.is, HassioAddonView);
|
|
</script>
|