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
-            on-click='openDeleteDialog'
-            icon='hass:delete'
-          ></paper-icon-button>
-        </template>
+        <paper-icon-button
+          id='delicon'
+          on-click='openDeleteDialog'
+          icon='hass:delete'
+        ></paper-icon-button>
         </div>
       </h2>
       <div id="transcribe"></div>
@@ -94,34 +93,40 @@ 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;
-    mp3.src = null;
-    const url = `/api/mailbox/media/${platform}/${message.sha}`;
-    this.hass.fetchWithAuth(url)
-      .then((response) => {
-        if (response.ok) {
-          return response.blob();
-        }
-        return Promise.reject({
-          status: response.status,
-          statusText: response.statusText
+    if (platform.has_media) {
+      mp3.style.display = '';
+      this._showLoading(true);
+      mp3.src = null;
+      const url = `/api/mailbox/media/${platform.name}/${message.sha}`;
+      this.hass.fetchWithAuth(url)
+        .then((response) => {
+          if (response.ok) {
+            return response.blob();
+          }
+          return Promise.reject({
+            status: response.status,
+            statusText: response.statusText
+          });
+        })
+        .then((blob) => {
+          this._showLoading(false);
+          mp3.src = window.URL.createObjectURL(blob);
+          mp3.play();
+        })
+        .catch((err) => {
+          this._showLoading(false);
+          this._errorMsg = `Error loading audio: ${err.statusText}`;
         });
-      })
-      .then((blob) => {
-        this._loading = false;
-        mp3.src = window.URL.createObjectURL(blob);
-        mp3.play();
-      })
-      .catch((err) => {
-        this._loading = 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,26 +195,22 @@ class HaPanelMailbox extends LocalizeMixin(PolymerElement) {
   }
 
   getMessages() {
-    const items = this.platforms.map(function (platform) {
-      return this.hass.callApi('GET', `mailbox/messages/${platform}`).then(function (values) {
-        const platformItems = [];
-        const arrayLength = values.length;
-        for (let i = 0; i < arrayLength; i++) {
-          const datetime = formatDateTime(new Date(values[i].info.origtime * 1000));
-          platformItems.push({
-            timestamp: datetime,
-            caller: values[i].info.callerid,
-            message: values[i].text,
-            sha: values[i].sha,
-            duration: values[i].info.duration,
-            platform: platform
-          });
-        }
-        return platformItems;
-      });
-    }.bind(this));
-    return Promise.all(items).then(function (platformItems) {
-      return [].concat(...platformItems).sort(function (a, b) {
+    const platform = this.platforms[this._currentPlatform];
+    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++) {
+        const datetime = formatDateTime(new Date(values[i].info.origtime * 1000));
+        platformItems.push({
+          timestamp: datetime,
+          caller: values[i].info.callerid,
+          message: values[i].text,
+          sha: values[i].sha,
+          duration: values[i].info.duration,
+          platform: platform
+        });
+      }
+      return 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);