Surgery Academy

Angular.js, Web app
Client: Surgery Academy
Close X

A beta version of a web application for a LMS (Learning Management System) written entirely in AngularJS, responsive and JSON-driven with collections of data from various API endpoints.

This version included:

  1. A login/sign-up system with password recovery
  2. A personal profile with a list of joined courses
  3. Functionality to join and follow courses
  4. Video playback and real-time discussion with other viewers

I was also in charge of designing the UI.

sa1

sa2

sa3

sa4

sa-mobile


\(function() {

    var app = angular.module('surgeryAcademy');
    
    app.service('APIservices', ['$http', '$cookies', '$location', '$q', '$timeout', function($http, $cookies, $location, $q, $timeout) {
    
    	var self = this;
    
    	var baseUrl = '******************';
    	var data = {};
    
    	self.login = function(data) {
    		return $http.post(baseUrl + '/token', data);
    	};
    
    	self.signup = function(data) {
    		return $http.post(baseUrl + '/user', data);
    	};
    
    	self.getConfirmationEmail = function(data) {
    		return $http.get(baseUrl + '/email/confirm');
    	};
    
    	self.confirmEmail = function(data) {
    		return $http.put(baseUrl + '/email/confirm', data);
    	};
    
    	self.forgotPassword = function(data) {
    		return $http.post(baseUrl + '/email/reset', data);
    	};
    
    	self.resetPassword = function(data) {
    		return $http.put(baseUrl + '/email/reset', data);
    	};
    
    	self.getUser = function() {
    		return $http.get(baseUrl + '/user');
    	};
    
    	self.updateUserDetails = function(data) {
    		return $http.put(baseUrl + '/user', data);
    	};
    
    	self.getCourses = function() {
    		return $http.get(baseUrl + '/courses');
    	};
    
    	self.getCourseDetails = function(id) {
    		return $http.get(baseUrl + '/courses/' + id);
    	};
    
    	self.subscribeCourse = function(data) {
    		return $http.post(baseUrl + '/user/courses', data);
    	};
    
    	self.unsubscribeCourse = function(id) {
    		return $http.delete(baseUrl + '/user/courses/' + id);
    	};
    
    	self.getLiveStreams = function() {
    		return $http.get(baseUrl + '/live');
    	};
    
    	self.getLive = function(id) {
    		return $http.get(baseUrl + '/live/' + id);
    	};
    
    	self.getChat = function(id, offset) {
    		// if offset is not 0, send a request with offset, API doesn't support it yet
    		return $http.get(baseUrl + '/courses/' +  id + '/chat');
    	};
    
    	self.postChatMessage = function(id, data) {
    		return $http.post(baseUrl + '/courses/' +  id + '/chat', data);
    	};
    
    }]);
    
    app.service('cookiesService', ['$cookies', '$location', function($cookies, $location) {
    
    	var self = this;
    
    	self.isloggedin = function() {
    		return $cookies.get('token') !== undefined;
    	};
    
    	self.createTokenCookie = function(data) {
    		var expiration = new Date();
    		expiration.setMonth( expiration.getMonth( ) + 1 );
    		$cookies.put('token', data.token, { path: '/', domain: $location.host(), expires: expiration, secure: false });
    	};
    
    	self.deleteTokenCookie = function() {
    		$cookies.remove('token', { path: '/', domain: $location.host() });
    	};
    
    	self.logout = function(data) {
    		self.deleteTokenCookie();
    	};
    
    }]);
    
    app.service('notificationService', ['$timeout', '$rootScope', function($timeout, $rootScope) {
    
    	var self = this;
    
    	self.showNotification = function(message, error) {
    		// Cancel previusly set timeouts
    		$timeout.cancel(self.timeout);
    		angular.element('#notifications').velocity('fadeIn', 0);
    		var effect = 'callout.flash';
    		if (error) effect = 'callout.shake';
    		angular.element('#notifications').velocity(effect, 400);
    		// Set message and class
    		$rootScope.NotificationMessage = message;
    		$rootScope.NotificationClass = error;
    		// Start timeout
    		self.timeout = $timeout(self.removeNotification, 3000);
    	};
    
    	self.removeNotification = function() {
    		angular.element('#notifications').velocity('fadeOut', 300, function() {
    			self.purgeNotification();
    		});
    	};
    
    	self.purgeNotification = function() {
    		$rootScope.NotificationMessage = '';
    		$rootScope.NotificationClass = '';
    	};
    
    }]);

})();


\(function() {

    var app = angular.module('surgeryAcademy-profile', []);
    
    app.controller('ProfileController', ['APIservices', 'cookiesService', '$q', 'notificationService', function(APIservices, cookiesService, $q, notificationService) {
    	var self = this;
    	self.user = {};
    	self.user_thumbnail_src = '/assets/img/placeholder-thumbnail.png';
    	self.user_details_loaded = false;
    	self.courses_loaded = false;
    
    	var request = APIservices.getUser();
    
    	request.success(function(data, status, headers, config) {
    		self.user = data;
    		// show user details
    		self.user_details_loaded = true;
    
    		var promises = [];
    
    		angular.forEach(self.user.courses, function(id, key) {
    			promises.push(APIservices.getCourseDetails(id));
    		});
    
    		$q.all(promises).then(function(data){
    			self.user.courses = [];
    			angular.forEach(data, function(value, key) {
    				var course = value.data;
    				course.subscribed = true;
    				self.user.courses.push(course);
    			});
    			if (self.user.courses.length) {
    				self.courses_loaded = true;
    			}
    		});
    
    	});
    
    	request.error(function(data, status, headers, config) {});
    
    	self.updateUserDetails = function() {
    		var user_details = {
    			name: self.user.name,
    			surname: self.user.surname,
    			email: self.user.email,
    			password: self.user.new_password
    		};
    
    		var request = APIservices.updateUserDetails(user_details);
    
    		request.success(function(data, status, headers, config) {
    			cookiesService.createTokenCookie(data);
    							notificationService.showNotification('Details updated!');
    		});
    
    		request.error(function(data, status, headers, config) {});
    	};
    
    }]);

})();


\(function() {

    var app = angular.module('surgeryAcademy');
    
    app.controller('EmailConfirmationController', ['APIservices', 'notificationService', '$timeout', '$location', function(APIservices, notificationService, $timeout, $location) {
    	var self = this;
    	self.email_confirmed = true;
    	self.confirmation_email_sent = false;
    
    	if ($location.path() == '/') return;
    
    	var request = APIservices.getUser();
    
    	request.success(function(data, status, headers, config) {
    		// console.log(data);
    		self.email_confirmed = data.email_confirmed;
    	});
    
    	request.error(function(data, status, headers, config) {});
    
    	self.getConfirmationEmail = function() {
    		var request = APIservices.getConfirmationEmail();
    
    		request.success(function(data, status, headers, config) {
    			notificationService.showNotification(data.message);
    			$timeout(function() { self.confirmation_email_sent = true; }, 1000);
    		});
    
    		request.error(function(data, status, headers, config) {});
    	};
    
    	self.confirmationEmail = function() {
    		var credentials = {
    			token: self.confirmation_code
    		};
    
    		var request = APIservices.confirmEmail(credentials);
    
    		request.success(function(data, status, headers, config) {
    			notificationService.showNotification(data.message);
    			self.email_confirmed = true;
    			self.confirmation_email_sent = false;
    		});
    
    		request.error(function(data, status, headers, config) {});
    	};
    
    }]);

})();