@elice/material-exercise 1.220803.0

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Text } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import { useRecoilValue } from 'recoil';
+import styled from 'styled-components';
+import { exerciseState, exerciseRunnerRunningState } from '../context/recoil.js';
+import { ExerciseContext } from '../context/context.js';
+import '../context/recoilTypes.js';
+import '../context/subjects.js';
+import '../context/ExerciseProvider.js';
+
+const StyledControllerTimerText = styled(Text).withConfig({
+  componentId: "sc-1ez8ns0-0"
+})(["margin-top:-3px;color:", ";"], base.color.secondary4);
+
+const ExerciseRunnerControllerTimer = () => {
+  const {
+    materialExerciseId
+  } = React.useContext(ExerciseContext);
+  const exercise = useRecoilValue(exerciseState(materialExerciseId));
+  const isRunning = useRecoilValue(exerciseRunnerRunningState);
+  const [exerciseTimeLimit, setExerciseTimeLimit] = React.useState(0);
+  const [remainingTime, setRemainingTime] = React.useState(0); //
+  // Get time limit from exercise.
+  //
+
+  React.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.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.createElement(StyledControllerTimerText, {
+    size: "small"
+  }, React.createElement(FormattedMessage, {
+    id: "exerciseRunner.controller.timer.runningRemainingTime",
+    values: {
+      remainingTime: new Date(remainingTime).toISOString().substr(14, 5)
+    }
+  }));
+};
+
+export { ExerciseRunnerControllerTimer as default };

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

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

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

@@ -0,0 +1,3 @@
+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"};
+
+export { phrasesEn as default };

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

@@ -0,0 +1,3 @@
+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":"실습을 실행할 수 없습니다"};
+
+export { phrasesKo as default };

package/es/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/es/components/material-exercise/exercise-submit-history/ExerciseSubmitHistory.js

@@ -0,0 +1,332 @@
+import React, { useState, useEffect } from 'react';
+import { getOrgMaterialExerciseExerciseRunningList, getOrgMaterialExerciseExerciseRunningGet, getOrgMaterialExerciseExerciseImageExerciseFileGet, getOrgMaterialExerciseExerciseRoomUserFileGet, getOrgMaterialExerciseUsercodeGet } from '@elice/api-client';
+import { Flex, Box, Text, ResizableNext, Spinner } from '@elice/blocks';
+import { enums } from '@elice/types';
+import dayjs from 'dayjs';
+import { camelizeKeys } from 'humps';
+import { useRecoilValue } from 'recoil';
+import ExerciseVersionList from '../../shared/exercise-version-list/ExerciseVersionList.js';
+import ExerciseVersionListItem from '../../shared/exercise-version-list/ExerciseVersionListItem.js';
+import MaterialModal from '../../shared/material-modal/MaterialModal.js';
+import MonacoEditorLazy from '../../shared/monaco-editor/MonacoEditorLazy.js';
+import '../../shared/monaco-editor/MonacoEditorPerferenceForm.js';
+import 'monaco-editor/esm/vs/editor/editor.api';
+import '../../shared/monaco-editor/constants/monaco/preferences.js';
+import { MATERIAL_RESIZABLE_COMMON_PROPS } from '../../../constants/stylesheets.js';
+import { useMaterialExerciseFileUrl } from '../../../hooks/useMaterialExerciseFileUrl.js';
+import { exerciseState, exerciseEditorPreferenceState } from '../context/recoil.js';
+import { ExerciseContext } from '../context/context.js';
+import '../context/recoilTypes.js';
+import '../context/subjects.js';
+import '../context/ExerciseProvider.js';
+import ExerciseSubmitHistoryOutput from './ExerciseSubmitHistoryOutput.js';
+import { StyledExerciseVersionRunType, StyledExerciseVersionDatetime, StyledExerciseVersionScore } from '../../shared/exercise-version-list/ExerciseVersionListItem.styled.js';
+import { StyledFileTreeWrapper, StyledExerciseSubmitHistoryNotChanged, StyledExerciseSubmitHistoryEditorWrapper, StyledExerciseSubmitHistoryEditorLoadingScreen } from './ExerciseSubmitHistory.styled.js';
+
+const AsyncFileTree = React.lazy(() => import('../../shared/file-tree/FileTree.js'));
+const AsyncFileTreeList = React.lazy(() => import('../../shared/file-tree/FileTreeList.js'));
+const AsyncFileViewer = React.lazy(() => import('../../shared/file-viewer/FileViewer.js'));
+
+const ExerciseSubmitHistory = ({
+  onHide
+}) => {
+  const COUNT = 100;
+  const {
+    materialExerciseId,
+    exerciseRoomId,
+    exerciseRoomUserId
+  } = React.useContext(ExerciseContext);
+  const exercise = useRecoilValue(exerciseState(materialExerciseId));
+  const preference = useRecoilValue(exerciseEditorPreferenceState);
+  const [runningList, setRunningList] = useState([]);
+  const [selectedRunning, setSelectedRunning] = useState(null);
+  const [hasMoreRunning, setMoreRunning] = useState(false);
+  const [offset, setOffset] = useState(0);
+  const [fileList, setFileList] = useState([]);
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [usercodeContent, setUsercodeContent] = useState(null);
+  const [isUserChanged, setIsUserChanged] = useState(false);
+  const [isFile, setIsFile] = useState(false);
+  const [isFileReady, setIsFileReady] = useState(false);
+  const selectedFileUrl = useMaterialExerciseFileUrl({
+    filename: selectedFile,
+    exercise,
+    exerciseRoomId
+  }); //
+  //
+  //
+
+  useEffect(() => {
+    void (async () => {
+      try {
+        const {
+          exerciseRunnings
+        } = await 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.
+  //
+
+  useEffect(() => {
+    void (async () => {
+      var _a, _b, _c, _d, _e;
+
+      if (!selectedRunning) {
+        return;
+      }
+
+      try {
+        const {
+          exerciseRunning
+        } = await getOrgMaterialExerciseExerciseRunningGet({
+          exerciseRunningId: selectedRunning.id,
+          returnFilelist: true,
+          returnUsercodeFilelist: true
+        });
+        setSelectedRunning(exerciseRunning);
+
+        if ((exercise === null || exercise === void 0 ? void 0 : exercise.envType) === enums.ExerciseEnvType.MultiLanguage) {
+          let languages, environment;
+
+          try {
+            const languagesResponse = await getOrgMaterialExerciseExerciseImageExerciseFileGet({
+              exerciseImageId: exerciseRunning.exerciseImage.id,
+              filename: '.languages.json'
+            });
+            languages = camelizeKeys(JSON.parse(languagesResponse.exerciseFile.content));
+          } catch (e) {
+            console.error(e);
+          }
+
+          try {
+            const response = await getOrgMaterialExerciseExerciseRoomUserFileGet({
+              filename: '.environment.json',
+              exerciseRoomId,
+              targetDatetime: exerciseRunning.createdDatetime
+            });
+            environment = 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.
+  //
+
+  useEffect(() => {
+    void (async () => {
+      setIsFileReady(false);
+
+      if (!(selectedRunning === null || selectedRunning === void 0 ? void 0 : selectedRunning.exerciseImage) || !selectedFile || !exerciseRoomId) {
+        return;
+      }
+
+      const {
+        usercode
+      } = await 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 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.createElement(ExerciseVersionList, null, runningList.map(exerciseRunning => {
+      return React.createElement(ExerciseVersionListItem, {
+        key: exerciseRunning.id,
+        selected: Boolean(selectedRunning && selectedRunning.id === exerciseRunning.id),
+        onClick: () => {
+          setSelectedRunning(exerciseRunning);
+        }
+      }, React.createElement(StyledExerciseVersionRunType, {
+        role: "gray3",
+        size: "small"
+      }, exerciseRunning.runType === enums.ExerciseRunType.Grade ? '제출' : '실행'), React.createElement(StyledExerciseVersionDatetime, {
+        role: "gray3",
+        size: "small"
+      }, dayjs(exerciseRunning.createdDatetime).format('YYYY.M.DD hh:mm')), React.createElement(StyledExerciseVersionScore, {
+        role: "gray3",
+        size: "small"
+      }, exerciseRunning.score));
+    }), hasMoreRunning ? React.createElement(ExerciseVersionListItem, {
+      onClick: () => setOffset(prevOffset => prevOffset + COUNT)
+    }, React.createElement(Flex, {
+      align: "center",
+      justify: "center",
+      width: "100%"
+    }, React.createElement(Text, {
+      role: "important"
+    }, "\uB354 \uBD88\uB7EC\uC624\uAE30"))) : null);
+  };
+  /**
+   *
+   */
+
+
+  const renderRunningOutput = () => {
+    if (!selectedRunning) {
+      return null;
+    }
+
+    return React.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.createElement(Flex, {
+      width: "100%",
+      auto: true,
+      overflow: "hidden"
+    }, React.createElement(ResizableNext, Object.assign({}, MATERIAL_RESIZABLE_COMMON_PROPS, {
+      initialWidth: 240,
+      resizeHandles: ['e'],
+      collapseWidth: 100
+    }), React.createElement(StyledFileTreeWrapper, null, React.createElement(React.Suspense, {
+      fallback: null
+    }, React.createElement(AsyncFileTree, {
+      activePath: selectedFile,
+      exerciseRoomFilelist: fileList,
+      imageFilelist: [],
+      onActivePathChange: (path, isDirectory = false) => {
+        if (isDirectory) {
+          return;
+        }
+
+        setSelectedFile(path);
+      }
+    }, React.createElement(AsyncFileTreeList, null))))), React.createElement(Flex, {
+      column: true,
+      auto: true,
+      height: "100%",
+      overflow: "hidden"
+    }, !isUserChanged && React.createElement(StyledExerciseSubmitHistoryNotChanged, null, React.createElement(Text, {
+      role: "white",
+      size: "tiny"
+    }, "\uC218\uC815 \uB0B4\uC5ED\uC774 \uC5C6\uB294 \uD30C\uC77C\uC785\uB2C8\uB2E4.")), React.createElement(StyledExerciseSubmitHistoryEditorWrapper, null, isFile ? React.createElement(React.Suspense, {
+      fallback: null
+    }, React.createElement(AsyncFileViewer, {
+      key: editorFilename,
+      filename: editorFilename,
+      fileurl: selectedFileUrl || ''
+    })) : React.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.createElement(StyledExerciseSubmitHistoryEditorLoadingScreen, null, React.createElement(Spinner, null)))));
+  }; //
+  //
+  //
+
+
+  return React.createElement(MaterialModal, {
+    title: "\uC81C\uCD9C \uC774\uB825",
+    onHide: onHide
+  }, React.createElement(Flex, {
+    width: "100%",
+    height: "100%",
+    overflow: "hidden"
+  }, React.createElement(Box, {
+    width: "15rem",
+    height: "100%",
+    overflow: "hidden"
+  }, renderRunningVersionList()), React.createElement(Flex, {
+    auto: true,
+    column: true,
+    height: "100%",
+    overflow: "hidden"
+  }, renderRunningContent(), renderRunningOutput())));
+};
+
+export { ExerciseSubmitHistory as default };

package/es/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/es/components/material-exercise/exercise-submit-history/ExerciseSubmitHistory.styled.js

@@ -0,0 +1,30 @@
+import { Flex } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+
+const StyledFileTreeWrapper = styled.div.withConfig({
+  componentId: "sc-uooiby-0"
+})(["overflow:auto;width:100%;height:100%;background-color:", ";"], base.color.navy9);
+const StyledExerciseSubmitHistoryEditorWrapper = styled(Flex).withConfig({
+  componentId: "sc-uooiby-1"
+})(["position:relative;flex-direction:column;flex:1 1 0%;width:100%;overflow:hidden;"]);
+const StyledExerciseSubmitHistoryNotChanged = styled.div.withConfig({
+  componentId: "sc-uooiby-2"
+})(["background-color:", ";padding:0.5rem;"], base.color.navy7);
+const StyledExerciseSubmitHistoryEditorLoadingScreen = styled(Flex).withConfig({
+  componentId: "sc-uooiby-3"
+})(["position:absolute;top:0;left:0;right:0;bottom:0;background-color:", ";align-items:center;justify-content:center;"], base.color.navy9);
+const StyledExerciseSubmitHistoryOutputText = styled.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:", ";}}"], base.color.white, base.color.secondary4, base.color.red8, base.color.secondary4, base.color.white);
+const StyledExerciseSubmitHistoryOutput = styled.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.a.withConfig({
+  componentId: "sc-uooiby-6"
+})(["display:block;margin:9.8px 0;padding:0;width:100%;max-width:400px;"]);
+const StyledExerciseSubmitHistoryOutputImage = styled.img.withConfig({
+  componentId: "sc-uooiby-7"
+})(["display:block;width:100%;"]);
+
+export { StyledExerciseSubmitHistoryEditorLoadingScreen, StyledExerciseSubmitHistoryEditorWrapper, StyledExerciseSubmitHistoryNotChanged, StyledExerciseSubmitHistoryOutput, StyledExerciseSubmitHistoryOutputImage, StyledExerciseSubmitHistoryOutputImageLink, StyledExerciseSubmitHistoryOutputText, StyledFileTreeWrapper };

package/es/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/es/components/material-exercise/exercise-submit-history/ExerciseSubmitHistoryOutput.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import { getOrgMaterialExerciseExerciseRunningOutputGet } from '@elice/api-client';
+import { ResizableNext, Text } from '@elice/blocks';
+import FileSaver from 'file-saver';
+import { MATERIAL_RESIZABLE_COMMON_PROPS } from '../../../constants/stylesheets.js';
+import { StyledExerciseSubmitHistoryOutput, StyledExerciseSubmitHistoryOutputText, StyledExerciseSubmitHistoryOutputImageLink, StyledExerciseSubmitHistoryOutputImage } from './ExerciseSubmitHistory.styled.js';
+
+const ExerciseSubmitHistoryOutput = ({
+  exerciseRunningId
+}) => {
+  const [runningOutput, setRunningOutput] = React.useState([]);
+  React.useEffect(() => {
+    if (exerciseRunningId) {
+      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.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.createElement(Text, {
+        size: "small",
+        role: "white"
+      }, "\uCD9C\uB825 \uC5C6\uC74C");
+    }
+
+    const getOutputContent = output => {
+      switch (output.type) {
+        case 'text':
+        case 'echo':
+          return React.createElement(StyledExerciseSubmitHistoryOutputText, null, output.data);
+
+        case 'grader':
+          return React.createElement(StyledExerciseSubmitHistoryOutputText, {
+            className: "grader"
+          }, output.data);
+
+        case 'info':
+          return React.createElement(StyledExerciseSubmitHistoryOutputText, {
+            className: "info"
+          }, output.data);
+
+        case 'image':
+          return React.createElement(StyledExerciseSubmitHistoryOutputImageLink, {
+            onClick: () => openImageWithNewTab(output.data)
+          }, React.createElement(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.createElement(StyledExerciseSubmitHistoryOutputText, {
+            className: "file",
+            onClick: () => downloadFile(fileContent, fileName)
+          }, `Download ${fileName}`);
+
+        case 'html':
+          const encodedData = encodeURI(output.data);
+          return React.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.createElement(ResizableNext, Object.assign({}, MATERIAL_RESIZABLE_COMMON_PROPS, {
+    initialHeight: 200,
+    resizeHandles: ['n'],
+    collapseWidth: 100
+  }), React.createElement(StyledExerciseSubmitHistoryOutput, null, renderContent()));
+};
+
+export { ExerciseSubmitHistoryOutput as default };

package/es/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/es/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';

package/es/components/shared/exercise-menu-button/ExerciseMenuButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { IconButtonProps, TooltipProps } from '@elice/blocks';
+declare type PickedIconButtonProps = Pick<IconButtonProps, 'icon' | 'disabled' | 'loading' | 'onClick' | 'style'>;
+declare type PickedTooltipProps = Pick<TooltipProps, 'title' | 'placement'>;
+export interface ExerciseMenuButtonProps extends PickedIconButtonProps, PickedTooltipProps {
+    children?: React.ReactChild;
+    active?: boolean;
+}
+declare const ExerciseMenuButton: React.ForwardRefExoticComponent<ExerciseMenuButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default ExerciseMenuButton;

package/es/components/shared/exercise-menu-button/ExerciseMenuButton.js

@@ -0,0 +1,45 @@
+import { __rest } from 'tslib';
+import React, { forwardRef } from 'react';
+import { IconButton, Tooltip } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+
+//
+//
+
+const StyledMenuButtonWrap = styled.span.withConfig({
+  componentId: "sc-48m0vh-0"
+})(["position:relative;margin-right:0.5rem;&:last-of-type{margin-right:0;}"]);
+const StyledMenuButton = styled(IconButton).withConfig({
+  componentId: "sc-48m0vh-1"
+})(["", ""], ({
+  active
+}) => active && `background: ${base.color.navy6} !important;`); //
+//
+//
+
+const ExerciseMenuButton = forwardRef((_a, ref) => {
+  var {
+    children,
+    active = false,
+    title,
+    placement = 'bottom-end'
+  } = _a,
+      props = __rest(_a, ["children", "active", "title", "placement"]);
+
+  return React.createElement(Tooltip, {
+    title: title,
+    placement: placement,
+    dark: true
+  }, React.createElement(StyledMenuButtonWrap, null, React.createElement(StyledMenuButton, Object.assign({
+    transparent: true,
+    border: false,
+    size: "micro",
+    role: "gray3",
+    active: active
+  }, props, {
+    ref: ref
+  })), children));
+});
+
+export { ExerciseMenuButton as default };