first pass at extracting frontend changes

- navbar on top
- fluid layout
- mode changeable via toggle switch

psiturk/dashboard/__init__.py

@@ -1,24 +1,25 @@
-from __future__ import generator_stop
+# Flask imports
 from flask import Blueprint, render_template, request, current_app as app, \
-    flash, session, g, redirect, url_for
-from flask_login import login_user, logout_user, current_user
-from functools import wraps
+    flash, session, g, redirect, url_for, jsonify
+from flask_login import login_user, logout_user, current_user, LoginManager, UserMixin
+
+# Psiturk imports
 from psiturk.psiturk_config import PsiturkConfig
 from psiturk.user_utils import PsiTurkAuthorization, nocache
 from psiturk.psiturk_exceptions import *
-
 from psiturk.services_manager import SESSION_SERVICES_MANAGER_MODE_KEY, \
     psiturk_services_manager as services_manager
-from flask_login import LoginManager, UserMixin
-
-# # Database setup
 from psiturk.models import Participant
+from psiturk.version import version_number
 
-# load the configuration options
+# Misc. imports
+from functools import wraps
+
+# Load configuration options
 config = PsiturkConfig()
 config.load_config()
 
-# if you want to add a password protect route use this
+# For password protected routes
 myauth = PsiTurkAuthorization(config)
 
 # import the Blueprint
@@ -44,6 +45,15 @@ def init_app(app):
                 '\nRefusing to start.'
                 ))
     login_manager.init_app(app)
+    with app.app_context():
+        @app.context_processor
+        def inject_context_vars():
+            return dict(
+                psiturk_version_number = version_number,
+                code_version_number = config.get('Task Parameters', 'experiment_code_version'),
+                aws_access_key_id = services_manager.config.get('AWS Access', 'aws_access_key_id'),
+                amt_balance = services_manager.amt_balance
+                )
 
 
 class DashboardUser(UserMixin):
@@ -126,18 +136,10 @@ def before_request():
 @dashboard.route('/mode', methods=('GET', 'POST'))
 def mode():
     if request.method == 'POST':
-        mode = request.form['mode']
-        if mode not in ['live', 'sandbox']:
-            flash('unrecognized mode: {}'.format(mode), 'danger')
-        else:
-            try:
-                services_manager.mode = mode
-                session[SESSION_SERVICES_MANAGER_MODE_KEY] = mode
-                flash('mode successfully updated to {}'.format(mode), 'success')
-            except Exception as e:
-                flash(str(e), 'danger')
-    mode = services_manager.mode
-    return render_template('dashboard/mode.html', mode=mode)
+        mode = request.json['mode']
+        services_manager.mode = mode
+        session[SESSION_SERVICES_MANAGER_MODE_KEY] = mode
+        return jsonify(), 200
 
 
 @dashboard.route('/index')
@@ -151,13 +153,13 @@ def index():
 @dashboard.route('/hits')
 @dashboard.route('/hits/')
 def hits_list():
-    return render_template('dashboard/hits/list.html')
+    return render_template('dashboard/hits.html')
 
 
 @dashboard.route('/assignments')
 @dashboard.route('/assignments/')
 def assignments_list():
-    return render_template('dashboard/assignments/list.html')
+    return render_template('dashboard/assignments.html')
 
 @dashboard.route('/campaigns')
 @dashboard.route('/campaigns/')
@@ -173,7 +175,7 @@ def campaigns_list():
     maybe_will_complete_count = services_manager.amt_services_wrapper.count_maybe_will_complete(
         hits=all_hits).data
 
-    return render_template('dashboard/campaigns/list.html',
+    return render_template('dashboard/campaigns.html',
                            completed_count=completed_count,
                            pending_count=pending_count,
                            maybe_will_complete_count=maybe_will_complete_count,
@@ -184,7 +186,7 @@ def campaigns_list():
 @dashboard.route('/tasks/')
 @warn_if_scheduler_not_running
 def tasks_list():
-    return render_template('dashboard/tasks/list.html')
+    return render_template('dashboard/tasks.html')
 
 
 @dashboard.route('/login', methods=('GET', 'POST'))

psiturk/dashboard/static/campaigns/list.js → psiturk/dashboard/static/js/campaigns.js

@@ -18,18 +18,14 @@ Vue.component('campaign-table-row',{
 
 let vm_campaigns = new Vue({
     el: '#campaigns',
-    data: { 
-        services_manager,
+    data: {
         campaigns: [],
         create_goal_rounded: 0,
         assignments_per_round_rounded: 0,
         minutes_between_rounds_rounded: 0,
         extend_this_many_rounded: 0,
         update_active_campaign_goal_rounded: 0,
         completed_count: completed_count,
-        available_count: available_count,
-        pending_count: pending_count,
-        maybe_will_complete_count: maybe_will_complete_count,
         hit_reward_rounded: parseFloat(0.00),
         hit_duration_hours_rounded: parseFloat(0.00)
     },
@@ -183,4 +179,4 @@ let vm_campaigns = new Vue({
     created: function(){
         this.fetch_all_campaigns()
     }
-})
+})

psiturk/dashboard/static/flash_messages.js → psiturk/dashboard/static/js/flash_messages.js

@@ -2,20 +2,20 @@ Vue.component('vue-flash-message', {
     props: ['message','category'],
     computed: {
         _category: function(){
-            if (this.category == 'message') { 
-                return 'info' 
+            if (this.category == 'message') {
+                return 'info'
             } else {
                 return this.category
             }
         },
         _class: function(){
-            return 'alert alert-dismissible alert-' + this._category
+            return 'alert alert-dismissible m-0 alert-' + this._category
         }
     },
     template: `
         <div :class='_class' role='alert'>
-            <button 
-                v-on:click="$emit('close')" 
+            <button
+                v-on:click="$emit('close')"
                 type='button' class='close' aria-label='close'><span aria-hidden='true'>×</span></button>
             {{message}}
         </div>

psiturk/dashboard/static/js/layout.js

@@ -0,0 +1,26 @@
+function modeSwitchListener() {
+    let mode = $('#toggleLiveMode').prop('checked') ? 'live' : 'sandbox';
+    let prev_state = $('#toggleLiveMode').prop('checked') ? 'off' : 'on';
+    $('#toggleLiveMode').bootstrapToggle('disable');
+    $.ajax({
+        type: 'POST',
+        url: '/dashboard/mode',
+        data: JSON.stringify({mode: mode}),
+        contentType: 'application/json; charset=utf-8',
+        dataType: 'json',
+        success: function() {
+            location.reload();
+        },
+        error: function(errorMessage) {
+            alert('Error switching mode!');
+            console.log(errorMessage);
+            // reset it
+            $('#toggleLiveMode').bootstrapToggle('enable');
+            $('#toggleLiveMode').bootstrapToggle(prev_state, true);
+        }
+    });
+}
+
+$(window).on('load', function() {
+    $('#toggleLiveMode').on('change', modeSwitchListener);
+});

psiturk/dashboard/static/style.css → psiturk/dashboard/static/styles/base.css

@@ -4,8 +4,6 @@ body {
 }
 
 body {
-  padding-top: 40px;
-  padding-bottom: 40px;
   background-color: #f5f5f5;
 }
 
@@ -41,4 +39,4 @@ body {
 
 [v-cloak] {
   display: none;
-}
+}

psiturk/dashboard/templates/dashboard/assignments/list.html → psiturk/dashboard/templates/dashboard/assignments.html

@@ -11,26 +11,26 @@ <h3>Batch operations</h3>
                 type='button' class='btn btn-primary'
             >Approve all</button>
         </div>
-        <div class='form-group'>                
+        <div class='form-group'>
             <div class='form-inline'>
                 <button
                     v-on:click='bonus_all'
                     :disabled='!any_autobonusable_assignments'
                     type='button' class='btn btn-primary'
                 >Auto-Bonus All</button>
-                <input type='text' 
+                <input type='text'
                     v-model.trim='bonus_reason'
-                    class='form-control ml-2' 
+                    class='form-control ml-2'
                     placeholder='Bonus Reason'>
                 <small class='ml-2'>Only "Approved" assignments are auto-bonus-able.</small>
             </div>
-            
+
         </div>
     </div>
 </div>
 {% endblock %}
 
 {% block scripts %}
 {{ super() }}
-<script type='text/javascript' src='/dashboard/static/assignments/list.js'></script>
-{% endblock %}
+<script type='text/javascript' src="{{ url_for('.static', filename='js/assignments.js') }}"></script>
+{% endblock %}

psiturk/dashboard/templates/dashboard/base.html

@@ -5,24 +5,22 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
+    {% block styles %}
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" integrity="sha256-BJ/G+e+y7bQdrYkS2RBTyNfBHpA9IuGaPmf9htub5MQ=" crossorigin="anonymous" />
-
-    <link rel='stylesheet' href="{{url_for('.static', filename='style.css')}}">
-
-
+    <link rel='stylesheet' href="{{ url_for('.static', filename='styles/base.css') }}">
+    {% endblock %}
 
     <title></title>
   </head>
   <body>
     {% include 'dashboard/flashed_messages.html' %}
     {% block layout %}{% endblock %}
-    
+
     {% block scripts %}
-        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>    
-        <script src="/dashboard/static/flash_messages.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
+        <script src="{{ url_for('.static', filename='js/flash_messages.js') }}"></script>
     {% endblock %}
   </body>
-</html>
+</html>