Skip to content

Commit

Permalink
Merge pull request #182 from makeopensource/Remove-unnecessary-drop-d…
Browse files Browse the repository at this point in the history 
…own-for-assignments

Remove unnecessary drop down for assignments/ course button can be pressed on anywhere
  • Loading branch information
@jessehartloff
jessehartloff authored Nov 6, 2024
2 parents 6e74f81 + fb08aaa commit 029a633
Show file tree
Hide file tree
Showing 9 changed files with 198 additions and 94 deletions.
75 changes: 48 additions & 27 deletions devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,19 @@ import LoadingOverlay from 'components/shared/loaders/loadingOverlay'
import {useActionless, useAppSelector} from 'redux/hooks'
import {SET_ALERT} from 'redux/types/active.types'

//import Card from '@mui/material/Card'
//import CardContent from '@mui/material/CardContent'
import {/*Accordion AccordionDetails, AccordionSummary*/ TextField, Typography} from '@mui/material'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import {Accordion, AccordionDetails, CardActionArea, TextField, Typography} from '@mui/material'


import Grid from '@mui/material/Unstable_Grid2'

import styles from './assignmentDetailPage.scss'
import {prettyPrintDateTime} from "../../../utils/date.utils";

import { useLocation } from 'react-router-dom';
import Scoreboard from '../assignments/scoreboard';

const AssignmentDetailPage = () => {
const [setAlert] = useActionless(SET_ALERT)
const history = useHistory()
Expand All @@ -37,10 +41,12 @@ const AssignmentDetailPage = () => {
// const [containerAutograder, setContainerAutograder] = useState<ContainerAutoGrader | null>()
// const containerAutograder = false; //TODO: Use the above commented out code to get the container autograder
// const [ setNonContainerAutograders] = useState(new Array <NonContainerAutoGrader>())
const [showScoreboard, setShowScoreboard] = useState(false);
const location = useLocation();

useEffect(() => {
fetchData()
}, []);
}, [location]);


const fetchData = async () => {
Expand Down Expand Up @@ -90,10 +96,13 @@ const AssignmentDetailPage = () => {
const key = e.target.id
setFormData(prevState => ({...prevState,[key] : e.target.value}))
}


const handleFileChange = (e : React.ChangeEvent<HTMLInputElement>) => {
setFile(e.target.files?.item(0))
}


const handleSubmit = async () => {
let response;
const contentField = {
Expand Down Expand Up @@ -122,7 +131,7 @@ const AssignmentDetailPage = () => {
} else {
response = await RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/submissions`, submission);
}

setAlert({ autoDelete: true, type: 'success', message: 'Submission Sent' })

// Now you can use submissionResponse.id here
Expand All @@ -139,14 +148,15 @@ const AssignmentDetailPage = () => {
}
}


return(
<PageWrapper>
<div className={styles.header}>
<h1 className = {styles.assignment_heading}>{assignment?.name}</h1>
<hr className= {styles.line}/>
<hr className= {styles.line}/>
</div>
<div className = {styles.wrap}>

{role.isInstructor() && (
<>
<div className={styles.card}>
Expand Down Expand Up @@ -175,16 +185,22 @@ const AssignmentDetailPage = () => {
(`/course/${courseId}/assignment/${assignmentId}/submissions`)
}}>Grade Submissions</button>}

<hr className = {styles.line} />
{role.isInstructor() && <button
className={styles.buttons} onClick={() => {
setShowScoreboard(!showScoreboard)}

}>Scoreboard</button>
}




</div>
</div>
</>
)}







<Grid display='flex' justifyContent='center' alignItems='center'>
<div className={styles.assignment_card}>
Expand All @@ -196,26 +212,24 @@ const AssignmentDetailPage = () => {
<Typography className={styles.due_date}>{`Due Date: ${new Date(assignment.dueDate).toLocaleDateString()}`}</Typography>
)}
{assignmentProblems && assignmentProblems.length > 0 ? (
assignmentProblems.map((assignment, index) => (
<div className={styles.accordion} key={index}>
<div>
<div className={styles.accordionDetails}>{`Assignment Problem ${index + 1}`}</div>
</div>
<div className={styles.accordionDetails}>
<Typography>{assignment.problemName}</Typography>
<TextField id={assignment.problemName} fullWidth className={styles.textField} variant='outlined' label='Answer' onChange={handleChange}></TextField>
</div>
</div>
assignmentProblems.map((assignmentProblem, index) => (
<Accordion className={styles.accordion} key={index}>

<AccordionDetails className={styles.accordionDetails}>
<Typography>{assignmentProblem.problemName}</Typography>
<TextField id={assignmentProblem.problemName} fullWidth className={styles.textField} variant='outlined' label='Answer' onChange={handleChange}></TextField>
</AccordionDetails>
</Accordion>
))

) : (
<div>
<Typography>No Problems Exist</Typography>
</div>
)}

{!(assignment?.disableHandins) && (<input type="file" className={styles.fileInput} onChange={handleFileChange} />)}

{assignmentProblems && assignmentProblems.length > 0 ? (
<div className = {styles.submit_container}>
<button className={styles.buttons} onClick={handleSubmit}>Submit</button>
Expand All @@ -230,7 +244,7 @@ const AssignmentDetailPage = () => {
<hr className = {styles.line}/>
</div>

{/**Submissions List */}

<div>
<div className={styles.submissionsContainer}>
{submissions.map((submission, index) => (
Expand All @@ -245,9 +259,16 @@ const AssignmentDetailPage = () => {
</div>
</div>
))}

{showScoreboard && (
<div className={styles.scoreboardContainer}>
<Scoreboard courseId={courseId} assignmentId={assignmentId} />

</div>
)}
</div>
</div>

</PageWrapper>
)
}
Expand Down
24 changes: 24 additions & 0 deletions devU-client/src/components/pages/assignments/scoreboard.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
@import 'variables';

.scoreboardTable {
width: 100%;
border-collapse: collapse;
margin-top: 20px;

th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

th {
background-color: rebeccapurple;


}
.scoreboardContainer {
margin-top: 20px;
border: 1px solid #ddd;
padding: 5px;
}
}
46 changes: 46 additions & 0 deletions devU-client/src/components/pages/assignments/scoreboard.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@

import React from 'react';
import styles from './scoreboard.scss';

interface ScoreboardProps {
courseId: string;
assignmentId: string;
}

const Scoreboard: React.FC<ScoreboardProps> = ({ courseId, assignmentId }) => {
// Dummy scoreboard data
const scoreboardData = [
{ UBit: 'ashwa', score: 95, runtime: '1.2s' },
{ UBit: 'yessicaq', score: 88, runtime: '1.5s' },
{ UBit: 'neemo', score: 76, runtime: '2.1s' },
{ UBit: 'alex', score: 29, runtime: '17.2s' },
{ UBit: 'jesse', score: 56, runtime: '9.5s' },
{ UBit: 'kevin', score: 7, runtime: '100s' },

];

return (
<div>
<h3>{`Scoreboard for Assignment ${assignmentId} in Course ${courseId}`}</h3>
<table className={styles.scoreboardTable}>
<thead>
<tr>
<th>UBit</th>
<th>Score</th>
<th>Runtime</th>
</tr>
</thead>
<tbody>
{scoreboardData.map((entry) => (
<tr key={entry.UBit}>
<td>{entry.UBit}</td>
<td>{entry.score}</td>
<td>{entry.runtime}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
export default Scoreboard;
10 changes: 10 additions & 0 deletions devU-client/src/components/pages/courses/courseDetailPage.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,16 @@
color: white !important;
}

.assignmentName {
&::after {
content: '';
display: block;
width: 100%;
margin: 5px auto;
border-bottom: 1px solid #ccc;
}
}




Expand Down
13 changes: 7 additions & 6 deletions devU-client/src/components/pages/courses/courseDetailPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ const CourseDetailPage = () => {
<h2> Instructor: </h2>


<div style={{display: 'flex', justifyContent: 'space-between'}}>
<div style={{display: 'flex', flexWrap:'wrap', justifyContent: 'space-between'}}>



Expand Down Expand Up @@ -168,6 +168,7 @@ const CourseDetailPage = () => {
history.push(`/course/${courseId}/assignment/${assignment.id}`)
}}>
<ListItemText
className = {styles.assignmentName}
primary={
<Typography style={{ textAlign: 'center' }}>
{assignment.name}
Expand All @@ -176,14 +177,14 @@ const CourseDetailPage = () => {
secondary={
<React.Fragment>
<Typography
sx={{ display: 'inline' }}
sx={{ display: 'center' }}
component="span"
variant="body2"
color="text.primary"
color="grey"
>
Start Date: {new Date(assignment.startDate).toLocaleDateString()}
<br /> {/* Add a line break */}
Due Date: {new Date(assignment.dueDate).toLocaleDateString()}
Start: {new Date(assignment.startDate).toLocaleDateString()}
|
Due: {new Date(assignment.dueDate).toLocaleDateString()}
</Typography>
</React.Fragment>
}
Expand Down
10 changes: 6 additions & 4 deletions devU-client/src/components/pages/forms/containers/nonContainerAutoGraderForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const NonContainerAutoGraderForm = () => {
const toggleRegex = (e: React.ChangeEvent<HTMLInputElement>) => {
setFormData(prevState => ({...prevState,isRegex : e.target.checked}))
}

useEffect(() => {
RequestService.get(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems/`)
.then((res) => {
Expand Down Expand Up @@ -74,8 +74,10 @@ const NonContainerAutoGraderForm = () => {
RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/non-container-auto-graders/`, finalFormData)
.then(() => {
setAlert({ autoDelete: true, type: 'success', message: 'Non-Container Auto-Grader Added' })
history.goBack()
// history.goBack()
history.push(`/course/${courseId}/assignment/${assignmentId}?refreshProblems=true`);
})

.catch((err: ExpressValidationError[] | Error) => {
const message = Array.isArray(err) ? err.map((e) => `${e.param} ${e.msg}`).join(', ') : err.message
const newFields = applyStylesToErrorFields(err, formData, textStyles.errorField)
Expand Down Expand Up @@ -110,13 +112,13 @@ const NonContainerAutoGraderForm = () => {
<label htmlFor='score'>Score *</label>
<TextField id='score' onChange={handleChange} value={formData.score}
className={invalidFields.get('score')}></TextField>

<div style={{ display: 'flex', justifyContent: 'center' }}>
<label htmlFor='regex'>Regex</label>
<input id= 'regex' type='checkbox' checked={formData.isRegex} onChange={toggleRegex}></input>
</div>
<br/>

<div style={{ display: 'flex', justifyContent: 'center' }}>
<Button variant='contained' onClick= { handleSubmit }>Add NCAG</Button>
</div>
Expand Down
Loading

0 comments on commit 029a633

Please sign in to comment.