Angularize dashboard UI

nus-mtp · Mar 31, 2017 · 1e50ebf · 1e50ebf
1 parent 573002a
commit 1e50ebf
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 56 deletions.
diff --git a/public/css/dashboard.css b/public/css/dashboard.css
@@ -1,5 +1,5 @@
 body {
-	background-color: #E9E9E9;
+	background-color: #141311;
 }
 
 ul {
@@ -11,6 +11,7 @@ ul {
 
 li {
 	float: left;
+	color: #FFFFFF;
 }
 
 li a {
@@ -31,7 +32,7 @@ h2 {
 	font-family: 'Lato', serif;
 	font-weight: bold;
 	font-size: 24px;
-	text-align: center;
+	text-align: left;
 	color: #A2482E;
 }
 
@@ -43,11 +44,12 @@ h2 {
 	text-align: center;
 }
 
-.moduleList {
-	text-align: center;
-}
-
 .col-md-12 {
 	margin-top: 3.5%;
 	height: 80vh;
+}
+
+
+img {
+	image-rendering: pixelated;
 }
diff --git a/public/js/dashboard.js b/public/js/dashboard.js
@@ -1,49 +1,80 @@
-var tutorials = [];
-
-function syncIVLE() {
-    $.ajax({
-        method:'POST',
-        url:'/api/dashboard/forceSyncIVLE',
-        dataType:'json',
-        success: function(data){
-            if (data.success){
-                console.log("Successful Sync");
-                getTutorials();
+angular.module("dashboardApp", []);
+
+angular.module("dashboardApp").factory ('ivle', function ($rootScope) {
+    var tutorials = [];
+
+    var getTutorials = function () {
+        $.ajax({
+            type: 'POST',
+            url: '/api/dashboard/getTutorials',
+            data: { },
+            dataType: 'json',
+            success: function(data) {
+                tutorials = data.data.rows;
+                $rootScope.$apply();
             }
-            else {  
-                console.log('Failed Sync, Error: ' + data.message);
+        });
+    };
+
+    var syncIVLE = function () {
+        $.ajax({
+            method:'POST',
+            url:'/api/dashboard/forceSyncIVLE',
+            dataType:'json',
+            success: function(data){
+                if (data.success){
+                    console.log("Successful Sync");
+                    getTutorials();
+                }
+                else {  
+                    console.log('Failed Sync, Error: ' + data.message);
+                }
             }
+        });
+    };
 
+    var syncUser = function() {
+        $.ajax({
+            method: 'POST',
+            url: '/api/dashboard/syncUser',
+            dataType: 'json',
+            success: function(data) {
+                if (data.success) {
+                    console.log(data);
+                } else {
+                    console.log('Failed Sync, Error: ' + data.message);
+                }
+            }
+        });
+    }
+
+    //syncIVLE();
+    getTutorials();
+
+    return {
+        tutorials: function () {
+            return tutorials;
         }
-    });
-}
-
-function getTutorials() {
-    $.ajax({
-        type: 'POST',
-        url: '/api/dashboard/getTutorials',
-        data: { },
-        dataType: 'json',
-        success: function(data) {
-            showTutorials(data.data);
-        }
-    });
-}
-
-function showTutorials(tuts) {
-    for (i = 0; i < tuts.count; i++) {
-        var tut = tuts.rows[i];
-        tutorials.push(tut);
-        $('#tutorials').append(tut.coursecode + " " + tut.coursename + " <button class='btn btn-primary' id='lobby-button' data-id='" + i + "' value='' name='tut-id'> Join Class </button><br><br>");
+    };
+});
+
+angular.module("dashboardApp").controller ('userCtrl', function ($scope, ivle) {
+
+});
+
+angular.module("dashboardApp").controller ('moduleCtrl', function ($scope, ivle) {
+    $scope.ivle = ivle;
+
+    $scope.redirect = function(tut) {
+        $('#form').attr('action', 'lobby/'+tut.coursecode+'/'+tut.name)
     }
-}
+
+});
 
 
 $(document).on('click', '#lobby-button', function () {
     var index = $(this).attr('data-id');
     var tut = tutorials[index];
     $(this).attr('value', tut.id);
     $('#form').attr('action', 'lobby/'+tut.coursecode+'/'+tut.name);
-});
-
-syncIVLE();
+});
diff --git a/source/controller/dashboard.js b/source/controller/dashboard.js
@@ -77,6 +77,18 @@ var getTutorials = function (req, res, next) {
 	}
 }
 
+var syncUser = function (req, res, next) {
+	if (req.body.auth.success) {
+		var user = req.body.auth.decoded;
+		User.getExpAndAvatar(user.id).then(function (data) {
+			res.json({success: true, message: 'Success', data: data});
+		});
+	} else {
+		res.send("Permission denied");
+	}
+}
+
 module.exports.get = get;
 module.exports.forceSyncIVLE = forceSyncIVLE;
-module.exports.getTutorials = getTutorials;
+module.exports.getTutorials = getTutorials;
+module.exports.syncUser = syncUser;
diff --git a/source/view/dashboard.ejs b/source/view/dashboard.ejs
@@ -15,10 +15,10 @@
 </head>
 
 <body>
-
-	
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
+   
 	<ul>
-        <li><a class="active" href="/">Welcome to Attack on Tutor, (<%= user.name %>) </a></li>
+        <li><a class="active" href="/">Attack on Tutor</a></li>
 
 		<li style="float:right"><a class="active" href="https://github.com/nus-mtp/e-tutorial">GitHub Repository</a></li>
 
@@ -31,15 +31,36 @@
 
 	<input id="uid" type="hidden" value="<%= user.id %>">
 
-
-	<div class="container">
+	<div class="container-fluid" ng-app="dashboardApp">
 		<div class="row">
 
-			<div class="col-md-12" style="background-color:#141311">
+            <div class="col-md-2">
+                <img src="images/avatars/avatar-01.png" style="width: 100%" class="img-responsive" />
+                <h2><%= user.name %></h2>
+                <div class="level-container" ng-controller="userCtrl">
+                </div>
+            </div>
+
+			<div class="col-md-10">
+
 				<h2>Modules</h2>
-				<div class="moduleList">
-					<form id='form' style='display: hidden' action='' method='POST'>
-						<ul id="tutorials"></ul>
+				<div class="list-group" ng-controller="moduleCtrl">
+					<form id="form" style="display: hidden" action="" method='POST'>
+						<ul id="tutorials">
+                            <li ng-repeat="t in ivle.tutorials()">
+                                <div class="container">
+                                    <div>
+                                        <div class="row">
+                                            {{t.coursecode}} {{t.coursename}}
+                                        </div>
+                                        <div class="row">
+                                            <button class='btn btn-primary lobby-button' ng-click="redirect(t)" name='tut-id' value='{{t.id}}'> Join Class </button>
+                                            <button class='btn btn-primary'> View Leaderboard </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </li>
+                        </ul>
 					</form>
 				</div>
 			</div>
@@ -50,7 +71,5 @@
 </body>
 </html>
 
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
-
-<script src="js/dashboard.js" type="application/javascript"></script>
+ <script src="js/dashboard.js" type="application/javascript"></script>