Merge pull request #1721 from learning-unlimited/hide-scheduling-checks

React-ify scheduling check output tables

Author: benjaminjkraft

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,71 +47,57 @@ def format_table(self, l, options={}, help_text=""):
     def format_list(self, l, options={}, help_text=""):
         return l
 
-class HTMLSCFormatter:
+# 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 self._format_list_table(d, options['headings'], help_text=help_text)
+            return json.dumps(self._format_list_table(d, options['headings'], help_text=help_text))
         else:
-            return self._format_dict_table(d, options['headings'], help_text=help_text)
+            return json.dumps(self._format_dict_table(d, options['headings'], help_text=help_text))
 
-    def format_list(self, l, help_text=""):
-        output = self._table_start(help_text)
-        for row in l:
-            output += self._table_row([row])
-        output += "</table>"
-        return output
-
-    def _table_start(self, help_text=""):
-        output = ''
-        if help_text:
-             output += '<div class="help-text">%s</div>' % help_text
-        output += '<table cellpadding=10>'
-        return output
+    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
+        output["body"] = [self._table_row([row]) for row in l]
+        return json.dumps(output)
 
-    def _table_headings(self, headings):
-        #column headings
-        next_row = ""
-        for h in headings:
-            next_row = next_row + "<th><div style=\"cursor: pointer;\">" + str(h) + "</div></th>"
-        next_row = next_row + "</tr></thread>"
-        return next_row
 
     def _table_row(self, row):
-        next_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 += "<td>" + str(r) + "</td>"
-        next_row += "</tr>"
+            if isinstance(r, int):
+                next_row.append(r)
+            else:
+                next_row.append(str(r))
         return next_row
 
-    def _format_list_table(self, d, headings, help_text=""):
-        output = self._table_start(help_text)
-        output = output + self._table_headings(headings)
-        for row in d:
-            ordered_row = [row[h] for h in headings]
-            output = output + self._table_row(ordered_row) 
-        output = output + "</table>"
+    def _format_list_table(self, d, headings, help_text=""): #needs verify
+        output = {}
+        output["help_text"] = help_text
+        output["headings"] = map(str, headings)
+        output["body"] = [self._table_row([row[h] for h in headings]) for row in d]
         return output
 
-    def _format_dict_table(self, d, headings, help_text=""):
+    def _format_dict_table(self, d, headings, help_text=""): #needs verify
         headings = [""] + headings[:]
-        output = self._table_start(help_text)
-        output = output + self._table_headings(headings)
-
-        for key, row in sorted(d.iteritems()):
-            ordered_row = [row[h] for h in headings if h]
-            output = output + self._table_row([key] + ordered_row)
-        output += "</table>"
+        output = {}
+        output["help_text"] = help_text        
+        output["headings"] = map(str, headings)
+        output["body"] = [self._table_row([key] + [row[h] for h in headings if h]) for key, row in sorted(d.iteritems())]
         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/default_styles/scheduling_checks.css

@@ -1,3 +1,7 @@
+table { border-spacing: 0; }
+td { padding: 10px; cursor: pointer; }
+th { cursor: pointer; }
+
 .scheduling-check {
      border: 1px solid black;
      padding: 10px;
@@ -14,6 +18,11 @@
      font-size: 14px;
 }
 
+.reset-button {
+     margin-left: auto;
+     float: right;
+}
+
 .refresh-button {
      margin-left: auto;
      float: right;
@@ -22,3 +31,15 @@
 .placeholder {
      text-align: center;
 }
+
+.rowGreyed {
+color: lightgray;
+}
+
+.headerSelected {
+  color: blue;
+}
+
+.sortReversed {
+  color: red;
+}

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

@@ -16,6 +16,15 @@ var SchedulingCheckList = React.createClass({
  *
  * This might or might not be loaded yet; clicking the heading will load the
  * data from the server and expand it.
+ * 
+ * There is supposedly a functionality in which clicking on a table row will cause it
+ * to be greyed out, however whether this actually happens depends on your
+ * scheduling_checks.css (clicking could possibly do nothing, or possibly
+ * do other things).
+ *
+ * Likewise, clicking on a table header will sort by that column. You can also
+ * add formatting in scheduling_checks.css so that the selected header will
+ * look different, e.g. be colored differently.
  */
 var SchedulingCheck = React.createClass({
   propTypes: {
@@ -28,8 +37,45 @@ var SchedulingCheck = React.createClass({
       open: false,
       failed: false,
       timestamp: "never",
+      tableState: {
+        greyed: {},
+        sort: -1,
+        reverse: false
+      },
     };
   },
+  
+  sortColumn: function (column) {
+    if (this.state.tableState.sort === column) {
+      this.setState( {
+        tableState: React.addons.update(this.state.tableState, 
+          { reverse: {$set: !this.state.tableState.reverse} } ),
+        } );   
+    } else {
+      this.setState( {
+        tableState: React.addons.update(this.state.tableState, { sort: {$set: column}, reverse: {$set: false} }),
+        } );
+    }
+  },
+  
+  greyRow: function(item ){
+    newkey = {};
+    newkey[item] = !this.state.tableState.greyed[item];
+    this.setState( {
+      tableState: React.addons.update(this.state.tableState, { greyed: {$merge: newkey} } ),
+      } );
+  },
+  
+  resetTable: function () {
+    this.setState({
+      tableState: {
+        greyed: {},
+        sort: -1,
+        reverse: false
+      },
+      });
+    
+  },
 
   handleClick: function () {
     if (this.state.open) {
@@ -80,18 +126,40 @@ 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) {
+        table = <SelectTable rows = {data.body} header = {false} 
+                  saveState = {this.state.tableState} 
+                  clickHeader = {this.sortColumn} clickRow = {this.greyRow} 
+                  />;
+      } 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} 
+                  header = {true} saveState = {this.state.tableState} 
+                  clickHeader = {this.sortColumn} clickRow = {this.greyRow} 
+                  />;
+      }
       body = <div>
         <div className="placeholder">
           (loaded {this.state.timestamp}, click title to close)
         </div>
-        <div className="data" dangerouslySetInnerHTML={{__html: this.state.data}} />
+        {table}
       </div>;
     }
 
     return <div className="scheduling-check">
       <div className="scheduling-check-title">
         <span onClick={this.handleClick}>{this.props.title}</span>
         <RefreshButton onClick={this.loadData} />
+        <ResetButton onClick={this.resetTable} />
       </div>
       <div className="scheduling-check-body">
         {body}
@@ -114,3 +182,89 @@ var RefreshButton = React.createClass({
     </button>;
   },
 });
+
+/**
+ * Calls its onClick prop to reset table greying/sorting
+ */
+var ResetButton = React.createClass({
+  propTypes: {
+    onClick: React.PropTypes.func.isRequired,
+  },
+
+  render: function () {
+    return <button onClick={this.props.onClick} className="reset-button">
+      Reset
+    </button>;
+  },
+});
+
+// Modified from react-json-table example code.
+var SelectTable = React.createClass({
+  
+  propTypes: {
+    rows: React.PropTypes.array.isRequired,
+    saveState: React.PropTypes.shape({
+      greyed: React.PropTypes.object.isRequired,
+      sort: React.PropTypes.any.isRequired,
+      reverse: React.PropTypes.bool.isRequired
+    }).isRequired,
+    header: React.PropTypes.bool.isRequired,
+    columns: React.PropTypes.array,
+    clickHeader: React.PropTypes.func.isRequired,
+    clickRow: React.PropTypes.func.isRequired
+  },
+    
+  getInitialState: function(){
+    return {};
+  },  
+  render: function(){
+    // clone the rows
+    items = this.props.rows.slice();
+    
+    items = _.sortBy(items, this.props.saveState.sort);
+    
+    if (this.props.saveState.reverse) items.reverse();
+    
+    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.props.saveState.sort == key ) {
+              if ( me.props.saveState.reverse) {
+                return current + ' headerSelected sortReversed';
+              } else {
+                return current + ' headerSelected';
+              }
+            } else {
+              return current;
+            }
+        },
+        rowClass: function( current, item ){
+          if( me.props.saveState.greyed[item] ) {
+            return current + ' rowGreyed';
+          } else {
+            return current;
+          }
+        },
+        header: this.props.header
+      };
+  },
+    
+  onClickHeader: function( e, column ){
+    this.props.clickHeader(column);
+  },
+  
+  onClickRow: function( e, item ){ 
+    this.props.clickRow(item);
+  }
+});

esp/templates/elements/html

@@ -44,7 +44,7 @@
     <script type="text/javascript" src="/media/scripts/common.js"></script>
     {% endblock jquery %}
 
-    <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/react-with-addons.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="/media/scripts/lodash.compat.min.js"></script>
 

esp/templates/program/modules/schedulingcheckmodule/output.html

@@ -14,7 +14,9 @@
 }
 //-->
 </script>
+<script type="text/javascript" src="https://rawgit.com/arqex/react-json-table/6518983b5ecc0a314e50a4b7f26985c04069babd/build/react-json-table.min.js"></script>
 <script type="text/jsx" src="/media/scripts/program/modules/scheduling_checks.jsx"></script>
+
 {% endblock %}
 
 {% block stylesheets %}