mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
Update Hass.io panel with store details page
This commit is contained in:
Paulus Schoutsen
parent
af8b10e06a
commit
b64c9548bc
@ -51,7 +51,13 @@ Polymer({
|
||||
|
||||
addons: {
|
||||
type: Array,
|
||||
}
|
||||
},
|
||||
|
||||
selectedAddon: {
|
||||
type: String,
|
||||
value: null,
|
||||
notify: true,
|
||||
},
|
||||
},
|
||||
|
||||
computeShowIntro: function (repo) {
|
||||
@ -63,7 +69,7 @@ Polymer({
|
||||
},
|
||||
|
||||
addonTapped: function (ev) {
|
||||
this.fire('hassio-select-addon', { addon: this.addons[ev.model.index].slug });
|
||||
this.selectedAddon = this.addons[ev.model.index].slug;
|
||||
ev.target.blur();
|
||||
},
|
||||
});
|
||||
|
||||
105
panels/hassio/addon-store/hassio-addon-store-overview.html
Normal file
105
panels/hassio/addon-store/hassio-addon-store-overview.html
Normal file
@ -0,0 +1,105 @@
|
||||
<link rel="import" href="../../../bower_components/polymer/polymer.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="./hassio-repositories-editor.html">
|
||||
<link rel="import" href="./hassio-addon-repository.html">
|
||||
|
||||
<dom-module id="hassio-addon-store-overview">
|
||||
<template>
|
||||
<style include="iron-flex ha-style">
|
||||
paper-card {
|
||||
display: block;
|
||||
}
|
||||
.content {
|
||||
padding: 24px 0 32px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
hassio-addon-repository {
|
||||
margin-top: 24px;
|
||||
}
|
||||
</style>
|
||||
<app-header-layout has-scrolling-region>
|
||||
<app-header slot="header" fixed>
|
||||
<app-toolbar>
|
||||
<paper-icon-button
|
||||
icon='mdi:arrow-left'
|
||||
on-tap='backTapped'
|
||||
></paper-icon-button>
|
||||
<div main-title>Hass.io Add-Ons</div>
|
||||
<paper-icon-button
|
||||
icon="mdi:refresh"
|
||||
on-tap="refreshTapped"
|
||||
></paper-icon-button>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
<div class='content'>
|
||||
<hassio-repositories-editor
|
||||
hass='[[hass]]'
|
||||
repos='[[supervisorInfo.addons_repositories]]'
|
||||
></hassio-repositories-editor>
|
||||
<template is='dom-repeat' items='[[repos]]' as='repo'>
|
||||
<hassio-addon-repository
|
||||
repo='[[repo]]'
|
||||
addons='[[computeAddOns(repo.slug)]]'
|
||||
selected-addon='{{selectedAddon}}'
|
||||
></hassio-addon-repository>
|
||||
</template>
|
||||
</div>
|
||||
</app-header-layout>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'hassio-addon-store-overview',
|
||||
|
||||
properties: {
|
||||
hass: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
selectedAddon: {
|
||||
type: String,
|
||||
value: null,
|
||||
notify: true,
|
||||
},
|
||||
|
||||
addons: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
|
||||
repos: {
|
||||
type: Array,
|
||||
value: []
|
||||
},
|
||||
|
||||
supervisorInfo: {
|
||||
type: Object,
|
||||
}
|
||||
},
|
||||
|
||||
computeAddOns: function (repo) {
|
||||
return this.addons.filter(function (addon) {
|
||||
return addon.repository === repo;
|
||||
});
|
||||
},
|
||||
|
||||
refreshTapped: function () {
|
||||
this.fire('hassio-store-refresh');
|
||||
},
|
||||
|
||||
backTapped: function () {
|
||||
// Closes the store. Needs to be done with app-route.
|
||||
this.fire('hassio-select-addon', { addon: null });
|
||||
},
|
||||
});
|
||||
</script>
|
||||
138
panels/hassio/addon-store/hassio-addon-store-view.html
Normal file
138
panels/hassio/addon-store/hassio-addon-store-view.html
Normal file
@ -0,0 +1,138 @@
|
||||
<link rel="import" href="../../../bower_components/polymer/polymer.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-card/paper-card.html">
|
||||
|
||||
<link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
|
||||
|
||||
<dom-module id="hassio-addon-store-view">
|
||||
<template>
|
||||
<style include="iron-flex ha-style">
|
||||
paper-card {
|
||||
display: block;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 24px 0 32px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.addon-header {
|
||||
@apply --paper-font-headline;
|
||||
}
|
||||
.addon-light {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
.addon-version {
|
||||
float: right;
|
||||
font-size: 15px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
<app-header-layout has-scrolling-region>
|
||||
<app-header slot="header" fixed>
|
||||
<app-toolbar>
|
||||
<paper-icon-button
|
||||
icon='mdi:arrow-left'
|
||||
on-tap='backTapped'
|
||||
></paper-icon-button>
|
||||
<div main-title>[[addon.name]]</div>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
<div class='content'>
|
||||
<paper-card>
|
||||
<div class="card-content">
|
||||
<div class="addon-header">[[addon.name]]
|
||||
<div class="addon-version addon-light">
|
||||
v[[addon.version]]
|
||||
</div>
|
||||
</div>
|
||||
<p>[[addon.description]]</p>
|
||||
<p class='addon-light'>
|
||||
Made available via repository [[addon.repository]].
|
||||
</p>
|
||||
<template is='dom-if' if='[[addon.url]]'>
|
||||
<p><a target='_blank' href='[[addon.url]]'>Visit website</a></p>
|
||||
</template>
|
||||
<template is='dom-if' if='[[addon.build]]'>
|
||||
<p class='addon-light'>
|
||||
This add-on will built locally on the device.
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<template is='dom-if' if='[[addon.installed]]'>
|
||||
<paper-button on-tap='openAddon'>Open</paper-button>
|
||||
</template>
|
||||
<template is='dom-if' if='[[!addon.installed]]'>
|
||||
<ha-call-api-button
|
||||
hass='[[hass]]'
|
||||
path="[[pathInstall(addon)]]"
|
||||
>Install</ha-call-api-button>
|
||||
</template>
|
||||
</div>
|
||||
</paper-card>
|
||||
|
||||
<paper-card>
|
||||
<div class='card-content'>
|
||||
<div class='addon-header'>Repository: [[repo.name]]</div>
|
||||
<p>Maintainer: [[repo.maintainer]]</p>
|
||||
<p><a target='_blank' href='[[repo.url]]'>Visit website</a></p>
|
||||
</div>
|
||||
</paper-card>
|
||||
</div>
|
||||
</app-header-layout>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'hassio-addon-store-view',
|
||||
|
||||
properties: {
|
||||
hass: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
selectedAddon: {
|
||||
type: String,
|
||||
value: null,
|
||||
notify: true,
|
||||
},
|
||||
|
||||
addon: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
repo: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
|
||||
listeners: {
|
||||
'hass-api-called': 'apiCalled',
|
||||
},
|
||||
|
||||
pathInstall: function (addon) {
|
||||
return addon && 'hassio/addons/' + addon.slug + '/install';
|
||||
},
|
||||
|
||||
apiCalled: function (ev) {
|
||||
if (ev.detail.success) {
|
||||
this.openAddon();
|
||||
}
|
||||
},
|
||||
|
||||
openAddon: function () {
|
||||
this.fire('hassio-select-addon', { addon: this.addon.slug });
|
||||
},
|
||||
|
||||
backTapped: function () {
|
||||
this.selectedAddon = null;
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@ -8,51 +8,28 @@
|
||||
|
||||
<link rel="import" href="./hassio-repositories-editor.html">
|
||||
<link rel="import" href="./hassio-addon-repository.html">
|
||||
<link rel="import" href="./hassio-addon-store-view.html">
|
||||
<link rel="import" href="./hassio-addon-store-overview.html">
|
||||
|
||||
<dom-module id="hassio-addon-store">
|
||||
<template>
|
||||
<style include="iron-flex ha-style">
|
||||
paper-card {
|
||||
display: block;
|
||||
}
|
||||
.content {
|
||||
padding: 24px 0 32px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
<template is='dom-if' if='[[selectedAddon]]' restamp>
|
||||
<hassio-addon-store-view
|
||||
hass='[[hass]]'
|
||||
selected-addon='{{selectedAddon}}'
|
||||
addon='[[selectedAddonObject]]'
|
||||
repo='[[computeActiveRepo(repos, selectedAddonObject)]]'
|
||||
></hassio-addon-store-view>
|
||||
</template>
|
||||
|
||||
hassio-addon-repository {
|
||||
margin-top: 24px;
|
||||
}
|
||||
</style>
|
||||
<app-header-layout has-scrolling-region>
|
||||
<app-header slot="header" fixed>
|
||||
<app-toolbar>
|
||||
<paper-icon-button
|
||||
icon='mdi:arrow-left'
|
||||
on-tap='backTapped'
|
||||
></paper-icon-button>
|
||||
<div main-title>Hass.io Add-Ons</div>
|
||||
<paper-icon-button
|
||||
icon="mdi:refresh"
|
||||
on-tap="refreshTapped"
|
||||
></paper-icon-button>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
<div class='content'>
|
||||
<hassio-repositories-editor
|
||||
hass='[[hass]]'
|
||||
repos='[[supervisorInfo.addons_repositories]]'
|
||||
></hassio-repositories-editor>
|
||||
<template is='dom-repeat' items='[[repos]]' as='repo'>
|
||||
<hassio-addon-repository
|
||||
repo='[[repo]]'
|
||||
addons='[[computeAddOns(repo.slug)]]'
|
||||
></hassio-addon-repository>
|
||||
</template>
|
||||
</div>
|
||||
</app-header-layout>
|
||||
<template is='dom-if' if='[[!selectedAddon]]'>
|
||||
<hassio-addon-store-overview
|
||||
hass='[[hass]]'
|
||||
selected-addon='{{selectedAddon}}'
|
||||
addons='[[addons]]'
|
||||
repos='[[repos]]'
|
||||
></hassio-addon-store-overview>
|
||||
</template>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
@ -65,13 +42,14 @@ Polymer({
|
||||
type: Object,
|
||||
},
|
||||
|
||||
narrow: {
|
||||
type: Boolean,
|
||||
selectedAddon: {
|
||||
type: String,
|
||||
value: null,
|
||||
},
|
||||
|
||||
showMenu: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
selectedAddonObject: {
|
||||
type: Object,
|
||||
computed: 'computeActiveAddon(addons, selectedAddon)',
|
||||
},
|
||||
|
||||
addons: {
|
||||
@ -91,6 +69,7 @@ Polymer({
|
||||
|
||||
listeners: {
|
||||
'hass-api-called': 'apiCalled',
|
||||
'hassio-store-refresh': 'refreshData',
|
||||
},
|
||||
|
||||
apiCalled: function (ev) {
|
||||
@ -114,21 +93,31 @@ Polymer({
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
computeAddOns: function (repo) {
|
||||
return this.addons.filter(function (addon) {
|
||||
return addon.repository === repo;
|
||||
});
|
||||
computeActiveAddon: function (addons, selectedAddon) {
|
||||
for (var i = 0; i < addons.length; i++) {
|
||||
if (addons[i].slug === selectedAddon) {
|
||||
return addons[i];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
refreshTapped: function () {
|
||||
computeActiveRepo: function (repos, selectedAddonObject) {
|
||||
if (!selectedAddonObject) return null;
|
||||
|
||||
for (var i = 0; i < repos.length; i++) {
|
||||
if (repos[i].slug === selectedAddonObject.repository) {
|
||||
return repos[i];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
refreshData: function () {
|
||||
this.hass.callApi('post', 'hassio/supervisor/reload')
|
||||
.then(function () {
|
||||
this.loadData();
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
backTapped: function () {
|
||||
this.fire('hassio-select-addon', { addon: null });
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -14,67 +14,53 @@
|
||||
}
|
||||
</style>
|
||||
<paper-card heading='Installed'>
|
||||
<template is='dom-if' if='[[!addonState]]'>
|
||||
<div class="card-content">
|
||||
<div>Add-on is not installed.</div>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<div class="card-content">
|
||||
<table class='info'>
|
||||
<tr>
|
||||
<td>Version</td>
|
||||
<td>[[addonState.version]]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>State</td>
|
||||
<td>[[addonState.state]]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Boot</td>
|
||||
<td>[[addonState.boot]]</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<template is='dom-if' if='[[!isRunning]]'>
|
||||
<ha-call-api-button
|
||||
hass='[[hass]]'
|
||||
path="[[pathInstall(addon)]]"
|
||||
>Install</ha-call-api-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template is='dom-if' if='[[addonState]]'>
|
||||
<div class="card-content">
|
||||
<table class='info'>
|
||||
<tr>
|
||||
<td>Version</td>
|
||||
<td>[[addonState.version]]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>State</td>
|
||||
<td>[[addonState.state]]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Boot</td>
|
||||
<td>[[addonState.boot]]</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<template is='dom-if' if='[[!isRunning]]'>
|
||||
<ha-call-api-button
|
||||
hass='[[hass]]'
|
||||
path="[[pathStart(addon)]]"
|
||||
>Start</ha-call-api-button>
|
||||
</template>
|
||||
<template is='dom-if' if='[[isRunning]]'>
|
||||
<ha-call-api-button
|
||||
class='warning'
|
||||
hass='[[hass]]'
|
||||
path="[[pathRestart(addon)]]"
|
||||
>Restart</ha-call-api-button>
|
||||
<ha-call-api-button
|
||||
class='warning'
|
||||
hass='[[hass]]'
|
||||
path="[[pathStop(addon)]]"
|
||||
>Stop</ha-call-api-button>
|
||||
</template>
|
||||
<template is='dom-if' if='[[computeUpdateAvailable(addonState)]]'>
|
||||
<ha-call-api-button
|
||||
hass='[[hass]]'
|
||||
path="[[pathUpdate(addon)]]"
|
||||
>Update</ha-call-api-button>
|
||||
</template>
|
||||
path="[[pathStart(addon)]]"
|
||||
>Start</ha-call-api-button>
|
||||
</template>
|
||||
<template is='dom-if' if='[[isRunning]]'>
|
||||
<ha-call-api-button
|
||||
class='warning'
|
||||
hass='[[hass]]'
|
||||
path="[[pathUninstall(addon)]]"
|
||||
>Uninstall</ha-call-api-button>
|
||||
</div>
|
||||
</template>
|
||||
path="[[pathRestart(addon)]]"
|
||||
>Restart</ha-call-api-button>
|
||||
<ha-call-api-button
|
||||
class='warning'
|
||||
hass='[[hass]]'
|
||||
path="[[pathStop(addon)]]"
|
||||
>Stop</ha-call-api-button>
|
||||
</template>
|
||||
<template is='dom-if' if='[[computeUpdateAvailable(addonState)]]'>
|
||||
<ha-call-api-button
|
||||
hass='[[hass]]'
|
||||
path="[[pathUpdate(addon)]]"
|
||||
>Update</ha-call-api-button>
|
||||
</template>
|
||||
<ha-call-api-button
|
||||
class='warning'
|
||||
hass='[[hass]]'
|
||||
path="[[pathUninstall(addon)]]"
|
||||
>Uninstall</ha-call-api-button>
|
||||
</div>
|
||||
</paper-card>
|
||||
</template>
|
||||
</dom-module>
|
||||
@ -128,10 +114,6 @@ Polymer({
|
||||
return 'hassio/addons/' + addon + '/restart';
|
||||
},
|
||||
|
||||
pathInstall: function (addon) {
|
||||
return 'hassio/addons/' + addon + '/install';
|
||||
},
|
||||
|
||||
pathUninstall: function (addon) {
|
||||
return 'hassio/addons/' + addon + '/uninstall';
|
||||
},
|
||||
|
||||
@ -128,8 +128,14 @@ Polymer({
|
||||
'hass-api-called': 'apiCalled',
|
||||
},
|
||||
|
||||
apiCalled: function () {
|
||||
this.addonChanged(this.addon);
|
||||
apiCalled: function (ev) {
|
||||
var path = ev.detail.path;
|
||||
|
||||
if (path.substr(path.lastIndexOf('/') + 1) === 'uninstall') {
|
||||
this.backTapped();
|
||||
} else {
|
||||
this.addonChanged(this.addon);
|
||||
}
|
||||
},
|
||||
|
||||
addonChanged: function (addon) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user