@operato/board 1.4.68 → 1.4.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "1.4.68",
+  "version": "1.4.70",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -148,5 +148,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "95fda8794a2f0c7442e4f3123fef8ff39f83db5e"
+  "gitHead": "54b9782f1806073281637fe3211e1eea1c7a5606"
 }

package/src/graphql/play-group.ts

@@ -2,6 +2,25 @@ import { PlayGroup } from '../types'
 import { client } from '@operato/graphql'
 import gql from 'graphql-tag'
 
+export async function playlists(): Promise<{ name: string; description: string }[]> {
+  const response = await client.query({
+    query: gql`
+      {
+        playGroups {
+          items {
+            id
+            name
+            description
+          }
+          total
+        }
+      }
+    `
+  })
+
+  return response.data.playGroups.items
+}
+
 export async function fetchPlayGroupList() {
   const response = await client.query({
     query: gql`
@@ -67,6 +86,23 @@ export async function fetchPlayGroup(groupId: string) {
   return response.data
 }
 
+export async function fetchPlayGroupByName(name: string) {
+  const response = await client.query({
+    query: gql`
+      query FetchPlayGroupByName($id: String!) {
+        playGroupByName(name: $name) {
+          id
+        }
+      }
+    `,
+    variables: {
+      name
+    }
+  })
+
+  return response.data.playGroupByName
+}
+
 export async function createPlayGroup(group: PlayGroup) {
   var { name, description } = group
 

package/src/modeller/property-sidebar/effects/property-event-tap.ts

@@ -11,6 +11,7 @@ import { property, state } from 'lit/decorators.js'
 import { Properties, Scene } from '@hatiolab/things-scene'
 
 import { scenarios } from '../../../graphql/scenario'
+import { playlists } from '../../../graphql/play-group'
 import { EffectsSharedStyle } from './effects-shared-style'
 import { convert } from './value-converter'
 
@@ -23,6 +24,7 @@ export class PropertyEventTap extends LitElement {
   @property({ type: Object }) scene?: Scene
 
   @state() scenarios: { value: string; description: string }[] = []
+  @state() playlists: { value: string; description: string }[] = []
   @state() targetList: { value: string; description: string }[] = []
 
   async firstUpdated() {
@@ -47,11 +49,16 @@ export class PropertyEventTap extends LitElement {
             this.scenarios = (await scenarios()).map(({ name, description }) => {
               return { value: name, description }
             })
+          } else if ((e.target as HTMLSelectElement).value == 'goto-playlist') {
+            this.playlists = (await playlists()).map(({ name, description }) => {
+              return { value: name, description }
+            })
           }
         }}
       >
         <option value=""></option>
         <option value="goto">go to target board</option>
+        <option value="goto-playlist">go to target playlist</option>
         <option value="link-open">open new window for target link</option>
         <option value="link-move">move to target link</option>
         <option value="route-page">route to page</option>
@@ -94,7 +101,7 @@ export class PropertyEventTap extends LitElement {
               )}
             </datalist>
           `}
-      ${action === 'goto' || action?.includes('popup')
+      ${action === 'goto' || action === 'goto-playlist' || action?.includes('popup')
         ? html`
             <label for="input"> <ox-i18n msgid="label.input-data">input</ox-i18n> </label>
             <input
@@ -175,6 +182,8 @@ export class PropertyEventTap extends LitElement {
       case 'start-scenario':
       case 'run-scenario':
         return this.scenarios
+      case 'goto-playlist':
+        return this.playlists
       default:
         return []
     }
@@ -206,7 +215,7 @@ export class PropertyEventTap extends LitElement {
     }
 
     var { action } = this.value
-    if (action !== 'goto' && !action?.includes('popup')) {
+    if (action !== 'goto' && action !== 'goto-playlist' && !action?.includes('popup')) {
       /* clear unused options */
       delete this.value.options
     }

package/src/ox-board-viewer.ts

@@ -14,6 +14,7 @@ import { DataSubscriptionProviderImpl } from './graphql/data-subscription.js'
 import { runScenario, startScenario } from './graphql/scenario.js'
 
 import { BoardComponentInfo } from './ox-board-component-info.js'
+import { fetchPlayGroupByName } from './graphql/play-group.js'
 
 @customElement('ox-board-viewer')
 export class BoardViewer extends LitElement {
@@ -344,9 +345,18 @@ export class BoardViewer extends LitElement {
     }
   }
 
+  async gotoPlayer(playGroupName: string, bindingData?: any) {
+    const id = (await fetchPlayGroupByName(playGroupName))?.id
+    const queryString = bindingData ? new URLSearchParams(bindingData).toString() : ''
+
+    history.pushState({}, '', `board-player?${queryString}`)
+    window.dispatchEvent(new Event('popstate'))
+  }
+
   bindSceneEvents() {
     this._scene.on('run', this.onRunBoard, this)
     this._scene.on('goto', this.onLinkGoto, this)
+    this._scene.on('goto-playlist', this.onLinkGotoPlaylist, this)
     this._scene.on('link-open', this.onLinkOpen, this)
     this._scene.on('link-move', this.onLinkMove, this)
     this._scene.on('route-page', this.onRoutePage, this)
@@ -358,6 +368,7 @@ export class BoardViewer extends LitElement {
   unbindSceneEvents(scene: any) {
     scene.off('run', this.onRunBoard, this)
     scene.off('goto', this.onLinkGoto, this)
+    scene.off('goto-playlist', this.onLinkGotoPlaylist, this)
     scene.off('link-open', this.onLinkOpen, this)
     scene.off('link-move', this.onLinkMove, this)
     scene.off('route-page', this.onRoutePage, this)
@@ -460,6 +471,12 @@ export class BoardViewer extends LitElement {
     this.showScene(targetBoardId, data)
   }
 
+  onLinkGotoPlaylist(targetPlayGroupName: string, options: any, fromComponent: any) {
+    const { input, output } = options || { input: '(self)' }
+    const data = input && fromComponent.root.findFirst(input, fromComponent)?.data
+    this.gotoPlayer(targetPlayGroupName, data)
+  }
+
   onLinkOpen(url: string, value: any, fromComponent: Component) {
     if (!url) return