loading icons and active_page highlighting (#533)

- spinners as loading icons on each page that does a fetch_all (closes 
#512)
- highlight active page in nav bar

psiturk/dashboard/static/js/campaigns.js

@@ -105,10 +105,12 @@ let vm_campaigns = new Vue({
     },
     methods: {
         fetch_all_campaigns: function(){
+            this.loading = true;
             return fetch('/api/campaigns').then(response=>{
                 return response.json()
             }).then(json=>{
                 this.campaigns = json
+                this.loading = false;
             })
         },
         create_new_campaign: function(){

psiturk/dashboard/static/js/hits.js

@@ -59,15 +59,15 @@ Vue.component('hit-table-row', {
             <dl>
                 <dt>HitId</dt>
                 <dd>{{ hit_data.hitid }}</dd>
-                
+
                 <dt>Title</dt>
-                <dd>{{ hit_data.title }}</dd>            
+                <dd>{{ hit_data.title }}</dd>
             </dl>
         </td>
         <td>{{ hit_data.status }}</td>
         <td>
             <div class='dropdown'>
-                <button class='btn btn-sm btn-outline-dark dropdown-toggle' 
+                <button class='btn btn-sm btn-outline-dark dropdown-toggle'
                     type='button' data-toggle='dropdown'
                 >Action</button>
                 <div class='dropdown-menu'>
@@ -77,13 +77,13 @@ Vue.component('hit-table-row', {
                         class='dropdown-item'
                         href='#'
                     >Approve all</a>
-                    <a  
+                    <a
                         v-if='!hit_data.is_expired'
                         v-on:click='expire'
                         class='dropdown-item'
                         href='#'
                     >Expire</a>
-                    <a  
+                    <a
                         v-else
                         v-on:click='delete_hit'
                         class='dropdown-item'
@@ -116,7 +116,8 @@ let vm_hits = new Vue({
             // 'Assignable'|'Unassignable'|'Reviewable'|'Reviewing'|'Disposed',
             'only_show_active_hits': [],
             'only_show_reviewable_hits': []
-        }
+        },
+        loading: true
     }),
     computed: {
         filtered_hits: function(){
@@ -163,12 +164,14 @@ let vm_hits = new Vue({
     },
     methods: {
         fetch_all_hits: function(){
+            this.loading = true;
             fetch('/api/hits/').then((response)=>{
                 return response.json()
             })
             .then((json)=>{
-                this.hits = json
-            })            
+                this.hits = json;
+                this.loading = false;
+            })
         },
         delete_hit: function(hit){
             this.hits.splice(this.hits.indexOf(hit), 1)
@@ -185,7 +188,7 @@ let vm_hits = new Vue({
                     if (_result.success) {
                         vm_flash_messages.add_success_message('Successfully expired hit: ' + _result.data.hit_id)
                     } else {
-                        vm_flash_messages.add_error_message(json.exception, 
+                        vm_flash_messages.add_error_message(json.exception,
                             'Failed to expire hit: ' + _result.data.hit_id)
                     }
                 }
@@ -226,4 +229,4 @@ let vm_hits = new Vue({
             })
         }
     }
-})
+})

psiturk/dashboard/static/js/index.js

@@ -8,7 +8,7 @@ Vue.component('distinct-value-set', {
     template:   `<div>
                     <h4>{{grouping_key}}</h4>
                     <template v-if='filter_values[grouping_key]'>
-                        <distinct-value-checkbox 
+                        <distinct-value-checkbox
                             v-for='distinct_value in group_distinct_values'
                             v-bind:key='distinct_value'
                             v-bind:filter_value_label="distinct_value"
@@ -32,12 +32,12 @@ Vue.component('distinct-value-checkbox', {
     },
     template: `
         <div class='form-check form-check-inline'>
-            <input class='form-check-input' type='checkbox' 
+            <input class='form-check-input' type='checkbox'
                 v-bind:id="'checkbox-' + grouping_key + '-' + filter_value_label"
                 v-bind:checked='filter_checked'
                 v-on:change="$emit('change', $event.target.checked)"
                 >
-            <label class='form-check-label' 
+            <label class='form-check-label'
                 :for="'checkbox-' + grouping_key + '-' + filter_value_label"
             >{{filter_value_label}}</label>
         </div>
@@ -59,10 +59,11 @@ var d3app = new Vue({
         raw_data: [],
         only_show_complete_status: true,
         group_by_condition: true,
-        only_latest_codeversion: true,
+        only_current_codeversion: true,
         filter_values: {},
         complete_statuses: [3,4,5,7],
-        latest_codeversion: current_codeversion,
+        current_codeversion: current_codeversion,
+        loading: false
     },
     computed: {
         keys: function() {
@@ -76,7 +77,7 @@ var d3app = new Vue({
             if (this.only_show_complete_status){
                 _rollup_grouping.delete('status')
             }
-            if (this.only_latest_codeversion){
+            if (this.only_current_codeversion){
                 _rollup_grouping.delete('codeversion')
             }
             return _rollup_grouping
@@ -91,9 +92,9 @@ var d3app = new Vue({
                     return this.complete_statuses.includes(row.status)
                 })
             }
-            if (this.only_latest_codeversion){
+            if (this.only_current_codeversion){
                 _worker_data = _worker_data.filter(row => {
-                    return row.codeversion == this.latest_codeversion
+                    return row.codeversion == this.current_codeversion
                 })
             }
             var worker_data_counts = d3.rollup(_worker_data,
@@ -114,25 +115,25 @@ var d3app = new Vue({
             })
             return distincts
         },
-        filter_values_with_defaults: function(){            
+        filter_values_with_defaults: function(){
             let new_filter_values = {}
             Object.keys(this.distinct_values).forEach(distinct_key=>{
                 if (this.distinct_values[distinct_key].length){
                     new_filter_values[distinct_key] = {}
                     this.distinct_values[distinct_key].forEach(distinct_value => {
                         new_filter_values[distinct_key][distinct_value] = true
-                    })   
+                    })
                 }
             })
-            
+
             Object.assign(new_filter_values, this.filter_values)
             this.filter_values = new_filter_values
-            return new_filter_values            
+            return new_filter_values
         },
-        
+
         filtered_data: function(){
             let _filter_values = this.filter_values_with_defaults
-            return this.flat_data.filter(row => { 
+            return this.flat_data.filter(row => {
                 return this.grouping_keys.every((key,index) => {
                     let value = row[index]
                     return _filter_values[key][value]
@@ -141,12 +142,14 @@ var d3app = new Vue({
         }
     },
     created: function(){
+        this.loading = true;
         fetch('/api/assignments/')
         .then((response)=>{
             return response.json()
         })
         .then((json)=>{
             this.raw_data = json
+            this.loading = false;
         })
     },
     methods: {

psiturk/dashboard/static/js/tasks.js

@@ -16,6 +16,7 @@ let vm_tasks = new Vue({
     data: {
         tasks: [],
         approve_all_interval_trimmed: 0,
+        loading: false
     },
     computed: {
         approve_all_task: function(){
@@ -38,10 +39,12 @@ let vm_tasks = new Vue({
     },
     methods: {
         fetch_tasks: function(){
+            this.loading = true
             fetch('/api/tasks/').then(response=>{
                 return response.json()
             }).then(json=>{
                 this.tasks = json
+                this.loading = false;
             })
         },
         schedule_approve_all_task: function(){

psiturk/dashboard/templates/dashboard/assignments.html

@@ -1,4 +1,5 @@
 {% extends 'dashboard/layouts/layout.html' %}
+{% set active_page = 'assignments' %}
 
 {% block content %}
 <div id='assignments'>

psiturk/dashboard/templates/dashboard/campaigns.html

@@ -1,4 +1,5 @@
 {% extends 'dashboard/layouts/layout.html' %}
+{% set active_page = 'campaigns' %}
 
 {% block content %}
 <div id='campaigns'>
@@ -32,6 +33,15 @@
 
 
     {%- raw -%}
+
+    <div v-if="loading">
+      <div class="d-flex justify-content-center mb-3">
+        <div class="spinner-border" role="status">
+          <span class="sr-only">Loading...</span>
+        </div>
+      </div>
+    </div>
+
     <div class='row'>
         <div class='col-12 mb-4'>
             <div v-if='active_campaign'>

psiturk/dashboard/templates/dashboard/hits.html

@@ -1,4 +1,5 @@
 {% extends 'dashboard/layouts/layout.html' %}
+{% set active_page = 'hits' %}
 
 {% block content %}
 <div id='hits'>
@@ -78,6 +79,14 @@ <h3>Table Options</h3>
         </div>
     </div>
 
+    <div v-if="loading">
+      <div class="d-flex justify-content-center mb-3">
+        <div class="spinner-border" role="status">
+          <span class="sr-only">Loading...</span>
+        </div>
+      </div>
+    </div>
+
     <div>
         <table class='table'>
             <thead>
@@ -109,10 +118,11 @@ <h3>Table Options</h3>
                 ></tr>
             </tbody>
         </table>
+
         <div>
-        <p><sup>1</sup>MTurk defines "Completed" as submissions that you have either Approved or Rejected.</p>
-        <p><sup>2</sup>MTurk defines "Pending" as submissions that have been "accepted" by a worker or that are being "viewed" by a worker. A worker has the "hit duration" to complete the hit. Many users use tools that automatically accept HITs for them and put them in a queue. Workers may not begin working on your hit until it is close to the duration expiry.</p>
-        <p><sup>3</sup>Outstanding submissions that need to be either approved or rejected before the hit can be deleted.</p>
+          <p><sup>1</sup>MTurk defines "Completed" as submissions that you have either Approved or Rejected.</p>
+          <p><sup>2</sup>MTurk defines "Pending" as submissions that have been "accepted" by a worker or that are being "viewed" by a worker. A worker has the "hit duration" to complete the hit. Many users use tools that automatically accept HITs for them and put them in a queue. Workers may not begin working on your hit until it is close to the duration expiry.</p>
+          <p><sup>3</sup>Outstanding submissions that need to be either approved or rejected before the hit can be deleted.</p>
         </div>
     </div>
 </div>

psiturk/dashboard/templates/dashboard/index.html

@@ -1,4 +1,5 @@
 {% extends 'dashboard/layouts/layout.html' %}
+{% set active_page = 'home' %}
 
 {% block content %}
 {%- raw -%}
@@ -10,11 +11,11 @@ <h3>Options</h3>
             <div class='mb-2'>
                 <div class='form-check'>
                     <input class='form-check-input' type='checkbox'
-                        v-model='only_latest_codeversion'
-                        id='only-latest-codeversion'
+                        v-model='only_current_codeversion'
+                        id='only-current-codeversion'
                     >
-                    <label class='form-check-label' for='only-latest-codeversion'>
-                        Only show most recent codeversion ({{ latest_codeversion }})
+                    <label class='form-check-label' for='only-current-codeversion'>
+                        Only show most recent codeversion ({{ current_codeversion }})
                     </label>
                 </div>
             </div>
@@ -50,8 +51,16 @@ <h3>Filters</h3>
         </div>
     </div>
 
-    <div v-for='(_key, key_index) in grouping_keys' class='mb-2'>
+    <div v-for='(_key, key_index) in grouping_keys' class='mb-2'></div>
+
+    <div v-if="loading">
+      <div class="d-flex justify-content-center mb-3">
+        <div class="spinner-border" role="status">
+          <span class="sr-only">Loading...</span>
+        </div>
+      </div>
     </div>
+
     <div>
         <table class='table'>
             <thead>

psiturk/dashboard/templates/dashboard/layouts/layout.html

@@ -2,6 +2,7 @@
 
 {# Set the navigation bar pages and the currently active page#}
 {% set navigation_bar = [
+  ('/dashboard/', 'home', 'Home'),
   ('/dashboard/hits/', 'hits', 'HITs'),
   ('/dashboard/assignments/', 'assignments', 'Assignments'),
   ('/dashboard/campaigns/', 'campaigns', 'Campaigns'),

psiturk/dashboard/templates/dashboard/tasks.html

@@ -1,4 +1,5 @@
 {% extends 'dashboard/layouts/layout.html' %}
+{% set active_page = 'tasks' %}
 
 {% block content %}
 {%- raw -%}
@@ -28,6 +29,15 @@
             </template>
         </div>
     </div>
+
+    <div v-if="loading">
+      <div class="d-flex justify-content-center mb-3">
+        <div class="spinner-border" role="status">
+          <span class="sr-only">Loading...</span>
+        </div>
+      </div>
+    </div>
+
     <table class='table'>
         <thead>
             <tr>