From a43af604b2dc0903589ceeb711e86fef09a30865 Mon Sep 17 00:00:00 2001 From: Gautier Killian Date: Sat, 9 Feb 2019 11:32:29 -0500 Subject: [PATCH] color formatting for all columns of assignments table --- public/extraFunctions.js | 42 ++++++++++++++++++++++++++++++++++++++++ public/home.html | 19 +++++++++--------- 2 files changed, 51 insertions(+), 10 deletions(-) diff --git a/public/extraFunctions.js b/public/extraFunctions.js index b76e61b6..3775373b 100644 --- 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 "" + value + ""; + + +} + +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 "" + value + ""; + + } + +} + let gradeFormatter = function(cell, formatterParams) { let numberGrade = parseFloat(cell.getValue()); diff --git a/public/home.html b/public/home.html index 6be5ffa1..df6821cc 100644 --- a/public/home.html +++ b/public/home.html @@ -30,22 +30,21 @@

Aspine

//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"