Translated developer tools services page (#4049)

* Translated developer tools services page

* Changed translation parameter from error to data

src/panels/developer-tools/service/developer-tools-service.js

@@ -10,9 +10,13 @@ import "../../../components/ha-code-editor";
 import "../../../components/ha-service-picker";
 import "../../../resources/ha-style";
 import "../../../util/app-localstorage-document";
+import LocalizeMixin from "../../../mixins/localize-mixin";
 
 const ERROR_SENTINEL = {};
-class HaPanelDevService extends PolymerElement {
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HaPanelDevService extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
       <style include="ha-style">
@@ -94,8 +98,7 @@ class HaPanelDevService extends PolymerElement {
 
       <div class="content">
         <p>
-          The service dev tool allows you to call any available service in Home
+          [[localize('ui.panel.developer-tools.tabs.services.description')]]
-          Assistant.
         </p>
 
         <div class="ha-form">
@@ -113,7 +116,7 @@ class HaPanelDevService extends PolymerElement {
               allow-custom-entity
             ></ha-entity-picker>
           </template>
-          <p>Service Data (YAML, optional)</p>
+          <p>[[localize('ui.panel.developer-tools.tabs.services.data')]]</p>
           <ha-code-editor
             mode="yaml"
             value="[[serviceData]]"
@@ -121,30 +124,42 @@ class HaPanelDevService extends PolymerElement {
             on-value-changed="_yamlChanged"
           ></ha-code-editor>
           <mwc-button on-click="_callService" raised disabled="[[!validJSON]]">
-            Call Service
+            [[localize('ui.panel.developer-tools.tabs.services.call_service')]]
           </mwc-button>
         </div>
 
         <template is="dom-if" if="[[!domainService]]">
-          <h1>Select a service to see the description</h1>
+          <h1>
+            [[localize('ui.panel.developer-tools.tabs.services.select_service')]]
+          </h1>
         </template>
 
         <template is="dom-if" if="[[domainService]]">
           <template is="dom-if" if="[[!_description]]">
-            <h1>No description is available</h1>
+            <h1>
+              [[localize('ui.panel.developer-tools.tabs.services.no_description')]]
+            </h1>
           </template>
           <template is="dom-if" if="[[_description]]">
             <h3>[[_description]]</h3>
 
             <table class="attributes">
               <tr>
-                <th>Parameter</th>
+                <th>
-                <th>Description</th>
+                  [[localize('ui.panel.developer-tools.tabs.services.column_parameter')]]
-                <th>Example</th>
+                </th>
+                <th>
+                  [[localize('ui.panel.developer-tools.tabs.services.column_description')]]
+                </th>
+                <th>
+                  [[localize('ui.panel.developer-tools.tabs.services.column_example')]]
+                </th>
               </tr>
               <template is="dom-if" if="[[!_attributes.length]]">
                 <tr>
-                  <td colspan="3">This service takes no parameters.</td>
+                  <td colspan="3">
+                    [[localize('ui.panel.developer-tools.tabs.services.no_parameters')]]
+                  </td>
                 </tr>
               </template>
               <template is="dom-repeat" items="[[_attributes]]" as="attribute">
@@ -158,7 +173,7 @@ class HaPanelDevService extends PolymerElement {
 
             <template is="dom-if" if="[[_attributes.length]]">
               <mwc-button on-click="_fillExampleData">
-                Fill Example Data
+                [[localize('ui.panel.developer-tools.tabs.services.fill_example_data')]]
               </mwc-button>
             </template>
           </template>
@@ -276,7 +291,13 @@ class HaPanelDevService extends PolymerElement {
   _callService() {
     if (this.parsedJSON === ERROR_SENTINEL) {
       // eslint-disable-next-line
-      alert(`Error parsing YAML: ${this.serviceData}`);
+      alert(
+        this.hass.localize(
+          "ui.panel.developer-tools.tabs.services.alert_parsing_yaml",
+          "data",
+          this.serviceData
+        )
+      );
       return;
     }
 

src/translations/en.json

@@ -1838,7 +1838,18 @@
             "message_received": "Message {id} received on {topic} at {time}:"
           },
           "services": {
-            "title": "Services"
+            "title": "Services",
+            "description": "The service dev tool allows you to call any available service in Home Assistant.",
+            "data": "Service Data (YAML, optional)",
+            "call_service": "Call Service",
+            "select_service": "Select a service to see the description",
+            "no_description": "No description is available",
+            "no_parameters": "This service takes no parameters.",
+            "column_parameter": "Parameter",
+            "column_description": "Description",
+            "column_example": "Example",
+            "fill_example_data": "Fill Example Data",
+            "alert_parsing_yaml": "Error parsing YAML: {data}"
           },
           "states": {
             "title": "States",