@robotical/sensors-dashboard/dist/components/ConnectionArea/RobotButton/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.json.stringify.js");
require("core-js/modules/es.promise.js");
require("core-js/modules/es.string.trim.js");
var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
var _marty_selected = _interopRequireDefault(require("../../../assets/connect-button/marty_selected.svg"));
var _cog_selected = _interopRequireDefault(require("../../../assets/connect-button/cog_selected.svg"));
var _disconnect_button = require("../../../assets/connect-button/disconnect_button.svg");
var _disconnect_buttonHover = require("../../../assets/connect-button/disconnect_button-hover.svg");
var _react = require("react");
var _RaftSignal = _interopRequireDefault(require("../RaftSignal"));
var _RaftBattery = _interopRequireDefault(require("../RaftBattery"));
var _raft = require("@robotical/webapp-types/dist-types/src/types/raft");
var _Logger = _interopRequireDefault(require("../../../services/logger/Logger"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const SHOW_LOGS = true;
const TAG = "RobotButton";
const RobotButton = _ref => {
  let {
    robotType,
    connectedRaft,
    onClickDisconnect
  } = _ref;
  const [connectedRaftName, setConnectedRaftName] = (0, _react.useState)("");
  const [batteryStrength, setBatteryStrength] = (0, _react.useState)(0);
  const [RSSI, setRSSI] = (0, _react.useState)(-200);
  const [isDisconnectHovered, setIsDisconnectHovered] = (0, _react.useState)(false);
  const [isDisconnecting, setIsDisconnecting] = (0, _react.useState)(false);
  (0, _react.useEffect)(() => {
    if (!connectedRaft) return;
    const batteryUpdateTimout = setInterval(() => {
      setBatteryStrength(connectedRaft.getBatteryStrength());
      setRSSI(connectedRaft.getRSSI());
    }, 1000);
    return () => clearInterval(batteryUpdateTimout);
  }, [connectedRaft]);
  (0, _react.useEffect)(() => {
    if (!connectedRaft) return undefined;
    let cancelled = false;
    const nameTimer = window.setTimeout(() => {
      connectedRaft.getRaftName().then(name => {
        if (!cancelled) {
          setConnectedRaftName(name);
        }
      }).catch(error => {
        _Logger.default.error(SHOW_LOGS, TAG, "Error getting raft name " + JSON.stringify(error));
      });
    }, 500);
    return () => {
      cancelled = true;
      window.clearTimeout(nameTimer);
    };
  }, [connectedRaft]);
  const handleDisconnect = async () => {
    setIsDisconnecting(true);
    try {
      await onClickDisconnect(connectedRaft.id);
    } finally {
      setIsDisconnecting(false);
    }
  };
  const robotIcon = robotType === _raft.RaftTypeE.MARTY ? _marty_selected.default : _cog_selected.default;
  const robotTypeName = robotType === _raft.RaftTypeE.MARTY ? "Marty" : "Cog";
  const displayName = connectedRaftName.trim() || robotTypeName;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: [_stylesModule.default.robotButtonContainer, _stylesModule.default.selected].join(" "),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: _stylesModule.default.robotButtonContainerInner,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: _stylesModule.default.robotButtonIconContainer,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
          src: robotIcon,
          alt: "",
          "aria-hidden": "true",
          className: _stylesModule.default.robotButtonIcon
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: _stylesModule.default.batteryContainer,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: _stylesModule.default.batteryIcon,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RaftBattery.default, {
            batteryStrength: batteryStrength
          })
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: _stylesModule.default.signalContainer,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RaftSignal.default, {
          connectedRaft: connectedRaft,
          signalStrength: RSSI
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: _stylesModule.default.robotButtonNameContainer,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: _stylesModule.default.robotButtonName,
          title: displayName,
          children: truncateRobotName(displayName)
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        className: _stylesModule.default.connectionStatus,
        role: "status",
        children: isDisconnecting ? "Disconnecting ".concat(displayName, ".") : "".concat(displayName, " connected.")
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
      type: "button",
      className: _stylesModule.default.trashContainer,
      onClick: handleDisconnect,
      onMouseEnter: () => setIsDisconnectHovered(true),
      onMouseLeave: () => setIsDisconnectHovered(false),
      onFocus: () => setIsDisconnectHovered(true),
      onBlur: () => setIsDisconnectHovered(false),
      disabled: isDisconnecting,
      "aria-busy": isDisconnecting,
      "aria-label": isDisconnecting ? "Disconnecting ".concat(displayName) : "Disconnect ".concat(displayName),
      title: "Disconnect ".concat(displayName),
      children: isDisconnectHovered ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_disconnect_buttonHover.ReactComponent, {
        "aria-hidden": "true",
        focusable: "false"
      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_disconnect_button.ReactComponent, {
        "aria-hidden": "true",
        focusable: "false"
      })
    })]
  });
};
var _default = exports.default = RobotButton;
function truncateRobotName(name) {
  if (name.length > 13) {
    return name.substring(0, 11) + "...";
  }
  return name;
}