@elice/material-exercise 1.220803.0

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerTimer.js

@@ -0,0 +1,81 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var recoil = require('recoil');
+var styled = require('styled-components');
+var recoil$1 = require('../context/recoil.js');
+var context = require('../context/context.js');
+require('../context/recoilTypes.js');
+require('../context/subjects.js');
+require('../context/ExerciseProvider.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledControllerTimerText = styled__default["default"](blocks.Text).withConfig({
+  componentId: "sc-1ez8ns0-0"
+})(["margin-top:-3px;color:", ";"], designTokens.base.color.secondary4);
+
+const ExerciseRunnerControllerTimer = () => {
+  const {
+    materialExerciseId
+  } = React__default["default"].useContext(context.ExerciseContext);
+  const exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
+  const isRunning = recoil.useRecoilValue(recoil$1.exerciseRunnerRunningState);
+  const [exerciseTimeLimit, setExerciseTimeLimit] = React__default["default"].useState(0);
+  const [remainingTime, setRemainingTime] = React__default["default"].useState(0); //
+  // Get time limit from exercise.
+  //
+
+  React__default["default"].useEffect(() => {
+    var _a, _b;
+
+    if (isRunning) {
+      setExerciseTimeLimit((_b = (_a = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) === null || _a === void 0 ? void 0 : _a.timeLimit) !== null && _b !== void 0 ? _b : 0);
+    } else {
+      setExerciseTimeLimit(0);
+    }
+  }, [exercise, isRunning]); //
+  // Calculate remaining time.
+  //
+
+  React__default["default"].useEffect(() => {
+    const startTime = Date.now();
+    setRemainingTime(exerciseTimeLimit);
+    const interval = window.setInterval(() => {
+      const newRemainingTime = exerciseTimeLimit - (Date.now() - startTime);
+
+      if (newRemainingTime < 0) {
+        window.clearInterval(interval);
+      }
+
+      setRemainingTime(Math.max(newRemainingTime, 0));
+    }, 100);
+    return () => {
+      setRemainingTime(0);
+      window.clearInterval(interval);
+    };
+  }, [exerciseTimeLimit]); //
+  //
+  //
+
+  if (!remainingTime) {
+    return null;
+  }
+
+  return React__default["default"].createElement(StyledControllerTimerText, {
+    size: "small"
+  }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+    id: "exerciseRunner.controller.timer.runningRemainingTime",
+    values: {
+      remainingTime: new Date(remainingTime).toISOString().substr(14, 5)
+    }
+  }));
+};
+
+module.exports = ExerciseRunnerControllerTimer;

package/cjs/components/material-exercise/exercise-runner/index.d.ts

@@ -0,0 +1 @@
+export { default as ExerciseRunner } from './ExerciseRunner';

package/cjs/components/material-exercise/exercise-runner/locales/en.json.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var phrasesEn = {"exerciseRunner.controller.arduino.connectionStatus.connected":"Connected to Arduino","exerciseRunner.controller.arduino.connectionStatus.connectedDevice":"Connected to {device}","exerciseRunner.controller.arduino.connectionStatus.connecting":"Connecting to Elice Arduino Agent","exerciseRunner.controller.arduino.connectionStatus.disconnected":"Disconnected from Elice Arduino Agent","exerciseRunner.controller.arduino.connectionStatus.noDevice":"No connected device","exerciseRunner.controller.arduino.connectionStatus.reconnecting":"Connecting to Elice Arduino Agent","exerciseRunner.controller.arduino.connectionStatus.uploading":"Uploading...","exerciseRunner.controller.buttonGroup.button.compile":"Compile","exerciseRunner.controller.buttonGroup.button.helpRequest":"Help me","exerciseRunner.controller.buttonGroup.button.run":"Run","exerciseRunner.controller.buttonGroup.button.stop":"Stop","exerciseRunner.controller.buttonGroup.button.submit":"Submit","exerciseRunner.controller.buttonGroup.button.submit.tooltip.noSubmit":"Exercise without submission","exerciseRunner.controller.buttonGroup.button.syncRequest":"Sync code","exerciseRunner.controller.runningInfo.error.fetch":"An error occurred while fetching running info","exerciseRunner.controller.runningInfo.lastRunningDatetime":"Last running datetime","exerciseRunner.controller.runningInfo.lastSubmitDatetime":"Last submit datetime","exerciseRunner.controller.runningInfo.lastSubmitScore":"Last submit score","exerciseRunner.controller.runningInfo.score":"{score}","exerciseRunner.controller.statusMessage.closed":"Editor disconnected","exerciseRunner.controller.statusMessage.connecting":"Connecting to editor...","exerciseRunner.controller.statusMessage.open":"Editor connected","exerciseRunner.controller.timer.runningRemainingTime":"Remaining: {remainingTime}","exerciseRunner.submitErrorDialog.action.confirm":"OK","exerciseRunner.submitErrorDialog.action.reload":"Reload page","exerciseRunner.submitErrorDialog.body.commonError":"An error occurred while running the code.\nPlease refresh and try again.","exerciseRunner.submitErrorDialog.body.exceedSubmitGradeLimit":"You have exceeded the allowed number of lab submissions.","exerciseRunner.submitErrorDialog.body.expiredExerciseImage":"The exercise image has been updated.\nPlease refresh and try again.","exerciseRunner.submitErrorDialog.body.networkError":"An error occurred while running the code.\nPlease refresh and try again.\nIf the problem persists, please check the network status.","exerciseRunner.submitErrorDialog.body.notForSubmitGrade":"This exercise is not allowed to be submitted.","exerciseRunner.submitErrorDialog.body.notPreparedRoom":"The exercise room is being prepared.\nPlease try again later.","exerciseRunner.submitErrorDialog.body.roomIsBusy":"The exercise room is running.\nPlease wait a moment.","exerciseRunner.submitErrorDialog.body.unknown":"An error occurred while running the code.\nPlease try again later.","exerciseRunner.submitErrorDialog.title":"Unable to run the code"};
+
+module.exports = phrasesEn;

package/cjs/components/material-exercise/exercise-runner/locales/ko.json.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var phrasesKo = {"exerciseRunner.controller.arduino.connectionStatus.connected":"아두이노 기기 연결됨","exerciseRunner.controller.arduino.connectionStatus.connectedDevice":"{device} 연결됨","exerciseRunner.controller.arduino.connectionStatus.connecting":"엘리스 아두이노 에이전트 연결 중","exerciseRunner.controller.arduino.connectionStatus.disconnected":"엘리스 아두이노 에이전트 연결 끊김","exerciseRunner.controller.arduino.connectionStatus.noDevice":"연결된 기기 없음","exerciseRunner.controller.arduino.connectionStatus.reconnecting":"엘리스 아두이노 에이전트 연결 중","exerciseRunner.controller.arduino.connectionStatus.uploading":"업로드 중","exerciseRunner.controller.buttonGroup.button.compile":"컴파일","exerciseRunner.controller.buttonGroup.button.helpRequest":"도와주세요","exerciseRunner.controller.buttonGroup.button.run":"실행","exerciseRunner.controller.buttonGroup.button.stop":"정지","exerciseRunner.controller.buttonGroup.button.submit":"제출","exerciseRunner.controller.buttonGroup.button.submit.tooltip.noSubmit":"실행만 가능한 실습입니다.","exerciseRunner.controller.buttonGroup.button.syncRequest":"코드 동기화","exerciseRunner.controller.runningInfo.error.fetch":"최종 실행 내역을 가져오는데 문제가 발생하였습니다.","exerciseRunner.controller.runningInfo.lastRunningDatetime":"최종 실행 시간","exerciseRunner.controller.runningInfo.lastSubmitDatetime":"최종 제출 시간","exerciseRunner.controller.runningInfo.lastSubmitScore":"최종 제출 점수","exerciseRunner.controller.runningInfo.score":"{score} 점","exerciseRunner.controller.statusMessage.closed":"에디터 연결 끊김","exerciseRunner.controller.statusMessage.connecting":"에디터 연결 중...","exerciseRunner.controller.statusMessage.open":"에디터 연결됨","exerciseRunner.controller.timer.runningRemainingTime":"실행 제한시간: {remainingTime}","exerciseRunner.submitErrorDialog.action.confirm":"확인","exerciseRunner.submitErrorDialog.action.reload":"새로고침","exerciseRunner.submitErrorDialog.body.commonError":"코드 실행 중 오류가 발생했습니다.\n새로고침 후 다시 시도해주세요.","exerciseRunner.submitErrorDialog.body.exceedSubmitGradeLimit":"실습 제출 허용 횟수를 초과했습니다.","exerciseRunner.submitErrorDialog.body.expiredExerciseImage":"실습환경이 업데이트 되었습니다.\n새로고침 후 다시 시도해주세요.","exerciseRunner.submitErrorDialog.body.networkError":"코드 실행 중 오류가 발생했습니다.\n새로고침 후 다시 시도해주세요.\n문제가 계속되면 네트워크 상태를 확인해주세요.","exerciseRunner.submitErrorDialog.body.notForSubmitGrade":"제출이 허용되지 않은 실습입니다.","exerciseRunner.submitErrorDialog.body.notPreparedRoom":"실습환경이 준비 중입니다.\n잠시 후 다시 시도해주세요.","exerciseRunner.submitErrorDialog.body.roomIsBusy":"실습을 실행하고 있습니다.\n잠시만 기다려주세요.","exerciseRunner.submitErrorDialog.body.unknown":"코드 실행 중 오류가 발생했습니다.\n잠시 후 다시 시도해주세요.","exerciseRunner.submitErrorDialog.title":"실습을 실행할 수 없습니다"};
+
+module.exports = phrasesKo;

package/cjs/components/material-exercise/exercise-submit-history/ExerciseSubmitHistory.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface ExerciseSubmitHistoryProps {
+    onHide?: () => void;
+}
+declare const ExerciseSubmitHistory: React.VFC<ExerciseSubmitHistoryProps>;
+export default ExerciseSubmitHistory;

package/cjs/components/material-exercise/exercise-submit-history/ExerciseSubmitHistory.js

@@ -0,0 +1,341 @@
+'use strict';
+
+var React = require('react');
+var apiClient = require('@elice/api-client');
+var blocks = require('@elice/blocks');
+var types = require('@elice/types');
+var dayjs = require('dayjs');
+var humps = require('humps');
+var recoil = require('recoil');
+var ExerciseVersionList = require('../../shared/exercise-version-list/ExerciseVersionList.js');
+var ExerciseVersionListItem = require('../../shared/exercise-version-list/ExerciseVersionListItem.js');
+var MaterialModal = require('../../shared/material-modal/MaterialModal.js');
+var MonacoEditorLazy = require('../../shared/monaco-editor/MonacoEditorLazy.js');
+require('../../shared/monaco-editor/MonacoEditorPerferenceForm.js');
+require('monaco-editor/esm/vs/editor/editor.api');
+require('../../shared/monaco-editor/constants/monaco/preferences.js');
+var stylesheets = require('../../../constants/stylesheets.js');
+var useMaterialExerciseFileUrl = require('../../../hooks/useMaterialExerciseFileUrl.js');
+var recoil$1 = require('../context/recoil.js');
+var context = require('../context/context.js');
+require('../context/recoilTypes.js');
+require('../context/subjects.js');
+require('../context/ExerciseProvider.js');
+var ExerciseSubmitHistoryOutput = require('./ExerciseSubmitHistoryOutput.js');
+var ExerciseVersionListItem_styled = require('../../shared/exercise-version-list/ExerciseVersionListItem.styled.js');
+var ExerciseSubmitHistory_styled = require('./ExerciseSubmitHistory.styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespaceDefaultOnly (e) { return Object.freeze({ __proto__: null, 'default': e }); }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
+
+const AsyncFileTree = React__default["default"].lazy(() => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('../../shared/file-tree/FileTree.js')); }));
+const AsyncFileTreeList = React__default["default"].lazy(() => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('../../shared/file-tree/FileTreeList.js')); }));
+const AsyncFileViewer = React__default["default"].lazy(() => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('../../shared/file-viewer/FileViewer.js')); }));
+
+const ExerciseSubmitHistory = ({
+  onHide
+}) => {
+  const COUNT = 100;
+  const {
+    materialExerciseId,
+    exerciseRoomId,
+    exerciseRoomUserId
+  } = React__default["default"].useContext(context.ExerciseContext);
+  const exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
+  const preference = recoil.useRecoilValue(recoil$1.exerciseEditorPreferenceState);
+  const [runningList, setRunningList] = React.useState([]);
+  const [selectedRunning, setSelectedRunning] = React.useState(null);
+  const [hasMoreRunning, setMoreRunning] = React.useState(false);
+  const [offset, setOffset] = React.useState(0);
+  const [fileList, setFileList] = React.useState([]);
+  const [selectedFile, setSelectedFile] = React.useState(null);
+  const [usercodeContent, setUsercodeContent] = React.useState(null);
+  const [isUserChanged, setIsUserChanged] = React.useState(false);
+  const [isFile, setIsFile] = React.useState(false);
+  const [isFileReady, setIsFileReady] = React.useState(false);
+  const selectedFileUrl = useMaterialExerciseFileUrl.useMaterialExerciseFileUrl({
+    filename: selectedFile,
+    exercise,
+    exerciseRoomId
+  }); //
+  //
+  //
+
+  React.useEffect(() => {
+    void (async () => {
+      try {
+        const {
+          exerciseRunnings
+        } = await apiClient.getOrgMaterialExerciseExerciseRunningList({
+          materialExerciseId,
+          userId: exerciseRoomUserId,
+          offset,
+          count: COUNT
+        });
+        setRunningList(runningList => {
+          if (runningList.length === 0 && exerciseRunnings[0]) {
+            setSelectedRunning(exerciseRunnings[0]);
+          }
+
+          return [...runningList, ...exerciseRunnings];
+        });
+        setMoreRunning(exerciseRunnings.length === COUNT);
+      } catch (err) {}
+    })();
+  }, [materialExerciseId, exerciseRoomUserId, offset]); //
+  // When id of selected running is updated,
+  // Get exercise running data and filelist.
+  //
+
+  React.useEffect(() => {
+    void (async () => {
+      var _a, _b, _c, _d, _e;
+
+      if (!selectedRunning) {
+        return;
+      }
+
+      try {
+        const {
+          exerciseRunning
+        } = await apiClient.getOrgMaterialExerciseExerciseRunningGet({
+          exerciseRunningId: selectedRunning.id,
+          returnFilelist: true,
+          returnUsercodeFilelist: true
+        });
+        setSelectedRunning(exerciseRunning);
+
+        if ((exercise === null || exercise === void 0 ? void 0 : exercise.envType) === types.enums.ExerciseEnvType.MultiLanguage) {
+          let languages, environment;
+
+          try {
+            const languagesResponse = await apiClient.getOrgMaterialExerciseExerciseImageExerciseFileGet({
+              exerciseImageId: exerciseRunning.exerciseImage.id,
+              filename: '.languages.json'
+            });
+            languages = humps.camelizeKeys(JSON.parse(languagesResponse.exerciseFile.content));
+          } catch (e) {
+            console.error(e);
+          }
+
+          try {
+            const response = await apiClient.getOrgMaterialExerciseExerciseRoomUserFileGet({
+              filename: '.environment.json',
+              exerciseRoomId,
+              targetDatetime: exerciseRunning.createdDatetime
+            });
+            environment = humps.camelizeKeys(JSON.parse(response.userFile.content));
+          } catch (e) {
+            // API returns error when the user hasn't changed the language
+            if (languages && Object.keys(languages).length > 0) {
+              environment = {
+                language: Object.keys(languages)[0]
+              };
+            }
+          }
+
+          const rootDir = languages[environment.language].rootDir;
+          const initialOpenFilelist = (_a = languages === null || languages === void 0 ? void 0 : languages[environment === null || environment === void 0 ? void 0 : environment.language]) === null || _a === void 0 ? void 0 : _a.initialOpenFilelist;
+          setFileList([...((_b = exerciseRunning.exerciseImage.filelist) !== null && _b !== void 0 ? _b : []), ...((_c = exerciseRunning.exerciseRoom.filelist) !== null && _c !== void 0 ? _c : [])].filter(filepath => filepath.startsWith(rootDir)));
+
+          if ((initialOpenFilelist === null || initialOpenFilelist === void 0 ? void 0 : initialOpenFilelist.length) > 0) {
+            setSelectedFile(initialOpenFilelist[0]);
+          }
+        } else {
+          setFileList([...((_d = exerciseRunning.exerciseImage.filelist) !== null && _d !== void 0 ? _d : []), ...((_e = exerciseRunning.exerciseRoom.filelist) !== null && _e !== void 0 ? _e : [])]);
+
+          if (exerciseRunning.exerciseImage.taskFilelist && exerciseRunning.exerciseImage.taskFilelist.length > 0) {
+            setSelectedFile(exerciseRunning.exerciseImage.taskFilelist[0]);
+          }
+        }
+      } catch (err) {
+        console.error(err);
+      }
+    })(); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedRunning === null || selectedRunning === void 0 ? void 0 : selectedRunning.id]); //
+  // When selectedFile or selectedRunning is updated,
+  // Get usercode of selected file.
+  //
+
+  React.useEffect(() => {
+    void (async () => {
+      setIsFileReady(false);
+
+      if (!(selectedRunning === null || selectedRunning === void 0 ? void 0 : selectedRunning.exerciseImage) || !selectedFile || !exerciseRoomId) {
+        return;
+      }
+
+      const {
+        usercode
+      } = await apiClient.getOrgMaterialExerciseUsercodeGet({
+        filename: selectedFile,
+        exerciseRoomId: selectedRunning.exerciseRoom.id,
+        targetDatetime: selectedRunning.createdDatetime
+      });
+
+      if ((usercode === null || usercode === void 0 ? void 0 : usercode.content) !== null && (usercode === null || usercode === void 0 ? void 0 : usercode.content) !== undefined) {
+        setIsUserChanged(true);
+        setIsFile(false);
+        setUsercodeContent(usercode.content);
+        setIsFileReady(true);
+      } else {
+        try {
+          const {
+            exerciseFile
+          } = await apiClient.getOrgMaterialExerciseExerciseImageExerciseFileGet({
+            exerciseImageId: selectedRunning.exerciseImage.id,
+            filename: selectedFile
+          });
+
+          if ((exerciseFile === null || exerciseFile === void 0 ? void 0 : exerciseFile.content) !== null && (exerciseFile === null || exerciseFile === void 0 ? void 0 : exerciseFile.content) !== undefined) {
+            setIsUserChanged(false);
+            setIsFile(false);
+            setUsercodeContent(exerciseFile.content);
+            setIsFileReady(true);
+          } else {
+            setIsUserChanged(false);
+            setIsFile(true);
+            setIsFileReady(true);
+          }
+        } catch (_a) {
+          setIsUserChanged(false);
+          setIsFile(true);
+          setIsFileReady(true);
+        }
+      }
+    })();
+  }, [selectedFile, exerciseRoomId, selectedRunning]);
+  /**
+   *
+   */
+
+  const renderRunningVersionList = () => {
+    return React__default["default"].createElement(ExerciseVersionList, null, runningList.map(exerciseRunning => {
+      return React__default["default"].createElement(ExerciseVersionListItem, {
+        key: exerciseRunning.id,
+        selected: Boolean(selectedRunning && selectedRunning.id === exerciseRunning.id),
+        onClick: () => {
+          setSelectedRunning(exerciseRunning);
+        }
+      }, React__default["default"].createElement(ExerciseVersionListItem_styled.StyledExerciseVersionRunType, {
+        role: "gray3",
+        size: "small"
+      }, exerciseRunning.runType === types.enums.ExerciseRunType.Grade ? '제출' : '실행'), React__default["default"].createElement(ExerciseVersionListItem_styled.StyledExerciseVersionDatetime, {
+        role: "gray3",
+        size: "small"
+      }, dayjs__default["default"](exerciseRunning.createdDatetime).format('YYYY.M.DD hh:mm')), React__default["default"].createElement(ExerciseVersionListItem_styled.StyledExerciseVersionScore, {
+        role: "gray3",
+        size: "small"
+      }, exerciseRunning.score));
+    }), hasMoreRunning ? React__default["default"].createElement(ExerciseVersionListItem, {
+      onClick: () => setOffset(prevOffset => prevOffset + COUNT)
+    }, React__default["default"].createElement(blocks.Flex, {
+      align: "center",
+      justify: "center",
+      width: "100%"
+    }, React__default["default"].createElement(blocks.Text, {
+      role: "important"
+    }, "\uB354 \uBD88\uB7EC\uC624\uAE30"))) : null);
+  };
+  /**
+   *
+   */
+
+
+  const renderRunningOutput = () => {
+    if (!selectedRunning) {
+      return null;
+    }
+
+    return React__default["default"].createElement(ExerciseSubmitHistoryOutput, {
+      exerciseRunningId: selectedRunning.id
+    });
+  };
+  /**
+   *
+   */
+
+
+  const renderRunningContent = () => {
+    var _a;
+
+    if (!selectedFile) {
+      return null;
+    }
+
+    const runningId = Number((_a = selectedRunning === null || selectedRunning === void 0 ? void 0 : selectedRunning.id) !== null && _a !== void 0 ? _a : 0);
+    const uniqueFilePath = `submit-history/${exerciseRoomId}/r${runningId}`;
+    const editorFilename = `${uniqueFilePath}/${selectedFile}`;
+    return React__default["default"].createElement(blocks.Flex, {
+      width: "100%",
+      auto: true,
+      overflow: "hidden"
+    }, React__default["default"].createElement(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
+      initialWidth: 240,
+      resizeHandles: ['e'],
+      collapseWidth: 100
+    }), React__default["default"].createElement(ExerciseSubmitHistory_styled.StyledFileTreeWrapper, null, React__default["default"].createElement(React__default["default"].Suspense, {
+      fallback: null
+    }, React__default["default"].createElement(AsyncFileTree, {
+      activePath: selectedFile,
+      exerciseRoomFilelist: fileList,
+      imageFilelist: [],
+      onActivePathChange: (path, isDirectory = false) => {
+        if (isDirectory) {
+          return;
+        }
+
+        setSelectedFile(path);
+      }
+    }, React__default["default"].createElement(AsyncFileTreeList, null))))), React__default["default"].createElement(blocks.Flex, {
+      column: true,
+      auto: true,
+      height: "100%",
+      overflow: "hidden"
+    }, !isUserChanged && React__default["default"].createElement(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryNotChanged, null, React__default["default"].createElement(blocks.Text, {
+      role: "white",
+      size: "tiny"
+    }, "\uC218\uC815 \uB0B4\uC5ED\uC774 \uC5C6\uB294 \uD30C\uC77C\uC785\uB2C8\uB2E4.")), React__default["default"].createElement(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryEditorWrapper, null, isFile ? React__default["default"].createElement(React__default["default"].Suspense, {
+      fallback: null
+    }, React__default["default"].createElement(AsyncFileViewer, {
+      key: editorFilename,
+      filename: editorFilename,
+      fileurl: selectedFileUrl || ''
+    })) : React__default["default"].createElement(MonacoEditorLazy, {
+      key: editorFilename,
+      defaultValue: usercodeContent !== null && usercodeContent !== void 0 ? usercodeContent : '',
+      filename: editorFilename,
+      preference: Object.assign(Object.assign({}, preference), {
+        scrollBeyondLastLine: false,
+        readOnly: true
+      })
+    }), !isFileReady && React__default["default"].createElement(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryEditorLoadingScreen, null, React__default["default"].createElement(blocks.Spinner, null)))));
+  }; //
+  //
+  //
+
+
+  return React__default["default"].createElement(MaterialModal, {
+    title: "\uC81C\uCD9C \uC774\uB825",
+    onHide: onHide
+  }, React__default["default"].createElement(blocks.Flex, {
+    width: "100%",
+    height: "100%",
+    overflow: "hidden"
+  }, React__default["default"].createElement(blocks.Box, {
+    width: "15rem",
+    height: "100%",
+    overflow: "hidden"
+  }, renderRunningVersionList()), React__default["default"].createElement(blocks.Flex, {
+    auto: true,
+    column: true,
+    height: "100%",
+    overflow: "hidden"
+  }, renderRunningContent(), renderRunningOutput())));
+};
+
+module.exports = ExerciseSubmitHistory;

package/cjs/components/material-exercise/exercise-submit-history/ExerciseSubmitHistory.styled.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const StyledFileTreeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledExerciseSubmitHistoryEditorWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledExerciseSubmitHistoryNotChanged: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledExerciseSubmitHistoryEditorLoadingScreen: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledExerciseSubmitHistoryOutputText: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledExerciseSubmitHistoryOutput: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledExerciseSubmitHistoryOutputImageLink: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const StyledExerciseSubmitHistoryOutputImage: import("styled-components").StyledComponent<"img", any, {}, never>;

package/cjs/components/material-exercise/exercise-submit-history/ExerciseSubmitHistory.styled.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledFileTreeWrapper = styled__default["default"].div.withConfig({
+  componentId: "sc-uooiby-0"
+})(["overflow:auto;width:100%;height:100%;background-color:", ";"], designTokens.base.color.navy9);
+const StyledExerciseSubmitHistoryEditorWrapper = styled__default["default"](blocks.Flex).withConfig({
+  componentId: "sc-uooiby-1"
+})(["position:relative;flex-direction:column;flex:1 1 0%;width:100%;overflow:hidden;"]);
+const StyledExerciseSubmitHistoryNotChanged = styled__default["default"].div.withConfig({
+  componentId: "sc-uooiby-2"
+})(["background-color:", ";padding:0.5rem;"], designTokens.base.color.navy7);
+const StyledExerciseSubmitHistoryEditorLoadingScreen = styled__default["default"](blocks.Flex).withConfig({
+  componentId: "sc-uooiby-3"
+})(["position:absolute;top:0;left:0;right:0;bottom:0;background-color:", ";align-items:center;justify-content:center;"], designTokens.base.color.navy9);
+const StyledExerciseSubmitHistoryOutputText = styled__default["default"].span.withConfig({
+  componentId: "sc-uooiby-4"
+})(["white-space:pre-wrap;color:", ";font-size:0.875rem;line-height:1.5rem;&.grader{color:", ";}&.info{color:", ";display:block;}&.file{display:block;color:", ";cursor:pointer;&:hover{color:", ";}}"], designTokens.base.color.white, designTokens.base.color.secondary4, designTokens.base.color.red8, designTokens.base.color.secondary4, designTokens.base.color.white);
+const StyledExerciseSubmitHistoryOutput = styled__default["default"].div.withConfig({
+  componentId: "sc-uooiby-5"
+})(["width:100%;height:100%;overflow:scroll;background-color:black;padding:0.5rem;font-size:14px;font-family:Elice Digital Coding;"]);
+const StyledExerciseSubmitHistoryOutputImageLink = styled__default["default"].a.withConfig({
+  componentId: "sc-uooiby-6"
+})(["display:block;margin:9.8px 0;padding:0;width:100%;max-width:400px;"]);
+const StyledExerciseSubmitHistoryOutputImage = styled__default["default"].img.withConfig({
+  componentId: "sc-uooiby-7"
+})(["display:block;width:100%;"]);
+
+exports.StyledExerciseSubmitHistoryEditorLoadingScreen = StyledExerciseSubmitHistoryEditorLoadingScreen;
+exports.StyledExerciseSubmitHistoryEditorWrapper = StyledExerciseSubmitHistoryEditorWrapper;
+exports.StyledExerciseSubmitHistoryNotChanged = StyledExerciseSubmitHistoryNotChanged;
+exports.StyledExerciseSubmitHistoryOutput = StyledExerciseSubmitHistoryOutput;
+exports.StyledExerciseSubmitHistoryOutputImage = StyledExerciseSubmitHistoryOutputImage;
+exports.StyledExerciseSubmitHistoryOutputImageLink = StyledExerciseSubmitHistoryOutputImageLink;
+exports.StyledExerciseSubmitHistoryOutputText = StyledExerciseSubmitHistoryOutputText;
+exports.StyledFileTreeWrapper = StyledFileTreeWrapper;

package/cjs/components/material-exercise/exercise-submit-history/ExerciseSubmitHistoryOutput.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ExerciseSubmitHistoryOutputProps {
+    exerciseRunningId: number;
+}
+declare const ExerciseSubmitHistoryOutput: React.FC<ExerciseSubmitHistoryOutputProps>;
+export default ExerciseSubmitHistoryOutput;

package/cjs/components/material-exercise/exercise-submit-history/ExerciseSubmitHistoryOutput.js

@@ -0,0 +1,119 @@
+'use strict';
+
+var React = require('react');
+var apiClient = require('@elice/api-client');
+var blocks = require('@elice/blocks');
+var FileSaver = require('file-saver');
+var stylesheets = require('../../../constants/stylesheets.js');
+var ExerciseSubmitHistory_styled = require('./ExerciseSubmitHistory.styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var FileSaver__default = /*#__PURE__*/_interopDefaultLegacy(FileSaver);
+
+const ExerciseSubmitHistoryOutput = ({
+  exerciseRunningId
+}) => {
+  const [runningOutput, setRunningOutput] = React__default["default"].useState([]);
+  React__default["default"].useEffect(() => {
+    if (exerciseRunningId) {
+      apiClient.getOrgMaterialExerciseExerciseRunningOutputGet({
+        exerciseRunningId
+      }).then(({
+        output
+      }) => {
+        setRunningOutput(output);
+      }).catch(console.error);
+    }
+  }, [exerciseRunningId]);
+
+  const downloadFile = (fileContent, fileName) => {
+    const byteString = atob(fileContent.split(',')[1]);
+    const mimeString = fileContent.split(',')[0].split(':')[1].split(';')[0];
+    const ab = new ArrayBuffer(byteString.length);
+    const ia = new Uint8Array(ab);
+
+    for (let i = 0; i < byteString.length; i++) {
+      ia[i] = byteString.charCodeAt(i);
+    }
+
+    const blob = new Blob([ab], {
+      type: mimeString
+    });
+    FileSaver__default["default"].saveAs(blob, fileName);
+  };
+
+  const openImageWithNewTab = imgSrc => {
+    const materialImageTab = window.open('about:blank', '_blank');
+    materialImageTab === null || materialImageTab === void 0 ? void 0 : materialImageTab.document.write(`<img src=${imgSrc} />`);
+    materialImageTab === null || materialImageTab === void 0 ? void 0 : materialImageTab.focus();
+  };
+
+  const renderContent = () => {
+    if (runningOutput.length === 0) {
+      return React__default["default"].createElement(blocks.Text, {
+        size: "small",
+        role: "white"
+      }, "\uCD9C\uB825 \uC5C6\uC74C");
+    }
+
+    const getOutputContent = output => {
+      switch (output.type) {
+        case 'text':
+        case 'echo':
+          return React__default["default"].createElement(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryOutputText, null, output.data);
+
+        case 'grader':
+          return React__default["default"].createElement(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryOutputText, {
+            className: "grader"
+          }, output.data);
+
+        case 'info':
+          return React__default["default"].createElement(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryOutputText, {
+            className: "info"
+          }, output.data);
+
+        case 'image':
+          return React__default["default"].createElement(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryOutputImageLink, {
+            onClick: () => openImageWithNewTab(output.data)
+          }, React__default["default"].createElement(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryOutputImage, {
+            src: output.data,
+            alt: "material-exercise-ouput"
+          }));
+
+        case 'file':
+          const fileName = output.data.split(';')[0]; // const fileContent = output.data.substring(fileName.length + 1);
+
+          const fileContent = 'asdf';
+          return React__default["default"].createElement(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryOutputText, {
+            className: "file",
+            onClick: () => downloadFile(fileContent, fileName)
+          }, `Download ${fileName}`);
+
+        case 'html':
+          const encodedData = encodeURI(output.data);
+          return React__default["default"].createElement("iframe", {
+            title: "mat-exec-output",
+            src: `data:text/html;charset=utf-8,${encodedData}`
+          });
+
+        case 'screen':
+        case 'score':
+        case 'web_ready':
+        default:
+          return null;
+      }
+    };
+
+    return runningOutput.map(item => getOutputContent(item));
+  };
+
+  return React__default["default"].createElement(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
+    initialHeight: 200,
+    resizeHandles: ['n'],
+    collapseWidth: 100
+  }), React__default["default"].createElement(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryOutput, null, renderContent()));
+};
+
+module.exports = ExerciseSubmitHistoryOutput;

package/cjs/components/material-exercise/exercise-submit-history/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ExerciseSubmitHistory } from './ExerciseSubmitHistory';
+export type { ExerciseSubmitHistoryProps } from './ExerciseSubmitHistory';

package/cjs/components/material-exercise/index.d.ts

@@ -0,0 +1,3 @@
+export { default as MaterialExercise } from './MaterialExercise';
+export type { MaterialExerciseProps, MaterialExerciseApis, } from './MaterialExercise';
+export type { MaterialExerciseCommonApis, MaterialExerciseCommonApiSendTextToTerminal, MaterialExerciseCommonProps, MaterialExerciseCommonPropExerciseImageEmptyOptions, MaterialExerciseCommonPropOnCodeHelpRequest, MaterialExerciseCommonPropOnDefaultExerciseRoomIdSet, MaterialExerciseCommonPropOnExerciseRoomIdChange, MaterialExerciseCommonPropOnRunningDone, MaterialExerciseCommonPropOnSubmit, MaterialExerciseCommonPropOnError, } from './context/types';