@things-factory/operato-board 6.1.131 → 6.1.133

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist-client/tsconfig.tsbuildinfo +1 -1
  2. package/dist-client/viewparts/board-info.js +56 -27
  3. package/dist-client/viewparts/board-info.js.map +1 -1
  4. package/helps/faq/appliance-token.md +66 -0
  5. package/helps/faq/board-deployment.md +4 -0
  6. package/helps/faq/board-versioning.md +16 -0
  7. package/helps/faq/data-binding-for-select-options.md +15 -0
  8. package/helps/faq/data-binding-on-calling-board.md +23 -0
  9. package/helps/faq/data-binding-persistent.md +9 -0
  10. package/helps/faq/images/application-token-01.png +0 -0
  11. package/helps/faq/images/application-token-02.png +0 -0
  12. package/helps/faq/images/application-token-03.png +0 -0
  13. package/helps/faq/images/application-token-04.png +0 -0
  14. package/helps/faq/images/application-token-05.png +0 -0
  15. package/helps/faq/images/application-token-06.png +0 -0
  16. package/helps/faq/images/application-token-07.png +0 -0
  17. package/helps/faq/images/application-token-08.png +0 -0
  18. package/helps/faq/images/application-token-09.png +0 -0
  19. package/helps/faq/images/application-token-10.png +0 -0
  20. package/helps/faq/images/application-token-11.png +0 -0
  21. package/helps/faq/images/board-versioning.png +0 -0
  22. package/helps/faq/images/data-binding-for-select-options-01.png +0 -0
  23. package/helps/faq/images/data-binding-for-select-options-02.png +0 -0
  24. package/helps/faq/images/data-binding-on-calling-board-01.png +0 -0
  25. package/helps/faq/images/data-binding-on-calling-board-02.png +0 -0
  26. package/helps/faq/images/data-binding-on-calling-board-03.png +0 -0
  27. package/helps/faq/images/data-binding-on-calling-board-04.png +0 -0
  28. package/helps/faq/images/data-binding-on-calling-board-05.png +0 -0
  29. package/helps/faq/images/data-binding-persistent.png +0 -0
  30. package/helps/faq/images/user-credential-component-01.png +0 -0
  31. package/helps/faq/images/user-credential-component-02.png +0 -0
  32. package/helps/faq/images/user-credential-component-03.png +0 -0
  33. package/helps/faq/user-credential-component.md +13 -0
  34. package/helps/faq.md +1 -15
  35. package/package.json +7 -7
@@ -32,12 +32,22 @@ let BoardInfo = class BoardInfo extends LitElement {
32
32
  <fieldset>
33
33
  <legend>${i18next.t('label.information')}</legend>
34
34
  <label>${i18next.t('label.name')}</label>
35
- <input
36
- type="text"
37
- .value=${board.name}
38
- @change=${e => (this.board = Object.assign(Object.assign({}, this.board), { name: e.target.value }))}
39
- ?disabled=${!this.enableModeller}
40
- />
35
+ <div oneline>
36
+ <input
37
+ type="text"
38
+ .value=${board.name}
39
+ @change=${e => (this.board = Object.assign(Object.assign({}, this.board), { name: e.target.value }))}
40
+ ?disabled=${!this.enableModeller}
41
+ />
42
+ <mwc-button
43
+ dense
44
+ raised
45
+ label=${String(i18next.t('button.copy'))}
46
+ ?disabled=${!this.enableModeller || !((_a = this.original) === null || _a === void 0 ? void 0 : _a.name) || this.original.name == this.board.name}
47
+ @click=${this.cloneBoard.bind(this)}
48
+ icon="content_copy"
49
+ ></mwc-button>
50
+ </div>
41
51
 
42
52
  <label>${i18next.t('label.description')}</label>
43
53
  <input
@@ -68,7 +78,21 @@ let BoardInfo = class BoardInfo extends LitElement {
68
78
  <mwc-icon>schedule</mwc-icon> ${new Date(Number(board.updatedAt)).toLocaleString()}
69
79
  </span>
70
80
 
71
- <span>${board.state}@${board.version}</span>
81
+ <label>${i18next.t('label.state')}</label>
82
+ <span state>
83
+ <div oneline>
84
+ <mwc-icon>signpost</mwc-icon> ${(board.state || '').toUpperCase()}
85
+ <mwc-icon>pin</mwc-icon> ${board.version}
86
+ </div>
87
+ <mwc-button
88
+ dense
89
+ raised
90
+ label=${String(i18next.t('button.release'))}
91
+ ?disabled=${!this.enableModeller || !this.isReleasable}
92
+ @click=${this.releaseBoard.bind(this)}
93
+ icon="new_releases"
94
+ ></mwc-button>
95
+ </span>
72
96
 
73
97
  <div buttons>
74
98
  <mwc-button
@@ -86,35 +110,17 @@ let BoardInfo = class BoardInfo extends LitElement {
86
110
  label=${String(i18next.t('button.save'))}
87
111
  ?disabled=${!this.enableModeller}
88
112
  @click=${this.updateBoard.bind(this)}
89
- icon="done"
113
+ icon="save"
90
114
  ></mwc-button>
91
115
  <mwc-button
92
116
  dense
93
117
  raised
94
- label="edit"
118
+ label=${String(i18next.t('button.edit'))}
95
119
  ?disabled=${!this.enableModeller}
96
120
  @click=${() => navigate(`${'board-modeller/' + this.boardId}`)}
97
121
  icon="drive_file_rename_outline"
98
122
  ></mwc-button>
99
123
  </div>
100
- <div buttons>
101
- <mwc-button
102
- dense
103
- raised
104
- label=${String(i18next.t('button.copy'))}
105
- ?disabled=${!this.enableModeller || !((_a = this.original) === null || _a === void 0 ? void 0 : _a.name) || this.original.name == this.board.name}
106
- @click=${this.cloneBoard.bind(this)}
107
- icon="content_copy"
108
- ></mwc-button>
109
- <mwc-button
110
- dense
111
- raised
112
- label=${String(i18next.t('button.release'))}
113
- ?disabled=${!this.enableModeller || !this.isReleasable}
114
- @click=${this.releaseBoard.bind(this)}
115
- icon="content_copy"
116
- ></mwc-button>
117
- </div>
118
124
  </fieldset>
119
125
 
120
126
  <fieldset>
@@ -344,6 +350,13 @@ BoardInfo.styles = [
344
350
  padding-bottom: var(--padding-narrow);
345
351
  font: var(--input-field-font);
346
352
  }
353
+
354
+ span[state] {
355
+ display: flex;
356
+ align-items: center;
357
+ justify-content: space-between;
358
+ }
359
+
347
360
  span mwc-icon {
348
361
  vertical-align: middle;
349
362
  font-size: var(--fontsize-large);
@@ -385,6 +398,22 @@ BoardInfo.styles = [
385
398
  border: 1px solid var(--focus-background-color);
386
399
  }
387
400
 
401
+ div[oneline] {
402
+ grid-column: span 12 / auto;
403
+
404
+ display: flex;
405
+ align-items: center;
406
+ gap: var(--margin-default);
407
+ }
408
+
409
+ div[oneline] input {
410
+ flex: 1;
411
+ }
412
+
413
+ div[oneline] mwc-button {
414
+ margin-bottom: var(--margin-default);
415
+ }
416
+
388
417
  @media screen and (max-width: 460px) {
389
418
  :host {
390
419
  width: 100vw;
@@ -1 +1 @@
1
- {"version":3,"file":"board-info.js","sourceRoot":"","sources":["../../client/viewparts/board-info.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { client } from '@operato/graphql'\nimport { navigate } from '@operato/shell'\n\n@customElement('board-info')\nexport class BoardInfo extends LitElement {\n static styles = [\n css`\n :host {\n display: block;\n background-color: var(--main-section-background-color);\n height: 100%;\n min-width: 360px;\n overflow: auto;\n position: relative;\n\n --form-grid-gap: 2px 0;\n --input-field-padding: var(--padding-default);\n --legend-padding: var(--padding-default) 0 var(--padding-narrow) 0;\n --mdc-button-horizontal-padding: var(--padding-default);\n }\n\n img {\n display: block;\n\n margin: auto;\n max-width: 100%;\n max-height: 100%;\n border-bottom: 2px solid rgba(0, 0, 0, 0.1);\n }\n\n form {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n grid-gap: var(--form-grid-gap);\n grid-auto-rows: minmax(24px, auto);\n padding: var(--padding-wide);\n align-items: center;\n }\n\n [buttons] {\n grid-column: span 12;\n padding: var(--padding-default) 0;\n text-align: right;\n }\n\n [buttons] * {\n margin: 0 0 0 var(--margin-narrow);\n }\n [danger] {\n float: left;\n margin: 0 var(--margin-narrow) 0 0;\n --mdc-theme-primary: var(--status-danger-color);\n }\n\n fieldset {\n display: contents;\n }\n\n legend {\n grid-column: span 12;\n padding: var(--legend-padding);\n font: var(--legend-font);\n color: var(--legend-text-color);\n text-transform: capitalize;\n }\n\n label {\n grid-column: span 12;\n text-transform: capitalize;\n color: var(--label-color);\n font: var(--label-font);\n }\n\n span {\n grid-column: span 12;\n border-bottom: var(--border-dark-color);\n margin-bottom: var(--margin-default);\n padding-bottom: var(--padding-narrow);\n font: var(--input-field-font);\n }\n span mwc-icon {\n vertical-align: middle;\n font-size: var(--fontsize-large);\n color: var(--primary-color);\n }\n\n input,\n table,\n select,\n textarea,\n [custom-input] {\n grid-column: span 12;\n\n border: var(--input-field-border);\n border-radius: var(--input-field-border-radius);\n margin-bottom: var(--margin-default);\n padding: var(--input-field-padding);\n font: var(--input-field-font);\n }\n\n input[type='checkbox'],\n input[type='radio'] {\n place-self: center;\n margin: 0;\n grid-column: 1;\n }\n\n input[type='checkbox'] + label,\n input[type='radio'] + label {\n text-align: left;\n grid-column: span 11 / 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\n @media screen and (max-width: 460px) {\n :host {\n width: 100vw;\n }\n }\n `\n ]\n\n @property({ type: String }) boardId?: string\n @property({ type: String }) groupId?: string\n @property({ type: Boolean, attribute: 'enable-modeller' }) enableModeller?: boolean\n\n @state() board: any\n @state() boardGroupList: any[] = []\n @state() playGroupList: any[] = []\n\n // private originalName?: string\n private original: any\n\n render() {\n var board = this.board || { name: '', description: '', playGroups: [] }\n var boardGroupList = this.boardGroupList || []\n var playGroupList = (this.playGroupList || []).map(group => {\n return {\n ...group,\n checked: false\n }\n })\n ;(board.playGroups || []).map(group => {\n var playGroup = playGroupList.find(g => g.id == group.id)\n if (playGroup) {\n playGroup.checked = true\n }\n })\n\n return html`\n ${board.thumbnail ? html` <img src=${board.thumbnail} /> ` : html``}\n\n <form>\n <fieldset>\n <legend>${i18next.t('label.information')}</legend>\n <label>${i18next.t('label.name')}</label>\n <input\n type=\"text\"\n .value=${board.name}\n @change=${e => (this.board = { ...this.board, name: e.target.value })}\n ?disabled=${!this.enableModeller}\n />\n\n <label>${i18next.t('label.description')}</label>\n <input\n type=\"text\"\n .value=${board.description}\n @change=${e => (this.board = { ...this.board, description: e.target.value })}\n ?disabled=${!this.enableModeller}\n />\n\n <label>${i18next.t('label.group')}</label>\n <select\n @change=${e => (this.board = { ...this.board, groupId: e.target.value })}\n .value=${this.groupId || ''}\n ?disabled=${!this.enableModeller}\n >\n <option value=\"\" ?selected=${'' == this.groupId}></option>\n ${boardGroupList.map(\n item => html` <option .value=${item.id} ?selected=${item.id == this.groupId}>${item.name}</option> `\n )}\n </select>\n <label>${i18next.t('label.creator')}</label>\n <span>\n <mwc-icon>person</mwc-icon> ${(board.creator && board.creator.name) || 'anonymous'}\n <mwc-icon>schedule</mwc-icon> ${new Date(Number(board.createdAt)).toLocaleString()}\n </span>\n\n <label>${i18next.t('label.updater')}</label>\n <span>\n <mwc-icon>person</mwc-icon> ${(board.updater && board.updater.name) || 'anonymouse'}\n <mwc-icon>schedule</mwc-icon> ${new Date(Number(board.updatedAt)).toLocaleString()}\n </span>\n\n <span>${board.state}@${board.version}</span>\n\n <div buttons>\n <mwc-button\n dense\n raised\n danger\n label=${String(i18next.t('button.delete'))}\n ?disabled=${!this.enableModeller}\n @click=${this.deleteBoard.bind(this)}\n icon=\"delete_outline\"\n ></mwc-button>\n <mwc-button\n dense\n raised\n label=${String(i18next.t('button.save'))}\n ?disabled=${!this.enableModeller}\n @click=${this.updateBoard.bind(this)}\n icon=\"done\"\n ></mwc-button>\n <mwc-button\n dense\n raised\n label=\"edit\"\n ?disabled=${!this.enableModeller}\n @click=${() => navigate(`${'board-modeller/' + this.boardId}`)}\n icon=\"drive_file_rename_outline\"\n ></mwc-button>\n </div>\n <div buttons>\n <mwc-button\n dense\n raised\n label=${String(i18next.t('button.copy'))}\n ?disabled=${!this.enableModeller || !this.original?.name || this.original.name == this.board.name}\n @click=${this.cloneBoard.bind(this)}\n icon=\"content_copy\"\n ></mwc-button>\n <mwc-button\n dense\n raised\n label=${String(i18next.t('button.release'))}\n ?disabled=${!this.enableModeller || !this.isReleasable}\n @click=${this.releaseBoard.bind(this)}\n icon=\"content_copy\"\n ></mwc-button>\n </div>\n </fieldset>\n\n <fieldset>\n <legend>${i18next.t('label.play-group')}</legend>\n\n ${playGroupList.map(\n item => html`\n <input\n type=\"checkbox\"\n value=${item.id}\n .checked=${item.checked}\n @change=${e => {\n e.target.checked ? this.joinPlayGroup(item) : this.leavePlayGroup(item)\n }}\n />\n <label>${item.name}</label>\n `\n )}\n </fieldset>\n </form>\n `\n }\n\n firstUpdated() {\n this.refresh()\n }\n\n async refresh() {\n var response = (\n await client.query({\n query: gql`\n query FetchBoardById($id: String!) {\n board(id: $id) {\n id\n name\n description\n group {\n id\n name\n }\n playGroups {\n id\n name\n }\n thumbnail\n createdAt\n creator {\n id\n name\n }\n state\n version\n updatedAt\n updater {\n id\n name\n }\n }\n\n groups {\n items {\n id\n name\n description\n }\n }\n\n playGroups {\n items {\n id\n name\n description\n }\n total\n }\n }\n `,\n variables: { id: this.boardId }\n })\n ).data\n\n this.board = response.board\n this.boardGroupList = response.groups.items\n this.playGroupList = response.playGroups.items\n this.original = { ...this.board }\n\n this.groupId = this.board.group?.id\n }\n\n get isReleasable() {\n if (!this.board || this.board.state == 'released') {\n return false\n }\n\n const { name, description, groupId } = this.board\n\n return (\n this.original &&\n this.original.name == name &&\n this.original.description == description &&\n this.original.groupId == groupId\n )\n }\n\n async cloneBoard() {\n if (!this.original.name || this.board.name == this.original.name) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n level: 'error',\n message: i18next.t('error.name must be unique from the original board', { name: this.original.name })\n }\n })\n )\n\n return\n }\n\n const { id, name, description, groupId } = this.board\n\n this.dispatchEvent(\n new CustomEvent('clone-board', {\n detail: {\n id,\n name,\n description,\n groupId: groupId || this.groupId\n }\n })\n )\n\n this.close()\n }\n\n async releaseBoard() {\n const { id } = this.board\n\n this.dispatchEvent(\n new CustomEvent('release-board', {\n detail: {\n id\n }\n })\n )\n\n this.close()\n }\n\n async updateBoard() {\n this.dispatchEvent(\n new CustomEvent('update-board', {\n detail: this.board\n })\n )\n\n this.close()\n }\n\n async deleteBoard() {\n // TODO 삭제하려는 보드이름을 입력하게 해서, 한번 더 확인할 것.\n this.dispatchEvent(\n new CustomEvent('delete-board', {\n detail: this.board\n })\n )\n\n this.close()\n }\n\n async joinPlayGroup(group) {\n this.dispatchEvent(\n new CustomEvent('join-playgroup', {\n detail: {\n board: this.board,\n playGroup: group\n }\n })\n )\n }\n\n async leavePlayGroup(group) {\n this.dispatchEvent(\n new CustomEvent('leave-playgroup', {\n detail: {\n board: this.board,\n playGroup: group\n }\n })\n )\n }\n\n close() {\n history.back()\n }\n}\n"]}
1
+ {"version":3,"file":"board-info.js","sourceRoot":"","sources":["../../client/viewparts/board-info.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { client } from '@operato/graphql'\nimport { navigate } from '@operato/shell'\n\n@customElement('board-info')\nexport class BoardInfo extends LitElement {\n static styles = [\n css`\n :host {\n display: block;\n background-color: var(--main-section-background-color);\n height: 100%;\n min-width: 360px;\n overflow: auto;\n position: relative;\n\n --form-grid-gap: 2px 0;\n --input-field-padding: var(--padding-default);\n --legend-padding: var(--padding-default) 0 var(--padding-narrow) 0;\n --mdc-button-horizontal-padding: var(--padding-default);\n }\n\n img {\n display: block;\n\n margin: auto;\n max-width: 100%;\n max-height: 100%;\n border-bottom: 2px solid rgba(0, 0, 0, 0.1);\n }\n\n form {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n grid-gap: var(--form-grid-gap);\n grid-auto-rows: minmax(24px, auto);\n padding: var(--padding-wide);\n align-items: center;\n }\n\n [buttons] {\n grid-column: span 12;\n padding: var(--padding-default) 0;\n text-align: right;\n }\n\n [buttons] * {\n margin: 0 0 0 var(--margin-narrow);\n }\n [danger] {\n float: left;\n margin: 0 var(--margin-narrow) 0 0;\n --mdc-theme-primary: var(--status-danger-color);\n }\n\n fieldset {\n display: contents;\n }\n\n legend {\n grid-column: span 12;\n padding: var(--legend-padding);\n font: var(--legend-font);\n color: var(--legend-text-color);\n text-transform: capitalize;\n }\n\n label {\n grid-column: span 12;\n text-transform: capitalize;\n color: var(--label-color);\n font: var(--label-font);\n }\n\n span {\n grid-column: span 12;\n border-bottom: var(--border-dark-color);\n margin-bottom: var(--margin-default);\n padding-bottom: var(--padding-narrow);\n font: var(--input-field-font);\n }\n\n span[state] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n span mwc-icon {\n vertical-align: middle;\n font-size: var(--fontsize-large);\n color: var(--primary-color);\n }\n\n input,\n table,\n select,\n textarea,\n [custom-input] {\n grid-column: span 12;\n\n border: var(--input-field-border);\n border-radius: var(--input-field-border-radius);\n margin-bottom: var(--margin-default);\n padding: var(--input-field-padding);\n font: var(--input-field-font);\n }\n\n input[type='checkbox'],\n input[type='radio'] {\n place-self: center;\n margin: 0;\n grid-column: 1;\n }\n\n input[type='checkbox'] + label,\n input[type='radio'] + label {\n text-align: left;\n grid-column: span 11 / 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\n div[oneline] {\n grid-column: span 12 / auto;\n\n display: flex;\n align-items: center;\n gap: var(--margin-default);\n }\n\n div[oneline] input {\n flex: 1;\n }\n\n div[oneline] mwc-button {\n margin-bottom: var(--margin-default);\n }\n\n @media screen and (max-width: 460px) {\n :host {\n width: 100vw;\n }\n }\n `\n ]\n\n @property({ type: String }) boardId?: string\n @property({ type: String }) groupId?: string\n @property({ type: Boolean, attribute: 'enable-modeller' }) enableModeller?: boolean\n\n @state() board: any\n @state() boardGroupList: any[] = []\n @state() playGroupList: any[] = []\n\n // private originalName?: string\n private original: any\n\n render() {\n var board = this.board || { name: '', description: '', playGroups: [] }\n var boardGroupList = this.boardGroupList || []\n var playGroupList = (this.playGroupList || []).map(group => {\n return {\n ...group,\n checked: false\n }\n })\n ;(board.playGroups || []).map(group => {\n var playGroup = playGroupList.find(g => g.id == group.id)\n if (playGroup) {\n playGroup.checked = true\n }\n })\n\n return html`\n ${board.thumbnail ? html` <img src=${board.thumbnail} /> ` : html``}\n\n <form>\n <fieldset>\n <legend>${i18next.t('label.information')}</legend>\n <label>${i18next.t('label.name')}</label>\n <div oneline>\n <input\n type=\"text\"\n .value=${board.name}\n @change=${e => (this.board = { ...this.board, name: e.target.value })}\n ?disabled=${!this.enableModeller}\n />\n <mwc-button\n dense\n raised\n label=${String(i18next.t('button.copy'))}\n ?disabled=${!this.enableModeller || !this.original?.name || this.original.name == this.board.name}\n @click=${this.cloneBoard.bind(this)}\n icon=\"content_copy\"\n ></mwc-button>\n </div>\n\n <label>${i18next.t('label.description')}</label>\n <input\n type=\"text\"\n .value=${board.description}\n @change=${e => (this.board = { ...this.board, description: e.target.value })}\n ?disabled=${!this.enableModeller}\n />\n\n <label>${i18next.t('label.group')}</label>\n <select\n @change=${e => (this.board = { ...this.board, groupId: e.target.value })}\n .value=${this.groupId || ''}\n ?disabled=${!this.enableModeller}\n >\n <option value=\"\" ?selected=${'' == this.groupId}></option>\n ${boardGroupList.map(\n item => html` <option .value=${item.id} ?selected=${item.id == this.groupId}>${item.name}</option> `\n )}\n </select>\n <label>${i18next.t('label.creator')}</label>\n <span>\n <mwc-icon>person</mwc-icon> ${(board.creator && board.creator.name) || 'anonymous'}\n <mwc-icon>schedule</mwc-icon> ${new Date(Number(board.createdAt)).toLocaleString()}\n </span>\n\n <label>${i18next.t('label.updater')}</label>\n <span>\n <mwc-icon>person</mwc-icon> ${(board.updater && board.updater.name) || 'anonymouse'}\n <mwc-icon>schedule</mwc-icon> ${new Date(Number(board.updatedAt)).toLocaleString()}\n </span>\n\n <label>${i18next.t('label.state')}</label>\n <span state>\n <div oneline>\n <mwc-icon>signpost</mwc-icon> ${(board.state || '').toUpperCase()}\n <mwc-icon>pin</mwc-icon> ${board.version}\n </div>\n <mwc-button\n dense\n raised\n label=${String(i18next.t('button.release'))}\n ?disabled=${!this.enableModeller || !this.isReleasable}\n @click=${this.releaseBoard.bind(this)}\n icon=\"new_releases\"\n ></mwc-button>\n </span>\n\n <div buttons>\n <mwc-button\n dense\n raised\n danger\n label=${String(i18next.t('button.delete'))}\n ?disabled=${!this.enableModeller}\n @click=${this.deleteBoard.bind(this)}\n icon=\"delete_outline\"\n ></mwc-button>\n <mwc-button\n dense\n raised\n label=${String(i18next.t('button.save'))}\n ?disabled=${!this.enableModeller}\n @click=${this.updateBoard.bind(this)}\n icon=\"save\"\n ></mwc-button>\n <mwc-button\n dense\n raised\n label=${String(i18next.t('button.edit'))}\n ?disabled=${!this.enableModeller}\n @click=${() => navigate(`${'board-modeller/' + this.boardId}`)}\n icon=\"drive_file_rename_outline\"\n ></mwc-button>\n </div>\n </fieldset>\n\n <fieldset>\n <legend>${i18next.t('label.play-group')}</legend>\n\n ${playGroupList.map(\n item => html`\n <input\n type=\"checkbox\"\n value=${item.id}\n .checked=${item.checked}\n @change=${e => {\n e.target.checked ? this.joinPlayGroup(item) : this.leavePlayGroup(item)\n }}\n />\n <label>${item.name}</label>\n `\n )}\n </fieldset>\n </form>\n `\n }\n\n firstUpdated() {\n this.refresh()\n }\n\n async refresh() {\n var response = (\n await client.query({\n query: gql`\n query FetchBoardById($id: String!) {\n board(id: $id) {\n id\n name\n description\n group {\n id\n name\n }\n playGroups {\n id\n name\n }\n thumbnail\n createdAt\n creator {\n id\n name\n }\n state\n version\n updatedAt\n updater {\n id\n name\n }\n }\n\n groups {\n items {\n id\n name\n description\n }\n }\n\n playGroups {\n items {\n id\n name\n description\n }\n total\n }\n }\n `,\n variables: { id: this.boardId }\n })\n ).data\n\n this.board = response.board\n this.boardGroupList = response.groups.items\n this.playGroupList = response.playGroups.items\n this.original = { ...this.board }\n\n this.groupId = this.board.group?.id\n }\n\n get isReleasable() {\n if (!this.board || this.board.state == 'released') {\n return false\n }\n\n const { name, description, groupId } = this.board\n\n return (\n this.original &&\n this.original.name == name &&\n this.original.description == description &&\n this.original.groupId == groupId\n )\n }\n\n async cloneBoard() {\n if (!this.original.name || this.board.name == this.original.name) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n level: 'error',\n message: i18next.t('error.name must be unique from the original board', { name: this.original.name })\n }\n })\n )\n\n return\n }\n\n const { id, name, description, groupId } = this.board\n\n this.dispatchEvent(\n new CustomEvent('clone-board', {\n detail: {\n id,\n name,\n description,\n groupId: groupId || this.groupId\n }\n })\n )\n\n this.close()\n }\n\n async releaseBoard() {\n const { id } = this.board\n\n this.dispatchEvent(\n new CustomEvent('release-board', {\n detail: {\n id\n }\n })\n )\n\n this.close()\n }\n\n async updateBoard() {\n this.dispatchEvent(\n new CustomEvent('update-board', {\n detail: this.board\n })\n )\n\n this.close()\n }\n\n async deleteBoard() {\n // TODO 삭제하려는 보드이름을 입력하게 해서, 한번 더 확인할 것.\n this.dispatchEvent(\n new CustomEvent('delete-board', {\n detail: this.board\n })\n )\n\n this.close()\n }\n\n async joinPlayGroup(group) {\n this.dispatchEvent(\n new CustomEvent('join-playgroup', {\n detail: {\n board: this.board,\n playGroup: group\n }\n })\n )\n }\n\n async leavePlayGroup(group) {\n this.dispatchEvent(\n new CustomEvent('leave-playgroup', {\n detail: {\n board: this.board,\n playGroup: group\n }\n })\n )\n }\n\n close() {\n history.back()\n }\n}\n"]}
@@ -0,0 +1,66 @@
1
+ ## 보드 및 플레이어 배포
2
+
3
+ 단말기(appliance) 사용자를 만들고, 인증토큰을 만들고, 필요한 권한을 부여하는 과정을 설명합니다.
4
+
5
+ 배포하고자 하는 보드의 URL을 기반으로 access_token 을 부여하고 링크를 배포할 수 있습니다.
6
+
7
+ URL의 형태는 다음과 같습니다.
8
+
9
+ ```
10
+ # board
11
+ https://xxx.com/domains/{domain}/headless-full/{board-id}?access_token={access-token}
12
+
13
+ # player
14
+ https://xxx.com/domains/{domain}/board-player/{player-id}?access_token={access-token}
15
+ ```
16
+
17
+ ### 1. 단말장치 메뉴에서 새로운 단말장치를 생성한다.
18
+
19
+ ![appliance-menu]
20
+ ![click-appliance]
21
+ ![fill-form]
22
+
23
+ ### 2. 단말장치에서 토큰을 생성하고, 복사한다.
24
+
25
+ ![generate-token]
26
+ ![token-copy]
27
+
28
+ ### 3. 생성된 단말장치에 뷰어 역할을 부여한다.
29
+
30
+ [user-menu]: ./images/application-token-06.png
31
+ [user-applicance]: ./images/application-token-07.png
32
+ [add-role]: ./images/application-token-08.png
33
+
34
+ ### 4. 보드 뷰어를 실행하고 URL을 획득한다.
35
+
36
+ - URL의 끝에 '?access_token=' 을 입력한 다음, 단말장치의 토큰을 붙여넣기 한다.
37
+ - URL에서 'board-viewer' 를 'headless-full' 로 수정한다.
38
+
39
+ ```
40
+ # board
41
+ https://xxx.com/domains/{domain}/headless-full/{board-id}?access_token={access-token}
42
+ ```
43
+
44
+ ![copy-board-url]
45
+
46
+ ### 5. 보드 플레이어를 실행하고 URL을 획득한 다음, 보드와 유사하게 URL을 수정한다.
47
+
48
+ ```
49
+ # player
50
+ https://xxx.com/domains/{domain}/board-player/{player-id}?access_token={access-token}
51
+ ```
52
+
53
+ ![play-board]
54
+ ![copy-player-url]
55
+
56
+ [appliance-menu]: ./images/application-token-01.png
57
+ [click-appliance]: ./images/application-token-02.png
58
+ [fill-form]: ./images/application-token-03.png
59
+ [generate-token]: ./images/application-token-04.png
60
+ [token-copy]: ./images/application-token-05.png
61
+ [user-menu]: ./images/application-token-06.png
62
+ [user-applicance]: ./images/application-token-07.png
63
+ [add-role]: ./images/application-token-08.png
64
+ [copy-board-url]: ./images/application-token-09.png
65
+ [play-board]: ./images/application-token-10.png
66
+ [copy-player-url]: ./images/application-token-11.png
@@ -0,0 +1,4 @@
1
+ ## 보드 운영 배포 관리
2
+
3
+ - 현재는 복사/붙여넣기 방법을 사용하고 있습니다.
4
+ - 보드 운영 배포는 사이트의 상황에 따라 다르므로, 협의가 필요합니다.
@@ -0,0 +1,16 @@
1
+ ## 보드 업데이트
2
+
3
+ - (이 기능은 현재 개발중입니다.)
4
+ - 상태
5
+ - 보드는 두가지 상태 'DRAFT'와 'RELEASED' 일 수 있습니다.
6
+ - 최초 생성되거나, 복제되거나, 수정되면 'DRAFT' 상태입니다.
7
+ - '배포' 버튼을 눌러서 'RELEASED' 상태로 변경할 수 있습니다.
8
+ - 화면 리프레시는 RELEASED 상태로 변했을 때에 동작합니다.
9
+
10
+ ![board-versioning]
11
+
12
+ - 버전 관리
13
+ - 보드는 'RELEASED' 상태가 될 때마다 새로운 버전으로 업그레이드 됩니다.
14
+ - 모든 버전은 데이타베이스에 보관되어, 필요시 보드를 이전 버전으로 되돌릴 수 있습니다.
15
+
16
+ [board-versioning]: ./images/board-versioning.png
@@ -0,0 +1,15 @@
1
+ ## Select 컴포넌트 옵션 데이터 바인딩 방법
2
+
3
+ Select 컴포넌트의 옵션을 외부 데이터로 구성하고자 하면, 아래 그림과 같이 대상 select 컴포넌트의 'options' 속성으로 오브젝트 배열 데이타를 전파한다.
4
+
5
+ Select 컴포넌트에서는 '텍스트필드' 속성을 전파받은 데이타의 오브젝트 속성중의 하나를 설정한다. (이 예시에서는 'display' 속성이다.)
6
+
7
+ Select 컴포넌트에서는 '값 필드' 속성을 전파받은 데이타의 오브젝트 속성중의 하나를 설정한다. (이 예시에서는 'value' 속성이다.)
8
+
9
+ '텍스트필드'는 옵션에 보이는 텍스트를 의미하며, '값 필드'는 옵션이 선택되었을 때의 실제 값을 의미한다.
10
+
11
+ ![source]
12
+ ![select]
13
+
14
+ [source]: ./images/data-binding-for-select-options-01.png
15
+ [select]: ./images/data-binding-for-select-options-02.png
@@ -0,0 +1,23 @@
1
+ ## 보드에서 보드 호출시 인자값 전달 방법
2
+
3
+ - 보드를 호출하는 방법은 '탭 이벤트 설정'에서 'popup target board', 'modal popup target board', 'goto target board' 를 선택하여 호출할 수 있습니다.
4
+
5
+ ![popup-board]
6
+
7
+ - 탭 이벤트 설정에서 '입력 데이타' 설정은 대상(target) 보드를 호출할 때, 넘겨줄 데이타를 가지고 있는 컴포넌트를 지정합니다. (여기 예시에서는 호출하는 컴포넌트 자신을 지정했습니다.)
8
+
9
+ ![set-target]
10
+ ![set-data]
11
+
12
+ - 팝업을 실행하면, 넘겨줄 데이터의 각 속성값을 아이디로 가지는 컴포넌트에게 자동 전파됩니다.
13
+
14
+ ![prepare-popup]
15
+ ![call-board]
16
+
17
+ - 탭 이벤트 설정에서 '리턴값 반영'을 선택하면, 팝업 내에서 팝업을 종료하는 컴포넌트의 데이타를 다시 넘겨 받아서, 팝업을 실행한 컴포넌트의 데이터로 반영됩니다.
18
+
19
+ [popup-board]: ./images/data-binding-on-calling-board-01.png
20
+ [set-target]: ./images/data-binding-on-calling-board-02.png
21
+ [set-data]: ./images/data-binding-on-calling-board-03.png
22
+ [prepare-popup]: ./images/data-binding-on-calling-board-04.png
23
+ [call-board]: ./images/data-binding-on-calling-board-05.png
@@ -0,0 +1,9 @@
1
+ ## 보드에서 선택한 값 저장 방법
2
+
3
+ 모델러의 데이타바인딩 탭에서 "지속성 데이타"를 클릭하면 마지막 데이타값이 브라우저에 저장되어, 다음에 실행될 때 저장한 값으로 초기화됩니다.
4
+
5
+ 이 데이타는 브라우저에 저장되므로, 브라우저별로 동작합니다.
6
+
7
+ ![persistent]
8
+
9
+ [persistent]: ./images/data-binding-persistent.png
@@ -0,0 +1,13 @@
1
+ ## 로그인한 계정 및 다국어설정 값 얻기
2
+
3
+ - credential 컴포넌트를 사용하면 로그인 계정 정보를 얻을 수 있습니다.
4
+ - 자세한 내용은 credential 컴포넌트의 도움말을 참조하세요.
5
+ - 사용자의 언어 정보는 credential 정보안에 'language' 속성으로 추가할 계획입니다.(개발중)
6
+
7
+ ![credential01]
8
+ ![credential02]
9
+ ![credential03]
10
+
11
+ [credential01]: ./images/user-credential-component-01.png
12
+ [credential02]: ./images/user-credential-component-02.png
13
+ [credential03]: ./images/user-credential-component-03.png
package/helps/faq.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # 자주 묻는 질문 (FAQ)
2
2
 
3
- ## 질문 1: Select 컴포넌트 데이터 바인딩 방법
3
+ ## 질문 1: Select 컴포넌트 옵션 데이터 바인딩 방법
4
4
 
5
5
  Select 컴포넌트(콤보박스)에 데이터를 Options 속성에 고정하는 것은 알겠는데, 데이터를 불러와서 그 값을 바인딩하는 방법을 설명해주세요
6
6
 
@@ -55,20 +55,6 @@ A: [보드 운영 배포 관리](./faq/board-deployment.md)
55
55
 
56
56
  ---
57
57
 
58
- ## 기술적인 질문들
59
-
60
- 이 섹션에서는 기술적인 질문과 답변을 제공합니다..
61
-
62
- ### Q: 기술적인 질문 1?
63
-
64
- A: 기술적인 질문 1에 대한 답변이 여기에 들어갑니다.
65
-
66
- ### Q: 기술적인 질문 2?
67
-
68
- A: 기술적인 질문 2에 대한 답변이 여기에 들어갑니다.
69
-
70
- ---
71
-
72
58
  ## 추가 도움말 및 연락처 정보
73
59
 
74
60
  - 웹사이트: [웹사이트 링크](https://hatiolab.com)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@things-factory/operato-board",
3
- "version": "6.1.131",
3
+ "version": "6.1.133",
4
4
  "main": "dist-server/index.js",
5
5
  "browser": "dist-client/index.js",
6
6
  "things-factory": true,
@@ -86,24 +86,24 @@
86
86
  "@operato/utils": "^1.0.1",
87
87
  "@things-factory/apptool-ui": "^6.1.129",
88
88
  "@things-factory/auth-ui": "^6.1.129",
89
- "@things-factory/board-service": "^6.1.131",
89
+ "@things-factory/board-service": "^6.1.132",
90
90
  "@things-factory/board-ui": "^6.1.130",
91
91
  "@things-factory/context-ui": "^6.1.129",
92
92
  "@things-factory/export-ui": "^6.1.129",
93
93
  "@things-factory/fav-base": "^6.1.129",
94
- "@things-factory/font-base": "^6.1.131",
94
+ "@things-factory/font-base": "^6.1.132",
95
95
  "@things-factory/form-ui": "^6.1.129",
96
96
  "@things-factory/help": "^6.1.129",
97
97
  "@things-factory/i18n-base": "^6.1.129",
98
98
  "@things-factory/import-ui": "^6.1.129",
99
99
  "@things-factory/integration-base": "^6.1.129",
100
100
  "@things-factory/integration-msgraph": "^6.1.129",
101
- "@things-factory/integration-notification": "^6.1.131",
101
+ "@things-factory/integration-notification": "^6.1.132",
102
102
  "@things-factory/integration-openai": "^6.1.129",
103
103
  "@things-factory/integration-ui": "^6.1.129",
104
104
  "@things-factory/layout-ui": "^6.1.129",
105
105
  "@things-factory/more-ui": "^6.1.129",
106
- "@things-factory/notification": "^6.1.131",
106
+ "@things-factory/notification": "^6.1.132",
107
107
  "@things-factory/oauth2-client": "^6.1.129",
108
108
  "@things-factory/offline-ui": "^6.1.129",
109
109
  "@things-factory/operato-license-checker": "^3.1.0",
@@ -117,8 +117,8 @@
117
117
  "@things-factory/system-ui": "^6.1.129"
118
118
  },
119
119
  "devDependencies": {
120
- "@things-factory/board-test": "^6.1.131",
120
+ "@things-factory/board-test": "^6.1.132",
121
121
  "@things-factory/builder": "^6.1.129"
122
122
  },
123
- "gitHead": "7e8b7b739e9fec8b7037853f926062807b079118"
123
+ "gitHead": "381656051048b9434f886ec17122ba8bb40e33ca"
124
124
  }