Merge pull request #430 from Twenty-Three-Fifty-Nine/384-overall-grad…

…e-worth A warning symbol now displays next to the percentage.
Twenty-Three-Fifty-Nine · Apr 25, 2023 · 66aa882 · 66aa882
2 parents 74bbb7d + 72f9697
commit 66aa882
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 3 deletions.
diff --git a/src/course-manipulation/TemplateEditor.jsx b/src/course-manipulation/TemplateEditor.jsx
@@ -74,6 +74,7 @@ const TemplateEditor = (props) => {
     const [errorText, setErrorText] = React.useState("");
     const [loading, setLoading] = React.useState(false);
     const [closeDialog, setCloseDialog] = React.useState(false);
+    const [confirmDialog, setConfirmDialog] = React.useState(false);
     const [isKeyPress, setIsKeyPress] = React.useState(false);
     const openR = React.useRef();
     openR.current = open;
@@ -250,6 +251,7 @@ const TemplateEditor = (props) => {
         });
 
         setLoading(false);
+        setConfirmDialog(false);
     };
 
     /**
@@ -288,6 +290,7 @@ const TemplateEditor = (props) => {
         });
 
         setLoading(false);
+        setConfirmDialog(false);
     };
 
     /** Closes the creator dialog. */
@@ -296,6 +299,14 @@ const TemplateEditor = (props) => {
         onClose(false, keyPressed);
     }, [isKeyPress, onClose]);
 
+    /** Checks if the assessment weights sum up to more than 100. */
+    const needConfirmation = () => {
+        let sum = assessments.map((assessment) => assessment.weight).reduce((a, b) => parseFloat(a) + parseFloat(b), 0);
+
+        if (sum < 100) setConfirmDialog(true);
+        else editCode !== "" ? updateCourse() : createCourse();
+    }
+
     /** 
      * Closes the editor unless changes have been made in the 
      * current editor session, in which case a confirmation dialog
@@ -367,7 +378,7 @@ const TemplateEditor = (props) => {
                                 { editCode !== "" ? "Editing " + editCode : "Create New Course for Trimester " + activeTri.tri } 
                             </Typography>
                             <Box sx={{ position: "relative" }}>
-                                <Button color="inherit" onClick={editCode !== "" ? updateCourse : createCourse} disabled={loading || !formatValid || 
+                                <Button color="inherit" onClick={needConfirmation} disabled={loading || !formatValid || 
                                     (editCode !== "" && !(changesMade || changeOverride))}
                                 > 
                                     { editCode !== "" ? "Update" : "Create" } </Button>
@@ -442,6 +453,10 @@ const TemplateEditor = (props) => {
             <ConfirmDialog open={closeDialog} handleClose={() => {setCloseDialog(false)}} buttonText={"Stop"} message={"Stop template creation?"} 
                 subMessage={"Any inputted data will be lost."} confirmAction={stopCreating} 
             />
+
+            <ConfirmDialog open={confirmDialog} handleClose={() => setConfirmDialog(false)} buttonText={"Proceed"} message={"Assessment weights"}
+                subMessage={"The assessment weights don't add up to 100%. Are you sure you want to proceed?"} confirmAction={editCode !== "" ? updateCourse : createCourse}
+            />
 
             <Snackbar open={snackbar !== "none" } autoHideDuration={4000} onClose={() => setSnackbar("none")}
                 anchorOrigin={{ vertical:"bottom", horizontal: isMobile ? "center" : "left" }} sx={{zIndex: 1, mb: !isMobile && editCode !== "" ? 10 : 0}}

diff --git a/src/course-viewer/CourseViewerHeader.jsx b/src/course-viewer/CourseViewerHeader.jsx
@@ -28,12 +28,14 @@ import {
     Typography,
 } from "@mui/material";
 
+import ConfirmDialog from "../ConfirmDialog";
 import dayjs from "dayjs";
 import { isMobile } from "react-device-detect";
 
 import DeleteIcon from "@mui/icons-material/Delete";
 import LaunchIcon from "@mui/icons-material/Launch";
 import CourseViewerMobileActionButtons from "./CourseViewerMobileActionButtons";
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 
 /** 
  * The main header for the course viewer, changes based on 
@@ -119,13 +121,34 @@ const CurrentlyAchievedDisplay = (props) => {
         courseLetter,
     } = props;
 
+    let sum = courseData.assessments.map((assessment) => assessment.weight).reduce((a, b) => a + b, 0);
+
+    const [incompleteDialogOpen, setIncompleteDialogOpen] = React.useState(false);
+
     return (
         <Stack spacing={ isMobile ? 0 : 2 }>
             <Typography variant="h4" component="div" sx={{ textAlign:"center" }}> 
                 Currently Achieved:
             </Typography>
-            <Stack direction="row" spacing={ isMobile ? 5 : 10 } sx={{ alignItems:"center", justifyContent:"center" }}>
-                <Chip label={courseData.totalGrade + "%"} color="secondary" sx={{ p: 1, pt: 3, pb: 3, fontSize:30, backgroundColor:"primary.main", borderRadius: 1 }} />
+            <Stack direction="row" spacing={ isMobile ? 5 : 7 } sx={{ alignItems:"center", justifyContent:"center" }}>
+                <Stack direction="row" gap={1}>
+                    <Chip label={courseData.totalGrade + "%"} color="secondary" sx={{ p: 1, pt: 3, pb: 3, fontSize:30, backgroundColor:"primary.main", borderRadius: 1 }} />
+                    {sum < 100 && (
+                        isMobile ? (
+                            <>
+                                <Chip label={<WarningRoundedIcon />} color="secondary" sx={{ py: 3, fontSize:30, backgroundColor:"error.main", borderRadius: 1 }} onClick={() => setIncompleteDialogOpen(true)} />
+
+                                <ConfirmDialog open={incompleteDialogOpen} handleClose={() => setIncompleteDialogOpen(false)} buttonText={"Ok"} message={"Assessment weights"}
+                                    subMessage={"The assessment weights don't add up to 100%. This likely means that the course may have incomplete assessments."}
+                                />
+                            </>
+                        ) : (
+                            <Tooltip title={<h3>The assessment weights don't add up to 100%. This likely means that the course may have incomplete assessments.</h3>} arrow>
+                                <Chip label={<WarningRoundedIcon />} color="secondary" sx={{ py: 3, fontSize:30, backgroundColor:"error.main", borderRadius: 1 }} />
+                            </Tooltip>
+                        )
+                    )}
+                </Stack>
                 <Chip label={courseLetter ? courseLetter : "-"} color="secondary" sx={{ p: 2, pt: 3, pb: 3, fontSize:30, backgroundColor:"primary.main", borderRadius: 1 }} />
             </Stack>
         </Stack>