@things-factory/board-ui 6.1.196 → 6.2.0

package/client/board-list/board-tile-list.ts

@@ -0,0 +1,268 @@
+import '@operato/board/ox-board-creation-card.js'
+import '@material/mwc-icon'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { customElement, property, state, query } from 'lit/decorators.js'
+import { keyed } from 'lit/directives/keyed.js'
+
+import { client } from '@operato/graphql'
+
+@customElement('board-tile-list')
+export class BoardTileList extends LitElement {
+  static styles = [
+    css`
+      :host {
+        overflow: auto;
+        padding: var(--popup-content-padding);
+        display: grid;
+
+        grid-template-columns: var(--card-list-template);
+        grid-auto-rows: var(--card-list-rows-height);
+        grid-gap: 20px;
+        --mdc-button-horizontal-padding: var(--padding-default);
+      }
+
+      [card] {
+        position: relative;
+        align-items: center;
+        overflow: hidden;
+      }
+
+      [card][create] {
+        overflow: visible;
+        background-color: initial;
+      }
+
+      [card] > a {
+        display: flex;
+      }
+
+      [card]:hover {
+        cursor: pointer;
+      }
+
+      [name] {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        margin-top: var(--margin-narrow);
+        width: calc(100% - 45px);
+        color: var(--primary-text-color);
+        font-weight: bolder;
+        font-size: var(--fontsize-small);
+      }
+
+      img {
+        display: block;
+
+        margin: auto;
+        max-width: 100%;
+        max-height: 100%;
+      }
+
+      mwc-icon[iconBtn] {
+        float: right;
+        margin-top: -20px;
+        margin-left: 2px;
+        color: var(--board-list-star-color);
+        font-size: 1.4em;
+      }
+      mwc-icon[info] {
+        color: var(--primary-color);
+      }
+
+      mwc-icon[iconBtn][favored],
+      mwc-icon[info]:hover {
+        color: var(--board-list-star-active-color);
+      }
+
+      a {
+        display: block;
+        border-radius: var(--card-list-border-radius);
+        border: var(--border-dark-color);
+        box-sizing: border-box;
+        background-color: var(--card-list-background-color);
+        margin: 0px;
+        height: calc(100% - 25px);
+      }
+
+      :host > *:hover [info] {
+        opacity: 1;
+        -webkit-transition: opacity 0.8s;
+        -moz-transition: opacity 0.8s;
+        -o-transition: opacity 0.8s;
+        transition: opacity 0.8s;
+      }
+
+      [draggable='true'] {
+        cursor: grab;
+      }
+
+      @media screen and (max-width: 800px), screen and (max-height: 600px) {
+        ox-board-creation-card {
+          display: none;
+        }
+      }
+    `
+  ]
+
+  @property({ type: Boolean, attribute: 'creatable' }) creatable: boolean = false
+  @property({ type: Array }) boards: any[] = []
+  @property({ type: Array }) favorites: any[] = []
+  @property({ type: Array }) groups: any[] = []
+  @property({ type: String }) group?: string
+  @property({ type: Boolean, attribute: 'reorderable' }) reorderable: boolean = false
+
+  private draggedItem
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    if (this.reorderable) {
+      this.renderRoot.addEventListener('dragstart', (e: Event) => {
+        const target = e.target! as HTMLElement
+        this.draggedItem = target.closest('[card]')
+        ;(e as DragEvent).dataTransfer?.setData('text/plain', target.innerHTML)
+      })
+
+      this.renderRoot.addEventListener('dragover', (e: Event) => {
+        e.preventDefault()
+
+        const target = e.target! as HTMLElement
+        const targetItem = target.closest('[card]')
+        if (targetItem && targetItem !== this.draggedItem) {
+          const targetRect = targetItem.getBoundingClientRect()
+          const mousePos = (e as DragEvent).clientX - targetRect.left
+
+          if (mousePos < targetRect.width / 2) {
+            // 마우스 위치가 아이템 좌측 반절에 있을 때
+            this.renderRoot.insertBefore(this.draggedItem, targetItem)
+          } else {
+            // 마우스 위치가 아이템 우측 반절에 있을 때
+            this.renderRoot.insertBefore(this.draggedItem, targetItem.nextSibling)
+          }
+        }
+      })
+
+      this.renderRoot.addEventListener('drop', (e: Event) => {
+        e.preventDefault()
+
+        const boardIds = Array.from(this.renderRoot.querySelectorAll('[card]'))
+          .map(board => board.getAttribute('id'))
+          .filter(Boolean)
+
+        this.dispatchEvent(
+          new CustomEvent('reordered', {
+            detail: {
+              groupId: this.group,
+              boardIds
+            }
+          })
+        )
+      })
+    }
+  }
+
+  render() {
+    var boards = this.boards || []
+
+    return html`
+      ${this.creatable
+        ? html`
+            <ox-board-creation-card
+              .groups=${this.groups}
+              .defaultGroup=${this.group}
+              @create-board=${e => this.onCreateBoard(e)}
+              card
+              create
+            ></ox-board-creation-card>
+          `
+        : html``}
+      ${keyed(
+        Date.now(),
+        boards.map(
+          board =>
+            html`
+              <div card draggable="true" id=${board.id}>
+                <a href="board-viewer/${board.id}"> <img src=${board.thumbnail} /> </a>
+
+                <div name>${board.name}</div>
+                <!-- <div description>${board.description}</div> -->
+
+                <mwc-icon
+                  iconBtn
+                  info
+                  @click=${e => {
+                    this.infoBoard(board)
+                    e.preventDefault()
+                  }}
+                  >info</mwc-icon
+                >
+
+                ${(this.favorites || []).includes(board.id)
+                  ? html` <mwc-icon iconBtn favored @click=${e => this.removeFavorite(board.id)}>star</mwc-icon> `
+                  : html` <mwc-icon iconBtn @click=${e => this.addFavorite(board.id)}>star_border</mwc-icon> `}
+              </div>
+            `
+        )
+      )}
+    `
+  }
+
+  updated(changes: PropertyValues<this>) {
+    var creationCard = this.renderRoot.querySelector('ox-board-creation-card') as any
+    if (creationCard) {
+      creationCard.reset()
+    }
+  }
+
+  onCreateBoard(e) {
+    this.dispatchEvent(
+      new CustomEvent('create-board', {
+        detail: e.detail
+      })
+    )
+  }
+
+  infoBoard(board) {
+    this.dispatchEvent(
+      new CustomEvent('info-board', {
+        detail: board
+      })
+    )
+  }
+
+  async removeFavorite(boardId) {
+    await client.query({
+      query: gql`
+        mutation {
+          deleteFavorite(routing: "${boardId}")
+        }
+      `
+    })
+
+    this.refreshFavorites()
+  }
+
+  async addFavorite(boardId) {
+    await client.query({
+      query: gql`
+        mutation {
+          createFavorite(favorite: {
+            routing: "${boardId}"
+          }) {
+            id
+            routing
+          }
+        }
+      `
+    })
+
+    this.refreshFavorites()
+  }
+
+  async refreshFavorites() {
+    this.dispatchEvent(new CustomEvent('refresh-favorites'))
+  }
+}

package/client/pages/board-player-by-name-page.ts

@@ -0,0 +1,29 @@
+import gql from 'graphql-tag'
+import { customElement } from 'lit/decorators.js'
+import { client, gqlContext } from '@operato/graphql'
+
+import { BoardPlayerPage } from './board-player-page'
+
+@customElement('board-player-by-name-page')
+export class BoardPlayerByNamePage extends BoardPlayerPage {
+  async fetch(name: string) {
+    return await client.query({
+      query: gql`
+        query ($name: String!) {
+          response: playGroupByName(name: $name) {
+            id
+            name
+            description
+            boards {
+              id
+              model
+            }
+          }
+        }
+      `,
+      variables: {
+        name
+      }
+    })
+  }
+}

package/client/pages/board-player-page.ts

@@ -92,6 +92,27 @@ export class BoardPlayerPage extends connect(store)(PageView) {
     delete this.provider
   }
 
+  async fetch(id: string) {
+    return await client.query({
+      query: gql`
+        query ($id: String!) {
+          response: playGroup(id: $id) {
+            id
+            name
+            description
+            boards {
+              id
+              model
+            }
+          }
+        }
+      `,
+      variables: {
+        id
+      }
+    })
+  }
+
   async refresh() {
     if (!this.playGroupId) {
       return
@@ -101,26 +122,9 @@ export class BoardPlayerPage extends connect(store)(PageView) {
       this.showSpinner = true
       this.updateContext()
 
-      this.playGroup = (
-        await client.query({
-          query: gql`
-            query FetchPlayGroup($id: String!) {
-              playGroup(id: $id) {
-                id
-                name
-                description
-                boards {
-                  id
-                  model
-                }
-              }
-            }
-          `,
-          variables: {
-            id: this.playGroupId
-          }
-        })
-      ).data.playGroup
+      const response = await this.fetch(this.playGroupId)
+
+      this.playGroup = response.data.response
 
       if (!this.playGroup) {
         throw 'playgroup not found'
@@ -197,7 +201,7 @@ export class BoardPlayerPage extends connect(store)(PageView) {
   }
 
   async startSubscribingForAutoRefresh() {
-    if (!this.playGroupId) {
+    if (!this.playGroup) {
       return
     }
 
@@ -213,7 +217,7 @@ export class BoardPlayerPage extends connect(store)(PageView) {
           }
         `,
         variables: {
-          id: this.playGroupId
+          id: this.playGroup.id
         }
       },
       {

package/client/pages/board-viewer-by-name-page.ts

@@ -0,0 +1,24 @@
+import gql from 'graphql-tag'
+import { customElement } from 'lit/decorators.js'
+import { client, gqlContext } from '@operato/graphql'
+
+import { BoardViewerPage } from './board-viewer-page'
+
+@customElement('board-viewer-by-name-page')
+export class BoardViewerByNamePage extends BoardViewerPage {
+  async fetch(name: string) {
+    return await client.query({
+      query: gql`
+        query FetchBoardByName($name: String!) {
+          response: boardByName(name: $name) {
+            id
+            name
+            model
+          }
+        }
+      `,
+      variables: { name },
+      context: gqlContext()
+    })
+  }
+}

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

@@ -149,6 +149,22 @@ export class BoardViewerPage extends connect(store)(PageView) {
     this._baseUrl = state.app.baseUrl
   }
 
+  async fetch(id: string) {
+    return await client.query({
+      query: gql`
+        query ($id: String!) {
+          response: board(id: $id) {
+            id
+            name
+            model
+          }
+        }
+      `,
+      variables: { id },
+      context: gqlContext()
+    })
+  }
+
   async refresh() {
     if (!this._boardId) {
       this._board = null
@@ -159,21 +175,9 @@ export class BoardViewerPage extends connect(store)(PageView) {
       this._showSpinner = true
       this.updateContext()
 
-      var response = await client.query({
-        query: gql`
-          query FetchBoardById($id: String!) {
-            board(id: $id) {
-              id
-              name
-              model
-            }
-          }
-        `,
-        variables: { id: this._boardId },
-        context: gqlContext()
-      })
+      var response = await this.fetch(this._boardId)
 
-      var board = response.data.board
+      var board = response.data.response
 
       if (!board) {
         this._board = null
@@ -204,7 +208,7 @@ export class BoardViewerPage extends connect(store)(PageView) {
   }
 
   async startSubscribingForAutoRefresh() {
-    if (!this._boardId) {
+    if (!this._board) {
       return
     }
 
@@ -220,7 +224,7 @@ export class BoardViewerPage extends connect(store)(PageView) {
           }
         `,
         variables: {
-          id: this._boardId
+          id: this._board.id
         }
       },
       {

package/client/route.ts

@@ -4,10 +4,18 @@ export default function route(page) {
       import('./pages/board-viewer-page')
       return page
 
+    case 'board-viewer-by-name':
+      import('./pages/board-viewer-by-name-page')
+      return page
+
     case 'board-player':
       import('./pages/board-player-page')
       return page
 
+    case 'board-player-by-name':
+      import('./pages/board-player-by-name-page')
+      return page
+
     case 'board-modeller':
       import('./pages/board-modeller-page')
       return page

package/dist-client/board-list/board-tile-list.d.ts

@@ -1,27 +1,21 @@
-export default class BoardTileList extends LitElement {
-    static get styles(): import("lit").CSSResult[];
-    static get properties(): {
-        creatable: {
-            type: BooleanConstructor;
-            attribute: string;
-        };
-        boards: ArrayConstructor;
-        favorites: ArrayConstructor;
-        groups: ArrayConstructor;
-        group: StringConstructor;
-        reorderable: {
-            type: BooleanConstructor;
-            attribute: string;
-        };
-    };
-    draggingItem: any;
-    draggedItem: any;
+import '@operato/board/ox-board-creation-card.js';
+import '@material/mwc-icon';
+import { LitElement, PropertyValues } from 'lit';
+export declare class BoardTileList extends LitElement {
+    static styles: import("lit").CSSResult[];
+    creatable: boolean;
+    boards: any[];
+    favorites: any[];
+    groups: any[];
+    group?: string;
+    reorderable: boolean;
+    private draggedItem;
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
-    updated(changes: any): void;
+    updated(changes: PropertyValues<this>): void;
     onCreateBoard(e: any): void;
     infoBoard(board: any): void;
     removeFavorite(boardId: any): Promise<void>;
     addFavorite(boardId: any): Promise<void>;
     refreshFavorites(): Promise<void>;
 }
-import { LitElement } from "lit-element/lit-element";