@robotical/sensors-dashboard
Version:
A dashboard tool for depicting Marty data by Robotical
131 lines (130 loc) • 6.79 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
require("core-js/modules/esnext.iterator.constructor.js");
require("core-js/modules/esnext.iterator.filter.js");
require("core-js/modules/es.promise.js");
require("core-js/modules/esnext.iterator.map.js");
var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
var _cog_selected = _interopRequireDefault(require("../../assets/connect-button/cog_selected.svg"));
var _marty_selected = _interopRequireDefault(require("../../assets/connect-button/marty_selected.svg"));
var _connect_btnDefault = require("../../assets/connect-button/connect_btn-default.svg");
var _RobotButton = _interopRequireDefault(require("./RobotButton"));
var _fa = require("react-icons/fa");
var _SelectedRaftContext = require("@robotical/webapp-types/dist-types/src/store/SelectedRaftContext");
var _react = require("react");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const ConnectionArea = _ref => {
var _window$applicationMa;
let {
isNavMenuMinimized
} = _ref;
const [, setRefresh] = (0, _react.useState)(0);
const [connectionStatus, setConnectionStatus] = (0, _react.useState)("idle");
const connectedRafts = ((_window$applicationMa = window.applicationManager) === null || _window$applicationMa === void 0 ? void 0 : _window$applicationMa.connectedRafts) || {};
const connectedRaftsArray = Object.values(connectedRafts);
const visibleConnectedRafts = connectedRaftsArray.filter(raft => raft.id !== _SelectedRaftContext.NewRobotIdE.NEW);
const hasConnectedRafts = visibleConnectedRafts.length > 0;
const connectedRaftsLength = (0, _react.useRef)(connectedRaftsArray.length);
(0, _react.useEffect)(() => {
const connectedRaftInterval = setInterval(() => {
var _window$applicationMa2;
const allConnectedRafts = ((_window$applicationMa2 = window.applicationManager) === null || _window$applicationMa2 === void 0 ? void 0 : _window$applicationMa2.connectedRafts) || {};
if (connectedRaftsLength.current !== Object.keys(allConnectedRafts).length) {
connectedRaftsLength.current = Object.keys(allConnectedRafts).length;
setRefresh(old => old + 1);
}
}, 2000);
return () => {
clearInterval(connectedRaftInterval);
};
}, []);
const onClickConnect = async () => {
if (!window.applicationManager) return;
setConnectionStatus("connecting");
try {
await window.applicationManager.connectGeneric(() => {
setRefresh(old => old + 1);
setConnectionStatus("idle");
});
setConnectionStatus("idle");
} catch (_unused) {
setConnectionStatus("error");
}
};
const onClickDisconnect = async raftId => {
if (!window.applicationManager) return;
await window.applicationManager.disconnectGeneric(window.applicationManager.connectedRafts[raftId], () => setRefresh(old => old + 1));
};
const connectionLabel = connectionStatus === "connecting" ? "Connecting…" : connectionStatus === "error" ? "Try connecting again" : "Connect device";
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: [_stylesModule.default.connectionAreaContainer].join(" "),
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: [_stylesModule.default.connectionAreaContainerInner, isNavMenuMinimized ? _stylesModule.default.minimizedConnectionAreaInnerContainer : ""].join(" "),
children: [!hasConnectedRafts && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
type: "button",
className: _stylesModule.default.connectButtonContainer,
onClick: onClickConnect,
disabled: !window.applicationManager || connectionStatus === "connecting",
"aria-busy": connectionStatus === "connecting",
"aria-label": connectionLabel,
"aria-describedby": "robot-connection-status",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: _stylesModule.default.emptyRow,
"aria-hidden": "true"
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
className: _stylesModule.default.connectButtonIconContainer,
"aria-hidden": "true",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
src: _cog_selected.default,
alt: "",
className: _stylesModule.default.connectButtonIcon
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
src: _marty_selected.default,
alt: "",
className: _stylesModule.default.connectButtonIcon
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: [_stylesModule.default.connectIconContainer, isNavMenuMinimized ? _stylesModule.default.minimizedConnectIconContainer : ""].join(" "),
"aria-hidden": "true",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_connect_btnDefault.ReactComponent, {
focusable: "false"
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
id: "robot-connection-status",
className: _stylesModule.default.connectionStatus,
role: "status",
children: connectionStatus === "connecting" ? "Connecting to a device." : connectionStatus === "error" ? "Connection failed. Please try again." : "Ready to connect a device."
})]
}), isNavMenuMinimized ? null : visibleConnectedRafts.map(connectedRaft => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RobotButton.default, {
robotType: connectedRaft.type,
connectedRaft: window.applicationManager.connectedRafts[connectedRaft.id],
onClickDisconnect: onClickDisconnect
}, connectedRaft.id);
}), hasConnectedRafts && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
type: "button",
className: _stylesModule.default.plusIconContainer,
onClick: onClickConnect,
disabled: connectionStatus === "connecting",
"aria-label": connectionStatus === "connecting" ? "Connecting another robot" : "Connect another robot",
title: "Connect another robot",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: _stylesModule.default.plusIconVisual,
"aria-hidden": "true",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaPlus, {
className: _stylesModule.default.plusIcon,
focusable: "false"
})
})
})]
})
});
};
var _default = exports.default = ConnectionArea;