@elice/material-exercise 1.260429.0-improvetimerpopoverui.0 → 1.260430.0

package/es/components/material-exercise/exercise-runner/arduino/ArduinoControllerActionUpload.js

@@ -0,0 +1,90 @@
+import { asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { useRawEliceIntl } from '@elice/intl';
+import { useConnection, useIsBrowserSupported } from '@elice/mcu-bridge';
+import { LoadingButton } from '@mui/lab';
+import { useArduinoBridge } from './_context.js';
+import { useControllerActionRun } from '../action/useControllerActionRun.js';
+
+//
+//
+//
+var ArduinoControllerActionUpload = function ArduinoControllerActionUpload() {
+  var intl = useRawEliceIntl();
+  var _useControllerActionR = useControllerActionRun(),
+    isHidden = _useControllerActionR.isHidden,
+    isDisabled = _useControllerActionR.isDisabled,
+    run = _useControllerActionR.run;
+  var _useConnection = useConnection(),
+    status = _useConnection.status,
+    connect = _useConnection.connect;
+  var isBrowserSupported = useIsBrowserSupported();
+  var _useArduinoBridge = useArduinoBridge(),
+    setPendingIntent = _useArduinoBridge.setPendingIntent,
+    isPending = _useArduinoBridge.isPending,
+    isFlashing = _useArduinoBridge.isFlashing,
+    setConnectionIntent = _useArduinoBridge.setConnectionIntent;
+  var isUploadDisabled = isDisabled || isPending || isFlashing || !isBrowserSupported;
+  var isUploadLoading = isPending || isFlashing;
+  /**
+   * Submit the Arduino sketch, then flash the compiled firmware to the board.
+   */
+  var upload = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.p = _context.n) {
+        case 0:
+          if (!isUploadDisabled) {
+            _context.n = 1;
+            break;
+          }
+          return _context.a(2);
+        case 1:
+          if (!(status !== 'connected')) {
+            _context.n = 5;
+            break;
+          }
+          setConnectionIntent('upload');
+          _context.p = 2;
+          _context.n = 3;
+          return connect();
+        case 3:
+          _context.n = 5;
+          break;
+        case 4:
+          _context.p = 4;
+          _context.v;
+          return _context.a(2);
+        case 5:
+          setPendingIntent('upload');
+          _context.n = 6;
+          return run();
+        case 6:
+          return _context.a(2);
+      }
+    }, _callee, null, [[2, 4]]);
+  })), [isUploadDisabled, status, connect, setConnectionIntent, setPendingIntent, run]);
+  //
+  //
+  //
+  if (isHidden) {
+    return null;
+  }
+  return jsx(LoadingButton, {
+    size: "small",
+    variant: "contained",
+    loading: isUploadLoading,
+    disabled: isUploadDisabled,
+    sx: {
+      bgcolor: function bgcolor(theme) {
+        return theme.palette.primary.light;
+      }
+    },
+    onClick: upload,
+    children: intl.formatMessage({
+      id: 'exerciseRunner.controller.arduino.button.upload'
+    })
+  });
+};
+
+export { ArduinoControllerActionUpload as default };

package/es/components/material-exercise/exercise-runner/arduino/ArduinoControllerButtonGroup.d.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+declare const ArduinoControllerButtonGroup: React.FC;
+export default ArduinoControllerButtonGroup;

package/es/components/material-exercise/exercise-runner/arduino/ArduinoControllerButtonGroup.js

@@ -0,0 +1,20 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Stack } from '@mui/material';
+import ArduinoControllerActionCompile from './ArduinoControllerActionCompile.js';
+import ArduinoControllerActionUpload from './ArduinoControllerActionUpload.js';
+import ControllerActionGrade from '../action/ControllerActionGrade.js';
+import ControllerActionCancel from '../action/ControllerActionCancel.js';
+
+//
+//
+//
+var ArduinoControllerButtonGroup = function ArduinoControllerButtonGroup() {
+  return jsxs(Stack, {
+    direction: "row",
+    alignItems: "center",
+    gap: "0.5rem",
+    children: [jsx(ArduinoControllerActionCompile, {}), jsx(ArduinoControllerActionUpload, {}), jsx(ControllerActionGrade, {}), jsx(ControllerActionCancel, {})]
+  });
+};
+
+export { ArduinoControllerButtonGroup as default };

package/es/components/material-exercise/exercise-runner/arduino/ArduinoControllerStatusMessage.d.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+declare const ArduinoControllerStatusMessage: React.VFC;
+export default ArduinoControllerStatusMessage;

package/es/components/material-exercise/exercise-runner/arduino/ArduinoControllerStatusMessage.js

@@ -0,0 +1,197 @@
+import { defineProperty as _defineProperty, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Text } from '@elice/blocks';
+import { useRawEliceIntl } from '@elice/intl';
+import { useConnection, useSession, useIsBrowserSupported, BaudRateSelect } from '@elice/mcu-bridge';
+import { LoadingButton } from '@mui/lab';
+import { Stack, inputBaseClasses, inputLabelClasses, Box } from '@mui/material';
+import ExerciseRunnerControllerStatusMessage from '../ExerciseRunnerControllerStatusMessage.js';
+import { useArduinoBridge } from './_context.js';
+import ArduinoHelpDialogButton from './ArduinoHelpDialogButton.js';
+
+var BOARD_STATUS_TONE = {
+  idle: 'idle',
+  connected: 'success',
+  reconnecting: 'warning',
+  disconnected: 'error'
+};
+var BOARD_STATUS_LABEL_KEY = {
+  idle: 'exerciseRunner.controller.arduino.boardStatus.idle',
+  connected: 'exerciseRunner.controller.arduino.boardStatus.connected',
+  reconnecting: 'exerciseRunner.controller.arduino.boardStatus.reconnecting',
+  disconnected: 'exerciseRunner.controller.arduino.boardStatus.disconnected'
+};
+var dotColor = function dotColor(tone) {
+  return function (theme) {
+    switch (tone) {
+      case 'success':
+        return theme.palette.success.main;
+      case 'warning':
+        return theme.palette.warning.main;
+      case 'error':
+        return theme.palette.error.main;
+      case 'idle':
+      default:
+        return theme.palette.grey[500];
+    }
+  };
+};
+//
+//
+//
+var ArduinoControllerStatusMessage = function ArduinoControllerStatusMessage() {
+  var _a;
+  var intl = useRawEliceIntl();
+  var _useConnection = useConnection(),
+    status = _useConnection.status,
+    connect = _useConnection.connect,
+    disconnect = _useConnection.disconnect;
+  var session = useSession();
+  var _useArduinoBridge = useArduinoBridge(),
+    isFlashing = _useArduinoBridge.isFlashing,
+    setConnectionIntent = _useArduinoBridge.setConnectionIntent;
+  var isBrowserSupported = useIsBrowserSupported();
+  var deviceName = (_a = session === null || session === void 0 ? void 0 : session.driver.board.name) !== null && _a !== void 0 ? _a : null;
+  var isConnected = status === 'connected';
+  var isTransitioning = status === 'reconnecting';
+  /**
+   *
+   */
+  var handleClick = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.p = _context.n) {
+          case 0:
+            if (!isConnected) {
+              _context.n = 2;
+              break;
+            }
+            _context.n = 1;
+            return disconnect();
+          case 1:
+            return _context.a(2);
+          case 2:
+            setConnectionIntent('connect');
+            _context.p = 3;
+            _context.n = 4;
+            return connect();
+          case 4:
+            _context.n = 6;
+            break;
+          case 5:
+            _context.p = 5;
+            _context.v;
+          case 6:
+            return _context.a(2);
+        }
+      }, _callee, null, [[3, 5]]);
+    }));
+    return function handleClick() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  /**
+   *
+   */
+  var getBoardStatusLabel = function getBoardStatusLabel() {
+    switch (status) {
+      case 'reconnecting':
+      case 'disconnected':
+        return intl.formatMessage({
+          id: BOARD_STATUS_LABEL_KEY[status]
+        });
+      case 'connected':
+        return deviceName ? intl.formatMessage({
+          id: BOARD_STATUS_LABEL_KEY.connected
+        }, {
+          device: deviceName
+        }) : intl.formatMessage({
+          id: 'exerciseRunner.controller.arduino.boardStatus.connectedNoName'
+        });
+      case 'idle':
+      default:
+        return intl.formatMessage({
+          id: BOARD_STATUS_LABEL_KEY.idle
+        });
+    }
+  };
+  /**
+   *
+   */
+  var renderArduinoBaudRate = function renderArduinoBaudRate() {
+    if (!isConnected) {
+      return null;
+    }
+    return jsx(BaudRateSelect, {
+      size: "small",
+      sx: _defineProperty(_defineProperty(_defineProperty({}, ".".concat(inputLabelClasses.root), {
+        display: 'none'
+      }), ".".concat(inputBaseClasses.root), {
+        width: '10rem',
+        minHeight: '1rem'
+      }), ".".concat(inputBaseClasses.input), {
+        paddingTop: '0.25rem',
+        paddingBottom: '0.25rem'
+      })
+    });
+  };
+  /**
+   *
+   */
+  var renderArduinoStatus = function renderArduinoStatus() {
+    return jsxs(Stack, {
+      direction: "row",
+      alignItems: "center",
+      gap: "0.5rem",
+      children: [jsx(Box, {
+        sx: {
+          width: '6px',
+          height: '6px',
+          borderRadius: '50%',
+          backgroundColor: dotColor(BOARD_STATUS_TONE[status])
+        }
+      }), jsx(Text, {
+        bold: true,
+        role: "gray3",
+        size: "tiny",
+        children: getBoardStatusLabel()
+      })]
+    });
+  };
+  /**
+   *
+   */
+  var renderArduinoConnectButton = function renderArduinoConnectButton() {
+    return jsxs(Stack, {
+      direction: "row",
+      alignItems: "center",
+      gap: "0.5rem",
+      children: [jsx(LoadingButton, {
+        color: isConnected ? 'error' : 'success',
+        size: "small",
+        disabled: !isBrowserSupported || isTransitioning || isFlashing,
+        loading: isTransitioning,
+        onClick: handleClick,
+        children: isConnected ? intl.formatMessage({
+          id: 'exerciseRunner.controller.arduino.button.disconnect'
+        }) : intl.formatMessage({
+          id: 'exerciseRunner.controller.arduino.button.connect'
+        })
+      }), jsx(ArduinoHelpDialogButton, {})]
+    });
+  };
+  //
+  //
+  //
+  return jsxs(Stack, {
+    direction: "row",
+    alignItems: "center",
+    gap: "1rem",
+    children: [renderArduinoBaudRate(), jsxs(Stack, {
+      alignItems: "flex-end",
+      children: [jsx(ExerciseRunnerControllerStatusMessage, {}), renderArduinoStatus()]
+    }), renderArduinoConnectButton()]
+  });
+};
+
+export { ArduinoControllerStatusMessage as default };

package/es/components/material-exercise/exercise-runner/arduino/ArduinoErrorDialog.d.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+declare const ArduinoErrorDialog: React.VFC;
+export default ArduinoErrorDialog;

package/es/components/material-exercise/exercise-runner/arduino/ArduinoErrorDialog.js

@@ -0,0 +1,112 @@
+import { asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRawEliceIntl } from '@elice/intl';
+import { useConnection, useMCUBridgeError, usePermissionState, PermissionAlert, MCUBridgeErrorText } from '@elice/mcu-bridge';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Stack from '@mui/material/Stack';
+
+//
+//
+//
+var ArduinoErrorDialog = function ArduinoErrorDialog() {
+  var intl = useRawEliceIntl();
+  var _useConnection = useConnection(),
+    connect = _useConnection.connect;
+  var _useMCUBridgeError = useMCUBridgeError(),
+    errorCode = _useMCUBridgeError.errorCode,
+    clearError = _useMCUBridgeError.clearError;
+  var _usePermissionState = usePermissionState(),
+    permissionPhase = _usePermissionState.phase,
+    resetPermission = _usePermissionState.reset;
+  var isErrorDialogOpen = permissionPhase === 'denied' || Boolean(errorCode);
+  /**
+   *
+   */
+  var handleClose = function handleClose() {
+    resetPermission();
+    clearError();
+  };
+  // `PermissionAlert` resets `permissionStore` itself; `errorStore` is
+  // separate and must be cleared here or `errorCode` keeps the dialog open.
+  var handleRetry = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.p = _context.n) {
+          case 0:
+            clearError();
+            _context.p = 1;
+            _context.n = 2;
+            return connect();
+          case 2:
+            _context.n = 4;
+            break;
+          case 3:
+            _context.p = 3;
+            _context.v;
+          case 4:
+            return _context.a(2);
+        }
+      }, _callee, null, [[1, 3]]);
+    }));
+    return function handleRetry() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  /**
+   *
+   */
+  var renderErrorDialogTitle = function renderErrorDialogTitle() {
+    return jsx(DialogTitle, {
+      children: intl.formatMessage({
+        id: 'exerciseRunner.arduino.error.title'
+      })
+    });
+  };
+  /**
+   *
+   */
+  var renderErrorDialogContent = function renderErrorDialogContent() {
+    return jsx(DialogContent, {
+      children: jsxs(Stack, {
+        spacing: 1.5,
+        children: [permissionPhase === 'denied' ? jsx(PermissionAlert, {
+          onRetry: handleRetry
+        }) : null, errorCode ? jsx(MCUBridgeErrorText, {
+          code: errorCode,
+          variant: "body2",
+          color: "error"
+        }) : null]
+      })
+    });
+  };
+  /**
+   *
+   */
+  var renderErrorDialogActions = function renderErrorDialogActions() {
+    return jsx(DialogActions, {
+      children: jsx(Button, {
+        color: "inherit",
+        onClick: handleClose,
+        children: intl.formatMessage({
+          id: 'exerciseRunner.arduino.error.close'
+        })
+      })
+    });
+  };
+  //
+  //
+  //
+  return jsxs(Dialog, {
+    fullWidth: true,
+    open: isErrorDialogOpen,
+    maxWidth: "sm",
+    onClose: handleClose,
+    children: [renderErrorDialogTitle(), renderErrorDialogContent(), renderErrorDialogActions()]
+  });
+};
+
+export { ArduinoErrorDialog as default };

package/es/components/material-exercise/exercise-runner/arduino/ArduinoHelpDialog.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ArduinoHelpDialog: React.VFC;
+export default ArduinoHelpDialog;

package/es/components/material-exercise/exercise-runner/arduino/ArduinoHelpDialog.js

@@ -0,0 +1,161 @@
+import { slicedToArray as _slicedToArray } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { useRawEliceIntl } from '@elice/intl';
+import { EliceIcon } from '@elice/mui-elements';
+import { faBookAlt, faArrowRight } from '@fortawesome/pro-regular-svg-icons';
+import { Card, CardActionArea } from '@mui/material';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Checkbox from '@mui/material/Checkbox';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { useArduinoBridge } from './_context.js';
+import ArduinoHelpDialogChecklist from './ArduinoHelpDialogChecklist.js';
+
+//
+//
+//
+var STORAGE_KEY = 'elice-material-exercise-arduino-help-modal-closed';
+var STORAGE_VALUE = 'true';
+var ARDUINO_FAQ_URL = 'https://eli.so/arduino-faq';
+//
+//
+//
+var ArduinoHelpDialog = function ArduinoHelpDialog() {
+  var intl = useRawEliceIntl();
+  var _useArduinoBridge = useArduinoBridge(),
+    isHelpDialogOpen = _useArduinoBridge.isHelpDialogOpen,
+    openHelpDialog = _useArduinoBridge.openHelpDialog,
+    closeHelpDialog = _useArduinoBridge.closeHelpDialog;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    wasAutoOpened = _React$useState2[0],
+    setWasAutoOpened = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    dontShowAgain = _React$useState4[0],
+    setDontShowAgain = _React$useState4[1];
+  //
+  // Auto-popup once on first visit (localStorage flag survives reloads).
+  //
+  React.useEffect(function () {
+    var isClosed = localStorage.getItem(STORAGE_KEY) === STORAGE_VALUE;
+    if (!isClosed) {
+      openHelpDialog();
+      setWasAutoOpened(true);
+    }
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  /**
+   *
+   */
+  var handleClose = function handleClose() {
+    if (dontShowAgain) {
+      localStorage.setItem(STORAGE_KEY, STORAGE_VALUE);
+    }
+    closeHelpDialog();
+    setWasAutoOpened(false);
+    setDontShowAgain(false);
+  };
+  /**
+   *
+   */
+  var renderDialogManual = function renderDialogManual() {
+    return jsx(Card, {
+      variant: "outlined",
+      children: jsx(CardActionArea, {
+        component: "a",
+        href: ARDUINO_FAQ_URL,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        sx: {
+          p: 1.5
+        },
+        children: jsxs(Stack, {
+          direction: "row",
+          spacing: 1.5,
+          alignItems: "center",
+          children: [jsx(EliceIcon, {
+            icon: faBookAlt
+          }), jsxs(Box, {
+            sx: {
+              flex: 1,
+              minWidth: 0
+            },
+            children: [jsx(Typography, {
+              variant: "body2",
+              fontWeight: 700,
+              children: intl.formatMessage({
+                id: 'exerciseRunner.arduino.help.manual.title'
+              })
+            }), jsx(Typography, {
+              variant: "caption",
+              color: "text.secondary",
+              children: intl.formatMessage({
+                id: 'exerciseRunner.arduino.help.manual.detail'
+              })
+            })]
+          }), jsx(EliceIcon, {
+            icon: faArrowRight
+          })]
+        })
+      })
+    });
+  };
+  //
+  //
+  //
+  return jsxs(Dialog, {
+    fullWidth: true,
+    open: isHelpDialogOpen,
+    maxWidth: "sm",
+    onClose: handleClose,
+    children: [jsx(DialogTitle, {
+      children: intl.formatMessage({
+        id: 'exerciseRunner.arduino.help.title'
+      })
+    }), jsx(DialogContent, {
+      children: jsxs(Stack, {
+        spacing: 2.5,
+        children: [jsx(Typography, {
+          variant: "body2",
+          color: "text.secondary",
+          children: intl.formatMessage({
+            id: 'exerciseRunner.arduino.help.greeting'
+          })
+        }), jsx(ArduinoHelpDialogChecklist, {}), renderDialogManual()]
+      })
+    }), jsxs(DialogActions, {
+      sx: {
+        justifyContent: 'space-between'
+      },
+      children: [wasAutoOpened ? jsx(FormControlLabel, {
+        control: jsx(Checkbox, {
+          size: "small",
+          checked: dontShowAgain,
+          onChange: function onChange(e) {
+            return setDontShowAgain(e.target.checked);
+          }
+        }),
+        label: intl.formatMessage({
+          id: 'exerciseRunner.arduino.help.dontShowAgain'
+        })
+      }) : jsx(Box, {}), jsx(Button, {
+        color: "inherit",
+        onClick: handleClose,
+        children: intl.formatMessage({
+          id: 'exerciseRunner.arduino.help.close'
+        })
+      })]
+    })]
+  });
+};
+
+export { ArduinoHelpDialog as default };

package/es/components/material-exercise/exercise-runner/arduino/ArduinoHelpDialogButton.d.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+declare const ArduinoHelpDialogButton: React.VFC;
+export default ArduinoHelpDialogButton;

package/es/components/material-exercise/exercise-runner/arduino/ArduinoHelpDialogButton.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import { eilStatusInfo } from '@elice/icons';
+import { useRawEliceIntl } from '@elice/intl';
+import { useArduinoBridge } from './_context.js';
+import ExerciseMenuButton from '../../../shared/exercise-menu-button/ExerciseMenuButton.js';
+
+//
+//
+//
+var ArduinoHelpDialogButton = function ArduinoHelpDialogButton() {
+  var intl = useRawEliceIntl();
+  var _useArduinoBridge = useArduinoBridge(),
+    isHelpDialogOpen = _useArduinoBridge.isHelpDialogOpen,
+    openHelpDialog = _useArduinoBridge.openHelpDialog;
+  return jsx(ExerciseMenuButton, {
+    icon: eilStatusInfo,
+    title: intl.formatMessage({
+      id: 'exerciseRunner.arduino.help.button'
+    }),
+    active: isHelpDialogOpen,
+    onClick: openHelpDialog
+  });
+};
+
+export { ArduinoHelpDialogButton as default };

package/es/components/material-exercise/exercise-runner/arduino/ArduinoHelpDialogChecklist.d.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+declare const ArduinoHelpDialogChecklist: React.VFC;
+export default ArduinoHelpDialogChecklist;