@robotical/sensors-dashboard/dist/components/MainContent/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/esnext.iterator.constructor.js");
require("core-js/modules/esnext.iterator.filter.js");
require("core-js/modules/es.promise.js");
require("core-js/modules/es.regexp.to-string.js");
require("core-js/modules/esnext.iterator.map.js");
var _react = require("react");
var _GraphArea = _interopRequireDefault(require("../GraphArea"));
var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
var _fa = require("react-icons/fa");
var _material = require("@mui/material");
var _ModalState = _interopRequireDefault(require("../../state-observables/modal/ModalState"));
var _NewGraphModal = _interopRequireDefault(require("../modals/NewGraphModal"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function MainContent(_ref) {
  let {
    mainRef
  } = _ref;
  const [isConnected, setIsConnected] = (0, _react.useState)(false);
  const connectedRaftsLength = (0, _react.useRef)(0);
  const refresh = (0, _react.useState)(0)[1];
  const removeGraph = graphId => {
    const graphsUpdated = graphs.current.filter(graph => graph.graphId !== graphId);
    graphs.current = graphsUpdated;
    refresh(old => old + 1);
  };
  const graphs = (0, _react.useRef)([]);
  (0, _react.useEffect)(() => {
    const connectedRaftInterval = setInterval(() => {
      var _window$applicationMa;
      const allConnectedRafts = ((_window$applicationMa = window.applicationManager) === null || _window$applicationMa === void 0 ? void 0 : _window$applicationMa.connectedRafts) || {};
      if (connectedRaftsLength.current !== Object.keys(allConnectedRafts).length) {
        connectedRaftsLength.current = Object.keys(allConnectedRafts).length;
        refresh(old => old + 1);
      }
      if (!allConnectedRafts) {
        setIsConnected(false);
        return;
      }
      setIsConnected(Object.keys(allConnectedRafts).length > 0);
    }, 2000);
    return () => {
      clearInterval(connectedRaftInterval);
    };
  }, []);
  const addGraphHandler = async () => {
    const raftId = await _ModalState.default.setModal(/*#__PURE__*/(0, _react.createElement)(_NewGraphModal.default, {}), "Add new graph");
    if (!raftId) {
      return;
    }
    const graphsUpdated = [...graphs.current];
    const GRAPH_ID = new Date().getTime().toString();
    graphsUpdated.push({
      graphId: GRAPH_ID,
      element: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GraphArea.default, {
        raft: window.applicationManager.connectedRafts[raftId],
        mainRef: mainRef,
        graphId: GRAPH_ID,
        removeGraph: removeGraph
      }, GRAPH_ID)
    });
    graphs.current = graphsUpdated;
    refresh(old => old + 1);
  };
  if (!isConnected) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: _stylesModule.default.martyConnectedFallback,
      children: "Please connect a robot first"
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: _stylesModule.default.graphsArea,
      children: graphs.current.map(graphArea => {
        return graphArea.element;
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: [_stylesModule.default.addGraphBtnContainer, graphs.current.length === 0 ? _stylesModule.default.buttonMiddleOfScreen : ""].join(" "),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
        title: "Add new graph",
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          onClick: addGraphHandler,
          className: _stylesModule.default.addGraphBtn,
          "data-tooltip-id": "add-new-graph-tootltip",
          "data-tooltip-content": "Add new graph",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaPlus, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaChartLine, {})]
        })
      })
    }), graphs.current.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: _stylesModule.default.addNewGraphMessage,
      children: "Add a new graph to start"
    })]
  });
}
var _default = exports.default = MainContent;