@things-factory/integration-ui 7.0.1-alpha.99 → 7.0.1-beta.1

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 (54) hide show
  1. package/client/analysis/graph-viewer-style.ts +1 -1
  2. package/client/editors/entity-selector.ts +21 -4
  3. package/client/editors/things-editor-oracle-procedure.ts +14 -4
  4. package/client/editors/things-editor-tag-scenarios.ts +1 -1
  5. package/client/pages/connection-importer.ts +6 -2
  6. package/client/pages/connection.ts +9 -2
  7. package/client/pages/integration-analysis.ts +1 -1
  8. package/client/pages/integration-monitor.ts +12 -3
  9. package/client/pages/scenario-detail.ts +9 -3
  10. package/client/pages/scenario-importer.ts +6 -2
  11. package/client/pages/scenario.ts +24 -8
  12. package/client/viewparts/connections-monitor.ts +8 -6
  13. package/client/viewparts/scenario-instance-log-view.ts +6 -2
  14. package/client/viewparts/scenario-instance-monitor.ts +16 -9
  15. package/client/viewparts/scenario-instance-view.ts +5 -5
  16. package/client/viewparts/scenario-monitor.ts +10 -4
  17. package/client/viewparts/scenarios-monitor.ts +8 -4
  18. package/dist-client/analysis/graph-viewer-style.js +1 -1
  19. package/dist-client/analysis/graph-viewer-style.js.map +1 -1
  20. package/dist-client/editors/entity-selector.js +19 -4
  21. package/dist-client/editors/entity-selector.js.map +1 -1
  22. package/dist-client/editors/things-editor-oracle-procedure.js +6 -2
  23. package/dist-client/editors/things-editor-oracle-procedure.js.map +1 -1
  24. package/dist-client/editors/things-editor-tag-scenarios.js +1 -1
  25. package/dist-client/editors/things-editor-tag-scenarios.js.map +1 -1
  26. package/dist-client/pages/connection-importer.js +6 -2
  27. package/dist-client/pages/connection-importer.js.map +1 -1
  28. package/dist-client/pages/connection.js +9 -2
  29. package/dist-client/pages/connection.js.map +1 -1
  30. package/dist-client/pages/integration-analysis.js +1 -1
  31. package/dist-client/pages/integration-analysis.js.map +1 -1
  32. package/dist-client/pages/integration-monitor.js +12 -3
  33. package/dist-client/pages/integration-monitor.js.map +1 -1
  34. package/dist-client/pages/scenario-detail.js +9 -3
  35. package/dist-client/pages/scenario-detail.js.map +1 -1
  36. package/dist-client/pages/scenario-importer.js +6 -2
  37. package/dist-client/pages/scenario-importer.js.map +1 -1
  38. package/dist-client/pages/scenario.js +16 -3
  39. package/dist-client/pages/scenario.js.map +1 -1
  40. package/dist-client/tsconfig.tsbuildinfo +1 -1
  41. package/dist-client/viewparts/connections-monitor.js +8 -6
  42. package/dist-client/viewparts/connections-monitor.js.map +1 -1
  43. package/dist-client/viewparts/scenario-instance-log-view.js +6 -2
  44. package/dist-client/viewparts/scenario-instance-log-view.js.map +1 -1
  45. package/dist-client/viewparts/scenario-instance-monitor.js +10 -6
  46. package/dist-client/viewparts/scenario-instance-monitor.js.map +1 -1
  47. package/dist-client/viewparts/scenario-instance-view.js +5 -5
  48. package/dist-client/viewparts/scenario-instance-view.js.map +1 -1
  49. package/dist-client/viewparts/scenario-monitor.js +10 -4
  50. package/dist-client/viewparts/scenario-monitor.js.map +1 -1
  51. package/dist-client/viewparts/scenarios-monitor.js +8 -4
  52. package/dist-client/viewparts/scenarios-monitor.js.map +1 -1
  53. package/dist-server/tsconfig.tsbuildinfo +1 -1
  54. package/package.json +16 -16
package/client/analysis/graph-viewer-style.ts CHANGED
@@ -32,7 +32,7 @@ export const GraphViewerStyles = css`
32
32
  }
33
33
 
34
34
  .graph-info a.property {
35
- background-color: #fff;
35
+ background-color: var(--md-sys-color-surface);
36
36
  border-color: #ccc;
37
37
  color: #333;
38
38
  }
package/client/editors/entity-selector.ts CHANGED
@@ -21,7 +21,7 @@ export class EntitySelector extends LitElement {
21
21
  display: flex;
22
22
  flex-direction: column;
23
23
 
24
- background-color: #fff;
24
+ background-color: var(--md-sys-color-surface);
25
25
  }
26
26
 
27
27
  ox-grist {
@@ -65,7 +65,12 @@ export class EntitySelector extends LitElement {
65
65
  .fields="${this.searchFields}"
66
66
  ></search-form>
67
67
 
68
- <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.config} .data=${this.data} .fetchHandler="${this.fetchHandler.bind(this)}"></ox-grist>
68
+ <ox-grist
69
+ .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
70
+ .config=${this.config}
71
+ .data=${this.data}
72
+ .fetchHandler="${this.fetchHandler.bind(this)}"
73
+ ></ox-grist>
69
74
 
70
75
  <div class="button-container">
71
76
  <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
@@ -160,9 +165,21 @@ export class EntitySelector extends LitElement {
160
165
  return {
161
166
  label: selectField.header || i18next.t(`field.${selectField.name}`),
162
167
  name: selectField.name,
163
- type: fieldType === 'string' ? 'text' : numberTypes.indexOf(fieldType) >= 0 ? 'number' : fieldType === 'boolean' ? 'checkbox' : fieldType,
168
+ type:
169
+ fieldType === 'string'
170
+ ? 'text'
171
+ : numberTypes.indexOf(fieldType) >= 0
172
+ ? 'number'
173
+ : fieldType === 'boolean'
174
+ ? 'checkbox'
175
+ : fieldType,
164
176
  queryName: selectField.queryName,
165
- props: fieldType === 'string' ? { searchOper: 'i_like' } : fieldType === 'object' ? { searchOper: 'in' } : { searchOper: 'eq' },
177
+ props:
178
+ fieldType === 'string'
179
+ ? { searchOper: 'i_like' }
180
+ : fieldType === 'object'
181
+ ? { searchOper: 'in' }
182
+ : { searchOper: 'eq' },
166
183
  attrs: fieldType === 'boolean' ? ['indeterminated'] : []
167
184
  }
168
185
  })
package/client/editors/things-editor-oracle-procedure.ts CHANGED
@@ -106,7 +106,7 @@ export class ThingsEditorProcedureParameters extends OxFormField {
106
106
 
107
107
  input:focus {
108
108
  outline: none;
109
- border-bottom: 1px solid var(--primary-color);
109
+ border-bottom: 1px solid var(--md-sys-color-primary);
110
110
  }
111
111
 
112
112
  button.hidden {
@@ -286,7 +286,13 @@ export class ThingsEditorProcedureParameters extends OxFormField {
286
286
  accessor: accessor && String(accessor).trim()
287
287
  } as ProcedureParameterType
288
288
 
289
- if (dir != 'In' && (type == 'String' || type == 'Buffer') && maxSize !== null && maxSize !== undefined && !isNaN(maxSize)) {
289
+ if (
290
+ dir != 'In' &&
291
+ (type == 'String' || type == 'Buffer') &&
292
+ maxSize !== null &&
293
+ maxSize !== undefined &&
294
+ !isNaN(maxSize)
295
+ ) {
290
296
  entry.maxSize = maxSize
291
297
  }
292
298
 
@@ -316,7 +322,9 @@ export class ThingsEditorProcedureParameters extends OxFormField {
316
322
  const accessor = (record.querySelector('[data-accessor]') as HTMLInputElement).value
317
323
  const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber
318
324
 
319
- const inputs = record.querySelectorAll('[data-type]:not([style*="display: none"])') as NodeListOf<HTMLInputElement>
325
+ const inputs = record.querySelectorAll(
326
+ '[data-type]:not([style*="display: none"])'
327
+ ) as NodeListOf<HTMLInputElement>
320
328
 
321
329
  if (!inputs || inputs.length == 0) {
322
330
  continue
@@ -346,7 +354,9 @@ export class ThingsEditorProcedureParameters extends OxFormField {
346
354
  _add() {
347
355
  this._build(true)
348
356
 
349
- const inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*="display: none"])') as NodeListOf<HTMLInputElement & { value: any }>
357
+ const inputs = this.renderRoot.querySelectorAll(
358
+ '[data-record-new] input:not([style*="display: none"])'
359
+ ) as NodeListOf<HTMLInputElement & { value: any }>
350
360
 
351
361
  for (var i = 0; i < inputs.length; i++) {
352
362
  let input = inputs[i]
package/client/editors/things-editor-tag-scenarios.ts CHANGED
@@ -79,7 +79,7 @@ export default class ThingsEditorTagScenarios extends LitElement {
79
79
  input:not([type='checkbox']) {
80
80
  border: 1px solid rgba(0, 0, 0, 0.2);
81
81
  border-radius: 4px;
82
- background-color: white;
82
+ background-color: var(--md-sys-color-surface);
83
83
  }
84
84
  `
85
85
  ]
package/client/pages/connection-importer.ts CHANGED
@@ -20,7 +20,7 @@ export class ConnectionImporter extends LitElement {
20
20
  display: flex;
21
21
  flex-direction: column;
22
22
 
23
- background-color: #fff;
23
+ background-color: var(--md-sys-color-surface);
24
24
  }
25
25
 
26
26
  ox-grist {
@@ -63,7 +63,11 @@ export class ConnectionImporter extends LitElement {
63
63
 
64
64
  render() {
65
65
  return html`
66
- <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.columns} .data=${{ records: this.connections }}></ox-grist>
66
+ <ox-grist
67
+ .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
68
+ .config=${this.columns}
69
+ .data=${{ records: this.connections }}
70
+ ></ox-grist>
67
71
 
68
72
  <div class="button-container">
69
73
  <button @click=${this.save.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
package/client/pages/connection.ts CHANGED
@@ -38,7 +38,7 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
38
38
  flex-direction: row;
39
39
  justify-content: space-between;
40
40
 
41
- background-color: white;
41
+ background-color: var(--md-sys-color-surface);
42
42
  }
43
43
 
44
44
  #filters > * {
@@ -93,7 +93,14 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
93
93
  }
94
94
 
95
95
  render() {
96
- return html` <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}> </ox-grist> `
96
+ return html`
97
+ <ox-grist
98
+ .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
99
+ .config=${this.gristConfig}
100
+ .fetchHandler=${this.fetchHandler.bind(this)}
101
+ >
102
+ </ox-grist>
103
+ `
97
104
  }
98
105
 
99
106
  async pageInitialized() {
package/client/pages/integration-analysis.ts CHANGED
@@ -22,7 +22,7 @@ export class IntegrationAnalysis extends localize(i18next)(PageView) {
22
22
  flex-direction: column;
23
23
 
24
24
  overflow: hidden;
25
- background-color: var(--main-section-background-color);
25
+ background-color: var(--md-sys-color-background);
26
26
  padding: 0;
27
27
  }
28
28
 
package/client/pages/integration-monitor.ts CHANGED
@@ -43,7 +43,7 @@ export class IntegrationMonitor extends localize(i18next)(PageView) {
43
43
  flex-direction: column;
44
44
 
45
45
  overflow: hidden;
46
- background-color: var(--main-section-background-color);
46
+ background-color: var(--md-sys-color-background);
47
47
  padding: var(--padding-wide);
48
48
  }
49
49
 
@@ -108,9 +108,18 @@ export class IntegrationMonitor extends localize(i18next)(PageView) {
108
108
 
109
109
  render() {
110
110
  return html`
111
- <integration-summary .pendings=${this.pendings} .scenarios=${this.scenarios} .connections=${this.connections}></integration-summary>
111
+ <integration-summary
112
+ .pendings=${this.pendings}
113
+ .scenarios=${this.scenarios}
114
+ .connections=${this.connections}
115
+ ></integration-summary>
112
116
  <content>
113
- <scenarios-monitor .scenarios=${this.scenarios} .pendings=${this.pendings} .colorIndex=${this.colorIndex || {}} .running=${!!this.active}></scenarios-monitor>
117
+ <scenarios-monitor
118
+ .scenarios=${this.scenarios}
119
+ .pendings=${this.pendings}
120
+ .colorIndex=${this.colorIndex || {}}
121
+ .running=${!!this.active}
122
+ ></scenarios-monitor>
114
123
  <connections-monitor .connections=${this.connections}></connections-monitor>
115
124
  </content>
116
125
  `
package/client/pages/scenario-detail.ts CHANGED
@@ -23,7 +23,7 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
23
23
  display: flex;
24
24
  flex-direction: column;
25
25
 
26
- background-color: #fff;
26
+ background-color: var(--md-sys-color-surface);
27
27
  }
28
28
 
29
29
  ox-grist {
@@ -40,9 +40,15 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
40
40
 
41
41
  render() {
42
42
  return html`
43
- <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}></ox-grist>
43
+ <ox-grist
44
+ .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
45
+ .config=${this.gristConfig}
46
+ .fetchHandler=${this.fetchHandler.bind(this)}
47
+ ></ox-grist>
44
48
  <div class="button-container">
45
- <button danger @click=${this._deleteSteps.bind(this)}><md-icon>delete</md-icon>${i18next.t('button.delete')}</button>
49
+ <button danger @click=${this._deleteSteps.bind(this)}>
50
+ <md-icon>delete</md-icon>${i18next.t('button.delete')}
51
+ </button>
46
52
  <button @click=${this._updateSteps.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
47
53
  </div>
48
54
  `
package/client/pages/scenario-importer.ts CHANGED
@@ -20,7 +20,7 @@ export class ScenarioImporter extends LitElement {
20
20
  display: flex;
21
21
  flex-direction: column;
22
22
 
23
- background-color: #fff;
23
+ background-color: var(--md-sys-color-surface);
24
24
  }
25
25
 
26
26
  ox-grist {
@@ -69,7 +69,11 @@ export class ScenarioImporter extends LitElement {
69
69
 
70
70
  render() {
71
71
  return html`
72
- <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.columns} .data=${{ records: this.scenarios }}></ox-grist>
72
+ <ox-grist
73
+ .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
74
+ .config=${this.columns}
75
+ .data=${{ records: this.scenarios }}
76
+ ></ox-grist>
73
77
 
74
78
  <div class="button-container">
75
79
  <button @click=${this.save.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
package/client/pages/scenario.ts CHANGED
@@ -47,7 +47,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
47
47
  flex-direction: row;
48
48
  justify-content: space-between;
49
49
 
50
- background-color: white;
50
+ background-color: var(--md-sys-color-surface);
51
51
  }
52
52
 
53
53
  #filters > * {
@@ -115,7 +115,14 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
115
115
  }
116
116
 
117
117
  render() {
118
- return html` <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}> </ox-grist> `
118
+ return html`
119
+ <ox-grist
120
+ .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
121
+ .config=${this.gristConfig}
122
+ .fetchHandler=${this.fetchHandler.bind(this)}
123
+ >
124
+ </ox-grist>
125
+ `
119
126
  }
120
127
 
121
128
  async pageInitialized(lifecycle) {
@@ -174,12 +181,21 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
174
181
  handlers: {
175
182
  click: (columns, data, column, record, rowIndex) => {
176
183
  if (!record.id) return
177
- openPopup(html` <scenario-detail .scenario=${record} .taskTypes=${this.taskTypes} @requestRefresh="${() => this.grist.fetch()}"></scenario-detail> `, {
178
- backdrop: true,
179
- help: 'integration/ui/scenario-detail',
180
- size: 'large',
181
- title: i18next.t('title.scenario-detail')
182
- })
184
+ openPopup(
185
+ html`
186
+ <scenario-detail
187
+ .scenario=${record}
188
+ .taskTypes=${this.taskTypes}
189
+ @requestRefresh="${() => this.grist.fetch()}"
190
+ ></scenario-detail>
191
+ `,
192
+ {
193
+ backdrop: true,
194
+ help: 'integration/ui/scenario-detail',
195
+ size: 'large',
196
+ title: i18next.t('title.scenario-detail')
197
+ }
198
+ )
183
199
  }
184
200
  }
185
201
  },
package/client/viewparts/connections-monitor.ts CHANGED
@@ -17,7 +17,7 @@ export class ConnectionsMonitor extends LitElement {
17
17
  flex-direction: column;
18
18
 
19
19
  overflow: hidden;
20
- background-color: var(--theme-white-color);
20
+ background-color: var(--md-sys-color-surface);
21
21
  border-radius: var(--border-radius);
22
22
  border: var(--border-dark-color);
23
23
  }
@@ -26,7 +26,7 @@ export class ConnectionsMonitor extends LitElement {
26
26
  padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);
27
27
  border-bottom: var(--border-dark-color);
28
28
  font: var(--subtitle-font);
29
- color: var(--secondary-color);
29
+ color: var(--md-sys-color-secondary);
30
30
  text-transform: capitalize;
31
31
  }
32
32
 
@@ -43,7 +43,7 @@ export class ConnectionsMonitor extends LitElement {
43
43
  flex-direction: column;
44
44
  padding: var(--padding-default);
45
45
  border-bottom: var(--border-dark-color);
46
- color: var(--secondary-color);
46
+ color: var(--md-sys-color-secondary);
47
47
  }
48
48
  [card] * {
49
49
  overflow: hidden;
@@ -51,7 +51,7 @@ export class ConnectionsMonitor extends LitElement {
51
51
  white-space: nowrap;
52
52
  }
53
53
  [card] strong {
54
- color: var(--primary-color);
54
+ color: var(--md-sys-color-primary);
55
55
  }
56
56
  [card] span {
57
57
  font-size: var(--fontsize-default);
@@ -64,7 +64,7 @@ export class ConnectionsMonitor extends LitElement {
64
64
  width: 10px;
65
65
  height: 10px;
66
66
  border-radius: 50%;
67
- background-color: var(--primary-color);
67
+ background-color: var(--md-sys-color-primary);
68
68
  margin-left: var(--margin-narrow);
69
69
  }
70
70
 
@@ -116,7 +116,9 @@ export class ConnectionsMonitor extends LitElement {
116
116
  <span>${description}</span>
117
117
  <span>Type : ${type}</span>
118
118
  <div buttons>
119
- <md-icon @click=${e => (connected ? this.disconnect(connection) : this.connect(connection))} title=${connected ? 'disconnect' : 'connect'}
119
+ <md-icon
120
+ @click=${e => (connected ? this.disconnect(connection) : this.connect(connection))}
121
+ title=${connected ? 'disconnect' : 'connect'}
120
122
  >${connected ? 'link_off' : 'link'}</md-icon
121
123
  >
122
124
  </div>
package/client/viewparts/scenario-instance-log-view.ts CHANGED
@@ -19,7 +19,7 @@ export class ScenarioInstanceLogView extends connect(store)(LitElement) {
19
19
  :host {
20
20
  display: flex;
21
21
  flex-direction: column;
22
- background-color: var(--theme-white-color);
22
+ background-color: var(--md-sys-color-surface);
23
23
  padding: var(--padding-wide);
24
24
  }
25
25
 
@@ -82,7 +82,11 @@ export class ScenarioInstanceLogView extends connect(store)(LitElement) {
82
82
  <div options></div>
83
83
  <div content>
84
84
  ${logs.map(
85
- ({ timestamp, message, level }) => html` <div class="${level}"><span>${new Date(timestamp).toLocaleString()}</span> <strong>${level}</strong> ${message}</div> `
85
+ ({ timestamp, message, level }) => html`
86
+ <div class="${level}">
87
+ <span>${new Date(timestamp).toLocaleString()}</span> <strong>${level}</strong> ${message}
88
+ </div>
89
+ `
86
90
  )}
87
91
  </div>
88
92
  ${this.startable
package/client/viewparts/scenario-instance-monitor.ts CHANGED
@@ -25,7 +25,7 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
25
25
  overflow: hidden;
26
26
  position: relative;
27
27
  padding: var(--padding-narrow);
28
- color: var(--secondary-color);
28
+ color: var(--md-sys-color-secondary);
29
29
  }
30
30
 
31
31
  [running] {
@@ -48,7 +48,7 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
48
48
 
49
49
  border: var(--border-dark-color);
50
50
  border-radius: 10px;
51
- background-color: var(--theme-white-color);
51
+ background-color: var(--md-sys-color-surface);
52
52
  }
53
53
  [progress-wrap] {
54
54
  display: flex;
@@ -57,7 +57,7 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
57
57
  }
58
58
 
59
59
  [running] [progress] {
60
- background-color: var(--theme-white-color);
60
+ background-color: var(--md-sys-color-surface-variant);
61
61
  }
62
62
 
63
63
  [steps] {
@@ -80,7 +80,7 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
80
80
  }
81
81
 
82
82
  [buttons] md-icon {
83
- color: var(--primary-color);
83
+ color: var(--md-sys-color-primary);
84
84
  }
85
85
 
86
86
  @keyframes width {
@@ -115,7 +115,9 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
115
115
  <div buttons>
116
116
  <span><strong>${rounds}</strong> round</span>
117
117
  <md-icon @click=${e => this.showInstanceDetail()}>wysiwyg</md-icon>
118
- <md-icon @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))}>${running ? 'pause' : 'play_arrow'}</md-icon>
118
+ <md-icon @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))}
119
+ >${running ? 'pause' : 'play_arrow'}</md-icon
120
+ >
119
121
  </div>
120
122
  `
121
123
  }
@@ -163,9 +165,14 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
163
165
 
164
166
  async showInstanceDetail() {
165
167
  const { instanceName, scenarioName } = this.instance
166
- openPopup(html` <scenario-instance-view .instanceName=${instanceName} .scenarioName=${scenarioName}></scenario-instance-view> `, {
167
- size: 'large',
168
- title: `${i18next.t('title.scenario-instance')}`
169
- })
168
+ openPopup(
169
+ html`
170
+ <scenario-instance-view .instanceName=${instanceName} .scenarioName=${scenarioName}></scenario-instance-view>
171
+ `,
172
+ {
173
+ size: 'large',
174
+ title: `${i18next.t('title.scenario-instance')}`
175
+ }
176
+ )
170
177
  }
171
178
  }
package/client/viewparts/scenario-instance-view.ts CHANGED
@@ -17,7 +17,7 @@ export class ScenarioInstanceView extends connect(store)(LitElement) {
17
17
  :host {
18
18
  display: flex;
19
19
  flex-direction: column;
20
- background-color: var(--main-section-background-color);
20
+ background-color: var(--md-sys-color-background);
21
21
  }
22
22
 
23
23
  [diagram] {
@@ -42,18 +42,18 @@ export class ScenarioInstanceView extends connect(store)(LitElement) {
42
42
  display: inline;
43
43
  padding: var(--padding-wide) var(--padding-wide) var(--padding-narrow) var(--padding-wide);
44
44
  border-bottom: 3px solid transparent;
45
- color: var(--secondary-color);
45
+ color: var(--md-sys-color-secondary);
46
46
  text-transform: capitalize;
47
47
  }
48
48
 
49
49
  [tab] span[active] {
50
- border-color: var(--primary-color);
50
+ border-color: var(--md-sys-color-primary);
51
51
  font-weight: bold;
52
52
  }
53
53
 
54
54
  [detail] {
55
55
  flex: 1;
56
- background-color: var(--theme-white-color);
56
+ background-color: var(--md-sys-color-surface);
57
57
  border-top: var(--border-dark-color);
58
58
  overflow: hidden;
59
59
  padding: var(--padding-wide);
@@ -63,7 +63,7 @@ export class ScenarioInstanceView extends connect(store)(LitElement) {
63
63
  display: none;
64
64
  width: 100%;
65
65
  height: 100%;
66
- color: var(--secondary-color);
66
+ color: var(--md-sys-color-secondary);
67
67
  }
68
68
 
69
69
  [detail] > [active] {
package/client/viewparts/scenario-monitor.ts CHANGED
@@ -26,7 +26,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
26
26
  flex-direction: row;
27
27
 
28
28
  border: var(--border-dark-color);
29
- background-color: var(--theme-white-color);
29
+ background-color: var(--md-sys-color-surface);
30
30
  box-shadow: var(--box-shadow);
31
31
  border-radius: var(--border-radius);
32
32
  position: relative;
@@ -38,7 +38,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
38
38
  display: flex;
39
39
  flex-direction: column;
40
40
  padding: var(--padding-default);
41
- color: var(--secondary-color);
41
+ color: var(--md-sys-color-secondary);
42
42
  font-size: var(--fontsize-small);
43
43
  width: 100%;
44
44
  box-sizing: border-box;
@@ -101,7 +101,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
101
101
 
102
102
  [buttons] md-icon {
103
103
  --md-icon-size: 22px;
104
- color: var(--primary-color);
104
+ color: var(--md-sys-color-primary);
105
105
  }
106
106
 
107
107
  [buttons][detail] {
@@ -234,7 +234,13 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
234
234
 
235
235
  async popupLogView(scenario) {
236
236
  const popup = openPopup(
237
- html` <scenario-instance-log-view .scenarioName=${scenario.name} @start=${() => this.startScenario(scenario)} startable></scenario-instance-log-view> `,
237
+ html`
238
+ <scenario-instance-log-view
239
+ .scenarioName=${scenario.name}
240
+ @start=${() => this.startScenario(scenario)}
241
+ startable
242
+ ></scenario-instance-log-view>
243
+ `,
238
244
  {
239
245
  size: 'large',
240
246
  title: `${i18next.t('title.scenario-log')} (${scenario.name})`
package/client/viewparts/scenarios-monitor.ts CHANGED
@@ -27,12 +27,12 @@ export class ScenariosMonitor extends localize(i18next)(LitElement) {
27
27
  padding: var(--padding-narrow) 0;
28
28
  flex-direction: row;
29
29
  align-items: center;
30
- border-bottom: 2px solid var(--secondary-color);
30
+ border-bottom: 2px solid var(--md-sys-color-secondary);
31
31
  }
32
32
  [info] h2 {
33
33
  margin: 0;
34
34
  font: var(--subtitle-font);
35
- color: var(--secondary-color);
35
+ color: var(--md-sys-color-secondary);
36
36
  text-transform: capitalize;
37
37
  }
38
38
 
@@ -55,7 +55,7 @@ export class ScenariosMonitor extends localize(i18next)(LitElement) {
55
55
  cursor: pointer;
56
56
  }
57
57
  [info] md-icon[active] {
58
- color: var(--primary-color);
58
+ color: var(--md-sys-color-primary);
59
59
  }
60
60
 
61
61
  [content] {
@@ -131,7 +131,11 @@ export class ScenariosMonitor extends localize(i18next)(LitElement) {
131
131
  </div>
132
132
 
133
133
  <div content>
134
- <pending-q-monitor .pendings=${this.pendings} .colorIndex=${this.colorIndex || {}} .running=${this.running}></pending-q-monitor>
134
+ <pending-q-monitor
135
+ .pendings=${this.pendings}
136
+ .colorIndex=${this.colorIndex || {}}
137
+ .running=${this.running}
138
+ ></pending-q-monitor>
135
139
 
136
140
  <div scenarios mode=${mode}>
137
141
  <div flowbox>
package/dist-client/analysis/graph-viewer-style.js CHANGED
@@ -31,7 +31,7 @@ export const GraphViewerStyles = css `
31
31
  }
32
32
 
33
33
  .graph-info a.property {
34
- background-color: #fff;
34
+ background-color: var(--md-sys-color-surface);
35
35
  border-color: #ccc;
36
36
  color: #333;
37
37
  }
package/dist-client/analysis/graph-viewer-style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"graph-viewer-style.js","sourceRoot":"","sources":["../../client/analysis/graph-viewer-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHnC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const GraphViewerStyles = css`\n * {\n margin: 0;\n padding: 0;\n }\n\n .graph-viewer {\n border: 1px solid #ddd;\n border-radius: 5px;\n }\n\n .graph-info {\n font-size: 16px;\n padding: 10px;\n position: absolute;\n }\n\n .graph-info a {\n border: 1px solid;\n display: inline-block;\n font-size: 14px;\n line-height: 1.428571429;\n margin-left: 5px;\n margin-top: 5px;\n padding: 6px 12px;\n }\n\n .graph-info a.class {\n color: #fff;\n }\n\n .graph-info a.property {\n background-color: #fff;\n border-color: #ccc;\n color: #333;\n }\n\n .graph-info a.btn {\n margin-left: 5px;\n margin-top: 5px;\n opacity: 1;\n }\n\n .graph-info a.info {\n background-color: #a5abb6;\n border: 1px solid #9aa1ac;\n color: #fff;\n }\n\n .node.node-highlighted .ring {\n filter: alpha(opacity=50);\n opacity: 0.5;\n stroke: #888;\n stroke-width: 12px;\n }\n\n .node .outline {\n cursor: pointer;\n fill: #a5abb6;\n pointer-events: all;\n stroke: #9aa1ac;\n stroke-width: 2px;\n }\n\n .node .ring {\n fill: none;\n filter: alpha(opacity=0);\n opacity: 0;\n stroke: #6ac6ff;\n stroke-width: 8px;\n }\n\n .node .text.icon {\n font-family: FontAwesome;\n }\n\n .node.selected .ring,\n .node:hover .ring {\n filter: alpha(opacity=30);\n opacity: 0.3;\n }\n\n .relationship {\n cursor: default;\n }\n\n .relationship line {\n stroke: #aaa;\n }\n\n .relationship .outline {\n cursor: default;\n }\n\n .relationship .overlay {\n cursor: default;\n fill: #6ac6ff;\n filter: alpha(opacity=0);\n opacity: 0;\n }\n\n .relationship text {\n cursor: default;\n }\n\n .relationship.selected .overlay,\n .relationship:hover .overlay {\n filter: alpha(opacity=30);\n opacity: 0.3;\n }\n\n svg {\n cursor: move;\n }\n`\n"]}
1
+ {"version":3,"file":"graph-viewer-style.js","sourceRoot":"","sources":["../../client/analysis/graph-viewer-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHnC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const GraphViewerStyles = css`\n * {\n margin: 0;\n padding: 0;\n }\n\n .graph-viewer {\n border: 1px solid #ddd;\n border-radius: 5px;\n }\n\n .graph-info {\n font-size: 16px;\n padding: 10px;\n position: absolute;\n }\n\n .graph-info a {\n border: 1px solid;\n display: inline-block;\n font-size: 14px;\n line-height: 1.428571429;\n margin-left: 5px;\n margin-top: 5px;\n padding: 6px 12px;\n }\n\n .graph-info a.class {\n color: #fff;\n }\n\n .graph-info a.property {\n background-color: var(--md-sys-color-surface);\n border-color: #ccc;\n color: #333;\n }\n\n .graph-info a.btn {\n margin-left: 5px;\n margin-top: 5px;\n opacity: 1;\n }\n\n .graph-info a.info {\n background-color: #a5abb6;\n border: 1px solid #9aa1ac;\n color: #fff;\n }\n\n .node.node-highlighted .ring {\n filter: alpha(opacity=50);\n opacity: 0.5;\n stroke: #888;\n stroke-width: 12px;\n }\n\n .node .outline {\n cursor: pointer;\n fill: #a5abb6;\n pointer-events: all;\n stroke: #9aa1ac;\n stroke-width: 2px;\n }\n\n .node .ring {\n fill: none;\n filter: alpha(opacity=0);\n opacity: 0;\n stroke: #6ac6ff;\n stroke-width: 8px;\n }\n\n .node .text.icon {\n font-family: FontAwesome;\n }\n\n .node.selected .ring,\n .node:hover .ring {\n filter: alpha(opacity=30);\n opacity: 0.3;\n }\n\n .relationship {\n cursor: default;\n }\n\n .relationship line {\n stroke: #aaa;\n }\n\n .relationship .outline {\n cursor: default;\n }\n\n .relationship .overlay {\n cursor: default;\n fill: #6ac6ff;\n filter: alpha(opacity=0);\n opacity: 0;\n }\n\n .relationship text {\n cursor: default;\n }\n\n .relationship.selected .overlay,\n .relationship:hover .overlay {\n filter: alpha(opacity=30);\n opacity: 0.3;\n }\n\n svg {\n cursor: move;\n }\n`\n"]}
package/dist-client/editors/entity-selector.js CHANGED
@@ -23,7 +23,12 @@ let EntitySelector = class EntitySelector extends LitElement {
23
23
  .fields="${this.searchFields}"
24
24
  ></search-form>
25
25
 
26
- <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.config} .data=${this.data} .fetchHandler="${this.fetchHandler.bind(this)}"></ox-grist>
26
+ <ox-grist
27
+ .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
28
+ .config=${this.config}
29
+ .data=${this.data}
30
+ .fetchHandler="${this.fetchHandler.bind(this)}"
31
+ ></ox-grist>
27
32
 
28
33
  <div class="button-container">
29
34
  <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
@@ -108,9 +113,19 @@ let EntitySelector = class EntitySelector extends LitElement {
108
113
  return {
109
114
  label: selectField.header || i18next.t(`field.${selectField.name}`),
110
115
  name: selectField.name,
111
- type: fieldType === 'string' ? 'text' : numberTypes.indexOf(fieldType) >= 0 ? 'number' : fieldType === 'boolean' ? 'checkbox' : fieldType,
116
+ type: fieldType === 'string'
117
+ ? 'text'
118
+ : numberTypes.indexOf(fieldType) >= 0
119
+ ? 'number'
120
+ : fieldType === 'boolean'
121
+ ? 'checkbox'
122
+ : fieldType,
112
123
  queryName: selectField.queryName,
113
- props: fieldType === 'string' ? { searchOper: 'i_like' } : fieldType === 'object' ? { searchOper: 'in' } : { searchOper: 'eq' },
124
+ props: fieldType === 'string'
125
+ ? { searchOper: 'i_like' }
126
+ : fieldType === 'object'
127
+ ? { searchOper: 'in' }
128
+ : { searchOper: 'eq' },
114
129
  attrs: fieldType === 'boolean' ? ['indeterminated'] : []
115
130
  };
116
131
  });
@@ -217,7 +232,7 @@ EntitySelector.styles = [
217
232
  display: flex;
218
233
  flex-direction: column;
219
234
 
220
- background-color: #fff;
235
+ background-color: var(--md-sys-color-surface);
221
236
  }
222
237
 
223
238
  ox-grist {