@things-factory/integration-ui 6.1.66 → 6.1.71

package/dist-client/viewparts/scenarios-monitor.js

@@ -0,0 +1,167 @@
+import { __decorate, __metadata } from "tslib";
+import '@operato/data-grist';
+import '@material/mwc-icon-button';
+import './scenario-monitor';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { ScrollbarStyles } from '@operato/styles';
+function IS_SCENARIO_RUNNING(state) {
+    return state && state !== 'UNLOADED';
+}
+let ScenariosMonitor = class ScenariosMonitor extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.running = false;
+    }
+    render() {
+        var scenarios = this.scenarios || [];
+        const mode = this.mode || 'brief';
+        const filter = this.filter || '';
+        return html `
+      <div info>
+        <h2>scenarios</h2>
+        <span>
+          <input .value=${filter} @change=${e => (this.filter = e.target.value)} placeholder="search" />
+          <mwc-icon @click=${e => (this.mode = 'brief')} ?active=${mode == 'brief'}>view_comfy</mwc-icon>
+          <mwc-icon @click=${e => (this.mode = 'detail')} ?active=${mode == 'detail'}>dehaze</mwc-icon>
+        </span>
+      </div>
+
+      <div content>
+        <pending-q-monitor
+          .pendings=${this.pendings}
+          .colorIndex=${this.colorIndex || {}}
+          .running=${this.running}
+        ></pending-q-monitor>
+
+        <div scenarios mode=${mode}>
+          <div flowbox>
+            ${scenarios
+            .filter(scenario => scenario.name.indexOf(filter) == 0)
+            .map(scenario => html `<scenario-monitor .scenario=${scenario} mode=${mode}></scenario-monitor>`)}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+ScenariosMonitor.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        overflow: hidden;
+      }
+
+      [info] {
+        display: flex;
+        margin-bottom: var(--margin-default);
+        padding: var(--padding-narrow) 0;
+        flex-direction: row;
+        align-items: center;
+        border-bottom: 2px solid var(--secondary-color);
+      }
+      [info] h2 {
+        margin: 0;
+        font: var(--subtitle-font);
+        color: var(--secondary-color);
+        text-transform: capitalize;
+      }
+
+      [info] > span {
+        display: flex;
+        margin-left: auto;
+      }
+      [info] input {
+        margin: var(--input-margin);
+        padding: var(--padding-narrow);
+        border: var(--border-dark-color);
+        border-radius: var(--border-radius);
+        font: var(--input-font);
+      }
+      [info] mwc-icon {
+        margin-left: var(--margin-narrow);
+        color: rgba(var(--secondary-color-rgb), 0.6);
+        line-height: 34px;
+        cursor: pointer;
+      }
+      [info] mwc-icon[active] {
+        color: var(--primary-color);
+      }
+
+      [content] {
+        flex: 1;
+
+        display: flex;
+        flex-direction: row;
+
+        overflow: hidden;
+      }
+
+      pending-q-monitor {
+        width: 100px;
+      }
+
+      [scenarios] {
+        flex: 1;
+
+        overflow: auto;
+        display: flex;
+        flex-direction: column;
+      }
+
+      [scenarios] [flowbox] {
+        display: flex;
+        flex-direction: column;
+        min-height: min-content;
+      }
+
+      [scenarios][mode='brief'] [flowbox] {
+        flex-flow: row wrap;
+        align-self: start;
+      }
+
+      scenario-monitor {
+        flex: none;
+        height: fit-content;
+      }
+
+      @media screen and (max-width: 480px) {
+        pending-q-monitor {
+          width: 80px;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], ScenariosMonitor.prototype, "scenarios", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], ScenariosMonitor.prototype, "mode", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], ScenariosMonitor.prototype, "filter", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], ScenariosMonitor.prototype, "pendings", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], ScenariosMonitor.prototype, "colorIndex", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], ScenariosMonitor.prototype, "running", void 0);
+ScenariosMonitor = __decorate([
+    customElement('scenarios-monitor')
+], ScenariosMonitor);
+export { ScenariosMonitor };
+//# sourceMappingURL=scenarios-monitor.js.map

package/dist-client/viewparts/scenarios-monitor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scenarios-monitor.js","sourceRoot":"","sources":["../../client/viewparts/scenarios-monitor.ts"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAA;AAC5B,OAAO,2BAA2B,CAAA;AAClC,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,SAAS,mBAAmB,CAAC,KAAK;IAChC,OAAO,KAAK,IAAI,KAAK,KAAK,UAAU,CAAA;AACtC,CAAC;AAGM,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAA5D;;QAiGwB,YAAO,GAAY,KAAK,CAAA;IAkCvD,CAAC;IAhCC,MAAM;QACJ,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,EAAE,CAAA;QACpC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,OAAO,CAAA;QACjC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QAEhC,OAAO,IAAI,CAAA;;;;0BAIW,MAAM,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;6BAClD,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,YAAY,IAAI,IAAI,OAAO;6BACrD,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,YAAY,IAAI,IAAI,QAAQ;;;;;;sBAM9D,IAAI,CAAC,QAAQ;wBACX,IAAI,CAAC,UAAU,IAAI,EAAE;qBACxB,IAAI,CAAC,OAAO;;;8BAGH,IAAI;;cAEpB,SAAS;aACR,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;aACtD,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAA,+BAA+B,QAAQ,SAAS,IAAI,sBAAsB,CAAC;;;;KAIzG,CAAA;IACH,CAAC;;AAjIM,uBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsFF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;mDAAe;AACzC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8CAAc;AACzC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gDAAgB;AAC3C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;kDAAc;AACxC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAgB;AAC3C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;iDAAyB;AAjG1C,gBAAgB;IAD5B,aAAa,CAAC,mBAAmB,CAAC;GACtB,gBAAgB,CAmI5B;SAnIY,gBAAgB","sourcesContent":["import '@operato/data-grist'\nimport '@material/mwc-icon-button'\nimport './scenario-monitor'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\nfunction IS_SCENARIO_RUNNING(state) {\n  return state && state !== 'UNLOADED'\n}\n\n@customElement('scenarios-monitor')\nexport class ScenariosMonitor extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        overflow: hidden;\n      }\n\n      [info] {\n        display: flex;\n        margin-bottom: var(--margin-default);\n        padding: var(--padding-narrow) 0;\n        flex-direction: row;\n        align-items: center;\n        border-bottom: 2px solid var(--secondary-color);\n      }\n      [info] h2 {\n        margin: 0;\n        font: var(--subtitle-font);\n        color: var(--secondary-color);\n        text-transform: capitalize;\n      }\n\n      [info] > span {\n        display: flex;\n        margin-left: auto;\n      }\n      [info] input {\n        margin: var(--input-margin);\n        padding: var(--padding-narrow);\n        border: var(--border-dark-color);\n        border-radius: var(--border-radius);\n        font: var(--input-font);\n      }\n      [info] mwc-icon {\n        margin-left: var(--margin-narrow);\n        color: rgba(var(--secondary-color-rgb), 0.6);\n        line-height: 34px;\n        cursor: pointer;\n      }\n      [info] mwc-icon[active] {\n        color: var(--primary-color);\n      }\n\n      [content] {\n        flex: 1;\n\n        display: flex;\n        flex-direction: row;\n\n        overflow: hidden;\n      }\n\n      pending-q-monitor {\n        width: 100px;\n      }\n\n      [scenarios] {\n        flex: 1;\n\n        overflow: auto;\n        display: flex;\n        flex-direction: column;\n      }\n\n      [scenarios] [flowbox] {\n        display: flex;\n        flex-direction: column;\n        min-height: min-content;\n      }\n\n      [scenarios][mode='brief'] [flowbox] {\n        flex-flow: row wrap;\n        align-self: start;\n      }\n\n      scenario-monitor {\n        flex: none;\n        height: fit-content;\n      }\n\n      @media screen and (max-width: 480px) {\n        pending-q-monitor {\n          width: 80px;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) scenarios: any\n  @property({ type: String }) mode?: string\n  @property({ type: String }) filter?: string\n  @property({ type: Array }) pendings: any\n  @property({ type: Object }) colorIndex: any\n  @property({ type: Boolean }) running: boolean = false\n\n  render() {\n    var scenarios = this.scenarios || []\n    const mode = this.mode || 'brief'\n    const filter = this.filter || ''\n\n    return html`\n      <div info>\n        <h2>scenarios</h2>\n        <span>\n          <input .value=${filter} @change=${e => (this.filter = e.target.value)} placeholder=\"search\" />\n          <mwc-icon @click=${e => (this.mode = 'brief')} ?active=${mode == 'brief'}>view_comfy</mwc-icon>\n          <mwc-icon @click=${e => (this.mode = 'detail')} ?active=${mode == 'detail'}>dehaze</mwc-icon>\n        </span>\n      </div>\n\n      <div content>\n        <pending-q-monitor\n          .pendings=${this.pendings}\n          .colorIndex=${this.colorIndex || {}}\n          .running=${this.running}\n        ></pending-q-monitor>\n\n        <div scenarios mode=${mode}>\n          <div flowbox>\n            ${scenarios\n              .filter(scenario => scenario.name.indexOf(filter) == 0)\n              .map(scenario => html`<scenario-monitor .scenario=${scenario} mode=${mode}></scenario-monitor>`)}\n          </div>\n        </div>\n      </div>\n    `\n  }\n}\n"]}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@things-factory/integration-ui",
-  "version": "6.1.66",
+  "version": "6.1.71",
   "main": "dist-server/index.js",
-  "browser": "client/index.js",
+  "browser": "dist-client/index.js",
   "things-factory": true,
   "author": "heartyoh <heartyoh@hatiolab.com>",
   "description": "User interface to manage integration scenario.",
@@ -17,10 +17,13 @@
     "directory": "packages/integration-ui"
   },
   "scripts": {
-    "build": "tsc --p tsconfig.json",
-    "build:server": "npm run clean:server && tsc",
-    "clean:server": "rm -rf dist-server",
-    "clean": "npm run clean:server",
+    "build": "npm run build:server && npm run build:client",
+    "copy:files": "copyfiles -e \"./client/**/*.{ts,js,json}\" -u 1 \"./client/**/*\" dist-client",
+    "build:client": "npm run copy:files && npx tsc --p ./client/tsconfig.json",
+    "build:server": "npx tsc --p ./server/tsconfig.json",
+    "clean:client": "npx rimraf dist-client",
+    "clean:server": "npx rimraf dist-server",
+    "clean": "npm run clean:server && npm run clean:client",
     "migration:create": "node ../../node_modules/typeorm/cli.js migration:create -d ./server/migrations"
   },
   "dependencies": {
@@ -39,5 +42,5 @@
     "@things-factory/integration-base": "^6.1.66",
     "moment-timezone": "^0.5.40"
   },
-  "gitHead": "86447edc189a8432999c6dcfce0e32ee7dbd3e5f"
+  "gitHead": "468074de192c57950fc398df7c0eab3deeb2b7c6"
 }

package/client/pages/scenario-importer.js

@@ -1,118 +0,0 @@
-import '@operato/data-grist'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
-
-import { client } from '@operato/graphql'
-import { i18next } from '@operato/i18n'
-import { isMobileDevice } from '@operato/utils'
-
-export class ScenarioImporter extends LitElement {
-  static get properties() {
-    return {
-      columns: Object,
-      scenarios: Array
-    }
-  }
-
-  constructor() {
-    super()
-    this.columns = {
-      list: { fields: ['name', 'description'] },
-      pagination: { infinite: true },
-      columns: [
-        {
-          type: 'string',
-          name: 'name',
-          header: i18next.t('field.name'),
-          width: 150
-        },
-        {
-          type: 'string',
-          name: 'type',
-          header: i18next.t('field.type'),
-          width: 100
-        },
-        {
-          type: 'string',
-          name: 'description',
-          header: i18next.t('field.description'),
-          width: 200
-        },
-        {
-          type: 'crontab',
-          name: 'schedule',
-          header: i18next.t('field.schedule'),
-          width: 80
-        },
-        {
-          type: 'string',
-          name: 'timezone',
-          header: i18next.t('field.timezone'),
-          width: 120
-        },
-        {
-          type: 'checkbox',
-          name: 'active',
-          header: i18next.t('field.active'),
-          width: 60
-        }
-      ]
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-
-          background-color: #fff;
-        }
-        ox-grist {
-          flex: 1;
-        }
-        .button-container {
-          display: flex;
-          margin-left: auto;
-          padding: var(--padding-default);
-        }
-        mwc-button {
-          margin-left: var(--margin-default);
-        }
-      `
-    ]
-  }
-
-  render() {
-    return html`
-      <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.columns}
-        .data="${{ records: this.scenarios }}"
-      ></ox-grist>
-
-      <div class="button-container">
-        <mwc-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</mwc-button>
-      </div>
-    `
-  }
-
-  async save() {
-    const response = await client.mutate({
-      mutation: gql`
-        mutation importScenarios($scenarios: [ScenarioPatch!]!) {
-          importScenarios(scenarios: $scenarios)
-        }
-      `,
-      variables: { scenarios: this.scenarios }
-    })
-
-    if (response.errors?.length) return
-
-    this.dispatchEvent(new CustomEvent('imported'))
-  }
-}
-
-customElements.define('scenario-importer', ScenarioImporter)

package/client/viewparts/scenarios-monitor.js

@@ -1,153 +0,0 @@
-import '@operato/data-grist'
-import '@material/mwc-icon-button'
-import './scenario-monitor'
-
-import { css, html, LitElement } from 'lit'
-
-import { i18next, localize } from '@operato/i18n'
-import { ScrollbarStyles } from '@operato/styles'
-
-function IS_SCENARIO_RUNNING(state) {
-  return state && state !== 'UNLOADED'
-}
-
-export class ScenariosMonitor extends localize(i18next)(LitElement) {
-  static get properties() {
-    return {
-      scenarios: Array,
-      mode: String,
-      filter: String,
-      pendings: Array,
-      colorIndex: Object,
-      running: Boolean
-    }
-  }
-
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-
-          overflow: hidden;
-        }
-
-        [info] {
-          display: flex;
-          margin-bottom: var(--margin-default);
-          padding: var(--padding-narrow) 0;
-          flex-direction: row;
-          align-items: center;
-          border-bottom: 2px solid var(--secondary-color);
-        }
-        [info] h2 {
-          margin: 0;
-          font: var(--subtitle-font);
-          color: var(--secondary-color);
-          text-transform: capitalize;
-        }
-
-        [info] > span {
-          display: flex;
-          margin-left: auto;
-        }
-        [info] input {
-          margin: var(--input-margin);
-          padding: var(--padding-narrow);
-          border: var(--border-dark-color);
-          border-radius: var(--border-radius);
-          font: var(--input-font);
-        }
-        [info] mwc-icon {
-          margin-left: var(--margin-narrow);
-          color: rgba(var(--secondary-color-rgb), 0.6);
-          line-height: 34px;
-          cursor: pointer;
-        }
-        [info] mwc-icon[active] {
-          color: var(--primary-color);
-        }
-
-        [content] {
-          flex: 1;
-
-          display: flex;
-          flex-direction: row;
-
-          overflow: hidden;
-        }
-
-        pending-q-monitor {
-          width: 100px;
-        }
-
-        [scenarios] {
-          flex: 1;
-
-          overflow: auto;
-          display: flex;
-          flex-direction: column;
-        }
-
-        [scenarios] [flowbox] {
-          display: flex;
-          flex-direction: column;
-          min-height: min-content;
-        }
-
-        [scenarios][mode='brief'] [flowbox] {
-          flex-flow: row wrap;
-          align-self: start;
-        }
-
-        scenario-monitor {
-          flex: none;
-          height: fit-content;
-        }
-
-        @media screen and (max-width: 480px) {
-          pending-q-monitor {
-            width: 80px;
-          }
-        }
-      `
-    ]
-  }
-
-  render() {
-    var scenarios = this.scenarios || []
-    const mode = this.mode || 'brief'
-    const filter = this.filter || ''
-
-    return html`
-      <div info>
-        <h2>scenarios</h2>
-        <span>
-          <input .value=${filter} @change=${e => (this.filter = e.target.value)} placeholder="search" />
-          <mwc-icon @click=${e => (this.mode = 'brief')} ?active=${mode == 'brief'}>view_comfy</mwc-icon>
-          <mwc-icon @click=${e => (this.mode = 'detail')} ?active=${mode == 'detail'}>dehaze</mwc-icon>
-        </span>
-      </div>
-
-      <div content>
-        <pending-q-monitor
-          .pendings=${this.pendings}
-          .colorIndex=${this.colorIndex || {}}
-          .running=${this.running}
-        ></pending-q-monitor>
-
-        <div scenarios mode=${mode}>
-          <div flowbox>
-            ${scenarios
-              .filter(scenario => scenario.name.indexOf(filter) == 0)
-              .map(scenario => html`<scenario-monitor .scenario=${scenario} mode=${mode}></scenario-monitor>`)}
-          </div>
-        </div>
-      </div>
-    `
-  }
-}
-
-window.customElements.define('scenarios-monitor', ScenariosMonitor)