@fmsim/fmsim-restful 0.0.49

package/dist-client/pages/restful-board-modeller-page.js

@@ -0,0 +1,272 @@
+import { __decorate, __metadata } from "tslib";
+import './things-scene-components.import';
+import '@fmsim/board/ox-board-modeller.js';
+import { css, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+import { BoardModeller } from '@fmsim/board/ox-board-modeller.js';
+import { OxPropertyEditor } from '@operato/property-editor';
+import { PageView, store } from '@operato/shell';
+import { fetchBoardById, updateBoard } from '@fmsim/api/restful.js';
+import { provider } from '@fmsim/layout-view';
+import components from './things-scene-components-with-tools.import';
+let BoardModellerPage = class BoardModellerPage extends connect(store)(PageView) {
+    constructor() {
+        super();
+        components.forEach(({ templates = [], groups = [] }) => {
+            groups.forEach(group => BoardModeller.registerGroup(group));
+            BoardModeller.registerTemplate(templates);
+        });
+        /* 컴포넌트에서 정의된 에디터들을 MODELLER_EDITORS에 등록 */
+        var addedEditors = {};
+        for (let component in components) {
+            let { editors } = components[component];
+            editors &&
+                editors.forEach(editor => {
+                    let { type, element } = editor;
+                    addedEditors[type] = element;
+                });
+        }
+        OxPropertyEditor.register(addedEditors);
+        this.boardName = '';
+        this.model = null;
+        this.themes = null;
+        this.baseUrl = '';
+        this.selected = [];
+        this.mode = 1;
+        this.hideProperty = false;
+        this.overlay = null;
+        this.scene = null;
+        this.fonts = [];
+        this.board = null;
+        this.componentGroupList = BoardModeller.groups;
+    }
+    get context() {
+        return {
+            title: this.board ? this.boardName : this.preparing ? 'Fetching board...' : 'Board Not Found',
+            help: 'board-modeller/modeller',
+            widebleed: true
+        };
+    }
+    get oopsNote() {
+        return {
+            icon: 'color_lens',
+            title: 'EMPTY BOARD',
+            description: 'There are no board to be designed'
+        };
+    }
+    async refresh() {
+        var _a;
+        if (!this.boardId) {
+            this.board = null;
+            this.model = null;
+            return;
+        }
+        try {
+            this.preparing = true;
+            this.updateContext();
+            var response = (_a = (await fetchBoardById(this.boardId))) === null || _a === void 0 ? void 0 : _a.data;
+            if (!response) {
+                throw `Board fetch Failed(${this.boardId})`;
+            }
+            var { board, themes } = response;
+            if (!board) {
+                this.board = null;
+                throw 'board not found';
+            }
+            this.board = Object.assign(Object.assign({}, board), { model: Object.assign({}, JSON.parse(board.model)) });
+            this.boardName = this.board.name;
+            this.model = Object.assign({}, this.board.model);
+            this.themes = themes === null || themes === void 0 ? void 0 : themes.items.reduce((style, theme) => {
+                style[theme.name] = theme.value;
+                return style;
+            }, {});
+        }
+        catch (ex) {
+            document.dispatchEvent(new CustomEvent('notify', {
+                detail: {
+                    level: 'error',
+                    message: ex,
+                    ex
+                }
+            }));
+        }
+        finally {
+            this.preparing = false;
+            this.updateContext();
+        }
+    }
+    updated(changes) {
+        if (changes.has('boardId')) {
+            this.refresh();
+        }
+    }
+    pageUpdated(changes, lifecycle) {
+        var _a;
+        if (this.active) {
+            this.boardId = lifecycle.resourceId;
+        }
+        else {
+            this.boardId = null;
+            this.model = null;
+            (_a = this.modeller) === null || _a === void 0 ? void 0 : _a.close();
+        }
+    }
+    stateChanged(state) {
+        this.baseUrl = state.route.rootPath;
+        this.fonts = state.font;
+    }
+    render() {
+        var oops = !this.preparing && !this.model && this.oopsNote;
+        return oops
+            ? html ` <oops-note icon=${oops.icon} title=${oops.title} description=${oops.description}></oops-note> `
+            : html `
+          <ox-board-modeller
+            .boardName=${this.boardName}
+            .mode=${this.mode}
+            @mode-changed=${e => {
+                this.mode = e.detail.value;
+            }}
+            .model=${this.model}
+            @model-changed=${e => {
+                this.model = e.detail.value;
+            }}
+            .scene=${this.scene}
+            @scene-changed=${e => {
+                this.scene = e.detail.value;
+            }}
+            .selected=${this.selected}
+            @selected-changed=${e => {
+                this.selected = e.detail.value;
+            }}
+            .baseUrl=${this.baseUrl}
+            .provider=${provider}
+            @save-model=${e => this.saveBoard()}
+            .componentGroupList=${this.componentGroupList}
+            .fonts=${this.fonts}
+            .themes=${this.themes}
+            .hideProperty=${this.hideProperty}
+          >
+          </ox-board-modeller>
+        `;
+    }
+    async updateBoard() {
+        try {
+            this.preparing = true;
+            var { id, name, description, groupId } = this.board;
+            var model = JSON.stringify(this.scene.model);
+            await updateBoard({ id, name, description, model, groupId }, 'modeller');
+            document.dispatchEvent(new CustomEvent('notify', {
+                detail: {
+                    level: 'info',
+                    message: 'saved'
+                }
+            }));
+        }
+        catch (ex) {
+            document.dispatchEvent(new CustomEvent('notify', {
+                detail: {
+                    level: 'error',
+                    message: ex,
+                    ex: ex
+                }
+            }));
+        }
+        finally {
+            this.preparing = false;
+        }
+        this.updateContext();
+    }
+    async saveBoard() {
+        await this.updateBoard();
+    }
+};
+BoardModellerPage.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        overflow: hidden;
+        position: relative;
+      }
+
+      board-modeller {
+        flex: 1;
+      }
+
+      oops-note {
+        display: block;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+    `
+];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], BoardModellerPage.prototype, "boardId", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], BoardModellerPage.prototype, "boardName", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], BoardModellerPage.prototype, "model", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], BoardModellerPage.prototype, "themes", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], BoardModellerPage.prototype, "baseUrl", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], BoardModellerPage.prototype, "selected", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], BoardModellerPage.prototype, "mode", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], BoardModellerPage.prototype, "hideProperty", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], BoardModellerPage.prototype, "overlay", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], BoardModellerPage.prototype, "scene", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], BoardModellerPage.prototype, "componentGroupList", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], BoardModellerPage.prototype, "fonts", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], BoardModellerPage.prototype, "propertyEditor", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], BoardModellerPage.prototype, "preparing", void 0);
+__decorate([
+    query('ox-board-modeller'),
+    __metadata("design:type", BoardModeller)
+], BoardModellerPage.prototype, "modeller", void 0);
+BoardModellerPage = __decorate([
+    customElement('restful-board-modeller-page'),
+    __metadata("design:paramtypes", [])
+], BoardModellerPage);
+export { BoardModellerPage };
+//# sourceMappingURL=restful-board-modeller-page.js.map

package/dist-client/pages/restful-board-modeller-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"restful-board-modeller-page.js","sourceRoot":"","sources":["../../client/pages/restful-board-modeller-page.ts"],"names":[],"mappings":"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","sourcesContent":["import './things-scene-components.import'\nimport '@fmsim/board/ox-board-modeller.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { BoardModeller } from '@fmsim/board/ox-board-modeller.js'\nimport { OxPropertyEditor } from '@operato/property-editor'\nimport { PageView, store } from '@operato/shell'\n\nimport { fetchBoardById, updateBoard } from '@fmsim/api/restful.js'\nimport { provider } from '@fmsim/layout-view'\nimport components from './things-scene-components-with-tools.import'\n\n@customElement('restful-board-modeller-page')\nexport class BoardModellerPage extends connect(store)(PageView) {\n  constructor() {\n    super()\n\n    components.forEach(({ templates = [], groups = [] }) => {\n      groups.forEach(group => BoardModeller.registerGroup(group))\n      BoardModeller.registerTemplate(templates)\n    })\n\n    /* 컴포넌트에서 정의된 에디터들을 MODELLER_EDITORS에 등록 */\n    var addedEditors = {}\n    for (let component in components) {\n      let { editors } = components[component]\n\n      editors &&\n        editors.forEach(editor => {\n          let { type, element } = editor\n\n          addedEditors[type] = element\n        })\n    }\n\n    OxPropertyEditor.register(addedEditors)\n\n    this.boardName = ''\n    this.model = null\n    this.themes = null\n    this.baseUrl = ''\n    this.selected = []\n    this.mode = 1\n    this.hideProperty = false\n    this.overlay = null\n    this.scene = null\n    this.fonts = []\n    this.board = null\n    this.componentGroupList = BoardModeller.groups\n  }\n\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        overflow: hidden;\n        position: relative;\n      }\n\n      board-modeller {\n        flex: 1;\n      }\n\n      oops-note {\n        display: block;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n      }\n    `\n  ]\n\n  @property({ type: String }) boardId?: string | null\n  @property({ type: String }) boardName?: string\n  @property({ type: Object }) model: any\n  @property({ type: Object }) themes: any\n  @property({ type: String }) baseUrl?: string\n  @property({ type: Array }) selected: any\n  @property({ type: Number }) mode?: number\n  @property({ type: Boolean }) hideProperty?: boolean\n  @property({ type: String }) overlay?: string | null\n  @property({ type: Object }) scene: any\n  @property({ type: Array }) componentGroupList?: any\n  @property({ type: Array }) fonts: any\n  @property({ type: Array }) propertyEditor: any\n  @property({ type: Boolean }) preparing?: boolean\n\n  board: any\n  @query('ox-board-modeller') modeller?: BoardModeller\n\n  get context() {\n    return {\n      title: this.board ? this.boardName : this.preparing ? 'Fetching board...' : 'Board Not Found',\n      help: 'board-modeller/modeller',\n      widebleed: true\n    }\n  }\n\n  get oopsNote() {\n    return {\n      icon: 'color_lens',\n      title: 'EMPTY BOARD',\n      description: 'There are no board to be designed'\n    }\n  }\n\n  async refresh() {\n    if (!this.boardId) {\n      this.board = null\n      this.model = null\n\n      return\n    }\n    try {\n      this.preparing = true\n      this.updateContext()\n\n      var response = (await fetchBoardById(this.boardId))?.data\n      if (!response) {\n        throw `Board fetch Failed(${this.boardId})`\n      }\n\n      var { board, themes } = response\n\n      if (!board) {\n        this.board = null\n        throw 'board not found'\n      }\n\n      this.board = {\n        ...board,\n        model: {\n          ...JSON.parse(board.model)\n        }\n      }\n\n      this.boardName = this.board.name\n      this.model = {\n        ...this.board.model\n      }\n      this.themes = themes?.items.reduce((style, theme) => {\n        style[theme.name] = theme.value\n        return style\n      }, {})\n    } catch (ex) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'error',\n            message: ex,\n            ex\n          }\n        })\n      )\n    } finally {\n      this.preparing = false\n      this.updateContext()\n    }\n  }\n\n  updated(changes) {\n    if (changes.has('boardId')) {\n      this.refresh()\n    }\n  }\n\n  pageUpdated(changes, lifecycle) {\n    if (this.active) {\n      this.boardId = lifecycle.resourceId\n    } else {\n      this.boardId = null\n      this.model = null\n      this.modeller?.close()\n    }\n  }\n\n  stateChanged(state) {\n    this.baseUrl = state.route.rootPath\n    this.fonts = state.font\n  }\n\n  render() {\n    var oops = !this.preparing && !this.model && this.oopsNote\n\n    return oops\n      ? html` <oops-note icon=${oops.icon} title=${oops.title} description=${oops.description}></oops-note> `\n      : html`\n          <ox-board-modeller\n            .boardName=${this.boardName}\n            .mode=${this.mode}\n            @mode-changed=${e => {\n              this.mode = e.detail.value\n            }}\n            .model=${this.model}\n            @model-changed=${e => {\n              this.model = e.detail.value\n            }}\n            .scene=${this.scene}\n            @scene-changed=${e => {\n              this.scene = e.detail.value\n            }}\n            .selected=${this.selected}\n            @selected-changed=${e => {\n              this.selected = e.detail.value\n            }}\n            .baseUrl=${this.baseUrl}\n            .provider=${provider}\n            @save-model=${e => this.saveBoard()}\n            .componentGroupList=${this.componentGroupList}\n            .fonts=${this.fonts}\n            .themes=${this.themes}\n            .hideProperty=${this.hideProperty}\n          >\n          </ox-board-modeller>\n        `\n  }\n\n  async updateBoard() {\n    try {\n      this.preparing = true\n\n      var { id, name, description, groupId } = this.board\n      var model = JSON.stringify(this.scene.model)\n\n      await updateBoard({ id, name, description, model, groupId }, 'modeller')\n\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'info',\n            message: 'saved'\n          }\n        })\n      )\n    } catch (ex) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'error',\n            message: ex,\n            ex: ex\n          }\n        })\n      )\n    } finally {\n      this.preparing = false\n    }\n\n    this.updateContext()\n  }\n\n  async saveBoard() {\n    await this.updateBoard()\n  }\n}\n"]}

package/dist-client/pages/restful-board-viewer-page.d.ts

@@ -0,0 +1,40 @@
+import './things-scene-components.import';
+import '@fmsim/board/ox-board-viewer.js';
+import { BoardViewer } from '@fmsim/board';
+import { PageView } from '@operato/shell';
+declare const BoardViewerPage_base: (new (...args: any[]) => {
+    _storeUnsubscribe: import("redux").Unsubscribe;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    stateChanged(_state: unknown): void;
+    readonly isConnected: boolean;
+}) & typeof PageView;
+export declare class BoardViewerPage extends BoardViewerPage_base {
+    static styles: import("lit").CSSResult[];
+    _board: any;
+    _boardId?: string;
+    _baseUrl?: string;
+    _interactive?: boolean;
+    preparing?: boolean;
+    private showFMBUnitInfoHandler;
+    private popup?;
+    boardViewer: BoardViewer;
+    get oopsNote(): {
+        icon: string;
+        title: string;
+        description: string;
+    };
+    get context(): {
+        title: any;
+    };
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changes: any): void;
+    pageUpdated(changes: any, lifecycle: any): void;
+    stateChanged(state: any): void;
+    refresh(): Promise<void>;
+    showFMBUnitInfo(e: Event): void;
+    hidePopup(): void;
+}
+export {};

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

@@ -0,0 +1,205 @@
+import { __decorate, __metadata } from "tslib";
+import './things-scene-components.import';
+import '@fmsim/board/ox-board-viewer.js';
+import { css, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+import { BoardViewer } from '@fmsim/board';
+import { store, PageView } from '@operato/shell';
+import { fetchBoardById } from '@fmsim/api/restful.js';
+import { provider } from '@fmsim/layout-view';
+let BoardViewerPage = class BoardViewerPage extends connect(store)(PageView) {
+    constructor() {
+        super(...arguments);
+        this.showFMBUnitInfoHandler = this.showFMBUnitInfo.bind(this);
+    }
+    get oopsNote() {
+        return {
+            icon: 'insert_chart_outlined',
+            title: 'EMPTY BOARD',
+            description: 'There are no board to be shown'
+        };
+    }
+    get context() {
+        return {
+            /* can set the page title with the 'title' parameter. */
+            title: this.lifecycle.params['title'] ||
+                (this._board ? this._board.name : this.preparing ? 'Fetching board...' : 'Board Not Found')
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('fetchFmbModelDataByMouseEvent', this.showFMBUnitInfoHandler);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('fetchFmbModelDataByMouseEvent', this.showFMBUnitInfoHandler);
+    }
+    render() {
+        var oops = !this.preparing && !this._board && this.oopsNote;
+        return oops
+            ? html ` <oops-note icon=${oops.icon} title=${oops.title} description=${oops.description}></oops-note> `
+            : html `
+          <ox-board-viewer
+            .board=${this._board}
+            .provider=${provider}
+            ?hide-fullscreen=${this._interactive}
+            ?hide-navigation=${this._interactive}
+          ></ox-board-viewer>
+
+          <slot></slot>
+        `;
+    }
+    updated(changes) {
+        if (changes.has('_boardId')) {
+            this.refresh();
+        }
+    }
+    pageUpdated(changes, lifecycle) {
+        if (this.active) {
+            this.hidePopup();
+            this._boardId = lifecycle.resourceId;
+            this._interactive = lifecycle.params['interactive'] === 'true';
+        }
+        else {
+            /*
+             * 비활성화된 페이지에서 render update가 발생하지 않으므로, 강제로 scene을 close 한다.
+             * 화면이 inactive 될 때, 굳이 scene을 close하는 이유는,
+             * 새로운 board가 선택되어 뷰어가 열릴 때, 기존 보드 잔상이 보이지 않도록 하기위해서이다.
+             */
+            if (this._boardId) {
+                let boardViewer = this.boardViewer;
+                boardViewer && boardViewer.closeScene();
+            }
+            this._boardId = '';
+        }
+    }
+    stateChanged(state) {
+        this._baseUrl = state.app.baseUrl;
+    }
+    async refresh() {
+        var _a;
+        if (!this._boardId) {
+            this._board = null;
+            return;
+        }
+        try {
+            this.preparing = true;
+            this.updateContext();
+            var { board, themes } = ((_a = (await fetchBoardById(this._boardId))) === null || _a === void 0 ? void 0 : _a.data) || {};
+            const style = themes === null || themes === void 0 ? void 0 : themes.items.reduce((style, theme) => {
+                style[theme.name] = theme.value;
+                return style;
+            }, {});
+            if (!board) {
+                this._board = null;
+                throw 'board not found';
+            }
+            this._board = Object.assign(Object.assign({}, board), { model: Object.assign({}, JSON.parse(board.model)), style });
+        }
+        catch (ex) {
+            document.dispatchEvent(new CustomEvent('notify', {
+                detail: {
+                    level: 'error',
+                    message: ex,
+                    ex
+                }
+            }));
+        }
+        finally {
+            this.preparing = false;
+            this.updateContext();
+        }
+    }
+    showFMBUnitInfo(e) {
+        var _a, _b;
+        e.stopPropagation();
+        const { type: etype, model, event, data } = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || {};
+        const { id, type } = model || {};
+        console.log(`${id}:${type} ${etype}`);
+        if (etype == 'hover') {
+            return;
+        }
+        const unit = ((_b = e.detail) === null || _b === void 0 ? void 0 : _b.value) || {};
+        if (!this.popup) {
+            const popup = document.createElement('fmb-unit-info');
+            popup.addEventListener('close', e => {
+                e.stopPropagation();
+                this.hidePopup();
+            });
+            this.appendChild(popup);
+            this.popup = popup;
+        }
+        this.popup.unit = unit;
+    }
+    hidePopup() {
+        if (this.popup) {
+            this.removeChild(this.popup);
+            delete this.popup;
+        }
+    }
+};
+BoardViewerPage.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        width: 100%; /* 전체화면보기를 위해서 필요함. */
+        height: 100%;
+
+        overflow: hidden;
+        position: relative;
+      }
+
+      ox-board-viewer {
+        flex: 1;
+      }
+
+      ::slotted(fmb-unit-info) {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        width: 200px;
+        opacity: 0.9;
+        box-shadow: 2px 2px 4px gray;
+      }
+
+      oops-note {
+        display: block;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], BoardViewerPage.prototype, "_board", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], BoardViewerPage.prototype, "_boardId", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], BoardViewerPage.prototype, "_baseUrl", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], BoardViewerPage.prototype, "_interactive", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], BoardViewerPage.prototype, "preparing", void 0);
+__decorate([
+    query('ox-board-viewer'),
+    __metadata("design:type", BoardViewer)
+], BoardViewerPage.prototype, "boardViewer", void 0);
+BoardViewerPage = __decorate([
+    customElement('restful-board-viewer-page')
+], BoardViewerPage);
+export { BoardViewerPage };
+//# sourceMappingURL=restful-board-viewer-page.js.map

package/dist-client/pages/restful-board-viewer-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"restful-board-viewer-page.js","sourceRoot":"","sources":["../../client/pages/restful-board-viewer-page.ts"],"names":[],"mappings":"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","sourcesContent":["import './things-scene-components.import'\nimport '@fmsim/board/ox-board-viewer.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { BoardViewer } from '@fmsim/board'\nimport { store, PageView } from '@operato/shell'\nimport { fetchBoardById } from '@fmsim/api/restful.js'\n\nimport { provider, FMBUnitInfo } from '@fmsim/layout-view'\n\n@customElement('restful-board-viewer-page')\nexport class BoardViewerPage extends connect(store)(PageView) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        width: 100%; /* 전체화면보기를 위해서 필요함. */\n        height: 100%;\n\n        overflow: hidden;\n        position: relative;\n      }\n\n      ox-board-viewer {\n        flex: 1;\n      }\n\n      ::slotted(fmb-unit-info) {\n        position: absolute;\n        right: 10px;\n        top: 10px;\n        width: 200px;\n        opacity: 0.9;\n        box-shadow: 2px 2px 4px gray;\n      }\n\n      oops-note {\n        display: block;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n      }\n    `\n  ]\n\n  @property({ type: Object }) _board: any\n  @property({ type: String }) _boardId?: string\n  @property({ type: String }) _baseUrl?: string\n  @property({ type: Boolean }) _interactive?: boolean\n  @property({ type: Boolean }) preparing?: boolean\n\n  private showFMBUnitInfoHandler = this.showFMBUnitInfo.bind(this)\n  private popup?: FMBUnitInfo\n\n  @query('ox-board-viewer') boardViewer!: BoardViewer\n\n  get oopsNote() {\n    return {\n      icon: 'insert_chart_outlined',\n      title: 'EMPTY BOARD',\n      description: 'There are no board to be shown'\n    }\n  }\n\n  get context() {\n    return {\n      /* can set the page title with the 'title' parameter. */\n      title:\n        this.lifecycle.params['title'] ||\n        (this._board ? this._board.name : this.preparing ? 'Fetching board...' : 'Board Not Found')\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    window.addEventListener('fetchFmbModelDataByMouseEvent', this.showFMBUnitInfoHandler)\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n\n    window.removeEventListener('fetchFmbModelDataByMouseEvent', this.showFMBUnitInfoHandler)\n  }\n\n  render() {\n    var oops = !this.preparing && !this._board && this.oopsNote\n\n    return oops\n      ? html` <oops-note icon=${oops.icon} title=${oops.title} description=${oops.description}></oops-note> `\n      : html`\n          <ox-board-viewer\n            .board=${this._board}\n            .provider=${provider}\n            ?hide-fullscreen=${this._interactive}\n            ?hide-navigation=${this._interactive}\n          ></ox-board-viewer>\n\n          <slot></slot>\n        `\n  }\n\n  updated(changes) {\n    if (changes.has('_boardId')) {\n      this.refresh()\n    }\n  }\n\n  pageUpdated(changes, lifecycle) {\n    if (this.active) {\n      this.hidePopup()\n      this._boardId = lifecycle.resourceId\n      this._interactive = lifecycle.params['interactive'] === 'true'\n    } else {\n      /*\n       * 비활성화된 페이지에서 render update가 발생하지 않으므로, 강제로 scene을 close 한다.\n       * 화면이 inactive 될 때, 굳이 scene을 close하는 이유는,\n       * 새로운 board가 선택되어 뷰어가 열릴 때, 기존 보드 잔상이 보이지 않도록 하기위해서이다.\n       */\n      if (this._boardId) {\n        let boardViewer = this.boardViewer\n        boardViewer && boardViewer.closeScene()\n      }\n\n      this._boardId = ''\n    }\n  }\n\n  stateChanged(state) {\n    this._baseUrl = state.app.baseUrl\n  }\n\n  async refresh() {\n    if (!this._boardId) {\n      this._board = null\n      return\n    }\n\n    try {\n      this.preparing = true\n      this.updateContext()\n\n      var { board, themes } = (await fetchBoardById(this._boardId))?.data || ({} as any)\n      const style = themes?.items.reduce((style, theme) => {\n        style[theme.name] = theme.value\n        return style\n      }, {})\n\n      if (!board) {\n        this._board = null\n        throw 'board not found'\n      }\n\n      this._board = {\n        ...board,\n        model: {\n          ...JSON.parse(board.model)\n        },\n        style\n      }\n    } catch (ex) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'error',\n            message: ex,\n            ex\n          }\n        })\n      )\n    } finally {\n      this.preparing = false\n      this.updateContext()\n    }\n  }\n\n  showFMBUnitInfo(e: Event) {\n    e.stopPropagation()\n\n    const { type: etype, model, event, data } = (e as CustomEvent).detail?.value || {}\n    const { id, type } = model || {}\n\n    console.log(`${id}:${type} ${etype}`)\n\n    if (etype == 'hover') {\n      return\n    }\n\n    const unit = (e as CustomEvent).detail?.value || {}\n\n    if (!this.popup) {\n      const popup = document.createElement('fmb-unit-info') as FMBUnitInfo\n      popup.addEventListener('close', e => {\n        e.stopPropagation()\n        this.hidePopup()\n      })\n\n      this.appendChild(popup)\n      this.popup = popup\n    }\n\n    this.popup.unit = unit\n  }\n\n  hidePopup() {\n    if (this.popup) {\n      this.removeChild(this.popup)\n      delete this.popup\n    }\n  }\n}\n"]}

package/dist-client/pages/restful-connection-list-page.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-client/pages/restful-connection-list-page.js

@@ -0,0 +1,12 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { Connection } from './restful-connection';
+let ConnectionListPage = class ConnectionListPage extends Connection {
+    get context() {
+        return Object.assign(Object.assign({}, super.context), { board_topmenu: true });
+    }
+};
+ConnectionListPage = __decorate([
+    customElement('restful-connection-list-page')
+], ConnectionListPage);
+//# sourceMappingURL=restful-connection-list-page.js.map

package/dist-client/pages/restful-connection-list-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"restful-connection-list-page.js","sourceRoot":"","sources":["../../client/pages/restful-connection-list-page.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAGjD,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IACzC,IAAI,OAAO;QACT,uCACK,KAAK,CAAC,OAAO,KAChB,aAAa,EAAE,IAAI,IACpB;IACH,CAAC;CACF,CAAA;AAPK,kBAAkB;IADvB,aAAa,CAAC,8BAA8B,CAAC;GACxC,kBAAkB,CAOvB","sourcesContent":["import { customElement } from 'lit/decorators.js'\n\nimport { Connection } from './restful-connection'\n\n@customElement('restful-connection-list-page')\nclass ConnectionListPage extends Connection {\n  get context() {\n    return {\n      ...super.context,\n      board_topmenu: true\n    }\n  }\n}\n"]}

package/dist-client/pages/restful-connection.d.ts

@@ -0,0 +1,60 @@
+import '@operato/data-grist/ox-grist.js';
+import '@operato/form/ox-search-form.js';
+import { DataGrist } from '@operato/data-grist';
+import { SearchForm } from '@operato/form';
+import { PageView } from '@operato/shell';
+declare const Connection_base: (new (...args: any[]) => {
+    _storeUnsubscribe: import("redux").Unsubscribe;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    stateChanged(_state: unknown): void;
+    readonly isConnected: boolean;
+}) & (new (...args: any[]) => import("lit").LitElement) & typeof PageView;
+export declare class Connection extends Connection_base {
+    static styles: import("lit").CSSResult[];
+    searchConfig?: any[];
+    gristConfig: any;
+    connectors: any;
+    searchForm: SearchForm;
+    dataGrist: DataGrist;
+    _currentPopupName?: string | null;
+    get context(): {
+        title: string;
+        help: string;
+        actions: {
+            icon: string;
+            emphasis: {
+                raised: boolean;
+                outlined: boolean;
+                dense: boolean;
+                danger: boolean;
+            };
+            title: string;
+            action: (name: any) => Promise<void>;
+        }[];
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    pageInitialized(): Promise<void>;
+    pageUpdated(changes: any, lifecycle: any): Promise<void>;
+    fetchHandler({ page, limit, sorters }: {
+        page: any;
+        limit: any;
+        sorters?: never[] | undefined;
+    }): Promise<{
+        total: any;
+        records: any;
+    }>;
+    fetchConnectors(): Promise<void>;
+    _conditionParser(): Promise<{
+        name: string;
+        operator: string;
+        value: string | number | boolean | string[] | undefined;
+        relation: boolean;
+    }[]>;
+    _deleteConnectionManager(name: any): Promise<void>;
+    stateChanged(state: any): Promise<void>;
+    _updateConnectionManager(): Promise<void>;
+    connect(record: any): Promise<void>;
+    disconnect(record: any): Promise<void>;
+}
+export {};