@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.
Files changed (27) hide show
  1. package/dist/{bundle.f7ad544556328801.js → bundle.2f74225bd5fbdc3d.js} +3415 -3415
  2. package/dist/bundle.9b2e58b2584ef430.js +3678 -0
  3. package/dist/index.html +18 -18
  4. package/index.html +88 -88
  5. package/lib/components/alarms/or-alarms-table.js +56 -56
  6. package/lib/components/configuration/or-conf-json.js +25 -25
  7. package/lib/components/configuration/or-conf-map/or-conf-map-card.js +177 -177
  8. package/lib/components/configuration/or-conf-map/or-conf-map-geojson.js +24 -24
  9. package/lib/components/configuration/or-conf-map/or-conf-map-global.js +153 -153
  10. package/lib/components/configuration/or-conf-panel.js +43 -43
  11. package/lib/components/configuration/or-conf-realm/or-conf-realm-card.js +200 -200
  12. package/lib/pages/page-account.js +243 -243
  13. package/lib/pages/page-alarms.js +369 -369
  14. package/lib/pages/page-assets.js +100 -100
  15. package/lib/pages/page-configuration.js +152 -152
  16. package/lib/pages/page-export.js +191 -191
  17. package/lib/pages/page-gateway-tunnel.js +106 -106
  18. package/lib/pages/page-gateway.js +252 -252
  19. package/lib/pages/page-insights.js +19 -19
  20. package/lib/pages/page-logs.js +11 -11
  21. package/lib/pages/page-map.js +37 -37
  22. package/lib/pages/page-provisioning.js +294 -294
  23. package/lib/pages/page-realms.js +284 -284
  24. package/lib/pages/page-roles.js +279 -279
  25. package/lib/pages/page-rules.js +11 -11
  26. package/lib/pages/page-users.js +383 -383
  27. package/package.json +3 -3
package/lib/pages/page-alarms.js CHANGED
@@ -40,164 +40,164 @@ let PageAlarms = class PageAlarms extends Page {
40
40
  static get styles() {
41
41
  // language=CSS
42
42
  return [
43
- css `
44
- :host {
45
- flex: 1;
46
- width: 100%;
47
- }
48
-
49
- #wrapper {
50
- height: 100%;
51
- width: 100%;
52
- display: flex;
53
- flex-direction: column;
54
- overflow: auto;
55
- }
56
-
57
- #title {
58
- padding: 0 20px;
59
- font-size: 18px;
60
- font-weight: bold;
61
- margin: 10px 0;
62
- display: flex;
63
- align-items: center;
64
- color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
65
- justify-content: space-between;
66
- }
67
-
68
- #title-alarm {
69
- display: flex;
70
- align-items: center;
71
- justify-content: flex-start;
72
- width: calc(100% - 52px);
73
- max-width: 1000px;
74
- margin: 20px auto;
75
- font-size: 18px;
76
- font-weight: bold;
77
- }
78
-
79
- .breadcrumb-container {
80
- width: calc(100% - 52px);
81
- max-width: 1000px;
82
- margin: 10px 20px 0 34px;
83
- display: flex;
84
- align-items: center;
85
- }
86
-
87
- .breadcrumb-clickable {
88
- cursor: pointer;
89
- color: var(--or-app-color4, ${unsafeCSS(DefaultColor4)});
90
- }
91
-
92
- .breadcrumb-arrow {
93
- margin: 0 5px -3px 5px;
94
- --or-icon-width: 16px;
95
- --or-icon-height: 16px;
96
- }
97
-
98
- .panel {
99
- width: calc(100% - 100px);
100
- max-width: 1000px;
101
- background-color: white;
102
- border: 1px solid #e5e5e5;
103
- border-radius: 5px;
104
- position: relative;
105
- margin: auto;
106
- padding: 12px 24px 24px;
107
- }
108
-
109
- .panel-title {
110
- text-transform: uppercase;
111
- font-weight: bolder;
112
- color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
113
- line-height: 1em;
114
- /*margin-bottom: 10px;*/
115
- margin-top: 0;
116
- flex: 0 0 auto;
117
- letter-spacing: 0.025em;
118
- display: flex;
119
- align-items: center;
120
- min-height: 36px;
121
- }
122
-
123
- .alarm-input {
124
- margin-bottom: 12px;
125
- }
126
-
127
- #status-select, #severity-select {
128
- width: 180px;
129
- }
130
-
131
- #controls {
132
- flex: 0;
133
- display: flex;
134
- flex-direction: row;
135
- justify-content: space-between;
136
- align-items: center;
137
- }
138
-
139
- .controls-left {
140
- display: flex;
141
- align-items: center;
142
- width: 100%;
143
- }
144
-
145
- .controls-left > * {
146
- padding-right: 20px;
147
- }
148
-
149
- h5 {
150
- margin-top: 12px;
151
- margin-bottom: 6px;
152
- }
153
-
154
- or-icon {
155
- vertical-align: middle;
156
- --or-icon-width: 20px;
157
- --or-icon-height: 20px;
158
- }
159
-
160
- #table-container {
161
- margin-left: 20px;
162
- margin-right: 20px;
163
- }
164
-
165
- .row {
166
- display: flex;
167
- flex-direction: row;
168
- flex-wrap: wrap;
169
- margin: auto;
170
- flex: 1 1 0;
171
- gap: 16px;
172
- width: 100%;
173
- }
174
-
175
- .column {
176
- display: flex;
177
- flex-direction: column;
178
- margin: 0px;
179
- flex: 1 1 0;
180
- }
181
-
182
- #details-panel {
183
- min-width: 66%;
184
- height: max-content;
185
- }
186
-
187
- #prop-panel {
188
- min-width: 32%;
189
- height: fit-content;
190
- }
191
-
192
- .hidden {
193
- display: none;
194
- margin: 0 !important;
195
- }
196
-
197
- #title.hidden {
198
- display: none;
199
- margin: 0 !important;
200
- }
43
+ css `
44
+ :host {
45
+ flex: 1;
46
+ width: 100%;
47
+ }
48
+
49
+ #wrapper {
50
+ height: 100%;
51
+ width: 100%;
52
+ display: flex;
53
+ flex-direction: column;
54
+ overflow: auto;
55
+ }
56
+
57
+ #title {
58
+ padding: 0 20px;
59
+ font-size: 18px;
60
+ font-weight: bold;
61
+ margin: 10px 0;
62
+ display: flex;
63
+ align-items: center;
64
+ color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
65
+ justify-content: space-between;
66
+ }
67
+
68
+ #title-alarm {
69
+ display: flex;
70
+ align-items: center;
71
+ justify-content: flex-start;
72
+ width: calc(100% - 52px);
73
+ max-width: 1000px;
74
+ margin: 20px auto;
75
+ font-size: 18px;
76
+ font-weight: bold;
77
+ }
78
+
79
+ .breadcrumb-container {
80
+ width: calc(100% - 52px);
81
+ max-width: 1000px;
82
+ margin: 10px 20px 0 34px;
83
+ display: flex;
84
+ align-items: center;
85
+ }
86
+
87
+ .breadcrumb-clickable {
88
+ cursor: pointer;
89
+ color: var(--or-app-color4, ${unsafeCSS(DefaultColor4)});
90
+ }
91
+
92
+ .breadcrumb-arrow {
93
+ margin: 0 5px -3px 5px;
94
+ --or-icon-width: 16px;
95
+ --or-icon-height: 16px;
96
+ }
97
+
98
+ .panel {
99
+ width: calc(100% - 100px);
100
+ max-width: 1000px;
101
+ background-color: white;
102
+ border: 1px solid #e5e5e5;
103
+ border-radius: 5px;
104
+ position: relative;
105
+ margin: auto;
106
+ padding: 12px 24px 24px;
107
+ }
108
+
109
+ .panel-title {
110
+ text-transform: uppercase;
111
+ font-weight: bolder;
112
+ color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
113
+ line-height: 1em;
114
+ /*margin-bottom: 10px;*/
115
+ margin-top: 0;
116
+ flex: 0 0 auto;
117
+ letter-spacing: 0.025em;
118
+ display: flex;
119
+ align-items: center;
120
+ min-height: 36px;
121
+ }
122
+
123
+ .alarm-input {
124
+ margin-bottom: 12px;
125
+ }
126
+
127
+ #status-select, #severity-select {
128
+ width: 180px;
129
+ }
130
+
131
+ #controls {
132
+ flex: 0;
133
+ display: flex;
134
+ flex-direction: row;
135
+ justify-content: space-between;
136
+ align-items: center;
137
+ }
138
+
139
+ .controls-left {
140
+ display: flex;
141
+ align-items: center;
142
+ width: 100%;
143
+ }
144
+
145
+ .controls-left > * {
146
+ padding-right: 20px;
147
+ }
148
+
149
+ h5 {
150
+ margin-top: 12px;
151
+ margin-bottom: 6px;
152
+ }
153
+
154
+ or-icon {
155
+ vertical-align: middle;
156
+ --or-icon-width: 20px;
157
+ --or-icon-height: 20px;
158
+ }
159
+
160
+ #table-container {
161
+ margin-left: 20px;
162
+ margin-right: 20px;
163
+ }
164
+
165
+ .row {
166
+ display: flex;
167
+ flex-direction: row;
168
+ flex-wrap: wrap;
169
+ margin: auto;
170
+ flex: 1 1 0;
171
+ gap: 16px;
172
+ width: 100%;
173
+ }
174
+
175
+ .column {
176
+ display: flex;
177
+ flex-direction: column;
178
+ margin: 0px;
179
+ flex: 1 1 0;
180
+ }
181
+
182
+ #details-panel {
183
+ min-width: 66%;
184
+ height: max-content;
185
+ }
186
+
187
+ #prop-panel {
188
+ min-width: 32%;
189
+ height: fit-content;
190
+ }
191
+
192
+ .hidden {
193
+ display: none;
194
+ margin: 0 !important;
195
+ }
196
+
197
+ #title.hidden {
198
+ display: none;
199
+ margin: 0 !important;
200
+ }
201
201
  `
202
202
  ];
203
203
  }
@@ -305,7 +305,7 @@ let PageAlarms = class PageAlarms extends Page {
305
305
  render() {
306
306
  var _a, _b;
307
307
  if (!manager.authenticated) {
308
- return html `
308
+ return html `
309
309
  <or-translate value="notAuthenticated"/>`;
310
310
  }
311
311
  const disabled = false;
@@ -314,81 +314,81 @@ let PageAlarms = class PageAlarms extends Page {
314
314
  const readonly = readAlarms && !writeAlarms;
315
315
  const assignOnly = !readAlarms && !writeAlarms;
316
316
  this.config = { assignOnly: assignOnly };
317
- return html `
318
- <div id="wrapper">
319
- <!-- Alarm Specific page -->
320
- <div id="title" class="${this.creationState || this.alarm ? "hidden" : ""}">
321
- <div class="${this.creationState || this.alarm ? "hidden" : ""}"
322
- style="display: flex; align-items: center;">
323
- <or-icon icon="bell-outline" style="padding: 0 10px 0 4px;"></or-icon>
324
- <span>${this.alarm != undefined ? this.alarm.title : html `
325
- <or-translate value="alarm.alarm_plural"/>`}</span>
326
- </div>
327
- <div>
328
- <div id="controls">
329
- <div class="${this.creationState || this.alarm || assignOnly || readonly ? "hidden" : "panel-title"}"
330
- style="justify-content: flex-end;">
331
- <or-mwc-input
332
- outlined
333
- class="${((_a = this._selectedIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "" : "hidden"}"
334
- style="margin: 0;"
335
- type="${InputType.BUTTON}"
336
- icon="delete"
337
- @or-mwc-input-changed="${() => (this._deleteAlarms())}"
338
- ></or-mwc-input>
339
- </div>
340
- <div class="${((_b = this._selectedIds) === null || _b === void 0 ? void 0 : _b.length) > 0 ? "" : "hidden"}"
341
- style="height:40px; border-right: 1px solid #e0e0e0; margin-right: 4px;"></div>
342
- <div class="${this.creationState || this.alarm ? "hidden" : "controls-left"}">
343
- <or-mwc-input .type="${InputType.CHECKBOX}" id="assign-check"
344
- ?disabled="${disabled}" .label="${i18next.t("alarm.assignedToMe")}"
345
- @or-mwc-input-changed="${(evt) => this._onAssignCheckChanged(evt.detail.value)}"
346
- .value="${this.assign}"></or-mwc-input>
347
- <or-mwc-input .type="${InputType.SELECT}" id="severity-select" comfortable
348
- ?disabled="${disabled}" .label="${i18next.t("alarm.severity")}"
349
- @or-mwc-input-changed="${(evt) => this._onSeverityChanged(evt.detail.value)}"
350
- .value="${this.severityValue}"
351
- .options="${this._getSeverityOptions().map(s => s.label)}"></or-mwc-input>
352
- <or-mwc-input .type="${InputType.SELECT}" id="status-select" comfortable
353
- ?disabled="${disabled}" .label="${i18next.t("alarm.status")}"
354
- @or-mwc-input-changed="${(evt) => this._onStatusChanged(evt.detail.value)}"
355
- .value="${this.statusValue}"
356
- .options="${this._getStatusOptions().map(s => s.label)}"></or-mwc-input>
357
-
358
- </div>
359
- <div class="${this.creationState || this.alarm || assignOnly || readonly ? "hidden" : "panel-title"}"
360
- style="justify-content: flex-end;">
361
- <or-mwc-input
362
- type="${InputType.BUTTON}"
363
- icon="plus"
364
- label="${i18next.t("alarm.add")}"
365
- @or-mwc-input-changed="${() => (this.creationState = { alarmModel: this.getNewAlarmModel() })}"
366
- ></or-mwc-input>
367
- </div>
368
- </div>
369
- </div>
370
- </div>
317
+ return html `
318
+ <div id="wrapper">
319
+ <!-- Alarm Specific page -->
320
+ <div id="title" class="${this.creationState || this.alarm ? "hidden" : ""}">
321
+ <div class="${this.creationState || this.alarm ? "hidden" : ""}"
322
+ style="display: flex; align-items: center;">
323
+ <or-icon icon="bell-outline" style="padding: 0 10px 0 4px;"></or-icon>
324
+ <span>${this.alarm != undefined ? this.alarm.title : html `
325
+ <or-translate value="alarm.alarm_plural"/>`}</span>
326
+ </div>
327
+ <div>
328
+ <div id="controls">
329
+ <div class="${this.creationState || this.alarm || assignOnly || readonly ? "hidden" : "panel-title"}"
330
+ style="justify-content: flex-end;">
331
+ <or-mwc-input
332
+ outlined
333
+ class="${((_a = this._selectedIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "" : "hidden"}"
334
+ style="margin: 0;"
335
+ type="${InputType.BUTTON}"
336
+ icon="delete"
337
+ @or-mwc-input-changed="${() => (this._deleteAlarms())}"
338
+ ></or-mwc-input>
339
+ </div>
340
+ <div class="${((_b = this._selectedIds) === null || _b === void 0 ? void 0 : _b.length) > 0 ? "" : "hidden"}"
341
+ style="height:40px; border-right: 1px solid #e0e0e0; margin-right: 4px;"></div>
342
+ <div class="${this.creationState || this.alarm ? "hidden" : "controls-left"}">
343
+ <or-mwc-input .type="${InputType.CHECKBOX}" id="assign-check"
344
+ ?disabled="${disabled}" .label="${i18next.t("alarm.assignedToMe")}"
345
+ @or-mwc-input-changed="${(evt) => this._onAssignCheckChanged(evt.detail.value)}"
346
+ .value="${this.assign}"></or-mwc-input>
347
+ <or-mwc-input .type="${InputType.SELECT}" id="severity-select" comfortable
348
+ ?disabled="${disabled}" .label="${i18next.t("alarm.severity")}"
349
+ @or-mwc-input-changed="${(evt) => this._onSeverityChanged(evt.detail.value)}"
350
+ .value="${this.severityValue}"
351
+ .options="${this._getSeverityOptions().map(s => s.label)}"></or-mwc-input>
352
+ <or-mwc-input .type="${InputType.SELECT}" id="status-select" comfortable
353
+ ?disabled="${disabled}" .label="${i18next.t("alarm.status")}"
354
+ @or-mwc-input-changed="${(evt) => this._onStatusChanged(evt.detail.value)}"
355
+ .value="${this.statusValue}"
356
+ .options="${this._getStatusOptions().map(s => s.label)}"></or-mwc-input>
357
+
358
+ </div>
359
+ <div class="${this.creationState || this.alarm || assignOnly || readonly ? "hidden" : "panel-title"}"
360
+ style="justify-content: flex-end;">
361
+ <or-mwc-input
362
+ type="${InputType.BUTTON}"
363
+ icon="plus"
364
+ label="${i18next.t("alarm.add")}"
365
+ @or-mwc-input-changed="${() => (this.creationState = { alarmModel: this.getNewAlarmModel() })}"
366
+ ></or-mwc-input>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ </div>
371
371
  ${when(this.alarm || this.creationState, () => {
372
372
  var _a;
373
373
  const alarm = (_a = this.alarm) !== null && _a !== void 0 ? _a : this.creationState.alarmModel;
374
374
  return this.getSingleAlarmView(alarm, readonly);
375
375
  }, () => {
376
- return html `
377
- <!-- List of Alarms page -->
378
- <div id="container">
379
- ${disabled ? html `
380
- <div id="msg">
381
- <or-translate value="loading"/>
382
- </div>
383
- ` : html `
384
- <div id="table-container">
385
- ${when(this._data, () => guard([this._data], () => this.getAlarmsTable(writeAlarms)))}
386
- </div>
387
- `}
388
- </div>
376
+ return html `
377
+ <!-- List of Alarms page -->
378
+ <div id="container">
379
+ ${disabled ? html `
380
+ <div id="msg">
381
+ <or-translate value="loading"/>
382
+ </div>
383
+ ` : html `
384
+ <div id="table-container">
385
+ ${when(this._data, () => guard([this._data], () => this.getAlarmsTable(writeAlarms)))}
386
+ </div>
387
+ `}
388
+ </div>
389
389
  `;
390
- })}
391
- </div>
390
+ })}
391
+ </div>
392
392
  `;
393
393
  }
394
394
  getNewAlarmModel() {
@@ -431,11 +431,11 @@ let PageAlarms = class PageAlarms extends Page {
431
431
  });
432
432
  }
433
433
  getAlarmsTable(writeAlarms) {
434
- return html `
435
- <or-alarms-table .alarms=${this._data} .readonly=${!writeAlarms}
436
- @or-mwc-table-row-select="${(e) => this._onRowSelect(e)}"
437
- @or-mwc-table-row-click="${(e) => this._onRowClick(e)}"
438
- ></or-alarms-table>
434
+ return html `
435
+ <or-alarms-table .alarms=${this._data} .readonly=${!writeAlarms}
436
+ @or-mwc-table-row-select="${(e) => this._onRowSelect(e)}"
437
+ @or-mwc-table-row-click="${(e) => this._onRowClick(e)}"
438
+ ></or-alarms-table>
439
439
  `;
440
440
  }
441
441
  _loadData() {
@@ -508,7 +508,7 @@ let PageAlarms = class PageAlarms extends Page {
508
508
  });
509
509
  }
510
510
  getSingleAlarmView(alarm, readonly = true) {
511
- return html `
511
+ return html `
512
512
  ${when(alarm.loaded, () => {
513
513
  return this.getSingleAlarmTemplate(alarm, readonly);
514
514
  }, () => {
@@ -517,146 +517,146 @@ let PageAlarms = class PageAlarms extends Page {
517
517
  return this.getSingleAlarmTemplate(alarm, readonly);
518
518
  });
519
519
  const content = getTemplate();
520
- return html `${until(content, html `
520
+ return html `${until(content, html `
521
521
  <or-translate value="loading"/>`)} `;
522
- })}
522
+ })}
523
523
  `;
524
524
  }
525
525
  getSingleAlarmTemplate(alarm, readonly = true) {
526
526
  var _a;
527
527
  const write = manager.hasRole("write:alarms");
528
- return html `
529
- <!-- Breadcrumb on top of the page-->
530
- <div style="margin: 0 auto auto auto;
531
- width: calc(100% - 100px);
532
- max-width: 1000px;">
533
- <div class="breadcrumb-container">
534
- <span class="breadcrumb-clickable" @click="${() => this.reset()}"
535
- ><or-translate value="alarm.alarm_plural"/></span>
536
- <or-icon class="breadcrumb-arrow" icon="chevron-right"></or-icon>
537
- <span style="margin-left: 2px;"
538
- >${this.alarm != undefined ? this.alarm.id : html `
539
- <or-translate value="alarm.creatingAlarm"/>`}</span>
540
- </div>
541
- <div id="title-alarm">
542
- <or-icon icon="bell-outline" style="margin-right: 10px; margin-left: 14px;"></or-icon>
543
- <span>${this.alarm != undefined ? this.alarm.title : html `
544
- <or-translate value="alarm.alarm_plural"/>`}</span>
545
- </div>
546
-
547
- <div class="panel" style="margin-top: 0">
548
- <div class="row">
549
- <div class="column" id="details-panel">
550
- <h5>
551
- <or-translate value="details"/>
552
- </h5>
553
- <!-- alarm details -->
554
- <or-mwc-input class="alarm-input" ?disabled="${!write}"
555
- .label="${i18next.t("alarm.title")}" required
556
- .type="${InputType.TEXT}"
557
- .value="${alarm.title}"
528
+ return html `
529
+ <!-- Breadcrumb on top of the page-->
530
+ <div style="margin: 0 auto auto auto;
531
+ width: calc(100% - 100px);
532
+ max-width: 1000px;">
533
+ <div class="breadcrumb-container">
534
+ <span class="breadcrumb-clickable" @click="${() => this.reset()}"
535
+ ><or-translate value="alarm.alarm_plural"/></span>
536
+ <or-icon class="breadcrumb-arrow" icon="chevron-right"></or-icon>
537
+ <span style="margin-left: 2px;"
538
+ >${this.alarm != undefined ? this.alarm.id : html `
539
+ <or-translate value="alarm.creatingAlarm"/>`}</span>
540
+ </div>
541
+ <div id="title-alarm">
542
+ <or-icon icon="bell-outline" style="margin-right: 10px; margin-left: 14px;"></or-icon>
543
+ <span>${this.alarm != undefined ? this.alarm.title : html `
544
+ <or-translate value="alarm.alarm_plural"/>`}</span>
545
+ </div>
546
+
547
+ <div class="panel" style="margin-top: 0">
548
+ <div class="row">
549
+ <div class="column" id="details-panel">
550
+ <h5>
551
+ <or-translate value="details"/>
552
+ </h5>
553
+ <!-- alarm details -->
554
+ <or-mwc-input class="alarm-input" ?disabled="${!write}"
555
+ .label="${i18next.t("alarm.title")}" required
556
+ .type="${InputType.TEXT}"
557
+ .value="${alarm.title}"
558
558
  @or-mwc-input-changed="${(e) => {
559
559
  alarm.title = e.detail.value;
560
560
  this.onAlarmChanged(e);
561
- }}"
562
- ></or-mwc-input>
563
- <or-mwc-input class="alarm-input" ?disabled="${!write}"
564
- .label="${i18next.t("alarm.content")}"
565
- .type="${InputType.TEXTAREA}"
566
- .value="${alarm.content}"
567
- rows="12"
561
+ }}"
562
+ ></or-mwc-input>
563
+ <or-mwc-input class="alarm-input" ?disabled="${!write}"
564
+ .label="${i18next.t("alarm.content")}"
565
+ .type="${InputType.TEXTAREA}"
566
+ .value="${alarm.content}"
567
+ rows="12"
568
568
  @or-mwc-input-changed="${(e) => {
569
569
  alarm.content = e.detail.value;
570
570
  this.onAlarmChanged(e);
571
- }}"
572
- ></or-mwc-input>
573
- </div>
574
- <div class="column" id="prop-panel">
575
- <h5>
576
- <or-translate value="properties"/>
577
- </h5>
578
- <or-mwc-input class="alarm-input hidden" ?disabled="${true}"
579
- ?comfortable=${!this.creationState}
580
- .label="${i18next.t("createdOn")}"
581
- .type="${InputType.DATETIME}"
582
- .value="${new Date(alarm.createdOn)}"
583
- ></or-mwc-input>
584
- <or-mwc-input class="${this.creationState ? "hidden" : "alarm-input"}" ?disabled="${true}"
585
- .label="${i18next.t("alarm.lastModified")}"
586
- .type="${InputType.DATETIME}"
587
- .value="${new Date(alarm.lastModified)}"
588
- ></or-mwc-input>
589
- <or-mwc-input class="alarm-input" ?disabled="${!write || this.creationState || this.alarm}"
590
- .label="${i18next.t("alarm.source")}"
591
- .type="${InputType.TEXT}"
592
- .value="${this._getSourceText()}"
593
- ></or-mwc-input>
594
- <or-mwc-input class="alarm-input" ?disabled="${!write}"
595
- .label="${i18next.t("alarm.severity")}"
596
- .type="${InputType.SELECT}"
597
- .options="${this._getAddSeverityOptions().map(s => s.label)}"
598
- .value="${this._getAddSeverityOptions().filter((obj) => obj.value === alarm.severity).map((obj) => obj.label)[0]}"
571
+ }}"
572
+ ></or-mwc-input>
573
+ </div>
574
+ <div class="column" id="prop-panel">
575
+ <h5>
576
+ <or-translate value="properties"/>
577
+ </h5>
578
+ <or-mwc-input class="alarm-input hidden" ?disabled="${true}"
579
+ ?comfortable=${!this.creationState}
580
+ .label="${i18next.t("createdOn")}"
581
+ .type="${InputType.DATETIME}"
582
+ .value="${new Date(alarm.createdOn)}"
583
+ ></or-mwc-input>
584
+ <or-mwc-input class="${this.creationState ? "hidden" : "alarm-input"}" ?disabled="${true}"
585
+ .label="${i18next.t("alarm.lastModified")}"
586
+ .type="${InputType.DATETIME}"
587
+ .value="${new Date(alarm.lastModified)}"
588
+ ></or-mwc-input>
589
+ <or-mwc-input class="alarm-input" ?disabled="${!write || this.creationState || this.alarm}"
590
+ .label="${i18next.t("alarm.source")}"
591
+ .type="${InputType.TEXT}"
592
+ .value="${this._getSourceText()}"
593
+ ></or-mwc-input>
594
+ <or-mwc-input class="alarm-input" ?disabled="${!write}"
595
+ .label="${i18next.t("alarm.severity")}"
596
+ .type="${InputType.SELECT}"
597
+ .options="${this._getAddSeverityOptions().map(s => s.label)}"
598
+ .value="${this._getAddSeverityOptions().filter((obj) => obj.value === alarm.severity).map((obj) => obj.label)[0]}"
599
599
  @or-mwc-input-changed="${(e) => {
600
600
  alarm.severity = this._getAddSeverityOptions().filter((obj) => obj.label === e.detail.value).map((obj) => obj.value)[0];
601
601
  this.onAlarmChanged(e);
602
- }}"
603
- ></or-mwc-input>
604
- <or-mwc-input class="alarm-input" ?disabled="${!write}"
605
- .label="${i18next.t("alarm.status")}"
606
- .type="${InputType.SELECT}"
607
- .options="${this._getAddStatusOptions().map(s => s.label)}"
608
- .value="${this._getAddStatusOptions().filter((obj) => obj.value === alarm.status).map((obj) => obj.label)[0]}"
602
+ }}"
603
+ ></or-mwc-input>
604
+ <or-mwc-input class="alarm-input" ?disabled="${!write}"
605
+ .label="${i18next.t("alarm.status")}"
606
+ .type="${InputType.SELECT}"
607
+ .options="${this._getAddStatusOptions().map(s => s.label)}"
608
+ .value="${this._getAddStatusOptions().filter((obj) => obj.value === alarm.status).map((obj) => obj.label)[0]}"
609
609
  @or-mwc-input-changed="${(e) => {
610
610
  alarm.status = this._getAddStatusOptions().filter((obj) => obj.label === e.detail.value).map((obj) => obj.value)[0];
611
611
  this.onAlarmChanged(e);
612
- }}"
613
- ></or-mwc-input>
614
- <or-mwc-input class="alarm-input"
615
- ?disabled="${!manager.hasRole("read:users") && !manager.hasRole("read:admin")}"
616
- .label="${i18next.t("alarm.assignee")}"
617
- .type="${InputType.SELECT}"
618
- .options="${this._getUsers().map((obj) => obj.label)}"
619
- .value="${this._getUsers().filter((obj) => obj.label === alarm.assigneeUsername).map((obj) => obj.label)[0]}"
612
+ }}"
613
+ ></or-mwc-input>
614
+ <or-mwc-input class="alarm-input"
615
+ ?disabled="${!manager.hasRole("read:users") && !manager.hasRole("read:admin")}"
616
+ .label="${i18next.t("alarm.assignee")}"
617
+ .type="${InputType.SELECT}"
618
+ .options="${this._getUsers().map((obj) => obj.label)}"
619
+ .value="${this._getUsers().filter((obj) => obj.label === alarm.assigneeUsername).map((obj) => obj.label)[0]}"
620
620
  @or-mwc-input-changed="${(e) => {
621
621
  alarm.assigneeId = this._getUsers().filter((obj) => obj.label === e.detail.value).map((obj) => obj.value)[0];
622
622
  this.onAlarmChanged(e);
623
- }}"
624
- ></or-mwc-input>
625
- <div>
626
- <span style="margin: 0px auto 10px;"><or-translate value="linkedAssets"/>:</span>
627
- <or-mwc-input outlined ?disabled="${!manager.hasRole("write:alarms")}"
628
- style="margin-left: 4px;"
629
- .type="${InputType.BUTTON}"
623
+ }}"
624
+ ></or-mwc-input>
625
+ <div>
626
+ <span style="margin: 0px auto 10px;"><or-translate value="linkedAssets"/>:</span>
627
+ <or-mwc-input outlined ?disabled="${!manager.hasRole("write:alarms")}"
628
+ style="margin-left: 4px;"
629
+ .type="${InputType.BUTTON}"
630
630
  .label="${i18next.t("selectRestrictedAssets", {
631
631
  number: (_a = alarm.alarmAssetLinks) === null || _a === void 0 ? void 0 : _a.length,
632
- })}"
633
- @or-mwc-input-changed="${(ev) => this._openAssetSelector(ev, alarm, readonly)}"
634
- ></or-mwc-input>
635
- </div>
636
- </div>
637
- </div>
638
- <!-- Bottom controls (save/update and delete button) -->
639
- ${when(!(readonly && !this._saveAlarmPromise), () => html `
640
- <div class="row" style="justify-content: space-between; margin-top: 10px;">
641
- ${when((manager.hasRole("write:alarms")), () => html `
642
- <or-mwc-input class="alarm-input" style="margin: 0;" outlined
643
- ?disabled="${!manager.hasRole("write:alarms") || !alarm.id}"
644
- .label="${i18next.t("delete")}"
645
- .type="${InputType.BUTTON}"
646
- @or-mwc-input-changed="${() => this._deleteAlarm(this.alarm)}"
647
- ></or-mwc-input>
648
- `)}
649
- <div>
650
- <or-mwc-input class="alarm-input" style="margin: 0;" outlined
651
- .label="${i18next.t("cancel")}"
652
- .type="${InputType.BUTTON}"
653
- @or-mwc-input-changed="${() => this.reset()}"
654
- ></or-mwc-input>
655
- <or-mwc-input id="savebtn"
656
- style="margin: 0;"
657
- raised class="alarm-input" disabled
658
- .label="${i18next.t(alarm.id ? "save" : "create")}"
659
- .type="${InputType.BUTTON}"
632
+ })}"
633
+ @or-mwc-input-changed="${(ev) => this._openAssetSelector(ev, alarm, readonly)}"
634
+ ></or-mwc-input>
635
+ </div>
636
+ </div>
637
+ </div>
638
+ <!-- Bottom controls (save/update and delete button) -->
639
+ ${when(!(readonly && !this._saveAlarmPromise), () => html `
640
+ <div class="row" style="justify-content: space-between; margin-top: 10px;">
641
+ ${when((manager.hasRole("write:alarms")), () => html `
642
+ <or-mwc-input class="alarm-input" style="margin: 0;" outlined
643
+ ?disabled="${!manager.hasRole("write:alarms") || !alarm.id}"
644
+ .label="${i18next.t("delete")}"
645
+ .type="${InputType.BUTTON}"
646
+ @or-mwc-input-changed="${() => this._deleteAlarm(this.alarm)}"
647
+ ></or-mwc-input>
648
+ `)}
649
+ <div>
650
+ <or-mwc-input class="alarm-input" style="margin: 0;" outlined
651
+ .label="${i18next.t("cancel")}"
652
+ .type="${InputType.BUTTON}"
653
+ @or-mwc-input-changed="${() => this.reset()}"
654
+ ></or-mwc-input>
655
+ <or-mwc-input id="savebtn"
656
+ style="margin: 0;"
657
+ raised class="alarm-input" disabled
658
+ .label="${i18next.t(alarm.id ? "save" : "create")}"
659
+ .type="${InputType.BUTTON}"
660
660
  @or-mwc-input-changed="${(e) => {
661
661
  let error;
662
662
  this._saveAlarmPromise = this._createUpdateAlarm(alarm, alarm.id ? "update" : "create")
@@ -673,13 +673,13 @@ let PageAlarms = class PageAlarms extends Page {
673
673
  }).finally(() => {
674
674
  this._saveAlarmPromise = undefined;
675
675
  });
676
- }}"
677
- ></or-mwc-input>
678
- </div>
679
- </div>
680
- `)}
681
- </div>
682
- </div>
676
+ }}"
677
+ ></or-mwc-input>
678
+ </div>
679
+ </div>
680
+ `)}
681
+ </div>
682
+ </div>
683
683
  </div>`;
684
684
  }
685
685
  _getStatusOptions() {
@@ -821,23 +821,23 @@ let PageAlarms = class PageAlarms extends Page {
821
821
  };
822
822
  const dialog = showDialog(new OrMwcDialog()
823
823
  .setHeading(i18next.t("linkedAssets"))
824
- .setContent(html `
825
- <or-asset-tree
826
- id="chart-asset-tree"
827
- readonly="true"
828
- .selectedIds="${(_a = alarm.alarmAssetLinks) === null || _a === void 0 ? void 0 : _a.map((al) => al.id.assetId)}"
829
- .showSortBtn="${false}"
830
- expandNodes
831
- checkboxes
824
+ .setContent(html `
825
+ <or-asset-tree
826
+ id="chart-asset-tree"
827
+ readonly="true"
828
+ .selectedIds="${(_a = alarm.alarmAssetLinks) === null || _a === void 0 ? void 0 : _a.map((al) => al.id.assetId)}"
829
+ .showSortBtn="${false}"
830
+ expandNodes
831
+ checkboxes
832
832
  @or-asset-tree-request-selection="${(e) => {
833
833
  this.creationState ? e.detail.allow = true : e.detail.allow = false;
834
- }}"
834
+ }}"
835
835
  @or-asset-tree-selection="${(e) => {
836
836
  if (!readonly) {
837
837
  onAssetSelectionChanged(e);
838
838
  }
839
- }}"
840
- ></or-asset-tree>
839
+ }}"
840
+ ></or-asset-tree>
841
841
  `)
842
842
  .setActions([
843
843
  {