@things-factory/shell 7.0.1-alpha.4 → 7.0.1-alpha.43

package/dist-server/typeorm/round-transform.js

@@ -10,7 +10,7 @@ exports.roundTransformer = {
      * @param {number | null} value - Floating point value to round or null
      * @returns {number | null} - Rounded number or null
      */
-    to: (value) => (value !== null && !isNaN(value) ? Math.round(value * 100) / 100 : null),
+    to: (value) => (value !== null && !isNaN(value) ? Math.round(value * 10000) / 10000 : undefined),
     /**
      * Returns the entity field value as it is without any transformation when reading from the database.
      * @param {number} value - Number value read from the database

package/dist-server/typeorm/round-transform.js.map

@@ -1 +1 @@
-{"version":3,"file":"round-transform.js","sourceRoot":"","sources":["../../server/typeorm/round-transform.ts"],"names":[],"mappings":";;;AAEA;;GAEG;AACU,QAAA,gBAAgB,GAAqB;IAChD;;;;OAIG;IACH,EAAE,EAAE,CAAC,KAAoB,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;IAEtG;;;;OAIG;IACH,IAAI,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK;CAC/B,CAAA","sourcesContent":["import { ValueTransformer } from 'typeorm'\n\n/**\n * ValueTransformer object for rounding floating point values.\n */\nexport const roundTransformer: ValueTransformer = {\n  /**\n   * Rounds the entity field value before storing it in the database.\n   * @param {number | null} value - Floating point value to round or null\n   * @returns {number | null} - Rounded number or null\n   */\n  to: (value: number | null) => (value !== null && !isNaN(value) ? Math.round(value * 100) / 100 : null),\n\n  /**\n   * Returns the entity field value as it is without any transformation when reading from the database.\n   * @param {number} value - Number value read from the database\n   * @returns {number} - The number value as is\n   */\n  from: (value: number) => value\n}\n"]}
+{"version":3,"file":"round-transform.js","sourceRoot":"","sources":["../../server/typeorm/round-transform.ts"],"names":[],"mappings":";;;AAEA;;GAEG;AACU,QAAA,gBAAgB,GAAqB;IAChD;;;;OAIG;IACH,EAAE,EAAE,CAAC,KAAoB,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAE/G;;;;OAIG;IACH,IAAI,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK;CAC/B,CAAA","sourcesContent":["import { ValueTransformer } from 'typeorm'\n\n/**\n * ValueTransformer object for rounding floating point values.\n */\nexport const roundTransformer: ValueTransformer = {\n  /**\n   * Rounds the entity field value before storing it in the database.\n   * @param {number | null} value - Floating point value to round or null\n   * @returns {number | null} - Rounded number or null\n   */\n  to: (value: number | null) => (value !== null && !isNaN(value) ? Math.round(value * 10000) / 10000 : undefined),\n\n  /**\n   * Returns the entity field value as it is without any transformation when reading from the database.\n   * @param {number} value - Number value read from the database\n   * @returns {number} - The number value as is\n   */\n  from: (value: number) => value\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/shell",
-  "version": "7.0.1-alpha.4",
+  "version": "7.0.1-alpha.43",
   "description": "Core module for framework",
   "bin": {
     "things-factory": "bin/things-factory",
@@ -46,12 +46,11 @@
     "@koa/cors": "^5.0.0",
     "@material-design-icons/font": "^0.14.9",
     "@material/mwc-button": "^0.27.0",
-    "@material/mwc-fab": "^0.27.0",
     "@material/mwc-icon": "^0.27.0",
     "@material/mwc-icon-button": "^0.27.0",
     "@material/mwc-slider": "^0.27.0",
     "@material/mwc-textfield": "^0.27.0",
-    "@material/web": "^1.1.1",
+    "@material/web": "^1.4.0",
     "@open-wc/scoped-elements": "^2.1.3",
     "@operato/board": "^2.0.0-alpha.0",
     "@operato/graphql": "^2.0.0-alpha.0",
@@ -60,11 +59,12 @@
     "@operato/shell": "^2.0.0-alpha.0",
     "@operato/typeorm-history": "^2.0.0-alpha.0",
     "@operato/utils": "^2.0.0-alpha.0",
-    "@things-factory/ejs-remote": "^7.0.1-alpha.0",
-    "@things-factory/env": "^7.0.1-alpha.0",
+    "@things-factory/ejs-remote": "^7.0.1-alpha.43",
+    "@things-factory/env": "^7.0.1-alpha.43",
     "@things-factory/operato-license-checker": "^4.0.4",
-    "@things-factory/styles": "^7.0.1-alpha.4",
-    "@things-factory/utils": "^7.0.1-alpha.4",
+    "@things-factory/styles": "^7.0.1-alpha.43",
+    "@things-factory/utils": "^7.0.1-alpha.43",
+    "@webcomponents/scoped-custom-element-registry": "^0.0.9",
     "@webcomponents/webcomponentsjs": "^2.6.0",
     "args": "^5.0.0",
     "broadcastchannel-polyfill": "^1.0.1",
@@ -101,6 +101,7 @@
     "loader-utils": "^2.0.0",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
+    "material-symbols": "^0.17.2",
     "mkdirp": "^1.0.4",
     "moment-timezone": "^0.5.43",
     "mqtt": "^4.3.4",
@@ -118,7 +119,6 @@
     "reselect": "^4.0.0",
     "sass": "^1.50.1",
     "scrollbooster": "^3.0.2",
-    "sweetalert2": "^11.7.3",
     "type-graphql": "^2.0.0-beta.6",
     "typeorm": "^0.3.19",
     "uuid": "^3.4.0",
@@ -134,5 +134,5 @@
     "pg": "^8.7.3",
     "sqlite3": "^5.0.8"
   },
-  "gitHead": "41b951d71135f4e9ae936a85a3cd7a374c5664cc"
+  "gitHead": "683f49608f3d03762ab7649339db81011791fc79"
 }

package/server/server-dev.ts

@@ -20,7 +20,6 @@ import { useServer } from 'graphql-ws/lib/use/ws'
 import { createServer } from 'http'
 import Koa from 'koa'
 import koaBodyParser from 'koa-bodyparser'
-import koaStatic from 'koa-static'
 import compose from 'koa-compose'
 import { historyApiFallback } from 'koa2-connect-history-api-fallback'
 import { WebSocketServer } from 'ws'
@@ -269,17 +268,11 @@ const bootstrap = async () => {
   app.use(graphqlRouter.routes())
   app.use(graphqlRouter.allowedMethods())
 
-  /* should follow this order : history-fallback => webpack-middleware => koaStatic */
+  /* should follow this order : history-fallback => webpack-middleware */
   app.use(historyApiFallback({ whiteList: [] }))
 
   app.use(middleware)
 
-  app.use(
-    koaStatic(compiler.outputPath, {
-      index: false
-    })
-  )
-
   httpServer.listen({ port: PORT }, () => {
     logger.info(`🚀 Server ready at http://0.0.0.0:${PORT}/graphql`)
     logger.info(`🚀 Subscriptions ready at ws://0.0.0.0:${PORT}/graphql`)

package/server/typeorm/round-transform.ts

@@ -9,7 +9,7 @@ export const roundTransformer: ValueTransformer = {
    * @param {number | null} value - Floating point value to round or null
    * @returns {number | null} - Rounded number or null
    */
-  to: (value: number | null) => (value !== null && !isNaN(value) ? Math.round(value * 100) / 100 : null),
+  to: (value: number | null) => (value !== null && !isNaN(value) ? Math.round(value * 10000) / 10000 : undefined),
 
   /**
    * Returns the entity field value as it is without any transformation when reading from the database.

package/views/public/home.html

@@ -52,6 +52,7 @@
     <!-- Performance tip: hint to the browser to start the handshake for the fonts site -->
     <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
     <link href="/node_modules/@material-design-icons/font/index.css" rel="stylesheet" />
+    <link href="/node_modules/material-symbols/index.css" rel="stylesheet" />
     <link rel="stylesheet" href="/theme.css" />
 
     <style>

package/client/elements/custom-alert.js

@@ -1,120 +0,0 @@
-import Swal from 'sweetalert2'
-
-/**
- * Custom Alert utilized sweetalert2 to produce a simple pop-up message box.
- * *Side note: Did not fully utilize sweet alert capability, just added some common usage.
- * @param {string} type - ['success', 'error', 'warning', 'info', 'question']
- * @param {string} icon - ['success', 'error', 'warning', 'info', 'question']
- * @param {string} title - Title for the message box.
- * @param {string} text - Description for the message box. Input can be in html format.
- * @param {string} footer - Footer message. Input can be in html format
- * @param {string} [position = 'center'] - Position of the message box. ['top', 'top-start', 'top-end', 'center', 'center-start', 'center-end', 'bottom', 'bottom-start', 'bottom-end']
- * @param {boolean} toast - Set to 'True' to display as toast.
- * @param {object} confirmButton - Confirm button is an object type. The text and color of the button can be changed by adding 'text' or 'color' property into the object.
- *                                 text is the required field of the object. When the object is populated, the confirm button will automatically shown.
- * @param {object} cancelButton - Cancel button is an object type. The text and color of the button can be changed by adding 'text' or 'color' property into the object.
- *                                text is the required field of the object. When the object is populated, the cancel button will automatically shown.
- * @param {boolean} [invertButton = false] - Invert button to swap the position of the buttons.
- *                                           eg. Confirm button on the right, Cancel button on the left.
- * @param {function} callback - Accepts a function with an input parameter. Will invoked after swal.fire. It is a promise chaining function.
- * @param {function} onBeforeOpen - Accepts a function with no parameter. Function to run when modal built, but not shown yet. Provides modal DOM element as the first argument.
- * @param {function} onOpen - Accepts a function with no parameter. Function to run when modal opens, provides modal DOM element as the first argument.
- * @param {function} onRender - Accepts a function with no parameter. Function to run after modal DOM has been updated. eg. After Swal.fire() or Swal.update()
- * @param {function} onClose - Accepts a function with no parameter. Function to run when modal closes, provides modal DOM element as the first argument.
- * @param {function} onAfterClose - Accepts a function with no parameter. Function to run after modal has been disposed.
- * @param {boolean} [debug = false] - Check all parameters are set properly. When set to 'true', simple checking will be done on the input parameters to verify the type.
- */
-
-export async function CustomAlert({
-  type = 'info',
-  icon,
-  title,
-  text,
-  allowOutsideClick = true,
-  allowEscapeKey = true,
-  footer,
-  position = 'center',
-  toast,
-  timer,
-  confirmButton = {},
-  cancelButton = {},
-  invertButton = false,
-  callback,
-  onBeforeOpen,
-  onOpen,
-  onRender,
-  onClose,
-  onAfterClose,
-  debug = false
-}) {
-  try {
-    if (debug) {
-      let arrTypes = ['success', 'error', 'warning', 'info', 'question']
-      let err = ''
-      if (!arrTypes.includes(type)) {
-        err = err + 'Invalid Alert Type.\n'
-      }
-
-      if (title && typeof title !== 'string') err = err + 'Invalid Title.\n'
-      if (text && typeof text !== 'string') err = err + 'Invalid Text.\n'
-      if (footer && typeof text !== 'string') err = err + 'Invalid Footer.\n'
-      if (typeof position !== 'string') err = err + 'Invalid Position.\n'
-      if (toast && typeof toast !== 'boolean') err = err + 'Invalid Footer.\n'
-      if (
-        Object.keys(confirmButton).length > 0 &&
-        (typeof confirmButton !== 'object' || !confirmButton.hasOwnProperty('text'))
-      )
-        err = err + 'Invalid Confirm Button.\n'
-      if (
-        Object.keys(cancelButton).length > 0 &&
-        (typeof cancelButton !== 'object' || !cancelButton.hasOwnProperty('text'))
-      )
-        err = err + 'Invalid Cancel Button.\n'
-
-      if (err !== '') throw new Error(err)
-    }
-
-    const result = await Swal.fire({
-      icon: icon || type,
-      title: title,
-      text: text,
-      timer: timer ? timer:0,
-      timerProgressBar: timer ? true : 0,
-      allowOutsideClick: allowOutsideClick,
-      allowEscapeKey: allowEscapeKey,
-      footer: footer,
-      position: position,
-      showConfirmButton: Object.keys(confirmButton).length > 0 ? true : false,
-      showCancelButton: Object.keys(cancelButton).length > 0 ? true : false,
-      confirmButtonText: confirmButton.hasOwnProperty('text') ? confirmButton.text : 'confirm',
-      cancelButtonText: cancelButton.hasOwnProperty('text') ? cancelButton.text : 'cancel',
-      confirmButtonColor: confirmButton.hasOwnProperty('color') ? confirmButton.color : '#22a6a7',
-      cancelButtonColor: cancelButton.hasOwnProperty('color') ? cancelButton.color : '#cfcfcf',
-      toast: toast,
-      reverseButtons: invertButton,
-      willOpen: () => {
-        onBeforeOpen ? onBeforeOpen() : undefined
-      },
-      didOpen: () => {
-        onOpen ? onOpen() : undefined
-      },
-      didRender: () => {
-        onRender ? onRender() : undefined
-      },
-      willClose: () => {
-        onClose ? onClose() : undefined
-      },
-      didClose: () => {
-        onAfterClose ? onAfterClose() : undefined
-      }
-    })
-
-    if (callback && typeof callback === 'function') {
-      callback(result)
-    } else {
-      return Promise.resolve(result)
-    }
-  } catch (error) {
-    console.log('%c(Custom-Alert)\n' + error, 'color:Red')
-  }
-}

package/client/elements/index.js

@@ -1,4 +0,0 @@
-export * from './oops-note'
-export * from './oops-spinner'
-export * from './oops-progress'
-export * from './custom-alert'

package/client/elements/oops-note.js

@@ -1,49 +0,0 @@
-import { LitElement, html, css } from 'lit'
-
-import '@material/mwc-icon'
-
-export class OopsNote extends LitElement {
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-        text-align: center;
-      }
-      mwc-icon {
-        font: var(--oops-note-icon-font);
-        color: var(--oops-note-icon-color);
-        border: var(--oops-note-icon-border);
-        border-radius: var(--oops-note-icon-border-radius);
-        padding: var(--oops-note-icon-padding);
-      }
-      [title] {
-        margin: var(--oops-note-title-margin);
-        font: var(--oops-note-title-font);
-        color: var(--oops-note-title-color);
-        text-transform: capitalize;
-      }
-      [description] {
-        font: var(--oops-note-description-font);
-        color: var(--oops-note-description-color);
-      }
-    `
-  }
-
-  static get properties() {
-    return {
-      icon: String,
-      title: String,
-      description: String
-    }
-  }
-
-  render() {
-    return html`
-      <mwc-icon>${this.icon}</mwc-icon>
-      <div title>${this.title}</div>
-      <div description>${this.description}</div>
-    `
-  }
-}
-
-customElements.define('oops-note', OopsNote)

package/client/elements/oops-progress.js

@@ -1,81 +0,0 @@
-import gql from 'graphql-tag'
-import { html, LitElement } from 'lit'
-
-import { subscribe } from '@operato/graphql'
-
-export class OopsProgress extends LitElement {
-  static get properties() {
-    return {
-      tag: String,
-      subscription: Boolean
-    }
-  }
-
-  render() {
-    return html` <slot></slot> `
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-    this.stopSubscribe()
-  }
-
-  get subscription() {
-    return this._subscription
-  }
-
-  set subscription(subscription) {
-    console.warn('oops-progress#subscription is readonly property')
-  }
-
-  async updated(changes) {
-    if (changes.has('tag') && this.subscription) {
-      await this.stopSubscribe()
-    }
-  }
-
-  async startSubscribe() {
-    if (!this.tag || this._subscription) {
-      return
-    }
-
-    this._subscription = await subscribe(
-      {
-        query: gql`
-          subscription {
-            data(tag: "${this.tag}") {
-              tag
-              data
-            }
-          }`
-      },
-      {
-        next: async ({ data }) => {
-          if (data) {
-            const { progress = 0, message = '' } = data?.data?.data || {}
-            this.dispatchEvent(
-              new CustomEvent('progress', {
-                detail: {
-                  progress,
-                  message
-                }
-              })
-            )
-
-            if (progress >= 100) {
-              await this.stopSubscribe()
-              this.dispatchEvent(new CustomEvent('finish'))
-            }
-          }
-        }
-      }
-    )
-  }
-
-  async stopSubscribe() {
-    await this._subscription?.unsubscribe()
-    delete this._subscription
-  }
-}
-
-customElements.define('oops-progress', OopsProgress)

package/client/elements/oops-spinner.js

@@ -1,31 +0,0 @@
-import { LitElement, html, css } from 'lit'
-
-export class OopsSpinner extends LitElement {
-  static get styles() {
-    return css`
-      :host {
-        width: 70px;
-        height: 70px;
-        margin: 0 auto;
-        background: url(/assets/images/spinner.png) 0 0 no-repeat;
-        background-size: 700%;
-        animation: spinner steps(6) 2s infinite both;
-      }
-
-      @keyframes spinner {
-        0% {
-          background-position: 0%;
-        }
-        100% {
-          background-position: 100%;
-        }
-      }
-    `
-  }
-
-  render() {
-    return html``
-  }
-}
-
-customElements.define('oops-spinner', OopsSpinner)

package/helps/components/oops-progress.md

@@ -1,73 +0,0 @@
-# OOPS Progress 컴포넌트
-
-긴 시간 진행되는 작업의 진행 상황을 표현해주기 위해 서버에 진행율을 Subscribe하는 클라이언트 컴포넌트이다.
-이 컴포넌트는 자체적으로 시각적 요소를 포함하지 않지만, 시각적 표현을 위해서 자식 노드(Light DOM)를 포함할 수는 있다.
-
-## properties
-
-- tag: String 서브스크립션 태그이며, 서버의 'publishProgress'의 tag와 일치시키도록 한다.
-- subscription: String (readonly) 이 속성이 값을 가지고 있으면, 서브스크립션 중임을 의미한다.
-
-## methods
-
-- startSubscribe() 진행율 구독을 시작한다.
-- stopSubscribe() 진행율 구독을 종료한다.(서버쪽 작업의 종료를 의미하지 않으며, 클라이언트에서 구독을 종료한다는 의미임.)
-
-## event
-
-- progress(event) 서버로부터 진행율이 Subscribe 되었을 때 발생한다.
-  - event.detail : progress 값을 갖는다.
-- finish(event) 진행율이 100% 도달하면 발생한다.
-
-## 예시
-
-### 클라이언트 사이드
-
-```
-  <oops-progress
-    .tag='progress-pending-job'
-    @progress=${e => {
-      this.progress = e.detail
-    }}
-    @finish=${() => {
-      console.log('complete')
-    }}
-    ?hidden=${progress < 0 || progress > 100}
-  >
-    <div>
-      <mwc-linear-progress .progress=${progress / 100}></mwc-linear-progress>
-      <span>Progress : ${progress} % (${message})</span>
-    </div>
-  </oops-progress>
-
-```
-
-### 서버사이드
-
-```
-import { sleep } from '@things-factory/utils'
-
-...
-
-@Mutation(returns => String, { description: 'To reference of pending job progress' })
-async referencePendingJob(
-  @Root() _,
-  @Ctx() context: any
-) : Promise<string> {
-
-  const { domain } = context.state
-
-  for(var i = 0;i <= 100;i++) {
-    await sleep(100)
-
-    publishProgress({
-      domain,
-      tag: 'progress-pending-job',
-      progress: i,
-      message: `${i * 10} / 1000`
-    })
-  }
-
-  return 'success'
-}
-```