Skip to content

Commit

Permalink
Merge pull request #107 from STEM-C/feature/ui-updates
Browse files Browse the repository at this point in the history 
UI Updates
  • Loading branch information
@tamargoadam98
tamargoadam98 authored Aug 7, 2020
2 parents b391621 + f8e49cf commit cb9d5c7
Show file tree
Hide file tree
Showing 21 changed files with 345 additions and 159 deletions.
6 changes: 4 additions & 2 deletions client/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import Sandbox from "./views/Sandbox/Sandbox"
import {removeUserSession} from "./Utils/AuthRequests";
import Day from "./views/Day/Day";
import Classroom from "./views/Classroom/Classroom"
import TeacherLogin from "./views/TeacherLogin/TeacherLogin"

const App = () => {
let history = useHistory();
Expand All @@ -24,9 +25,10 @@ const App = () => {
<div>
<Switch>
<Route exact path={"/"} render={() => <Home history={history} />}/>
<Route exact path={"/login"} render={() => <StudentLogin history={history} />}/>
<Route exact path={"/teacherlogin"} render={() => <TeacherLogin history={history}/>}/>
<Route exact path={"/login"} render={() => <StudentLogin history={history} handleLogout={handleLogout}/>}/>
<PrivateRoute exact path={"/dashboard"} render={() => <Dashboard history={history} handleLogout={handleLogout}/>}/>
<PrivateRoute exact path={"/student"} render={() => <Student history={history}/> } />
<PrivateRoute exact path={"/student"} render={() => <Student history={history} handleLogout={handleLogout}/> } />
<Route path={"/workspace"} render={() => <Workspace history={history} handleLogout={handleLogout}/>}/>
<Route path={"/sandbox"} render={() => <Sandbox history={history}/>} />
<PrivateRoute exact path={"/day"} render={() => <Day history={history} handleLogout={handleLogout}/> } />
Expand Down
42 changes: 22 additions & 20 deletions client/src/components/DayPanels/BlocklyCanvasPanel.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import React, {useEffect, useRef, useState} from 'react';
import {Link} from "react-router-dom";
import './DayPanels.less'
import {compileArduinoCode, getArduino, getJS, getXml, setLocalActivity, handleSave} from "./helpers";
import {compileArduinoCode, setLocalActivity, handleSave} from "./helpers";
import {message} from "antd";
import {getSaves} from "../../Utils/requests";
import CodeModal from "./CodeModal";

export default function BlocklyCanvasPanel(props) {
const [hoverXml, setHoverXml] = useState(false);
const [hoverJS, setHoverJS] = useState(false);
const [hoverArduino, setHoverArduino] = useState(false);
const [hoverCompile, setHoverCompile] = useState(false);
const [saves, setSaves] = useState([]);
const [selectedSave, setSelectedSave] = useState(null);
const {day, dayType, homePath, handleGoBack, isStudent} = props;
const {day, dayType, homePath, handleGoBack, isStudent, lessonName} = props;


let workspaceRef = useRef(null);
Expand Down Expand Up @@ -62,7 +62,7 @@ export default function BlocklyCanvasPanel(props) {
}
}

if(onLoadSave) {
if (onLoadSave) {
let xml = window.Blockly.Xml.textToDom(onLoadSave.workspace);
window.Blockly.Xml.domToWorkspace(xml, workspaceRef.current)
} else if (day.template) {
Expand Down Expand Up @@ -130,32 +130,34 @@ export default function BlocklyCanvasPanel(props) {
<i id='icon-btn' className="fa fa-save"/>
</button>
</div> : null}
<div style={{"width": "25%"}}>
<div style={{"width": "10%"}}>
<div id='action-btn-container' className="flex space-between">
<i onClick={() => getXml(workspaceRef.current)} className="fas fa-code hvr-info"
onMouseEnter={() => setHoverXml(true)}
onMouseLeave={() => setHoverXml(false)}/>
{hoverXml && <div className="popup XML">Shows Xml Code</div>}
<i onClick={() => getJS(workspaceRef.current)} className="fab fa-js hvr-info"
onMouseEnter={() => setHoverJS(true)}
onMouseLeave={() => setHoverJS(false)}/>
{hoverJS && <div className="popup JS">Shows Javascript Code</div>}
<i onClick={() => getArduino(workspaceRef.current)} className="hvr-info"
onMouseEnter={() => setHoverArduino(true)}
onMouseLeave={() => setHoverArduino(false)}>A</i>
{hoverArduino && <div className="popup Arduino">Shows Arduino Code</div>}
{!isStudent ?
<CodeModal
title={'XML'}
workspaceRef={workspaceRef.current}
setHover={setHoverXml}
hover={hoverXml}
/>
: null}
<CodeModal
title={'Arduino Code'}
workspaceRef={workspaceRef.current}
setHover={setHoverArduino}
hover={hoverArduino}
/>
<i onClick={() => compileArduinoCode(workspaceRef.current)}
className="fas fa-play hvr-info"
className="fas fa-upload hvr-info"
onMouseEnter={() => setHoverCompile(true)}
onMouseLeave={() => setHoverCompile(false)}/>
{hoverCompile && <div className="popup Compile">Run Program</div>}
{hoverCompile && <div className="popup Compile">Upload to Arduino</div>}
</div>
</div>
</div>
</div>
<div id='bottom-container' className="flex flex-column vertical-container overflow-visible">
<div id="section-header">
Program your Arduino...
{lessonName ? lessonName : "Program your Arduino..."}
</div>
<div id="blockly-canvas"
onChange={() => setLocalActivity(workspaceRef.current)}/>
Expand Down
52 changes: 52 additions & 0 deletions client/src/components/DayPanels/CodeModal.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import {Modal, Button, Typography} from 'antd';
import React, {useState} from "react";
import {getArduino, getXml} from "./helpers";

export default function CodeModal(props) {
const [visible, setVisible] = useState(false);
const {title, workspaceRef, setHover, hover} = props;
const {Text} = Typography;

const showModal = () => {
setVisible(true)
};

const handleCancel = () => {
setVisible(false)
};

const handleOk = () => {
setVisible(false)
};

return (
<div id='code-modal'>
<i onClick={showModal} className={title === 'XML' ? "fa fa-code hvr-info" : "fa fa-font hvr-info"}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}/>
{hover &&
(title === 'XML' ?
<div className="popup XML">Shows XML</div> :
<div className="popup Arduino">Shows Arduino Code</div>)}
<Modal
title={title}
visible={visible}
onCancel={handleCancel}
width='50vw'
footer={[
<Button key="ok" type="primary" onClick={handleOk}>
OK
</Button>,
]}
>
{workspaceRef ?
<div id='code-text-box'>
<Text copyable style={{whiteSpace: "pre-wrap"}}>
{title === 'XML' ? getXml(workspaceRef, false) : getArduino(workspaceRef, false)}
</Text>
</div>
: null}
</Modal>
</div>
);
}
48 changes: 26 additions & 22 deletions client/src/components/DayPanels/DayPanels.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ h3, p {
width: 100%;
min-width: 40vw;
background-color: #colors[primary];
min-height: 100vh;
max-height: 100vh;
min-height: 92vh;
max-height: 92vh;
}

.popup {
Expand All @@ -28,23 +28,18 @@ h3, p {
}

.XML {
right: 13vw;
top: 4.5vh;
}

.JS {
right: 10vw;
top: 4.5vh;
right: 11vw;
top: 12.5vh;
}

.Arduino {
right: 8vw;
top: 4.5vh;
right: 10vw;
top: 12.5vh;
}

.Compile {
right: 6vw;
top: 4.5vh;
right: 4vw;
top: 12.5vh;
}

#action-btn-container {
Expand All @@ -63,12 +58,13 @@ h3, p {

#top-container {
flex: 1;
margin-bottom: 0.60em;
height: 70px;
margin-bottom: 1.5vh;
margin-top: 1vh;
max-height: 8vh;
}

#description-container {
height: 100%;
height: 8vh;
border-radius: 10px;
align-items: center;

Expand All @@ -89,25 +85,27 @@ h3, p {

#bottom-container {
flex: 6;
margin-top: 1.5em;
margin-top: 1vh;
margin-bottom: 1vh;
background-color: #colors[tertiary];
border-radius: 10px;
min-height: 100%;
height: 75vh;
height: 100%;
max-height: 78vh;
}

#blockly-canvas {
margin: 1em;
margin: auto;
width: 95%;
height: 100%;
max-height: 90%;
min-height: 68vh;
max-height: 68vh;
}

#section-header {
background-color: #colors[secondary];
border-radius: 80px;
width: 40%;
min-height: 8%;
min-height: 50px;
color: #colors[text-secondary];
font-size: 1.2em;
font-weight: bold;
Expand Down Expand Up @@ -218,4 +216,10 @@ h3, p {
opacity: .6;
background-color: darken(#colors[tertiary], 10%);
}
}

#code-text-box {
background-color: #colors[tertiary];
padding: 5px;
border: 1px inset;
}
4 changes: 2 additions & 2 deletions client/src/components/DayPanels/helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ export const setLocalActivity = (workspaceRef, activityType) => {
}

// Generates xml from blockly canvas
export const getXml = (workspaceRef) => {
export const getXml = (workspaceRef, shouldAlert = true) => {

const {Blockly} = window

let xml = Blockly.Xml.workspaceToDom(workspaceRef)
let xml_text = Blockly.Xml.domToText(xml)
alert(xml_text)
if(shouldAlert) alert(xml_text)
return (xml_text)
};

Expand Down
35 changes: 25 additions & 10 deletions client/src/components/NavBar/NavBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,39 +7,54 @@ import {DownOutlined} from '@ant-design/icons';
import {getUser} from "../../Utils/AuthRequests";

export default function NavBar(props) {
const {handleLogout, history} = props;
const {handleLogout, handleHome, handleTeacherLogin, handleSandbox, isMentor} = props;
const user = getUser();

const handleDashboard = () => {
history.push('/dashboard')
};

const menu = (
const menu = isMentor ? (
<Menu>
<Menu.Item key="0">
<i className="fa fa-user-circle"/>
&nbsp; Account Info
</Menu.Item>
<Menu.Item key="1" onClick={handleDashboard}>
{handleHome ? <Menu.Item key="1" onClick={handleHome}>
<i className="fa fa-home"/>
&nbsp; Dashboard
</Menu.Item>
</Menu.Item> : null}
<Menu.Item key="2" onClick={handleLogout}>
<i className="fa fa-sign-out-alt"/>
&nbsp; Sign Out
</Menu.Item>
</Menu>
) : (
<Menu>
{handleHome ? <Menu.Item key="0" onClick={handleHome}>
<i className="fa fa-home"/>
&nbsp; Home
</Menu.Item> : null}
{handleSandbox ? <Menu.Item key="1" onClick={handleSandbox}>
<i className="fa fa-window-maximize"/>
&nbsp; Sandbox
</Menu.Item> : null}
{handleTeacherLogin ? <Menu.Item key="2" onClick={handleTeacherLogin}>
<i className="fa fa-sign-in-alt"/>
&nbsp; Teacher Login
</Menu.Item> : null}
{handleLogout ? <Menu.Item key="3" onClick={handleLogout}>
<i className="fa fa-sign-out-alt"/>
&nbsp; Sign Out
</Menu.Item> : null}
</Menu>
);

return (
<span id="navBar">
<Link id='link' to={"/dashboard"}>
<Link id='link' to={isMentor ? "/dashboard" : "/"}>
<img src={Logo} id='casmm-logo' alt='logo'/>
</Link>
<div id="dropdown-menu">
<Dropdown overlay={menu} trigger={['click']}>
<button className="ant-dropdown-link" onClick={e => e.preventDefault()}>
{user.username} <DownOutlined/>
{isMentor ? user.username : "Menu"} <DownOutlined/>
</button>
</Dropdown>
</div>
Expand Down
6 changes: 5 additions & 1 deletion client/src/views/Classroom/Classroom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,13 @@ export default function Classroom(props) {
});
}, [classroomId]);

const handleHome = () => {
history.push('/dashboard')
};

return (
<div className="container nav-padding">
<NavBar handleLogout={handleLogout} history={history}/>
<NavBar handleLogout={handleLogout} handleHome={handleHome} isMentor={true}/>
<div id='main-header' className='s'>
<div id='classroom'>{classroom.name}</div>
<div id='code'>Join code: {classroom.code}</div>
Expand Down
4 changes: 2 additions & 2 deletions client/src/views/Dashboard/Dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,12 @@ export default function Dashboard(props) {
}, []);

const handleViewClassroom = (classroomId) => {
props.history.push(`/classroom/${classroomId}`);
history.push(`/classroom/${classroomId}`);
};

return (
<div className="container nav-padding">
<NavBar handleLogout={handleLogout} history={history}/>
<NavBar handleLogout={handleLogout} isMentor={true}/>
<div id='main-header'>Welcome {user.username}</div>
<MentorSubHeader title={'Your Classrooms:'}/>
<div id='card-container'>
Expand Down
Loading

0 comments on commit cb9d5c7

Please sign in to comment.