Re-organize addon code

This commit is contained in:
Paulus Schoutsen 2017-05-01 00:06:23 -07:00
parent d4b907961c
commit 3df12ec849
7 changed files with 374 additions and 197 deletions

View File

@ -0,0 +1,65 @@
<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="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">
<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
<link rel="import" href="../../../src/components/ha-menu-button.html">
<dom-module id="hassio-addon-info">
<template>
<style include="ha-style">
:host {
display: block;
}
paper-card {
display: block;
}
</style>
<paper-card heading='Info'>
<div class="card-content">
<div>[[addonInfo.description]]</div>
<table class='info'>
<tr>
<td>Installed</td>
<td>[[computeInstallStatus(addonInfo)]]</td>
</tr>
<tr>
<td>Version</td>
<td>[[addonInfo.version]]</td>
</tr>
<tr>
<td>Dedicated</td>
<td>[[addonInfo.dedicated]]</td>
</tr>
</table>
</div>
</paper-card>
</template>
</dom-module>
<script>
Polymer({
is: 'hassio-addon-info',
properties: {
hass: {
type: Object,
},
addonInfo: {
type: Object,
},
},
computeInstallStatus(addon) {
return addon.installed || 'Not installed';
},
});
</script>

View File

@ -0,0 +1,60 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
<dom-module id="hassio-addon-logs">
<template>
<style include="iron-flex ha-style">
:host,
paper-card {
display: block;
}
</style>
<paper-card heading='Logs'>
<div class="card-content">
<pre>[[addonLogs]]</pre>
</div>
<div class="card-actions">
<paper-button on-tap='refresh'>Refresh</paper-button>
</div>
</paper-card>
</template>
</dom-module>
<script>
Polymer({
is: 'hassio-addon-logs',
properties: {
hass: {
type: Object,
},
addon: {
type: String,
observer: 'addonChanged',
},
addonLogs: {
type: String,
value: '',
},
},
addonChanged: function (addon) {
if (!this.hass) {
setTimeout(function () { this.addonChanged(addon); }.bind(this), 0);
return;
}
this.refresh();
},
refresh: function () {
this.hass.callApi('get', 'hassio/addons/' + this.addon + '/logs')
.then(function (info) {
this.addonLogs = info;
}.bind(this));
},
});
</script>

View File

@ -0,0 +1,88 @@
<link rel="import" href="../../../bower_components/polymer/polymer.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="../../../src/components/buttons/ha-call-api-button.html">
<dom-module id="hassio-addon-options">
<template>
<style include="ha-style">
:host {
display: block;
}
paper-card {
display: block;
}
iron-autogrow-textarea {
width: 100%;
}
</style>
<paper-card heading='Options'>
<div class="card-content">
<iron-autogrow-textarea value="{{options}}"></iron-autogrow-textarea>
</div>
<div class="card-actions">
<ha-call-api-button
hass='[[hass]]'
disabled='[[!optionsParsed]]'
data='[[computeOptionsData(optionsParsed)]]'
path="[[pathOptions(addon)]]"
>Save</ha-call-api-button>
</div>
</paper-card>
</template>
</dom-module>
<script>
Polymer({
is: 'hassio-addon-options',
properties: {
hass: {
type: Object,
},
addon: {
type: String,
},
options: {
type: String,
value: '',
},
optionsParsed: {
type: Object,
computed: 'parseOptions(options)',
},
addonState: {
type: Object,
value: null,
observer: 'addonStateChanged',
},
},
addonStateChanged: function (addonState) {
this.options = addonState ? JSON.stringify(addonState.options, null, 2) : '';
},
parseOptions: function (options) {
try {
return JSON.parse(options);
} catch (err) {
return null;
}
},
computeOptionsData: function (optionsParsed) {
return {
options: optionsParsed,
};
},
pathOptions: function (addon) {
return 'hassio/addons/' + addon + '/options';
},
});
</script>

View File

@ -0,0 +1,134 @@
<link rel="import" href="../../../bower_components/polymer/polymer.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-state">
<template>
<style include="ha-style">
:host {
display: block;
}
paper-card {
display: block;
}
</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">
<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="[[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>
</template>
</paper-card>
</template>
</dom-module>
<script>
Polymer({
is: 'hassio-addon-state',
properties: {
hass: {
type: Object,
},
addon: {
type: String,
},
isRunning: {
type: Boolean,
computed: 'computeIsRunning(addonState)',
},
addonInfo: {
type: Object,
value: null,
},
addonState: {
type: Object,
value: null,
},
},
computeIsRunning: function (addonState) {
return addonState && addonState.state === 'started';
},
computeUpdateAvailable: function (data) {
return data && data.version !== data.last_version;
},
pathStart: function (addon) {
return 'hassio/addons/' + addon + '/start';
},
pathStop: function (addon) {
return 'hassio/addons/' + addon + '/stop';
},
pathInstall: function (addon) {
return 'hassio/addons/' + addon + '/install';
},
pathUninstall: function (addon) {
return 'hassio/addons/' + addon + '/uninstall';
},
pathUpdate: function (addon) {
return 'hassio/addons/' + addon + '/update';
},
});
</script>

View File

@ -2,28 +2,24 @@
<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-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-header/app-header.html">
<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.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="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">
<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
<link rel="import" href="../../../src/components/ha-menu-button.html"> <link rel="import" href="../../../src/components/ha-menu-button.html">
<link rel="import" href="./hassio-addon-info.html">
<link rel="import" href="./hassio-addon-state.html">
<link rel="import" href="./hassio-addon-options.html">
<link rel="import" href="./hassio-addon-logs.html">
<dom-module id="hassio-addon-view"> <dom-module id="hassio-addon-view">
<template> <template>
<style include="iron-flex ha-style"> <style include="iron-flex ha-style">
paper-card { paper-card {
display: block; display: block;
} }
.controls paper-card { .controls paper-card,
hassio-addon-options {
margin-bottom: 24px; margin-bottom: 24px;
} }
iron-autogrow-textarea {
width: 100%;
}
.content { .content {
padding: 24px 0 32px; padding: 24px 0 32px;
max-width: 600px; max-width: 600px;
@ -53,112 +49,31 @@
<div class='content'> <div class='content'>
<div class='status'> <div class='status'>
<paper-card heading='Info'> <hassio-addon-info
<div class="card-content">
<div>[[addonInfo.description]]</div>
<table class='info'>
<tr>
<td>Installed</td>
<td>[[computeInstallStatus(addonInfo)]]</td>
</tr>
<tr>
<td>Version</td>
<td>[[addonInfo.version]]</td>
</tr>
<tr>
<td>Dedicated</td>
<td>[[addonInfo.dedicated]]</td>
</tr>
</table>
</div>
<template is='dom-if' if='[[!addonState]]'>
<div class="card-actions">
<ha-call-api-button
hass='[[hass]]' hass='[[hass]]'
path="[[pathInstall(addon)]]" addon-info='[[addonInfo]]'
>Install</ha-call-api-button> ></hassio-addon-info>
</div>
</template>
</paper-card>
<paper-card heading='Installed'> <hassio-addon-state
<template is='dom-if' if='[[!addonState]]'>
<div class="card-content">
<div>Add-on is not installed.</div>
</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]]' hass='[[hass]]'
path="[[pathStart(addon)]]" addon='[[addon]]'
>Start</ha-call-api-button> addon-info='[[addonInfo]]'
</template> addon-state='[[addonState]]'
<template is='dom-if' if='[[computeUpdateAvailable(addonInfo)]]'> ></hassio-addon-state>
<ha-call-api-button
hass='[[hass]]'
path="[[pathUpdate(addon)]]"
>Update</ha-call-api-button>
</template>
<template is='dom-if' if='[[isRunning]]'>
<ha-call-api-button
class='warning'
hass='[[hass]]'
path="[[pathStop(addon)]]"
>Stop</ha-call-api-button>
</template>
<ha-call-api-button
class='warning'
hass='[[hass]]'
path="[[pathUninstall(addon)]]"
>Uninstall</ha-call-api-button>
</div>
</template>
</paper-card>
</div> </div>
<template is='dom-if' if='[[addonState]]'> <template is='dom-if' if='[[addonState]]'>
<div class='controls'> <div class='controls'>
<paper-card heading='Options'> <hassio-addon-options
<div class="card-content">
<iron-autogrow-textarea value="{{options}}"></iron-autogrow-textarea>
</div>
<div class="card-actions">
<ha-call-api-button
hass='[[hass]]' hass='[[hass]]'
disabled='[[!optionsParsed]]' addon='[[addon]]'
data='[[computeOptionsData(optionsParsed)]]' addon-state='[[addonState]]'
path="[[pathOptions(addon)]]" ></hassio-addon-options>
>Save</ha-call-api-button>
</div>
</paper-card>
<paper-card heading='Logs'> <hassio-addon-logs
<div class="card-content"> hass='[[hass]]'
<pre>[[addonLogs]]</pre> addon='[[addon]]'
</div> ></hassio-addon-logs>
<div class="card-actions">
<paper-button on-tap='refreshLogs'>Refresh</paper-button>
</div>
</paper-card>
</div> </div>
</template> </template>
</div> </div>
@ -189,29 +104,10 @@ Polymer({
observer: 'addonChanged', observer: 'addonChanged',
}, },
options: {
type: String,
value: '',
},
optionsParsed: {
type: Object,
computed: 'parseOptions(options)',
},
supervisorInfo: { supervisorInfo: {
type: Object, type: Object,
}, },
hostInfo: {
type: Object,
},
isRunning: {
type: Boolean,
computed: 'computeIsRunning(addonState)',
},
addonInfo: { addonInfo: {
type: Object, type: Object,
computed: 'computeAddonInfo(supervisorInfo, addon)', computed: 'computeAddonInfo(supervisorInfo, addon)',
@ -220,7 +116,6 @@ Polymer({
addonState: { addonState: {
type: Object, type: Object,
value: null, value: null,
observer: 'addonStateChanged',
}, },
addonLogs: { addonLogs: {
@ -249,18 +144,6 @@ Polymer({
}.bind(this), function () { }.bind(this), function () {
this.addonState = null; this.addonState = null;
}.bind(this)); }.bind(this));
this.refreshLogs();
},
refreshLogs: function () {
this.hass.callApi('get', 'hassio/addons/' + this.addon + '/logs')
.then(function (info) {
this.addonLogs = info;
}.bind(this));
},
addonStateChanged: function (addonState) {
this.options = addonState ? JSON.stringify(addonState.options, null, 2) : '';
}, },
computeAddonInfo: function (supervisorInfo, addon) { computeAddonInfo: function (supervisorInfo, addon) {
@ -273,58 +156,8 @@ Polymer({
return null; return null;
}, },
computeIsRunning: function (addonState) {
return addonState && addonState.state === 'started';
},
computeInstallStatus(addon) {
return addon.installed || 'Not installed';
},
computeUpdateAvailable: function (data) {
return data.version !== data.last_version;
},
parseOptions: function (options) {
try {
return JSON.parse(options);
} catch (err) {
return null;
}
},
computeOptionsData: function (optionsParsed) {
return {
options: optionsParsed,
};
},
backTapped: function () { backTapped: function () {
this.fire('hassio-select-addon', { addon: null }); this.fire('hassio-select-addon', { addon: null });
}, },
pathStart: function (addon) {
return 'hassio/addons/' + addon + '/start';
},
pathStop: function (addon) {
return 'hassio/addons/' + addon + '/stop';
},
pathInstall: function (addon) {
return 'hassio/addons/' + addon + '/install';
},
pathUninstall: function (addon) {
return 'hassio/addons/' + addon + '/uninstall';
},
pathUpdate: function (addon) {
return 'hassio/addons/' + addon + '/update';
},
pathOptions: function (addon) {
return 'hassio/addons/' + addon + '/options';
},
}); });
</script> </script>

View File

@ -71,7 +71,7 @@ Polymer({
addon: { addon: {
type: String, type: String,
value: '', value: 'samba', // TEMP
}, },
supervisorInfo: { supervisorInfo: {

View File

@ -5,9 +5,6 @@ Supervisor:
- logs - logs
- toggle beta channel (/options) - toggle beta channel (/options)
Addon View:
- break up UI in smaller custom elements to organize code
Network: Network:
- show - show
- update - update