Fix non-working zwave log andriod PWA (#1714)

* Fix non-working andriod PWA

* Forgot clearing dialog setInterval

* Correctly identify pwa or browser interval clearing

* Move isPwa to common

* Stab at making imorted dialog

* Redone refresh

* Remove unused property

src/common/config/is_pwa.js

@@ -0,0 +1,4 @@
+/** Return if the displaymode is in standalone mode (PWA). */
+export default function isPwa() {
+  return (window.matchMedia('(display-mode: standalone)').matches);
+}

src/panels/config/zwave/zwave-log-dialog.js

@@ -0,0 +1,78 @@
+import '@polymer/paper-dialog-scrollable/paper-dialog-scrollable.js';
+import '@polymer/paper-dialog/paper-dialog.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+import '../../../resources/ha-style.js';
+
+import EventsMixin from '../../../mixins/events-mixin.js';
+
+class ZwaveLogDialog extends EventsMixin(PolymerElement) {
+  static get template() {
+    return html`
+    <style include="ha-style-dialog">
+    </style>
+      <paper-dialog id="pwaDialog" with-backdrop="" opened="{{_opened}}">
+        <h2>OpenZwave internal logfile</h2>
+        <paper-dialog-scrollable>
+          <pre>[[_ozwLog]]</pre>
+        <paper-dialog-scrollable>
+      </paper-dialog>
+      `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _ozwLog: String,
+
+      _dialogClosedCallback: Function,
+
+      _opened: {
+        type: Boolean,
+        value: false,
+      },
+
+      _intervalId: String,
+
+      _numLogLines: {
+        type: Number
+      }
+    };
+  }
+
+  ready() {
+    super.ready();
+    this.addEventListener('iron-overlay-closed', ev => this._dialogClosed(ev));
+  }
+
+  showDialog({ _ozwLog, hass, _tail, _numLogLines, dialogClosedCallback }) {
+    this.hass = hass;
+    this._ozwLog = _ozwLog;
+    this._opened = true;
+    this._dialogClosedCallback = dialogClosedCallback;
+    this._numLogLines = _numLogLines;
+    setTimeout(() => this.$.pwaDialog.center(), 0);
+    if (_tail) {
+      this.setProperties({
+        _intervalId: setInterval(() => { this._refreshLog(); }, 1500) });
+    }
+  }
+
+  async _refreshLog() {
+    const info = await this.hass.callApi('GET', 'zwave/ozwlog?lines=' + this._numLogLines);
+    this.setProperties({ _ozwLog: info });
+  }
+
+  _dialogClosed(ev) {
+    if (ev.target.nodeName === 'ZWAVE-LOG-DIALOG') {
+      clearInterval(this._intervalId);
+      this._opened = false;
+      const closedEvent = true;
+      this._dialogClosedCallback({ closedEvent });
+      this._dialogClosedCallback = null;
+    }
+  }
+}
+
+customElements.define('zwave-log-dialog', ZwaveLogDialog);

src/panels/config/zwave/zwave-log.js

@@ -2,12 +2,18 @@ import '@polymer/paper-button/paper-button.js';
 import '@polymer/paper-card/paper-card.js';
 import '@polymer/paper-checkbox/paper-checkbox.js';
 import '@polymer/paper-input/paper-input.js';
+import '@polymer/paper-dialog/paper-dialog.js';
+import '@polymer/paper-dialog-scrollable/paper-dialog-scrollable.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+import EventsMixin from '../../../mixins/events-mixin.js';
+import isPwa from '../../../common/config/is_pwa.js';
 
 import '../ha-config-section.js';
 
-class OzwLog extends PolymerElement {
+let registeredDialog = false;
+
+class OzwLog extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <style include="iron-flex ha-style">
@@ -32,7 +38,7 @@ class OzwLog extends PolymerElement {
       <span slot="header">OZW Log</span>
       <paper-card>
         <div class="device-picker">
-          <paper-input label="Number of last log lines." type="number" min="0" max="1000" step="10" value="{{_numLogLines}}">
+          <paper-input label="Number of last log lines." type="number" min="0" max="1000" step="10" value="{{numLogLines}}">
           </paper-input>
         </div>
         <div class="card-actions">
@@ -59,28 +65,37 @@ class OzwLog extends PolymerElement {
         value: true
       },
 
-      _numLogLines: {
+      numLogLines: {
         type: Number,
         value: 0,
         observer: '_isCompleteLog'
       },
 
       _intervalId: String,
+
+      tail: Boolean,
+
     };
   }
 
   async _tailLog() {
+    this.setProperties({ tail: true });
     const ozwWindow = await this._openLogWindow();
-    this.setProperties({
-      _intervalId: setInterval(() => { this._refreshLog(ozwWindow); }, 1500) });
+    if (!isPwa()) {
+      this.setProperties({
+        _intervalId: setInterval(() => { this._refreshLog(ozwWindow); }, 1500) });
+    }
   }
 
   async _openLogWindow() {
-    const info = await this.hass.callApi('GET', 'zwave/ozwlog?lines=' + this._numLogLines);
+    const info = await this.hass.callApi('GET', 'zwave/ozwlog?lines=' + this.numLogLines);
     this.setProperties({ _ozwLogs: info });
-    const ozwWindow = window.open('', 'OpenZwave internal log', 'toolbar');
-    ozwWindow.document.title = 'OpenZwave internal logfile';
-    ozwWindow.document.body.innerText = this._ozwLogs;
+    if (isPwa()) {
+      this._showOzwlogDialog();
+      return -1;
+    }
+    const ozwWindow = open('', 'ozwLog', 'toolbar');
+    ozwWindow.document.body.innerHTML = `<pre>${this._ozwLogs}</pre>`;
     return ozwWindow;
   }
 
@@ -89,16 +104,44 @@ class OzwLog extends PolymerElement {
       clearInterval(this._intervalId);
       this.setProperties({ _intervalId: null });
     } else {
-      const info = await this.hass.callApi('GET', 'zwave/ozwlog?lines=' + this._numLogLines);
+      const info = await this.hass.callApi('GET', 'zwave/ozwlog?lines=' + this.numLogLines);
       this.setProperties({ _ozwLogs: info });
-      ozwWindow.document.body.innerText = this._ozwLogs;
+      ozwWindow.document.body.innerHTML = `<pre>${this._ozwLogs}</pre>`;
     }
   }
 
   _isCompleteLog() {
-    if (this._numLogLines !== '0') {
+    if (this.numLogLines !== '0') {
       this.setProperties({ _completeLog: false });
     } else { this.setProperties({ _completeLog: true }); }
   }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (!registeredDialog) {
+      registeredDialog = true;
+      this.fire('register-dialog', {
+        dialogShowEvent: 'show-ozwlog-dialog',
+        dialogTag: 'zwave-log-dialog',
+        dialogImport: () => import('./zwave-log-dialog.js'),
+      });
+    }
+  }
+
+  _showOzwlogDialog() {
+    this.fire('show-ozwlog-dialog', {
+      hass: this.hass,
+      _numLogLines: this.numLogLines,
+      _ozwLog: this._ozwLogs,
+      _tail: this.tail,
+      dialogClosedCallback: () => this._dialogClosed()
+    });
+  }
+
+  _dialogClosed() {
+    this.setProperties({
+      tail: false
+    });
+  }
 }
 customElements.define('ozw-log', OzwLog);