@robotical/sensors-dashboard/dist/components/ConnectionArea/index.js

A dashboard tool for depicting Marty data by Robotical

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
require("core-js/modules/es.promise.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");
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 SHOW_LOGS = true;
const TAG = "ConnectionArea";
const ConnectionArea = _ref => {
  var _window$applicationMa;
  let {
    isNavMenuMinimized
  } = _ref;
  const [refresh, setRefresh] = (0, _react.useState)(0);
  const connectedRafts = ((_window$applicationMa = window.applicationManager) === null || _window$applicationMa === void 0 ? void 0 : _window$applicationMa.connectedRafts) || {};
  const connectedRaftsArray = Object.values(connectedRafts);
  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;
    window.applicationManager.connectGeneric(newRaft => setRefresh(refresh + 1));
  };
  const onClickDisconnect = async raftId => {
    if (!window.applicationManager) return;
    await window.applicationManager.disconnectGeneric(window.applicationManager.connectedRafts[raftId], () => setRefresh(refresh + 1));
  };
  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: [connectedRaftsArray.filter(raft => raft.id !== _SelectedRaftContext.NewRobotIdE.NEW).length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: _stylesModule.default.connectButtonContainer,
        onClick: onClickConnect,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: _stylesModule.default.emptyRow
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: _stylesModule.default.connectButtonIconContainer,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
            src: _cog_selected.default,
            alt: "Cog icon",
            className: _stylesModule.default.connectButtonIcon
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
            src: _marty_selected.default,
            alt: "Marty icon",
            className: _stylesModule.default.connectButtonIcon
          })]
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: [_stylesModule.default.connectIconContainer, isNavMenuMinimized ? _stylesModule.default.minimizedConnectIconContainer : ""].join(" "),
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_connect_btnDefault.ReactComponent, {})
        })]
      }), isNavMenuMinimized ? null : connectedRaftsArray.map(connectedRaft => {
        if (connectedRaft.id === _SelectedRaftContext.NewRobotIdE.NEW) return null;
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RobotButton.default, {
          robotType: connectedRaft.type,
          connectedRaft: window.applicationManager.connectedRafts[connectedRaft.id],
          onClickDisconnect: onClickDisconnect
        }, connectedRaft.id);
      }), connectedRaftsArray.filter(raft => raft.id !== _SelectedRaftContext.NewRobotIdE.NEW).length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: _stylesModule.default.plusIconContainer,
        onClick: onClickConnect,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaPlus, {
          className: _stylesModule.default.plusIcon
        })
      })]
    })
  });
};
var _default = exports.default = ConnectionArea;