Merge pull request #116 from sagidayan/UI

- dashboard - new layout (Still In Progress!)

templates/css/theme.css

@@ -424,6 +424,7 @@ body.noscroll
 .messagesContent .msgSent
 {
   word-break: break-word;
+  padding-top: 2em;
 }
 
 .tabDesign
@@ -445,7 +446,7 @@ body.noscroll
   background-color: aliceblue;
   overflow: scroll;
   overflow-y: visible;
-  height:250;
+  height:500;
   width:340;
 }
 .messagesContent
@@ -453,10 +454,10 @@ body.noscroll
   padding-left: 4px;
   padding-right: 4px;
   margin: 5px;
-  background-color: #f5f5f5;
+  /*background-color: #f5f5f5;*/
-  overflow: scroll;
+  /*overflow: scroll;*/
-  height:250;
+  height:500;
-  width:690;
+  /*width:690;*/
 }
 p.tasksFeed
 {

templates/js/controllers/classController.js

@@ -73,7 +73,7 @@ angular.module('SeHub')
     		jsonNewProj.logo_url = $scope.project.logoUrl;
 
 
-    	apiService.create(token, jsonNewProj).success(function(data)
+    	apiService.createProject(token, jsonNewProj).success(function(data)
     	{
     		loadingData = false;
     		projectId = data.id;

templates/js/controllers/homeController.js

@@ -6,27 +6,21 @@ angular.module('SeHub')
   $scope.msgToPost = "";
   $scope.oldText = "";
   $scope.messages = [];
+  $scope.messagesDisplay = [];
+  $scope.courses = [];
+  $scope.campuses = [];
   $scope.msg = {};
+  $scope.courseObj = {};
+  // $scope.course = ""; // should be ""  ?  // {} ??
 
   $rootScope.seToken = $cookies['com.sehub.www'];
   var token = $rootScope.seToken;
-
   var imagePath = $scope.user.avatar_url;
-  //var campusName = '';
-  // $scope.campusName = '';
-
-  $scope.phones = [
-    { type: 'Home', number: '(972) 865-82861' },
-    { type: 'Cell', number: '(972) 5251-32309' },
-  ];
-
-
 
   if($scope.user.isLecturer)
   {
     $scope.isStudent = false;
     console.log("Lecturer Mode!");
-    //  console.log($scope.campusName);
   }
   else
   {
@@ -40,31 +34,33 @@ angular.module('SeHub')
   }
   $scope.postMessageClicked = function() // Posting the message itself
   {  
-    if($scope.msg.msgToAdd != null)
+    console.log($scope.courseObj);
+    if($scope.msg.msgToAdd != null && $scope.courseObj.courseName)
     {
+      console.log("NOW");
+
       jsonNewMsg = {
-      'courseName': 'Math', // TODO Should be ===> $scope.course.courseName
+      'groupId': $scope.courseObj.id, // TODO Should be ===> $scope.courseObj.id
       'message': $scope.msg.msgToAdd
       };
 
-      // console.log("J: " + jsonNewMsg.toString() + "msg: " + $scope.msg.msgToAdd);
+      apiService.createMessage(token, jsonNewMsg).success(function(data)
-
+      {
-      // apiService.createMessage(token, jsonNewMsg).success(function(data)
+        console.log("create Msg!");
-      // {
+      }).error(function(err)
-      //   console.log("create Msg!");
+      {
-      // }).error(function(err)
+        console.log("Error Below");
-      // {
+        console.log(err);
-      //   console.log("Error: " + err);
+      });
-      // });
-
-      /*
-      'courseName': 'Advance Math',
-      'message': 'The lecture today is canceled'
-      */
 
       console.log($scope.msg.msgToAdd);
       $scope.messages.push({"text": $scope.msg.msgToAdd});
     }
+    else
+    {
+      $mdDialog.show($mdDialog.alert().title('Error Creating Message').content('Message content or Course is missing')
+      .ariaLabel('Send Message alert dialog').ok('Try Again!').targetEvent()); // Pop-up alert
+    }
     $scope.msg.msgToAdd = null;
   }
 
@@ -81,22 +77,54 @@ angular.module('SeHub')
 
   }
 
-  $scope.getCourses = function()
+  $scope.displayMessages = function()
   {
-    // apiService.getAllCoursesByCampus(token, campusId).success(function(data) // Shows all classes from this campus
+    // apiService.getMessagesByGroupId(token, $scope.courseObj.id).success(function(data)
     // {
-    //   $scope.loadingData = false;
+    //   $scope.messages = data;
-    //   $scope.courses = data;
+    //   console.log($scope.messages);
-    //   console.log("success " + $scope.courses);
-    //   init(); // Executing the function to initialize course display
-    //   if($scope.courses && $scope.courses.length > 0)
-    //   {
-    //     $scope.coursesEmpty = false;
-    //   }
     // }).error(function(err)
     // {
-    //   console.log("error: " + err);
+    //   console.log(err);
-    // }); 
+    // });
+  }
+
+
+  $scope.getCampuses = function()
+  {
+    apiService.getCampusesByUser(token).success(function(data)
+    {
+      $scope.campuses = data;
+      $scope.getCourses();  // Get all the courses info
+      if($scope.messages)
+      {
+        $scope.displayMessages(); //  // Display all messages in message feed and the latest one
+      }
+    }).error(function(err)
+    {
+      console.log("Error: " + err);
+    });
+
+  }
+
+  $scope.getCourses = function()
+  {
+    for(var i = 0; i < $scope.campuses.length; i++) 
+    {
+      apiService.getAllCoursesByCampus(token, $scope.campuses[i].id).success(function(data) // Shows all classes from this campus
+      {
+        $scope.loadingData = false;
+        $scope.courses = data;
+        // console.log($scope.courses);
+        if($scope.courses && $scope.courses.length > 0)
+        {
+          $scope.coursesEmpty = false;
+        }
+      }).error(function(err)
+      {
+        console.log("Error: " + err);
+      }); 
+     }
   }
 
   $scope.clearAllClicked = function() // Clear Screen from text
@@ -106,16 +134,49 @@ angular.module('SeHub')
 
   $scope.chooseCourseClicked = function()
   {
-    console.log("choose course Clicked!!");
+    // console.log($scope.courseObj);
+    if($scope.courseObj)
+    {
+      for(var i = 0; i < $scope.courses.length; i++)
+      {
+        if($scope.courses[i].courseName === $scope.courseObj.name)
+        {
+          $scope.courseObj = $scope.courses[i];
+        }
+      }
+    }
+    console.log($scope.courseObj);
   }
 
+  // $scope.chooseCourseClicked = function()
+  // {
+  //   console.log("Click ");
+  //   console.log($scope.choosenCourse);
+  //   if($scope.choosenCourse)
+  //   {
+  //     console.log("here");
+  //     $scope.courseObj = null;
+  //     for(var i = 0; i < $scope.courses.length; i++)
+  //     {
+  //       if($scope.courses[i].courseName === $scope.choosenCourse)
+  //       {
+  //         $scope.courseObj = $scope.courses[i];
+  //         console.log($scope.courseObj);
+  //       }
+  //     }
+  //   }
+  // }
+
   $scope.chooseProjectClicked = function()
   {
     console.log("choose project Clicked!!");
   }
+  
+  $scope.getCampuses(); // Get all the campuses info
 
   // animation
+  
+  // $scope.displayTasks(); // Display all tasks in task feed and the latest one
   $scope.isEnterd = top.setIsEnterd;
-  $scope.getCourses(); // Get all the courses info
+
-  $scope.displayTasks(); // Display all tasks in task feed
 }]);

templates/js/controllers/registerController.js

@@ -1,5 +1,6 @@
 angular.module('SeHub')
-	.controller('registerController', ['$scope', '$cookies', '$cookieStore', '$window', '$location', '$mdToast', '$mdDialog', 'apiService', '$rootScope', function($scope, $cookies, $cookieStore, $window, $location, $mdToast, $mdDialog, apiService, $rootScope) {
+	.controller('registerController', ['$scope', '$cookies', '$cookieStore', '$window', '$location', '$mdToast', '$mdDialog', 'apiService', '$rootScope',
+		function($scope, $cookies, $cookieStore, $window, $location, $mdToast, $mdDialog, apiService, $rootScope) {
 		$scope.userHasNoName = false;
 		$scope.campusChecked = false;
 		$scope.createCampusClicked = false;
@@ -37,7 +38,7 @@ angular.module('SeHub')
 
 		$scope.dropdownClicked = function() {
 			$scope.createCampusClicked = false;
-			if ($scope.campus) {
+			if($scope.campus) {
 				$scope.campusChecked = true;
 				$scope.campusObj = null;
 				for (var i = $scope.campuses.length - 1; i >= 0; i--) {
@@ -47,7 +48,6 @@ angular.module('SeHub')
 					}
 				};
 			};
-
 		};
 
 		$scope.submitClicked = function(ev) {
@@ -55,12 +55,8 @@ angular.module('SeHub')
 
 			if ($scope.user.AcMail != null) {
 				var fullMail = $scope.user.AcMail + $scope.campusObj.email_ending; // Holds the full academic email of the user
-
 				apiService.updateUser(token, $scope.user).success(function(data) {
-
 				}).error(function() {
-					// TODO Error
-					console.log("Error occured on updateUser");
 				});
 
 				console.log("Mail: " + fullMail);
@@ -74,7 +70,6 @@ angular.module('SeHub')
 							.ok('Got it!')
 							.targetEvent(ev))
 						.then(function() {
-							// TODO ADD- delete cookies and redirect only after pressed 'Got it'
 							$cookieStore.remove("com.sehub.www"); // Removing the cookies
 							$window.location.href = 'http://se-hub.appspot.com'; // Reference to 'welcome' page
 
@@ -115,7 +110,6 @@ angular.module('SeHub')
 					console.log("DONE - 200");
 					$mdDialog.show($mdDialog.alert().title('E-mail Verification').content('A verification e-mail has been sent to your email address.')
 						.ariaLabel('Email verification alert dialog').ok('Got it!').targetEvent(email)); // Pop-up alert for e-mail verification
-					// TODO ADD delete cookies and redirect only after pressed 'Got it'
 					$cookieStore.remove("com.sehub.www"); // Removing the cookies
 					$window.location.href = 'http://se-hub.appspot.com'; // Reference to 'welcome' page
 				}).error(function() {

templates/js/services/apiService.js

@@ -53,8 +53,8 @@ service.factory('apiService', ['$http', function($http) {
 			};
 			return $http(req);
 		},
-		getAllMessages: function(token){
+		getMessagesByGroupId: function(token, groupId){
-			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/courses/getAllMessages/" + token;
+			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/messages/getMessagesByGroup/" + token + "/" + groupId;
 			req = {
 				method : "GET",
 				url : url
@@ -134,7 +134,7 @@ service.factory('apiService', ['$http', function($http) {
 			};
 			return $http(req);
 		},
-		create: function(token, payLoad){ // createProject
+		createProject: function(token, payLoad){
 			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/projects/create/" + token;
 			req = {
 				method : "POST",
@@ -143,15 +143,6 @@ service.factory('apiService', ['$http', function($http) {
 			};
 			return $http(req);
 		},
-		createMessage: function(token, payLoad){
-			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/courses/createMessage/" + token;
-			req = {
-				method : "POST",
-				url : url,
-				data: payLoad
-			};
-			return $http(req);
-		},
 		sendValidationMail: function(token, email){
 			var url =  (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/validation/sendmail/" + token;
 			payload = {

templates/views/home.html

@@ -1,8 +1,8 @@
-<div layout-padding layout-margin>
+<div>
 	<div class="loader" ng-if="loadingData">
 		<md-progress-circular md-mode="indeterminate"></md-progress-circular>
 	</div>
-	<md-content >
+	<md-content>
 		<md-card class="gray-font fadeOutUp" ng-if="isEnterd">
 			<div layout="row">
 				<div class="spacer"></div>
@@ -25,75 +25,31 @@
 	<md-content>
 		<h1 style="margin-left:15px;"><i class="fa fa-dashboard"></i> Dash Board</h1>
 	</md-content>
+	
+	<div layout = "column" flex = 90 layout-margin>
+		<div>
+			Closest Task-
+			<md-card layout-margin layout-padding>
+				Will Be Here
+			</md-card>
+		</div>
+		<div>
+			Latest Message-
+			<md-card layout-margin layout-padding>
+				Will Be Here
+			</md-card>
+		</div>
+	</div>
+
 	<div ng-if="user.isLecturer"> <!-- Lecturer Mode -->
-		<md-content>
+		<md-card>
-			<div layout="row">
+			<div flex = 90>
-				<div flex="65">
+				<md-content>
-					<md-card>
-						<p class = "messagesFeed">Messages</p>
-					</md-card>
-				</div>
-				<div flex="34">
-					<md-card>
-						<p class = "tasksFeed">Tasks</p>
-					</md-card>
-				</div>
-			</div>
-			<div layout="row">
-				<div  flex="65">
-					<md-card>
-					<div class = "messagesContent"> 
-						<md-card ng-repeat = "msg in messages">
-							<div layout="column">
-								<div layout="row" layout-margin layout-padding>
-									<div flex="10" class="md-avatar">
-										<img ng-src="{{user.avatar_url}}" style="width:100%">
-									</div>
-									<div flex>	
-										<div layout = "column">
-											<div>
-												<b>{{user.name}}</b>
-											</div>
-											<div>
-												class_name
-											</div>
-										</div>
-									</div>
-								</div>
-								<div>
-									<div flex="69" class="msgSent" layout-margin layout-padding>
-										{{msg.text}}
-									</div>
-								</div>	
-							</div>
-						</md-card>
-					</div>
-					</md-card>
-				</div>
-				<div flex="34">
-					<md-card>
-						<p class = "tasksContent"> 
-							For Task 3 Press: <a href="http://localhost:8080/home#/tasks">Task #3</a>
-							<br></br>
-							For Task 4 Press: <a href="http://localhost:8080/home#/home">Task #4</a>
-							<br></br>
-							For Task 5 Press: <a href="http://localhost:8080/home#/home">Task #5</a>
-							<br></br>
-							For Task 6 Press: <a href="http://localhost:8080/home#/home">Task #6</a>
-							<br></br>
-							For Task 7 Press: <a href="http://localhost:8080/home#/home">Task #7</a>
-							<br></br>
-							For Task 8 Press: <a href="http://localhost:8080/home#/home">Task #8</a>
-						</p>
-					</md-card>
-				</div>
-			</div>
-			<md-card height="70%">
-				<md-content class="md-padding">
 					<md-tabs md-dynamic-height md-border-bottom>
 						<md-tab label="Messages">
-							<md-content class="md-padding">
+							<md-content class="tabDesign">
-								<div class = "messagesContent"> 
+								<md-content class="messagesContent">
+								<!-- <div class = "messagesContent">  -->
 									<md-card ng-repeat = "msg in messages">
 										<div layout="column">
 											<div layout="row" layout-margin layout-padding>
@@ -106,24 +62,25 @@
 															<b>{{user.name}}</b>
 														</div>
 														<div>
-															class_name
+															{{c.courseName}}
 														</div>
 													</div>
 												</div>
 											</div>
 											<div>
-												<div flex="69" class="msgSent" layout-margin layout-padding>
+												<div flex="70" class="msgSent" layout-margin layout-padding>
 													{{msg.text}}
 												</div>
 											</div>	
 										</div>
 									</md-card>
-								</div>
+								</md-content>
+								<!-- </div> -->
 							</md-content>
 						</md-tab>
-						<md-tab label="one">
+						<md-tab label="Tasks">
 							<md-content class="md-padding">
-								<h1 class="md-display-2">Tab One</h1>
+								<h1 class="md-display-2">Tasks</h1>
 								One
 							</md-content>
 						</md-tab>
@@ -135,31 +92,34 @@
 						</md-tab>
 					</md-tabs>
 				</md-content>
-			</md-card>
+			</div>
-			<div class ="addMessage" layout="row" layout-margin layout padding>
+		</md-card>
-				<div>
+		<div class ="addMessage" layout="row" layout-margin layout padding>
-					<md-button ng-click="addMessageClicked()" ng class="md-raised md-primary"><i class="fa fa-comments"></i></md-button>
+			<div>
+				<md-button ng-click="addMessageClicked()" ng class="md-raised md-primary"><i class="fa fa-comments"></i></md-button>
+			</div>
+		</div>
+		<div ng-if="addMsg">
+			<div layout = "row" layout-margin layout padding layout-align = "left center">	
+				<md-button ng-click="postMessageClicked()" ng class="md-raised md-primary">Post</md-button>
+				<md-button ng-click="clearAllClicked()" ng class="md-raised md-primary">Clear All</md-button>
+			</div>
+			<div class="port_spacer"></div>
+			<div layout-padding layout = "row">
+				<div flex = "60">
+					<md-input-container>
+						<label> Write Your Desired Message Here And Press Post</label>
+						<input type="text" minlength="1" ng-model="msg.msgToAdd" required></input>	
+					</md-input-container>
+				</div>
+				<div flex = "30">
+					<md-select placeholder="Choose Course" ng-model="courseObj.name" ng-change="chooseCourseClicked()" style="z-index: 300" class="courseDropDown" required>
+						<md-option ng-repeat="c in courses" value="{{c.courseName}}">{{c.courseName}}</md-option>
+					</md-select>
 				</div>
 			</div>
-			<div ng-if="addMsg">
+		</div>
-				<div layout = "row" layout-margin layout padding layout-align = "left center">	
+<!-- </md-content> -->
-					<md-button ng-click="postMessageClicked()" ng class="md-raised md-primary">Post</md-button>
-					<md-button ng-click="clearAllClicked()" ng class="md-raised md-primary">Clear All</md-button>
-				</div>
-				<div class="port_spacer"></div>
-				<div layout-padding layout = "row">
-					<div flex = "60">
-						<md-input-container>
-							<label> Write Your Desired Message Here And Press Post</label>
-							<input type="text" minlength="1" ng-model="msg.msgToAdd" required></input>	
-						</md-input-container>
-					</div>
-					<div flex = "30">
-						<md-select placeholder="Choose Course" ng-model="course" ng-click="chooseCourseClicked()" style="z-index: 300" class="courseDropDown"></md-select>
-					</div>
-				</div>
-			</div>
-		</md-content>
 	</div>
 	<div ng-if="isStudent"> <!-- Student Mode -->
 		<md-content>
@@ -225,9 +185,9 @@
 				</div>
 			</div>
 			<!-- <md-button ng-click="chooseCourseClicked()" ng class="md-raised md-primary">Choose Course</md-button>		 -->
-			<md-select placeholder="Choose Course" ng-model="course" ng-click="chooseCourseClicked()" style="z-index: 300">
+			<!-- <md-select placeholder="Choose Course" ng-model="course" ng-click="chooseCourseClicked()" style="z-index: 300"> -->
 				<!-- <md-option ng-switch="user.isLecturer" ng-repeat="c in courses" value="{{c.title}}">{{c.title}}</md-option> -->
-			</md-select>
+			<!-- </md-select> -->
 		</md-content>
 	</div>
 </div>

templates/views/tasks.html

@@ -6,17 +6,14 @@
 					<md-content class="md-padding">
 						<md-tabs md-dynamic-height md-border-bottom>
 							<md-tab label="" <i class="fa fa-check"></i>
-								<md-content class="md-padding">
+								<md-content class = "tabDesign">
-									<table style="width:100%;" border = "1" class = "tabDesign">
+									<table style="width:100%;" border = "1">
 										<tr>
 											<th style = "width:20%">Task Name</th>
 											<th style = "width:20%">Date</th>
 											<th style = "width:20%">Grade</th>
 										</tr>
-									
-
 									</table>
-									
 								</md-content>
 							</md-tab>
 							<md-tab label="Delayed">