React-ify scheduling check output tables

esp/esp/program/modules/handlers/schedulingcheckmodule.py

@@ -38,7 +38,7 @@ def scheduling_checks(self, request, tl, one, two, module, extra, prog):
     class Meta:
         proxy = True
 
-#For formatting output.  The default is to use HTMLSCFormatter, but someone writing a script
+#For formatting output.  The default is to use JSONFormatter, but someone writing a script
 #may want to use RawSCFormatter to get the original data structures
 class RawSCFormatter:
     def format_table(self, l, options={}, help_text=""):
@@ -47,7 +47,7 @@ def format_table(self, l, options={}, help_text=""):
     def format_list(self, l, options={}, help_text=""):
         return l
 
-class HTMLSCFormatter:
+class HTMLSCFormatter: # This might be dead, but idk maybe someone still wants it
     #requires: d, a two level dictionary where the the first set of
     #   keys are the headings expected on the side of the table, and
     #   the second set are the headings expected on the top of the table
@@ -109,9 +109,72 @@ def _format_dict_table(self, d, headings, help_text=""):
         output += "</table>"
         return output
 
+# Builds JSON output for an object with attributes help_text, headings, and body.
+class JSONFormatter:
+    #requires: d, a two level dictionary where the the first set of
+    #   keys are the headings expected on the side of the table, and
+    #   the second set are the headings expected on the top of the table
+    def format_table(self, d, options={}, help_text=""):
+        if isinstance(d, list):
+            return json.dumps(self._format_list_table(d, options['headings'], help_text=help_text))
+        else:
+            return json.dumps(self._format_dict_table(d, options['headings'], help_text=help_text))
+
+    def format_list(self, l, help_text=""): # needs verify
+        output = {}
+        output["help_text"] = help_text
+        output["headings"] = [] # no headings
+
+        # might be redundant, but it makes sure things aren't in a weird format
+        body = []        
+        for row in l:
+            body.append(self._table_row([row]))
+        output["body"] = body
+        return json.dumps(output)
+
+    def _table_headings(self, headings): # in case headings are a dict
+        #column headings
+        next_row = []
+        for h in headings:
+            next_row.append(str(h))
+        return next_row
+
+    def _table_row(self, row):
+        next_row = []
+        for r in row:
+            #displaying lists is sometimes borked.  This makes it not borked
+            if isinstance(r, list):
+                r = [str(i) for i in r]
+            next_row.append(str(r))
+        return next_row
+
+    def _format_list_table(self, d, headings, help_text=""): #needs verify
+        output = {}
+        output["help_text"] = help_text
+        output["headings"] = self._table_headings(headings)
+        body = []
+        for row in d:
+            ordered_row = [row[h] for h in headings]
+            body.append(self._table_row(ordered_row)) # maybe?
+        output["body"] = body
+        return output
+
+    def _format_dict_table(self, d, headings, help_text=""): #needs verify
+        headings = [""] + headings[:]
+        output = {}
+        output["help_text"] = help_text        
+        output["headings"] = self._table_headings(headings)
+
+        body = []
+        for key, row in sorted(d.iteritems()):
+            ordered_row = [row[h] for h in headings if h]
+            body.append(self._table_row([key] + ordered_row)) #maybe
+        output["body"] = body
+        return output
+
 class SchedulingCheckRunner:
 #Generate html report and generate text report functions?lingCheckRunner:
-     def __init__(self, program, formatter=HTMLSCFormatter()):
+     def __init__(self, program, formatter=JSONFormatter()):
           """
           high_school_only and lunch should be lists of indeces of timeslots for the high school
           only block and for lunch respectively

esp/public/media/scripts/program/modules/scheduling_checks.jsx

@@ -80,11 +80,29 @@ var SchedulingCheck = React.createClass({
     } else if (!this.state.data) {
       body = <div className="placeholder">loading...</div>;
     } else {
+      var data = JSON.parse(this.state.data); // Might not work on old browsers
+      var table;
+      if (data.headings.length == 0) {
+        var settings = {
+          header: false
+        };
+        table = <SelectTable rows = {data.body} settings = {settings} />;
+      } else {
+        var columns = [];
+        for (i = 0; i < data.headings.length; i++) {
+          if (!!data.headings[i]) {
+            columns[i] = {key: String(i), label: data.headings[i]};
+          } else {
+            columns[i] = {key: String(i), label: " "};
+          }
+        }
+        table = <SelectTable rows = {data.body} columns = {columns} />;
+      }
       body = <div>
         <div className="placeholder">
           (loaded {this.state.timestamp}, click title to close)
         </div>
-        <div className="data" dangerouslySetInnerHTML={{__html: this.state.data}} />
+        {table}
       </div>;
     }
 
@@ -114,3 +132,77 @@ var RefreshButton = React.createClass({
     </button>;
   },
 });
+
+
+// Modified from react-json-table example code.
+var SelectTable = React.createClass({
+  getInitialState: function(){
+    // We will store the sorted column and whether each row is greyed out
+    var temp = new Array();
+    for (i = 0; i < this.props.rows.length; i++) {
+        temp[this.props.rows[i]] = false;
+    }
+    if (this.props.settings == undefined) {
+        this.props.settings = {
+          header: true
+        };
+    }
+    return {sort: -1, greyed : temp};
+  },  
+  render: function(){
+    var me = this,
+        // clone the rows
+        items = this.props.rows.slice()
+    ;
+    // Sort the table
+    if( this.state.sort ){
+      items.sort( function( a, b ){
+         return a[ me.state.sort ] > b[ me.state.sort ] ? 1 : -1;
+      });
+    }
+
+    if (this.props.columns == undefined) {
+      return <JsonTable 
+        rows={items} 
+        settings={ this.getSettings() } 
+        onClickHeader={ this.onClickHeader }
+        onClickRow={ this.onClickRow }
+      />;
+    } else {
+      return <JsonTable 
+        rows={items} 
+        columns={this.props.columns}
+        settings={ this.getSettings() } 
+        onClickHeader={ this.onClickHeader }
+        onClickRow={ this.onClickRow }
+      />;
+    }
+  },
+
+  getSettings: function(){
+      var me = this;
+      // We will add some classes to the selected rows and cells
+      return {
+        headerClass: function( current, key ){
+            if( me.state.sort == key )
+              return current + ' headerSelected';
+            return current;
+        },
+        rowClass: function( current, item ){
+          if( me.state.greyed[item] )
+            return current + ' rowGreyed';
+          return current;
+        },
+        header: this.props.settings.header
+      };
+  },
+
+  onClickHeader: function( e, column ){
+    this.setState( {sort: column} );
+  },
+
+  onClickRow: function( e, item ){
+    this.state.greyed[item] = !this.state.greyed[item];
+    this.setState(); // so that it actually updates
+  }
+});

esp/templates/elements/html

@@ -46,6 +46,7 @@
 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
+    <script type="text/javascript" src="https://rawgit.com/arqex/react-json-table/master/build/react-json-table.min.js"></script>
     <script type="text/javascript" src="/media/scripts/lodash.compat.min.js"></script>
 
     {% block js1 %}