@gpa-gemstone/common-pages 0.0.117 → 0.0.119

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.
@@ -102,9 +102,9 @@ var EventCharacteristicFilter = function (props) {
102
102
  (NullOrNaN(filter.transientMin) || filter.transientMax >= filter.transientMin));
103
103
  return true;
104
104
  }
105
- var sagsSelected = props.eventTypeFilter.find(function (i) { var _a, _b; return (_b = i == ((_a = props.eventTypes.find(function (item) { return item.Name == 'Sag'; })) === null || _a === void 0 ? void 0 : _a.ID)) !== null && _b !== void 0 ? _b : -1; }) != null;
106
- var swellsSelected = props.eventTypeFilter.find(function (i) { var _a, _b; return (_b = i == ((_a = props.eventTypes.find(function (item) { return item.Name == 'Swell'; })) === null || _a === void 0 ? void 0 : _a.ID)) !== null && _b !== void 0 ? _b : -1; }) != null;
107
- var transientsSelected = props.eventTypeFilter.find(function (i) { var _a, _b; return (_b = i == ((_a = props.eventTypes.find(function (item) { return item.Name == 'Transient'; })) === null || _a === void 0 ? void 0 : _a.ID)) !== null && _b !== void 0 ? _b : -1; }) != null;
105
+ var sagsSelected = props.eventTypeFilter.find(function (i) { var _a; return i == ((_a = props.eventTypes.find(function (item) { return item.Name == 'Sag'; })) === null || _a === void 0 ? void 0 : _a.ID); }) != null;
106
+ var swellsSelected = props.eventTypeFilter.find(function (i) { var _a; return i == ((_a = props.eventTypes.find(function (item) { return item.Name == 'Swell'; })) === null || _a === void 0 ? void 0 : _a.ID); }) != null;
107
+ var transientsSelected = props.eventTypeFilter.find(function (i) { var _a; return i == ((_a = props.eventTypes.find(function (item) { return item.Name == 'Transient'; })) === null || _a === void 0 ? void 0 : _a.ID); }) != null;
108
108
  if (newEventCharacteristicFilter === null || props.eventTypeFilter === null)
109
109
  return null;
110
110
  return (react_1.default.createElement("fieldset", { className: "border", style: { padding: '10px', height: '100%' } },
@@ -116,20 +116,11 @@ var EventCharacteristicFilter = function (props) {
116
116
  react_1.default.createElement("div", { className: 'input-group input-group-sm', style: { width: '100%' } },
117
117
  react_1.default.createElement(react_forms_1.Select, { Record: newEventCharacteristicFilter, Label: 'Mag-Dur:', Field: 'curveID', Setter: setNewEventCharacteristicFilter, Options: props.magDurCurves.map(function (v) { return ({ Value: v.ID.toString(), Label: v.Name }); }) })),
118
118
  react_1.default.createElement("div", { className: 'form-check form-check-inline' },
119
- react_1.default.createElement("input", { className: "form-check-input", type: "radio", onChange: function () {
120
- setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { curveInside: true, curveOutside: false }));
121
- }, checked: newEventCharacteristicFilter.curveInside && !props.eventCharacteristicFilter.curveOutside }),
122
- react_1.default.createElement("label", { className: "form-check-label" }, "Inside")),
123
- react_1.default.createElement("div", { className: 'form-check form-check-inline' },
124
- react_1.default.createElement("input", { className: "form-check-input", type: "radio", onChange: function () {
125
- setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { curveOutside: true, curveInside: false }));
126
- }, checked: newEventCharacteristicFilter.curveOutside && !newEventCharacteristicFilter.curveInside }),
127
- react_1.default.createElement("label", { className: "form-check-label" }, "Outside")),
128
- react_1.default.createElement("div", { className: 'form-check form-check-inline' },
129
- react_1.default.createElement("input", { className: "form-check-input", type: "radio", onChange: function () {
130
- setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { curveOutside: true, curveInside: true }));
131
- }, checked: newEventCharacteristicFilter.curveOutside && newEventCharacteristicFilter.curveInside }),
132
- react_1.default.createElement("label", { className: "form-check-label" }, "Both"))))),
119
+ react_1.default.createElement(react_forms_1.RadioButtons, { Record: newEventCharacteristicFilter, Label: '', Field: 'sagType', Setter: setNewEventCharacteristicFilter, Options: [
120
+ { Value: 'LL', Label: 'LL' },
121
+ { Value: 'LN', Label: 'LN' },
122
+ { Value: 'both', Label: 'Both' }
123
+ ] }))))),
133
124
  react_1.default.createElement("div", { className: "col-4" },
134
125
  react_1.default.createElement("form", null,
135
126
  react_1.default.createElement("label", { style: { margin: 0 } }, "Duration (cycle):"),
@@ -155,20 +146,11 @@ var EventCharacteristicFilter = function (props) {
155
146
  react_1.default.createElement(react_forms_1.Input, { Record: newEventCharacteristicFilter, Label: '', Disabled: !sagsSelected, Field: 'sagMax', Setter: setNewEventCharacteristicFilter, Valid: validMinMax, Feedback: 'Invalid Max', Type: 'number', Size: 'small', AllowNull: true })))),
156
147
  react_1.default.createElement("div", { className: "row justify-content-md-center" },
157
148
  react_1.default.createElement("div", { className: 'form-check form-check-inline' },
158
- react_1.default.createElement("input", { className: "form-check-input", type: "radio", onChange: function () {
159
- setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { sagType: 'LL' }));
160
- }, checked: newEventCharacteristicFilter.sagType == 'LL' }),
161
- react_1.default.createElement("label", { className: "form-check-label" }, "LL")),
162
- react_1.default.createElement("div", { className: 'form-check form-check-inline' },
163
- react_1.default.createElement("input", { className: "form-check-input", type: "radio", onChange: function () {
164
- setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { sagType: 'LN' }));
165
- }, checked: newEventCharacteristicFilter.sagType == 'LN' }),
166
- react_1.default.createElement("label", { className: "form-check-label" }, "LN")),
167
- react_1.default.createElement("div", { className: 'form-check form-check-inline' },
168
- react_1.default.createElement("input", { className: "form-check-input", type: "radio", onChange: function () {
169
- setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { sagType: 'both' }));
170
- }, checked: newEventCharacteristicFilter.sagType == 'both' }),
171
- react_1.default.createElement("label", { className: "form-check-label" }, "Both")))))),
149
+ react_1.default.createElement(react_forms_1.RadioButtons, { Record: newEventCharacteristicFilter, Label: '', Field: 'sagType', Setter: setNewEventCharacteristicFilter, Options: [
150
+ { Value: 'LL', Label: 'LL' },
151
+ { Value: 'LN', Label: 'LN' },
152
+ { Value: 'both', Label: 'Both' }
153
+ ] })))))),
172
154
  react_1.default.createElement("div", { className: "col-4" },
173
155
  react_1.default.createElement(react_forms_1.MultiCheckBoxSelect, { Options: newPhases, Label: 'Phases', ItemTooltip: 'dark', OnChange: function (evt, Options) {
174
156
  var phaseList = [];
@@ -195,20 +177,11 @@ var EventCharacteristicFilter = function (props) {
195
177
  react_1.default.createElement(react_forms_1.Input, { Record: newEventCharacteristicFilter, Label: '', Disabled: !transientsSelected, Field: 'transientMax', Setter: setNewEventCharacteristicFilter, Valid: validMinMax, Feedback: 'Invalid Max', Size: 'small', AllowNull: true, Type: 'number' })))),
196
178
  react_1.default.createElement("div", { className: "row justify-content-md-center" },
197
179
  react_1.default.createElement("div", { className: 'form-check form-check-inline' },
198
- react_1.default.createElement("input", { className: "form-check-input", type: "radio", onChange: function () {
199
- setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { transientType: 'LL' }));
200
- }, checked: newEventCharacteristicFilter.transientType == 'LL' }),
201
- react_1.default.createElement("label", { className: "form-check-label" }, "LL")),
202
- react_1.default.createElement("div", { className: 'form-check form-check-inline' },
203
- react_1.default.createElement("input", { className: "form-check-input", type: "radio", onChange: function () {
204
- setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { transientType: 'LN' }));
205
- }, checked: newEventCharacteristicFilter.transientType == 'LN' }),
206
- react_1.default.createElement("label", { className: "form-check-label" }, "LN")),
207
- react_1.default.createElement("div", { className: 'form-check form-check-inline' },
208
- react_1.default.createElement("input", { className: "form-check-input", type: "radio", onChange: function () {
209
- setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { transientType: 'both' }));
210
- }, checked: newEventCharacteristicFilter.transientType == 'both' }),
211
- react_1.default.createElement("label", { className: "form-check-label" }, "Both")))))),
180
+ react_1.default.createElement(react_forms_1.RadioButtons, { Record: newEventCharacteristicFilter, Label: '', Field: 'sagType', Setter: setNewEventCharacteristicFilter, Options: [
181
+ { Value: 'LL', Label: 'LL' },
182
+ { Value: 'LN', Label: 'LN' },
183
+ { Value: 'both', Label: 'Both' }
184
+ ] })))))),
212
185
  react_1.default.createElement("div", { className: "col-4" },
213
186
  react_1.default.createElement("form", null,
214
187
  react_1.default.createElement("label", { style: { margin: 0 } }, "Swells (p.u.):"),
@@ -223,19 +196,10 @@ var EventCharacteristicFilter = function (props) {
223
196
  react_1.default.createElement(react_forms_1.Input, { Record: newEventCharacteristicFilter, Label: '', Disabled: !swellsSelected, Field: 'swellMax', Setter: setNewEventCharacteristicFilter, Valid: validMinMax, Feedback: 'Invalid Max', Type: 'number', Size: 'small', AllowNull: true })))),
224
197
  react_1.default.createElement("div", { className: "row justify-content-md-center" },
225
198
  react_1.default.createElement("div", { className: 'form-check form-check-inline' },
226
- react_1.default.createElement("input", { className: "form-check-input", type: "radio", onChange: function () {
227
- setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { swellType: 'LL' }));
228
- }, checked: newEventCharacteristicFilter.swellType == 'LL' }),
229
- react_1.default.createElement("label", { className: "form-check-label" }, "LL")),
230
- react_1.default.createElement("div", { className: 'form-check form-check-inline' },
231
- react_1.default.createElement("input", { className: "form-check-input", type: "radio", onChange: function () {
232
- setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { swellType: 'LN' }));
233
- }, checked: newEventCharacteristicFilter.swellType == 'LN' }),
234
- react_1.default.createElement("label", { className: "form-check-label" }, "LN")),
235
- react_1.default.createElement("div", { className: 'form-check form-check-inline' },
236
- react_1.default.createElement("input", { className: "form-check-input", type: "radio", onChange: function () {
237
- setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { swellType: 'both' }));
238
- }, checked: newEventCharacteristicFilter.swellType == 'both' }),
239
- react_1.default.createElement("label", { className: "form-check-label" }, "Both")))))))));
199
+ react_1.default.createElement(react_forms_1.RadioButtons, { Record: newEventCharacteristicFilter, Label: '', Field: 'sagType', Setter: setNewEventCharacteristicFilter, Options: [
200
+ { Value: 'LL', Label: 'LL' },
201
+ { Value: 'LN', Label: 'LN' },
202
+ { Value: 'both', Label: 'Both' }
203
+ ] })))))))));
240
204
  };
241
205
  exports.default = EventCharacteristicFilter;
@@ -134,11 +134,13 @@ var EventSearchTypeCategory = function (props) {
134
134
  props.Data.filter(function (item) { return props.SelectedID.find(function (i) { return i == item.ID; }) == null; }).length == 0 ? 'un' : '',
135
135
  "select all)")),
136
136
  react_1.default.createElement("form", null,
137
- react_1.default.createElement("ul", { style: { listStyleType: 'none', padding: 0, position: 'relative', float: 'left' } }, props.Data.map(function (item) { return react_1.default.createElement("li", { key: item.ID },
138
- react_1.default.createElement("label", null,
139
- react_1.default.createElement("input", { type: "checkbox", onChange: function (e) {
140
- props.OnChange(item, e.target.checked);
141
- }, checked: props.SelectedID.find(function (i) { return i == item.ID; }) != null }),
142
- item.Description)); }))));
137
+ react_1.default.createElement("ul", { style: { listStyleType: 'none', padding: 0, position: 'relative', float: 'left' } }, props.Data.map(function (item) {
138
+ return react_1.default.createElement("li", { key: item.ID },
139
+ react_1.default.createElement("label", null,
140
+ react_1.default.createElement("input", { type: "checkbox", onChange: function (e) {
141
+ props.OnChange(item, e.target.checked);
142
+ }, checked: props.SelectedID.find(function (i) { return i == item.ID; }) != null }),
143
+ item.Description));
144
+ }))));
143
145
  };
144
146
  exports.default = EventTypeFilter;
@@ -1,4 +1,4 @@
1
- import { ITimeFilter } from '../TimeFilter';
1
+ import { ITimeFilter } from './TimeFilter';
2
2
  export type DateUnit = ('datetime-local' | 'date' | 'time');
3
3
  interface IQuickSelect {
4
4
  label: string;
@@ -36,7 +36,7 @@ function getFormat(format) {
36
36
  else if (format == "time")
37
37
  return 'HH:mm:ss.SSS';
38
38
  else
39
- return 'MM/DD/YYYY HH:mm:ss.SSS'; // default format
39
+ return 'MM/DD/YYYY HH:mm:ss.SSS';
40
40
  }
41
41
  //update all quick selects to use new timefilters
42
42
  exports.AvailableQuickSelects = [
@@ -46,8 +46,7 @@ exports.AvailableQuickSelects = [
46
46
  var t = moment_1.default.utc().add(offset, 'minutes').startOf('hour');
47
47
  return {
48
48
  start: t.format(getFormat(format)),
49
- unit: 'm',
50
- duration: 60,
49
+ end: t.add(60, 'm').format(getFormat(format)),
51
50
  };
52
51
  },
53
52
  hideQuickPick: function (f) {
@@ -130,8 +129,8 @@ exports.AvailableQuickSelects = [
130
129
  var t = moment_1.default.utc().add(offset, 'minutes').startOf('week');
131
130
  return {
132
131
  start: t.format(getFormat(format)),
133
- unit: 'h',
134
- duration: 7 * 24,
132
+ unit: 'd',
133
+ duration: 7
135
134
  };
136
135
  },
137
136
  hideQuickPick: function (f) {
@@ -144,8 +143,8 @@ exports.AvailableQuickSelects = [
144
143
  var t = moment_1.default.utc().add(offset, 'minutes').startOf('week');
145
144
  return {
146
145
  end: t.format(getFormat(format)),
147
- unit: 'h',
148
- duration: 7 * 24,
146
+ unit: 'd',
147
+ duration: 7
149
148
  };
150
149
  },
151
150
  hideQuickPick: function (f) {
@@ -158,8 +157,8 @@ exports.AvailableQuickSelects = [
158
157
  var t = moment_1.default.utc().add(offset, 'minutes').startOf('day');
159
158
  return {
160
159
  end: t.format(getFormat(format)),
161
- unit: 'h',
162
- duration: 7 * 24,
160
+ unit: 'd',
161
+ duration: 7
163
162
  };
164
163
  },
165
164
  hideQuickPick: function (f) {
@@ -170,11 +169,10 @@ exports.AvailableQuickSelects = [
170
169
  label: 'This Month', createFilter: function (tz, format) {
171
170
  var offset = moment_timezone_1.default.tz(moment_1.default.utc().startOf('month').format('YYYY-MM-DDTHH:mm:ss.SSSSS'), tz).utcOffset();
172
171
  var t = moment_1.default.utc().add(offset, 'minutes').startOf('month');
173
- var window = (t.daysInMonth() * 24);
174
172
  return {
175
173
  start: t.format(getFormat(format)),
176
- unit: 'h',
177
- duration: window,
174
+ unit: 'd',
175
+ duration: t.daysInMonth()
178
176
  };
179
177
  },
180
178
  hideQuickPick: function (f) {
@@ -185,11 +183,10 @@ exports.AvailableQuickSelects = [
185
183
  label: 'Last Month', createFilter: function (tz, format) {
186
184
  var offset = moment_timezone_1.default.tz(moment_1.default.utc().startOf('month').subtract(1, 'month').format('YYYY-MM-DDTHH:mm:ss.SSSSS'), tz).utcOffset();
187
185
  var t = moment_1.default.utc().add(offset, 'minutes').startOf('month').subtract(1, 'month');
188
- var window = (t.daysInMonth() * 24);
189
186
  return {
190
187
  start: t.format(getFormat(format)),
191
- unit: 'h',
192
- duration: window,
188
+ unit: 'd',
189
+ duration: t.daysInMonth()
193
190
  };
194
191
  },
195
192
  hideQuickPick: function (f) {
@@ -266,7 +263,8 @@ exports.AvailableQuickSelects = [
266
263
  var t = moment_1.default.utc().add(offset, 'minutes').startOf('year');
267
264
  return {
268
265
  start: t.format(getFormat(format)),
269
- end: t.endOf('year').format(getFormat(format))
266
+ unit: 'M',
267
+ duration: 12
270
268
  };
271
269
  },
272
270
  hideQuickPick: function (f) {
@@ -275,11 +273,12 @@ exports.AvailableQuickSelects = [
275
273
  },
276
274
  {
277
275
  label: 'Last Year', createFilter: function (tz, format) {
278
- var offset = moment_timezone_1.default.tz(moment_1.default.utc().startOf('year').subtract(1, 'year').format('YYYY-MM-DDTHH:mm:ss.SSSSS'), tz).utcOffset();
279
- var t = moment_1.default.utc().add(offset, 'minute').startOf('year').subtract(1, 'year');
276
+ var offset = moment_timezone_1.default.tz(moment_1.default.utc().startOf('year').format('YYYY-MM-DDTHH:mm:ss.SSSSS'), tz).utcOffset();
277
+ var t = moment_1.default.utc().add(offset, 'minutes').startOf('year');
280
278
  return {
281
- start: t.format(getFormat(format)),
282
- end: t.endOf('year').format(getFormat(format)),
279
+ end: t.format(getFormat(format)),
280
+ unit: 'M',
281
+ duration: 12
283
282
  };
284
283
  },
285
284
  hideQuickPick: function (f) {
@@ -1,15 +1,13 @@
1
1
  import * as React from 'react';
2
- import { IStartEnd, IStartDuration, IEndDuration, ICenterDuration, TimeUnit } from './TimeWindowUtils';
3
- import { DateUnit } from './TimeFilter/QuickSelects';
4
- export type ITimeFilter = IStartEnd | IStartDuration | IEndDuration | ICenterDuration;
5
- export declare function getTimeWindow(flt: ITimeFilter, format?: string): {
6
- center: string;
2
+ import { IStartEnd, IStartDuration, IEndDuration, TimeUnit } from './TimeWindowUtils';
3
+ import { DateUnit } from './QuickSelects';
4
+ interface ITimeWindow {
7
5
  start: string;
8
6
  end: string;
9
7
  unit: TimeUnit;
10
8
  duration: number;
11
- halfDuration: number;
12
- };
9
+ }
10
+ export type ITimeFilter = IStartEnd | IStartDuration | IEndDuration;
13
11
  /**
14
12
  * filter: an interface of IStartEnd | IStartDuration | IEndDuration | ICenterDuration
15
13
  * showQuickSelect: displays Quick Select component
@@ -17,12 +15,14 @@ export declare function getTimeWindow(flt: ITimeFilter, format?: string): {
17
15
  */
18
16
  interface IProps {
19
17
  filter: ITimeFilter;
20
- setFilter: (center: string, start: string, end: string, unit: TimeUnit, duration: number) => void;
18
+ setFilter: (start: string, end: string, unit: TimeUnit, duration: number) => void;
21
19
  showQuickSelect: boolean;
22
- dateTimeSetting: 'center' | 'startWindow' | 'endWindow' | 'startEnd';
20
+ dateTimeSetting: 'startWindow' | 'endWindow' | 'startEnd';
23
21
  timeZone: string;
24
22
  isHorizontal: boolean;
25
23
  format?: DateUnit;
24
+ showHelpMessage?: boolean;
26
25
  }
27
26
  declare const TimeFilter: (props: IProps) => React.JSX.Element;
27
+ export declare function getTimeWindowFromFilter(flt: ITimeFilter, format?: string): ITimeWindow;
28
28
  export default TimeFilter;
@@ -0,0 +1,224 @@
1
+ "use strict";
2
+ //******************************************************************************************************
3
+ // TimeFilter.tsx - Gbtc
4
+ //
5
+ // Copyright © 2020, Grid Protection Alliance. All Rights Reserved.
6
+ //
7
+ // Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
8
+ // the NOTICE file distributed with this work for additional information regarding copyright ownership.
9
+ // The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
10
+ // file except in compliance with the License. You may obtain a copy of the License at:
11
+ //
12
+ // http://opensource.org/licenses/MIT
13
+ //
14
+ // Unless agreed to in writing, the subject software distributed under the License is distributed on an
15
+ // "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
16
+ // License for the specific language governing permissions and limitations.
17
+ //
18
+ // Code Modification History:
19
+ // ----------------------------------------------------------------------------------------------------
20
+ // 09/16/2021 - Christoph Lackner
21
+ // Generated original version of source code.
22
+ // 06/20/2024 - Ali Karrar
23
+ // Moved TimeFilter from SEBrowser to gemstone
24
+ //******************************************************************************************************
25
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
26
+ if (k2 === undefined) k2 = k;
27
+ var desc = Object.getOwnPropertyDescriptor(m, k);
28
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
29
+ desc = { enumerable: true, get: function() { return m[k]; } };
30
+ }
31
+ Object.defineProperty(o, k2, desc);
32
+ }) : (function(o, m, k, k2) {
33
+ if (k2 === undefined) k2 = k;
34
+ o[k2] = m[k];
35
+ }));
36
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
37
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
38
+ }) : function(o, v) {
39
+ o["default"] = v;
40
+ });
41
+ var __importStar = (this && this.__importStar) || function (mod) {
42
+ if (mod && mod.__esModule) return mod;
43
+ var result = {};
44
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
45
+ __setModuleDefault(result, mod);
46
+ return result;
47
+ };
48
+ var __importDefault = (this && this.__importDefault) || function (mod) {
49
+ return (mod && mod.__esModule) ? mod : { "default": mod };
50
+ };
51
+ Object.defineProperty(exports, "__esModule", { value: true });
52
+ exports.getTimeWindowFromFilter = getTimeWindowFromFilter;
53
+ var React = __importStar(require("react"));
54
+ var react_forms_1 = require("@gpa-gemstone/react-forms");
55
+ var TimeWindowUtils_1 = require("./TimeWindowUtils");
56
+ var moment_1 = __importDefault(require("moment"));
57
+ var QuickSelects_1 = require("./QuickSelects");
58
+ var lodash_1 = __importDefault(require("lodash"));
59
+ var TimeFilter = function (props) {
60
+ var _a, _b, _c, _d;
61
+ var format = (0, QuickSelects_1.getFormat)(props.format);
62
+ var QuickSelects = React.useMemo(function () { return QuickSelects_1.AvailableQuickSelects.filter(function (qs) { return !qs.hideQuickPick(props.format); }); }, [props.format]);
63
+ var _e = React.useState(-1), activeQP = _e[0], setActiveQP = _e[1];
64
+ var _f = React.useState(getTimeWindowFromFilter(props.filter, format)), filter = _f[0], setFilter = _f[1];
65
+ // Checks typing of ITimeFilter and then compares to ITimeWindow
66
+ function isEqual(timeWindow, timeFilter) {
67
+ var flt = getTimeWindowFromFilter(timeFilter, format);
68
+ return lodash_1.default.isEqual(timeWindow, flt);
69
+ }
70
+ React.useEffect(function () {
71
+ if (!isEqual(filter, props.filter)) {
72
+ props.setFilter(filter.start, filter.end, filter.unit, filter.duration);
73
+ }
74
+ }, [filter]);
75
+ React.useEffect(function () {
76
+ if (!isEqual(filter, props.filter)) {
77
+ var flt = getTimeWindowFromFilter(props.filter, format);
78
+ setFilter(flt);
79
+ }
80
+ }, [props.filter]);
81
+ return (React.createElement("fieldset", { className: "border", style: { padding: '10px', height: '100%', overflow: 'hidden' } },
82
+ React.createElement("legend", { className: "w-auto", style: { fontSize: 'large' } }, "Date/Time Filter:"),
83
+ React.createElement(Row, { addRow: props.isHorizontal, class: 'm-0' },
84
+ props.dateTimeSetting === 'startWindow' || props.dateTimeSetting === 'startEnd' ?
85
+ React.createElement(Row, { addRow: !props.isHorizontal, class: 'm-0' },
86
+ React.createElement("div", { className: props.isHorizontal ? (props.showQuickSelect ? props.dateTimeSetting === 'startEnd' ? 'col-2' : 'col-4' : 'col-6') : 'col-12 p-0' },
87
+ React.createElement(react_forms_1.DatePicker, { Record: filter, Field: "start", Help: ((_a = props.showHelpMessage) !== null && _a !== void 0 ? _a : true) ? "All times are in system time. System time is currently set to ".concat(props.timeZone, ". ") : undefined, Setter: function (r) {
88
+ var flt = props.dateTimeSetting === 'startWindow' ?
89
+ getTimeWindowFromFilter({ start: r.start, duration: r.duration, unit: r.unit }, format) :
90
+ getTimeWindowFromFilter({ start: r.start, end: r.end }, format);
91
+ setFilter(flt);
92
+ setActiveQP(-1);
93
+ }, Label: 'Start of Time Window:', Type: (_b = props.format) !== null && _b !== void 0 ? _b : 'datetime-local', Valid: function () { return true; }, Format: format }),
94
+ props.showQuickSelect && props.dateTimeSetting === 'startWindow' ?
95
+ React.createElement(StartWindowForm, { IsHorizontal: props.isHorizontal, Filter: filter, SetFilter: setFilter, SetActiveQP: setActiveQP, Format: format, ShowQuickSelect: props.showQuickSelect })
96
+ : null))
97
+ : null,
98
+ props.dateTimeSetting === 'endWindow' || props.dateTimeSetting === 'startEnd' ?
99
+ React.createElement(Row, { addRow: !props.isHorizontal, class: 'm-0' },
100
+ React.createElement("div", { className: props.isHorizontal ? (props.showQuickSelect ? props.dateTimeSetting === 'startEnd' ? 'col-2' : 'col-4' : 'col-6') : 'col-12 p-0' },
101
+ React.createElement(react_forms_1.DatePicker, { Record: filter, Field: "end", Help: ((_c = props.showHelpMessage) !== null && _c !== void 0 ? _c : true) ? "All times are in system time. System time is currently set to ".concat(props.timeZone, ". ") : undefined, Setter: function (r) {
102
+ var flt = props.dateTimeSetting === 'endWindow' ?
103
+ getTimeWindowFromFilter({ end: r.end, duration: r.duration, unit: r.unit }, format) :
104
+ getTimeWindowFromFilter({ start: r.start, end: r.end }, format);
105
+ setFilter(flt);
106
+ setActiveQP(-1);
107
+ }, Label: 'End of Time Window :', Type: (_d = props.format) !== null && _d !== void 0 ? _d : 'datetime-local', Valid: function () { return true; }, Format: format }),
108
+ props.showQuickSelect && props.dateTimeSetting === 'endWindow' ?
109
+ React.createElement(EndWindowForm, { IsHorizontal: props.isHorizontal, Filter: filter, SetFilter: setFilter, SetActiveQP: setActiveQP, Format: format, ShowQuickSelect: props.showQuickSelect })
110
+ : null))
111
+ : null,
112
+ props.dateTimeSetting === 'startWindow' && !props.showQuickSelect ?
113
+ React.createElement(StartWindowForm, { IsHorizontal: props.isHorizontal, Filter: filter, SetFilter: setFilter, SetActiveQP: setActiveQP, Format: format, ShowQuickSelect: props.showQuickSelect })
114
+ : null,
115
+ props.dateTimeSetting === 'endWindow' && !props.showQuickSelect ?
116
+ React.createElement(EndWindowForm, { IsHorizontal: props.isHorizontal, Filter: filter, SetFilter: setFilter, SetActiveQP: setActiveQP, Format: format, ShowQuickSelect: props.showQuickSelect })
117
+ : null,
118
+ props.showQuickSelect ?
119
+ React.createElement("div", { className: props.isHorizontal ? "col-8 ".concat(props.dateTimeSetting !== 'startEnd' ? 'pt-3' : '') : 'row m-0 flex-grow-1' },
120
+ React.createElement(Row, { addRow: props.isHorizontal, class: "m-0 justify-content-center align-items-center" }, QuickSelects.map(function (qs, i) {
121
+ if (i % 3 !== 0)
122
+ return null;
123
+ return (React.createElement("div", { key: i, className: props.isHorizontal && props.dateTimeSetting === 'startEnd' ? 'col-2' : "col-4", style: { paddingLeft: (props.isHorizontal && props.dateTimeSetting === 'startEnd' ? 0 : (i % 9 == 0 ? 15 : 0)), paddingRight: (props.isHorizontal && props.dateTimeSetting === 'startEnd' ? 2 : ((i % 18 == 6 || i % 18 == 15) ? 15 : 2)), marginTop: 10 } },
124
+ React.createElement("ul", { className: "list-group", key: i },
125
+ React.createElement("li", { key: i, style: { cursor: 'pointer' }, onClick: function () {
126
+ var flt = getTimeWindowFromFilter(QuickSelects[i].createFilter(props.timeZone, props.format), format);
127
+ props.setFilter(flt.start, flt.end, flt.unit, flt.duration);
128
+ setActiveQP(i);
129
+ }, className: "item badge badge-" + (i == activeQP ? "primary" : "secondary") }, QuickSelects[i].label),
130
+ i + 1 < QuickSelects.length ?
131
+ React.createElement("li", { key: i + 1, style: { marginTop: 3, cursor: 'pointer' }, className: "item badge badge-" + (i + 1 == activeQP ? "primary" : "secondary"), onClick: function () {
132
+ var flt = getTimeWindowFromFilter(QuickSelects[i + 1].createFilter(props.timeZone, props.format), format);
133
+ props.setFilter(flt.start, flt.end, flt.unit, flt.duration);
134
+ setActiveQP(i + 1);
135
+ } }, QuickSelects[i + 1].label)
136
+ : null,
137
+ i + 2 < QuickSelects.length ?
138
+ React.createElement("li", { key: i + 2, style: { marginTop: 3, cursor: 'pointer' }, className: "item badge badge-" + (i + 2 == activeQP ? "primary" : "secondary"), onClick: function () {
139
+ var flt = getTimeWindowFromFilter(QuickSelects[i + 2].createFilter(props.timeZone, props.format), format);
140
+ props.setFilter(flt.start, flt.end, flt.unit, flt.duration);
141
+ setActiveQP(i + 2);
142
+ } }, QuickSelects[i + 2].label)
143
+ : null)));
144
+ })))
145
+ : null)));
146
+ };
147
+ var StartWindowForm = function (props) {
148
+ return (React.createElement(Row, { addRow: !props.IsHorizontal, class: 'm-0' },
149
+ React.createElement("div", { className: props.IsHorizontal ? props.ShowQuickSelect ? 'col-12 p-0' : 'col-6' : 'col-12 p-0' },
150
+ React.createElement("div", { className: 'form-group' },
151
+ React.createElement("label", { style: { width: '100%', position: 'relative', float: "left" } }, "Time Window(+): "),
152
+ React.createElement("div", { className: 'row' },
153
+ React.createElement("div", { className: 'col-6' },
154
+ React.createElement(react_forms_1.Input, { Record: props.Filter, Field: 'duration', Label: '', Valid: function () { return true; }, Type: 'number', Setter: function (r) {
155
+ props.SetFilter(getTimeWindowFromFilter({ start: r.start, duration: r.duration, unit: r.unit }, props.Format));
156
+ props.SetActiveQP(-1);
157
+ } })),
158
+ React.createElement("div", { className: 'col-6' },
159
+ React.createElement(react_forms_1.Select, { Record: props.Filter, Label: '', Field: 'unit', Options: TimeWindowUtils_1.units.map(function (unit) { return ({ Value: unit, Label: (0, TimeWindowUtils_1.readableUnit)(unit) }); }), Setter: function (r) {
160
+ props.SetFilter(getTimeWindowFromFilter({ start: r.start, duration: r.duration, unit: r.unit }, props.Format));
161
+ props.SetActiveQP(-1);
162
+ } })))))));
163
+ };
164
+ var EndWindowForm = function (props) {
165
+ return (React.createElement(Row, { addRow: !props.IsHorizontal, class: 'm-0' },
166
+ React.createElement("div", { className: props.IsHorizontal ? props.ShowQuickSelect ? 'col-12 p-0' : 'col-6' : 'col-12 p-0' },
167
+ React.createElement("div", { className: 'form-group' },
168
+ React.createElement("label", { style: { width: '100%', position: 'relative', float: "left" } }, "Time Window(-): "),
169
+ React.createElement("div", { className: 'row' },
170
+ React.createElement("div", { className: 'col-6' },
171
+ React.createElement(react_forms_1.Input, { Record: props.Filter, Field: 'duration', Label: '', Valid: function () { return true; }, Type: 'number', Setter: function (r) {
172
+ props.SetFilter(getTimeWindowFromFilter({ end: r.end, duration: r.duration, unit: r.unit }, props.Format));
173
+ props.SetActiveQP(-1);
174
+ } })),
175
+ React.createElement("div", { className: 'col-6' },
176
+ React.createElement(react_forms_1.Select, { Record: props.Filter, Label: '', Field: 'unit', Options: TimeWindowUtils_1.units.map(function (unit) { return ({ Value: unit, Label: (0, TimeWindowUtils_1.readableUnit)(unit) }); }), Setter: function (r) {
177
+ props.SetFilter(getTimeWindowFromFilter({ end: r.end, duration: r.duration, unit: r.unit }, props.Format));
178
+ props.SetActiveQP(-1);
179
+ } })))))));
180
+ };
181
+ // Returns a row div element with props as children of row
182
+ function Row(props) {
183
+ var _a;
184
+ if (props.addRow) {
185
+ return React.createElement("div", { className: "row ".concat((_a = props.class) !== null && _a !== void 0 ? _a : '') }, props.children);
186
+ }
187
+ return React.createElement(React.Fragment, null, props.children);
188
+ }
189
+ // Converts ITimeFilter to an ITimeWindow filter
190
+ function getTimeWindowFromFilter(flt, format) {
191
+ var start;
192
+ var end;
193
+ var unit;
194
+ var duration;
195
+ var formatFunction = function (start, end, unit, duration) { return ({
196
+ start: start.format(format),
197
+ end: end.format(format),
198
+ unit: unit,
199
+ duration: duration,
200
+ }); };
201
+ if ('start' in flt && 'duration' in flt) { // type is IStartDuration
202
+ start = (0, moment_1.default)(flt.start, format);
203
+ duration = flt.duration;
204
+ unit = flt.unit;
205
+ end = (0, TimeWindowUtils_1.addDuration)(start, duration, unit);
206
+ return formatFunction(start, end, unit, duration);
207
+ }
208
+ if ('end' in flt && 'duration' in flt) { // type is IEndDuration
209
+ end = (0, moment_1.default)(flt.end, format);
210
+ duration = flt.duration;
211
+ unit = flt.unit;
212
+ start = (0, TimeWindowUtils_1.addDuration)(end, -duration, unit);
213
+ return formatFunction(start, end, unit, duration);
214
+ }
215
+ if ('start' in flt && 'end' in flt) { // type is IStartEnd
216
+ start = (0, moment_1.default)(flt.start, format);
217
+ end = (0, moment_1.default)(flt.end, format);
218
+ unit = (0, TimeWindowUtils_1.findAppropriateUnit)(start, end);
219
+ duration = end.diff(start, unit);
220
+ return formatFunction(start, end, unit, duration);
221
+ }
222
+ throw TypeError("Unexpected type in getTimeWindowFromFilter, filter is: ".concat(flt.toString()));
223
+ }
224
+ exports.default = TimeFilter;
@@ -1,26 +1,38 @@
1
1
  import moment from 'moment';
2
+ /**
3
+ * Interface represents picking a time based on Start Date and End Date
4
+ */
2
5
  export interface IStartEnd {
3
6
  start: string;
4
7
  end: string;
5
8
  }
9
+ /**
10
+ * Interface represents picking a time based on Start Date and Duration
11
+ */
6
12
  export interface IStartDuration {
7
13
  start: string;
8
14
  duration: number;
9
15
  unit: TimeUnit;
10
16
  }
17
+ /**
18
+ * Interface represents picking a time based on End Date and Duration
19
+ */
11
20
  export interface IEndDuration {
12
21
  end: string;
13
22
  duration: number;
14
23
  unit: TimeUnit;
15
24
  }
16
- export interface ICenterDuration {
17
- center: string;
18
- halfDuration: number;
19
- unit: TimeUnit;
20
- }
21
25
  export type TimeUnit = 'y' | 'M' | 'w' | 'd' | 'h' | 'm' | 's' | 'ms';
22
26
  export declare const units: TimeUnit[];
23
- export declare function findAppropriateUnit(startTime: moment.Moment, endTime: moment.Moment, unit?: TimeUnit, useHalfWindow?: boolean): [TimeUnit, number];
27
+ export declare const dateTimeFormat = "DD MM YYYY hh:mm:ss.SSS";
28
+ /**
29
+ * A Function to determine the most appropriate unit for a window of time specified by start and end time
30
+ */
31
+ export declare function findAppropriateUnit(startTime: moment.Moment, endTime: moment.Moment): TimeUnit;
32
+ /**
33
+ * Function to handle adding or subtracting duration
34
+ */
24
35
  export declare function getStartEndTime(center: moment.Moment, duration: number, unit: TimeUnit): [moment.Moment, moment.Moment];
36
+ export declare function addDuration(start: moment.Moment, duration: number, unit: TimeUnit): moment.Moment;
25
37
  export declare function getMoment(date: string, format?: string, time?: string): moment.Moment;
26
38
  export declare function readableUnit(unit: TimeUnit): "Year(s)" | "Month(s)" | "Week(s)" | "Day(s)" | "Hour(s)" | "Minute(s)" | "Second(s)" | "Millisecond(s)";
@@ -3,9 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.units = void 0;
6
+ exports.dateTimeFormat = exports.units = void 0;
7
7
  exports.findAppropriateUnit = findAppropriateUnit;
8
8
  exports.getStartEndTime = getStartEndTime;
9
+ exports.addDuration = addDuration;
9
10
  exports.getMoment = getMoment;
10
11
  exports.readableUnit = readableUnit;
11
12
  //******************************************************************************************************
@@ -33,47 +34,49 @@ exports.readableUnit = readableUnit;
33
34
  //******************************************************************************************************
34
35
  var moment_1 = __importDefault(require("moment"));
35
36
  exports.units = ['ms', 's', 'm', 'h', 'd', 'w', 'M', 'y'];
36
- /*
37
+ exports.dateTimeFormat = 'DD MM YYYY hh:mm:ss.SSS';
38
+ /**
37
39
  * A Function to determine the most appropriate unit for a window of time specified by start and end time
38
40
  */
39
- function findAppropriateUnit(startTime, endTime, unit, useHalfWindow) {
40
- var unitIndex = exports.units.findIndex(function (u) { return u == unit; });
41
- if (unit === undefined)
42
- unitIndex = 7;
41
+ function findAppropriateUnit(startTime, endTime) {
42
+ var unitIndex = 7;
43
43
  var diff = endTime.diff(startTime, exports.units[unitIndex], true);
44
- if (useHalfWindow !== undefined && useHalfWindow)
45
- diff = diff / 2;
46
44
  for (var i = unitIndex; i >= 1; i--) {
47
- if (i == 6) // Remove month as appropriate due to innacuracy in definition (31/30/28/29 days)
48
- continue;
49
45
  if (Number.isInteger(diff)) {
50
- return [exports.units[i], diff];
46
+ return exports.units[i];
51
47
  }
52
48
  var nextI = i - 1;
53
- if (nextI == 6)
54
- nextI = 5;
55
49
  diff = endTime.diff(startTime, exports.units[nextI], true);
56
- if (useHalfWindow !== undefined && useHalfWindow)
57
- diff = diff / 2;
58
50
  if (diff > 65000) {
59
51
  diff = endTime.diff(startTime, exports.units[i], true);
60
- if (useHalfWindow !== undefined && useHalfWindow)
61
- diff = diff / 2;
62
- return [exports.units[i], Math.round(diff)];
52
+ return exports.units[i];
63
53
  }
64
54
  }
65
- return [exports.units[0], Math.round(diff)];
55
+ return exports.units[0];
66
56
  }
67
- /*
68
- * Determines a start time and end time for a window given by center time and duration
57
+ /**
58
+ * Function to handle adding or subtracting duration
69
59
  */
70
60
  function getStartEndTime(center, duration, unit) {
71
- var d = moment_1.default.duration(duration, unit);
72
- var start = center.clone().subtract(d.asHours(), 'h');
73
- var end = center.clone().add(d.asHours(), 'h');
61
+ var start = addDuration(center, -duration, unit);
62
+ var end = addDuration(center, duration, unit);
74
63
  return [start, end];
75
64
  }
76
65
  /*
66
+ * Function to handle adding or subtracting duration
67
+ */
68
+ function addDuration(start, duration, unit) {
69
+ var t1 = start.clone();
70
+ var floor = duration > 0 ? Math.floor(duration) : Math.ceil(duration); // if duration is negative, use Math.ceil() to get the floor
71
+ var ceil = duration > 0 ? Math.ceil(duration) : Math.floor(duration); // if duration is negative, use Math.floor() to get the ceil
72
+ if (floor == ceil && exports.units.findIndex(function (u) { return u == unit; }) >= 4) // if duration is integer, add duration without modifying
73
+ return t1.add(duration, unit);
74
+ t1.add(floor, unit);
75
+ var t2 = t1.clone().add(Math.sign(duration), unit); // Adds a duration of 1 or -1 depending on the sign of input duration
76
+ var hours = t2.diff(t1, 'h', true) * Math.abs(duration - floor); // Calculates the difference in hours between t2 and t1 and adds to t1
77
+ return t1.add(hours, 'h');
78
+ }
79
+ /*
77
80
  * Returns a formatted version of date and time provided
78
81
  */
79
82
  function getMoment(date, format, time) {
package/lib/index.d.ts CHANGED
@@ -8,8 +8,9 @@ import { DefaultSearch } from './SearchBar';
8
8
  import SelectPopup from './StandardSelectPopup';
9
9
  import { DefaultSelects } from './SelectionPopup';
10
10
  import ErrorBoundary from './ErrorBoundary';
11
- import TimeFilter from './TimeFilter';
11
+ import TimeFilter from './TimeFilter/TimeFilter';
12
12
  import EventTypeFilter from './EventTypeFilter';
13
13
  import EventCharacteristicFilter from './EventCharacteristicFilter';
14
14
  import NavBarFilterButton from './NavBarFilterButton';
15
- export { TimeFilter, EventTypeFilter, EventCharacteristicFilter, NavBarFilterButton, Setting, Note, ValueList, ByValueList, User, ByUser, DefaultSearch, SelectPopup, DefaultSelects, ErrorBoundary };
15
+ import * as TimeWindowUtils from './TimeFilter/TimeWindowUtils';
16
+ export { TimeFilter, TimeWindowUtils, EventTypeFilter, EventCharacteristicFilter, NavBarFilterButton, Setting, Note, ValueList, ByValueList, User, ByUser, DefaultSearch, SelectPopup, DefaultSelects, ErrorBoundary };
package/lib/index.js CHANGED
@@ -21,11 +21,34 @@
21
21
  // Generated original version of source code.
22
22
  //
23
23
  // ******************************************************************************************************
24
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
25
+ if (k2 === undefined) k2 = k;
26
+ var desc = Object.getOwnPropertyDescriptor(m, k);
27
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
28
+ desc = { enumerable: true, get: function() { return m[k]; } };
29
+ }
30
+ Object.defineProperty(o, k2, desc);
31
+ }) : (function(o, m, k, k2) {
32
+ if (k2 === undefined) k2 = k;
33
+ o[k2] = m[k];
34
+ }));
35
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
36
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
37
+ }) : function(o, v) {
38
+ o["default"] = v;
39
+ });
40
+ var __importStar = (this && this.__importStar) || function (mod) {
41
+ if (mod && mod.__esModule) return mod;
42
+ var result = {};
43
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
44
+ __setModuleDefault(result, mod);
45
+ return result;
46
+ };
24
47
  var __importDefault = (this && this.__importDefault) || function (mod) {
25
48
  return (mod && mod.__esModule) ? mod : { "default": mod };
26
49
  };
27
50
  Object.defineProperty(exports, "__esModule", { value: true });
28
- exports.ErrorBoundary = exports.DefaultSelects = exports.SelectPopup = exports.DefaultSearch = exports.ByUser = exports.User = exports.ByValueList = exports.ValueList = exports.Note = exports.Setting = exports.NavBarFilterButton = exports.EventCharacteristicFilter = exports.EventTypeFilter = exports.TimeFilter = void 0;
51
+ exports.ErrorBoundary = exports.DefaultSelects = exports.SelectPopup = exports.DefaultSearch = exports.ByUser = exports.User = exports.ByValueList = exports.ValueList = exports.Note = exports.Setting = exports.NavBarFilterButton = exports.EventCharacteristicFilter = exports.EventTypeFilter = exports.TimeWindowUtils = exports.TimeFilter = void 0;
29
52
  var Setting_1 = __importDefault(require("./Setting"));
30
53
  exports.Setting = Setting_1.default;
31
54
  var Note_1 = __importDefault(require("./Note"));
@@ -46,7 +69,7 @@ var SelectionPopup_1 = require("./SelectionPopup");
46
69
  Object.defineProperty(exports, "DefaultSelects", { enumerable: true, get: function () { return SelectionPopup_1.DefaultSelects; } });
47
70
  var ErrorBoundary_1 = __importDefault(require("./ErrorBoundary"));
48
71
  exports.ErrorBoundary = ErrorBoundary_1.default;
49
- var TimeFilter_1 = __importDefault(require("./TimeFilter"));
72
+ var TimeFilter_1 = __importDefault(require("./TimeFilter/TimeFilter"));
50
73
  exports.TimeFilter = TimeFilter_1.default;
51
74
  var EventTypeFilter_1 = __importDefault(require("./EventTypeFilter"));
52
75
  exports.EventTypeFilter = EventTypeFilter_1.default;
@@ -54,3 +77,5 @@ var EventCharacteristicFilter_1 = __importDefault(require("./EventCharacteristic
54
77
  exports.EventCharacteristicFilter = EventCharacteristicFilter_1.default;
55
78
  var NavBarFilterButton_1 = __importDefault(require("./NavBarFilterButton"));
56
79
  exports.NavBarFilterButton = NavBarFilterButton_1.default;
80
+ var TimeWindowUtils = __importStar(require("./TimeFilter/TimeWindowUtils"));
81
+ exports.TimeWindowUtils = TimeWindowUtils;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gpa-gemstone/common-pages",
3
- "version": "0.0.117",
3
+ "version": "0.0.119",
4
4
  "description": "Common UI pages for GPA products",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -44,12 +44,12 @@
44
44
  "typescript": "5.5.3"
45
45
  },
46
46
  "dependencies": {
47
- "@gpa-gemstone/application-typings": "0.0.76",
48
- "@gpa-gemstone/gpa-symbols": "0.0.41",
49
- "@gpa-gemstone/helper-functions": "0.0.34",
50
- "@gpa-gemstone/react-forms": "1.1.71",
51
- "@gpa-gemstone/react-interactive": "1.0.131",
52
- "@gpa-gemstone/react-table": "1.2.53",
47
+ "@gpa-gemstone/application-typings": "0.0.77",
48
+ "@gpa-gemstone/gpa-symbols": "0.0.42",
49
+ "@gpa-gemstone/helper-functions": "0.0.35",
50
+ "@gpa-gemstone/react-forms": "1.1.73",
51
+ "@gpa-gemstone/react-interactive": "1.0.133",
52
+ "@gpa-gemstone/react-table": "1.2.55",
53
53
  "@reduxjs/toolkit": "1.8.3",
54
54
  "crypto-js": "^4.2.0",
55
55
  "moment": "^2.29.4",
package/lib/TimeFilter.js DELETED
@@ -1,273 +0,0 @@
1
- "use strict";
2
- //******************************************************************************************************
3
- // TimeFilter.tsx - Gbtc
4
- //
5
- // Copyright © 2020, Grid Protection Alliance. All Rights Reserved.
6
- //
7
- // Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
8
- // the NOTICE file distributed with this work for additional information regarding copyright ownership.
9
- // The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
10
- // file except in compliance with the License. You may obtain a copy of the License at:
11
- //
12
- // http://opensource.org/licenses/MIT
13
- //
14
- // Unless agreed to in writing, the subject software distributed under the License is distributed on an
15
- // "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
16
- // License for the specific language governing permissions and limitations.
17
- //
18
- // Code Modification History:
19
- // ----------------------------------------------------------------------------------------------------
20
- // 09/16/2021 - Christoph Lackner
21
- // Generated original version of source code.
22
- // 06/20/2024 - Ali Karrar
23
- // Moved TimeFilter from SEBrowser to gemstone
24
- //******************************************************************************************************
25
- var __assign = (this && this.__assign) || function () {
26
- __assign = Object.assign || function(t) {
27
- for (var s, i = 1, n = arguments.length; i < n; i++) {
28
- s = arguments[i];
29
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
30
- t[p] = s[p];
31
- }
32
- return t;
33
- };
34
- return __assign.apply(this, arguments);
35
- };
36
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
37
- if (k2 === undefined) k2 = k;
38
- var desc = Object.getOwnPropertyDescriptor(m, k);
39
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
40
- desc = { enumerable: true, get: function() { return m[k]; } };
41
- }
42
- Object.defineProperty(o, k2, desc);
43
- }) : (function(o, m, k, k2) {
44
- if (k2 === undefined) k2 = k;
45
- o[k2] = m[k];
46
- }));
47
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
48
- Object.defineProperty(o, "default", { enumerable: true, value: v });
49
- }) : function(o, v) {
50
- o["default"] = v;
51
- });
52
- var __importStar = (this && this.__importStar) || function (mod) {
53
- if (mod && mod.__esModule) return mod;
54
- var result = {};
55
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
56
- __setModuleDefault(result, mod);
57
- return result;
58
- };
59
- var __importDefault = (this && this.__importDefault) || function (mod) {
60
- return (mod && mod.__esModule) ? mod : { "default": mod };
61
- };
62
- Object.defineProperty(exports, "__esModule", { value: true });
63
- exports.getTimeWindow = getTimeWindow;
64
- var React = __importStar(require("react"));
65
- var moment_1 = __importDefault(require("moment"));
66
- var react_forms_1 = require("@gpa-gemstone/react-forms");
67
- var TimeWindowUtils_1 = require("./TimeWindowUtils");
68
- var QuickSelects_1 = require("./TimeFilter/QuickSelects");
69
- // Converts ITimeFilter to an ITimeWindow filter
70
- function getTimeWindow(flt, format) {
71
- var _a, _b;
72
- var _c, _d, _e;
73
- var center, start, end, unit, duration, halfDuration;
74
- if ('center' in flt && 'halfDuration' in flt) { // type is ICenterDuration
75
- center = (0, TimeWindowUtils_1.getMoment)(flt.center, format);
76
- _a = (0, TimeWindowUtils_1.getStartEndTime)(center, flt.halfDuration, flt.unit), start = _a[0], end = _a[1];
77
- unit = flt.unit;
78
- halfDuration = flt.halfDuration;
79
- duration = halfDuration * 2;
80
- }
81
- else if ('start' in flt && 'duration' in flt) { // type is IStartDuration
82
- start = (0, TimeWindowUtils_1.getMoment)(flt.start, format);
83
- var d = moment_1.default.duration(flt.duration / 2.0, flt.unit);
84
- center = start.clone().add(d);
85
- end = center.clone().add(d);
86
- unit = flt.unit;
87
- duration = flt.duration,
88
- halfDuration = duration / 2.0;
89
- }
90
- else if ('end' in flt && 'duration' in flt) { // type is IEndDuration
91
- end = (0, TimeWindowUtils_1.getMoment)(flt.end, format);
92
- var d = moment_1.default.duration(flt.duration / 2.0, flt.unit);
93
- center = end.clone().subtract(d);
94
- start = center.clone().subtract(d);
95
- unit = flt.unit;
96
- duration = flt.duration,
97
- halfDuration = duration / 2.0;
98
- }
99
- else if ('start' in flt && 'end' in flt) { // type is IStartEnd
100
- start = (0, TimeWindowUtils_1.getMoment)(flt.start, format);
101
- end = (0, TimeWindowUtils_1.getMoment)(flt.end, format);
102
- _b = (0, TimeWindowUtils_1.findAppropriateUnit)(start, end, undefined, true), unit = _b[0], halfDuration = _b[1];
103
- var d = moment_1.default.duration(halfDuration, unit);
104
- center = start.clone().add(d);
105
- duration = halfDuration * 2;
106
- }
107
- return { center: (_c = center === null || center === void 0 ? void 0 : center.format(format)) !== null && _c !== void 0 ? _c : '',
108
- start: (_d = start === null || start === void 0 ? void 0 : start.format(format)) !== null && _d !== void 0 ? _d : '',
109
- end: (_e = end === null || end === void 0 ? void 0 : end.format(format)) !== null && _e !== void 0 ? _e : '',
110
- unit: unit !== null && unit !== void 0 ? unit : 'ms',
111
- duration: duration !== null && duration !== void 0 ? duration : 0,
112
- halfDuration: halfDuration !== null && halfDuration !== void 0 ? halfDuration : 0 };
113
- }
114
- // Returns a row div element with props as children of row
115
- function Row(props) {
116
- var _a;
117
- if (props.addRow) {
118
- return React.createElement("div", { className: "row ".concat((_a = props.class) !== null && _a !== void 0 ? _a : '') }, props.children);
119
- }
120
- return React.createElement(React.Fragment, null, props.children);
121
- }
122
- var TimeFilter = function (props) {
123
- var _a, _b, _c;
124
- var format = (0, QuickSelects_1.getFormat)(props.format);
125
- var QuickSelects = React.useMemo(function () { return QuickSelects_1.AvailableQuickSelects.filter(function (qs) { return !qs.hideQuickPick(props.format); }); }, [props.format]);
126
- var _d = React.useState(-1), activeQP = _d[0], setActiveQP = _d[1];
127
- var _e = React.useState(getTimeWindow(props.filter, format)), filter = _e[0], setFilter = _e[1];
128
- React.useEffect(function () {
129
- if (!isEqual(filter, props.filter))
130
- props.setFilter(filter.center, filter.start, filter.end, filter.unit, filter.duration);
131
- }, [filter]);
132
- //Checks typing of ITimeFilter and then compares to ITimeWindow
133
- function isEqual(flt1, flt2) {
134
- var flt = getTimeWindow(flt2, format);
135
- return flt1.center == flt.center &&
136
- flt1.unit == flt.unit &&
137
- flt1.duration == flt.duration;
138
- }
139
- React.useEffect(function () {
140
- if (!isEqual(filter, props.filter)) {
141
- var flt = getTimeWindow(props.filter, format);
142
- setFilter(flt);
143
- }
144
- }, [props.filter]);
145
- return (React.createElement("fieldset", { className: "border", style: { padding: '10px', height: '100%' } },
146
- React.createElement("legend", { className: "w-auto", style: { fontSize: 'large' } }, "Date/Time Filter:"),
147
- React.createElement(Row, { addRow: props.isHorizontal },
148
- props.dateTimeSetting === 'center' ?
149
- React.createElement(Row, { addRow: !props.isHorizontal },
150
- React.createElement("div", { className: props.isHorizontal ? (props.showQuickSelect ? 'col-2' : 'col-6') : 'col-12' },
151
- React.createElement(react_forms_1.DatePicker, { Record: filter, Field: "center", Help: "All times are in system time. System time is currently set to ".concat(props.timeZone, ". "), Setter: function (r) {
152
- setFilter(function (prevFilter) { return (__assign(__assign({}, prevFilter), { center: r.center, start: r.start, end: r.end })); });
153
- setActiveQP(-1);
154
- }, Label: 'Time Window Center:', Type: (_a = props.format) !== null && _a !== void 0 ? _a : 'datetime-local', Valid: function () { return true; }, Format: format })))
155
- : null,
156
- props.dateTimeSetting === 'startWindow' || props.dateTimeSetting === 'startEnd' ?
157
- React.createElement(Row, { addRow: !props.isHorizontal },
158
- React.createElement("div", { className: props.isHorizontal ? (props.showQuickSelect ? 'col-2' : 'col-6') : 'col-12' },
159
- React.createElement(react_forms_1.DatePicker, { Record: filter, Field: "start", Help: "All times are in system time. System time is currently set to ".concat(props.timeZone, ". "), Setter: function (r) {
160
- var _a;
161
- var halfDur = filter.halfDuration;
162
- var unit = filter.unit;
163
- if (props.dateTimeSetting === 'startEnd') {
164
- _a = (0, TimeWindowUtils_1.findAppropriateUnit)((0, TimeWindowUtils_1.getMoment)(r.start, format), (0, TimeWindowUtils_1.getMoment)(filter.end, format), undefined, true), unit = _a[0], halfDur = _a[1];
165
- }
166
- var flt = getTimeWindow({ start: r.start, duration: halfDur * 2, unit: unit }, format);
167
- setFilter(flt);
168
- setActiveQP(-1);
169
- }, Label: 'Start of Time Window:', Type: (_b = props.format) !== null && _b !== void 0 ? _b : 'datetime-local', Valid: function () { return true; }, Format: format })))
170
- : null,
171
- props.dateTimeSetting === 'endWindow' || props.dateTimeSetting === 'startEnd' ?
172
- React.createElement(Row, { addRow: !props.isHorizontal },
173
- React.createElement("div", { className: props.isHorizontal ? (props.showQuickSelect ? 'col-2' : 'col-6') : 'col-12' },
174
- React.createElement(react_forms_1.DatePicker, { Record: filter, Field: "end", Help: "All times are in system time. System time is currently set to ".concat(props.timeZone, ". "), Setter: function (r) {
175
- var _a;
176
- var halfDur = filter.halfDuration;
177
- var unit = filter.unit;
178
- if (props.dateTimeSetting === 'startEnd') {
179
- _a = (0, TimeWindowUtils_1.findAppropriateUnit)((0, TimeWindowUtils_1.getMoment)(filter.start, format), (0, TimeWindowUtils_1.getMoment)(r.end, format), undefined, true), unit = _a[0], halfDur = _a[1];
180
- }
181
- var flt = getTimeWindow({ end: r.end, duration: halfDur * 2, unit: unit }, format);
182
- setFilter(flt);
183
- setActiveQP(-1);
184
- }, Label: 'End of Time Window :', Type: (_c = props.format) !== null && _c !== void 0 ? _c : 'datetime-local', Valid: function () { return true; }, Format: format })))
185
- : null,
186
- props.dateTimeSetting === 'center' ?
187
- React.createElement(React.Fragment, null,
188
- React.createElement("label", { style: { width: '100%', position: 'relative', float: "left" } }, "Time Window(+/-): "),
189
- React.createElement(Row, { addRow: !props.isHorizontal },
190
- React.createElement("div", { className: props.isHorizontal ? (props.showQuickSelect ? 'col-1' : 'col-3') : 'col-6' },
191
- React.createElement(react_forms_1.Input, { Record: filter, Field: 'halfDuration', Setter: function (r) {
192
- var flt = getTimeWindow({ center: filter.center, halfDuration: r.halfDuration, unit: filter.unit }, format);
193
- setFilter(function (prevFilter) { return (__assign(__assign({}, prevFilter), { duration: r.duration, halfDuration: r.halfDuration, start: flt.start, end: flt.end })); });
194
- setActiveQP(-1);
195
- }, Label: '', Valid: function () { return true; }, Type: 'number' })),
196
- React.createElement("div", { className: props.isHorizontal ? (props.showQuickSelect ? 'col-1' : 'col-3') : 'col-6' },
197
- React.createElement(react_forms_1.Select, { Record: filter, Label: '', Field: 'unit', Setter: function (r) {
198
- var flt = getTimeWindow({ center: filter.center, halfDuration: filter.halfDuration, unit: r.unit }, format);
199
- setFilter(function (prevFilter) { return (__assign(__assign({}, prevFilter), { unit: r.unit, start: flt.start, end: flt.end })); });
200
- setActiveQP(-1);
201
- }, Options: TimeWindowUtils_1.units.map(function (unit) { return ({
202
- Value: unit,
203
- Label: (0, TimeWindowUtils_1.readableUnit)(unit)
204
- }); }) }))))
205
- : null,
206
- props.dateTimeSetting === 'startWindow' ?
207
- React.createElement(React.Fragment, null,
208
- React.createElement("label", { style: { width: '100%', position: 'relative', float: "left" } }, "Time Window(+): "),
209
- React.createElement(Row, { addRow: !props.isHorizontal },
210
- React.createElement("div", { className: props.isHorizontal ? (props.showQuickSelect ? 'col-1' : 'col-3') : 'col-6' },
211
- React.createElement(react_forms_1.Input, { Record: filter, Field: 'duration', Setter: function (r) {
212
- var flt = getTimeWindow({ start: filter.start, duration: r.duration, unit: filter.unit }, format);
213
- setFilter(function (prevFilter) { return (__assign(__assign({}, prevFilter), { duration: r.duration, halfDuration: r.halfDuration, center: flt.center, end: flt.end })); });
214
- setActiveQP(-1);
215
- }, Label: '', Valid: function () { return true; }, Type: 'number' })),
216
- React.createElement("div", { className: props.isHorizontal ? (props.showQuickSelect ? 'col-1' : 'col-3') : 'col-6' },
217
- React.createElement(react_forms_1.Select, { Record: filter, Label: '', Field: 'unit', Setter: function (r) {
218
- var flt = getTimeWindow({ start: filter.start, duration: filter.duration, unit: r.unit }, format);
219
- setFilter(function (prevFilter) { return (__assign(__assign({}, prevFilter), { unit: r.unit, center: flt.center, end: flt.end })); });
220
- setActiveQP(-1);
221
- }, Options: TimeWindowUtils_1.units.map(function (unit) { return ({
222
- Value: unit,
223
- Label: (0, TimeWindowUtils_1.readableUnit)(unit)
224
- }); }) }))))
225
- : null,
226
- props.dateTimeSetting === 'endWindow' ?
227
- React.createElement(React.Fragment, null,
228
- React.createElement("label", { style: { width: '100%', position: 'relative', float: "left" } }, "Time Window(-): "),
229
- React.createElement(Row, { addRow: !props.isHorizontal },
230
- React.createElement("div", { className: props.isHorizontal ? (props.showQuickSelect ? 'col-1' : 'col-3') : 'col-6' },
231
- React.createElement(react_forms_1.Input, { Record: filter, Field: 'duration', Setter: function (r) {
232
- var flt = getTimeWindow({ end: filter.end, duration: r.duration, unit: filter.unit }, format);
233
- setFilter(function (prevFilter) { return (__assign(__assign({}, prevFilter), { duration: r.duration, halfDuration: r.halfDuration, center: flt.center, start: flt.start })); });
234
- setActiveQP(-1);
235
- }, Label: '', Valid: function () { return true; }, Type: 'number' })),
236
- React.createElement("div", { className: props.isHorizontal ? (props.showQuickSelect ? 'col-1' : 'col-3') : 'col-6' },
237
- React.createElement(react_forms_1.Select, { Record: filter, Label: '', Field: 'unit', Setter: function (r) {
238
- var flt = getTimeWindow({ end: filter.end, duration: filter.duration, unit: r.unit }, format);
239
- setFilter(function (prevFilter) { return (__assign(__assign({}, prevFilter), { unit: r.unit, center: flt.center, start: flt.start })); });
240
- setActiveQP(-1);
241
- }, Options: TimeWindowUtils_1.units.map(function (unit) { return ({
242
- Value: unit,
243
- Label: (0, TimeWindowUtils_1.readableUnit)(unit)
244
- }); }) }))))
245
- : null,
246
- props.showQuickSelect ?
247
- React.createElement("div", { className: props.isHorizontal ? 'col-8' : 'row' },
248
- React.createElement(Row, { addRow: props.isHorizontal, class: "justify-content-center" }, QuickSelects.map(function (qs, i) {
249
- if (i % 3 !== 0)
250
- return null;
251
- return (React.createElement("div", { key: i, className: props.isHorizontal ? 'col-2' : "col-4", style: { paddingLeft: (props.isHorizontal ? 0 : (i % 9 == 0 ? 15 : 0)), paddingRight: (props.isHorizontal ? 2 : ((i % 18 == 6 || i % 18 == 15) ? 15 : 2)), marginTop: 10 } },
252
- React.createElement("ul", { className: "list-group", key: i },
253
- React.createElement("li", { key: i, style: { cursor: 'pointer' }, onClick: function () {
254
- var flt = getTimeWindow(QuickSelects[i].createFilter(props.timeZone, props.format), format);
255
- props.setFilter(flt.center, flt.start, flt.end, flt.unit, flt.duration);
256
- setActiveQP(i);
257
- }, className: "item badge badge-" + (i == activeQP ? "primary" : "secondary") }, QuickSelects[i].label),
258
- i + 1 < QuickSelects.length ?
259
- React.createElement("li", { key: i + 1, style: { marginTop: 3, cursor: 'pointer' }, className: "item badge badge-" + (i + 1 == activeQP ? "primary" : "secondary"), onClick: function () {
260
- var flt = getTimeWindow(QuickSelects[i + 1].createFilter(props.timeZone, props.format), format);
261
- props.setFilter(flt.center, flt.start, flt.end, flt.unit, flt.duration);
262
- setActiveQP(i + 1);
263
- } }, QuickSelects[i + 1].label) : null,
264
- i + 2 < QuickSelects.length ?
265
- React.createElement("li", { key: i + 2, style: { marginTop: 3, cursor: 'pointer' }, className: "item badge badge-" + (i + 2 == activeQP ? "primary" : "secondary"), onClick: function () {
266
- var flt = getTimeWindow(QuickSelects[i + 2].createFilter(props.timeZone, props.format), format);
267
- props.setFilter(flt.center, flt.start, flt.end, flt.unit, flt.duration);
268
- setActiveQP(i + 2);
269
- } }, QuickSelects[i + 2].label) : null)));
270
- })))
271
- : null)));
272
- };
273
- exports.default = TimeFilter;