From 4360dab650c82a96ad2c4e5dc09557a71e53a6f7 Mon Sep 17 00:00:00 2001 From: jrdbnntt Date: Sun, 29 Jan 2017 17:06:43 -0500 Subject: [PATCH] user profile hackathon section added and actions more dynamic --- bower.json | 3 +- webapp/.jshintrc | 3 +- webapp/_sass/_layout.scss | 15 +++ webapp/js/plugins/ajaxGet.js | 15 +-- webapp/views/user/profile/index.pug | 54 ++++++-- webapp/views/user/profile/script.js | 190 +++++++++++++++++++++++---- webapp/views/user/profile/style.scss | 3 +- 7 files changed, 230 insertions(+), 53 deletions(-) diff --git a/bower.json b/bower.json index 0e6b89c..5e85186 100644 --- a/bower.json +++ b/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" diff --git a/webapp/.jshintrc b/webapp/.jshintrc index 10e3116..840f1f5 100644 --- a/webapp/.jshintrc +++ b/webapp/.jshintrc @@ -2,7 +2,8 @@ "extends": "../.jshintrc", "globals": { - "Cookies": true + "Cookies": true, + "moment": true }, "node": false, diff --git a/webapp/_sass/_layout.scss b/webapp/_sass/_layout.scss index 2dd06fa..ca78516 100644 --- a/webapp/_sass/_layout.scss +++ b/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 { diff --git a/webapp/js/plugins/ajaxGet.js b/webapp/js/plugins/ajaxGet.js index aa0d80f..82ed869 100644 --- a/webapp/js/plugins/ajaxGet.js +++ b/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); \ No newline at end of file diff --git a/webapp/views/user/profile/index.pug b/webapp/views/user/profile/index.pug index b586d22..9713c3a 100644 --- a/webapp/views/user/profile/index.pug +++ b/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 diff --git a/webapp/views/user/profile/script.js b/webapp/views/user/profile/script.js index 78ef15d..4002ccc 100644 --- a/webapp/views/user/profile/script.js +++ b/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 = $(''); + 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( + '' + + '' + + '' + + 'Registered' + + 'Approved' + + 'Checked-in' + + '' + + '' + + '' + + '' + + 'Hackers' + + '' + hackathonData.hackers_registered + '' + + '' + hackathonData.hackers_approved + '' + + '' + hackathonData.hackers_checked_in + '' + + '' + + '' + + 'Mentors' + + '' + hackathonData.mentors_registered + '' + + '' + hackathonData.mentors_approved + '' + + '' + hackathonData.mentors_checked_in + '' + + '' + + '' + + 'Judges' + + '' + hackathonData.judges_registered + '' + + '' + hackathonData.judges_approved + '' + + '' + hackathonData.judges_checked_in + '' + + '' + + '' + + 'Organizers' + + '' + hackathonData.organizers_registered + '' + + '' + hackathonData.organizers_approved + '' + + '' + hackathonData.organizers_checked_in + '' + + '' + + '' + ); } 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); diff --git a/webapp/views/user/profile/style.scss b/webapp/views/user/profile/style.scss index a6d03e8..534055b 100644 --- a/webapp/views/user/profile/style.scss +++ b/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; } -} \ No newline at end of file +}