@operato/board 0.2.50 → 0.3.2

package/src/component/iot.ts

@@ -1,4 +1,4 @@
-import { Group } from '../types'
+import { ComponentGroup } from '../types'
 
 const icon = `
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
@@ -44,7 +44,7 @@ const icon = `
 </svg>
 `
 
-export const iot: Group = {
+export const iot: ComponentGroup = {
   name: 'IoT',
   description: 'a group of various IoT protocols',
   icon,

package/src/component/line.ts

@@ -1,4 +1,4 @@
-import { Group } from '../types'
+import { ComponentGroup } from '../types'
 import bothArrow from '../../../assets/images/components/both-arrow.png'
 import dash from '../../../assets/images/components/dash.png'
 import lineIcon from '../../../assets/images/components/line.png'
@@ -18,7 +18,7 @@ const icon = `
 </svg>
 `
 
-export const line: Group = {
+export const line: ComponentGroup = {
   name: 'line',
   description: 'a group of various lines',
   icon,

package/src/component/shape.ts

@@ -1,4 +1,4 @@
-import { Group } from '../types'
+import { ComponentGroup } from '../types'
 import donut from '../../../assets/images/components/donut.png'
 import ellipse from '../../../assets/images/components/ellipse.png'
 import polygon from '../../../assets/images/components/polygon.png'
@@ -18,7 +18,7 @@ const icon = `
 </svg>
 `
 
-export const shape: Group = {
+export const shape: ComponentGroup = {
   name: 'shape',
   description: 'a group of simple basic shapes',
   icon,

package/src/component/table.ts

@@ -1,4 +1,4 @@
-import { Group } from '../types'
+import { ComponentGroup } from '../types'
 
 const icon = `
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
@@ -20,7 +20,7 @@ const icon = `
 </svg>
 `
 
-export const table: Group = {
+export const table: ComponentGroup = {
   name: 'table',
   description: 'a group of various tables',
   icon,

package/src/component/text-and-media.ts

@@ -1,4 +1,4 @@
-import { Group } from '../types'
+import { ComponentGroup } from '../types'
 import audio from '../../../assets/images/components/audio.png'
 import colorImage from '../../../assets/images/components/color-image.png'
 import gifImage from '../../../assets/images/components/gif-image.png'
@@ -21,7 +21,7 @@ const icon = `
 </svg>
 `
 
-export const textAndMedia: Group = {
+export const textAndMedia: ComponentGroup = {
   name: 'textAndMedia',
   description: 'a group of text and various media components',
   icon,

package/src/component/warehouse.ts

@@ -1,4 +1,4 @@
-import { Group } from '../types'
+import { ComponentGroup } from '../types'
 
 const icon = `
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
@@ -18,7 +18,7 @@ const icon = `
 </svg>
 `
 
-export const warehouse: Group = {
+export const warehouse: ComponentGroup = {
   name: 'warehouse',
   description: 'a group of various components used in a warehouse depiction',
   icon,

package/src/graphql/board.ts

@@ -0,0 +1,144 @@
+import { buildArgs, client } from '@operato/graphql'
+
+import { Board } from '../types'
+import gql from 'graphql-tag'
+
+export async function fetchBoardList(listParam = {}) {
+  const response = await client.query({
+    query: gql`
+      {
+        boards(${buildArgs(listParam)}) {
+          items {
+            id
+            name
+            description
+            thumbnail
+            createdAt
+            updatedAt
+          }
+          total
+        }
+      }
+    `
+  })
+
+  return response.data
+}
+
+export async function fetchBoard(id: string) {
+  const response = await client.query({
+    query: gql`
+      query FetchBoardById($id: String!) {
+        board(id: $id) {
+          id
+          name
+          description
+          group {
+            id
+            name
+          }
+          thumbnail
+          model
+          createdAt
+          creator {
+            id
+            name
+          }
+          updatedAt
+          updater {
+            id
+            name
+          }
+        }
+      }
+    `,
+    variables: { id }
+  })
+
+  return response.data
+}
+
+export async function createBoard(board: Board) {
+  /*
+    input NewBoard {
+      name        : String!
+      description : String
+      model       : String!
+      groupId     : String!
+    }
+  */
+
+  board.model = JSON.stringify(board.model)
+
+  const response = await client.mutate({
+    mutation: gql`
+      mutation CreateBoard($board: NewBoard!) {
+        createBoard(board: $board) {
+          id
+          name
+          description
+          model
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      board
+    }
+  })
+
+  return response.data
+}
+
+export async function updateBoard(board: Board) {
+  /*
+    input BoardPatch {
+      name        : String
+      description : String
+      model       : String
+    }
+    */
+  var { id, name, description, model, groupId } = board
+  model = JSON.stringify(model)
+
+  const response = await client.mutate({
+    mutation: gql`
+      mutation UpdateBoard($id: String!, $patch: BoardPatch!) {
+        updateBoard(id: $id, patch: $patch) {
+          id
+          name
+          description
+          model
+          group {
+            id
+            name
+          }
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      id,
+      patch: { name, description, model, groupId }
+    }
+  })
+
+  return response.data
+}
+
+export async function deleteBoard(id: string) {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ($id: String!) {
+        deleteBoard(id: $id)
+      }
+    `,
+    variables: {
+      id
+    }
+  })
+
+  return response.data
+}

package/src/graphql/favorite-board.ts

@@ -0,0 +1,25 @@
+import { buildArgs, client } from '@operato/graphql'
+
+import gql from 'graphql-tag'
+
+export async function fetchFavoriteBoardList(listParam = {}) {
+  const response = await client.query({
+    query: gql`
+      {
+        favoriteBoards(${buildArgs(listParam)}) {
+          items {
+            id
+            name
+            description
+            thumbnail
+            createdAt
+            updatedAt
+          }
+          total
+        }
+      }
+    `
+  })
+
+  return response.data
+}

package/src/graphql/group.ts

@@ -0,0 +1,138 @@
+import { BoardGroup } from '../types'
+import { client } from '@operato/graphql'
+import gql from 'graphql-tag'
+
+export async function fetchGroup(id: string) {
+  const response = await client.query({
+    query: gql`
+      query FetchGroupById($id: String!) {
+        group(id: $id) {
+          id
+          name
+          description
+          createdAt
+          creator {
+            id
+            name
+          }
+          updatedAt
+          updater {
+            id
+            name
+          }
+        }
+      }
+    `,
+    variables: { id }
+  })
+
+  return response.data
+}
+
+export async function updateGroup(group: BoardGroup) {
+  var { id, name, description } = group
+
+  const response = await client.mutate({
+    mutation: gql`
+      mutation UpdateGroup($id: String!, $patch: GroupPatch!) {
+        updateGroup(id: $id, patch: $patch) {
+          id
+          name
+          description
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      id,
+      patch: { name, description }
+    }
+  })
+
+  return response.data
+}
+
+export async function deleteGroup(id: string) {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ($id: String!) {
+        deleteGroup(id: $id)
+      }
+    `,
+    variables: {
+      id
+    }
+  })
+
+  return response.data
+}
+
+export async function fetchGroupList() {
+  const response = await client.query({
+    query: gql`
+      {
+        groups {
+          items {
+            id
+            name
+            description
+            createdAt
+            updatedAt
+          }
+          total
+        }
+      }
+    `
+  })
+
+  return response.data
+}
+
+export async function createGroup(group: BoardGroup) {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation CreateGroup($group: NewGroup!) {
+        createGroup(group: $group) {
+          id
+          name
+          description
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: { group }
+  })
+
+  return response.data
+}
+
+export async function joinGroup(boardId: string, groupId: string) {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation JoinGroup($id: String!, $boardIds: [String!]!) {
+        joinGroup(id: $id, boardIds: $boardIds) {
+          id
+          name
+          description
+          boards {
+            id
+            name
+            description
+            createdAt
+            updatedAt
+          }
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      id: groupId,
+      boardIds: [boardId]
+    }
+  })
+
+  return response.data
+}

package/src/graphql/index.ts

@@ -0,0 +1,4 @@
+export * from './board'
+export * from './group'
+export * from './play-group'
+export * from './favorite-board'

package/src/graphql/play-group.ts

@@ -0,0 +1,189 @@
+import { PlayGroup } from '../types'
+import { client } from '@operato/graphql'
+import gql from 'graphql-tag'
+
+export async function fetchPlayGroupList() {
+  const response = await client.query({
+    query: gql`
+      {
+        playGroups {
+          items {
+            id
+            name
+            description
+          }
+          total
+        }
+      }
+    `
+  })
+
+  return response.data
+}
+
+export async function fetchPlayGroup(groupId: string) {
+  const response = await client.query({
+    query: gql`
+      query FetchPlayGroup($id: String!) {
+        playGroup(id: $id) {
+          id
+          name
+          description
+          boards {
+            id
+            name
+            description
+            model
+            thumbnail
+            createdAt
+            creator {
+              id
+              name
+            }
+            updatedAt
+            updater {
+              id
+              name
+            }
+          }
+          createdAt
+          creator {
+            id
+            name
+          }
+          updatedAt
+          updater {
+            id
+            name
+          }
+        }
+      }
+    `,
+    variables: {
+      id: groupId
+    }
+  })
+
+  return response.data
+}
+
+export async function createPlayGroup(group: PlayGroup) {
+  var { name, description } = group
+
+  const response = await client.mutate({
+    mutation: gql`
+      mutation CreatePlayGroup($playGroup: NewPlayGroup!) {
+        createPlayGroup(playGroup: $playGroup) {
+          id
+          name
+          description
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      playGroup: { name, description }
+    }
+  })
+
+  return response.data
+}
+
+export async function updatePlayGroup(group: PlayGroup) {
+  var { id, name, description } = group
+
+  const response = await client.mutate({
+    mutation: gql`
+      mutation UpdatePlayGroup($id: String!, $patch: PlayGroupPatch!) {
+        updatePlayGroup(id: $id, patch: $patch) {
+          id
+          name
+          description
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      id,
+      patch: { name, description }
+    }
+  })
+
+  return response.data
+}
+
+export async function deletePlayGroup(id: string) {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ($id: String!) {
+        deletePlayGroup(id: $id)
+      }
+    `,
+    variables: {
+      id
+    }
+  })
+  return response.data
+}
+
+export async function joinPlayGroup(boardId: string, group: PlayGroup) {
+  var { id, name, description } = group
+
+  const response = await client.mutate({
+    mutation: gql`
+      mutation JoinPlayGroup($id: String!, $boardIds: [String!]!) {
+        joinPlayGroup(id: $id, boardIds: $boardIds) {
+          id
+          name
+          description
+          boards {
+            id
+            name
+            description
+            createdAt
+            updatedAt
+          }
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      id,
+      boardIds: [boardId]
+    }
+  })
+
+  return response.data
+}
+
+export async function leavePlayGroup(boardId: string, groupId: string) {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ($id: String!, $boardIds: [String]!) {
+        leavePlayGroup(id: $id, boardIds: $boardIds) {
+          id
+          name
+          description
+          boards {
+            id
+            name
+            description
+            createdAt
+            updatedAt
+          }
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      id: groupId,
+      boardIds: [boardId]
+    }
+  })
+
+  return response.data
+}

package/src/index.ts

@@ -1,3 +1,8 @@
+export * from './types'
+
+export { registerDefaultGroups } from './component/register-default-groups'
+
 export * from './ox-board-viewer'
 export * from './ox-board-player'
 export * from './ox-board-modeller'
+export * from './ox-board-list'

package/src/modeller/component-toolbar/component-toolbar.ts

@@ -4,11 +4,12 @@
 
 import './component-menu'
 
+import { ICON_EDIT_MODE, ICON_SHIFT_MODE } from './mode-icons'
 import { LitElement, PropertyValues, css, html } from 'lit'
 import { SCENE_MODE, Scene } from '@hatiolab/things-scene'
 import { customElement, property, query, queryAll } from 'lit/decorators.js'
 
-import { Group } from '../../types'
+import { ComponentGroup } from '../../types'
 
 @customElement('component-toolbar')
 class ComponentToolbar extends LitElement {
@@ -37,6 +38,10 @@ class ComponentToolbar extends LitElement {
         box-sizing: border-box;
       }
 
+      #shift[active] {
+        background-color: #beb9b3;
+      }
+
       component-menu {
         position: absolute;
         top: 0;
@@ -51,11 +56,12 @@ class ComponentToolbar extends LitElement {
     `
   ]
 
-  @property({ type: Array }) componentGroupList: Group[] = []
+  @property({ type: Array }) componentGroupList: ComponentGroup[] = []
   @property({ type: String }) group?: string | null
   @property({ type: Object }) scene!: Scene
-  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.VIEW
+  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.EDIT
 
+  @query('#shift') shift!: HTMLImageElement
   @query('component-menu') private menu!: HTMLElement
   @queryAll('[data-group]') private groups!: NodeListOf<HTMLElement>
 
@@ -67,11 +73,16 @@ class ComponentToolbar extends LitElement {
 
       this.icons = (this.componentGroupList || [])
         .filter(group => group.templates?.length > 0)
-        .reduce((sum, group: Group) => {
+        .reduce((sum, group: ComponentGroup) => {
           sum[group.name] =
             'data:image/svg+xml;charset=UTF-8;base64,' + btoa(group.icon.replace(/{{strokeColor}}/g, color))
           return sum
         }, {} as { [name: string]: string })
+
+      this.icons['mode-edit'] =
+        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(ICON_EDIT_MODE.replace(/{{strokeColor}}/g, color))
+      this.icons['mode-shift'] =
+        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(ICON_SHIFT_MODE.replace(/{{strokeColor}}/g, color))
     }
 
     if (changes.has('group')) {
@@ -87,8 +98,11 @@ class ComponentToolbar extends LitElement {
 
   render() {
     const componentList = this.componentGroupList || []
+    const modeIcon = this.icons[this.mode === SCENE_MODE.EDIT ? 'mode-edit' : 'mode-shift']
 
     return html`
+      <img id="shift" .src=${modeIcon} @click=${(e: MouseEvent) => this._onClickShift(e)} />
+
       ${componentList
         .filter(group => group.templates?.length > 0)
         .map(
@@ -115,6 +129,30 @@ class ComponentToolbar extends LitElement {
     `
   }
 
+  _setMode(mode: SCENE_MODE) {
+    this.mode = mode
+
+    this.dispatchEvent(
+      new CustomEvent('mode-changed', {
+        bubbles: true,
+        composed: true,
+        detail: { value: mode }
+      })
+    )
+  }
+
+  _onClickShift(e: MouseEvent) {
+    const shift = this.shift
+
+    if (shift.hasAttribute('active')) {
+      shift.removeAttribute('active')
+      this._setMode(SCENE_MODE.EDIT)
+    } else {
+      shift.setAttribute('active', '')
+      this._setMode(SCENE_MODE.SHIFT)
+    }
+  }
+
   async _onClickGroup(e: MouseEvent) {
     var button = e.target as HTMLElement