Translated developer tools events page (#4033)

* Translated developer tools events page

* Implemented translations (alert on empty event type, notification on firing an event), Removed unnecessary translation key-value pairs

* Added falsely removed key-value pairs

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

@@ -11,12 +11,14 @@ import "../../../resources/ha-style";
 import "./events-list";
 import "./event-subscribe-card";
 import { EventsMixin } from "../../../mixins/events-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
 
 const ERROR_SENTINEL = {};
 /*
  * @appliesMixin EventsMixin
+ * @appliesMixin LocalizeMixin
  */
-class HaPanelDevEvent extends EventsMixin(PolymerElement) {
+class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
   static get template() {
     return html`
       <style include="ha-style iron-flex iron-positioning"></style>
@@ -54,21 +56,26 @@ class HaPanelDevEvent extends EventsMixin(PolymerElement) {
       <div class$="[[computeFormClasses(narrow)]]">
         <div class="flex">
           <p>
-            Fire an event on the event bus.
+            [[localize( 'ui.panel.developer-tools.tabs.events.description' )]]
             <a
               href="https://www.home-assistant.io/docs/configuration/events/"
               target="_blank"
-              >Events Documentation.</a
+              >[[localize( 'ui.panel.developer-tools.tabs.events.documentation'
+              )]]</a
             >
           </p>
           <div class="ha-form">
             <paper-input
-              label="Event Type"
+              label="[[localize(
+                'ui.panel.developer-tools.tabs.events.type'
+              )]]"
               autofocus
               required
               value="{{eventType}}"
             ></paper-input>
-            <p>Event Data (YAML, optional)</p>
+            <p>
+              [[localize( 'ui.panel.developer-tools.tabs.events.data' )]]
+            </p>
             <ha-code-editor
               mode="yaml"
               value="[[eventData]]"
@@ -76,13 +83,17 @@ class HaPanelDevEvent extends EventsMixin(PolymerElement) {
               on-value-changed="_yamlChanged"
             ></ha-code-editor>
             <mwc-button on-click="fireEvent" raised disabled="[[!validJSON]]"
-              >Fire Event</mwc-button
+              >[[localize( 'ui.panel.developer-tools.tabs.events.fire_event'
+              )]]</mwc-button
             >
           </div>
         </div>
 
         <div>
-          <div class="header">Available Events</div>
+          <div class="header">
+            [[localize( 'ui.panel.developer-tools.tabs.events.available_events'
+            )]]
+          </div>
           <events-list
             on-event-selected="eventSelected"
             hass="[[hass]]"
@@ -143,13 +154,21 @@ class HaPanelDevEvent extends EventsMixin(PolymerElement) {
 
   fireEvent() {
     if (!this.eventType) {
-      alert("Event type is a mandatory field");
+      alert(
+        this.hass.localize(
+          "ui.panel.developer-tools.tabs.events.alert_event_type"
+        )
+      );
       return;
     }
     this.hass.callApi("POST", "events/" + this.eventType, this.parsedJSON).then(
       function() {
         this.fire("hass-notification", {
-          message: "Event " + this.eventType + " successful fired!",
+          message: this.hass.localize(
+            "ui.panel.developer-tools.tabs.events.notification_event_fired",
+            "type",
+            this.eventType
+          ),
         });
       }.bind(this)
     );

src/panels/developer-tools/event/event-subscribe-card.ts

@@ -37,12 +37,20 @@ class EventSubscribeCard extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-card header="Listen to events">
+      <ha-card
+        header=${this.hass!.localize(
+          "ui.panel.developer-tools.tabs.events.listen_to_events"
+        )}
+      >
         <form>
           <paper-input
             .label=${this._subscribed
-              ? "Listening to"
+              ? this.hass!.localize(
-              : "Event to subscribe to"}
+                  "ui.panel.developer-tools.tabs.events.listening_to"
+                )
+              : this.hass!.localize(
+                  "ui.panel.developer-tools.tabs.events.subscribe_to"
+                )}
             .disabled=${this._subscribed !== undefined}
             .value=${this._eventType}
             @value-changed=${this._valueChanged}
@@ -52,14 +60,24 @@ class EventSubscribeCard extends LitElement {
             @click=${this._handleSubmit}
             type="submit"
           >
-            ${this._subscribed ? "Stop listening" : "Start listening"}
+            ${this._subscribed
+              ? this.hass!.localize(
+                  "ui.panel.developer-tools.tabs.events.stop_listening"
+                )
+              : this.hass!.localize(
+                  "ui.panel.developer-tools.tabs.events.start_listening"
+                )}
           </mwc-button>
         </form>
         <div class="events">
           ${this._events.map(
             (ev) => html`
               <div class="event">
-                Event ${ev.id} fired
+                ${this.hass!.localize(
+                  "ui.panel.developer-tools.tabs.events.event_fired",
+                  "name",
+                  ev.id
+                )}
                 ${format_time(
                   new Date(ev.event.time_fired),
                   this.hass!.language

src/panels/developer-tools/event/events-list.js

@@ -2,11 +2,13 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import { EventsMixin } from "../../../mixins/events-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
 
 /*
  * @appliesMixin EventsMixin
+ * @appliesMixin LocalizeMixin
  */
-class EventsList extends EventsMixin(PolymerElement) {
+class EventsList extends EventsMixin(LocalizeMixin(PolymerElement)) {
   static get template() {
     return html`
       <style>
@@ -29,8 +31,11 @@ class EventsList extends EventsMixin(PolymerElement) {
         <template is="dom-repeat" items="[[events]]" as="event">
           <li>
             <a href="#" on-click="eventSelected">{{event.event}}</a>
-            <span> (</span><span>{{event.listener_count}}</span
+            <span>
-            ><span> listeners)</span>
+              [[localize(
+              "ui.panel.developer-tools.tabs.events.count_listeners", "count",
+              event.listener_count )]]</span
+            >
           </li>
         </template>
       </ul>

src/translations/en.json

@@ -1779,7 +1779,22 @@
             "title": "Logs"
           },
           "events": {
-            "title": "Events"
+            "title": "Events",
+            "description": "Fire an event on the event bus.",
+            "documentation": "Events Documentation.",
+            "type": "Event Type",
+            "data": "Event Data (YAML, optional)",
+            "fire_event": "Fire Event",
+            "event_fired": "Event {name} fired",
+            "available_events": "Available Events",
+            "count_listeners": " ({count}  listeners)",
+            "listen_to_events": "Listen to events",
+            "listening_to": "Listening to",
+            "subscribe_to": "Event to subscribe to",
+            "start_listening": "Start listening",
+            "stop_listening": "Stop listening",
+            "alert_event_type": "Event type is a mandatory field",
+            "notification_event_fired": "Event {type} successful fired!"
           },
           "mqtt": {
             "title": "MQTT"