user profile hackathon section added and actions more dynamic

bower.json

@@ -21,7 +21,8 @@
     "bootstrap": "^3.3.7",
     "font-awesome": "^4.7.0",
     "js-cookie": "^2.1.3",
-    "devbridge-autocomplete": "^1.3.0"
+    "devbridge-autocomplete": "^1.3.0",
+    "moment": "^2.17.1"
   },
   "devDependencies": {
     "parsleyjs": "^2.6.0"

webapp/.jshintrc

@@ -2,7 +2,8 @@
   "extends": "../.jshintrc",
 
   "globals": {
-      "Cookies": true
+      "Cookies": true,
+      "moment": true
   },
 
   "node": false,

webapp/_sass/_layout.scss

@@ -69,6 +69,21 @@ body {
     }
 }
 
+.content-section {
+    margin-bottom: 100px;
+
+    > *:first-child {
+        padding-top: 0;
+        margin-top: 0;
+    }
+
+    > *:last-child {
+        padding-bottom: 0;
+        margin-bottom: 0;
+    }
+}
+
+
 @media(max-width: $screen-sm-min) {
     // Mobile
     #content {

webapp/js/plugins/ajaxGet.js

@@ -8,20 +8,17 @@
         type: 'GET',
         headers: {
             'X-CSRFToken': Cookies.get('csrftoken')
+        },
+        error: function(response) {
+            console.error('Server Error:', response);
+            var err = JSON.parse(response.responseText);
+            alert(err.cause + ': ' + err.message);
         }
     };
 
     $.ajaxGet = function(options) {
         var o = $.extend({}, defaultAjaxSettings, options);
 
-        if (!o.error) {
-            o.error = function(response) {
-                console.error('Server Error:', response);
-                var err = JSON.parse(response.responseText);
-                alert(err.cause + ': ' + err.message);
-            }
-        }
-
         return $.ajax(o);
-    }
+    };
 })(jQuery);

webapp/views/user/profile/index.pug

@@ -9,17 +9,49 @@ block append styles
     link(rel="stylesheet" type="text/css" href=`${viewDir}/style.css`)
 
 block append scripts
+    script(src="/static/bower_components/moment/min/moment.min.js")
     script(src=`${viewDir}/script.js`)
 
 block content
-    h1.text-center HackFSU '17
-    .profile-action-buttons
-        button#hackerBtn.btn.btn-form(type="button" disabled)  Hacker Registration
-        button#mentorBtn.btn.btn-form(type="button" disabled title="Coming soon")  Mentor Registration
-        button#judgeBtn.btn.btn-form(type="button" disabled title="Coming soon")  Judge Registration
-        button#organizerBtn.btn.btn-form(type="button" disabled title="Coming soon")  Organizer Registration
 
-    #account.profile-section
+
+    #hackathon.content-section
+        h1 HackFSU
+        h3 Be there!
+        h4 You are
+        table.table
+            thead
+                tr
+                    th
+                    th Registered
+                    th Approved
+                    th Checked-in
+            tbody
+                tr
+                    th Hackers
+                    td
+                    td
+                    td
+                tr
+                    th Mentors
+                    td
+                    td
+                    td
+                tr
+                    th Judges
+                    td
+                    td
+                    td
+                tr
+                    th Organizers
+                    td
+                    td
+                    td
+
+    .content-section
+        #action-buttons.profile-action-buttons
+
+    #account.content-section
         h1 Account
         form: .form-section
             fieldset.row
@@ -49,7 +81,7 @@ block content
                 label.col-md-3 Dietary Restrictions
                 .col-md-9: textarea.responsive(name="diet" placeholder="None" disabled)
 
-    #hacker.profile-section(style="display:none")
+    #hacker.content-section(style="display:none")
         h1 Hacker
         h3 Status
         form: .form-section
@@ -89,11 +121,11 @@ block content
                 label.col-md-3 Interests
                 .col-md-9: textarea.responsive(name="interests" placeholder="None" disabled)
 
-    #mentor.profile-section(style="display:none")
+    #mentor.content-section(style="display:none")
         h1 Mentor Info
 
-    #judge.profile-section(style="display:none")
+    #judge.content-section(style="display:none")
         h1 Judge Info
 
-    #organizer.profile-section(style="display:none")
+    #organizer.content-section(style="display:none")
         h1 Organizer Info

webapp/views/user/profile/script.js

@@ -2,6 +2,7 @@
     'use strict';
 
     var GROUP = {
+        user: 'user',
         attendee: 'attendee',
         hacker: 'hacker',
         judge: 'judge',
@@ -10,45 +11,146 @@
         pending_hacker: 'pending-hacker',
         pending_judge: 'pending-judge',
         pending_mentor: 'pending-mentor',
-        pending_organizer: 'pending-organizer'
+        pending_organizer: 'pending-organizer',
+        admin: 'admin'
     };
 
-    var hackerBtn = $('#hackerBtn');
-    var mentorBtn = $('#mentorBtn');
-    var judgeBtn = $('#judgeBtn');
-    var organizerBtn = $('#organizerBtn');
+    function initActionButtons(groups) {
+        var buttonContainer = $('#action-buttons');
+        var buttons = [];
+        var i, btn;
 
-    $.ajaxGet({
-        url: '/api/user/get/profile',
-        success: function(data) {
-            init(data);
-        }
-    });
+        if (!groups.includes(GROUP.hacker) &&
+            !groups.includes(GROUP.pending_hacker)) {
 
-    function init(pData) {
-        initActionButtons(pData.groups);
-        initAccountSection(pData);
+            buttons.push({
+                'text': 'Register as a hacker',
+                'url': '/registration/hacker'
+            });
 
-        if (pData.groups.includes(GROUP.hacker)
-        || pData.groups.includes(GROUP.pending_hacker)) {
-            $.ajaxGet({
-                url: '/api/hacker/get/profile',
-                success: function(data) {
-                    initHackerSection(data);
-                }
+            if (!groups.includes(GROUP.mentor) &&
+                !groups.includes(GROUP.pending_mentor)) {
+
+                buttons.push({
+                    'text': 'Register as a mentor',
+                    'url': '/registration/mentor',
+                    'title': 'Coming soon',
+                    'disabled': true
+                });
+            }
+
+            if (!groups.includes(GROUP.judge) &&
+                !groups.includes(GROUP.pending_judge)) {
+
+                buttons.push({
+                    'text': 'Register as a judge',
+                    'url': '/registration/judge',
+                    'title': 'Coming soon',
+                    'disabled': true
+                });
+            }
+
+            if (!groups.includes(GROUP.organizer) &&
+                !groups.includes(GROUP.pending_organizer)) {
+
+                buttons.push({
+                    'text': 'Register as a organizer',
+                    'url': '/registration/organizer',
+                    'title': 'Coming soon',
+                    'disabled': true
+                });
+            }
+        } else if (!groups.includes(GROUP.mentor) &&
+            !groups.includes(GROUP.pending_mentor)) {
+
+            buttons.push({
+                'text': 'Register as a mentor',
+                'url': '/registration/mentor',
+                'title': 'Coming soon',
+                'disabled': true
+            });
+        }
+
+        if (groups.includes(GROUP.organizer)) {
+            buttons.push({
+                'text': 'Django Admin Panel',
+                'url': '/admin/django'
             });
         }
+
+        var onClick = function() {
+            window.location.href = $(this).data('url');
+        };
+
+        for (i = 0; i < buttons.length; ++i) {
+            btn = $('<button class="btn btn-form"></button>');
+            btn.prop('title', buttons[i].title);
+            btn.prop('disabled', !!buttons[i].disabled);
+            btn.data('url', buttons[i].url);
+            btn.text(buttons[i].text);
+
+            btn.appendTo(buttonContainer);
+            btn.click(onClick);
+        }
     }
 
-    function initActionButtons(groups) {
-        if (!groups.includes(GROUP.hacker)
-        && !groups.includes(GROUP.pending_hacker)) {
-            hackerBtn.prop('disabled', false);
-            hackerBtn.prop('title', 'Go to Hacker Registration');
-            hackerBtn.click(function() {
-                window.location.href = '/registration/hacker'
-            })
+    function initHackathonSection(hackathonData, groups) {
+        var section = $('#hackathon');
+        var start = moment(hackathonData.hackathon_start, 'YYYY-MM-DD');
+        var end = moment(hackathonData.hackathon_end, 'YYYY-MM-DD');
+
+        groups = [].concat(groups);
+        var i = groups.indexOf(GROUP.attendee);
+        if (i !== -1) {
+            groups.splice(i, 1);
         }
+
+        if (groups.length === 0) {
+            groups.push('regular ' + GROUP.user);
+        }
+
+        var groupString = 'You are a ' +
+            groups.sort().join(' and a ').replace('-', ' ').replace(/(a)\s([aeio])/g, 'an $2') + '.';
+
+        section.children('h1').text(hackathonData.hackathon_name);
+        section.children('h3').text(start.format('MMM Do') + ' - ' + end.format('MMM Do'));
+        section.children('h4').text(groupString);
+        section.children('table').html(
+            '<thead>' +
+                '<tr>' +
+                    '<th></th>' +
+                    '<th>Registered</th>' +
+                    '<th>Approved</th>' +
+                    '<th>Checked-in</th>' +
+                '</tr>' +
+            '</thead>' +
+            '<tbody>' +
+                '<tr>' +
+                    '<th>Hackers</th>' +
+                    '<td>' + hackathonData.hackers_registered + '</td>' +
+                    '<td>' + hackathonData.hackers_approved + '</td>' +
+                    '<td>' + hackathonData.hackers_checked_in + '</td>' +
+                '</tr>' +
+                '<tr>' +
+                    '<th>Mentors</th>' +
+                    '<td>' + hackathonData.mentors_registered + '</td>' +
+                    '<td>' + hackathonData.mentors_approved + '</td>' +
+                    '<td>' + hackathonData.mentors_checked_in + '</td>' +
+                '</tr>' +
+                '<tr>' +
+                    '<th>Judges</th>' +
+                    '<td>' + hackathonData.judges_registered + '</td>' +
+                    '<td>' + hackathonData.judges_approved + '</td>' +
+                    '<td>' + hackathonData.judges_checked_in + '</td>' +
+                '</tr>' +
+                '<tr>' +
+                    '<th>Organizers</th>' +
+                    '<td>' + hackathonData.organizers_registered + '</td>' +
+                    '<td>' + hackathonData.organizers_approved + '</td>' +
+                    '<td>' + hackathonData.organizers_checked_in + '</td>' +
+                '</tr>' +
+            '</tbody>'
+        );
     }
 
     function initAccountSection(accountData) {
@@ -91,4 +193,34 @@
         hackerSection.toggle(true);
     }
 
+    function init(pData) {
+        initActionButtons(pData.groups);
+
+        $.ajaxGet({
+            url: '/api/hackathon/get/stats',
+            success: function (data) {
+                initHackathonSection(data, pData.groups);
+            }
+        });
+
+        initAccountSection(pData);
+
+        if (pData.groups.includes(GROUP.hacker) ||
+            pData.groups.includes(GROUP.pending_hacker)) {
+            $.ajaxGet({
+                url: '/api/hacker/get/profile',
+                success: function(data) {
+                    initHackerSection(data);
+                }
+            });
+        }
+    }
+
+    $.ajaxGet({
+        url: '/api/user/get/profile',
+        success: function(data) {
+            init(data);
+        }
+    });
+
 })(jQuery);

webapp/views/user/profile/style.scss

@@ -6,11 +6,10 @@
   flex-wrap: wrap;
   justify-content: center;
   align-items: stretch;
-  margin-bottom: 100px;
 
   button {
     width: 400px;
     max-width: 100%;
     margin: 5px;
   }
-}
+}