@gpa-gemstone/common-pages
Version:
Common UI pages for GPA products
206 lines (205 loc) • 18.2 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
//******************************************************************************************************
// EventCharacteristicFilter.tsx - Gbtc
//
// Copyright © 2019, Grid Protection Alliance. All Rights Reserved.
//
// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
// the NOTICE file distributed with this work for additional information regarding copyright ownership.
// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
// file except in compliance with the License. You may obtain a copy of the License at:
//
// http://opensource.org/licenses/MIT
//
// Unless agreed to in writing, the subject software distributed under the License is distributed on an
// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
// License for the specific language governing permissions and limitations.
//
// Code Modification History:
// ----------------------------------------------------------------------------------------------------
// 04/24/2019 - Billy Ernest
// Generated original version of source code.
// 08/22/2019 - Christoph Lackner
// Added Filter for Events with TCE.
// 06/20/2024 - Ali Karrar
// Moved EventCharacteristicFilter from SEBrowser to gemstone
//
//******************************************************************************************************
var react_1 = __importDefault(require("react"));
var lodash_1 = __importDefault(require("lodash"));
var react_forms_1 = require("@gpa-gemstone/react-forms");
var EventCharacteristicFilter = function (props) {
var _a = react_1.default.useState(props.eventCharacteristicFilter), newEventCharacteristicFilter = _a[0], setNewEventCharacteristicFilter = _a[1];
var _b = react_1.default.useState([]), newPhases = _b[0], setNewPhases = _b[1];
react_1.default.useEffect(function () { setNewEventCharacteristicFilter(props.eventCharacteristicFilter); }, [props.eventCharacteristicFilter]);
react_1.default.useEffect(function () {
var setupPhases = [];
Object.keys(props.eventCharacteristicFilter.phases).forEach(function (key, index) { return setupPhases.push({ Value: index, Text: key, Selected: props.eventCharacteristicFilter.phases[key] }); });
setNewPhases(setupPhases);
}, []);
react_1.default.useEffect(function () {
var characteristics = validEventCharacteristicsFilter() ? newEventCharacteristicFilter : undefined;
if (!lodash_1.default.isEqual(characteristics, props.eventCharacteristicFilter))
props.setEventFilters(characteristics);
}, [newEventCharacteristicFilter]);
function validEventCharacteristicsFilter() {
var valid = newEventCharacteristicFilter != null;
if (!valid)
return valid;
valid = valid && validMinMax('durationMin');
valid = valid && validMinMax('durationMax');
valid = valid && validMinMax('sagMin');
valid = valid && validMinMax('sagMax');
valid = valid && validMinMax('swellMin');
valid = valid && validMinMax('swellMax');
valid = valid && validMinMax('transientMin');
valid = valid && validMinMax('transientMax');
return valid;
}
function NullOrNaN(val) {
return val == null || val == undefined || isNaN(val);
}
function validMinMax(field) {
var filter = newEventCharacteristicFilter;
if (field == 'durationMin')
return NullOrNaN(filter.durationMin) || (filter.durationMin >= 0 && filter.durationMin < 100 &&
(NullOrNaN(filter.durationMax) || filter.durationMax >= filter.durationMin));
if (field == 'durationMax')
return NullOrNaN(filter.durationMax) || (filter.durationMax >= 0 && filter.durationMax < 100 &&
(NullOrNaN(filter.durationMin) || filter.durationMax >= filter.durationMin));
if (field == 'sagMin')
return NullOrNaN(filter.sagMin) || (filter.sagMin >= 0 && filter.sagMin < 1 &&
(NullOrNaN(filter.sagMax) || filter.sagMax >= filter.sagMin));
if (field == 'sagMax')
return NullOrNaN(filter.sagMax) || (filter.sagMax >= 0 && filter.sagMax < 1 &&
(NullOrNaN(filter.sagMax) || filter.sagMax >= filter.sagMax));
if (field == 'swellMin')
return NullOrNaN(filter.swellMin) || (filter.swellMin >= 1 && filter.swellMin < 9999 &&
(NullOrNaN(filter.swellMax) || filter.swellMax >= filter.swellMin));
if (field == 'swellMax')
return NullOrNaN(filter.swellMax) || (filter.swellMax >= 1 && filter.swellMax < 9999 &&
(NullOrNaN(filter.swellMin) || filter.swellMax >= filter.swellMin));
if (field == 'transientMin')
return NullOrNaN(filter.transientMin) || (filter.transientMin >= 0 && filter.transientMin < 9999 &&
(NullOrNaN(filter.transientMax) || filter.transientMax >= filter.transientMin));
if (field == 'transientMax')
return NullOrNaN(filter.transientMax) || (filter.transientMax >= 0 && filter.transientMax < 9999 &&
(NullOrNaN(filter.transientMin) || filter.transientMax >= filter.transientMin));
return true;
}
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;
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;
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;
if (newEventCharacteristicFilter === null || props.eventTypeFilter === null)
return null;
return (react_1.default.createElement("fieldset", { className: "border", style: { padding: '10px', height: '100%' } },
react_1.default.createElement("legend", { className: "w-auto", style: { fontSize: 'large' } }, "Event Characteristics:"),
react_1.default.createElement("div", { className: "row" },
react_1.default.createElement("div", { className: "col-4" },
react_1.default.createElement("form", null,
react_1.default.createElement("div", { className: "form-group" },
react_1.default.createElement("div", { className: 'input-group input-group-sm', style: { width: '100%' } },
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 }); }) })),
react_1.default.createElement("div", { className: 'form-check form-check-inline' },
react_1.default.createElement(react_forms_1.RadioButtons, { Record: newEventCharacteristicFilter, Label: '', Field: 'sagType', Setter: setNewEventCharacteristicFilter, Options: [
{ Value: 'LL', Label: 'LL' },
{ Value: 'LN', Label: 'LN' },
{ Value: 'both', Label: 'Both' }
] }))))),
react_1.default.createElement("div", { className: "col-4" },
react_1.default.createElement("form", null,
react_1.default.createElement("label", { style: { margin: 0 } }, "Duration (cycle):"),
react_1.default.createElement("div", { className: "form-group" },
react_1.default.createElement("div", { className: 'input-group input-group-sm' },
react_1.default.createElement("div", { className: 'col', style: { width: '45%', paddingRight: 0, paddingLeft: 0 } },
react_1.default.createElement(react_forms_1.Input, { Record: newEventCharacteristicFilter, Label: '', Field: 'durationMin', Setter: setNewEventCharacteristicFilter, Valid: validMinMax, Feedback: 'Invalid Min', Type: 'number', Size: 'small', AllowNull: true })),
react_1.default.createElement("div", { className: "input-group-append", style: { height: '37px' } },
react_1.default.createElement("span", { className: "input-group-text" }, " to ")),
react_1.default.createElement("div", { className: 'col', style: { width: '45%', paddingLeft: 0, paddingRight: 0 } },
react_1.default.createElement(react_forms_1.Input, { Record: newEventCharacteristicFilter, Label: '', Field: 'durationMax', Setter: setNewEventCharacteristicFilter, Valid: validMinMax, Feedback: 'Invalid Max', Type: 'number', Size: 'small', AllowNull: true })))))),
react_1.default.createElement("div", { className: "col-4" },
react_1.default.createElement("form", null,
react_1.default.createElement("label", { style: { margin: 0 } }, "Sags (p.u.):"),
react_1.default.createElement("div", { className: "form-group" },
react_1.default.createElement("div", { className: "row", style: { width: '100%' } },
react_1.default.createElement("div", { className: 'input-group input-group-sm' },
react_1.default.createElement("div", { className: 'col', style: { width: '45%', paddingLeft: 0, paddingRight: 0 } },
react_1.default.createElement(react_forms_1.Input, { Record: newEventCharacteristicFilter, Label: '', Disabled: !sagsSelected, Field: 'sagMin', Setter: setNewEventCharacteristicFilter, Valid: validMinMax, Feedback: 'Invalid Min', Type: 'number', Size: 'small', AllowNull: true })),
react_1.default.createElement("div", { className: "input-group-append", style: { height: '37px' } },
react_1.default.createElement("span", { className: "input-group-text" }, " to ")),
react_1.default.createElement("div", { className: 'col', style: { width: '45%', paddingLeft: 0, paddingRight: 0 } },
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 })))),
react_1.default.createElement("div", { className: "row justify-content-md-center" },
react_1.default.createElement("div", { className: 'form-check form-check-inline' },
react_1.default.createElement(react_forms_1.RadioButtons, { Record: newEventCharacteristicFilter, Label: '', Field: 'sagType', Setter: setNewEventCharacteristicFilter, Options: [
{ Value: 'LL', Label: 'LL' },
{ Value: 'LN', Label: 'LN' },
{ Value: 'both', Label: 'Both' }
] })))))),
react_1.default.createElement("div", { className: "col-4" },
react_1.default.createElement(react_forms_1.MultiCheckBoxSelect, { Options: newPhases, Label: 'Phases', ItemTooltip: 'dark', OnChange: function (evt, Options) {
var phaseList = [];
var phaseFilter = __assign({}, newEventCharacteristicFilter.phases);
newPhases.forEach(function (phase) {
var phaseSelected = phase.Selected != (Options.findIndex(function (option) { return phase.Value === option.Value; }) > -1);
phaseList.push(__assign(__assign({}, phase), { Selected: phaseSelected }));
phaseFilter[phase.Text] = phaseSelected;
});
setNewPhases(phaseList);
setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { phases: phaseFilter }));
} })),
react_1.default.createElement("div", { className: "col-4" },
react_1.default.createElement("form", null,
react_1.default.createElement("label", { style: { margin: 0 } }, "Transients (p.u.):"),
react_1.default.createElement("div", { className: "form-group" },
react_1.default.createElement("div", { className: 'input-group input-group-sm' },
react_1.default.createElement("div", { className: "row", style: { width: '100%' } },
react_1.default.createElement("div", { className: 'col', style: { width: '45%', paddingLeft: 0, paddingRight: 0 } },
react_1.default.createElement(react_forms_1.Input, { Record: newEventCharacteristicFilter, Label: '', Disabled: !transientsSelected, Field: 'transientMin', Setter: setNewEventCharacteristicFilter, Valid: validMinMax, Feedback: 'Invalid Min', Type: 'number', Size: 'small', AllowNull: true })),
react_1.default.createElement("div", { className: "input-group-append", style: { height: '37px' } },
react_1.default.createElement("span", { className: "input-group-text" }, " to ")),
react_1.default.createElement("div", { className: 'col', style: { width: '45%', paddingLeft: 0, paddingRight: 0 } },
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' })))),
react_1.default.createElement("div", { className: "row justify-content-md-center" },
react_1.default.createElement("div", { className: 'form-check form-check-inline' },
react_1.default.createElement(react_forms_1.RadioButtons, { Record: newEventCharacteristicFilter, Label: '', Field: 'sagType', Setter: setNewEventCharacteristicFilter, Options: [
{ Value: 'LL', Label: 'LL' },
{ Value: 'LN', Label: 'LN' },
{ Value: 'both', Label: 'Both' }
] })))))),
react_1.default.createElement("div", { className: "col-4" },
react_1.default.createElement("form", null,
react_1.default.createElement("label", { style: { margin: 0 } }, "Swells (p.u.):"),
react_1.default.createElement("div", { className: "form-group" },
react_1.default.createElement("div", { className: "row", style: { width: '100%' } },
react_1.default.createElement("div", { className: 'input-group input-group-sm' },
react_1.default.createElement("div", { className: 'col', style: { width: '45%', paddingLeft: 0, paddingRight: 0 } },
react_1.default.createElement(react_forms_1.Input, { Record: newEventCharacteristicFilter, Label: '', Disabled: !swellsSelected, Field: 'swellMin', Setter: setNewEventCharacteristicFilter, Valid: validMinMax, Feedback: 'Invalid Min', Type: 'number', Size: 'small', AllowNull: true })),
react_1.default.createElement("div", { className: "input-group-append", style: { height: '37px' } },
react_1.default.createElement("span", { className: "input-group-text" }, " to ")),
react_1.default.createElement("div", { className: 'col', style: { width: '45%', paddingLeft: 0, paddingRight: 0 } },
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 })))),
react_1.default.createElement("div", { className: "row justify-content-md-center" },
react_1.default.createElement("div", { className: 'form-check form-check-inline' },
react_1.default.createElement(react_forms_1.RadioButtons, { Record: newEventCharacteristicFilter, Label: '', Field: 'sagType', Setter: setNewEventCharacteristicFilter, Options: [
{ Value: 'LL', Label: 'LL' },
{ Value: 'LN', Label: 'LN' },
{ Value: 'both', Label: 'Both' }
] })))))))));
};
exports.default = EventCharacteristicFilter;