From 8649c5352bea010cca30cf1ac8e9726df4311d9c Mon Sep 17 00:00:00 2001
From: Adam Mills <adam@armills.info>
Date: Sun, 21 Jan 2018 01:08:22 -0500
Subject: [PATCH] Core config translations (#821)

* Config dashboard translations

* Simplify config pages

* Core/Core/Validation

* Core/Core/Reloading

* Core/Core/Server_Management

* Core/Push_Notifications

* Core/Translation

* Core/Themes

* Initial hassbian config translations

* Switch to sentence cases
---
 gulp/tasks/translations.js                    |   1 +
 .../automation/ha-automation-picker.html      |   9 +-
 .../automation/ha-config-automation.html      |   1 +
 panels/config/core/ha-config-core.html        |   8 +-
 .../config/core/ha-config-section-core.html   |  87 ++++++++------
 .../core/ha-config-section-hassbian.html      |  18 ++-
 .../ha-config-section-push-notifications.html |  11 +-
 .../config/core/ha-config-section-themes.html |  13 ++-
 .../core/ha-config-section-translation.html   |   6 +-
 .../config/customize/ha-config-customize.html |   8 +-
 .../config/dashboard/ha-config-dashboard.html |  15 ++-
 .../dashboard/ha-config-navigation.html       | 109 ++++++++----------
 panels/config/script/ha-config-script.html    |   1 +
 panels/config/script/ha-script-picker.html    |   9 +-
 panels/config/zwave/ha-config-zwave.html      |   8 +-
 src/translations/en.json                      |  72 ++++++++++++
 16 files changed, 247 insertions(+), 129 deletions(-)

diff --git a/gulp/tasks/translations.js b/gulp/tasks/translations.js
index 1f7aa56aed..5c09e80f7a 100755
--- a/gulp/tasks/translations.js
+++ b/gulp/tasks/translations.js
@@ -18,6 +18,7 @@ const outDir = workDir + '/output';
 // should mirror the fragment definitions in polymer.json, so that we load
 // additional resources at equivalent points.
 const TRANSLATION_FRAGMENTS = [
+  'config',
   'history',
   'logbook',
   'mailbox',
diff --git a/panels/config/automation/ha-automation-picker.html b/panels/config/automation/ha-automation-picker.html
index 9f123dc537..7ef299e018 100644
--- a/panels/config/automation/ha-automation-picker.html
+++ b/panels/config/automation/ha-automation-picker.html
@@ -51,7 +51,7 @@
             icon='mdi:arrow-left'
             on-tap='_backTapped'
           ></paper-icon-button>
-          <div main-title>Automations</div>
+          <div main-title>[[localize('ui.panel.config.automation.caption')]]</div>
         </app-toolbar>
       </app-header>
 
@@ -94,7 +94,12 @@
 </dom-module>
 
 <script>
-class HaAutomationPicker extends window.hassMixins.EventsMixin(Polymer.Element) {
+/*
+ * @appliesMixin window.hassMixins.LocalizeMixin
+ * @appliesMixin window.hassMixins.EventsMixin
+ */
+class HaAutomationPicker extends
+  window.hassMixins.LocalizeMixin(window.hassMixins.EventsMixin(Polymer.Element)) {
   static get is() { return 'ha-automation-picker'; }
 
   static get properties() {
diff --git a/panels/config/automation/ha-config-automation.html b/panels/config/automation/ha-config-automation.html
index beda1f2834..3de2568365 100644
--- a/panels/config/automation/ha-config-automation.html
+++ b/panels/config/automation/ha-config-automation.html
@@ -26,6 +26,7 @@
 
     <template is='dom-if' if='[[!showEditor]]'>
       <ha-automation-picker
+        hass='[[hass]]'
         narrow='[[narrow]]'
         show-menu='[[showMenu]]'
         automations='[[automations]]'
diff --git a/panels/config/core/ha-config-core.html b/panels/config/core/ha-config-core.html
index 8cbba27060..b4afd23883 100644
--- a/panels/config/core/ha-config-core.html
+++ b/panels/config/core/ha-config-core.html
@@ -5,6 +5,7 @@
 
 <link rel="import" href="../../../src/resources/ha-style.html">
 <link rel='import' href='../../../src/layouts/ha-app-layout.html'>
+<link rel='import' href='../../../src/util/hass-mixins.html'>
 
 <link rel="import" href="./ha-config-section-core.html">
 <!-- <link rel="import" href="./ha-config-section-group.html"> -->
@@ -38,7 +39,7 @@
             icon='mdi:arrow-left'
             on-tap='_backTapped'
           ></paper-icon-button>
-          <div main-title>General</div>
+          <div main-title>[[localize('ui.panel.config.core.caption')]]</div>
         </app-toolbar>
       </app-header>
 
@@ -94,7 +95,10 @@
 </dom-module>
 
 <script>
-class HaConfigCore extends Polymer.Element {
+/*
+ * @appliesMixin window.hassMixins.LocalizeMixin
+ */
+class HaConfigCore extends window.hassMixins.LocalizeMixin(Polymer.Element) {
   static get is() { return 'ha-config-core'; }
 
   static get properties() {
diff --git a/panels/config/core/ha-config-section-core.html b/panels/config/core/ha-config-section-core.html
index 578943b68a..52db2cd4b4 100644
--- a/panels/config/core/ha-config-section-core.html
+++ b/panels/config/core/ha-config-section-core.html
@@ -6,6 +6,7 @@
 
 <link rel="import" href="../../../src/components/buttons/ha-call-service-button.html">
 <link rel="import" href="../../../src/resources/ha-style.html">
+<link rel='import' href='../../../src/util/hass-mixins.html'>
 
 <link rel="import" href="../ha-config-section.html">
 
@@ -44,19 +45,23 @@
     <ha-config-section
       is-wide='[[isWide]]'
     >
-      <span slot='header'>Configuration and Server Control</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>
+      <span slot='header'>[[localize('ui.panel.config.core.section.core.header')]]</span>
+      <span slot='introduction'>[[localize('ui.panel.config.core.section.core.introduction')]]</span>
 
-      <paper-card heading='Configuration Validation'>
+      <paper-card heading="[[localize('ui.panel.config.core.section.core.validation.heading')]]">
         <div class='card-content'>
-          Validate your configuration if you recently made some changes to your configuration and want to make sure that it is all valid.
+          [[localize('ui.panel.config.core.section.core.validation.introduction')]]
           <template is='dom-if' if='[[!validateLog]]'>
             <div class='validate-container'>
               <template is='dom-if' if='[[!validating]]'>
-                <div class='validate-result' id='result'>[[validateResult]]</div>
-                <paper-button raised on-tap='validateConfig'>check config</paper-button>
+                <template is='dom-if' if='[[isValid]]'>
+                  <div class='validate-result' id='result'>
+                    [[localize('ui.panel.config.core.section.core.validation.valid')]]
+                  </div>
+                </template>
+                <paper-button raised on-tap='validateConfig'>
+                  [[localize('ui.panel.config.core.section.core.validation.check_config')]]
+                </paper-button>
               </template>
               <template is='dom-if' if='[[validating]]'>
                 <paper-spinner active></paper-spinner>
@@ -65,48 +70,56 @@
           </template>
           <template is='dom-if' if='[[validateLog]]'>
             <div class='config-invalid'>
-              <span class='text'>Configuration invalid.</span>
-              <paper-button raised on-tap='validateConfig'>check config</paper-button>
+              <span class='text'>
+                [[localize('ui.panel.config.core.section.core.validation.invalid')]]
+              </span>
+              <paper-button raised on-tap='validateConfig'>
+                [[localize('ui.panel.config.core.section.core.validation.check_config')]]
+              </paper-button>
             </div>
             <div id='configLog' class='validate-log'>[[validateLog]]</div>
           </template>
         </div>
       </paper-card>
 
-      <paper-card heading='Configuration Reloading'>
+      <paper-card heading="[[localize('ui.panel.config.core.section.core.reloading.heading')]]">
         <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.
+          [[localize('ui.panel.config.core.section.core.reloading.introduction')]]
         </div>
         <div class='card-actions'>
           <ha-call-service-button
             hass='[[hass]]'
             domain='homeassistant'
             service='reload_core_config'
-          >Reload Core</ha-call-service-button>
+          >[[localize('ui.panel.config.core.section.core.reloading.core')]]
+          </ha-call-service-button>
           <ha-call-service-button
             hass='[[hass]]'
             domain='group'
             service='reload'
             hidden$='[[!groupLoaded(hass)]]'
-          >Reload Groups</ha-call-service-button>
+          >[[localize('ui.panel.config.core.section.core.reloading.group')]]
+          </ha-call-service-button>
           <ha-call-service-button
             hass='[[hass]]'
             domain='automation'
             service='reload'
             hidden$='[[!automationLoaded(hass)]]'
-          >Reload Automation</ha-call-service-button>
+          >[[localize('ui.panel.config.core.section.core.reloading.automation')]]
+          </ha-call-service-button>
           <ha-call-service-button
             hass='[[hass]]'
             domain='script'
             service='reload'
             hidden$='[[!scriptLoaded(hass)]]'
-          >Reload Scripts</ha-call-service-button>
+          >[[localize('ui.panel.config.core.section.core.reloading.script')]]
+          </ha-call-service-button>
         </div>
       </paper-card>
 
-      <paper-card heading='Server Management'>
+      <paper-card heading="[[localize('ui.panel.config.core.section.core.server_management.heading')]]">
         <div class='card-content'>
-          Control your Home Assistant server… from Home Assistant.
+          [[localize('ui.panel.config.core.section.core.server_management.introduction')]]
         </div>
         <div class='card-actions warning'>
           <ha-call-service-button
@@ -114,13 +127,15 @@
             hass='[[hass]]'
             domain='homeassistant'
             service='restart'
-          >Restart</ha-call-service-button>
+          >[[localize('ui.panel.config.core.section.core.server_management.restart')]]
+          </ha-call-service-button>
           <ha-call-service-button
             class='warning'
             hass='[[hass]]'
             domain='homeassistant'
             service='stop'
-          >Stop</ha-call-service-button>
+          >[[localize('ui.panel.config.core.section.core.server_management.stop')]]
+          </ha-call-service-button>
         </div>
       </paper-card>
 
@@ -129,7 +144,10 @@
 </dom-module>
 
 <script>
-class HaConfigSectionCore extends Polymer.Element {
+/*
+ * @appliesMixin window.hassMixins.LocalizeMixin
+ */
+class HaConfigSectionCore extends window.hassMixins.LocalizeMixin(Polymer.Element) {
   static get is() { return 'ha-config-section-core'; }
 
   static get properties() {
@@ -148,9 +166,9 @@ class HaConfigSectionCore extends Polymer.Element {
         value: false,
       },
 
-      validateResult: {
-        type: String,
-        value: '',
+      isValid: {
+        type: Boolean,
+        value: null,
       },
 
       validateLog: {
@@ -175,21 +193,16 @@ class HaConfigSectionCore extends Polymer.Element {
   validateConfig() {
     this.validating = true;
     this.validateLog = '';
-    this.validateResult = '';
+    this.isValid = null;
 
-    var el = this;
+    this.hass.callApi('POST', 'config/core/check_config').then((result) => {
+      this.validating = false;
+      this.isValid = result.result === 'valid';
 
-    this.hass.callApi('POST', 'config/core/check_config')
-      .then(function (result) {
-        el.validating = false;
-        var isValid = el.configValid = result.result === 'valid';
-
-        if (isValid) {
-          el.validateResult = 'Valid!';
-        } else {
-          el.validateLog = result.errors;
-        }
-      });
+      if (!this.isValid) {
+        this.validateLog = result.errors;
+      }
+    });
   }
 }
 
diff --git a/panels/config/core/ha-config-section-hassbian.html b/panels/config/core/ha-config-section-hassbian.html
index 70ec75e922..0d0d344a18 100644
--- a/panels/config/core/ha-config-section-hassbian.html
+++ b/panels/config/core/ha-config-section-hassbian.html
@@ -11,6 +11,7 @@
 
 <link rel="import" href="../../../src/components/ha-menu-button.html">
 <link rel="import" href="../../../src/resources/ha-style.html">
+<link rel='import' href='../../../src/util/hass-mixins.html'>
 
 <link rel="import" href="../ha-config-section.html">
 
@@ -33,9 +34,9 @@
       }
     </style>
     <ha-config-section is-wide='[[isWide]]'>
-      <span slot='header'>Bring Hassbian to the next level</span>
+      <span slot='header'>[[localize('ui.panel.config.core.section.hassbian.header')]]</span>
       <span slot='introduction'>
-        Discover exciting add-ons to enhance your Home Assistant installation. Add an MQTT server or control a connected TV via HDMI-CEC.
+        [[localize('ui.panel.config.core.section.hassbian.introduction')]]
       </span>
 
       <template is='dom-if' if='[[suiteStatus]]'>
@@ -51,10 +52,14 @@
               [[computeSuiteDescription(suiteStatus, suiteKey)]]
             </div>
             <div class='card-actions'>
-              <paper-button on-tap='suiteMoreInfoTapped'>LEARN MORE</paper-button>
+              <paper-button on-tap='suiteMoreInfoTapped'>
+                [[localize('ui.panel.config.core.section.hassbian.learn_more')]]
+              </paper-button>
 
               <template is='dom-if' if='[[computeShowInstall(suiteStatus, suiteKey)]]'>
-                <paper-button on-tap='suiteActionTapped'>INSTALL</paper-button>
+                <paper-button on-tap='suiteActionTapped'>
+                  [[localize('ui.panel.config.core.section.hassbian.install')]]
+                </paper-button>
               </template>
             </div>
           </paper-card>
@@ -65,7 +70,10 @@
 </dom-module>
 
 <script>
-class HaConfigSectionHassbian extends Polymer.Element {
+/*
+ * @appliesMixin window.hassMixins.LocalizeMixin
+ */
+class HaConfigSectionHassbian extends window.hassMixins.LocalizeMixin(Polymer.Element) {
   static get is() { return 'ha-config-section-hassbian'; }
 
   static get properties() {
diff --git a/panels/config/core/ha-config-section-push-notifications.html b/panels/config/core/ha-config-section-push-notifications.html
index 149e6167aa..0f7d3562f7 100644
--- a/panels/config/core/ha-config-section-push-notifications.html
+++ b/panels/config/core/ha-config-section-push-notifications.html
@@ -16,15 +16,15 @@
       }
     </style>
     <ha-config-section is-wide='[[isWide]]'>
-      <span slot='header'>Enable Push Notifications</span>
+      <span slot='header'>[[localize('ui.panel.config.core.section.push_notifications.header')]]</span>
       <span slot='introduction'>
-        Enable this setting to receive push notifications on this device
+        [[localize('ui.panel.config.core.section.push_notifications.introduction')]]
       </span>
 
       <paper-card>
         <div class='card-content'>
           <iron-label class='horizontal layout'>            
-            Push Notifications
+            [[localize('ui.panel.config.core.section.push_notifications.push_notifications')]]
             <ha-push-notifications-toggle
               hass='[[hass]]'
               push-supported='{{pushSupported}}'
@@ -37,7 +37,10 @@
 </dom-module>
 
 <script>
-class HaConfigSectionPushNotifications extends Polymer.Element {
+/*
+ * @appliesMixin window.hassMixins.LocalizeMixin
+ */
+class HaConfigSectionPushNotifications extends window.hassMixins.LocalizeMixin(Polymer.Element) {
   static get is() { return 'ha-config-section-push-notifications'; }
 
   static get properties() {
diff --git a/panels/config/core/ha-config-section-themes.html b/panels/config/core/ha-config-section-themes.html
index 6191cb8e25..886b8a146d 100644
--- a/panels/config/core/ha-config-section-themes.html
+++ b/panels/config/core/ha-config-section-themes.html
@@ -10,14 +10,14 @@
 <dom-module id="ha-config-section-themes">
   <template>
     <ha-config-section is-wide='[[isWide]]'>
-      <span slot='header'>Set a theme</span>
+      <span slot='header'>[[localize('ui.panel.config.core.section.themes.header')]]</span>
       <span slot='introduction'>
-        Choose 'Backend-selected' to use whatever theme the backend chooses or pick a theme for this device.
+        [[localize('ui.panel.config.core.section.themes.introduction')]]
       </span>
 
       <paper-card>
         <div class='card-content'>
-          <paper-dropdown-menu label='Theme' dynamic-align>
+          <paper-dropdown-menu label="[[localize('ui.panel.config.core.section.themes.header')]]" dynamic-align>
             <paper-listbox
               slot="dropdown-content"
               selected='{{selectedTheme}}'
@@ -34,7 +34,12 @@
 </dom-module>
 
 <script>
-class HaConfigSectionThemes extends window.hassMixins.EventsMixin(Polymer.Element) {
+/*
+ * @appliesMixin window.hassMixins.LocalizeMixin
+ * @appliesMixin window.hassMixins.EventsMixin
+ */
+class HaConfigSectionThemes extends
+  window.hassMixins.LocalizeMixin(window.hassMixins.EventsMixin(Polymer.Element)) {
   static get is() { return 'ha-config-section-themes'; }
 
   static get properties() {
diff --git a/panels/config/core/ha-config-section-translation.html b/panels/config/core/ha-config-section-translation.html
index 899a6e2484..869df8b608 100644
--- a/panels/config/core/ha-config-section-translation.html
+++ b/panels/config/core/ha-config-section-translation.html
@@ -10,14 +10,14 @@
 <dom-module id="ha-config-section-translation">
   <template>
     <ha-config-section is-wide='[[isWide]]'>
-      <span slot='header'>Choose a Language</span>
+      <span slot='header'>[[localize('ui.panel.config.core.section.translation.header')]]</span>
       <span slot='introduction'>
-        Choose a language for the Home Assistant interface on this device.
+        [[localize('ui.panel.config.core.section.translation.introduction')]]
       </span>
 
       <paper-card>
         <div class='card-content'>
-          <paper-dropdown-menu label="Language" dynamic-align>
+          <paper-dropdown-menu label="[[localize('ui.panel.config.core.section.translation.language')]]" dynamic-align>
             <paper-listbox slot="dropdown-content" on-selected-item-changed="handleLanguageSelect" attr-for-selected="language-tag" selected="[[language]]">
               <template is='dom-repeat' items='[[languages]]'>
                 <paper-item language-tag="[[item.tag]]">[[item.nativeName]]</paper-item>
diff --git a/panels/config/customize/ha-config-customize.html b/panels/config/customize/ha-config-customize.html
index 53d51658a3..686fd7885c 100644
--- a/panels/config/customize/ha-config-customize.html
+++ b/panels/config/customize/ha-config-customize.html
@@ -6,6 +6,7 @@
 
 <link rel="import" href="../../../src/util/hass-util.html">
 <link rel="import" href="../../../src/resources/ha-style.html">
+<link rel='import' href='../../../src/util/hass-mixins.html'>
 
 <link rel="import" href="./ha-form-customize.html">
 <link rel="import" href="../ha-config-section.html">
@@ -23,7 +24,7 @@
             icon='mdi:arrow-left'
             on-tap='_backTapped'
           ></paper-icon-button>
-          <div main-title>Customization</div>
+          <div main-title>[[localize('ui.panel.config.customize.caption')]]</div>
         </app-toolbar>
       </app-header>
 
@@ -47,7 +48,10 @@
 </dom-module>
 
 <script>
-class HaConfigCustomize extends Polymer.Element {
+/*
+ * @appliesMixin window.hassMixins.LocalizeMixin
+ */
+class HaConfigCustomize extends window.hassMixins.LocalizeMixin(Polymer.Element) {
   static get is() { return 'ha-config-customize'; }
 
   static get properties() {
diff --git a/panels/config/dashboard/ha-config-dashboard.html b/panels/config/dashboard/ha-config-dashboard.html
index 255d9e7900..5fe91b281b 100644
--- a/panels/config/dashboard/ha-config-dashboard.html
+++ b/panels/config/dashboard/ha-config-dashboard.html
@@ -4,11 +4,13 @@
 <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/util/hass-mixins.html'>
 <link rel="import" href="../ha-config-section.html">
 
 <link rel="import" href="./ha-config-navigation.html">
 <link rel="import" href="./ha-config-cloud-menu.html">
 
+
 <dom-module id="ha-config-dashboard">
   <template>
     <style include="iron-flex ha-style">
@@ -21,7 +23,7 @@
       <app-header slot="header" fixed>
         <app-toolbar>
           <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
-          <div main-title>Configuration</div>
+          <div main-title>[[localize('panel.configuration')]]</div>
         </app-toolbar>
       </app-header>
 
@@ -29,10 +31,8 @@
         <ha-config-section
           is-wide='[[isWide]]'
         >
-          <span slot='header'>Configure Home Assistant</span>
-          <span slot='introduction'>
-            Here it is possible to configure your components and Home Assistant. Not everything is possible to configure from the UI yet, but we're working on it.
-          </span>
+          <span slot='header'>[[localize('ui.panel.config.header')]]</span>
+          <span slot='introduction'>[[localize('ui.panel.config.introduction')]]</span>
 
           <template is='dom-if' if='[[computeIsCloudLoaded(hass)]]'>
             <ha-config-cloud-menu
@@ -51,7 +51,10 @@
 </dom-module>
 
 <script>
-class HaConfigDashboard extends Polymer.Element {
+/*
+ * @appliesMixin window.hassMixins.LocalizeMixin
+ */
+class HaConfigDashboard extends window.hassMixins.LocalizeMixin(Polymer.Element) {
   static get is() { return 'ha-config-dashboard'; }
 
   static get properties() {
diff --git a/panels/config/dashboard/ha-config-navigation.html b/panels/config/dashboard/ha-config-navigation.html
index 6b4f38adb0..54a05e00bd 100644
--- a/panels/config/dashboard/ha-config-navigation.html
+++ b/panels/config/dashboard/ha-config-navigation.html
@@ -21,8 +21,8 @@
         <template is='dom-if' if='[[_computeLoaded(hass, item)]]'>
           <paper-item on-tap='_navigate'>
             <paper-item-body two-line>
-              [[_computeCaption(item)]]
-              <div secondary>[[_computeDescription(item)]]</div>
+              [[_computeCaption(item, localize)]]
+              <div secondary>[[_computeDescription(item, localize)]]</div>
             </paper-item-body>
             <iron-icon icon='mdi:chevron-right'></iron-icon>
           </paper-item>
@@ -33,67 +33,56 @@
 </dom-module>
 
 <script>
-class HaConfigNavigation extends window.hassMixins.EventsMixin(Polymer.Element) {
-  static get is() { return 'ha-config-navigation'; }
+{
+  const CORE_PAGES = [
+    'core',
+    'customize',
+  ];
+  /*
+   * @appliesMixin window.hassMixins.LocalizeMixin
+   * @appliesMixin window.hassMixins.EventsMixin
+   */
+  class HaConfigNavigation extends
+    window.hassMixins.LocalizeMixin(window.hassMixins.EventsMixin(Polymer.Element)) {
+    static get is() { return 'ha-config-navigation'; }
 
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-      },
+    static get properties() {
+      return {
+        hass: {
+          type: Object,
+        },
 
-      pages: {
-        type: Array,
-        value: [
-          {
-            domain: 'core',
-            caption: 'General',
-            description: 'Validate your configuration file and control the server.',
-            loaded: true,
-          },
-          {
-            domain: 'customize',
-            caption: 'Customization',
-            description: 'Customize your entities.',
-            loaded: true,
-          },
-          {
-            domain: 'automation',
-            caption: 'Automation',
-            description: 'Create and edit automations.',
-          },
-          {
-            domain: 'script',
-            caption: 'Script',
-            description: 'Create and edit scripts.',
-          },
-          {
-            domain: 'zwave',
-            caption: 'Z-Wave',
-            description: 'Manage your Z-Wave network.',
-          }
-        ],
-      }
-    };
+        pages: {
+          type: Array,
+          value: [
+            'core',
+            'customize',
+            'automation',
+            'script',
+            'zwave',
+          ],
+        }
+      };
+    }
+
+    _computeLoaded(hass, page) {
+      return CORE_PAGES.includes(page) || window.hassUtil.isComponentLoaded(hass, page);
+    }
+
+    _computeCaption(page, localize) {
+      return localize(`ui.panel.config.${page}.caption`);
+    }
+
+    _computeDescription(page, localize) {
+      return localize(`ui.panel.config.${page}.description`);
+    }
+
+    _navigate(ev) {
+      history.pushState(null, null, '/config/' + ev.model.item);
+      this.fire('location-changed');
+    }
   }
 
-  _computeLoaded(hass, component) {
-    return component.loaded || window.hassUtil.isComponentLoaded(hass, component.domain);
-  }
-
-  _computeCaption(component) {
-    return component.caption;
-  }
-
-  _computeDescription(component) {
-    return component.description;
-  }
-
-  _navigate(ev) {
-    history.pushState(null, null, '/config/' + ev.model.item.domain);
-    this.fire('location-changed');
-  }
+  customElements.define(HaConfigNavigation.is, HaConfigNavigation);
 }
-
-customElements.define(HaConfigNavigation.is, HaConfigNavigation);
 </script>
diff --git a/panels/config/script/ha-config-script.html b/panels/config/script/ha-config-script.html
index 86b6ca1d85..3236c742dd 100644
--- a/panels/config/script/ha-config-script.html
+++ b/panels/config/script/ha-config-script.html
@@ -26,6 +26,7 @@
 
     <template is='dom-if' if='[[!showEditor]]'>
       <ha-script-picker
+        hass='[[hass]]'
         narrow='[[narrow]]'
         show-menu='[[showMenu]]'
         scripts='[[scripts]]'
diff --git a/panels/config/script/ha-script-picker.html b/panels/config/script/ha-script-picker.html
index 7d3b5927e9..9a04d3e5ac 100644
--- a/panels/config/script/ha-script-picker.html
+++ b/panels/config/script/ha-script-picker.html
@@ -47,7 +47,7 @@
             icon='mdi:arrow-left'
             on-tap='_backTapped'
           ></paper-icon-button>
-          <div main-title>Scripts</div>
+          <div main-title>[[localize('ui.panel.config.script.caption')]]</div>
         </app-toolbar>
       </app-header>
 
@@ -90,7 +90,12 @@
 </dom-module>
 
 <script>
-class HaScriptPicker extends window.hassMixins.EventsMixin(Polymer.Element) {
+/*
+ * @appliesMixin window.hassMixins.LocalizeMixin
+ * @appliesMixin window.hassMixins.EventsMixin
+ */
+class HaScriptPicker extends
+  window.hassMixins.LocalizeMixin(window.hassMixins.EventsMixin(Polymer.Element)) {
   static get is() { return 'ha-script-picker'; }
 
   static get properties() {
diff --git a/panels/config/zwave/ha-config-zwave.html b/panels/config/zwave/ha-config-zwave.html
index 31dbe17075..0f7a2ed8ab 100644
--- a/panels/config/zwave/ha-config-zwave.html
+++ b/panels/config/zwave/ha-config-zwave.html
@@ -13,6 +13,7 @@
 <link rel="import" href="../../../src/components/ha-service-description.html">
 <link rel='import' href='../../../src/layouts/ha-app-layout.html'>
 <link rel="import" href="../../../src/resources/ha-style.html">
+<link rel='import' href='../../../src/util/hass-mixins.html'>
 
 <link rel="import" href="../ha-config-section.html">
 <link rel="import" href="../ha-form-style.html">
@@ -78,7 +79,7 @@
             icon='mdi:arrow-left'
             on-tap='_backTapped'
           ></paper-icon-button>
-          <div main-title>Z-Wave Manager</div>
+          <div main-title>[[localize('ui.panel.config.zwave.caption')]]</div>
         </app-toolbar>
       </app-header>
 
@@ -344,7 +345,10 @@
 </dom-module>
 
 <script>
-class HaConfigZwave extends Polymer.Element {
+/*
+ * @appliesMixin window.hassMixins.LocalizeMixin
+ */
+class HaConfigZwave extends window.hassMixins.LocalizeMixin(Polymer.Element) {
   static get is() { return 'ha-config-zwave'; }
 
   static get properties() {
diff --git a/src/translations/en.json b/src/translations/en.json
index 6f95abc74c..4bca5fc177 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -313,6 +313,78 @@
       "log_out": "Log out"
     },
     "panel": {
+      "config": {
+        "header": "Configure Home Assistant",
+        "introduction": "Here it is possible to configure your components and Home Assistant. Not everything is possible to configure from the UI yet, but we're working on it.",
+        "core": {
+          "caption": "General",
+          "description": "Validate your configuration file and control the server",
+          "section": {
+            "core": {
+              "header": "Configuration and server control",
+              "introduction": "Changing your configuration can be a tiresome process. We know. This section will try to make your life a little bit easier.",
+              "validation": {
+                "heading": "Configuration validation",
+                "introduction": "Validate your configuration if you recently made some changes to your configuration and want to make sure that it is all valid",
+                "check_config": "Check config",
+                "valid": "Configuration valid!",
+                "invalid": "Configuration invalid"
+              },
+              "reloading": {
+                "heading": "Configuration reloading",
+                "introduction": "Some parts of Home Assistant can reload without requiring a restart. Hitting reload will unload their current configuration and load the new one.",
+                "core": "Reload core",
+                "group": "Reload groups",
+                "automation": "Reload automations",
+                "script": "Reload scripts"
+              },
+              "server_management": {
+                "heading": "Server management",
+                "introduction": "Control your Home Assistant server… from Home Assistant.",
+                "restart": "Restart",
+                "stop": "Stop"
+              }
+            },
+            "push_notifications": {
+              "header": "Configure push notifications",
+              "introduction": "Enable this setting to receive push notifications on this device",
+              "push_notifications": "Push notifications"
+            },
+            "translation": {
+              "header": "Choose a language",
+              "introduction": "Choose a language for the Home Assistant interface on this device",
+              "language": "Language"
+            },
+            "themes": {
+              "header": "Set a theme",
+              "introduction": "Choose 'Backend-selected' to use whatever theme the backend chooses or pick a theme for this device",
+              "theme": "Theme"
+            },
+            "hassbian": {
+              "header": "Bring Hassbian to the next level",
+              "introduction": "Discover exciting add-ons to enhance your Home Assistant installation. Add an MQTT server or control a connected TV via HDMI-CEC.",
+              "learn_more": "Learn more",
+              "install": "Install"
+            }
+          }
+        },
+        "customize": {
+          "caption": "Customization",
+          "description": "Customize your entities"
+        },
+        "automation": {
+          "caption": "Automation",
+          "description": "Create and edit automations"
+        },
+        "script": {
+          "caption": "Script",
+          "description": "Create and edit scripts"
+        },
+        "zwave": {
+          "caption": "Z-Wave",
+          "description": "Manage your Z-Wave network"
+        }
+      },
       "history": {
         "showing_entries": "Showing entries for",
         "period": "Period"