From 36c3f6323e982598f387501107d34ab67c290b4f Mon Sep 17 00:00:00 2001 From: Siyu Chen Date: Sat, 16 Apr 2022 10:04:33 -0400 Subject: [PATCH] fix cc sanbox bug & update ui --- .../BlocklyCanvasPanel/BlocklyCanvasPanel.js | 2 +- client/src/views/Replay/Replay.js | 198 ++++++++++-------- client/src/views/Replay/Replay.less | 4 +- 3 files changed, 112 insertions(+), 92 deletions(-) diff --git a/client/src/components/DayPanels/BlocklyCanvasPanel/BlocklyCanvasPanel.js b/client/src/components/DayPanels/BlocklyCanvasPanel/BlocklyCanvasPanel.js index 07933bd4..ea97f6a9 100644 --- a/client/src/components/DayPanels/BlocklyCanvasPanel/BlocklyCanvasPanel.js +++ b/client/src/components/DayPanels/BlocklyCanvasPanel/BlocklyCanvasPanel.js @@ -23,7 +23,7 @@ const BlocklyCanvasPanel = ({ day, isSandbox, setDay }) => { day={day} setDay={setDay} isSandbox={isSandbox} - isMentorActivity={!day.selectedToolbox} + isMentorActivity={!day.selectedToolbox && !isSandbox} /> ); default: diff --git a/client/src/views/Replay/Replay.js b/client/src/views/Replay/Replay.js index 246c814d..82d3daf5 100644 --- a/client/src/views/Replay/Replay.js +++ b/client/src/views/Replay/Replay.js @@ -5,62 +5,61 @@ import React, { useRef, useState, } from 'react'; -import { Slider } from 'antd'; +import { Slider, Col, Row } from 'antd'; import './Replay.less'; import { useParams, useNavigate } from 'react-router-dom'; import NavBar from '../../components/NavBar/NavBar'; import { Table } from 'antd'; import { getSave } from '../../Utils/requests'; -import { CSVDownloader } from "react-papaparse"; +import { CSVDownloader } from 'react-papaparse'; const TIME_LINE_SIZE = 25; const timelineReducer = (timeline, action) => { - const checkTimelineStepInBound = () =>{ - if(timeline.step >= timeline.endIndex){ - let newEnd = Math.min(timeline.length, timeline.step+7); + const checkTimelineStepInBound = () => { + if (timeline.step >= timeline.endIndex) { + let newEnd = Math.min(timeline.length, timeline.step + 7); timeline.endIndex = newEnd; - timeline.startIndex = newEnd-TIME_LINE_SIZE; - } - else if(timeline.step < timeline.startIndex){ - let newStart = Math.max(0, timeline.step-6); + timeline.startIndex = newEnd - TIME_LINE_SIZE; + } else if (timeline.step < timeline.startIndex) { + let newStart = Math.max(0, timeline.step - 6); timeline.startIndex = newStart; - timeline.endIndex = newStart+TIME_LINE_SIZE; + timeline.endIndex = newStart + TIME_LINE_SIZE; } - } + }; switch (action.type) { case 'IncrementStep': - timeline.step += 1; + timeline.step += 1; checkTimelineStepInBound(); - return {...timeline}; + return { ...timeline }; case 'DecrementStep': - timeline.step -= 1; + timeline.step -= 1; checkTimelineStepInBound(); - return {...timeline}; + return { ...timeline }; case 'SetStepValue': timeline.step = action.value; checkTimelineStepInBound(); - return {...timeline}; + return { ...timeline }; case 'IncrementTimeline': - if(timeline.endIndex <= timeline.length){ + if (timeline.endIndex <= timeline.length) { timeline.startIndex += 5; timeline.endIndex = Math.min(timeline.endIndex + 5, timeline.length); } - return {...timeline}; + return { ...timeline }; case 'DecrementTimeline': - if(timeline.startIndex >= 0){ + if (timeline.startIndex >= 0) { timeline.startIndex = Math.max(timeline.startIndex - 5, 0); timeline.endIndex -= 5; } - return {...timeline}; + return { ...timeline }; case 'FetchReplayLength': timeline.length = action.value; - return {...timeline}; + return { ...timeline }; default: return timeline; @@ -84,13 +83,14 @@ const Replay = () => { const [blockIdFilter, setBlockIdFilter] = useState([]); const [timelineStates, dispatchTimelineReducer] = useReducer( - timelineReducer, + timelineReducer, { step: 0, startIndex: 0, endIndex: TIME_LINE_SIZE, - length: 0 - } ); + length: 0, + } + ); const setWorkspace = () => { workspaceRef.current = window.Blockly.inject('blockly-canvas', { @@ -124,25 +124,28 @@ const Replay = () => { dispatchTimelineReducer({ type: 'FetchReplayLength', - value: save.data.replay? save.data.replay.length : 0}); + value: save.data.replay ? save.data.replay.length : 0, + }); //set log - let data = save.data.replay.map((item, index) => - {return { - key: index, - blockId: item.blockId, - blockType: item.blockType, - timestamp: item.timestamp, - action: item.action - }}); - + let data = save.data.replay.map((item, index) => { + return { + key: index, + blockId: item.blockId, + blockType: item.blockType, + timestamp: item.timestamp, + action: item.action, + }; + }); + setLogData(data); setCsvData(data.slice(0).reverse()); - setCsvFilename(`${save.data.student.name}_${save.data.created_at}_code_replay`); + setCsvFilename( + `${save.data.student.name}_${save.data.created_at}_code_replay` + ); setActionFilter(makeFilter(data, 'action')); setBlockTypeFilter(makeFilter(data, 'blockType')); setBlockIdFilter(makeFilter(data, 'blockId')); - }; getReplay(); }, []); @@ -154,7 +157,7 @@ const Replay = () => { key: 'key', width: '3%', align: 'center', - render: (key) => key+1 + render: (key) => key + 1, }, { title: 'Timestamp', @@ -166,7 +169,7 @@ const Replay = () => { sorter: { compare: (a, b) => (a < b ? -1 : 1), }, - render: (timestamp) => formatMyDate(timestamp) + render: (timestamp) => formatMyDate(timestamp), }, { title: 'Action', @@ -175,7 +178,7 @@ const Replay = () => { width: '3%', align: 'center', filters: actionFilter, - onFilter: (value, record) => record.action === value + onFilter: (value, record) => record.action === value, }, { title: 'Block Type', @@ -184,7 +187,7 @@ const Replay = () => { width: '3%', align: 'center', filters: blockTypeFilter, - onFilter: (value, record) => record.blockType === value + onFilter: (value, record) => record.blockType === value, }, { title: 'Block ID', @@ -193,7 +196,7 @@ const Replay = () => { width: '3%', align: 'center', filters: blockIdFilter, - onFilter: (value, record) => record.blockId === value + onFilter: (value, record) => record.blockId === value, }, ]; @@ -236,11 +239,10 @@ const Replay = () => { const xml = window.Blockly.Xml.textToDom(replay[timelineStates.step].xml); window.Blockly.Xml.domToWorkspace(xml, workspaceRef.current); if (replay[timelineStates.step].blockId) - window.Blockly.mainWorkspace - .getBlockById(replay[timelineStates.step].blockId) - ?.select(); + window.Blockly.mainWorkspace + .getBlockById(replay[timelineStates.step].blockId) + ?.select(); setAction(replay[timelineStates.step].action); - } }, [replay, timelineStates, isPlaying, handlePause]); @@ -249,12 +251,12 @@ const Replay = () => { }; const scrollTimelineForward = () => { - dispatchTimelineReducer({type: 'IncrementTimeline'}); - } + dispatchTimelineReducer({ type: 'IncrementTimeline' }); + }; const scrollTimelineBackward = () => { - dispatchTimelineReducer({type: 'DecrementTimeline'}); - } + dispatchTimelineReducer({ type: 'DecrementTimeline' }); + }; const handleGoBack = () => { if (window.confirm('Comfirm going back')) navigate(-1); @@ -325,46 +327,57 @@ const Replay = () => {
- {replay.map((item, index) => ( -
setStep(index)} - > - {formatMyDate(item.timestamp)} -
- )).slice(timelineStates.startIndex, timelineStates.endIndex)} + {replay + .map((item, index) => ( +
setStep(index)} + > + {formatMyDate(item.timestamp)} +
+ )) + .slice(timelineStates.startIndex, timelineStates.endIndex)}
+ disabled={timelineStates.endIndex >= replay.length} + onClick={scrollTimelineForward} + > + › + -

{`[${timelineStates.step + 1}/${ - replay.length - }] Action: ${action}`}

- {replay[timelineStates.step]?.blockType !== '' && ( -

{`Block Type: ${ - replay[timelineStates.step]?.blockType - }`}

- )}
-

Code Replay

+ + + Code Replay + + + {`[${timelineStates.step + 1}/${ + replay.length + }] Action: ${action}`} + {replay[timelineStates.step]?.blockType !== '' && ( + <>{`, Block Type: ${ + replay[timelineStates.step]?.blockType + }`} + )} + +
- {/*
- { replay.map((item, index) =>
{timeConverter(item.timestamp)}
)} -
*/}
@@ -376,37 +389,42 @@ const Replay = () => {

Logs

{ - return csvData.map(log => { + data={() => { + return csvData.map((log) => { return { - "No.": log.key+1, - "timestamp": formatMyDate(log.timestamp), - "action": log.action, - "block type": log.blockType, - "block id": log.blockId, - } + 'No.': log.key + 1, + timestamp: formatMyDate(log.timestamp), + action: log.action, + 'block type': log.blockType, + 'block id': log.blockId, + }; }); }} > Download to CSV
- + "table-row " + (record.key === timelineStates.step ? 'table-row-dark' : 'table-row-light')} - onRow={(record, index)=> { + rowClassName={(record, index) => + 'table-row ' + + (record.key === timelineStates.step + ? 'table-row-dark' + : 'table-row-light') + } + onRow={(record, index) => { return { - onClick: () => setStep(record.key) - } + onClick: () => setStep(record.key), + }; }} - scroll={{y:300}} + scroll={{ y: 300 }} pagination={false} columns={columns} dataSource={logData} - onChange={(pagination, filter, sorter, extra) =>{ + onChange={(pagination, filter, sorter, extra) => { setCsvData(extra.currentDataSource); }} /> diff --git a/client/src/views/Replay/Replay.less b/client/src/views/Replay/Replay.less index 83358a64..7848a11e 100644 --- a/client/src/views/Replay/Replay.less +++ b/client/src/views/Replay/Replay.less @@ -59,7 +59,9 @@ } #action-title{ - color: white; + color: rgb(19, 18, 18); + font-size: larger; + font-weight: 600; } #replay-log{