Add support for multiple separate mailboxes (#1660)

src/panels/mailbox/ha-dialog-show-audio-message.js

@@ -52,12 +52,11 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) {
         <template is="dom-if" if="[[_loading]]">
           <paper-spinner active></paper-spinner>
         </template>
-        <template is="dom-if" if="[[!_loading]]">
         <paper-icon-button
+          id='delicon'
           on-click='openDeleteDialog'
           icon='hass:delete'
         ></paper-icon-button>
-        </template>
         </div>
       </h2>
       <div id="transcribe"></div>
@@ -94,15 +93,17 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) {
 
   showDialog({ hass, message }) {
     this.hass = hass;
-    this._loading = true;
     this._errorMsg = null;
     this._currentMessage = message;
     this._opened = true;
     this.$.transcribe.innerText = message.message;
     const platform = message.platform;
     const mp3 = this.$.mp3;
+    if (platform.has_media) {
+      mp3.style.display = '';
+      this._showLoading(true);
       mp3.src = null;
-    const url = `/api/mailbox/media/${platform}/${message.sha}`;
+      const url = `/api/mailbox/media/${platform.name}/${message.sha}`;
       this.hass.fetchWithAuth(url)
         .then((response) => {
           if (response.ok) {
@@ -114,14 +115,18 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) {
           });
         })
         .then((blob) => {
-        this._loading = false;
+          this._showLoading(false);
           mp3.src = window.URL.createObjectURL(blob);
           mp3.play();
         })
         .catch((err) => {
-        this._loading = false;
+          this._showLoading(false);
           this._errorMsg = `Error loading audio: ${err.statusText}`;
         });
+    } else {
+      mp3.style.display = 'none';
+      this._showLoading(false);
+    }
   }
 
   openDeleteDialog() {
@@ -132,7 +137,7 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) {
 
   deleteSelected() {
     const msg = this._currentMessage;
-    this.hass.callApi('DELETE', `mailbox/delete/${msg.platform}/${msg.sha}`);
+    this.hass.callApi('DELETE', `mailbox/delete/${msg.platform.name}/${msg.sha}`);
     this._dialogDone();
   }
 
@@ -154,5 +159,17 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) {
       this._dialogDone();
     }
   }
+
+  _showLoading(displayed) {
+    const delicon = this.$.delicon;
+    if (displayed) {
+      this._loading = true;
+      delicon.style.display = 'none';
+    } else {
+      const platform = this._currentMessage.platform;
+      this._loading = false;
+      delicon.style.display = platform.can_delete ? '' : 'none';
+    }
+  }
 }
 customElements.define('ha-dialog-show-audio-message', HaDialogShowAudioMessage);

src/panels/mailbox/ha-panel-mailbox.js

@@ -6,6 +6,8 @@ import '@polymer/paper-card/paper-card.js';
 import '@polymer/paper-input/paper-textarea.js';
 import '@polymer/paper-item/paper-item-body.js';
 import '@polymer/paper-item/paper-item.js';
+import '@polymer/paper-tabs/paper-tab.js';
+import '@polymer/paper-tabs/paper-tabs.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
@@ -81,6 +83,19 @@ class HaPanelMailbox extends LocalizeMixin(PolymerElement) {
           <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
           <div main-title>[[localize('panel.mailbox')]]</div>
         </app-toolbar>
+        <div sticky hidden$='[[areTabsHidden(platforms)]]'>
+          <paper-tabs
+            scrollable
+            selected='[[_currentPlatform]]'
+            on-iron-activate='handlePlatformSelected'
+          >
+            <template is='dom-repeat' items='[[platforms]]'>
+              <paper-tab data-entity='[[item]]' >
+                [[getPlatformName(item)]]
+              </paper-tab>
+            </template>
+          </paper-tabs>
+        </div>
       </app-header>
       <div class='content'>
         <paper-card>
@@ -131,6 +146,11 @@ class HaPanelMailbox extends LocalizeMixin(PolymerElement) {
       _messages: {
         type: Array,
       },
+
+      _currentPlatform: {
+        type: Number,
+        value: 0,
+      },
     };
   }
 
@@ -175,8 +195,8 @@ class HaPanelMailbox extends LocalizeMixin(PolymerElement) {
   }
 
   getMessages() {
-    const items = this.platforms.map(function (platform) {
+    const platform = this.platforms[this._currentPlatform];
-      return this.hass.callApi('GET', `mailbox/messages/${platform}`).then(function (values) {
+    return this.hass.callApi('GET', `mailbox/messages/${platform.name}`).then(function (values) {
       const platformItems = [];
       const arrayLength = values.length;
       for (let i = 0; i < arrayLength; i++) {
@@ -190,11 +210,7 @@ class HaPanelMailbox extends LocalizeMixin(PolymerElement) {
           platform: platform
         });
       }
-        return platformItems;
+      return platformItems.sort(function (a, b) {
-      });
-    }.bind(this));
-    return Promise.all(items).then(function (platformItems) {
-      return [].concat(...platformItems).sort(function (a, b) {
         return new Date(b.timestamp) - new Date(a.timestamp);
       });
     });
@@ -203,6 +219,24 @@ class HaPanelMailbox extends LocalizeMixin(PolymerElement) {
   computePlatforms() {
     return this.hass.callApi('GET', 'mailbox/platforms');
   }
+
+  handlePlatformSelected(ev) {
+    const newPlatform = ev.detail.selected;
+    if (newPlatform !== this._currentPlatform) {
+      this._currentPlatform = newPlatform;
+      this.hassChanged();
+    }
+  }
+
+  areTabsHidden(platforms) {
+    return !platforms || platforms.length < 2;
+  }
+
+  getPlatformName(item) {
+    const entity = `mailbox.${item.name}`;
+    const stateObj = this.hass.states[entity.toLowerCase()];
+    return stateObj.attributes.friendly_name;
+  }
 }
 
 customElements.define('ha-panel-mailbox', HaPanelMailbox);