@fmsim/fmsim-restful 0.0.49

package/dist-client/viewparts/font-creation-card-new.js

@@ -0,0 +1,267 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { FileDropHelper } from '@operato/utils';
+// import '@things-factory/attachment-ui'
+const btnAddBoard = require('../../assets/icons/board/btn-add-board.svg');
+let FontCreationCard = class FontCreationCard extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.provider = 'google';
+        this.googleFonts = [];
+        this._files = [];
+        this.providers = [
+            { value: 'google', display: 'Google' },
+            // TODO 구글 외 폰트 서비스 구현
+            // { value: 'typekit', display: 'Typekit' },
+            { value: 'custom', display: 'Custom' }
+        ];
+    }
+    async firstUpdated() {
+        FileDropHelper.set(this);
+    }
+    render() {
+        let isProviderGoogle = this.provider == 'google' && this.googleFonts.length > 0;
+        let isFileAttached = this._files.length > 0 ? true : false;
+        return html `
+      <div @click=${e => this.onClickFlip(e)} front><i class="btn-add-board"></i>create font</div>
+
+      <div @click=${e => this.onClickFlip(e)} back>
+        <form @submit=${e => this.onClickSubmit(e)}>
+          <div class="props">
+            <label>${i18next.t('label.provider')}</label>
+            <select
+              name="provider"
+              @change=${e => {
+            this.provider = e.target.value;
+            if (e.target.value === 'google') {
+                fetch(`/all-google-fonts`).then(async (response) => {
+                    if (response.ok)
+                        this.googleFonts = await response.json();
+                    else {
+                        console.warn(`(${response.url}) ${response.status} ${response.statusText}. Could not load Google fonts.`);
+                    }
+                });
+            }
+        }}
+            >
+              ${this.providers.map(p => html ` <option value=${p.value} ?selected=${this.provider == p.value}>${p.display}</option> `)}
+            </select>
+
+            <label>${i18next.t('label.name')}</label>
+            <input type="text" name="${isProviderGoogle ? '' : 'name'}" ?hidden=${isProviderGoogle} />
+            <select name="${isProviderGoogle ? 'name' : ''}" ?hidden=${!isProviderGoogle}>
+              ${isProviderGoogle && this.googleFonts.map(f => html ` <option value=${f}>${f}</option> `)}
+            </select>
+
+            <label ?hidden=${this.provider != 'custom'}>${i18next.t('label.uri')}</label>
+            <input
+              ?hidden=${this.provider != 'custom'}
+              ?disabled=${isFileAttached}
+              .value=${isFileAttached ? this._files[0].name : ''}
+              type="text"
+              name="uri"
+            />
+            <!-- display when attachment module is imported -->
+            <label ?hidden=${this.provider != 'custom'}>${i18next.t('label.file')}</label>
+            <file-selector
+              class=${this.provider != 'custom' ? 'hidden' : ''}
+              name="file"
+              label=${i18next.t('label.select file') || ''}
+              accept=".ttf,.otf,.woff,.woff2,.eot,.svg,.svgz"
+              multiple
+              @file-change=${e => {
+            this._files = Array.from(e.detail.files);
+        }}
+            ></file-selector>
+            <!------------------------------------------------>
+
+            <label>${i18next.t('label.active')}</label>
+            <input type="checkbox" name="active" checked />
+          </div>
+          <div></div>
+          <input type="submit" value=${String(i18next.t('button.create'))} />
+        </form>
+      </div>
+    `;
+    }
+    onClickFlip(e) {
+        if (!['INPUT', 'SELECT', 'OPTION'].find(tagName => tagName === e.target.tagName)) {
+            if (e.currentTarget.hasAttribute('front'))
+                this.reset(); // 입력 폼으로 뒤집기 전에 한 번 리셋
+            this.classList.toggle('flipped');
+        }
+    }
+    async onClickSubmit(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var form = e.target;
+        var detail = {};
+        detail.name = form.elements['name'].value;
+        detail.provider = form.elements['provider'].value;
+        detail.active = form.elements['active'].checked;
+        if (this.provider === 'custom') {
+            detail.uri = form.elements['uri'].value;
+            if ((this._files || []).length > 0) {
+                detail._files = this._files;
+            }
+        }
+        this.dispatchEvent(new CustomEvent('create-font', { detail }));
+    }
+    reset() {
+        var form = this.renderRoot.querySelector('form');
+        if (form) {
+            form.reset();
+        }
+        this._files = [];
+        this.classList.remove('flipped');
+    }
+};
+FontCreationCard.styles = [
+    css `
+      :host {
+        position: relative;
+
+        padding: 0;
+        margin: 0;
+        height: 100%;
+
+        -webkit-transform-style: preserve-3d;
+        transform-style: preserve-3d;
+        -webkit-transition: all 0.5s ease-in-out;
+        transition: all 0.5s ease-in-out;
+      }
+
+      :host(.candrop) [front],
+      :host(.candrop) [back] {
+        border-width: 2px;
+        background-color: #fffde9;
+      }
+
+      :host(.flipped) {
+        -webkit-transform: var(--card-list-flip-transform);
+        transform: var(--card-list-flip-transform);
+      }
+
+      [front],
+      [back] {
+        position: absolute;
+
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+
+        border: var(--card-list-create-border);
+        border-radius: var(--card-list-create-border-radius);
+
+        background-color: #fff;
+
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+      }
+
+      [front] {
+        text-align: center;
+        font-size: 0.8em;
+        color: var(--card-list-create-color);
+        text-transform: capitalize;
+      }
+
+      [back] {
+        -webkit-transform: var(--card-list-flip-transform);
+        transform: var(--card-list-flip-transform);
+        box-sizing: border-box;
+        display: grid;
+      }
+
+      [back] form {
+        padding: var(--card-list-create-form-padding);
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: auto 1fr auto;
+        justify-content: center;
+        align-items: center;
+      }
+
+      [back] form .props {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        display: grid;
+        grid-template-columns: repeat(10, 1fr);
+        grid-row-gap: 7px;
+        justify-content: center;
+        align-items: center;
+      }
+
+      [back] form .props label {
+        grid-column: span 4;
+        font: var(--card-list-create-label-font);
+        color: var(--card-list-create-label-color);
+      }
+
+      [back] form .props input,
+      [back] form .props select {
+        grid-column: span 6;
+        background-color: #fff;
+        border: var(--card-list-create-input-border);
+        border-radius: var(--card-list-create-input-border-radius);
+        font: var(--card-list-create-input-font);
+        color: var(--card-list-create-input-color);
+        width: -moz-available;
+      }
+
+      file-selector {
+        grid-column: span 6;
+        font: var(--card-list-create-input-font);
+        border: none;
+        box-sizing: border-box;
+        padding: 0;
+      }
+
+      [back] input[type='submit'] {
+        background-color: var(--button-background-color) !important;
+        font: var(--button-font);
+        color: var(--button-color) !important;
+        border-radius: var(--button-radius);
+        border: var(--button-border);
+        grid-column: span 10;
+        grid-row: auto / -1;
+      }
+
+      .hidden {
+        display: none !important;
+      }
+
+      .btn-add-board {
+        width: 3.8em;
+        height: 3.8em;
+        margin: auto;
+        margin-top: 20%;
+        background: url(${unsafeCSS(btnAddBoard)}) no-repeat;
+        display: block;
+      }
+    `
+];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], FontCreationCard.prototype, "provider", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], FontCreationCard.prototype, "googleFonts", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], FontCreationCard.prototype, "_files", void 0);
+FontCreationCard = __decorate([
+    customElement('font-creation-card-new')
+], FontCreationCard);
+export { FontCreationCard };
+//# sourceMappingURL=font-creation-card-new.js.map

package/dist-client/viewparts/font-creation-card-new.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-creation-card-new.js","sourceRoot":"","sources":["../../client/viewparts/font-creation-card-new.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { FileDropHelper } from '@operato/utils'\n// import '@things-factory/attachment-ui'\n\nconst btnAddBoard = require('../../assets/icons/board/btn-add-board.svg')\n\n@customElement('font-creation-card-new')\nexport class FontCreationCard extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        position: relative;\n\n        padding: 0;\n        margin: 0;\n        height: 100%;\n\n        -webkit-transform-style: preserve-3d;\n        transform-style: preserve-3d;\n        -webkit-transition: all 0.5s ease-in-out;\n        transition: all 0.5s ease-in-out;\n      }\n\n      :host(.candrop) [front],\n      :host(.candrop) [back] {\n        border-width: 2px;\n        background-color: #fffde9;\n      }\n\n      :host(.flipped) {\n        -webkit-transform: var(--card-list-flip-transform);\n        transform: var(--card-list-flip-transform);\n      }\n\n      [front],\n      [back] {\n        position: absolute;\n\n        width: 100%;\n        height: 100%;\n        margin: 0;\n        padding: 0;\n\n        border: var(--card-list-create-border);\n        border-radius: var(--card-list-create-border-radius);\n\n        background-color: #fff;\n\n        -webkit-backface-visibility: hidden;\n        backface-visibility: hidden;\n      }\n\n      [front] {\n        text-align: center;\n        font-size: 0.8em;\n        color: var(--card-list-create-color);\n        text-transform: capitalize;\n      }\n\n      [back] {\n        -webkit-transform: var(--card-list-flip-transform);\n        transform: var(--card-list-flip-transform);\n        box-sizing: border-box;\n        display: grid;\n      }\n\n      [back] form {\n        padding: var(--card-list-create-form-padding);\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n        display: grid;\n        grid-template-columns: 1fr;\n        grid-template-rows: auto 1fr auto;\n        justify-content: center;\n        align-items: center;\n      }\n\n      [back] form .props {\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n        display: grid;\n        grid-template-columns: repeat(10, 1fr);\n        grid-row-gap: 7px;\n        justify-content: center;\n        align-items: center;\n      }\n\n      [back] form .props label {\n        grid-column: span 4;\n        font: var(--card-list-create-label-font);\n        color: var(--card-list-create-label-color);\n      }\n\n      [back] form .props input,\n      [back] form .props select {\n        grid-column: span 6;\n        background-color: #fff;\n        border: var(--card-list-create-input-border);\n        border-radius: var(--card-list-create-input-border-radius);\n        font: var(--card-list-create-input-font);\n        color: var(--card-list-create-input-color);\n        width: -moz-available;\n      }\n\n      file-selector {\n        grid-column: span 6;\n        font: var(--card-list-create-input-font);\n        border: none;\n        box-sizing: border-box;\n        padding: 0;\n      }\n\n      [back] input[type='submit'] {\n        background-color: var(--button-background-color) !important;\n        font: var(--button-font);\n        color: var(--button-color) !important;\n        border-radius: var(--button-radius);\n        border: var(--button-border);\n        grid-column: span 10;\n        grid-row: auto / -1;\n      }\n\n      .hidden {\n        display: none !important;\n      }\n\n      .btn-add-board {\n        width: 3.8em;\n        height: 3.8em;\n        margin: auto;\n        margin-top: 20%;\n        background: url(${unsafeCSS(btnAddBoard)}) no-repeat;\n        display: block;\n      }\n    `\n  ]\n\n  @property({ type: String }) provider: string = 'google'\n  @property({ type: Array }) googleFonts: any[] = []\n\n  @state() _files: any[] = []\n\n  providers = [\n    { value: 'google', display: 'Google' },\n    // TODO 구글 외 폰트 서비스 구현\n    // { value: 'typekit', display: 'Typekit' },\n    { value: 'custom', display: 'Custom' }\n  ]\n\n  async firstUpdated() {\n    FileDropHelper.set(this)\n  }\n\n  render() {\n    let isProviderGoogle = this.provider == 'google' && this.googleFonts.length > 0\n    let isFileAttached = this._files.length > 0 ? true : false\n    return html`\n      <div @click=${e => this.onClickFlip(e)} front><i class=\"btn-add-board\"></i>create font</div>\n\n      <div @click=${e => this.onClickFlip(e)} back>\n        <form @submit=${e => this.onClickSubmit(e)}>\n          <div class=\"props\">\n            <label>${i18next.t('label.provider')}</label>\n            <select\n              name=\"provider\"\n              @change=${e => {\n                this.provider = e.target.value\n                if (e.target.value === 'google') {\n                  fetch(`/all-google-fonts`).then(async response => {\n                    if (response.ok) this.googleFonts = await response.json()\n                    else {\n                      console.warn(\n                        `(${response.url}) ${response.status} ${response.statusText}. Could not load Google fonts.`\n                      )\n                    }\n                  })\n                }\n              }}\n            >\n              ${this.providers.map(\n                p => html` <option value=${p.value} ?selected=${this.provider == p.value}>${p.display}</option> `\n              )}\n            </select>\n\n            <label>${i18next.t('label.name')}</label>\n            <input type=\"text\" name=\"${isProviderGoogle ? '' : 'name'}\" ?hidden=${isProviderGoogle} />\n            <select name=\"${isProviderGoogle ? 'name' : ''}\" ?hidden=${!isProviderGoogle}>\n              ${isProviderGoogle && this.googleFonts.map(f => html` <option value=${f}>${f}</option> `)}\n            </select>\n\n            <label ?hidden=${this.provider != 'custom'}>${i18next.t('label.uri')}</label>\n            <input\n              ?hidden=${this.provider != 'custom'}\n              ?disabled=${isFileAttached}\n              .value=${isFileAttached ? this._files[0].name : ''}\n              type=\"text\"\n              name=\"uri\"\n            />\n            <!-- display when attachment module is imported -->\n            <label ?hidden=${this.provider != 'custom'}>${i18next.t('label.file')}</label>\n            <file-selector\n              class=${this.provider != 'custom' ? 'hidden' : ''}\n              name=\"file\"\n              label=${i18next.t('label.select file') || ''}\n              accept=\".ttf,.otf,.woff,.woff2,.eot,.svg,.svgz\"\n              multiple\n              @file-change=${e => {\n                this._files = Array.from(e.detail.files)\n              }}\n            ></file-selector>\n            <!------------------------------------------------>\n\n            <label>${i18next.t('label.active')}</label>\n            <input type=\"checkbox\" name=\"active\" checked />\n          </div>\n          <div></div>\n          <input type=\"submit\" value=${String(i18next.t('button.create'))} />\n        </form>\n      </div>\n    `\n  }\n\n  onClickFlip(e) {\n    if (!['INPUT', 'SELECT', 'OPTION'].find(tagName => tagName === e.target.tagName)) {\n      if (e.currentTarget.hasAttribute('front')) this.reset() // 입력 폼으로 뒤집기 전에 한 번 리셋\n      this.classList.toggle('flipped')\n    }\n  }\n\n  async onClickSubmit(e) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    var form = e.target\n\n    var detail = {} as any\n    detail.name = form.elements['name'].value\n    detail.provider = form.elements['provider'].value\n    detail.active = form.elements['active'].checked\n    if (this.provider === 'custom') {\n      detail.uri = form.elements['uri'].value\n      if ((this._files || []).length > 0) {\n        detail._files = this._files\n      }\n    }\n\n    this.dispatchEvent(new CustomEvent('create-font', { detail }))\n  }\n\n  reset() {\n    var form = this.renderRoot.querySelector('form')\n    if (form) {\n      form.reset()\n    }\n\n    this._files = []\n    this.classList.remove('flipped')\n  }\n}\n"]}

package/dist-client/viewparts/group-info.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+export declare class GroupInfo extends LitElement {
+    static styles: import("lit").CSSResult[];
+    groupId?: string;
+    group: any;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changes: any): void;
+    refresh(): Promise<void>;
+    createGroup(): Promise<void>;
+    updateGroup(): Promise<void>;
+    deleteGroup(): Promise<void>;
+    close(): void;
+}

package/dist-client/viewparts/group-info.js

@@ -0,0 +1,307 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { ScrollbarStyles } from '@operato/styles';
+import { fetchGroupById } from '@fmsim/api/restful.js';
+let GroupInfo = class GroupInfo extends LitElement {
+    render() {
+        let group;
+        if (this.group && this.group.name) {
+            group = this.group;
+            // group.createdAt = new Date(Number(group.createdAt)).toLocaleString()
+            // group.updatedAt = new Date(Number(group.updatedAt)).toLocaleString()
+            group.createdAt = new Date(group.createdAt).toLocaleString();
+            group.updatedAt = new Date(group.updatedAt).toLocaleString();
+        }
+        else {
+            group = {
+                name: '',
+                description: '',
+                creator: { name: 'Admin' },
+                // createdAt: new Date(Number(new Date().getTime())).toLocaleString()
+                createdAt: new Date(new Date().getTime()).toLocaleString()
+            };
+        }
+        return html `
+      <form>
+        <label>${i18next.t('label.name')}</label><br />
+        <input type="text" .value=${group.name} @change=${e => (this.group.name = e.target.value)} />
+
+        <label>${i18next.t('label.description')}</label><br />
+        <input type="text" .value=${group.description} @change=${e => (this.group.description = e.target.value)} />
+
+        <label>${i18next.t('label.creator')}</label><br />
+        <span>${group.creatorId}</span>
+
+        <label>${i18next.t('label.created-at')}</label><br />
+        <span>${group.createdAt}</span>
+
+        ${this.groupId
+            ? html `
+              <label>${i18next.t('label.updater')}</label><br />
+              <span>${group.updaterId}</span>
+
+              <label>${i18next.t('label.updated-at')}</label><br />
+              <span>${group.updatedAt}</span>
+            `
+            : html ``}
+      </form>
+      <div buttons>
+        ${this.groupId
+            ? html `
+              <input
+                class="crud-button"
+                type="button"
+                name="save"
+                value=${String(i18next.t('button.save'))}
+                @click=${this.updateGroup.bind(this)}
+              />
+              <input
+                class="crud-button"
+                type="button"
+                name="delete"
+                value=${String(i18next.t('button.delete'))}
+                @click=${this.deleteGroup.bind(this)}
+              />
+            `
+            : html `
+              <input
+                class="crud-button"
+                type="button"
+                name="create"
+                value=${String(i18next.t('button.create'))}
+                @click=${this.createGroup.bind(this)}
+              />
+            `}
+      </div>
+    `;
+    }
+    updated(changes) {
+        if (changes.has('groupId')) {
+            this.refresh();
+        }
+    }
+    async refresh() {
+        var _a;
+        if (!this.groupId) {
+            /* model이 없으므로, 기본 모델을 제공함. */
+            this.group = { name: '', description: '' };
+        }
+        else {
+            // var response = await fetchGroupById(this.groupId)
+            let response = (_a = (await fetchGroupById(this.groupId))) === null || _a === void 0 ? void 0 : _a.data;
+            if (!response || !response.status)
+                throw new Error('Error : fetchGroupById');
+            this.group = response.group;
+        }
+    }
+    async createGroup() {
+        this.dispatchEvent(new CustomEvent('create-group', {
+            detail: this.group
+        }));
+        this.close();
+    }
+    async updateGroup() {
+        this.dispatchEvent(new CustomEvent('update-group', {
+            detail: this.group
+        }));
+        this.close();
+    }
+    async deleteGroup() {
+        this.dispatchEvent(new CustomEvent('delete-group', {
+            detail: this.groupId
+        }));
+        this.close();
+    }
+    close() {
+        history.back();
+    }
+};
+GroupInfo.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: block;
+        background-color: white;
+        height: 100%;
+        max-height: 400px;
+        min-width: 50vw;
+        overflow: auto;
+        padding: 10px;
+        position: relative;
+      }
+
+      h2 {
+        text-align: center;
+        text-transform: capitalize;
+      }
+
+      [edit] {
+        position: absolute;
+        top: 25px;
+        right: 25px;
+        color: var(--board-info-icon-color, black);
+        font-size: 1.5em;
+      }
+
+      img {
+        display: block;
+
+        margin: auto;
+        max-width: 100%;
+        max-height: 100%;
+      }
+
+      form {
+        padding: 10px;
+        padding-bottom: 5px;
+        overflow: auto;
+      }
+
+      [buttons] {
+        text-align: center;
+      }
+
+      [buttons] * {
+        margin: 10px;
+      }
+
+      fieldset {
+        display: contents;
+      }
+
+      legend {
+        grid-column: span 12;
+        text-transform: capitalize;
+
+        padding: var(--legend-padding);
+        font: var(--legend-font);
+        color: var(--legend-text-color);
+        border-bottom: var(--legend-border-bottom);
+      }
+
+      label {
+        font-family: Roboto;
+        font-size: 13px;
+        font-weight: bold;
+        text-transform: capitalize;
+        color: #000;
+      }
+
+      span {
+        width: calc(100% - 9px);
+        min-height: 16px;
+        font-family: Roboto;
+        font-size: 13px;
+        font-weight: bold;
+        background-color: rgb(204, 204, 204);
+        padding: 8px;
+        border-radius: 3px;
+        margin-bottom: 15px;
+        display: block;
+      }
+
+      input.crud-button {
+        width: 109px;
+        font-family: Arial;
+        font-size: 13px;
+        font-weight: bold;
+        color: #fff;
+        background-color: #e96780;
+        border: 0px solid #fff;
+        cursor: pointer;
+      }
+
+      input,
+      table,
+      select,
+      textarea,
+      [custom-input] {
+        width: 100%;
+        height: 29px;
+        border: var(--input-field-border);
+        border-radius: var(--input-field-border-radius);
+        font-family: Roboto;
+        margin: 3px 0 15px 0;
+      }
+
+      input[type='checkbox'],
+      input[type='radio'] {
+        justify-self: end;
+        align-self: start;
+        grid-column: span 3 / auto;
+        position: relative;
+        left: 17px;
+      }
+
+      input[type='checkbox'] + label,
+      input[type='radio'] + label {
+        padding-left: 17px;
+        text-align: left;
+        grid-column: span 9 / auto;
+
+        font: var(--form-sublabel-font);
+        color: var(--form-sublabel-color);
+      }
+
+      input:focus {
+        outline: none;
+        border: 1px solid var(--focus-background-color);
+      }
+      input[type='checkbox'] {
+        margin: 0;
+      }
+
+      @media screen and (max-width: 460px) {
+        :host {
+          width: 100vw;
+        }
+
+        form {
+          max-width: 90%;
+          grid-gap: 5px;
+        }
+
+        label {
+          grid-column: span 12;
+          text-align: left;
+          align-self: end;
+        }
+
+        span,
+        input,
+        table,
+        select,
+        textarea,
+        [custom-input] {
+          grid-column: span 12;
+        }
+        input[type='checkbox'],
+        input[type='radio'] {
+          justify-self: start;
+          align-self: center;
+          grid-column: span 1 / auto;
+        }
+
+        input[type='checkbox'] + label,
+        input[type='radio'] + label {
+          grid-column: span 11 / auto;
+          align-self: center;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], GroupInfo.prototype, "groupId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GroupInfo.prototype, "group", void 0);
+GroupInfo = __decorate([
+    customElement('group-info')
+], GroupInfo);
+export { GroupInfo };
+//# sourceMappingURL=group-info.js.map

package/dist-client/viewparts/group-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-info.js","sourceRoot":"","sources":["../../client/viewparts/group-info.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { fetchGroupById } from '@fmsim/api/restful.js'\n\n@customElement('group-info')\nexport class GroupInfo extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: block;\n        background-color: white;\n        height: 100%;\n        max-height: 400px;\n        min-width: 50vw;\n        overflow: auto;\n        padding: 10px;\n        position: relative;\n      }\n\n      h2 {\n        text-align: center;\n        text-transform: capitalize;\n      }\n\n      [edit] {\n        position: absolute;\n        top: 25px;\n        right: 25px;\n        color: var(--board-info-icon-color, black);\n        font-size: 1.5em;\n      }\n\n      img {\n        display: block;\n\n        margin: auto;\n        max-width: 100%;\n        max-height: 100%;\n      }\n\n      form {\n        padding: 10px;\n        padding-bottom: 5px;\n        overflow: auto;\n      }\n\n      [buttons] {\n        text-align: center;\n      }\n\n      [buttons] * {\n        margin: 10px;\n      }\n\n      fieldset {\n        display: contents;\n      }\n\n      legend {\n        grid-column: span 12;\n        text-transform: capitalize;\n\n        padding: var(--legend-padding);\n        font: var(--legend-font);\n        color: var(--legend-text-color);\n        border-bottom: var(--legend-border-bottom);\n      }\n\n      label {\n        font-family: Roboto;\n        font-size: 13px;\n        font-weight: bold;\n        text-transform: capitalize;\n        color: #000;\n      }\n\n      span {\n        width: calc(100% - 9px);\n        min-height: 16px;\n        font-family: Roboto;\n        font-size: 13px;\n        font-weight: bold;\n        background-color: rgb(204, 204, 204);\n        padding: 8px;\n        border-radius: 3px;\n        margin-bottom: 15px;\n        display: block;\n      }\n\n      input.crud-button {\n        width: 109px;\n        font-family: Arial;\n        font-size: 13px;\n        font-weight: bold;\n        color: #fff;\n        background-color: #e96780;\n        border: 0px solid #fff;\n        cursor: pointer;\n      }\n\n      input,\n      table,\n      select,\n      textarea,\n      [custom-input] {\n        width: 100%;\n        height: 29px;\n        border: var(--input-field-border);\n        border-radius: var(--input-field-border-radius);\n        font-family: Roboto;\n        margin: 3px 0 15px 0;\n      }\n\n      input[type='checkbox'],\n      input[type='radio'] {\n        justify-self: end;\n        align-self: start;\n        grid-column: span 3 / auto;\n        position: relative;\n        left: 17px;\n      }\n\n      input[type='checkbox'] + label,\n      input[type='radio'] + label {\n        padding-left: 17px;\n        text-align: left;\n        grid-column: span 9 / auto;\n\n        font: var(--form-sublabel-font);\n        color: var(--form-sublabel-color);\n      }\n\n      input:focus {\n        outline: none;\n        border: 1px solid var(--focus-background-color);\n      }\n      input[type='checkbox'] {\n        margin: 0;\n      }\n\n      @media screen and (max-width: 460px) {\n        :host {\n          width: 100vw;\n        }\n\n        form {\n          max-width: 90%;\n          grid-gap: 5px;\n        }\n\n        label {\n          grid-column: span 12;\n          text-align: left;\n          align-self: end;\n        }\n\n        span,\n        input,\n        table,\n        select,\n        textarea,\n        [custom-input] {\n          grid-column: span 12;\n        }\n        input[type='checkbox'],\n        input[type='radio'] {\n          justify-self: start;\n          align-self: center;\n          grid-column: span 1 / auto;\n        }\n\n        input[type='checkbox'] + label,\n        input[type='radio'] + label {\n          grid-column: span 11 / auto;\n          align-self: center;\n        }\n      }\n    `\n  ]\n\n  @property({ type: String }) groupId?: string\n\n  @state() group: any\n\n  render() {\n    let group\n    if (this.group && this.group.name) {\n      group = this.group\n      // group.createdAt = new Date(Number(group.createdAt)).toLocaleString()\n      // group.updatedAt = new Date(Number(group.updatedAt)).toLocaleString()\n      group.createdAt = new Date(group.createdAt).toLocaleString()\n      group.updatedAt = new Date(group.updatedAt).toLocaleString()\n    } else {\n      group = {\n        name: '',\n        description: '',\n        creator: { name: 'Admin' },\n        // createdAt: new Date(Number(new Date().getTime())).toLocaleString()\n        createdAt: new Date(new Date().getTime()).toLocaleString()\n      }\n    }\n\n    return html`\n      <form>\n        <label>${i18next.t('label.name')}</label><br />\n        <input type=\"text\" .value=${group.name} @change=${e => (this.group.name = e.target.value)} />\n\n        <label>${i18next.t('label.description')}</label><br />\n        <input type=\"text\" .value=${group.description} @change=${e => (this.group.description = e.target.value)} />\n\n        <label>${i18next.t('label.creator')}</label><br />\n        <span>${group.creatorId}</span>\n\n        <label>${i18next.t('label.created-at')}</label><br />\n        <span>${group.createdAt}</span>\n\n        ${this.groupId\n          ? html`\n              <label>${i18next.t('label.updater')}</label><br />\n              <span>${group.updaterId}</span>\n\n              <label>${i18next.t('label.updated-at')}</label><br />\n              <span>${group.updatedAt}</span>\n            `\n          : html``}\n      </form>\n      <div buttons>\n        ${this.groupId\n          ? html`\n              <input\n                class=\"crud-button\"\n                type=\"button\"\n                name=\"save\"\n                value=${String(i18next.t('button.save'))}\n                @click=${this.updateGroup.bind(this)}\n              />\n              <input\n                class=\"crud-button\"\n                type=\"button\"\n                name=\"delete\"\n                value=${String(i18next.t('button.delete'))}\n                @click=${this.deleteGroup.bind(this)}\n              />\n            `\n          : html`\n              <input\n                class=\"crud-button\"\n                type=\"button\"\n                name=\"create\"\n                value=${String(i18next.t('button.create'))}\n                @click=${this.createGroup.bind(this)}\n              />\n            `}\n      </div>\n    `\n  }\n\n  updated(changes) {\n    if (changes.has('groupId')) {\n      this.refresh()\n    }\n  }\n\n  async refresh() {\n    if (!this.groupId) {\n      /* model이 없으므로, 기본 모델을 제공함. */\n      this.group = { name: '', description: '' }\n    } else {\n      // var response = await fetchGroupById(this.groupId)\n      let response = (await fetchGroupById(this.groupId))?.data\n      if (!response || !response.status) throw new Error('Error : fetchGroupById')\n      this.group = response.group\n    }\n  }\n\n  async createGroup() {\n    this.dispatchEvent(\n      new CustomEvent('create-group', {\n        detail: this.group\n      })\n    )\n\n    this.close()\n  }\n\n  async updateGroup() {\n    this.dispatchEvent(\n      new CustomEvent('update-group', {\n        detail: this.group\n      })\n    )\n\n    this.close()\n  }\n\n  async deleteGroup() {\n    this.dispatchEvent(\n      new CustomEvent('delete-group', {\n        detail: this.groupId\n      })\n    )\n\n    this.close()\n  }\n\n  close() {\n    history.back()\n  }\n}\n"]}

package/dist-client/viewparts/menu-tools.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+declare const MenuTools_base: (new (...args: any[]) => {
+    _storeUnsubscribe: import("redux").Unsubscribe;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    stateChanged(_state: unknown): void;
+    readonly isConnected: boolean;
+}) & typeof LitElement;
+export declare class MenuTools extends MenuTools_base {
+    static styles: import("lit").CSSResult[];
+    page?: string;
+    width?: string;
+    context: any;
+    render(): import("lit-html").TemplateResult<1>;
+    stateChanged(state: any): void;
+}
+export {};