Add core config panel (#204)

* Add core config panel

* Lint

panels/config/ha-call-service-button.html

@@ -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>

panels/config/ha-config-section-core.html

@@ -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>

panels/config/ha-config-section-hassbian.html

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

panels/config/ha-panel-config.html

@@ -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]]'

src/resources/ha-style.html

@@ -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>