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 Angular.js, 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) {});
		};

	}]);

})();