@things-factory/board-ui 4.3.111 → 4.3.114

package/client/index.js

@@ -5,3 +5,5 @@ export * from './viewparts/board-creation-card'
 export * from './pages/board-viewer-page'
 export * from './pages/board-player-page'
 export * from './pages/board-modeller-page'
+
+export * from './setting-let/board-view-setting-let'

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

@@ -5,7 +5,7 @@ import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
-import { client, PageView, store } from '@things-factory/shell'
+import { client, clientSettingStore, PageView, store } from '@things-factory/shell'
 
 import { createBoardProvider } from '../board-provider'
 
@@ -77,6 +77,7 @@ export class BoardPlayerPage extends connect(store)(PageView) {
 
   async refresh() {
     if (!this._playGroupId) {
+      this.stopCheckingForAutoRefresh()
       return
     }
 
@@ -84,6 +85,9 @@ export class BoardPlayerPage extends connect(store)(PageView) {
       this._showSpinner = true
       this.updateContext()
 
+      const { autoRefresh, interval } = (await clientSettingStore.get('board-view'))?.value
+      autoRefresh && this.startCheckingForAutoRefresh(interval)
+
       this._playGroup = (
         await client.query({
           query: gql`
@@ -109,6 +113,7 @@ export class BoardPlayerPage extends connect(store)(PageView) {
                     name
                   }
                 }
+                updatedAt
               }
             }
           `,
@@ -192,10 +197,65 @@ export class BoardPlayerPage extends connect(store)(PageView) {
 
       this.refresh()
     } else {
+      this.stopCheckingForAutoRefresh()
+
       this._playGroupId = null
       this.shadowRoot.querySelector('ox-board-player').stop()
     }
   }
+
+  async startCheckingForAutoRefresh(interval) {
+    await this.stopCheckingForAutoRefresh()
+
+    if (!this._playGroupId) {
+      return
+    }
+
+    this._interval = setInterval(async () => {
+      const response = await client.query({
+        query: gql`
+          query FetchPlayGroup($id: String!) {
+            playGroup(id: $id) {
+              id
+              boards {
+                id
+                updatedAt
+              }
+              updatedAt
+            }
+          }
+        `,
+        variables: {
+          id: this._playGroupId
+        }
+      })
+
+      const playGroup = response.data.playGroup
+
+      if (playGroup)
+        if (this._playGroup.updatedAt !== playGroup.updatedAt) {
+          console.log('== playgroup changed (refreshed automatically) ==')
+          this.refresh()
+        } else {
+          const boards = playGroup.boards || []
+          const currentBoards = this._playGroup.boards
+
+          if (
+            boards.find(({ id, updatedAt }) => {
+              const currentBoard = currentBoards.find(b => b.id === id)
+              return !currentBoard || currentBoard.updatedAt !== updatedAt
+            })
+          ) {
+            console.log('== some board in playgroup changed (refreshed automatically) ==')
+            this.refresh()
+          }
+        }
+    }, (interval || 60) * 60 * 1000)
+  }
+
+  async stopCheckingForAutoRefresh() {
+    clearInterval(this._interval)
+  }
 }
 
 customElements.define('board-player-page', BoardPlayerPage)

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

@@ -6,7 +6,7 @@ import { css, html } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { buildLabelPrintCommand } from '@things-factory/barcode-base'
-import { client, gqlContext, PageView, store } from '@things-factory/shell'
+import { client, clientSettingStore, gqlContext, PageView, store } from '@things-factory/shell'
 
 import { provider } from '../board-provider'
 
@@ -120,6 +120,8 @@ export class BoardViewerPage extends connect(store)(PageView) {
        * 화면이 inactive 될 때, 굳이 scene을 close하는 이유는,
        * 새로운 board가 선택되어 뷰어가 열릴 때, 기존 보드 잔상이 보이지 않도록 하기위해서이다.
        */
+      this.stopCheckingForAutoRefresh()
+
       if (this._boardId) {
         let boardViewer = this.shadowRoot.querySelector('ox-board-viewer')
         boardViewer && boardViewer.closeScene()
@@ -135,6 +137,7 @@ export class BoardViewerPage extends connect(store)(PageView) {
 
   async refresh() {
     if (!this._boardId) {
+      this.stopCheckingForAutoRefresh()
       this._board = null
       return
     }
@@ -150,6 +153,7 @@ export class BoardViewerPage extends connect(store)(PageView) {
               id
               name
               model
+              updatedAt
             }
           }
         `,
@@ -181,6 +185,9 @@ export class BoardViewerPage extends connect(store)(PageView) {
     } finally {
       this._showSpinner = false
       this.updateContext()
+
+      const { autoRefresh, interval } = (await clientSettingStore.get('board-view'))?.value
+      autoRefresh && this.startCheckingForAutoRefresh(interval)
     }
   }
 
@@ -198,6 +205,40 @@ export class BoardViewerPage extends connect(store)(PageView) {
   async printTrick(image) {
     await this.renderRoot.querySelector('ox-board-viewer').printTrick(image)
   }
+
+  async startCheckingForAutoRefresh(interval) {
+    await this.stopCheckingForAutoRefresh()
+
+    if (!this._boardId) {
+      return
+    }
+
+    this._interval = setInterval(async () => {
+      const response = await client.query({
+        query: gql`
+          query FetchBoardById($id: String!) {
+            board(id: $id) {
+              id
+              updatedAt
+            }
+          }
+        `,
+        variables: { id: this._boardId },
+        context: gqlContext()
+      })
+
+      const board = response.data.board
+
+      if (board && this._board.updatedAt !== board.updatedAt) {
+        console.log('== board changed (refreshed automatically) ==')
+        this.refresh()
+      }
+    }, (interval || 60) * 60 * 1000)
+  }
+
+  async stopCheckingForAutoRefresh() {
+    clearInterval(this._interval)
+  }
 }
 
 customElements.define('board-viewer-page', BoardViewerPage)

package/client/setting-let/board-view-setting-let.js

@@ -0,0 +1,114 @@
+import '@things-factory/setting-base'
+import '@material/mwc-formfield'
+import '@material/mwc-checkbox'
+
+import { css, html, LitElement } from 'lit'
+
+import { i18next, localize } from '@operato/i18n'
+import { clientSettingStore } from '@things-factory/shell'
+
+export class BoardViewSettingLet extends localize(i18next)(LitElement) {
+  static get styles() {
+    return [
+      css`
+        label {
+          font: var(--label-font);
+          color: var(--label-color);
+          text-transform: var(--label-text-transform);
+        }
+
+        mwc-formfield {
+          display: block;
+        }
+      `
+    ]
+  }
+
+  static get properties() {
+    return {
+      autoRefresh: Boolean,
+      interval: Number
+    }
+  }
+
+  render() {
+    return html`
+      <setting-let>
+        <i18n-msg slot="title" msgid="title.board view setting"></i18n-msg>
+
+        <div slot="content">
+          <mwc-formfield label=${i18next.t('label.auto refresh board view')}>
+            <mwc-checkbox
+              id="auto-refresh"
+              @change=${e => this.onchangeAutoRefresh(e)}
+              ?checked=${this.autoRefresh}
+            ></mwc-checkbox>
+          </mwc-formfield>
+
+          ${this.autoRefresh
+            ? html`
+                <mwc-textfield
+                  name="interval"
+                  type="number"
+                  helper=${i18next.t('label.auto refresh checking interval (minutes)')}
+                  @change=${e => this.onchangeInterval(e)}
+                  helperpersistent
+                  .value=${this.interval || 60}
+                ></mwc-textfield>
+              `
+            : html``}
+        </div>
+      </setting-let>
+    `
+  }
+
+  async firstUpdated() {
+    const { autoRefresh = false, interval = 60 } = (await clientSettingStore.get('board-view'))?.value || {}
+    this.autoRefresh = autoRefresh
+    this.interval = interval
+  }
+
+  async onchangeAutoRefresh(e) {
+    this.autoRefresh = e.target.checked
+
+    const { autoRefresh: valueFromStore } = (await clientSettingStore.get('board-view'))?.value || {}
+    if (this.autoRefresh === valueFromStore) {
+      return
+    }
+
+    try {
+      await clientSettingStore.put({
+        key: 'board-view',
+        value: {
+          autoRefresh: this.autoRefresh,
+          interval: this.interval || 60
+        }
+      })
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  async onchangeInterval(e) {
+    this.interval = e.target.value
+
+    const { interval: valueFromStore } = (await clientSettingStore.get('board-view'))?.value || {}
+    if (this.interval === valueFromStore) {
+      return
+    }
+
+    try {
+      await clientSettingStore.put({
+        key: 'board-view',
+        value: {
+          autoRefresh: this.autoRefresh,
+          interval: this.interval
+        }
+      })
+    } catch (e) {
+      console.error(e)
+    }
+  }
+}
+
+customElements.define('board-view-setting-let', BoardViewSettingLet)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/board-ui",
-  "version": "4.3.111",
+  "version": "4.3.114",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -40,11 +40,11 @@
     "@polymer/paper-listbox": "^3.0.1",
     "@polymer/paper-menu-button": "^3.0.1",
     "@polymer/paper-slider": "^3.0.1",
-    "@things-factory/barcode-base": "^4.3.111",
-    "@things-factory/grist-ui": "^4.3.111",
-    "@things-factory/modeller-ui": "^4.3.111",
+    "@things-factory/barcode-base": "^4.3.114",
+    "@things-factory/grist-ui": "^4.3.114",
+    "@things-factory/modeller-ui": "^4.3.114",
     "file-saver": "^2.0.2",
     "sortablejs": "^1.10.2"
   },
-  "gitHead": "71a701731b643b32dd78334647dbcc287519aa1d"
+  "gitHead": "6f16bd9dfb3210e848e5118d894424972ed83773"
 }

package/translations/en.json

@@ -113,6 +113,8 @@
   "label.auth": "authority",
   "label.authorization": "authorization",
   "label.auto-rotate": "auto rotate",
+  "label.auto refresh board view": "auto refresh board view",
+  "label.auto refresh checking interval (minutes)": "label.auto refresh checking interval (minutes)",
   "label.axes": "axes",
   "label.axis-max-auto": "Max Auto",
   "label.axis-max": "Max",
@@ -610,6 +612,7 @@
   "text.want-to-confirm": "Do you want to release this version?",
   "text.want-to-request-confirm": "Do you want to change this to finished version?",
   "text.want-to-version-up": "Do you want to version up?",
+  "title.board view setting": "Board UI setting",
   "title.copy": "Copy",
   "title.create-board": "create board",
   "title.create-group": "create group",
@@ -627,4 +630,4 @@
   "title.update-user": "Update User",
   "title.update-variable": "Update Variable",
   "title.warn": "Warning"
-}
+}

package/translations/ko.json

@@ -112,6 +112,8 @@
   "label.auth-domain": "auth domain",
   "label.auth": "권한",
   "label.authorization": "authorization",
+  "label.auto refresh board view": "보드 뷰 자동 리프레시",
+  "label.auto refresh checking interval (minutes)": "보드 뷰 자동 리프레시 체크 주기 (분)",
   "label.auto-rotate": "자동 회전",
   "label.axes": "축",
   "label.axis-max-auto": "최대값 자동",
@@ -611,6 +613,7 @@
   "text.want-to-confirm": "Board를 배포 하시겠습니까?",
   "text.want-to-request-confirm": "Board를 작업 완료 상태로 바꾸시겠습니까?",
   "text.want-to-version-up": "새 버전을 생성하시겠습니까?",
+  "title.board view setting": "보드 뷰 설정",
   "title.copy": "복사",
   "title.create-board": "보드 생성",
   "title.create-group": "그룹 생성",
@@ -628,4 +631,4 @@
   "title.update-user": "사용자 수정",
   "title.update-variable": "변수 수정",
   "title.warn": "경고"
-}
+}

package/translations/ms.json

@@ -111,6 +111,8 @@
   "label.auth-domain": "auth domain",
   "label.auth": "kuasa",
   "label.authorization": "kebenaran",
+  "label.auto refresh board view": "auto refresh board view",
+  "label.auto refresh checking interval (minutes)": "label.auto refresh checking interval (minutes)",
   "label.auto-rotate": "auto putar",
   "label.axes": "paksi",
   "label.axis-max-auto": "max auto",
@@ -610,6 +612,7 @@
   "text.want-to-confirm": "adakah anda mahu keluarkan versi ini?",
   "text.want-to-request-confirm": "adakah anda mahu ubah ini ke versi yang telah siap?",
   "text.want-to-version-up": "adakah anda mahu tambah versi?",
+  "title.board view setting": "Board UI setting",
   "title.copy": "salin",
   "title.create-board": "cipta peristiwa",
   "title.create-group": "cipta kumpulan",
@@ -627,4 +630,4 @@
   "title.update-user": "kemaskini pengguna",
   "title.update-variable": "kemaskini pemboleh ubah",
   "title.warn": "amaran"
-}
+}

package/translations/zh.json

@@ -111,6 +111,8 @@
   "label.auth-domain": "验证域",
   "label.auth": "权限",
   "label.authorization": "授权",
+  "label.auto refresh board view": "auto refresh board view",
+  "label.auto refresh checking interval (minutes)": "label.auto refresh checking interval (minutes)",
   "label.auto-rotate": "自动旋转",
   "label.axes": "轴",
   "label.axis-max-auto": "自动计算最大值",
@@ -612,6 +614,7 @@
   "text.want-to-request-confirm": "是否执行审批申请？",
   "text.want-to-self-confirm": "是否希望自我审批？",
   "text.want-to-version-up": "是否希望升级创建新版本？",
+  "title.board view setting": "Board UI setting",
   "title.copy": "复制",
   "title.create-board": "创建标签",
   "title.create-group": "创建组",
@@ -629,4 +632,4 @@
   "title.update-user": "更新用户",
   "title.update-variable": "更新变量",
   "title.warn": "警告"
-}
+}