@things-factory/board-ui 8.0.0-beta.8 → 8.0.0

package/client/pages/play-list-page.ts

@@ -0,0 +1,400 @@
+import '@material/web/icon/icon.js'
+import '@material/web/fab/fab.js'
+
+import '../viewparts/play-group-info'
+import '../board-list/board-tile-list'
+import '../board-list/play-group-bar'
+
+import gql from 'graphql-tag'
+import { css, html } from 'lit'
+import { customElement, property, query, queryAll, state } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { UPDATE_FAVORITES } from '@things-factory/fav-base/client'
+import { openOverlay } from '@operato/layout'
+import { navigate, PageView, store } from '@operato/shell'
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+import { pulltorefresh } from '@operato/pull-to-refresh'
+import { swipe, isMobileDevice } from '@things-factory/utils/src/index.js'
+
+import {
+  createPlayGroup,
+  deletePlayGroup,
+  fetchPlayGroup,
+  fetchPlayGroupList,
+  leavePlayGroup,
+  updateBoard,
+  updatePlayGroup
+} from '../graphql'
+
+@customElement('play-list-page')
+export class PlayListPage extends localize(i18next)(connect(store)(PageView)) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+
+        overflow: hidden;
+      }
+
+      board-tile-list {
+        flex: 1;
+        overflow-y: auto;
+      }
+
+      #play {
+        position: absolute;
+        bottom: 15px;
+        right: 16px;
+        text-decoration: auto;
+      }
+    `
+  ]
+
+  @property({ type: String }) groupId?: string
+  @property({ type: Array }) groups: any[] = []
+  @property({ type: Array }) boards: any[] = []
+  @property({ type: Array }) favorites: any[] = []
+
+  @query('board-tile-list') boardTileList!: HTMLElement
+
+  private page?: string
+
+  get context() {
+    var group = this.groups && this.groups.find(group => group.id === this.groupId)
+
+    return {
+      title: {
+        icon: 'video_library',
+        text: group ? group.name : 'Play List'
+      },
+      board_topmenu: true
+    }
+  }
+
+  render() {
+    return html`
+      <play-group-bar
+        .groups=${this.groups}
+        .groupId=${this.groupId}
+        target-page="play-list"
+        @info-play-group=${e => this.onInfoPlayGroup(e.detail)}
+      ></play-group-bar>
+
+      <board-tile-list
+        .favorites=${this.favorites}
+        .boards=${this.boards}
+        .group=${this.groupId}
+        @info-board=${e => this.onInfoBoard(e.detail)}
+        @delete-board=${e => this.onDeleteBoard(e.detail)}
+        @refresh-favorites=${e => this.refreshFavorites()}
+        @reordered=${e => this.onReorder(e.detail)}
+        reorderable
+      ></board-tile-list>
+
+      <a id="play" .href=${'board-player/' + this.groupId}>
+        <md-fab title="play">
+          <md-icon slot="icon">play_arrow</md-icon>
+        </md-fab>
+      </a>
+    `
+  }
+
+  async refresh() {
+    this.groups = (await fetchPlayGroupList()).playGroups.items
+
+    this.groups && (await this.refreshBoards())
+  }
+
+  async refreshBoards() {
+    if (!this.groups) {
+      await this.refresh()
+      return
+    }
+
+    if (!this.groupId) {
+      let groupId = this.groups && this.groups[0] && this.groups[0].id
+      var newURL = new URL(window.location.href)
+
+      newURL.pathname += `/${groupId}`
+
+      if (groupId) {
+        navigate(newURL.href, true)
+      }
+      return
+    }
+
+    if (this.groupId) {
+      var playGroup = (await fetchPlayGroup(this.groupId)).playGroup
+      this.boards = playGroup ? playGroup.boards : []
+    } else {
+      this.boards = []
+    }
+
+    this.updateContext()
+
+    var list = this.boardTileList
+
+    list.style.transition = ''
+    list.style.transform = `translate3d(0, 0, 0)`
+  }
+
+  async pageInitialized() {
+    this.refresh()
+  }
+
+  async pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      this.page = lifecycle.page
+      this.groupId = lifecycle.resourceId
+
+      await this.updateComplete
+
+      this.refreshBoards()
+    }
+  }
+
+  stateChanged(state) {
+    this.favorites = state.favorite.favorites
+  }
+
+  firstUpdated() {
+    var list = this.boardTileList
+
+    pulltorefresh({
+      container: this.shadowRoot,
+      scrollable: list,
+      refresh: () => {
+        return this.refresh()
+      }
+    })
+
+    if (isMobileDevice()) {
+      swipe({
+        container: list,
+        animates: {
+          dragging: async (d, opts) => {
+            var groups = this.groups
+            var currentIndex = groups.findIndex(group => group.id == this.groupId)
+
+            if ((d > 0 && currentIndex <= 0) || (d < 0 && currentIndex >= groups.length - 1)) {
+              /* TODO blocked gesture */
+              return false
+            }
+
+            list.style.transform = `translate3d(${d}px, 0, 0)`
+          },
+          aborting: async opts => {
+            list.style.transition = 'transform 0.3s'
+            list.style.transform = `translate3d(0, 0, 0)`
+
+            setTimeout(() => {
+              list.style.transition = ''
+            }, 300)
+          },
+          swiping: async (d, opts) => {
+            var groups = this.groups
+            var currentIndex = groups.findIndex(group => group.id == this.groupId)
+
+            if ((d > 0 && currentIndex <= 0) || (d < 0 && currentIndex >= groups.length - 1)) {
+              list.style.transition = ''
+              list.style.transform = `translate3d(0, 0, 0)`
+            } else {
+              list.style.transition = 'transform 0.3s'
+              list.style.transform = `translate3d(${d < 0 ? '-100%' : '100%'}, 0, 0)`
+
+              navigate(`${this.page}/${groups[currentIndex + (d < 0 ? 1 : -1)].id}`)
+            }
+          }
+        }
+      })
+    }
+  }
+
+  async onInfoBoard(board) {
+    openOverlay('viewpart-info', {
+      template: html`
+        <board-info
+          .board=${board}
+          .groupId=${this.groupId}
+          @update-board=${e => this.onUpdateBoard(e.detail)}
+          @delete-board=${e => this.onDeleteBoard(e.detail)}
+          @join-playgroup=${e => this.onJoinPlayGroup(e.detail)}
+          @leave-playgroup=${e => this.onLeavePlayGroup(e.detail)}
+        ></board-info>
+      `
+    })
+  }
+
+  async onInfoPlayGroup(group) {
+    openOverlay('viewpart-info', {
+      template: html`
+        <play-group-info
+          .playGroup=${group}
+          @update-play-group=${e => this.onUpdatePlayGroup(e.detail)}
+          @delete-play-group=${e => this.onDeletePlayGroup(e.detail)}
+          @create-play-group=${e => this.onCreatePlayGroup(e.detail)}
+        ></play-group-info>
+      `
+    })
+  }
+
+  async onCreatePlayGroup(playGroup) {
+    try {
+      await createPlayGroup(playGroup)
+      this._notify('info', i18next.t('text.play-group created', { playGroup: playGroup.name }))
+    } catch (ex) {
+      this._notify('error', ex, ex)
+    }
+
+    this.refresh()
+  }
+
+  async onUpdatePlayGroup(playGroup) {
+    try {
+      await updatePlayGroup(playGroup)
+      this._notify('info', i18next.t('text.play-group updated', { playGroup: playGroup.name }))
+    } catch (ex) {
+      this._notify('error', ex, ex)
+    }
+
+    this.refresh()
+  }
+
+  async onDeletePlayGroup(playGroup) {
+    try {
+      await deletePlayGroup(playGroup.id)
+      this._notify('info', i18next.t('text.play-group deleted', { playGroup: playGroup.name }))
+    } catch (ex) {
+      this._notify('error', ex, ex)
+    }
+
+    this.refresh()
+  }
+
+  async onUpdateBoard(board) {
+    try {
+      await updateBoard(board)
+      this._notify('info', i18next.t('text.board updated', { board: board.name }))
+    } catch (ex) {
+      this._notify('error', ex, ex)
+    }
+
+    this.refreshBoards()
+  }
+
+  async onDeleteBoard(board) {
+    const playGroup = this.groups && this.groups.find(group => group.id === this.groupId)
+    await this.onLeavePlayGroup({ board, playGroup })
+  }
+
+  async onJoinPlayGroup({ board, playGroup }) {
+    try {
+      await client.mutate({
+        mutation: gql`
+          mutation JoinPlayGroup($id: String!, $boardIds: [String!]!) {
+            joinPlayGroup(id: $id, boardIds: $boardIds) {
+              id
+            }
+          }
+        `,
+        variables: {
+          id: playGroup.id,
+          boardIds: [board.id]
+        }
+      })
+
+      this._notify('info', i18next.t('text.joined into play-group', { board: board.name, playGroup: playGroup.name }))
+    } catch (ex) {
+      this._notify('error', ex, ex)
+    }
+
+    this.refresh()
+  }
+
+  async onLeavePlayGroup({ board, playGroup }) {
+    try {
+      await client.mutate({
+        mutation: gql`
+          mutation ($id: String!, $boardIds: [String!]!) {
+            leavePlayGroup(id: $id, boardIds: $boardIds) {
+              id
+            }
+          }
+        `,
+        variables: {
+          id: playGroup.id,
+          boardIds: [board.id]
+        }
+      })
+
+      this._notify('info', i18next.t('text.leaved from play-group', { board: board.name, playGroup: playGroup.name }))
+    } catch (ex) {
+      this._notify('error', ex, ex)
+    }
+
+    this.refresh()
+  }
+
+  async onReorder({ boardIds, groupId }) {
+    try {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation ($id: String!, $boardIds: [String!]!) {
+            reorderPlayGroup(id: $id, boardIds: $boardIds) {
+              id
+              name
+            }
+          }
+        `,
+        variables: {
+          id: groupId,
+          boardIds
+        }
+      })
+
+      const playGroup = response.data.reorderPlayGroup
+
+      this._notify('info', i18next.t('text.reorder play-group', { playGroup: playGroup.name }))
+    } catch (ex) {
+      this._notify('error', ex, ex)
+    }
+
+    this.refresh()
+  }
+
+  async refreshFavorites() {
+    const response = await client.query({
+      query: gql`
+        query {
+          myFavorites {
+            id
+            routing
+          }
+        }
+      `
+    })
+
+    store.dispatch({
+      type: UPDATE_FAVORITES,
+      favorites: response.data.myFavorites.map(favorite => favorite.routing)
+    })
+  }
+
+  _notify(level: 'info' | 'warn' | 'error', message: any, ex?: any) {
+    document.dispatchEvent(
+      new CustomEvent('notify', {
+        detail: {
+          level,
+          message,
+          ex
+        }
+      })
+    )
+  }
+}

package/client/pages/printable-board-viewer-page.ts

@@ -0,0 +1,54 @@
+import { BoardViewerPage } from './board-viewer-page'
+
+function serialize(obj) {
+  var str = [] as string[]
+  for (var p in obj)
+    if (obj.hasOwnProperty(p)) {
+      str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p]))
+    }
+  return str.join('&')
+}
+
+function readFileAsync(file) {
+  return new Promise((resolve, reject) => {
+    let reader = new FileReader()
+
+    reader.onload = () => {
+      resolve(reader.result)
+    }
+
+    reader.onerror = reject
+    reader.readAsDataURL(file)
+  })
+}
+
+export class PrintableBoardViewerPage extends BoardViewerPage {
+  get context() {
+    return {
+      ...super.context,
+      printable: {
+        accept: ['preview'],
+        content: async () => {
+          const image = await this.fetchImage()
+          await this.printTrick(image)
+
+          return this as any
+        }
+      }
+    }
+  }
+
+  async fetchImage() {
+    const modelId = this._boardId
+    const data = {
+      title: this.context.title
+    }
+    const queryString = serialize(data)
+    const url = `${location.origin}/screenshot/${modelId}${queryString ? '?' + queryString : ''}`
+
+    const response = await fetch(url)
+    return await readFileAsync(await response.blob())
+  }
+}
+
+customElements.define('printable-board-viewer-page', PrintableBoardViewerPage)

package/client/pages/theme/theme-editors.ts

@@ -0,0 +1,56 @@
+import { getEditor, getRenderer } from '@operato/data-grist'
+
+export function buildThemeValueRecordConfig() {
+  return {
+    editor: function (value, column, record, rowIndex, field) {
+      return getEditor(record.type || 'text')(value, column, record, rowIndex, field)
+    },
+    renderer: function (value, column, record, rowIndex, field) {
+      return getRenderer(record.type || 'text')(value, column, record, rowIndex, field)
+    },
+    editable: true
+  }
+}
+
+function getEditorType(themeType: string): string {
+  switch (themeType) {
+    case 'legend':
+    case 'color-map':
+      return 'value-map'
+    case 'color-ranges':
+      return 'value-ranges'
+    case 'color':
+      return 'color'
+    default:
+      return 'text'
+  }
+}
+
+function getRendererType(themeType: string): string {
+  switch (themeType) {
+    case 'legend':
+    case 'color-map':
+    case 'color-ranges':
+      return 'json5'
+    case 'color':
+      return 'color'
+    default:
+      return 'text'
+  }
+}
+
+function getOptions(themeType: string, name: string): any {
+  switch (themeType) {
+    case 'color-map':
+    case 'color-ranges':
+      return {
+        name: `${themeType.toUpperCase()} : ${name}`,
+        valuetype: 'color'
+      }
+    case 'color':
+    default:
+      return {
+        name: `${themeType?.toUpperCase() || ''} : ${name}`
+      }
+  }
+}