@things-factory/dashboard 9.0.0-beta.8 → 9.0.0-beta.80
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/dist-client/pages/dashboard.d.ts +1 -1
- package/dist-client/pages/dashboard.js +3 -3
- package/dist-client/pages/dashboard.js.map +1 -1
- package/dist-client/reducers/board-settings.js +4 -1
- package/dist-client/reducers/board-settings.js.map +1 -1
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/dist-client/viewparts/dashboard-setting-let.js +87 -88
- package/dist-client/viewparts/dashboard-setting-let.js.map +1 -1
- package/dist-server/tsconfig.tsbuildinfo +1 -1
- package/package.json +6 -6
|
@@ -13,6 +13,92 @@ import { client } from '@operato/graphql';
|
|
|
13
13
|
import { fetchBoardSettings, UPDATE_BOARD_SETTINGS } from '../actions/board-settings';
|
|
14
14
|
import { DASHBOARD, DASHBOARD_DESCRIPTION, DASHBOARD_MOBILE, DASHBOARD_MOBILE_DESCRIPTION, FALLBACK_HOME_BOARD } from '../const';
|
|
15
15
|
let DashboardSettingLet = class DashboardSettingLet extends connect(store)(localize(i18next)(LitElement)) {
|
|
16
|
+
static { this.styles = [
|
|
17
|
+
css `
|
|
18
|
+
div.field {
|
|
19
|
+
display: flex;
|
|
20
|
+
flex-direction: row;
|
|
21
|
+
align-items: flex-start;
|
|
22
|
+
max-width: 100%;
|
|
23
|
+
overflow: hidden;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
div.field > * {
|
|
27
|
+
flex: none;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
div.field > div {
|
|
31
|
+
flex: 1;
|
|
32
|
+
display: flex;
|
|
33
|
+
flex-direction: column;
|
|
34
|
+
align-items: flex-start;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
div.field a {
|
|
38
|
+
overflow: hidden;
|
|
39
|
+
border: var(--border-dim-color);
|
|
40
|
+
border-radius: var(--border-radius);
|
|
41
|
+
background-color: rgba(0, 0, 0, 0.1);
|
|
42
|
+
min-width: 50px;
|
|
43
|
+
min-height: 50px;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
div.field img {
|
|
47
|
+
max-height: 250px;
|
|
48
|
+
max-width: 100%;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.name {
|
|
52
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.description {
|
|
56
|
+
font-size: 0.7rem;
|
|
57
|
+
opacity: 0.7;
|
|
58
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
label {
|
|
62
|
+
width: 80px;
|
|
63
|
+
padding-right: var(--spacing-medium);
|
|
64
|
+
font: bold 0.9em var(--theme-font);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
setting-let > form {
|
|
68
|
+
display: grid;
|
|
69
|
+
grid-template-columns: 1fr 1fr;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
md-icon {
|
|
73
|
+
--md-icon-size: 18px;
|
|
74
|
+
margin: 2px 2px 5px 2px;
|
|
75
|
+
padding: 0 var(--spacing-medium);
|
|
76
|
+
color: var(--md-sys-on-secondary-container, #fff);
|
|
77
|
+
background-color: var(--md-sys-secondary-container, #394e64);
|
|
78
|
+
border-radius: var(--border-radius, 5px);
|
|
79
|
+
border: var(--button-border, 1px solid transparent);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
md-icon:hover,
|
|
83
|
+
md-icon:active {
|
|
84
|
+
background-color: var(--button-active-background-color, #22a6a7);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
@media screen and (max-width: 460px) {
|
|
88
|
+
setting-let > form {
|
|
89
|
+
display: flex;
|
|
90
|
+
flex-direction: column;
|
|
91
|
+
}
|
|
92
|
+
div.field {
|
|
93
|
+
border-bottom: var(--border-dim-color);
|
|
94
|
+
padding: var(--spacing-medium);
|
|
95
|
+
}
|
|
96
|
+
md-icon {
|
|
97
|
+
padding: var(--spacing-small) var(--spacing-medium);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
`
|
|
101
|
+
]; }
|
|
16
102
|
render() {
|
|
17
103
|
return html `
|
|
18
104
|
<setting-let>
|
|
@@ -65,11 +151,10 @@ let DashboardSettingLet = class DashboardSettingLet extends connect(store)(local
|
|
|
65
151
|
this.dashboardMobile = (dashboardMobile ? dashboardMobile.board : {}) || {};
|
|
66
152
|
}
|
|
67
153
|
onClickBoardSelector(name, description) {
|
|
68
|
-
var _a, _b;
|
|
69
154
|
var popup = openPopup(html `
|
|
70
155
|
<ox-board-selector
|
|
71
156
|
.creatable=${true}
|
|
72
|
-
.value=${name == DASHBOARD ?
|
|
157
|
+
.value=${name == DASHBOARD ? this.dashboard?.id : this.dashboardMobile?.id}
|
|
73
158
|
@board-selected=${async (e) => {
|
|
74
159
|
var board = e.detail.board;
|
|
75
160
|
await this.saveSettings({
|
|
@@ -121,92 +206,6 @@ let DashboardSettingLet = class DashboardSettingLet extends connect(store)(local
|
|
|
121
206
|
});
|
|
122
207
|
}
|
|
123
208
|
};
|
|
124
|
-
DashboardSettingLet.styles = [
|
|
125
|
-
css `
|
|
126
|
-
div.field {
|
|
127
|
-
display: flex;
|
|
128
|
-
flex-direction: row;
|
|
129
|
-
align-items: flex-start;
|
|
130
|
-
max-width: 100%;
|
|
131
|
-
overflow: hidden;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
div.field > * {
|
|
135
|
-
flex: none;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
div.field > div {
|
|
139
|
-
flex: 1;
|
|
140
|
-
display: flex;
|
|
141
|
-
flex-direction: column;
|
|
142
|
-
align-items: flex-start;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
div.field a {
|
|
146
|
-
overflow: hidden;
|
|
147
|
-
border: var(--border-dim-color);
|
|
148
|
-
border-radius: var(--border-radius);
|
|
149
|
-
background-color: rgba(0, 0, 0, 0.1);
|
|
150
|
-
min-width: 50px;
|
|
151
|
-
min-height: 50px;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
div.field img {
|
|
155
|
-
max-height: 250px;
|
|
156
|
-
max-width: 100%;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
.name {
|
|
160
|
-
color: var(--md-sys-color-on-secondary-container);
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
.description {
|
|
164
|
-
font-size: 0.7rem;
|
|
165
|
-
opacity: 0.7;
|
|
166
|
-
color: var(--md-sys-color-on-secondary-container);
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
label {
|
|
170
|
-
width: 80px;
|
|
171
|
-
padding-right: var(--spacing-medium);
|
|
172
|
-
font: bold 0.9em var(--theme-font);
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
setting-let > form {
|
|
176
|
-
display: grid;
|
|
177
|
-
grid-template-columns: 1fr 1fr;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
md-icon {
|
|
181
|
-
--md-icon-size: 18px;
|
|
182
|
-
margin: 2px 2px 5px 2px;
|
|
183
|
-
padding: 0 var(--spacing-medium);
|
|
184
|
-
color: var(--md-sys-on-secondary-container, #fff);
|
|
185
|
-
background-color: var(--md-sys-secondary-container, #394e64);
|
|
186
|
-
border-radius: var(--border-radius, 5px);
|
|
187
|
-
border: var(--button-border, 1px solid transparent);
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
md-icon:hover,
|
|
191
|
-
md-icon:active {
|
|
192
|
-
background-color: var(--button-active-background-color, #22a6a7);
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
@media screen and (max-width: 460px) {
|
|
196
|
-
setting-let > form {
|
|
197
|
-
display: flex;
|
|
198
|
-
flex-direction: column;
|
|
199
|
-
}
|
|
200
|
-
div.field {
|
|
201
|
-
border-bottom: var(--border-dim-color);
|
|
202
|
-
padding: var(--spacing-medium);
|
|
203
|
-
}
|
|
204
|
-
md-icon {
|
|
205
|
-
padding: var(--spacing-small) var(--spacing-medium);
|
|
206
|
-
}
|
|
207
|
-
}
|
|
208
|
-
`
|
|
209
|
-
];
|
|
210
209
|
__decorate([
|
|
211
210
|
state(),
|
|
212
211
|
__metadata("design:type", Object)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dashboard-setting-let.js","sourceRoot":"","sources":["../../client/viewparts/dashboard-setting-let.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/board/ox-board-selector.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers'\n\nimport { openPopup } from '@operato/layout'\nimport { i18next, localize } from '@operato/i18n'\nimport { store } from '@operato/shell'\nimport { client } from '@operato/graphql'\n\nimport { fetchBoardSettings, UPDATE_BOARD_SETTINGS } from '../actions/board-settings'\nimport {\n DASHBOARD,\n DASHBOARD_DESCRIPTION,\n DASHBOARD_MOBILE,\n DASHBOARD_MOBILE_DESCRIPTION,\n FALLBACK_HOME_BOARD\n} from '../const'\n\n@customElement('dashboard-setting-let')\nexport class DashboardSettingLet extends connect(store)(localize(i18next)(LitElement)) {\n static styles = [\n css`\n div.field {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n max-width: 100%;\n overflow: hidden;\n }\n\n div.field > * {\n flex: none;\n }\n\n div.field > div {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n div.field a {\n overflow: hidden;\n border: var(--border-dim-color);\n border-radius: var(--border-radius);\n background-color: rgba(0, 0, 0, 0.1);\n min-width: 50px;\n min-height: 50px;\n }\n\n div.field img {\n max-height: 250px;\n max-width: 100%;\n }\n\n .name {\n color: var(--md-sys-color-on-secondary-container);\n }\n\n .description {\n font-size: 0.7rem;\n opacity: 0.7;\n color: var(--md-sys-color-on-secondary-container);\n }\n\n label {\n width: 80px;\n padding-right: var(--spacing-medium);\n font: bold 0.9em var(--theme-font);\n }\n\n setting-let > form {\n display: grid;\n grid-template-columns: 1fr 1fr;\n }\n\n md-icon {\n --md-icon-size: 18px;\n margin: 2px 2px 5px 2px;\n padding: 0 var(--spacing-medium);\n color: var(--md-sys-on-secondary-container, #fff);\n background-color: var(--md-sys-secondary-container, #394e64);\n border-radius: var(--border-radius, 5px);\n border: var(--button-border, 1px solid transparent);\n }\n\n md-icon:hover,\n md-icon:active {\n background-color: var(--button-active-background-color, #22a6a7);\n }\n\n @media screen and (max-width: 460px) {\n setting-let > form {\n display: flex;\n flex-direction: column;\n }\n div.field {\n border-bottom: var(--border-dim-color);\n padding: var(--spacing-medium);\n }\n md-icon {\n padding: var(--spacing-small) var(--spacing-medium);\n }\n }\n `\n ]\n\n @state() private dashboard: any\n @state() private dashboardMobile: any\n\n render() {\n return html`\n <setting-let>\n <ox-i18n slot=\"title\" msgid=\"title.dashboard setting\"></ox-i18n>\n\n <form slot=\"content\">\n ${[\n {\n title: i18next.t('label.dashboard for desktop'),\n board: this.dashboard,\n key: DASHBOARD,\n description: DASHBOARD_DESCRIPTION\n },\n {\n title: i18next.t('label.dashboard for mobile'),\n board: this.dashboardMobile,\n key: DASHBOARD_MOBILE,\n description: DASHBOARD_MOBILE_DESCRIPTION\n }\n ].map(\n field => html`\n <div class=\"field\">\n <label>${field.title}</ox-i18n></label>\n <div>\n <div class=\"name\">${field.board.name}</div>\n <span class=\"description\">${field.board.description}</span>\n <md-icon @click=${e => this.onClickBoardSelector(field.key, field.description)}>\n more_horiz\n </md-icon>\n ${\n field.board.id\n ? html`\n <a href=${`board-modeller/${field.board.id}`}>\n <img\n src=${field.board.thumbnail ||\n 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'}\n />\n </a>\n `\n : html``\n }\n </div>\n </div>\n `\n )}\n </form>\n </setting-let>\n `\n }\n\n stateChanged(state: any) {\n var dashboard = state.boardSetting[DASHBOARD] || state.boardSetting[FALLBACK_HOME_BOARD]\n var dashboardMobile = state.boardSetting[DASHBOARD_MOBILE] || dashboard\n\n this.dashboard = (dashboard ? dashboard.board : {}) || {}\n this.dashboardMobile = (dashboardMobile ? dashboardMobile.board : {}) || {}\n }\n\n onClickBoardSelector(name: string, description: string) {\n var popup = openPopup(\n html`\n <ox-board-selector\n .creatable=${true}\n .value=${name == DASHBOARD ? this.dashboard?.id : this.dashboardMobile?.id}\n @board-selected=${async e => {\n var board = e.detail.board\n\n await this.saveSettings({\n name,\n value: board.id,\n category: 'board',\n description\n })\n\n var settings = await fetchBoardSettings([FALLBACK_HOME_BOARD, DASHBOARD, DASHBOARD_MOBILE])\n store.dispatch({\n type: UPDATE_BOARD_SETTINGS,\n settings: settings.reduce((settings, setting) => {\n settings[setting.name] = setting\n return settings\n }, {})\n })\n\n popup.close()\n this.requestUpdate()\n }}\n ></ox-board-selector>\n `,\n {\n backdrop: true,\n size: 'large',\n title: i18next.t('title.dashboard setting')\n }\n )\n }\n\n async saveSettings({ name, value, category, description }) {\n if (!(name && value)) {\n return\n }\n\n await client.query({\n query: gql`\n mutation UpdateSetting($patch: SettingPatch!, $name: String!) {\n updateSetting(patch: $patch, name: $name) {\n name\n value\n }\n }\n `,\n variables: {\n name,\n patch: {\n name,\n description,\n category,\n value\n }\n }\n })\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"dashboard-setting-let.js","sourceRoot":"","sources":["../../client/viewparts/dashboard-setting-let.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/board/ox-board-selector.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers'\n\nimport { openPopup } from '@operato/layout'\nimport { i18next, localize } from '@operato/i18n'\nimport { store } from '@operato/shell'\nimport { client } from '@operato/graphql'\n\nimport { fetchBoardSettings, UPDATE_BOARD_SETTINGS } from '../actions/board-settings'\nimport {\n DASHBOARD,\n DASHBOARD_DESCRIPTION,\n DASHBOARD_MOBILE,\n DASHBOARD_MOBILE_DESCRIPTION,\n FALLBACK_HOME_BOARD\n} from '../const'\n\n@customElement('dashboard-setting-let')\nexport class DashboardSettingLet extends connect(store)(localize(i18next)(LitElement)) {\n static styles = [\n css`\n div.field {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n max-width: 100%;\n overflow: hidden;\n }\n\n div.field > * {\n flex: none;\n }\n\n div.field > div {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n div.field a {\n overflow: hidden;\n border: var(--border-dim-color);\n border-radius: var(--border-radius);\n background-color: rgba(0, 0, 0, 0.1);\n min-width: 50px;\n min-height: 50px;\n }\n\n div.field img {\n max-height: 250px;\n max-width: 100%;\n }\n\n .name {\n color: var(--md-sys-color-on-secondary-container);\n }\n\n .description {\n font-size: 0.7rem;\n opacity: 0.7;\n color: var(--md-sys-color-on-secondary-container);\n }\n\n label {\n width: 80px;\n padding-right: var(--spacing-medium);\n font: bold 0.9em var(--theme-font);\n }\n\n setting-let > form {\n display: grid;\n grid-template-columns: 1fr 1fr;\n }\n\n md-icon {\n --md-icon-size: 18px;\n margin: 2px 2px 5px 2px;\n padding: 0 var(--spacing-medium);\n color: var(--md-sys-on-secondary-container, #fff);\n background-color: var(--md-sys-secondary-container, #394e64);\n border-radius: var(--border-radius, 5px);\n border: var(--button-border, 1px solid transparent);\n }\n\n md-icon:hover,\n md-icon:active {\n background-color: var(--button-active-background-color, #22a6a7);\n }\n\n @media screen and (max-width: 460px) {\n setting-let > form {\n display: flex;\n flex-direction: column;\n }\n div.field {\n border-bottom: var(--border-dim-color);\n padding: var(--spacing-medium);\n }\n md-icon {\n padding: var(--spacing-small) var(--spacing-medium);\n }\n }\n `\n ]\n\n @state() private dashboard: any\n @state() private dashboardMobile: any\n\n render() {\n return html`\n <setting-let>\n <ox-i18n slot=\"title\" msgid=\"title.dashboard setting\"></ox-i18n>\n\n <form slot=\"content\">\n ${[\n {\n title: i18next.t('label.dashboard for desktop'),\n board: this.dashboard,\n key: DASHBOARD,\n description: DASHBOARD_DESCRIPTION\n },\n {\n title: i18next.t('label.dashboard for mobile'),\n board: this.dashboardMobile,\n key: DASHBOARD_MOBILE,\n description: DASHBOARD_MOBILE_DESCRIPTION\n }\n ].map(\n field => html`\n <div class=\"field\">\n <label>${field.title}</ox-i18n></label>\n <div>\n <div class=\"name\">${field.board.name}</div>\n <span class=\"description\">${field.board.description}</span>\n <md-icon @click=${e => this.onClickBoardSelector(field.key, field.description)}>\n more_horiz\n </md-icon>\n ${\n field.board.id\n ? html`\n <a href=${`board-modeller/${field.board.id}`}>\n <img\n src=${field.board.thumbnail ||\n 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'}\n />\n </a>\n `\n : html``\n }\n </div>\n </div>\n `\n )}\n </form>\n </setting-let>\n `\n }\n\n stateChanged(state: any) {\n var dashboard = state.boardSetting[DASHBOARD] || state.boardSetting[FALLBACK_HOME_BOARD]\n var dashboardMobile = state.boardSetting[DASHBOARD_MOBILE] || dashboard\n\n this.dashboard = (dashboard ? dashboard.board : {}) || {}\n this.dashboardMobile = (dashboardMobile ? dashboardMobile.board : {}) || {}\n }\n\n onClickBoardSelector(name: string, description: string) {\n var popup = openPopup(\n html`\n <ox-board-selector\n .creatable=${true}\n .value=${name == DASHBOARD ? this.dashboard?.id : this.dashboardMobile?.id}\n @board-selected=${async e => {\n var board = e.detail.board\n\n await this.saveSettings({\n name,\n value: board.id,\n category: 'board',\n description\n })\n\n var settings = await fetchBoardSettings([FALLBACK_HOME_BOARD, DASHBOARD, DASHBOARD_MOBILE])\n store.dispatch({\n type: UPDATE_BOARD_SETTINGS,\n settings: settings.reduce((settings, setting) => {\n settings[setting.name] = setting\n return settings\n }, {})\n })\n\n popup.close()\n this.requestUpdate()\n }}\n ></ox-board-selector>\n `,\n {\n backdrop: true,\n size: 'large',\n title: i18next.t('title.dashboard setting')\n }\n )\n }\n\n async saveSettings({ name, value, category, description }) {\n if (!(name && value)) {\n return\n }\n\n await client.query({\n query: gql`\n mutation UpdateSetting($patch: SettingPatch!, $name: String!) {\n updateSetting(patch: $patch, name: $name) {\n name\n value\n }\n }\n `,\n variables: {\n name,\n patch: {\n name,\n description,\n category,\n value\n }\n }\n })\n }\n}\n"]}
|