@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.
@@ -45,144 +45,144 @@ let PageExport = class PageExport extends Page {
45
45
  return [
46
46
  unsafeCSS(tableStyle),
47
47
  unsafeCSS(buttonStyle),
48
- css `
49
-
50
- #wrapper {
51
- height: 100%;
52
- width: 100%;
53
- display: flex;
54
- flex-direction: column;
55
- overflow: auto;
56
- }
57
-
58
- #title {
59
- padding: 0 20px;
60
- font-size: 18px;
61
- font-weight: bold;
62
- width: calc(100% - 40px);
63
- max-width: 1360px;
64
- margin: 20px auto;
65
- align-items: center;
66
- display: flex;
67
- color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
68
- }
69
-
70
- #title or-icon {
71
- margin-right: 10px;
72
- margin-left: 14px;
73
- }
74
-
75
- .panel {
76
- width: calc(100% - 90px);
77
- max-width: 1310px;
78
- background-color: white;
79
- border: 1px solid #e5e5e5;
80
- border-radius: 5px;
81
- position: relative;
82
- margin: 0 auto;
83
- padding: 24px;
84
- }
85
-
86
- .panel-title {
87
- text-transform: uppercase;
88
- font-weight: bolder;
89
- line-height: 1em;
90
- color: var(--internal-or-asset-viewer-title-text-color);
91
- margin-bottom: 20px;
92
- margin-top: 0;
93
- flex: 0 0 auto;
94
- letter-spacing: 0.025em;
95
- color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
96
- }
97
-
98
- th {
99
- color: ${unsafeCSS(DefaultColor3)};
100
- }
101
-
102
- .mdc-data-table__row {
103
- border-top-color: #D3D3D3;
104
- }
105
-
106
- td, th {
107
- width: 25%
108
- }
109
-
110
- .meta-item-container {
111
- flex-direction: row;
112
- overflow: hidden;
113
- max-height: 0;
114
- transition: max-height 0.25s ease-out;
115
- padding-left: 16px;
116
- }
117
-
118
- .mdc-data-table__header-cell {
119
- font-weight: bold;
120
- color: ${unsafeCSS(DefaultColor3)};
121
- }
122
-
123
- .button {
124
- cursor: pointer;
125
- display: flex;
126
- flex-direction: row;
127
- align-content: center;
128
- padding: 16px;
129
- align-items: center;
130
- font-size: 14px;
131
- text-transform: uppercase;
132
- color: var(--or-app-color4);
133
- }
134
- .button or-icon {
135
- --or-icon-fill: var(--or-app-color4);
136
- margin-right: 5px;
137
- }
138
-
139
- .remove-button {
140
- right: 20px;
141
- top: 13px;
142
- transform: translate(50%, -50%);
143
- position: relative;
144
- }
145
-
146
- tr:hover .remove-button {
147
- visibility: visible;
148
- }
149
-
150
- @media screen and (max-width: 768px) {
151
- #title {
152
- padding: 0;
153
- width: 100%;
154
- }
155
-
156
- .hide-mobile {
157
- display: none;
158
- }
159
-
160
- .panel {
161
- border-radius: 0;
162
- border-left: 0px;
163
- border-right: 0px;
164
- width: calc(100% - 48px);
165
- }
166
-
167
- td, th {
168
- width: 50%
169
- }
170
- }
171
-
172
- .timerange-wrapper {
173
- margin-bottom: 2em
174
- }
175
-
176
- .export-btn-wrapper {
177
- display: flex;
178
- justify-content: space-between;
179
- }
180
-
181
- .export-btn-wrapper .button {
182
- padding: 0;
183
- margin-right: 0;
184
- margin-bottom: 0;
185
- }
48
+ css `
49
+
50
+ #wrapper {
51
+ height: 100%;
52
+ width: 100%;
53
+ display: flex;
54
+ flex-direction: column;
55
+ overflow: auto;
56
+ }
57
+
58
+ #title {
59
+ padding: 0 20px;
60
+ font-size: 18px;
61
+ font-weight: bold;
62
+ width: calc(100% - 40px);
63
+ max-width: 1360px;
64
+ margin: 20px auto;
65
+ align-items: center;
66
+ display: flex;
67
+ color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
68
+ }
69
+
70
+ #title or-icon {
71
+ margin-right: 10px;
72
+ margin-left: 14px;
73
+ }
74
+
75
+ .panel {
76
+ width: calc(100% - 90px);
77
+ max-width: 1310px;
78
+ background-color: white;
79
+ border: 1px solid #e5e5e5;
80
+ border-radius: 5px;
81
+ position: relative;
82
+ margin: 0 auto;
83
+ padding: 24px;
84
+ }
85
+
86
+ .panel-title {
87
+ text-transform: uppercase;
88
+ font-weight: bolder;
89
+ line-height: 1em;
90
+ color: var(--internal-or-asset-viewer-title-text-color);
91
+ margin-bottom: 20px;
92
+ margin-top: 0;
93
+ flex: 0 0 auto;
94
+ letter-spacing: 0.025em;
95
+ color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
96
+ }
97
+
98
+ th {
99
+ color: ${unsafeCSS(DefaultColor3)};
100
+ }
101
+
102
+ .mdc-data-table__row {
103
+ border-top-color: #D3D3D3;
104
+ }
105
+
106
+ td, th {
107
+ width: 25%
108
+ }
109
+
110
+ .meta-item-container {
111
+ flex-direction: row;
112
+ overflow: hidden;
113
+ max-height: 0;
114
+ transition: max-height 0.25s ease-out;
115
+ padding-left: 16px;
116
+ }
117
+
118
+ .mdc-data-table__header-cell {
119
+ font-weight: bold;
120
+ color: ${unsafeCSS(DefaultColor3)};
121
+ }
122
+
123
+ .button {
124
+ cursor: pointer;
125
+ display: flex;
126
+ flex-direction: row;
127
+ align-content: center;
128
+ padding: 16px;
129
+ align-items: center;
130
+ font-size: 14px;
131
+ text-transform: uppercase;
132
+ color: var(--or-app-color4);
133
+ }
134
+ .button or-icon {
135
+ --or-icon-fill: var(--or-app-color4);
136
+ margin-right: 5px;
137
+ }
138
+
139
+ .remove-button {
140
+ right: 20px;
141
+ top: 13px;
142
+ transform: translate(50%, -50%);
143
+ position: relative;
144
+ }
145
+
146
+ tr:hover .remove-button {
147
+ visibility: visible;
148
+ }
149
+
150
+ @media screen and (max-width: 768px) {
151
+ #title {
152
+ padding: 0;
153
+ width: 100%;
154
+ }
155
+
156
+ .hide-mobile {
157
+ display: none;
158
+ }
159
+
160
+ .panel {
161
+ border-radius: 0;
162
+ border-left: 0px;
163
+ border-right: 0px;
164
+ width: calc(100% - 48px);
165
+ }
166
+
167
+ td, th {
168
+ width: 50%
169
+ }
170
+ }
171
+
172
+ .timerange-wrapper {
173
+ margin-bottom: 2em
174
+ }
175
+
176
+ .export-btn-wrapper {
177
+ display: flex;
178
+ justify-content: space-between;
179
+ }
180
+
181
+ .export-btn-wrapper .button {
182
+ padding: 0;
183
+ margin-right: 0;
184
+ margin-bottom: 0;
185
+ }
186
186
  `,
187
187
  ];
188
188
  }
@@ -245,45 +245,45 @@ let PageExport = class PageExport extends Page {
245
245
  i18next.t('oldestDatapoint'),
246
246
  i18next.t('latestDatapoint')
247
247
  ];
248
- return html `
249
- <div id="wrapper">
250
- <div id="title">
251
- <or-icon icon="database-export"></or-icon>
252
- ${i18next.t("dataExport")}
253
- </div>
254
- <div class="panel">
255
- <p class="panel-title">${i18next.t("dataSelection")}</p>
256
- <div class="mdc-data-table" style="width: 100%; max-height: 500px; overflow-y: auto;margin-bottom: 2em">
257
- <table class="mdc-data-table__table" aria-label="attribute list" >
258
- <thead>
259
- <tr class="mdc-data-table__header-row">
260
- ${headers.map(header => html `
261
- <th class="mdc-data-table__header-cell" role="columnheader" scope="col">${header}</th>
262
- `)}
263
- <th></th>
264
- </tr>
265
- </thead>
266
- <tbody id="table-body" class="mdc-data-table__content">
267
- ${this.tableRowsHtml}
268
- <tr class="mdc-data-table__row">
269
- <td colspan="100%">
270
- <a class="button" @click="${() => this._openDialog()}"><or-icon icon="plus"></or-icon>${i18next.t("addAssetAttribute")}</a>
271
- </td>
272
- </tr>
273
- </tbody>
274
- </table>
275
- </div>
276
- <div class="timerange-wrapper">
277
- <or-mwc-input .type="${InputType.DATETIME}" label="${Util.capitaliseFirstLetter(i18next.t("exportFrom"))}" .value="${moment(this.oldestTimestamp).toDate()}" @or-mwc-input-changed="${(evt) => this.oldestTimestamp = evt.detail.value}"></or-mwc-input>
278
- <or-mwc-input .type="${InputType.DATETIME}" label="${Util.capitaliseFirstLetter(i18next.t("to"))}" .value="${moment(this.latestTimestamp).toDate()}" @or-mwc-input-changed="${(evt) => this.latestTimestamp = evt.detail.value}"></or-mwc-input>
279
- </div>
280
- <div class="export-btn-wrapper">
281
- <or-mwc-input .disabled="${this.isClearExportBtnDisabled}" class="button" .type="${InputType.BUTTON}" label="clearTable" @click="${() => this.clearSelection()}"></or-mwc-input>
282
- <or-mwc-input .disabled="${this.isExportBtnDisabled}" class="button" raised .type="${InputType.BUTTON}" label="export" @click="${() => this.export()}"></or-mwc-input>
283
- </div>
284
- </div>
285
- </div>
286
-
248
+ return html `
249
+ <div id="wrapper">
250
+ <div id="title">
251
+ <or-icon icon="database-export"></or-icon>
252
+ ${i18next.t("dataExport")}
253
+ </div>
254
+ <div class="panel">
255
+ <p class="panel-title">${i18next.t("dataSelection")}</p>
256
+ <div class="mdc-data-table" style="width: 100%; max-height: 500px; overflow-y: auto;margin-bottom: 2em">
257
+ <table class="mdc-data-table__table" aria-label="attribute list" >
258
+ <thead>
259
+ <tr class="mdc-data-table__header-row">
260
+ ${headers.map(header => html `
261
+ <th class="mdc-data-table__header-cell" role="columnheader" scope="col">${header}</th>
262
+ `)}
263
+ <th></th>
264
+ </tr>
265
+ </thead>
266
+ <tbody id="table-body" class="mdc-data-table__content">
267
+ ${this.tableRowsHtml}
268
+ <tr class="mdc-data-table__row">
269
+ <td colspan="100%">
270
+ <a class="button" @click="${() => this._openDialog()}"><or-icon icon="plus"></or-icon>${i18next.t("addAssetAttribute")}</a>
271
+ </td>
272
+ </tr>
273
+ </tbody>
274
+ </table>
275
+ </div>
276
+ <div class="timerange-wrapper">
277
+ <or-mwc-input .type="${InputType.DATETIME}" label="${Util.capitaliseFirstLetter(i18next.t("exportFrom"))}" .value="${moment(this.oldestTimestamp).toDate()}" @or-mwc-input-changed="${(evt) => this.oldestTimestamp = evt.detail.value}"></or-mwc-input>
278
+ <or-mwc-input .type="${InputType.DATETIME}" label="${Util.capitaliseFirstLetter(i18next.t("to"))}" .value="${moment(this.latestTimestamp).toDate()}" @or-mwc-input-changed="${(evt) => this.latestTimestamp = evt.detail.value}"></or-mwc-input>
279
+ </div>
280
+ <div class="export-btn-wrapper">
281
+ <or-mwc-input .disabled="${this.isClearExportBtnDisabled}" class="button" .type="${InputType.BUTTON}" label="clearTable" @click="${() => this.clearSelection()}"></or-mwc-input>
282
+ <or-mwc-input .disabled="${this.isExportBtnDisabled}" class="button" raised .type="${InputType.BUTTON}" label="export" @click="${() => this.export()}"></or-mwc-input>
283
+ </div>
284
+ </div>
285
+ </div>
286
+
287
287
  `;
288
288
  }
289
289
  renderTable(attributeRefs) {
@@ -329,20 +329,20 @@ let PageExport = class PageExport extends Page {
329
329
  });
330
330
  }
331
331
  renderTableRows() {
332
- this.tableRowsHtml = html `
333
- ${this.tableRows.map(attr => html `
334
- <tr class="mdc-data-table__row">
335
- <td class="padded-cell mdc-data-table__cell">${attr.assetName}</td>
336
- <td class="padded-cell mdc-data-table__cell">${Util.camelCaseToSentenceCase(attr.attributeName)}</td>
337
- <td class="padded-cell mdc-data-table__cell">${moment(attr.oldestTimestamp).format('llll')}</td>
338
- <td class="padded-cell mdc-data-table__cell">${moment(attr.latestTimestamp).format('llll')}</td>
339
- <td>
340
- <button class="remove-button button-clear" @click="${() => this._deleteAttribute(attr.assetId, attr.attributeName)}">
341
- <or-icon icon="close-circle"></or-icon>
342
- </button>
343
- </td>
344
- </tr>
345
- `)}
332
+ this.tableRowsHtml = html `
333
+ ${this.tableRows.map(attr => html `
334
+ <tr class="mdc-data-table__row">
335
+ <td class="padded-cell mdc-data-table__cell">${attr.assetName}</td>
336
+ <td class="padded-cell mdc-data-table__cell">${Util.camelCaseToSentenceCase(attr.attributeName)}</td>
337
+ <td class="padded-cell mdc-data-table__cell">${moment(attr.oldestTimestamp).format('llll')}</td>
338
+ <td class="padded-cell mdc-data-table__cell">${moment(attr.latestTimestamp).format('llll')}</td>
339
+ <td>
340
+ <button class="remove-button button-clear" @click="${() => this._deleteAttribute(attr.assetId, attr.attributeName)}">
341
+ <or-icon icon="close-circle"></or-icon>
342
+ </button>
343
+ </td>
344
+ </tr>
345
+ `)}
346
346
  `;
347
347
  }
348
348
  _deleteAttribute(assetId, attributeName) {