COMP-213: progress bar

survey-frontend/src/ProgressBar.tsx

+import React from "react";
+
+function ProgressBar({
+  completionPercentage,
+  unansweredPercentage,
+  pages,
+  pageTitle,
+}) {
+  const progressBarContainerStyle: React.CSSProperties = {
+    display: "flex",
+    flexWrap: "wrap",
+    height: "10px",
+    margin: "5px",
+    width: `${100 / pages}%`,
+  };
+
+  const progressBarFillStyle: React.CSSProperties = {
+    height: "100%",
+    transition: "width 0.3s ease",
+  };
+
+  const progressBarFillStyleCopy: React.CSSProperties = {
+    ...progressBarFillStyle,
+    width: `${completionPercentage}%`,
+    backgroundColor: "#1ab394",
+  };
+  const unansweredProgressBarFillStyle: React.CSSProperties = {
+    ...progressBarFillStyle,
+    width: `${unansweredPercentage}%`,
+    backgroundColor: "#9d9d9d",
+  };
+
+  const pageTitleStyle: React.CSSProperties ={
+    width: "100%",
+    textAlign: "center"
+  }
+  
+
+  return (
+    <div style={progressBarContainerStyle}>
+      <div style={progressBarFillStyleCopy} />
+      <div style={unansweredProgressBarFillStyle} />
+      <div style={pageTitleStyle}>{pageTitle}</div>
+    </div>
+  );
+}
+
+export default ProgressBar;

survey-frontend/src/SurveyComponent.tsx

@@ -3,11 +3,17 @@ import { Model, Serializer, ComputedUpdater, Question } from "survey-core";
 import { Survey } from "survey-react-ui";
 import "survey-core/modern.min.css";
 import './survey.scss';
-
+import ProgressBar from "./ProgressBar";
 
 Serializer.addProperty("itemvalue", "customDescription:text");
 Serializer.addProperty("question", "hideCheckboxLabels:boolean");
 
+interface Progress {
+  completionPercentage: number;
+  unansweredPercentage: number;
+  totalPages: number;
+  pageTitle: string;
+}
 enum VerificationStatus {
   New = "new",                   // a question that was not answered last year
   Answered = "answered",         // a question that was not answered last year but has an answer now
@@ -18,8 +24,8 @@ enum VerificationStatus {
 
 
 function SurveyComponent() {
-
   const [surveyModel, setSurveyModel] = useState<Model>();
+  const [progress, setProgress] = useState<Progress[]>([]);
   const verificationStatus = useRef<Map<string, VerificationStatus>>(new Map());
 
     function setVerifyButton(question: Question, state: VerificationStatus) {
@@ -67,8 +73,7 @@ function SurveyComponent() {
 
         const survey = new Model(json['model']);
 
-        if (json['data'] !== null)
-        {
+    if (json['data'] !== null) {
       survey.data = json['data'];
     }
 
@@ -104,8 +109,7 @@ function SurveyComponent() {
         });
 
     survey.onComplete.add((sender, options) => {
-
-            console.log(sender.data)
+      console.log(sender.data);
 
       options.showSaveInProgress();
       const xhr = new XMLHttpRequest();
@@ -134,7 +138,6 @@ function SurveyComponent() {
             console.log(sender.data)
 
       // TODO same as above
-
     });
 
         survey.onAfterRenderQuestion.add(function(survey, options){
@@ -169,29 +172,81 @@ function SurveyComponent() {
       if (options.column['indexValue'] == 0 && 'item' in options.row) {
         const item = options.row['item'] as object;
         if (item['customDescription'] !== undefined) {
-                    options.htmlElement.parentElement?.children[0].setAttribute("title", item['customDescription']);
+          options.htmlElement.parentElement?.children[0].setAttribute(
+            "title",
+            item['customDescription']
+          );
         }
       }
     });
 
+    survey.onCurrentPageChanged.add((sender) => {
+      console.log("sender--> " + sender);
+      calculateProgress(sender);
+    });
+
     setSurveyModel(survey);
+  }
+  const filterCallback = (question) => {
+    return question.value !== null && question.value !== undefined;
+  };
 
+  const calculateProgress = (survey) => {
+    // console.log("survey--> "+ survey);
+    if (survey && survey.pages) {
+      console.log("survey.page--> " + survey.pages);
+      const progressArray: Progress[] = [];
+      survey.pages.forEach((page) => {
+        const sectionQuestions = page.questions.filter(
+          (question) => question.startWithNewLine
+        );
+        const questionCount = sectionQuestions.length;
+        const answeredCount = sectionQuestions.filter(filterCallback).length;
+        const unansweredCount = questionCount - answeredCount;
+        const completionPercentage = answeredCount / questionCount;
+
+
+        progressArray.push({
+          completionPercentage: completionPercentage * 100,
+          unansweredPercentage: (unansweredCount / questionCount) * 100,
+          totalPages: survey.pages.length,
+          pageTitle: page.title,
+        });
+      });
+      setProgress(progressArray);
     }
+  };
 
   useEffect(() => {
     getModel();
   }, []);
 
-
-    if (surveyModel)
-    {
-        return (<Survey model={surveyModel} />);
-    }
-    else
-    {
-        return (<span>loading...</span>);
+  useEffect(() => {
+    if (surveyModel) {
+      calculateProgress(surveyModel);
+    }
+  }, [surveyModel]);
+
+  if (surveyModel) {
+    return (
+      <div className="survey-container">
+        <div className="survey-progress">
+          {progress.map((sectionProgress, index) => (
+            <ProgressBar
+              key={index}
+              completionPercentage={sectionProgress.completionPercentage}
+              unansweredPercentage={sectionProgress.unansweredPercentage}
+              pages={sectionProgress.totalPages}
+              pageTitle={sectionProgress.pageTitle}
+            />
+          ))}
+        </div>
+        <Survey model={surveyModel} />
+      </div>
+    );
+  } else {
+    return <span>loading...</span>;
   }
-
 }
 
 export default SurveyComponent;

survey-frontend/src/survey.scss

@@ -25,3 +25,7 @@
 	cursor: auto;
 	background-color: transparent;
 }
+
+.survey-progress {
+	display: flex;
+}
\ No newline at end of file