@gpa-gemstone/common-pages
Version:
Common UI pages for GPA products
141 lines (140 loc) • 8.17 kB
JavaScript
;
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 });
//******************************************************************************************************
// NavBarFilterButton.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:
// ----------------------------------------------------------------------------------------------------
// 08/07/2024 - G. Santos
// Generated original version of source code.
//
//******************************************************************************************************
var react_1 = __importDefault(require("react"));
require("moment");
function NavbarFilterButton(props) {
var _a = react_1.default.useState(false), hover = _a[0], setHover = _a[1];
var _b = react_1.default.useState([]), rows = _b[0], setRows = _b[1];
var _c = react_1.default.useState(null), header = _c[0], setHeader = _c[1];
var _d = react_1.default.useState({ marginBottom: 5 }), buttonStyle = _d[0], setButtonStyle = _d[1];
react_1.default.useEffect(function () {
switch (props.Type) {
case ('Meter'):
setHeader(react_1.default.createElement("tr", null,
react_1.default.createElement("th", null, "Name"),
react_1.default.createElement("th", null, "Key"),
react_1.default.createElement("th", null, "Substation"),
react_1.default.createElement("th", null, "Make"),
react_1.default.createElement("th", null, "Model")));
break;
case ('Asset'):
setHeader(react_1.default.createElement("tr", null,
react_1.default.createElement("th", null, "Key"),
react_1.default.createElement("th", null, "Name"),
react_1.default.createElement("th", null, "Asset Type"),
react_1.default.createElement("th", null, "Voltage (kV)")));
break;
case ('AssetGroup'):
setHeader(react_1.default.createElement("tr", null,
react_1.default.createElement("th", null, "Name"),
react_1.default.createElement("th", null, "Assets"),
react_1.default.createElement("th", null, "Meters")));
break;
default:
setHeader(react_1.default.createElement("tr", null,
react_1.default.createElement("th", null, "Name"),
react_1.default.createElement("th", null, "Key"),
react_1.default.createElement("th", null, "Meters"),
react_1.default.createElement("th", null, "Assets")));
}
}, [props.Type]);
react_1.default.useEffect(function () {
var _a, _b;
setButtonStyle(__assign(__assign({}, buttonStyle), { backgroundColor: (props.Data.length > 0 ? (_a = props.AlternateColors) === null || _a === void 0 ? void 0 : _a.selected : (_b = props.AlternateColors) === null || _b === void 0 ? void 0 : _b.normal) }));
}, [props.AlternateColors, props.Data.length]);
react_1.default.useEffect(function () {
switch (props.Type) {
case ('Meter'):
setRows(props.Data.filter(function (v, i) { return i < 10; }).map(function (d) { return react_1.default.createElement("tr", { key: d.ID },
react_1.default.createElement("td", null, d['Name']),
react_1.default.createElement("td", null, d['AssetKey']),
react_1.default.createElement("td", null, d['Location']),
react_1.default.createElement("td", null, d['Make']),
react_1.default.createElement("td", null, d['Model'])); }));
break;
case ('Asset'):
setRows(props.Data.filter(function (v, i) { return i < 10; }).map(function (d) { return react_1.default.createElement("tr", { key: d.ID },
react_1.default.createElement("td", null, d['AssetKey']),
react_1.default.createElement("td", null, d['AssetName']),
react_1.default.createElement("td", null, d['AssetType']),
react_1.default.createElement("td", null, d['VoltageKV'])); }));
break;
case ('AssetGroup'):
setRows(props.Data.filter(function (v, i) { return i < 10; }).map(function (d) { return react_1.default.createElement("tr", { key: d.ID },
react_1.default.createElement("td", null, d['Name']),
react_1.default.createElement("td", null, d['Assets']),
react_1.default.createElement("td", null, d['Meters'])); }));
break;
case ('Station'):
setRows(props.Data.filter(function (v, i) { return i < 10; }).map(function (d) { return react_1.default.createElement("tr", { key: d.ID },
react_1.default.createElement("td", null, d['Name']),
react_1.default.createElement("td", null, d['LocationKey']),
react_1.default.createElement("td", null, d['Meters']),
react_1.default.createElement("td", null, d['Assets'])); }));
break;
default:
setRows([]);
break;
}
}, [props.Data, props.Type]);
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("button", { className: "btn btn-block btn-sm btn-" + (props.Data.length > 0 ? "warning" : "primary"), style: buttonStyle, onClick: function (evt) { evt.preventDefault(); props.OnClick(); }, onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); } },
typeToString(props.Type),
" ",
props.Data.length > 0 ? ('(' + props.Data.length + ')') : ''),
react_1.default.createElement("div", { style: { width: window.innerWidth / 3, display: hover ? 'block' : 'none', position: 'absolute', backgroundColor: '#f1f1f1', boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)', zIndex: 1, right: 0 }, onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); } },
react_1.default.createElement("table", { className: 'table' },
react_1.default.createElement("thead", null, header),
react_1.default.createElement("tbody", null, rows)))));
}
function typeToString(Type) {
switch (Type) {
case 'Meter':
return 'Meter';
case 'Asset':
return 'Asset';
case 'AssetGroup':
return 'Asset Group';
case 'Station':
return 'Substation';
default:
return Type;
}
}
exports.default = NavbarFilterButton;