@things-factory/board-ui 8.0.5 → 9.0.0-beta.10

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

@@ -1,400 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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}`
-      }
-  }
-}