@things-factory/notification 8.0.0 → 9.0.0-beta.3

package/client/viewparts/notification-item.ts

@@ -1,246 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import gql from 'graphql-tag'
-import { LitElement, html, css } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { client } from '@operato/graphql'
-
-function isOriginSameAsLocation(url) {
-  function defaultPort(protocol) {
-    return { 'http:': 80, 'https:': 443 }[protocol]
-  }
-
-  function portOf(location) {
-    return location.port || defaultPort(location.protocol || pageLocation.protocol)
-  }
-
-  try {
-    var pageLocation = window.location
-    var urlparts = new URL(url, pageLocation.href)
-
-    return !!(
-      urlparts.protocol &&
-      urlparts.protocol == pageLocation.protocol &&
-      urlparts.host &&
-      urlparts.host == pageLocation.host &&
-      urlparts.host &&
-      portOf(urlparts) == portOf(pageLocation)
-    )
-  } catch (err) {
-    console.warn(err, url)
-  }
-}
-
-@customElement('notification-item')
-export class NotificationItem extends LitElement {
-  static styles = [
-    css`
-      :host {
-        position: relative;
-        background-color: var(--md-sys-color-surface);
-        padding: var(--spacing-medium);
-        border-left: 0 solid transparent;
-        border-bottom: 1px solid var(--md-sys-color-outline-variant) !important;
-        transition:
-          border-left 200ms ease-in-out,
-          padding-left 200ms ease-in-out;
-        color: var(--md-sys-color-on-surface);
-
-        --type-dot-size: 9px;
-      }
-
-      :host([newbie]) {
-        background-color: var(--md-sys-color-surface-variant);
-      }
-
-      :host(:hover) {
-        padding-left: 0.5rem;
-        border-left: 0.2rem solid var(--status-info-color);
-      }
-
-      [titler] {
-        white-space: normal;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        font-size: var(--fontsize-large);
-        font-weight: bold;
-        color: var(--md-sys-color-secondary);
-      }
-
-      [titler] span {
-        display: inline-block;
-        width: var(--type-dot-size);
-        height: var(--type-dot-size);
-        border-radius: 50%;
-        margin-right: var(--spacing-small);
-        margin-bottom: var(--spacing-tiny);
-      }
-      [titler] * {
-        vertical-align: middle;
-      }
-
-      [close] {
-        position: absolute;
-        top: 13px;
-        right: 0;
-        font-size: var(--fontsize-large);
-        opacity: 0.5;
-        cursor: pointer;
-      }
-      [close]:hover {
-        opacity: 1;
-      }
-      [detail] {
-        padding: var(--spacing-small) var(--spacing-medium);
-        border-radius: var(--border-radius);
-        font-size: 0.85em;
-      }
-      span.more {
-        margin-left: 16px;
-        float: right;
-        padding: 0px var(--spacing-small) 2px var(--spacing-small);
-        border-radius: var(--border-radius);
-        font-size: 0.8em;
-        color: var(--md-sys-color-on-primary);
-        --md-icon-size: 14px;
-      }
-      span.more * {
-        vertical-align: middle;
-      }
-
-      :host([type='ERROR']) span {
-        background-color: var(--status-danger-color);
-      }
-      :host([type='ERROR']) {
-        border-color: var(--status-danger-color);
-      }
-      :host([type='ERROR']) [detail] {
-        border: 1px solid rgba(241, 53, 63, 0.5);
-        background-color: rgba(241, 53, 63, 0.1);
-      }
-      :host([type='WARN']) span {
-        background-color: var(--status-warning-color);
-      }
-      :host([type='WARN']) {
-        border-color: var(--status-warning-color);
-      }
-      :host([type='SUCCESS']) span {
-        background-color: var(--status-success-color);
-      }
-      :host([type='SUCCESS']) {
-        border-color: var(--status-success-color);
-      }
-      :host([type='INFO']) span,
-      :host span {
-        background-color: var(--status-info-color);
-      }
-      :host([type='INFO']) {
-        border-color: var(--status-info-color);
-      }
-
-      img {
-        display: block;
-        max-width: 100%;
-        margin: auto;
-      }
-
-      [message] {
-        font-size: var(--fontsize-default);
-        color: var(--md-sys-color-secondary);
-      }
-
-      [timestamp] {
-        white-space: nowrap;
-        font-size: var(--fontsize-small);
-        color: var(--md-sys-color-on-surface-variant);
-      }
-    `
-  ]
-
-  @property({ type: String, reflect: true }) type?: string
-  @property({ type: Object }) notification: any
-  @property({ type: String }) target?: string
-  @property({ type: Object }) detail?: { message: string; [key: string]: any }
-  @property({ type: Boolean }) newbie?: boolean
-
-  render() {
-    const { title, url, image, timestamp, body } = this.notification
-    const target = this.target
-    const detail = this.detail
-    const type = this.type
-
-    return html`
-      <div titler>
-        <span></span>
-        ${url
-          ? target
-            ? html`<a href=${url} target=${target}>${title}</a>`
-            : html`<a href=${url}>${title}</a>`
-          : title}
-      </div>
-      <md-icon close @click=${e => this.dispatchEvent(new CustomEvent('close'))}>close</md-icon>
-
-      ${image
-        ? url
-          ? target
-            ? html`<a href=${url} target=${target}><img src=${image} /></a>`
-            : html`<a href=${url}><img src=${image} /></a>`
-          : html`<img src=${image} />`
-        : html``}
-      <div message>${body}</div>
-      ${type == 'ERROR'
-        ? html`<div
-            @click=${() => {
-              this.decipherErrorCode()
-            }}
-          >
-            <span class="more"><md-icon>expand_circle_down</md-icon> more</span>
-          </div>`
-        : html``}
-      ${detail ? html`<div detail>${detail.message}</div>` : html``}
-
-      <div timestamp>${new Date(Number(timestamp)).toLocaleString()}</div>
-    `
-  }
-
-  updated(changed) {
-    if (!this.notification?.confirmed) {
-      this.setAttribute('newbie', '')
-    } else {
-      this.removeAttribute('newbie')
-    }
-
-    const url = this.notification?.url
-    this.target = url && !isOriginSameAsLocation(url) && '_blank'
-  }
-
-  async decipherErrorCode() {
-    if (this.type != 'ERROR' || !this.notification) {
-      return
-    }
-
-    const { title, body } = this.notification
-    var code = `${title}`
-    if (body) {
-      code += `: ${body}`
-    }
-
-    const response = await client.query({
-      query: gql`
-        query ($input: CodeDecipherInput!) {
-          decipherErrorCode(input: $input) {
-            message
-          }
-        }
-      `,
-      variables: {
-        input: {
-          code,
-          system: ''
-        }
-      }
-    })
-
-    this.detail = response.data.decipherErrorCode
-  }
-}

package/client/viewparts/notification-list.ts

@@ -1,160 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@material/web/button/elevated-button.js'
-import './notification-item'
-
-import { LitElement, html, css } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers'
-import { store, notificationStore } from '@operato/shell'
-import { i18next, localize } from '@operato/i18n'
-import { UPDATE_NOTIFICATION } from '../actions/notification-fcm'
-
-@customElement('notification-list')
-export class NotificationList extends connect(store)(localize(i18next)(LitElement)) {
-  static styles = [
-    css`
-      :host {
-        display: block;
-        background-color: var(--md-sys-color-surface);
-        box-shadow: var(--box-shadow);
-        margin-right: var(--spacing-large);
-        padding: var(--spacing-medium);
-        max-height: 100%;
-        overflow-x: hidden;
-        overflow-y: auto;
-      }
-
-      [notifications-wrap] {
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-      }
-      [notifications-wrap] div {
-        align-items: stretch;
-        border-bottom: 1px solid var(--md-sys-color-primary);
-      }
-      [notifications-wrap] strong {
-        color: var(--md-sys-color-primary);
-        text-transform: capitalize;
-        line-height: 2;
-      }
-      [notifications-wrap] md-elevated-button {
-        --md-elevated-button-container-height: 24px;
-        float: right;
-        padding-inline-start: 6px;
-        padding-inline-end: 12px;
-      }
-      [no-notifications] {
-        margin: 0;
-        padding: var(--spacing-large);
-        text-align: center;
-        font-size: var(--fontsize-default);
-        font-weight: bold;
-        color: var(--md-sys-color-secondary);
-      }
-      div md-icon {
-        display: block;
-        opacity: 0.3;
-      }
-      @media screen and (max-width: 480px) {
-        :host {
-          height: 100%;
-          width: 100vw;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Array }) history: any[] = []
-
-  render() {
-    var history = this.history.reverse()
-
-    return history.length > 0
-      ? html`
-          <div notifications-wrap>
-            <div>
-              <strong>${i18next.t('label.notification list')}</strong>
-              <md-elevated-button outlined dense @click=${e => this.onclearall()}
-                ><md-icon slot="icon">delete_outline</md-icon>${String(
-                  i18next.t('label.clear all')
-                )}</md-elevated-button
-              >
-            </div>
-            ${history.map(
-              notification => html`
-                <notification-item
-                  @close=${e => {
-                    this.onClose(notification)
-                  }}
-                  .type=${notification.type}
-                  .notification=${notification}
-                ></notification-item>
-              `
-            )}
-          </div>
-        `
-      : html`
-          <div no-notifications @click=${e => window.history.back()}>
-            <md-icon>notifications_off</md-icon>${i18next.t('text.no notification available')}
-          </div>
-        `
-  }
-
-  onClose(notification) {
-    const { id } = notification
-
-    store.dispatch((async dispatch => {
-      if (notification) {
-        await notificationStore.delete(id)
-      }
-
-      const history = await notificationStore.getAll()
-
-      dispatch({
-        type: UPDATE_NOTIFICATION,
-        history: [...history]
-      })
-    }) as any)
-  }
-
-  onclearall() {
-    store.dispatch((async dispatch => {
-      await notificationStore.clear()
-      const history = await notificationStore.getAll()
-
-      dispatch({
-        type: UPDATE_NOTIFICATION,
-        history: [...history]
-      })
-    }) as any)
-  }
-
-  stateChanged(state) {
-    this.history = state.notification.history
-  }
-
-  async disconnectedCallback() {
-    super.disconnectedCallback()
-
-    await Promise.all(
-      this.history
-        .filter(notification => !notification.confirmed)
-        .map(async notification => {
-          return await notificationStore.put({
-            ...notification,
-            confirmed: true
-          })
-        })
-    )
-
-    store.dispatch((async dispatch => {
-      const history = await notificationStore.getAll()
-
-      dispatch({
-        type: UPDATE_NOTIFICATION,
-        history: [...history]
-      })
-    }) as any)
-  }
-}

package/client/viewparts/notification-sender.ts

@@ -1,142 +0,0 @@
-import '@material/web/button/elevated-button.js'
-import '@material/web/checkbox/checkbox.js'
-import '@material/web/textfield/filled-text-field.js'
-import '@operato/i18n/ox-i18n.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement } from 'lit/decorators.js'
-import { auth } from '@things-factory/auth-base/dist-client/auth.js'
-
-import { i18next, localize } from '@operato/i18n'
-import { ScrollbarStyles } from '@operato/styles'
-
-import { notify as webpushNotify } from '../actions/notification-fcm'
-
-@customElement('notification-sender')
-export class NotificationSender extends localize(i18next)(LitElement) {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        padding: var(--spacing-large);
-        background-color: var(--md-sys-color-background);
-        color: var(--md-sys-color-on-background);
-      }
-
-      form {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-      }
-
-      [content] > * {
-        margin: var(--spacing-medium);
-      }
-
-      [content] {
-        flex: 1;
-        flex-direction: column;
-        display: flex;
-        overflow: auto;
-      }
-
-      [buttons] {
-        margin-top: auto;
-        display: flex;
-        flex-direction: row-reverse;
-      }
-
-      [name='body'] {
-        resize: vertical;
-      }
-
-      md-elevated-button {
-        margin-left: var(--spacing-medium);
-      }
-
-      label {
-        display: flex;
-        gap: var(--spacing-medium);
-        align-items: center;
-      }
-
-      @media screen and (max-width: 480px) {
-        :host {
-          padding: var(--spacing-medium);
-        }
-      }
-    `
-  ]
-
-  render() {
-    return html`
-      <form>
-        <div content>
-          <md-filled-text-field
-            type="text"
-            name="receivers"
-            label=${String(i18next.t('field.receivers'))}
-            placeholder=${auth.credential?.email}
-            required
-            ><md-icon slot="leading-icon">account_circle</md-icon></md-filled-text-field
-          >
-          <md-filled-text-field type="text" name="title" label=${String(i18next.t('field.title'))} required
-            ><md-icon slot="leading-icon">notifications_none</md-icon></md-filled-text-field
-          >
-
-          <md-filled-text-field type="text" name="image" label=${String(i18next.t('field.image'))}
-            ><md-icon slot="leading-icon">insert_photo</md-icon></md-filled-text-field
-          >
-          <md-filled-text-field type="text" name="url" label=${String(i18next.t('field.url'))}
-            ><md-icon slot="leading-icon">link</md-icon></md-filled-text-field
-          >
-          <md-filled-text-field
-            type="textarea"
-            name="body"
-            label=${String(i18next.t('field.body'))}
-            required
-            rows="5"
-          ></md-filled-text-field>
-          <label>
-            <md-checkbox name="inappmsg"></md-checkbox>
-            In-App Message
-          </label>
-        </div>
-
-        <div buttons>
-          <md-elevated-button raised icon="send" @click=${e => this.ontest()}>
-            <ox-i18n msgid="button.notification-send"> </ox-i18n>
-          </md-elevated-button>
-
-          <md-elevated-button type="reset" outlined @click=${e => this.onReset()}>
-            <ox-i18n msgid="button.reset"> </ox-i18n>
-          </md-elevated-button>
-        </div>
-      </form>
-    `
-  }
-
-  ontest() {
-    const [receivers, title, body, image, url] = ['receivers', 'title', 'body', 'image', 'url'].map(
-      key => (this.renderRoot.querySelector(`[name="${key}"]`)! as any).value
-    )
-    const mode = (this.renderRoot.querySelector(`[name="inappmsg"]`)! as any).checked ? 'inapp' : 'background'
-
-    webpushNotify({
-      receivers,
-      title,
-      body,
-      image,
-      mode,
-      url
-    })
-  }
-
-  onReset() {
-    ;['receivers', 'title', 'body', 'image', 'url'].map(
-      key => ((this.renderRoot.querySelector(`[name="${key}"]`)! as any).value = '')
-    )
-    ;(this.renderRoot.querySelector(`[name="inappmsg"]`)! as any).checked = false
-  }
-}