@robotical/sensors-dashboard
Version:
A dashboard tool for depicting Marty data by Robotical
125 lines (124 loc) • 6.08 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = NewGraphModal;
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/esnext.iterator.map.js");
require("core-js/modules/es.string.trim.js");
var _SelectedRaftContext = require("@robotical/webapp-types/dist-types/src/store/SelectedRaftContext");
var _cog_selected = _interopRequireDefault(require("../../../assets/connect-button/cog_selected.svg"));
var _marty_selected = _interopRequireDefault(require("../../../assets/connect-button/marty_selected.svg"));
var _microbitSmall = _interopRequireDefault(require("../../../assets/connect-button/microbit-small.svg"));
var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
var _raft = require("@robotical/webapp-types/dist-types/src/types/raft");
var _ModalState = _interopRequireDefault(require("../../../state-observables/modal/ModalState"));
var _fa = require("react-icons/fa");
var _react = require("react");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function NewGraphModal(_ref) {
var _window$applicationMa;
let {
microBit = null
} = _ref;
const [connectedMicroBit, setConnectedMicroBit] = (0, _react.useState)(() => microBit !== null && microBit !== void 0 && microBit.isConnected() ? microBit : null);
const connectedRaftsArray = ((_window$applicationMa = window.applicationManager) === null || _window$applicationMa === void 0 ? void 0 : _window$applicationMa.connectedRaftsContext) || [];
const connectedRafts = connectedRaftsArray.filter(raft => raft.id !== _SelectedRaftContext.NewRobotIdE.NEW);
const handleDeviceClick = deviceId => {
_ModalState.default.closeModal(deviceId);
};
(0, _react.useEffect)(() => {
if (!(microBit !== null && microBit !== void 0 && microBit.isConnected())) {
setConnectedMicroBit(null);
return;
}
setConnectedMicroBit(microBit);
const unsubscribe = microBit.addDisconnectListener(() => setConnectedMicroBit(null));
if (!microBit.isConnected()) {
setConnectedMicroBit(null);
}
return unsubscribe;
}, [microBit]);
const hasConnectedDevices = connectedRafts.length > 0 || Boolean(connectedMicroBit);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: _stylesModule.default.newGraphModalContainer,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
type: "button",
className: _stylesModule.default.closeButton,
onClick: () => _ModalState.default.closeModal(),
"aria-label": "Close add graph dialog",
title: "Close",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaTimes, {
className: _stylesModule.default.closeIcon,
"aria-hidden": "true",
focusable: "false"
})
}), hasConnectedDevices ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
className: _stylesModule.default.title,
children: "Select a connected device for this graph"
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
className: _stylesModule.default.title,
children: "No devices are connected. Close this dialog and connect a device to continue."
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: _stylesModule.default.gridContainer,
role: "group",
"aria-label": "Connected devices",
children: [connectedRafts.map((raft, index) => {
var _raft$name;
let raftIcon;
if (raft.type === _raft.RaftTypeE.COG) {
raftIcon = _cog_selected.default;
} else if (raft.type === _raft.RaftTypeE.MARTY) {
raftIcon = _marty_selected.default;
}
const robotName = ((_raft$name = raft.name) === null || _raft$name === void 0 ? void 0 : _raft$name.trim()) || "".concat(raft.type, " robot");
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
type: "button",
className: _stylesModule.default.card,
onClick: () => handleDeviceClick(raft.id),
"aria-label": "Create graph for ".concat(robotName),
"data-modal-initial-focus": index === 0 ? "true" : undefined,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
src: raftIcon,
alt: "",
"aria-hidden": "true",
className: _stylesModule.default.icon
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: _stylesModule.default.raftName,
children: robotName
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
className: _stylesModule.default.connectedStatus,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: _stylesModule.default.connectedStatusDot,
"aria-hidden": "true"
}), "Connected"]
})]
}, raft.id);
}), connectedMicroBit && /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
type: "button",
className: _stylesModule.default.card,
onClick: () => handleDeviceClick(connectedMicroBit.id),
"aria-label": "Create graph for ".concat(connectedMicroBit.getFriendlyName()),
"data-modal-initial-focus": connectedRafts.length === 0 ? "true" : undefined,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
src: _microbitSmall.default,
alt: "",
"aria-hidden": "true",
className: _stylesModule.default.icon
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: _stylesModule.default.raftName,
children: connectedMicroBit.getFriendlyName()
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
className: _stylesModule.default.connectedStatus,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: _stylesModule.default.connectedStatusDot,
"aria-hidden": "true"
}), "Connected"]
})]
})]
})]
});
}