Skip to content

Commit 5a5c925

Browse files
syuChen1syuChen1
authored
Merge pull request #202 from STEM-C/code-sandbox-menu-changes
changed code sandbox's top menu bar, added search filter and select all to content creator's toolbox
2 parents 2ee1ac0 + 7506092 commit 5a5c925

File tree

5 files changed

+214
-114
lines changed

5 files changed

+214
-114
lines changed

‎client/src/components/DayPanels/BlocklyCanvasPanel/BlocklyCanvasPanel.js

Lines changed: 149 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
22
import { Link } from "react-router-dom";
33
import '../DayPanels.less'
44
import { compileArduinoCode, handleCreatorSaveDay, handleSave } from "../helpers";
5-
import { message, Spin, Menu, Checkbox } from "antd";
5+
import { message, Spin, Menu, Checkbox, Row, Col, Input } from "antd";
66
import { getSaves } from "../../../Utils/requests";
77
import CodeModal from "./CodeModal";
88
import VersionHistoryModal from "./VersionHistoryModal"
@@ -16,6 +16,7 @@ export default function BlocklyCanvasPanel(props) {
1616
const [studentToolbox, setStudentToolbox] = useState([]);
1717
const [lastSavedTime, setLastSavedTime] = useState(null);
1818
const [lastAutoSave, setLastAutoSave] = useState(null);
19+
const [searchFilter, setSearchFilter] = useState('');
1920
const { day, homePath, handleGoBack, isStudent, isMentor, isContentCreator, lessonName } = props;
2021

2122
const workspaceRef = useRef(null);
@@ -137,7 +138,25 @@ export default function BlocklyCanvasPanel(props) {
137138
}
138139
}
139140

140-
const handleToolboxSelection = (blockName) => {
141+
const selectEntireToolbox = (event) => {
142+
143+
if(event.target.checked){
144+
let tempToolBox = [];
145+
day && day.toolbox && day.toolbox.forEach(
146+
([category, blocks])=>{
147+
blocks.filter(block => block.name.includes(searchFilter)).forEach((block) => {
148+
tempToolBox = [...tempToolBox, block.name];
149+
})
150+
}
151+
)
152+
setStudentToolbox(tempToolBox);
153+
}
154+
else{
155+
setStudentToolbox([]);
156+
}
157+
}
158+
159+
const handleToolboxSelection = (event, blockName) => {
141160
let index = studentToolbox.indexOf(blockName);
142161
if(index > -1) {
143162
setStudentToolbox(studentToolbox.filter(item => item !== blockName));
@@ -175,112 +194,149 @@ export default function BlocklyCanvasPanel(props) {
175194
return (
176195

177196
<div id='horizontal-container' className="flex flex-column">
178-
<Spin tip="Compiling Code Please Wait..." className="compilePop" spinning={selectedCompile}>
179-
<div id='top-container' className="flex flex-column vertical-container">
180-
<div id='description-container' className="flex flex-row space-between card">
181-
<div className='flex flex-row'>
182-
{homePath ? <Link id='link' to={homePath} className="flex flex-column">
183-
<i className="fa fa-home"/>
184-
</Link> : null}
185-
{handleGoBack ? <button onClick={handleGoBack} id='link' className="flex flex-column">
186-
<i id='icon-btn' className="fa fa-arrow-left"/>
187-
</button> : null}
188-
</div>
189-
<div>
190-
{isStudent && lastSavedTime ?
191-
`Last changes saved ${lastSavedTime}`
192-
: null
193-
}
194-
</div>
195-
<div className='flex flex-row'>
196-
{isStudent ?
197-
<div className='flex flex-row'>
198-
<VersionHistoryModal
199-
saves={saves}
200-
lastAutoSave={lastAutoSave}
201-
defaultTemplate={day}
202-
getFormattedDate={getFormattedDate}
203-
loadSave={loadSave}
204-
/>
205-
<button onClick={handleManualSave} id='link' className="flex flex-column">
206-
<i id='icon-btn' className="fa fa-save"/>
207-
</button>
208-
</div>
209-
: null
210-
}
211-
{isContentCreator ?
212-
<div className='flex flex-row'>
213-
<button onClick={handleCreatorSave} id='link' className="flex flex-column">
214-
<i id='icon-btn' className="fa fa-save"/>
215-
</button>
216-
</div>
217-
: null}
218-
<div className='flex flex-row'>
219-
<button onClick={handleUndo} id='link' className="flex flex-column">
220-
<i id='icon-btn' className="fa fa-undo-alt"
221-
style={workspaceRef.current ?
222-
workspaceRef.current.undoStack_.length < 1 ?
223-
{ color: 'grey', cursor: 'default' } : null
224-
: null}
225-
/>
226-
</button>
227-
<button onClick={handleRedo} id='link' className="flex flex-column">
228-
<i id='icon-btn' className="fa fa-redo-alt"
229-
style={workspaceRef.current ?
230-
workspaceRef.current.redoStack_.length < 1 ?
231-
{ color: 'grey', cursor: 'default' } : null
232-
: null}
233-
/>
234-
</button>
235-
</div>
236-
</div>
237-
<div style={{ "width": "10%" }}>
238-
<div id='action-btn-container' className="flex space-between">
239-
{!isStudent ?
240-
<CodeModal
241-
title={'XML'}
242-
workspaceRef={workspaceRef.current}
243-
setHover={setHoverXml}
244-
hover={hoverXml}
245-
/>
246-
: null}
247-
<CodeModal
248-
title={'Arduino Code'}
249-
workspaceRef={workspaceRef.current}
250-
setHover={setHoverArduino}
251-
hover={hoverArduino}
252-
/>
253-
<i onClick={() => compileArduinoCode(workspaceRef.current, setSelectedCompile, day, isStudent)}
254-
className="fas fa-upload hvr-info"
255-
onMouseEnter={() => setHoverCompile(true)}
256-
onMouseLeave={() => setHoverCompile(false)}/>
257-
258-
{hoverCompile && <div className="popup ModalCompile">Upload to Arduino</div>}
259-
</div>
260-
</div>
261-
</div>
262-
</div>
263-
</Spin>
197+
264198
<div className='flex flex-row'>
265199
<div id='bottom-container' className="flex flex-column vertical-container overflow-visible">
266-
<div id="section-header">
267-
{lessonName ? lessonName : "Program your Arduino..."}
268-
</div>
200+
<Row>
201+
<Col flex="none" id="section-header">
202+
{lessonName ? lessonName : "Program your Arduino..."}
203+
</Col>
204+
<Col flex="auto">
205+
206+
<Spin tip="Compiling Code Please Wait..." className="compilePop" spinning={selectedCompile}>
207+
208+
<Row align='middle' justify='end' id='description-container' >
209+
<Col span={1}>
210+
<Row>
211+
{homePath ?
212+
<Col>
213+
<Link id='link' to={homePath} className="flex flex-column">
214+
<i className="fa fa-home"/>
215+
</Link>
216+
</Col>
217+
: null}
218+
{handleGoBack ?
219+
<Col>
220+
<button onClick={handleGoBack} id='link' className="flex flex-column">
221+
<i id='icon-btn' className="fa fa-arrow-left"/>
222+
</button>
223+
</Col>
224+
: null}
225+
</Row>
226+
</Col>
227+
<Col flex='auto' />
228+
229+
<Col span={6}>
230+
{isStudent && lastSavedTime ?
231+
`Last changes saved ${lastSavedTime}`
232+
: null
233+
}
234+
</Col>
235+
<Col span={isStudent? 8 : 5}>
236+
<Row>
237+
{isStudent ?
238+
<Col className='flex flex-row'>
239+
<VersionHistoryModal
240+
saves={saves}
241+
lastAutoSave={lastAutoSave}
242+
defaultTemplate={day}
243+
getFormattedDate={getFormattedDate}
244+
loadSave={loadSave}
245+
/>
246+
<button onClick={handleManualSave} id='link' className="flex flex-column">
247+
<i id='icon-btn' className="fa fa-save"/>
248+
</button>
249+
</Col>
250+
: null
251+
}
252+
{isContentCreator ?
253+
<Col className='flex flex-row'>
254+
<button onClick={handleCreatorSave} id='link' className="flex flex-column">
255+
<i id='icon-btn' className="fa fa-save"/>
256+
</button>
257+
</Col>
258+
: null}
259+
<Col className='flex flex-row'>
260+
<button onClick={handleUndo} id='link' className="flex flex-column">
261+
<i id='icon-btn' className="fa fa-undo-alt"
262+
style={workspaceRef.current ?
263+
workspaceRef.current.undoStack_.length < 1 ?
264+
{ color: 'grey', cursor: 'default' } : null
265+
: null}
266+
/>
267+
</button>
268+
<button onClick={handleRedo} id='link' className="flex flex-column">
269+
<i id='icon-btn' className="fa fa-redo-alt"
270+
style={workspaceRef.current ?
271+
workspaceRef.current.redoStack_.length < 1 ?
272+
{ color: 'grey', cursor: 'default' } : null
273+
: null}
274+
/>
275+
</button>
276+
</Col>
277+
</Row>
278+
279+
</Col>
280+
<Col span={isStudent ? 3: 5}>
281+
<div id='action-btn-container' className="flex space-around">
282+
{!isStudent ?
283+
<CodeModal
284+
title={'XML'}
285+
workspaceRef={workspaceRef.current}
286+
setHover={setHoverXml}
287+
hover={hoverXml}
288+
/>
289+
: null}
290+
<CodeModal
291+
title={'Arduino Code'}
292+
workspaceRef={workspaceRef.current}
293+
setHover={setHoverArduino}
294+
hover={hoverArduino}
295+
/>
296+
<i onClick={() => compileArduinoCode(workspaceRef.current, setSelectedCompile, day, isStudent)}
297+
className="fas fa-upload hvr-info"
298+
onMouseEnter={() => setHoverCompile(true)}
299+
onMouseLeave={() => setHoverCompile(false)}/>
300+
{hoverCompile && <div className="popup ModalCompile">Upload to Arduino</div>}
301+
</div>
302+
</Col>
303+
</Row>
304+
305+
</Spin>
306+
</Col>
307+
</Row>
308+
269309
<div id="blockly-canvas"/>
270310
</div>
271311
{isContentCreator ?
272312
<div id='side-container'>
273313
Current Student Toolbox Selection
314+
315+
<Input
316+
placeholder="Search Block"
317+
prefix={<i className="fa fa-search" />}
318+
onChange={e => setSearchFilter(e.target.value)}
319+
/>
320+
321+
<Checkbox onClick={selectEntireToolbox}>
322+
Select All
323+
</Checkbox>
324+
274325
<Menu mode="inline">
326+
275327
{
276328
// Maps out block categories
277329
day && day.toolbox && day.toolbox.map(([category, blocks]) => (
278330
<SubMenu key={category} title={category}>
279331
{
280-
blocks.map((block) => {
332+
//filter out blocks not in search term
333+
blocks.filter(block => block.name.includes(searchFilter)).map((block) => {
281334
return(
282335
<Menu.Item key={block.name}>
283-
<Checkbox onClick={e => handleToolboxSelection(block.name)}>{block.name}</Checkbox>
336+
<Checkbox
337+
checked={studentToolbox.indexOf(block.name) > -1 ? true : false}
338+
onClick={e => handleToolboxSelection(e, block.name)}
339+
>{block.name}</Checkbox>
284340
</Menu.Item>
285341
)
286342
})

‎client/src/components/DayPanels/BlocklyCanvasPanel/CodeModal.js

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {Modal, Button, Typography} from 'antd';
22
import React, {useState} from "react";
33
import {getArduino, getXml} from "../helpers";
4+
import icon from "./textIcon.json";
45

56
export default function CodeModal(props) {
67
const [visible, setVisible] = useState(false);
@@ -21,9 +22,26 @@ export default function CodeModal(props) {
2122

2223
return (
2324
<div id='code-modal'>
24-
<i onClick={showModal} className={title === 'XML' ? "fa fa-code hvr-info" : "fa fa-font hvr-info"}
25-
onMouseEnter={() => setHover(true)}
26-
onMouseLeave={() => setHover(false)}/>
25+
{
26+
title === 'XML' ?
27+
<i onClick={showModal} id='link' className="fa fa-code hvr-info"
28+
onMouseEnter={() => setHover(true)}
29+
onMouseLeave={() => setHover(false)}/>
30+
:
31+
<svg xmlns="http://www.w3.org/2000/svg"
32+
className="hvr-info"
33+
viewBox="0 0 172 172"
34+
onClick={showModal}
35+
onMouseEnter={() => setHover(true)}
36+
onMouseLeave={() => setHover(false)}
37+
>
38+
<g>
39+
<path d={icon.path}></path>
40+
</g>
41+
</svg>
42+
}
43+
44+
2745
{hover &&
2846
(title === 'XML' ?
2947
<div className="popup ModalCompile2">Shows XML</div> :

‎client/src/components/DayPanels/BlocklyCanvasPanel/textIcon.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"path" : "M85.83203,22.77656c-0.54801,0.01312 -1.09438,0.06551 -1.63489,0.15677h-44.0638h-5.73333c-3.1648,0 -5.73333,2.56853 -5.73333,5.73333v17.2c0,3.1648 2.56853,5.73333 5.73333,5.73333h5.73333c3.1648,0 5.73333,-2.56853 5.73333,-5.73333v-5.73333h28.66667v91.73333h-5.73333c-3.1648,0 -5.73333,2.56853 -5.73333,5.73333v5.73333c0,3.1648 2.56853,5.73333 5.73333,5.73333h15.34114c1.23099,0.20221 2.48672,0.20221 3.71771,0h15.34114c3.1648,0 5.73333,-2.56853 5.73333,-5.73333v-5.73333c0,-3.1648 -2.56853,-5.73333 -5.73333,-5.73333h-5.73333v-91.73333h28.66667v5.73333c0, 3.1648 2.56853,5.73333 5.73333,5.73333h5.73333c3.1648,0 5.73333,-2.56853 5.73333,-5.73333v-17.2c0,-3.1648 -2.56853,-5.73333 -5.73333, -5.73333h-5.73333h-44.03021c-0.66226,-0.11084 -1.33298,-0.1633 -2.00442,-0.15677z"
3+
}

‎client/src/components/DayPanels/DayInfoPanel.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import PlaceHolderImg1 from "../../assets/science.png";
66
import PlaceHolderImg2 from "../../assets/arduino.png";
77
import PlaceHolderImg3 from "../../assets/maker.png";
88

9+
// THIS PAGE IS NO LONGER IN USE, SOME OF THE STYLING MAY NO LONGER APPLY
910
export default function DayInfoPanel(props) {
1011
const {day} = props;
1112

0 commit comments

Comments
 (0)