Unmask UI enhancements (#82)

* session page working with requirejs

* track page working

* handsontable loading

* track page working with bootstrap

* all pages working with requirejs

* code cleanup and reorganizing dependencies

* cleaning up code

* reorganized to separate views and controllers

* added local copy of bootstrap

* Saving file in correct rows. Headers for demographic data are still in form of keys

* removed .idea

* properly sorted columns and sheets

* grabbing data from hot for csv

* event listeners

* drag and drop, unmask button

* basic table saving

* full table with correct labels

* rendering tables

* redoing table rendering...

* titles render

* table showing on click

* cleaning the lint

* added an alert msg for POST /get_masks

* drag functioning again for unmask

* drag and drop restored for client

* removed extraneous textarea box on unmask page

* removed placeholder values

* removed unnecessary unmask button

* Remove merge conflict leftover

* fixed gender labels on unmasked csv

* removed placeholder session key and password in unmasking page

* moved updating table widths to tableController

* error messages for 500 get masks post

* fixed string parsing error in saving questions

* table headers on unmask page

* linting

* Fix formatting

Author: lucyq

.eslintignore

@@ -1,4 +1,3 @@
 client/app/helper/sheetjsw.js
-
-
+client/app/data/*
 client/app/vendor/*

.eslintrc.json

@@ -2,6 +2,7 @@
   "extends": "eslint:recommended",
   "rules": {
     "indent": [2, 2, { "SwitchCase": 1 }],
+    "keyword-spacing": [2, { "before": true, "after": true }],
     "object-shorthand": [2, "consistent"],
     "no-unused-vars": [1, {"vars": "local", "args": "none"}],
     "quote-props": [1, "consistent-as-needed"],

client/app/common.js

@@ -13,7 +13,9 @@ require.config({
     alertify_defaults: 'helper/alertify_defaults',
     DropSheet: 'helper/drop_sheet',
     mpc: 'helper/mpc',
-    ResizeSensor: 'vendor/ResizeSensor'
+    ResizeSensor: 'vendor/ResizeSensor',
+    table_template: 'data/tables'
+
   },
   shim: {
     bootstrap: {

client/app/controllers/analystController.js

@@ -225,9 +225,10 @@ define(['filesaver'], function (filesaver) {
       },
       error: function (err) {
         /* global errmsg */
-        var errmsg = 'Error Connecting: Reconnect Attempt #' + counter.toString();
+        // NOTE: commented out because errmsg is assigned a value but never used
+        // var errmsg = 'Error Connecting: Reconnect Attempt #' + counter.toString();
         if (err && err.hasOwnProperty('responseText') && err.responseText !== undefined) {
-          errmsg = err.responseText;
+          // errmsg = err.responseText;
         }
 
         //document.getElementById(status).className = 'alert alert-error';

client/app/controllers/clientController.js

@@ -1,6 +1,6 @@
 /* global alertify, $ */
 
-define(['jquery', 'helper/sail_HOT', 'helper/mpc', 'alertify', 'alertify_defaults'], function ($, sailHOT, mpc, alertify) {
+define(['jquery', 'controllers/tableController', 'helper/mpc', 'alertify', 'alertify_defaults'], function ($, tableController, mpc, alertify) {
 
   var client = (function () {
     var SESSION_KEY_ERROR = 'Invalid session number';
@@ -24,6 +24,7 @@ define(['jquery', 'helper/sail_HOT', 'helper/mpc', 'alertify', 'alertify_default
       discrepancies: SEMANTIC_CELLS
     };
 
+    // TODO: create new view for alerts
     function error(msg) {
       alertify.alert('<img src="/images/cancel.png" alt="Error">Error!', msg);
     }
@@ -77,11 +78,6 @@ define(['jquery', 'helper/sail_HOT', 'helper/mpc', 'alertify', 'alertify_default
         dataType: 'text'
       }).then(function (response) {
         response = JSON.parse(response);
-        var title = response.title;
-        var description = response.description;
-
-        //$("#session-title").html(title);
-        //$("#session-description").html(description);
 
         var $parent = $('#session, #participation-code').parent();
         $parent.removeClass('has-error').addClass('has-success has-feedback');
@@ -116,11 +112,8 @@ define(['jquery', 'helper/sail_HOT', 'helper/mpc', 'alertify', 'alertify_default
     function updateWidth(tables, reset) {
 
       if (reset) {
-        var $instructions = $('#instructions');
-        $instructions.css('width', '');
-        $instructions.css('max-width', '');
-        $instructions.css('margin-left', '');
-        $('header, #shadow').css('right', 0);
+        tableController.resetTableWidth();
+
         tableWidthsOld = [];
         return;
       }
@@ -149,24 +142,7 @@ define(['jquery', 'helper/sail_HOT', 'helper/mpc', 'alertify', 'alertify_default
 
       var maxWidth = Math.max.apply(null, tableWidths);
 
-      // Reset width of instructions.
-      $('#instructions').css('width', maxWidth);
-      $('#instructions').css('max-width', maxWidth);
-      var documentWidth = $(window).width();
-      var containerWidth = parseFloat($('.container').first().width());
-      var offset = (containerWidth - maxWidth) / 2;
-
-      if (offset < (containerWidth - documentWidth) / 2) {
-        offset = (containerWidth - documentWidth) / 2;
-      }
-
-      if (maxWidth > documentWidth) {
-        $('header, #shadow').css('right', documentWidth - maxWidth);
-      }
-
-      // Bootstrap row has margin-left: -15px, add this back to offset to keep card centered
-      $('#instructions').css('margin-left', offset + 15);
-
+      tableController.updateTableWidth(maxWidth);
       tableWidthsOld = tableWidths.concat();
     }
 
@@ -240,8 +216,8 @@ define(['jquery', 'helper/sail_HOT', 'helper/mpc', 'alertify', 'alertify_default
         }
 
         // Register semantic discrepancies validator.
-        // console.log("VALIDATE?", register_validator)
-        sailHOT.register_validator('discrepancies', function (table, cell, value, callback) {
+        // console.log("VALIDATE?", registerValidator)
+        tableController.registerValidator('discrepancies', function (table, cell, value, callback) {
           checkSemanticDiscrepancies(tables, table, cell, value, callback);
         });
 
@@ -258,19 +234,18 @@ define(['jquery', 'helper/sail_HOT', 'helper/mpc', 'alertify', 'alertify_default
             errorMsg = GENERIC_TABLE_ERR;
             errorMsg = errorMsg.replace('%s', table_name);
           }
-
           if (errors.indexOf(errorMsg) === -1) {
             errors = errors.concat(errorMsg);
           }
         };
-        sailHOT.register_error_handler(errorHandler);
+        tableController.registerErrorHandler(errorHandler);
 
         // Validate tables (callback chaining)
         (function validate_callback(i) {
           if (i >= tables.length) {
             // Remove the semantic discrepancies validator.
-            sailHOT.remove_validator('discrepancies');
-            sailHOT.remove_error_handler(0);
+            tableController.removeValidator('discrepancies');
+            tableController.removeErrorHandler(0);
             for (i = 0; i < tables.length; i++) {
               tables[i].render();
             }
@@ -336,7 +311,7 @@ define(['jquery', 'helper/sail_HOT', 'helper/mpc', 'alertify', 'alertify_default
 
       // Handle table data, tables are represented as 2D associative arrays
       // with the first index being the row key, and the second being the column key
-      var tables_data = sailHOT.construct_data_tables(tables);
+      var tables_data = tableController.constructDataTables(tables);
       for (var i = 0; i < tables_data.length; i++) {
         data_submission[tables_data[i].name] = tables_data[i].data;
       }
@@ -443,7 +418,7 @@ define(['jquery', 'helper/sail_HOT', 'helper/mpc', 'alertify', 'alertify_default
      * 2. For the bonus table (3rd table), it can only be non-zero if the other tables are non-zero.
      */
     function checkSemanticDiscrepancies(tables, table, cell, value, callback) {
-      var num_regex = /$[0-9]+^/; // no need to worry about empty spaces, hot removes them for number types.
+      // var num_regex = /$[0-9]+^/; // no need to worry about empty spaces, hot removes them for number types.
       var bonus_table = tables[2];
       var name = table._sail_meta.name;
       var r = cell.row_index;