@openremote/manager 1.8.0-snapshot.20250725120002 → 1.8.0-snapshot.20250728102340

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.
@@ -38,165 +38,165 @@ let PageProvisioning = class PageProvisioning extends Page {
38
38
  // language=CSS
39
39
  return [
40
40
  unsafeCSS(tableStyle),
41
- css `
42
- #wrapper {
43
- height: 100%;
44
- width: 100%;
45
- display: flex;
46
- flex-direction: column;
47
- overflow: auto;
48
- }
49
-
50
- #title {
51
- padding: 0 20px;
52
- font-size: 18px;
53
- font-weight: bold;
54
- width: calc(100% - 40px);
55
- max-width: 1360px;
56
- margin: 20px auto;
57
- align-items: center;
58
- display: flex;
59
- color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
60
- }
61
-
62
- #title or-icon {
63
- margin-right: 10px;
64
- margin-left: 14px;
65
- }
66
-
67
- .panel {
68
- width: calc(100% - 90px);
69
- max-width: 1310px;
70
- background-color: white;
71
- border: 1px solid #e5e5e5;
72
- border-radius: 5px;
73
- position: relative;
74
- margin: 5px auto;
75
- padding: 24px;
76
- }
77
-
78
- .panel-title {
79
- text-transform: uppercase;
80
- font-weight: bolder;
81
- line-height: 1em;
82
- color: var(--internal-or-asset-viewer-title-text-color);
83
- margin-bottom: 20px;
84
- margin-top: 0;
85
- flex: 0 0 auto;
86
- letter-spacing: 0.025em;
87
- color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
88
- }
89
-
90
- #table-users,
91
- #table-users table {
92
- width: 100%;
93
- white-space: nowrap;
94
- }
95
-
96
- .mdc-data-table__row {
97
- cursor: pointer;
98
- border-top-color: #D3D3D3;
99
- }
100
-
101
- td, th {
102
- width: 25%
103
- }
104
-
105
- or-mwc-input {
106
- margin-bottom: 20px;
107
- margin-right: 16px;
108
- }
109
-
110
- or-icon {
111
- vertical-align: middle;
112
- --or-icon-width: 20px;
113
- --or-icon-height: 20px;
114
- margin-right: 2px;
115
- margin-left: -5px;
116
- }
117
-
118
- .row {
119
- display: flex;
120
- flex-direction: row;
121
- margin: 10px 0;
122
- flex: 1 1 0;
123
- }
124
-
125
- .column {
126
- display: flex;
127
- flex-direction: column;
128
- margin: 0px;
129
- flex: 1 1 0;
130
- max-width: 50%;
131
- }
132
-
133
- .mdc-data-table__header-cell {
134
- font-weight: bold;
135
- color: ${unsafeCSS(DefaultColor3)};
136
- }
137
-
138
- .mdc-data-table__header-cell:first-child {
139
- padding-left: 36px;
140
- }
141
-
142
- .item-row td {
143
- padding: 0;
144
- }
145
-
146
- .item-row-content {
147
- flex-direction: row;
148
- overflow: hidden;
149
- max-height: 0;
150
- padding-left: 16px;
151
- }
152
-
153
- .item-row.expanded .item-row-content {
154
- overflow: visible;
155
- max-height: unset;
156
- }
157
-
158
- .button {
159
- cursor: pointer;
160
- display: flex;
161
- flex-direction: row;
162
- align-content: center;
163
- padding: 16px;
164
- align-items: center;
165
- font-size: 14px;
166
- text-transform: uppercase;
167
- color: var(--or-app-color4);
168
- }
169
-
170
- .hidden {
171
- display: none;
172
- }
173
-
174
- @media screen and (max-width: 768px) {
175
- #title {
176
- padding: 0;
177
- width: 100%;
178
- }
179
-
180
- .hide-mobile {
181
- display: none;
182
- }
183
-
184
- .row {
185
- display: block;
186
- flex-direction: column;
187
- }
188
-
189
- .panel {
190
- border-radius: 0;
191
- border-left: 0px;
192
- border-right: 0px;
193
- width: calc(100% - 48px);
194
- }
195
-
196
- td, th {
197
- width: 50%
198
- }
199
- }
41
+ css `
42
+ #wrapper {
43
+ height: 100%;
44
+ width: 100%;
45
+ display: flex;
46
+ flex-direction: column;
47
+ overflow: auto;
48
+ }
49
+
50
+ #title {
51
+ padding: 0 20px;
52
+ font-size: 18px;
53
+ font-weight: bold;
54
+ width: calc(100% - 40px);
55
+ max-width: 1360px;
56
+ margin: 20px auto;
57
+ align-items: center;
58
+ display: flex;
59
+ color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
60
+ }
61
+
62
+ #title or-icon {
63
+ margin-right: 10px;
64
+ margin-left: 14px;
65
+ }
66
+
67
+ .panel {
68
+ width: calc(100% - 90px);
69
+ max-width: 1310px;
70
+ background-color: white;
71
+ border: 1px solid #e5e5e5;
72
+ border-radius: 5px;
73
+ position: relative;
74
+ margin: 5px auto;
75
+ padding: 24px;
76
+ }
77
+
78
+ .panel-title {
79
+ text-transform: uppercase;
80
+ font-weight: bolder;
81
+ line-height: 1em;
82
+ color: var(--internal-or-asset-viewer-title-text-color);
83
+ margin-bottom: 20px;
84
+ margin-top: 0;
85
+ flex: 0 0 auto;
86
+ letter-spacing: 0.025em;
87
+ color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
88
+ }
89
+
90
+ #table-users,
91
+ #table-users table {
92
+ width: 100%;
93
+ white-space: nowrap;
94
+ }
95
+
96
+ .mdc-data-table__row {
97
+ cursor: pointer;
98
+ border-top-color: #D3D3D3;
99
+ }
100
+
101
+ td, th {
102
+ width: 25%
103
+ }
104
+
105
+ or-mwc-input {
106
+ margin-bottom: 20px;
107
+ margin-right: 16px;
108
+ }
109
+
110
+ or-icon {
111
+ vertical-align: middle;
112
+ --or-icon-width: 20px;
113
+ --or-icon-height: 20px;
114
+ margin-right: 2px;
115
+ margin-left: -5px;
116
+ }
117
+
118
+ .row {
119
+ display: flex;
120
+ flex-direction: row;
121
+ margin: 10px 0;
122
+ flex: 1 1 0;
123
+ }
124
+
125
+ .column {
126
+ display: flex;
127
+ flex-direction: column;
128
+ margin: 0px;
129
+ flex: 1 1 0;
130
+ max-width: 50%;
131
+ }
132
+
133
+ .mdc-data-table__header-cell {
134
+ font-weight: bold;
135
+ color: ${unsafeCSS(DefaultColor3)};
136
+ }
137
+
138
+ .mdc-data-table__header-cell:first-child {
139
+ padding-left: 36px;
140
+ }
141
+
142
+ .item-row td {
143
+ padding: 0;
144
+ }
145
+
146
+ .item-row-content {
147
+ flex-direction: row;
148
+ overflow: hidden;
149
+ max-height: 0;
150
+ padding-left: 16px;
151
+ }
152
+
153
+ .item-row.expanded .item-row-content {
154
+ overflow: visible;
155
+ max-height: unset;
156
+ }
157
+
158
+ .button {
159
+ cursor: pointer;
160
+ display: flex;
161
+ flex-direction: row;
162
+ align-content: center;
163
+ padding: 16px;
164
+ align-items: center;
165
+ font-size: 14px;
166
+ text-transform: uppercase;
167
+ color: var(--or-app-color4);
168
+ }
169
+
170
+ .hidden {
171
+ display: none;
172
+ }
173
+
174
+ @media screen and (max-width: 768px) {
175
+ #title {
176
+ padding: 0;
177
+ width: 100%;
178
+ }
179
+
180
+ .hide-mobile {
181
+ display: none;
182
+ }
183
+
184
+ .row {
185
+ display: block;
186
+ flex-direction: column;
187
+ }
188
+
189
+ .panel {
190
+ border-radius: 0;
191
+ border-left: 0px;
192
+ border-right: 0px;
193
+ width: calc(100% - 48px);
194
+ }
195
+
196
+ td, th {
197
+ width: 50%
198
+ }
199
+ }
200
200
  `,
201
201
  ];
202
202
  }
@@ -211,58 +211,58 @@ let PageProvisioning = class PageProvisioning extends Page {
211
211
  }
212
212
  render() {
213
213
  if (!manager.authenticated) {
214
- return html `
215
- <or-translate value="notAuthenticated"></or-translate>
214
+ return html `
215
+ <or-translate value="notAuthenticated"></or-translate>
216
216
  `;
217
217
  }
218
218
  if (!this._configs) {
219
219
  return html ``;
220
220
  }
221
- return html `
222
- <div id="wrapper">
223
- <div id="title">
224
- <or-icon icon="cellphone-cog"></or-icon>
225
- ${i18next.t("provisioningConfigs")}
226
- </div>
227
-
228
- <div class="panel">
229
- <div id="table-users" class="mdc-data-table">
230
- <table class="mdc-data-table__table" aria-label="attribute list">
231
- <thead>
232
- <tr class="mdc-data-table__header-row">
233
- <th class="mdc-data-table__header-cell" role="columnheader" scope="col">
234
- <or-translate value="name"></or-translate>
235
- </th>
236
- <th class="mdc-data-table__header-cell hide-mobile" role="columnheader" scope="col">
237
- <or-translate value="realm"></or-translate>
238
- </th>
239
- <th class="mdc-data-table__header-cell hide-mobile" role="columnheader" scope="col">
240
- <or-translate value="type"></or-translate>
241
- </th>
242
- <th class="mdc-data-table__header-cell hide-mobile" role="columnheader" scope="col">
243
- <or-translate value="enabled"></or-translate>
244
- </th>
245
- </tr>
246
- </thead>
247
- <tbody class="mdc-data-table__content">
221
+ return html `
222
+ <div id="wrapper">
223
+ <div id="title">
224
+ <or-icon icon="cellphone-cog"></or-icon>
225
+ ${i18next.t("provisioningConfigs")}
226
+ </div>
227
+
228
+ <div class="panel">
229
+ <div id="table-users" class="mdc-data-table">
230
+ <table class="mdc-data-table__table" aria-label="attribute list">
231
+ <thead>
232
+ <tr class="mdc-data-table__header-row">
233
+ <th class="mdc-data-table__header-cell" role="columnheader" scope="col">
234
+ <or-translate value="name"></or-translate>
235
+ </th>
236
+ <th class="mdc-data-table__header-cell hide-mobile" role="columnheader" scope="col">
237
+ <or-translate value="realm"></or-translate>
238
+ </th>
239
+ <th class="mdc-data-table__header-cell hide-mobile" role="columnheader" scope="col">
240
+ <or-translate value="type"></or-translate>
241
+ </th>
242
+ <th class="mdc-data-table__header-cell hide-mobile" role="columnheader" scope="col">
243
+ <or-translate value="enabled"></or-translate>
244
+ </th>
245
+ </tr>
246
+ </thead>
247
+ <tbody class="mdc-data-table__content">
248
248
  ${this._configs.map((config, index) => this._getConfigTemplate(() => {
249
249
  this._configs.pop();
250
250
  this._configs = [...this._configs];
251
- }, config))}
252
- ${(this._configs.length === 0 || (this._configs.length > 0 && !!this._configs[this._configs.length - 1].id)) ? html `
251
+ }, config))}
252
+ ${(this._configs.length === 0 || (this._configs.length > 0 && !!this._configs[this._configs.length - 1].id)) ? html `
253
253
  <tr class="mdc-data-table__row" @click="${() => {
254
254
  this._configs = [...this._configs, { type: "x509" }];
255
- }}">
256
- <td colspan="100%">
257
- <a class="button"><or-icon icon="plus"></or-icon>${i18next.t("add")}</a>
258
- </td>
259
- </tr>
260
- ` : ``}
261
- </tbody>
262
- </table>
263
- </div>
264
- </div>
265
- </div>
255
+ }}">
256
+ <td colspan="100%">
257
+ <a class="button"><or-icon icon="plus"></or-icon>${i18next.t("add")}</a>
258
+ </td>
259
+ </tr>
260
+ ` : ``}
261
+ </tbody>
262
+ </table>
263
+ </div>
264
+ </div>
265
+ </div>
266
266
  `;
267
267
  }
268
268
  _loadConfigs() {
@@ -345,104 +345,104 @@ let PageProvisioning = class PageProvisioning extends Page {
345
345
  config.data = {};
346
346
  }
347
347
  const data = config.data;
348
- typeColumnContents = html `
349
- <or-mwc-input .label="${i18next.t("CACertPem")}" required
350
- .type="${InputType.TEXTAREA}"
351
- .value="${data.CACertPEM}"
352
- resizeVertical
353
- @or-mwc-input-changed="${(e) => data.CACertPEM = e.detail.value}"></or-mwc-input>
354
- <or-mwc-input .label="${i18next.t("ignoreExpiryDate")}"
355
- .type="${InputType.CHECKBOX}"
356
- .value="${data.ignoreExpiryDate}"
357
- @or-mwc-input-changed="${(e) => data.ignoreExpiryDate = !e.detail.value}"
358
- style="height: 56px;"></or-mwc-input>
348
+ typeColumnContents = html `
349
+ <or-mwc-input .label="${i18next.t("CACertPem")}" required
350
+ .type="${InputType.TEXTAREA}"
351
+ .value="${data.CACertPEM}"
352
+ resizeVertical
353
+ @or-mwc-input-changed="${(e) => data.CACertPEM = e.detail.value}"></or-mwc-input>
354
+ <or-mwc-input .label="${i18next.t("ignoreExpiryDate")}"
355
+ .type="${InputType.CHECKBOX}"
356
+ .value="${data.ignoreExpiryDate}"
357
+ @or-mwc-input-changed="${(e) => data.ignoreExpiryDate = !e.detail.value}"
358
+ style="height: 56px;"></or-mwc-input>
359
359
  `;
360
360
  }
361
361
  else {
362
- typeColumnContents = html `
363
- <or-translate .value="notSupported"></or-translate>
362
+ typeColumnContents = html `
363
+ <or-translate .value="notSupported"></or-translate>
364
364
  `;
365
365
  }
366
- return html `
367
- <tr class="mdc-data-table__row" @click="${(ev) => this._toggleConfigExpand(ev)}">
368
- <td class="padded-cell mdc-data-table__cell">
369
- <or-icon icon="chevron-right"></or-icon>
370
- <span>${!config.id ? "" : config.name}</span>
371
- </td>
372
- <td class="padded-cell mdc-data-table__cell">
373
- ${!config.id ? "" : config.realm}
374
- </td>
375
- <td class="padded-cell mdc-data-table__cell">
376
- ${!config.id ? "" : config.type}
377
- </td>
378
- <td class="padded-cell mdc-data-table__cell">
379
- <or-input .type="${InputType.CHECKBOX}" .value="${!config.id ? "" : !config.disabled}"></or-input>
380
- </td>
381
- </tr>
382
- <tr class="item-row${!config.id ? " expanded" : ""}">
383
- <td colspan="4">
384
- <div class="item-row-content">
385
- <div class="row">
386
- <div class="column">
387
- <or-mwc-input .label="${i18next.t("name")}"
388
- .type="${InputType.TEXT}" min="1" required
389
- .value="${config.name}"
390
- @or-mwc-input-changed="${(e) => config.name = e.detail.value}"></or-mwc-input>
391
- <or-mwc-input ?disabled="${!!config.id}" required
392
- .label="${i18next.t("type")}"
393
- .type="${InputType.SELECT}"
394
- .options="${[["x509", "X.509"]]}"
395
- .value="${!config.type ? "x509" : config.type}"
396
- @or-mwc-input-changed="${(e) => config.type = e.detail.value}"></or-mwc-input>
397
- <or-mwc-input ?disabled="${!!config.id}" required
398
- .label="${i18next.t("realm")}"
399
- .type="${InputType.SELECT}"
400
- .options="${this._realmOptions}"
401
- .value="${config.realm}"
402
- @or-mwc-input-changed="${(e) => config.realm = e.detail.value}"></or-mwc-input>
403
- <or-mwc-input ?disabled="${!!config.id}"
404
- .value="${config.userRoles}"
405
- .type="${InputType.SELECT}" multiple
406
- .options="${this._roleOptions}"
407
- .label="${i18next.t("role_plural")}"
408
- @or-mwc-input-changed="${(e) => config.userRoles = e.detail.value}"></or-mwc-input>
409
- <or-mwc-input .label="${i18next.t("assetTemplate")}"
410
- .type="${InputType.JSON}"
411
- .value="${config.assetTemplate ? JSON.stringify(JSON.parse(config.assetTemplate), null, 2) : undefined}"
412
- resizeVertical
413
- @or-mwc-input-changed="${(e) => config.assetTemplate = e.detail.value ? JSON.stringify(e.detail.value) : undefined}"></or-mwc-input>
414
- <or-mwc-input .label="${i18next.t("createAsRestrictedUser")}"
415
- .type="${InputType.CHECKBOX}"
416
- .value="${config.restrictedUser}"
417
- @or-mwc-input-changed="${(e) => config.restrictedUser = e.detail.value}"></or-mwc-input>
418
- <or-mwc-input .label="${i18next.t("disabled")}"
419
- .type="${InputType.CHECKBOX}"
420
- .value="${config.disabled}"
421
- @or-mwc-input-changed="${(e) => config.disabled = e.detail.value}"></or-mwc-input>
422
- </div>
423
-
424
- <div class="column">
425
- ${typeColumnContents}
426
- </div>
427
- </div>
428
-
429
- <div class="row" style="margin-bottom: 0;">
430
- ${config.id ? html `<or-mwc-input label="delete"
431
- .type="${InputType.BUTTON}"
432
- @click="${() => this._deleteConfig(config)}"></or-mwc-input>
433
- ` : ``}
434
- ${!config.id ? html `<or-mwc-input label="cancel"
435
- .type="${InputType.BUTTON}"
436
- @click="${() => addCancel()}"></or-mwc-input>
437
- ` : ``}
438
- <or-mwc-input class="savebtn" style="margin-left: auto;"
439
- label="${config.id ? "save" : "create"}"
440
- .type="${InputType.BUTTON}"
441
- @click="${() => this._createUpdateConfig(config)}"></or-mwc-input>
442
- </div>
443
- </div>
444
- </td>
445
- </tr>
366
+ return html `
367
+ <tr class="mdc-data-table__row" @click="${(ev) => this._toggleConfigExpand(ev)}">
368
+ <td class="padded-cell mdc-data-table__cell">
369
+ <or-icon icon="chevron-right"></or-icon>
370
+ <span>${!config.id ? "" : config.name}</span>
371
+ </td>
372
+ <td class="padded-cell mdc-data-table__cell">
373
+ ${!config.id ? "" : config.realm}
374
+ </td>
375
+ <td class="padded-cell mdc-data-table__cell">
376
+ ${!config.id ? "" : config.type}
377
+ </td>
378
+ <td class="padded-cell mdc-data-table__cell">
379
+ <or-input .type="${InputType.CHECKBOX}" .value="${!config.id ? "" : !config.disabled}"></or-input>
380
+ </td>
381
+ </tr>
382
+ <tr class="item-row${!config.id ? " expanded" : ""}">
383
+ <td colspan="4">
384
+ <div class="item-row-content">
385
+ <div class="row">
386
+ <div class="column">
387
+ <or-mwc-input .label="${i18next.t("name")}"
388
+ .type="${InputType.TEXT}" min="1" required
389
+ .value="${config.name}"
390
+ @or-mwc-input-changed="${(e) => config.name = e.detail.value}"></or-mwc-input>
391
+ <or-mwc-input ?disabled="${!!config.id}" required
392
+ .label="${i18next.t("type")}"
393
+ .type="${InputType.SELECT}"
394
+ .options="${[["x509", "X.509"]]}"
395
+ .value="${!config.type ? "x509" : config.type}"
396
+ @or-mwc-input-changed="${(e) => config.type = e.detail.value}"></or-mwc-input>
397
+ <or-mwc-input ?disabled="${!!config.id}" required
398
+ .label="${i18next.t("realm")}"
399
+ .type="${InputType.SELECT}"
400
+ .options="${this._realmOptions}"
401
+ .value="${config.realm}"
402
+ @or-mwc-input-changed="${(e) => config.realm = e.detail.value}"></or-mwc-input>
403
+ <or-mwc-input ?disabled="${!!config.id}"
404
+ .value="${config.userRoles}"
405
+ .type="${InputType.SELECT}" multiple
406
+ .options="${this._roleOptions}"
407
+ .label="${i18next.t("role_plural")}"
408
+ @or-mwc-input-changed="${(e) => config.userRoles = e.detail.value}"></or-mwc-input>
409
+ <or-mwc-input .label="${i18next.t("assetTemplate")}"
410
+ .type="${InputType.JSON}"
411
+ .value="${config.assetTemplate ? JSON.stringify(JSON.parse(config.assetTemplate), null, 2) : undefined}"
412
+ resizeVertical
413
+ @or-mwc-input-changed="${(e) => config.assetTemplate = e.detail.value ? JSON.stringify(e.detail.value) : undefined}"></or-mwc-input>
414
+ <or-mwc-input .label="${i18next.t("createAsRestrictedUser")}"
415
+ .type="${InputType.CHECKBOX}"
416
+ .value="${config.restrictedUser}"
417
+ @or-mwc-input-changed="${(e) => config.restrictedUser = e.detail.value}"></or-mwc-input>
418
+ <or-mwc-input .label="${i18next.t("disabled")}"
419
+ .type="${InputType.CHECKBOX}"
420
+ .value="${config.disabled}"
421
+ @or-mwc-input-changed="${(e) => config.disabled = e.detail.value}"></or-mwc-input>
422
+ </div>
423
+
424
+ <div class="column">
425
+ ${typeColumnContents}
426
+ </div>
427
+ </div>
428
+
429
+ <div class="row" style="margin-bottom: 0;">
430
+ ${config.id ? html `<or-mwc-input label="delete"
431
+ .type="${InputType.BUTTON}"
432
+ @click="${() => this._deleteConfig(config)}"></or-mwc-input>
433
+ ` : ``}
434
+ ${!config.id ? html `<or-mwc-input label="cancel"
435
+ .type="${InputType.BUTTON}"
436
+ @click="${() => addCancel()}"></or-mwc-input>
437
+ ` : ``}
438
+ <or-mwc-input class="savebtn" style="margin-left: auto;"
439
+ label="${config.id ? "save" : "create"}"
440
+ .type="${InputType.BUTTON}"
441
+ @click="${() => this._createUpdateConfig(config)}"></or-mwc-input>
442
+ </div>
443
+ </div>
444
+ </td>
445
+ </tr>
446
446
  `;
447
447
  }
448
448
  };