@things-factory/notification 8.0.0-beta.9 → 8.0.0

package/client/viewparts/notification-setting-let.ts

@@ -0,0 +1,222 @@
+import '@material/web/icon/icon.js'
+import '@material/web/switch/switch.js'
+import '@operato/i18n/ox-i18n.js'
+import '@things-factory/setting-base'
+import './notification-sender'
+
+import Clipboard from 'clipboard'
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { notify, openPopup } from '@operato/layout'
+import { i18next, localize } from '@operato/i18n'
+
+import { getSubscriptionToken, isSupportingMessaging, subscribe, unsubscribe } from '../actions/notification-fcm'
+
+@customElement('notification-setting-let')
+export class NotificationSettingLet extends localize(i18next)(LitElement) {
+  static styles = [
+    css`
+      div[onoff] {
+        display: flex;
+        align-items: center;
+        border-bottom: var(--border-dim-color);
+        margin-bottom: var(--spacing-medium);
+        padding-bottom: var(--spacing-medium);
+      }
+
+      div[info] {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+      }
+
+      label {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+
+        font: var(--label-font);
+        color: var(--md-sys-color-on-surface);
+        text-transform: var(--label-text-transform);
+      }
+
+      [test] {
+        margin-left: auto;
+      }
+
+      input {
+        border: var(--border-dim-color);
+        border-radius: var(--border-radius);
+        margin: var(--input-margin);
+        padding: var(--input-padding);
+        font: var(--input-font);
+
+        flex: 1;
+      }
+
+      [button-in-field] {
+        --md-icon-size: 18px;
+        position: absolute;
+        top: 24px;
+        right: 4px;
+        width: 30px;
+        padding: 2px;
+        border-radius: var(--border-radius, 5px);
+        color: var(--md-sys-color-on-secondary, #fff);
+        background-color: var(--md-sys-color-secondary, #394e64);
+      }
+    `
+  ]
+
+  @property({ type: Object }) subscription?: any
+  @property({ type: Boolean }) supported?: boolean
+
+  clipboard: any
+
+  render() {
+    const supported = !!this.supported
+
+    return html`
+      <setting-let>
+        <ox-i18n slot="title" msgid="title.notification subscription"></ox-i18n>
+
+        ${supported
+          ? html`
+              <div slot="content" onoff>
+                <label>
+                  <md-switch
+                    label="allow message"
+                    ?selected=${!!this.subscription}
+                    @click=${e => this.onClickSwitch(e)}
+                  ></md-switch>
+                  ${String(i18next.t('label.allow push message'))}
+                </label>
+                <md-outlined-button test @click=${e => this.ontest()}
+                  >${String(i18next.t('button.push message test'))}</md-outlined-button
+                >
+              </div>
+
+              <div slot="content" info>
+                <label for="subscription-token"><ox-i18n msgid="label.subscription token"></ox-i18n></label>
+                <input
+                  id="subscription-token"
+                  type="text"
+                  name="subscription-token"
+                  .value=${this.subscription || ''}
+                  readonly
+                />
+                <md-icon button-in-field clipboard-copy @click=${e => e.preventDefault()}>content_copy</md-icon>
+              </div>
+            `
+          : html` <div slot="content">${i18next.t('text.push notification is not supported in your browser')}</div>`}
+      </setting-let>
+    `
+  }
+
+  updated(changes) {
+    if (changes.has('supported') && this.supported) {
+      const copybuttons = this.renderRoot.querySelectorAll('[clipboard-copy]')
+
+      this.clipboard = new Clipboard(copybuttons, {
+        target: trigger => trigger.parentElement!.querySelector('input')!
+      })
+    }
+  }
+
+  async connectedCallback() {
+    super.connectedCallback()
+
+    if (!('Notification' in window)) {
+      return
+    }
+
+    this.supported = await isSupportingMessaging()
+    this.subscription = await getSubscriptionToken()
+  }
+
+  async onClickSwitch(e) {
+    const target = e.target
+    const on = target.selected
+
+    if (!('Notification' in window)) {
+      notify({
+        level: 'error',
+        message: i18next.t('This browser does not support desktop notification')
+      })
+
+      return
+    }
+
+    try {
+      if (Notification.permission !== 'granted') {
+        const permission = await Notification.requestPermission()
+        if (permission === 'denied') {
+          notify({
+            level: 'error',
+            message: i18next.t('text.web push notification unblock guide')
+          })
+        }
+        return
+      }
+
+      if (Notification.permission === 'granted') {
+        if (on) {
+          const subscription = await getSubscriptionToken()
+
+          if (subscription) {
+            this.subscription = subscription
+            notify({
+              level: 'info',
+              message: i18next.t('text.notification subscribed already')
+            })
+          } else {
+            this.subscription = await subscribe()
+
+            this.subscription &&
+              notify({
+                level: 'info',
+                message: i18next.t('text.notification subscribe started')
+              })
+          }
+        } else {
+          if (this.subscription) {
+            await unsubscribe()
+
+            this.subscription = await getSubscriptionToken()
+
+            notify({
+              level: 'info',
+              message: i18next.t('text.notification unsubscribed')
+            })
+          } else {
+            notify({
+              level: 'info',
+              message: i18next.t('text.notification unsubscribed already')
+            })
+          }
+        }
+      } else {
+        notify({
+          level: 'error',
+          message: i18next.t('text.notification subscribing failed')
+        })
+      }
+    } catch (err) {
+      notify({
+        level: 'error',
+        message: String(err)
+      })
+    } finally {
+      target.checked = !!this.subscription
+    }
+  }
+
+  ontest() {
+    openPopup(html` <notification-sender></notification-sender> `, {
+      backdrop: true,
+      size: 'large',
+      title: i18next.t('title.notification-sender')
+    })
+  }
+}