@fmsim/fmsim 1.0.87 → 2.0.0-beta.3
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.
- package/Dockerfile +3 -3
- package/_index.html +9 -39
- package/dist-client/apptools/favorite-tool.js +4 -5
- package/dist-client/apptools/favorite-tool.js.map +1 -1
- package/dist-client/board-list/board-tile-list.js +9 -9
- package/dist-client/board-list/board-tile-list.js.map +1 -1
- package/dist-client/board-list/group-bar.js +6 -6
- package/dist-client/board-list/group-bar.js.map +1 -1
- package/dist-client/bootstrap.js +0 -2
- package/dist-client/bootstrap.js.map +1 -1
- package/dist-client/entries/headless-scene-components.js +7 -0
- package/dist-client/entries/headless-scene-components.js.map +1 -0
- package/dist-client/entries/scene-player.js +83 -0
- package/dist-client/entries/scene-player.js.map +1 -0
- package/dist-client/entries/scene-viewer.js +80 -0
- package/dist-client/entries/scene-viewer.js.map +1 -0
- package/dist-client/entries/things-scene-components.import +1 -0
- package/dist-client/pages/board-list-page.js +2 -3
- package/dist-client/pages/board-list-page.js.map +1 -1
- package/dist-client/themes/index.css +8 -2
- package/dist-client/themes/light.css +51 -0
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/dist-client/viewparts/board-info.js +16 -26
- package/dist-client/viewparts/board-info.js.map +1 -1
- package/dist-client/viewparts/group-info.js +15 -25
- package/dist-client/viewparts/group-info.js.map +1 -1
- package/dist-client/viewparts/menu-tools.js +9 -10
- package/dist-client/viewparts/menu-tools.js.map +1 -1
- package/dist-server/tsconfig.tsbuildinfo +1 -1
- package/package.json +33 -32
- package/schema.graphql +3309 -384
- package/views/auth-page.html +2 -2
- package/views/internal-board-full-feature-view.html +1 -1
- package/views/internal-board-service-view.html +1 -1
- package/views/public/home.html +2 -2
- package/dist-client/apptools/favorite-tool.d.ts +0 -26
- package/dist-client/board-list/board-tile-list.d.ts +0 -20
- package/dist-client/board-list/group-bar.d.ts +0 -14
- package/dist-client/bootstrap.d.ts +0 -5
- package/dist-client/index.d.ts +0 -0
- package/dist-client/pages/attachment-list-page.d.ts +0 -21
- package/dist-client/pages/board-list-page.d.ts +0 -70
- package/dist-client/pages/connection-list-page.d.ts +0 -30
- package/dist-client/pages/font-list-page.d.ts +0 -10
- package/dist-client/pages/scenario-list-page.d.ts +0 -30
- package/dist-client/pages/toplevel-theme-list-page.d.ts +0 -25
- package/dist-client/route.d.ts +0 -1
- package/dist-client/viewparts/board-info.d.ts +0 -16
- package/dist-client/viewparts/group-info.d.ts +0 -15
- package/dist-client/viewparts/menu-tools.d.ts +0 -20
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { __decorate, __metadata } from "tslib";
|
|
2
|
-
import '@material/
|
|
2
|
+
import '@material/web/icon/icon.js';
|
|
3
|
+
import '@material/web/button/filled-button.js';
|
|
4
|
+
import '@material/web/button/text-button.js';
|
|
3
5
|
import { css, html, LitElement } from 'lit';
|
|
4
6
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
5
7
|
import { i18next } from '@operato/i18n';
|
|
@@ -46,42 +48,30 @@ let BoardInfo = class BoardInfo extends LitElement {
|
|
|
46
48
|
</select>
|
|
47
49
|
<label>${i18next.t('label.creator')}</label>
|
|
48
50
|
<span>
|
|
49
|
-
<
|
|
50
|
-
<
|
|
51
|
+
<md-icon>person</md-icon> ${(board.creator && board.creator.name) || 'anonymous'}
|
|
52
|
+
<md-icon>schedule</md-icon> ${new Date(Number(board.createdAt)).toLocaleString()}
|
|
51
53
|
</span>
|
|
52
54
|
|
|
53
55
|
<label>${i18next.t('label.updater')}</label>
|
|
54
56
|
<span>
|
|
55
|
-
<
|
|
56
|
-
<
|
|
57
|
+
<md-icon>person</md-icon> ${(board.updater && board.updater.name) || 'anonymouse'}
|
|
58
|
+
<md-icon>schedule</md-icon> ${new Date(Number(board.updatedAt)).toLocaleString()}
|
|
57
59
|
</span>
|
|
58
60
|
|
|
59
61
|
<div buttons>
|
|
60
|
-
<
|
|
61
|
-
dense
|
|
62
|
-
raised
|
|
62
|
+
<md-text-button
|
|
63
63
|
danger
|
|
64
|
-
label=${String(i18next.t('button.delete'))}
|
|
65
64
|
?disabled=${!this.enableModeller}
|
|
66
65
|
@click=${this.deleteBoard.bind(this)}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
<mwc-button
|
|
70
|
-
dense
|
|
71
|
-
raised
|
|
72
|
-
label=${String(i18next.t('button.save'))}
|
|
66
|
+
><md-icon slot="icon">delete_outline</md-icon>${i18next.t('button.delete')}</md-text-button>
|
|
67
|
+
<md-filled-button
|
|
73
68
|
?disabled=${!this.enableModeller}
|
|
74
69
|
@click=${this.updateBoard.bind(this)}
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
<mwc-button
|
|
78
|
-
dense
|
|
79
|
-
raised
|
|
80
|
-
label="edit"
|
|
70
|
+
><md-icon slot="icon">done</md-icon>${i18next.t('button.save')}</md-filled-button>
|
|
71
|
+
<md-filled-button
|
|
81
72
|
?disabled=${!this.enableModeller}
|
|
82
73
|
@click=${() => navigate(`${'board-modeller/' + this.boardId}`)}
|
|
83
|
-
|
|
84
|
-
></mwc-button>
|
|
74
|
+
><md-icon slot="icon">drive_file_rename_outline</md-icon>edit</md-filled-button>
|
|
85
75
|
</div>
|
|
86
76
|
</fieldset>
|
|
87
77
|
</form>
|
|
@@ -126,7 +116,7 @@ BoardInfo.styles = [
|
|
|
126
116
|
--form-grid-gap: 2px 0;
|
|
127
117
|
--input-field-padding: var(--padding-default);
|
|
128
118
|
--legend-padding: var(--padding-default) 0 var(--padding-narrow) 0;
|
|
129
|
-
--
|
|
119
|
+
--md-filled-button-container-height: 32px;
|
|
130
120
|
}
|
|
131
121
|
|
|
132
122
|
img {
|
|
@@ -159,7 +149,7 @@ BoardInfo.styles = [
|
|
|
159
149
|
[danger] {
|
|
160
150
|
float: left;
|
|
161
151
|
margin: 0 var(--margin-narrow) 0 0;
|
|
162
|
-
--
|
|
152
|
+
--md-text-button-label-text-color: var(--md-sys-color-error);
|
|
163
153
|
}
|
|
164
154
|
|
|
165
155
|
fieldset {
|
|
@@ -188,7 +178,7 @@ BoardInfo.styles = [
|
|
|
188
178
|
padding-bottom: var(--padding-narrow);
|
|
189
179
|
font: var(--input-field-font);
|
|
190
180
|
}
|
|
191
|
-
span
|
|
181
|
+
span md-icon {
|
|
192
182
|
vertical-align: middle;
|
|
193
183
|
font-size: var(--fontsize-large);
|
|
194
184
|
color: var(--primary-color);
|
|
@@ -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 { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { navigate } from '@operato/shell'\n\nimport { fetchBoardInfoById } from '@fmsim/api'\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\n render() {\n var board = this.board || { name: '', description: '' }\n var boardGroupList = this.boardGroupList || []\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.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.description = e.target.value)}\n ?disabled=${!this.enableModeller}\n />\n\n <label>${i18next.t('label.group')}</label>\n <select\n @change=${e => (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 <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 </fieldset>\n </form>\n `\n }\n\n firstUpdated() {\n this.refresh()\n }\n\n async refresh() {\n const data = await fetchBoardInfoById(this.boardId!)\n\n this.board = data.board\n this.boardGroupList = data.groups.items\n\n this.groupId = this.board.group?.id\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 this.dispatchEvent(\n new CustomEvent('delete-board', {\n detail: this.board\n })\n )\n\n this.close()\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/web/icon/icon.js'\nimport '@material/web/button/filled-button.js'\nimport '@material/web/button/text-button.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { navigate } from '@operato/shell'\n\nimport { fetchBoardInfoById } from '@fmsim/api'\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 --md-filled-button-container-height: 32px;\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 --md-text-button-label-text-color: var(--md-sys-color-error);\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 md-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\n render() {\n var board = this.board || { name: '', description: '' }\n var boardGroupList = this.boardGroupList || []\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.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.description = e.target.value)}\n ?disabled=${!this.enableModeller}\n />\n\n <label>${i18next.t('label.group')}</label>\n <select\n @change=${e => (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 <md-icon>person</md-icon> ${(board.creator && board.creator.name) || 'anonymous'}\n <md-icon>schedule</md-icon> ${new Date(Number(board.createdAt)).toLocaleString()}\n </span>\n\n <label>${i18next.t('label.updater')}</label>\n <span>\n <md-icon>person</md-icon> ${(board.updater && board.updater.name) || 'anonymouse'}\n <md-icon>schedule</md-icon> ${new Date(Number(board.updatedAt)).toLocaleString()}\n </span>\n\n <div buttons>\n <md-text-button\n danger\n ?disabled=${!this.enableModeller}\n @click=${this.deleteBoard.bind(this)}\n ><md-icon slot=\"icon\">delete_outline</md-icon>${i18next.t('button.delete')}</md-text-button>\n <md-filled-button\n ?disabled=${!this.enableModeller}\n @click=${this.updateBoard.bind(this)}\n ><md-icon slot=\"icon\">done</md-icon>${i18next.t('button.save')}</md-filled-button>\n <md-filled-button\n ?disabled=${!this.enableModeller}\n @click=${() => navigate(`${'board-modeller/' + this.boardId}`)}\n ><md-icon slot=\"icon\">drive_file_rename_outline</md-icon>edit</md-filled-button>\n </div>\n </fieldset>\n </form>\n `\n }\n\n firstUpdated() {\n this.refresh()\n }\n\n async refresh() {\n const data = await fetchBoardInfoById(this.boardId!)\n\n this.board = data.board\n this.boardGroupList = data.groups.items\n\n this.groupId = this.board.group?.id\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 this.dispatchEvent(\n new CustomEvent('delete-board', {\n detail: this.board\n })\n )\n\n this.close()\n }\n\n close() {\n history.back()\n }\n}\n"]}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { __decorate, __metadata } from "tslib";
|
|
2
|
-
import '@material/
|
|
2
|
+
import '@material/web/icon/icon.js';
|
|
3
|
+
import '@material/web/button/filled-button.js';
|
|
4
|
+
import '@material/web/button/text-button.js';
|
|
3
5
|
import { css, html, LitElement } from 'lit';
|
|
4
6
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
5
|
-
import { i18next } from '@things-factory/i18n-base/client';
|
|
7
|
+
import { i18next } from '@things-factory/i18n-base/dist-client';
|
|
6
8
|
import { fetchGroupById } from '@fmsim/api';
|
|
7
9
|
let GroupInfo = class GroupInfo extends LitElement {
|
|
8
10
|
render() {
|
|
@@ -19,41 +21,29 @@ let GroupInfo = class GroupInfo extends LitElement {
|
|
|
19
21
|
|
|
20
22
|
<label>${i18next.t('label.creator')}</label>
|
|
21
23
|
<span>
|
|
22
|
-
<
|
|
24
|
+
<md-icon>person</md-icon> ${group.creator && group.creator.name} <md-icon>schedule</md-icon> ${new Date(Number(group.createdAt)).toLocaleString()}
|
|
23
25
|
</span>
|
|
24
26
|
|
|
25
27
|
<label>${i18next.t('label.updater')}</label>
|
|
26
28
|
<span>
|
|
27
|
-
<
|
|
29
|
+
<md-icon>person</md-icon> ${group.updater && group.updater.name} <md-icon>schedule</md-icon> ${new Date(Number(group.updatedAt)).toLocaleString()}
|
|
28
30
|
</span>
|
|
29
31
|
|
|
30
32
|
<div buttons>
|
|
31
33
|
${this.groupId
|
|
32
34
|
? html `
|
|
33
|
-
<
|
|
34
|
-
dense
|
|
35
|
-
raised
|
|
35
|
+
<md-text-button
|
|
36
36
|
danger
|
|
37
|
-
label=${i18next.t('button.delete')}
|
|
38
37
|
@click=${this.deleteGroup.bind(this)}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
<mwc-button
|
|
42
|
-
dense
|
|
43
|
-
raised
|
|
44
|
-
label=${i18next.t('button.save')}
|
|
38
|
+
><md-icon slot="icon">delete_outline</md-icon>${i18next.t('button.delete')}</md-text-button>
|
|
39
|
+
<md-filled-button
|
|
45
40
|
@click=${this.updateGroup.bind(this)}
|
|
46
|
-
|
|
47
|
-
></mwc-button>
|
|
41
|
+
><md-icon slot="icon">done</md-icon>${i18next.t('button.save')}</md-filled-button>
|
|
48
42
|
`
|
|
49
43
|
: html `
|
|
50
|
-
<
|
|
51
|
-
dense
|
|
52
|
-
raised
|
|
53
|
-
label=${i18next.t('button.create')}
|
|
44
|
+
<md-filled-button
|
|
54
45
|
@click=${this.createGroup.bind(this)}
|
|
55
|
-
|
|
56
|
-
></mwc-button>
|
|
46
|
+
><md-icon slot="icon">create_new_folder</md-icon>${i18next.t('button.create')}</md-filled-button>
|
|
57
47
|
`}
|
|
58
48
|
</div>
|
|
59
49
|
</fieldset>
|
|
@@ -116,7 +106,7 @@ GroupInfo.styles = [
|
|
|
116
106
|
--form-grid-gap: 2px 0;
|
|
117
107
|
--input-field-padding: var(--padding-default);
|
|
118
108
|
--legend-padding: var(--padding-default) 0 var(--padding-narrow) 0;
|
|
119
|
-
--
|
|
109
|
+
--md-filled-button-container-height: 32px;
|
|
120
110
|
}
|
|
121
111
|
|
|
122
112
|
form {
|
|
@@ -140,7 +130,7 @@ GroupInfo.styles = [
|
|
|
140
130
|
[danger] {
|
|
141
131
|
float: left;
|
|
142
132
|
margin: 0 var(--margin-narrow) 0 0;
|
|
143
|
-
--
|
|
133
|
+
--md-text-button-label-text-color: var(--md-sys-color-error);
|
|
144
134
|
}
|
|
145
135
|
|
|
146
136
|
fieldset {
|
|
@@ -169,7 +159,7 @@ GroupInfo.styles = [
|
|
|
169
159
|
padding-bottom: var(--padding-narrow);
|
|
170
160
|
font: var(--input-field-font);
|
|
171
161
|
}
|
|
172
|
-
span
|
|
162
|
+
span md-icon {
|
|
173
163
|
vertical-align: middle;
|
|
174
164
|
font-size: var(--fontsize-large);
|
|
175
165
|
color: var(--primary-color);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"group-info.js","sourceRoot":"","sources":["../../client/viewparts/group-info.ts"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"group-info.js","sourceRoot":"","sources":["../../client/viewparts/group-info.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/filled-button.js'\nimport '@material/web/button/text-button.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@things-factory/i18n-base/dist-client'\n\nimport { fetchGroupById } from '@fmsim/api'\n\n@customElement('group-info')\nexport class GroupInfo 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 --md-filled-button-container-height: 32px;\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 --md-text-button-label-text-color: var(--md-sys-color-error);\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 md-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 }) groupId?: string\n\n @state() group: any\n\n render() {\n var group = this.group || { name: '', description: '' }\n\n return html`\n <form>\n <fieldset>\n <legend>group information</legend>\n <label>${i18next.t('label.name')}</label>\n <input type=\"text\" .value=${group.name} @change=${e => (this.group.name = e.target.value)} />\n\n <label>${i18next.t('label.description')}</label>\n <input type=\"text\" .value=${group.description} @change=${e => (this.group.description = e.target.value)} />\n\n <label>${i18next.t('label.creator')}</label>\n <span>\n <md-icon>person</md-icon> ${group.creator && group.creator.name} <md-icon>schedule</md-icon> ${new Date(\n Number(group.createdAt)\n ).toLocaleString()}\n </span>\n\n <label>${i18next.t('label.updater')}</label>\n <span>\n <md-icon>person</md-icon> ${group.updater && group.updater.name} <md-icon>schedule</md-icon> ${new Date(\n Number(group.updatedAt)\n ).toLocaleString()}\n </span>\n\n <div buttons>\n ${this.groupId\n ? html`\n <md-text-button\n danger\n @click=${this.deleteGroup.bind(this)}\n ><md-icon slot=\"icon\">delete_outline</md-icon>${i18next.t('button.delete')}</md-text-button>\n <md-filled-button\n @click=${this.updateGroup.bind(this)}\n ><md-icon slot=\"icon\">done</md-icon>${i18next.t('button.save')}</md-filled-button>\n `\n : html`\n <md-filled-button\n @click=${this.createGroup.bind(this)}\n ><md-icon slot=\"icon\">create_new_folder</md-icon>${i18next.t('button.create')}</md-filled-button>\n `}\n </div>\n </fieldset>\n </form>\n `\n }\n\n updated(changes) {\n if (changes.has('groupId')) {\n this.refresh()\n }\n }\n\n firstUpdated() {\n setTimeout(() => {\n ;(this.renderRoot.querySelector('input[type=text]') as any).focus()\n }, 100)\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 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.group\n })\n )\n\n this.close()\n }\n\n close() {\n history.back()\n }\n}\n"]}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { __decorate, __metadata } from "tslib";
|
|
2
|
-
import '@material/
|
|
2
|
+
import '@material/web/icon/icon.js';
|
|
3
3
|
import '@operato/i18n/ox-i18n.js';
|
|
4
4
|
import { css, html, LitElement } from 'lit';
|
|
5
5
|
import { customElement, property } from 'lit/decorators.js';
|
|
6
|
-
import { connect } from '
|
|
7
|
-
import { store } from '@operato/shell';
|
|
6
|
+
import { connect, store } from '@operato/shell';
|
|
8
7
|
let MenuTools = class MenuTools extends connect(store)(LitElement) {
|
|
9
8
|
render() {
|
|
10
9
|
return this.context && this.context['board_topmenu']
|
|
@@ -12,37 +11,37 @@ let MenuTools = class MenuTools extends connect(store)(LitElement) {
|
|
|
12
11
|
<ul>
|
|
13
12
|
<li>
|
|
14
13
|
<a href="board-list" ?active=${this.page == 'board-list'}>
|
|
15
|
-
<
|
|
14
|
+
<md-icon>dvr</md-icon>
|
|
16
15
|
<div><ox-i18n msgid="label.board"></ox-i18n></div>
|
|
17
16
|
</a>
|
|
18
17
|
</li>
|
|
19
18
|
<li>
|
|
20
19
|
<a href="font-list" ?active=${this.page == 'font-list'}>
|
|
21
|
-
<
|
|
20
|
+
<md-icon>font_download</md-icon>
|
|
22
21
|
<div><ox-i18n msgid="label.font"></ox-i18n></div>
|
|
23
22
|
</a>
|
|
24
23
|
</li>
|
|
25
24
|
<li>
|
|
26
25
|
<a href="attachment-list" ?active=${this.page == 'attachment-list'}>
|
|
27
|
-
<
|
|
26
|
+
<md-icon>attachment</md-icon>
|
|
28
27
|
<div><ox-i18n msgid="label.attachment"></ox-i18n></div>
|
|
29
28
|
</a>
|
|
30
29
|
</li>
|
|
31
30
|
<li>
|
|
32
31
|
<a href="theme-list" ?active=${this.page == 'theme-list'}>
|
|
33
|
-
<
|
|
32
|
+
<md-icon>draw</md-icon>
|
|
34
33
|
<div><ox-i18n msgid="label.theme"></ox-i18n></div>
|
|
35
34
|
</a>
|
|
36
35
|
</li>
|
|
37
36
|
<li>
|
|
38
37
|
<a href="connection-list" ?active=${this.page == 'connection-list'}>
|
|
39
|
-
<
|
|
38
|
+
<md-icon>device_hub</md-icon>
|
|
40
39
|
<div><ox-i18n msgid="label.connection"></ox-i18n></div>
|
|
41
40
|
</a>
|
|
42
41
|
</li>
|
|
43
42
|
<li>
|
|
44
43
|
<a href="scenario-list" ?active=${this.page == 'scenario-list'}>
|
|
45
|
-
<
|
|
44
|
+
<md-icon>format_list_numbered</md-icon>
|
|
46
45
|
<div><ox-i18n msgid="label.scenario"></ox-i18n></div>
|
|
47
46
|
</a>
|
|
48
47
|
</li>
|
|
@@ -108,7 +107,7 @@ MenuTools.styles = [
|
|
|
108
107
|
background-color: rgba(0, 0, 0, 0.2);
|
|
109
108
|
}
|
|
110
109
|
|
|
111
|
-
|
|
110
|
+
md-icon {
|
|
112
111
|
padding: 5px 15px 0px 15px;
|
|
113
112
|
vertical-align: bottom;
|
|
114
113
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-tools.js","sourceRoot":"","sources":["../../client/viewparts/menu-tools.ts"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"menu-tools.js","sourceRoot":"","sources":["../../client/viewparts/menu-tools.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAGxC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAqEvD,MAAM;QACJ,OAAO,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;YAClD,CAAC,CAAC,IAAI,CAAA;;;6CAGiC,IAAI,CAAC,IAAI,IAAI,YAAY;;;;;;4CAM1B,IAAI,CAAC,IAAI,IAAI,WAAW;;;;;;kDAMlB,IAAI,CAAC,IAAI,IAAI,iBAAiB;;;;;;6CAMnC,IAAI,CAAC,IAAI,IAAI,YAAY;;;;;;kDAMpB,IAAI,CAAC,IAAI,IAAI,iBAAiB;;;;;;gDAMhC,IAAI,CAAC,IAAI,IAAI,eAAe;;;;;;SAMnE;YACH,CAAC,CAAC,IAAI,CAAA,EAAE,CAAA;IACZ,CAAC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA;QAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAA;QAC/B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAA;IACpC,CAAC;;AArHM,gBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2DF;CACF,AA7DY,CA6DZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;uCAAc;AACE;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;wCAAe;AAC5B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;2CAAmB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CAAa;AAnE7B,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAuHrB","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { connect, store } from '@operato/shell'\n\n@customElement('menu-tools')\nexport class MenuTools extends connect(store)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n background-color: var(--menu-tools-background-color);\n\n /* for narrow mode */\n flex-direction: column;\n width: 100%;\n }\n\n :host([width='WIDE']) {\n /* for wide mode */\n flex-direction: row;\n width: initial;\n height: 100%;\n }\n\n ul {\n display: flex;\n flex-direction: row;\n\n margin: auto;\n padding: 0;\n list-style: none;\n height: 100%;\n overflow: none;\n }\n\n :host([width='WIDE']) ul {\n flex-direction: column;\n }\n\n :host([width='WIDE']) li {\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n }\n\n a {\n display: block;\n padding: 5px 0px;\n text-align: center;\n text-decoration: none;\n color: var(--menu-tools-color);\n max-width: 54px;\n }\n\n a[active] {\n color: var(--menu-tools-active-color);\n background-color: rgba(0, 0, 0, 0.2);\n }\n\n md-icon {\n padding: 5px 15px 0px 15px;\n vertical-align: bottom;\n }\n\n div {\n font-size: 0.6em;\n }\n `\n ]\n\n @property({ type: String }) page?: string\n @property({ type: String, reflect: true }) width?: string\n @property({ type: Boolean }) editable?: boolean\n @property({ type: Object }) context: any\n\n render() {\n return this.context && this.context['board_topmenu']\n ? html`\n <ul>\n <li>\n <a href=\"board-list\" ?active=${this.page == 'board-list'}>\n <md-icon>dvr</md-icon>\n <div><ox-i18n msgid=\"label.board\"></ox-i18n></div>\n </a>\n </li>\n <li>\n <a href=\"font-list\" ?active=${this.page == 'font-list'}>\n <md-icon>font_download</md-icon>\n <div><ox-i18n msgid=\"label.font\"></ox-i18n></div>\n </a>\n </li>\n <li>\n <a href=\"attachment-list\" ?active=${this.page == 'attachment-list'}>\n <md-icon>attachment</md-icon>\n <div><ox-i18n msgid=\"label.attachment\"></ox-i18n></div>\n </a>\n </li>\n <li>\n <a href=\"theme-list\" ?active=${this.page == 'theme-list'}>\n <md-icon>draw</md-icon>\n <div><ox-i18n msgid=\"label.theme\"></ox-i18n></div>\n </a>\n </li>\n <li>\n <a href=\"connection-list\" ?active=${this.page == 'connection-list'}>\n <md-icon>device_hub</md-icon>\n <div><ox-i18n msgid=\"label.connection\"></ox-i18n></div>\n </a>\n </li>\n <li>\n <a href=\"scenario-list\" ?active=${this.page == 'scenario-list'}>\n <md-icon>format_list_numbered</md-icon>\n <div><ox-i18n msgid=\"label.scenario\"></ox-i18n></div>\n </a>\n </li>\n </ul>\n `\n : html``\n }\n\n stateChanged(state) {\n this.page = state.route.page\n this.width = state.layout.width\n this.context = state.route.context\n }\n}\n"]}
|