@robotical/sensors-dashboard
Version:
A dashboard tool for depicting Marty data by Robotical
66 lines (65 loc) • 2.62 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = RaftBattery;
var _react = require("react");
var _battery = require("../../../assets/connect-button/battery.svg");
var _powerPlug = require("../../../assets/connect-button/power-plug.svg");
var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
var _colors = require("../../../styles/colors");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const roundBatteryPerc = battLevel => {
let roundedBattery = battLevel;
if (battLevel <= 90 && battLevel >= 71) roundedBattery = 80;
if (battLevel <= 70 && battLevel >= 51) roundedBattery = 60;
if (battLevel <= 50 && battLevel >= 31) roundedBattery = 40;
if (battLevel <= 30 && battLevel >= 11) roundedBattery = 20;
return roundedBattery;
};
function RaftBattery(_ref) {
let {
batteryStrength
} = _ref;
const batteryRef = (0, _react.useRef)(null);
(0, _react.useEffect)(() => {
if (batteryRef.current) {
const batteryStrenghtRounded = roundBatteryPerc(batteryStrength);
const batteryBars = Math.ceil(batteryStrenghtRounded / 20);
const svgRects = batteryRef.current.getElementsByTagName("rect");
let colour = _colors.SCREENFREE_GREEN;
if (batteryStrength <= 10) {
colour = _colors.SCREENFREE_RED;
} else if (batteryStrength > 10 && batteryStrength <= 35) {
colour = _colors.SCREENFREE_YELLOW;
}
for (let i = 0; i < 5; i++) {
if (i < batteryBars) {
svgRects[i].setAttribute("fill", colour);
} else {
svgRects[i].setAttribute("fill", "#d1d3d4");
}
}
}
}, [batteryStrength]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: _stylesModule.default.martyBattContainer,
role: "img",
"aria-label": batteryStrength === 0 ? "Battery level unavailable or charging" : "Battery: ".concat(batteryStrength, " percent"),
children: batteryStrength === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_powerPlug.ReactComponent, {
"aria-hidden": "true",
focusable: "false"
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_battery.ReactComponent, {
ref: batteryRef,
"aria-hidden": "true",
focusable: "false"
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
className: _stylesModule.default.martyBattPercentage,
"aria-hidden": "true",
children: [batteryStrength, "%"]
})]
})
});
}