Add core config panel (#204)

* Add core config panel

* Lint
This commit is contained in:
Paulus Schoutsen 2017-02-11 23:03:01 -08:00 committed by GitHub
parent 2130b6f015
commit d6fda61d8c
5 changed files with 243 additions and 2 deletions

View File

@ -0,0 +1,110 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
<dom-module id='ha-call-service-button'>
<template>
<style>
.container {
position: relative;
display: inline-block;
}
paper-button {
transition: all 1s;
}
.success paper-button {
color: white;
background-color: var(--google-green-500);
transition: none;
}
.error paper-button {
color: white;
background-color: var(--google-red-500);
transition: none;
}
paper-button[disabled] {
color: #c8c8c8;
}
.progress {
@apply(--layout);
@apply(--layout-center-center);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
<div class='container' id='container'>
<paper-button
id='button'
disabled='[[progress]]'
on-tap='buttonTapped'
>
<slot></slot>
</paper-button>
<template is='dom-if' if='[[progress]]'>
<div class='progress'>
<paper-spinner active></paper-spinner>
</div>
</template>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'ha-call-service-button',
properties: {
hass: {
type: Object,
},
progress: {
type: Boolean,
value: false,
},
domain: {
type: String,
},
service: {
type: String,
},
serviceData: {
type: Object,
value: {},
},
},
tempClass: function (className) {
var classList = this.$.container.classList;
classList.add(className);
this.async(function () {
classList.remove(className);
}, 1000);
},
buttonTapped: function () {
this.progress = true;
var el = this;
this.hass.callService(this.domain, this.service, this.serviceData)
.then(function () {
el.tempClass('success');
el.progress = false;
}, function () {
el.tempClass('error');
el.progress = false;
});
}
});
</script>

View File

@ -0,0 +1,118 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel='import' href='../../bower_components/iron-media-query/iron-media-query.html'>
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.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="../../src/components/ha-menu-button.html">
<link rel="import" href="../../src/resources/ha-style.html">
<link rel="import" href="./ha-config-section.html">
<link rel="import" href="./ha-call-service-button.html">
<dom-module id="ha-config-section-core">
<template>
<style include="iron-flex ha-style">
.header {
font-size: 16px;
margin-bottom: 1em;
}
.header .status {
font-size: 14px;
float: right;
}
.card-actions.warning ha-call-service-button {
color: var(--google-red-500);
}
</style>
<ha-config-section
narrow='[[narrow]]'
show-menu='[[showMenu]]'
>
<span slot='header'>Server Management</span>
<span slot='introduction'>
Changing your configuration can be a tiresome process. We know. This section will try to make your life a little bit easier.
</span>
<paper-card heading='Configuration Reloading'>
<div class='card-content'>
Some parts of Home Assistant can reload without requiring a restart. Hitting reload will unload their current configuration and load the new one.
</div>
<div class='card-actions'>
<ha-call-service-button
hass='[[hass]]'
domain='homeassistant'
service='reload_core_config'
>Reload Core</ha-call-service-button>
<ha-call-service-button
hass='[[hass]]'
domain='group'
service='reload'
hidden$='[[!groupLoaded(hass)]]'
>Reload Groups</ha-call-service-button>
<ha-call-service-button
hass='[[hass]]'
domain='automation'
service='reload'
hidden$='[[!automationLoaded(hass)]]'
>Reload automation</ha-call-service-button>
</div>
</paper-card>
<paper-card heading='Server Management'>
<div class='card-content'>
Control your Home Assistant server… from Home Assistant.
</div>
<div class='card-actions warning'>
<ha-call-service-button
hass='[[hass]]'
domain='homeassistant'
service='restart'
>Restart</ha-call-service-button>
<ha-call-service-button
hass='[[hass]]'
domain='homeassistant'
service='stop'
>Stop</ha-call-service-button>
</div>
</paper-card>
</ha-config-section>
</template>
</dom-module>
<script>
Polymer({
is: 'ha-config-section-core',
properties: {
hass: {
type: Object,
},
narrow: {
type: Boolean,
},
showMenu: {
type: Boolean,
value: false,
},
},
groupLoaded: function (hass) {
return window.hassUtil.isComponentLoaded(hass, 'group');
},
automationLoaded: function (hass) {
return window.hassUtil.isComponentLoaded(hass, 'automation');
},
});
</script>

View File

@ -163,8 +163,8 @@ Polymer({
return suiteStatus[suiteKey].state === 'not_installed';
},
suiteMoreInfoTapped: function (ev) {
console.log('learn more', ev.model.item);
suiteMoreInfoTapped: function () {
// console.log('learn more', ev.model.item);
},
suiteActionTapped: function () {

View File

@ -4,6 +4,7 @@
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../../src/components/ha-menu-button.html">
<link rel="import" href="./ha-config-section-core.html">
<link rel="import" href="./ha-config-section-hassbian.html">
<dom-module id="ha-panel-config">
@ -21,6 +22,12 @@
</app-toolbar>
</app-header>
<ha-config-section-core
narrow='[[narrow]]'
show-menu='[[showMenu]]'
hass='[[hass]]'
></ha-config-section-core>
<template is='dom-if' if='[[computeIsHassbianLoaded(hass)]]'>
<ha-config-section-hassbian
narrow='[[narrow]]'

View File

@ -76,6 +76,12 @@
h1 {
@apply(--paper-font-title);
}
.card-actions > paper-button,
.card-actions > ha-call-service-button {
color: var(--default-primary-color);
font-weight: 500;
}
</style>
</template>
</dom-module>