color formatting for all columns of assignments table

Aspine · Feb 9, 2019 · a43af60 · a43af60
1 parent c3b8565
commit a43af60
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 10 deletions.
diff --git a/public/extraFunctions.js b/public/extraFunctions.js
@@ -45,6 +45,48 @@ function getColor(gradeToBeColored) {
 	}
 }
 
+function getLightColor(gradeToBeColored) {
+	if (parseFloat(gradeToBeColored) >= 90) {
+		return "#99ff66";
+	} else if (parseFloat(gradeToBeColored) >= 80) {
+		return "#66ccff";
+	} else if (parseFloat(gradeToBeColored) >= 70) {
+		return "#ffff66";
+	} else if (parseFloat(gradeToBeColored) >= 60) {
+		return "#ff8533";
+	} else if (parseFloat(gradeToBeColored) >= 0) {
+		return "#ff4d4d";
+	} else {
+		return "white";
+	}
+}
+
+let rowFormatter = function(cell, formatterParams) {
+	let numberGrade = parseFloat(cell.getValue());
+	let rowColor = cell.getRow().getData().color;
+
+	let value = cell.getValue();
+	return "<span style='color:" + rowColor + "; font-weight:bold;'>" + value + "</span>";
+
+
+}
+
+let rowGradeFormatter = function(cell, formatterParams) {
+	let numberGrade = parseFloat(cell.getValue());
+	let rowColor = cell.getRow().getData().color;
+
+
+	if (isNaN(numberGrade)) {
+		return "No Grade";
+
+	} else {
+		let value = parseFloat(cell.getValue()) + "% " + getLetterGrade(cell.getValue());
+		return "<span style='color:"+rowColor+"; font-weight:bold;'>" + value + "</span>";
+
+	}
+
+}
+
 let gradeFormatter = function(cell, formatterParams) {
 	let numberGrade = parseFloat(cell.getValue());
 

diff --git a/public/home.html b/public/home.html
@@ -30,22 +30,21 @@ <h4 id="title">Aspine</h4>
 	//height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
 	//data:tabledata[0].assignments, //assign data to table
 	layout:"fitColumns", //fit columns to width of table (optional)
-	rowFormatter:function(row) {
-    	    //if(row.getData().col == "blue"){
-    	        row.getElement().style.backgroundColor = row.getData().color;
-    	    //}
-    	},
+	//rowFormatter:function(row) {
+	//	row.getElement().style.backgroundColor = row.getData().color;
+    	//},
 	columns:[ //Define Table Columns
-		{title:"Assignment", field:"name", editor:"input"},
+		{title:"Assignment", field:"name", editor:"input", formatter: rowFormatter,},
         	{title:"Category", field:"category", editor:"select",
         	    editorParams:function(cell) {
         	        console.log(tableData.classes[selected_class_i].categories);
         	        return {values:Object.keys(tableData.classes[selected_class_i].categories)};
-        	    }
+        	    }, 
+		    formatter: rowFormatter,
         	},
-		{title:"Score", field:"score", editor:"number", editorParams:{min:0, max:100, step:1,}},
-		{title:"Max Score", field:"max_score", editor:"number", editorParams:{min:0, max:100, step:1,}},
-		{title:"Percentage", field: "percentage", formatter: gradeFormatter},
+		{title:"Score", field:"score", editor:"number", editorParams:{min:0, max:100, step:1,}, formatter: rowFormatter,},
+		{title:"Max Score", field:"max_score", editor:"number", editorParams:{min:0, max:100, step:1,}, formatter: rowFormatter,},
+		{title:"Percentage", field: "percentage", formatter: rowGradeFormatter},
 	],
 });
 //create Tabulator on DOM element with id "example-table"