Campus (In Explore) Looks and Feel
This commit is contained in:
parent
604c19af19
commit
14483a939f
3 changed files with 204 additions and 149 deletions
|
|
@ -1,127 +1,146 @@
|
||||||
angular.module('SeHub')
|
angular.module('SeHub')
|
||||||
.controller('classController', ['$scope', '$routeParams', '$cookies', '$cookieStore', '$window', '$location', '$mdToast', '$mdDialog', 'apiService', '$rootScope', function ($scope, $routeParams, $cookies, $cookieStore, $window, $location, $mdToast, $mdDialog, apiService ,$rootScope)
|
.controller('classController', ['$scope', '$routeParams', '$cookies', '$cookieStore', '$window', '$location', '$mdToast', '$mdDialog', 'apiService', '$rootScope', function($scope, $routeParams, $cookies, $cookieStore, $window, $location, $mdToast, $mdDialog, apiService, $rootScope) {
|
||||||
{
|
var token = $cookies['com.sehub.www'];
|
||||||
var token = $cookies['com.sehub.www'];
|
var classId = $routeParams.classId;
|
||||||
var classId = $routeParams.classId;
|
$scope.project = {};
|
||||||
$scope.project = {};
|
$scope.project.courseName = $routeParams.className;
|
||||||
$scope.project.courseName = $routeParams.className;
|
$scope.projectsEmpty = true;
|
||||||
$scope.projectsEmpty = true;
|
$scope.isCreateProjectClicked = false;
|
||||||
$scope.isCreateProjectClicked = false;
|
$scope.submitNewCourseClicked = false;
|
||||||
$scope.submitNewCourseClicked = false;
|
$scope.loadingData = true;
|
||||||
$scope.loadingData = true;
|
$scope.isInCourse = false;
|
||||||
$scope.isInCourse = false;
|
var startDate = null;
|
||||||
|
var endDate = null;
|
||||||
|
var nowDate = new Date();
|
||||||
|
var one_day=1000*60*60*24;
|
||||||
|
var dayDeltaOfCourse;
|
||||||
|
var courseElapseTime;
|
||||||
|
$scope.isCourseOver = false;
|
||||||
|
$scope.createSctionStatus = "fa fa-angle-down";
|
||||||
|
|
||||||
|
$scope.displayProjects = function() {
|
||||||
|
apiService.getCourseById(token, classId)
|
||||||
|
.success(function(data) {
|
||||||
|
startDate = new Date(data.startDate.year, data.startDate.month-1, data.startDate.day);
|
||||||
|
endDate = new Date(data.endDate.year, data.endDate.month-1, data.endDate.day)
|
||||||
|
$scope.course = data;
|
||||||
|
$scope.course.startDate = startDate.toDateString();
|
||||||
|
$scope.course.endDate = endDate.toDateString();
|
||||||
|
dayDeltaOfCourse = (endDate.getTime() - startDate.getTime()) / one_day;
|
||||||
|
courseElapseTime = (nowDate.getTime() - startDate.getTime()) / one_day;
|
||||||
|
if(courseElapseTime < 0)
|
||||||
|
courseElapseTime = 0;
|
||||||
|
else if(courseElapseTime > dayDeltaOfCourse){
|
||||||
|
$scope.isCourseOver = true;
|
||||||
|
courseElapseTime = dayDeltaOfCourse;
|
||||||
|
}
|
||||||
|
$scope.courseTimePresentege = ((courseElapseTime/dayDeltaOfCourse) * 100).toString();
|
||||||
|
console.log($scope.courseTimePresentege);
|
||||||
|
|
||||||
|
apiService.getProjectsByCourse(token, classId).success(function(data) // Get all the campuses
|
||||||
|
{
|
||||||
|
$scope.loadingData = false;
|
||||||
|
$scope.projects = data;
|
||||||
|
if ($scope.projects != null && $scope.projects.length > 0) {
|
||||||
|
$scope.projectsEmpty = false;
|
||||||
|
}
|
||||||
|
init(); // Executing the function to initialize projects display
|
||||||
|
console.log("project created! not rly!! " + classId);
|
||||||
|
}).error(function(err) {
|
||||||
|
console.error("Error: " + err);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.error(function(err) {
|
||||||
|
console.error("Error: " + err);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
$scope.joinCourse = function() {
|
||||||
|
apiService.joinCourse(token, classId).success(function(data) {
|
||||||
|
$scope.isInCourse = true;
|
||||||
|
$mdDialog.show($mdDialog.alert().title('Joined Course').content('You have successfully joined course.')
|
||||||
|
.ariaLabel('Join course alert dialog').ok('Lets Start!').targetEvent())
|
||||||
|
.then(function() {
|
||||||
|
$location.path('/class/' + classId); // TODO TODO TODO
|
||||||
|
}); // Pop-up alert
|
||||||
|
}).error(function(err) {
|
||||||
|
$mdDialog.show($mdDialog.alert().title('Error Joining Course').content(err.message + '.')
|
||||||
|
.ariaLabel('Join course alert dialog').ok('Try Again!').targetEvent()); // Pop-up alert
|
||||||
|
// .then(function() {
|
||||||
|
// // $location.path('/newCourse'); // TODO TODO TODO
|
||||||
|
// });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
$scope.createProjectClicked = function() {
|
||||||
|
// console.log("project created! is it ?!???! " + classId);
|
||||||
|
$scope.isCreateProjectClicked = !$scope.isCreateProjectClicked;
|
||||||
|
if($scope.isCreateProjectClicked)
|
||||||
|
$scope.createSctionStatus = "fa fa-angle-up";
|
||||||
|
else
|
||||||
|
$scope.createSctionStatus = "fa fa-angle-down";
|
||||||
|
}
|
||||||
|
|
||||||
|
$scope.submitNewProject = function() {
|
||||||
|
loadingData = true;
|
||||||
|
// debugger;
|
||||||
|
var intClassId = parseInt(classId);
|
||||||
|
// console.log($scope);
|
||||||
|
var jsonNewProj = {
|
||||||
|
'projectName': $scope.project.projectName,
|
||||||
|
'courseId': intClassId,
|
||||||
|
'gitRepository': $scope.project.repoOwner + '/' + $scope.project.gitRepoName
|
||||||
|
};
|
||||||
|
console.log(jsonNewProj);
|
||||||
|
|
||||||
|
if ($scope.project.logoUrl)
|
||||||
|
jsonNewProj.logo_url = $scope.project.logoUrl;
|
||||||
|
|
||||||
|
|
||||||
$scope.displayProjects = function()
|
apiService.create(token, jsonNewProj).success(function(data) {
|
||||||
{
|
loadingData = false;
|
||||||
apiService.getProjectsByCourse(token, classId).success(function(data) // Get all the campuses
|
projectId = data.id;
|
||||||
{
|
$mdDialog.show($mdDialog.alert().title('Project Created').content('You have successfully created project.')
|
||||||
$scope.loadingData = false;
|
.ariaLabel('Project created alert dialog').ok('Great!').targetEvent())
|
||||||
$scope.projects = data;
|
.then(function() {
|
||||||
if($scope.projects != null && $scope.projects.length > 0)
|
$location.path('/project/' + projectId); // TODO TODO TODO
|
||||||
{
|
}); // Pop-up alert
|
||||||
$scope.projectsEmpty = false;
|
|
||||||
}
|
|
||||||
init(); // Executing the function to initialize projects display
|
|
||||||
console.log("project created! not rly!! " + classId);
|
|
||||||
}).error(function(err)
|
|
||||||
{
|
|
||||||
console.log("Error: " + err);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
$scope.joinCourse = function()
|
|
||||||
{
|
|
||||||
apiService.joinCourse(token, classId).success(function(data)
|
|
||||||
{
|
|
||||||
$scope.isInCourse = true;
|
|
||||||
$mdDialog.show($mdDialog.alert().title('Joined Course').content('You have successfully joined course.')
|
|
||||||
.ariaLabel('Join course alert dialog').ok('Lets Start!').targetEvent())
|
|
||||||
.then(function() {
|
|
||||||
$location.path('/class/' + classId); // TODO TODO TODO
|
|
||||||
}); // Pop-up alert
|
|
||||||
}).error(function(err)
|
|
||||||
{
|
|
||||||
$mdDialog.show($mdDialog.alert().title('Error Joining Course').content(err.message + '.')
|
|
||||||
.ariaLabel('Join course alert dialog').ok('Try Again!').targetEvent()); // Pop-up alert
|
|
||||||
// .then(function() {
|
|
||||||
// // $location.path('/newCourse'); // TODO TODO TODO
|
|
||||||
// });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
$scope.createProjectClicked = function()
|
}).error(function(err) {
|
||||||
{
|
console.log("Error: " + err.message);
|
||||||
// console.log("project created! is it ?!???! " + classId);
|
$mdDialog.show($mdDialog.alert().title('Error Creating Project').content('You have failed Creating the project.')
|
||||||
$scope.isCreateProjectClicked = !$scope.isCreateProjectClicked;
|
.ariaLabel('Create project alert dialog').ok('Try Again!').targetEvent()); // Pop-up alert
|
||||||
}
|
});
|
||||||
|
|
||||||
$scope.submitNewProject = function()
|
}
|
||||||
{
|
|
||||||
loadingData = true;
|
|
||||||
// debugger;
|
|
||||||
var intClassId = parseInt(classId);
|
|
||||||
// console.log($scope);
|
|
||||||
var jsonNewProj =
|
|
||||||
{
|
|
||||||
'projectName': $scope.project.projectName,
|
|
||||||
'courseId': intClassId,
|
|
||||||
'gitRepository': $scope.project.repoOwner + '/' + $scope.project.gitRepoName
|
|
||||||
};
|
|
||||||
console.log(jsonNewProj);
|
|
||||||
|
|
||||||
if($scope.project.logoUrl)
|
$scope.goToProject = function(projectId) {
|
||||||
jsonNewProj.logo_url = $scope.project.logoUrl;
|
console.log("projects only from classID: " + projectId)
|
||||||
|
$location.path('/project/' + projectId);
|
||||||
|
}
|
||||||
|
|
||||||
|
var init = function() {
|
||||||
apiService.create(token, jsonNewProj).success(function(data)
|
$scope.arrayHolder = [];
|
||||||
{
|
var tempArr = [];
|
||||||
loadingData = false;
|
var sizeOfSmallArrays = 3;
|
||||||
projectId = data.id;
|
for (var i = 0; i < $scope.projects.length; i++) {
|
||||||
$mdDialog.show($mdDialog.alert().title('Project Created').content('You have successfully created project.')
|
if (i % sizeOfSmallArrays !== 0) {
|
||||||
.ariaLabel('Project created alert dialog').ok('Great!').targetEvent())
|
|
||||||
.then(function() {
|
|
||||||
$location.path('/project/' + projectId); // TODO TODO TODO
|
|
||||||
}); // Pop-up alert
|
|
||||||
|
|
||||||
}).error(function(err)
|
|
||||||
{
|
|
||||||
console.log("Error: " + err.message);
|
|
||||||
$mdDialog.show($mdDialog.alert().title('Error Creating Project').content('You have failed Creating the project.')
|
|
||||||
.ariaLabel('Create project alert dialog').ok('Try Again!').targetEvent()); // Pop-up alert
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
$scope.goToProject = function(projectId)
|
|
||||||
{
|
|
||||||
console.log("projects only from classID: " + projectId)
|
|
||||||
$location.path('/project/' + projectId);
|
|
||||||
}
|
|
||||||
|
|
||||||
var init = function()
|
|
||||||
{
|
|
||||||
$scope.arrayHolder = [];
|
|
||||||
var tempArr = [];
|
|
||||||
var sizeOfSmallArrays = 3;
|
|
||||||
for (var i = 0 ; i < $scope.projects.length ; i++) {
|
|
||||||
if(i % sizeOfSmallArrays !== 0){
|
|
||||||
tempArr.push($scope.projects[i]);
|
|
||||||
}else{
|
|
||||||
if(i !== 0){
|
|
||||||
$scope.arrayHolder.push(tempArr);
|
|
||||||
tempArr = [];
|
|
||||||
tempArr.push($scope.projects[i]);
|
|
||||||
}else{
|
|
||||||
tempArr.push($scope.projects[i]);
|
tempArr.push($scope.projects[i]);
|
||||||
|
} else {
|
||||||
|
if (i !== 0) {
|
||||||
|
$scope.arrayHolder.push(tempArr);
|
||||||
|
tempArr = [];
|
||||||
|
tempArr.push($scope.projects[i]);
|
||||||
|
} else {
|
||||||
|
tempArr.push($scope.projects[i]);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
};
|
$scope.arrayHolder.push(tempArr);
|
||||||
$scope.arrayHolder.push(tempArr);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Running...
|
// Running...
|
||||||
$scope.displayProjects(); // Displaying all projects related to user
|
$scope.displayProjects(); // Displaying all projects related to user
|
||||||
|
|
||||||
|
|
||||||
}]);
|
}]);
|
||||||
|
|
@ -190,8 +190,8 @@ service.factory('apiService', ['$http', function($http) {
|
||||||
};
|
};
|
||||||
return $http(req);
|
return $http(req);
|
||||||
},
|
},
|
||||||
getCampuseById: function(token, id){
|
getCourseById: function(token, id){
|
||||||
var url = (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/courses/getCoursesById/" + id;
|
var url = (DEBUG ? "http://localhost:8080" : "http://se-hub.appspot.com") + "/api/courses/getCoursesById/" + token + "/" + id;
|
||||||
req = {
|
req = {
|
||||||
method: "GET",
|
method: "GET",
|
||||||
url: url
|
url: url
|
||||||
|
|
|
||||||
|
|
@ -1,43 +1,38 @@
|
||||||
<div class = "class">
|
<div class = "class">
|
||||||
<h1 style="margin-left:15px"><i class="fa fa-graduation-cap"></i> Class {{project.courseName}}</h1>
|
<div layout="column" layout-align="center center" style="width:100%">
|
||||||
<div layout-paddig layout-margin class="loader" ng-if="loadingData">
|
<!-- Course Title -->
|
||||||
<md-progress-circular md-mode="indeterminate"></md-progress-circular>
|
<div flex>
|
||||||
</div>
|
<h1 style="margin-left:15px">
|
||||||
<div ng-if = "projectsEmpty && !loadingData" layout-padding layout-margin>
|
<i class="fa fa-graduation-cap"></i> Class {{project.courseName}}
|
||||||
You Are Not Related To Any Project.
|
<span ng-if="isCourseOver"> - <i>This Course Is Over</i></span>
|
||||||
</div>
|
</h1>
|
||||||
<div ng-if = "!projectsEmpty">
|
</div>
|
||||||
<md-card class="cardAllProjects">
|
<!-- Course Time Line -->
|
||||||
<div flex ="99" class = "allProjectsShow" layout = "row" ng-repeat = "t in arrayHolder" value = "{{t}}" layout-padding>
|
<div layout="row" layout-align="center center" style="width: 100%">
|
||||||
<div flex = "32" layout = "column" ng-repeat = "project in t" value = "{{project}}" layout-padding>
|
<div>
|
||||||
<div ng-if="t.length != 1">
|
{{course.startDate}}
|
||||||
<md-button ng-click = "goToProject(project.id)" style="width:100%; height:32%;" layout-padding class = "md-raised">
|
</div>
|
||||||
{{project.projectName}}
|
<div flex="70">
|
||||||
<div layout-align="center center" style=" width:70%;">
|
<md-progress-linear md-mode="determinate" value="{{courseTimePresentege}}"></md-progress-linear>
|
||||||
<canvas layout-padding layout-margin id="project.projectName" class="chart chart-bar" data="project.info.stats.macro.data" labels="project.info.stats.macro.labels"></canvas>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
</md-card>
|
{{course.endDate}}
|
||||||
</div>
|
</div>
|
||||||
<div ng-if="t.length == 1">
|
|
||||||
<md-button ng-click = "goToProject(project.id)" style="width:32%; height:32%;" layout-padding class = "md-raised">
|
|
||||||
{{project.projectName}}
|
|
||||||
<!-- <div style="height:100%; width:32%;"> -->
|
|
||||||
<canvas layout-padding layout-margin id="project.projectName" class="chart chart-bar" data="project.info.stats.macro.data" labels="project.info.stats.macro.labels"></canvas>
|
|
||||||
<!-- </div> -->
|
|
||||||
</md-card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</md-card>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div ng-if="!isInCourse" layout-padding layout-margin>
|
<!-- Course Management Buttons -->
|
||||||
<md-button ng-click = "joinCourse()" ng class = "md-raised md-primary"> Join Class</md-button>
|
<div layout-padding layout-margin layout="row" layout-align="left">
|
||||||
|
<div ng-if="!isInCourse" layout-margin>
|
||||||
|
<md-button ng-click = "joinCourse()" ng class = "md-raised md-primary" ng-disabled="isCourseOver"><i class="fa fa-plus"></i> Join Class</md-button>
|
||||||
|
</div>
|
||||||
|
<div layout-margin>
|
||||||
|
<md-content>
|
||||||
|
<md-button ng-click="createProjectClicked()" ng class="md-raised md-primary" ng-disabled="isCourseOver">Create Project <i ng-class="createSctionStatus"></i></md-button>
|
||||||
|
</md-content>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div ng-if = "user.isLecturer"> -->
|
<!-- Create Project Section -->
|
||||||
<md-content layout-padding layout-margin>
|
|
||||||
<md-button ng-click="createProjectClicked()" ng class="md-raised md-primary">Create Project</md-button>
|
|
||||||
</md-content>
|
|
||||||
<div ng-if = "isCreateProjectClicked">
|
<div ng-if = "isCreateProjectClicked">
|
||||||
<md-card layout-padding style="width:60%">
|
<md-card layout-padding style="width:60%">
|
||||||
<div layout="column">
|
<div layout="column">
|
||||||
|
|
@ -84,6 +79,47 @@
|
||||||
</div>
|
</div>
|
||||||
</md-card>
|
</md-card>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div layout-paddig layout-margin class="loader" ng-if="loadingData">
|
||||||
|
<md-progress-circular md-mode="indeterminate"></md-progress-circular>
|
||||||
|
</div>
|
||||||
|
<div ng-if = "projectsEmpty && !loadingData" layout-padding layout-margin>
|
||||||
|
You Are Not Related To Any Project.
|
||||||
|
</div>
|
||||||
|
<div ng-if = "!projectsEmpty">
|
||||||
|
<md-card class="cardAllProjects">
|
||||||
|
<div flex ="99" class = "allProjectsShow" layout = "row" ng-repeat = "t in arrayHolder" value = "{{t}}" layout-padding>
|
||||||
|
<div flex = "32" layout = "column" ng-repeat = "project in t" value = "{{project}}" layout-padding>
|
||||||
|
<div ng-if="t.length != 1">
|
||||||
|
<md-button ng-click = "goToProject(project.id)" style="width:100%; height:32%;" layout-padding class = "md-raised">
|
||||||
|
<div style="height: 30%" layout="row">
|
||||||
|
<div class="spacer"></div>
|
||||||
|
<div>
|
||||||
|
<img ng-src="{{project.logo_url}}" alt=""
|
||||||
|
ng-if="project.logo_url" style="display: block;width:auto;height:100%;">
|
||||||
|
<span ng-if="!project.logo_url">{{project.projectName}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="spacer"></div>
|
||||||
|
</div>
|
||||||
|
<div layout-align="center center" style=" width:70%;">
|
||||||
|
<canvas layout-padding layout-margin id="project.projectName" class="chart chart-bar" data="project.info.stats.macro.data" labels="project.info.stats.macro.labels"></canvas>
|
||||||
|
</div>
|
||||||
|
</md-card>
|
||||||
|
</div>
|
||||||
|
<div ng-if="t.length == 1">
|
||||||
|
<md-button ng-click = "goToProject(project.id)" style="width:32%; height:32%;" layout-padding class = "md-raised">
|
||||||
|
{{project.projectName}}
|
||||||
|
<!-- <div style="height:100%; width:32%;"> -->
|
||||||
|
<canvas layout-padding layout-margin id="project.projectName" class="chart chart-bar" data="project.info.stats.macro.data" labels="project.info.stats.macro.labels"></canvas>
|
||||||
|
<!-- </div> -->
|
||||||
|
</md-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</md-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- </div> -->
|
<!-- </div> -->
|
||||||
<div layout-margin>
|
<div layout-margin>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue