alignment and excel and pdf generation

src/main/webapp/WEB-INF/controllers/ReportsController.js

-myApp.controller("reportsController", function($scope, $http, myFactory, $mdDialog, appConfig, $timeout, $compile) {
+myApp
+.directive('excelExport',
+	    function () {
+	      return {
+	        restrict: 'A',
+	        scope: {
+	        	fileName: "@",
+	            data: "&exportData"
+	        },
+	        replace: true,
+	        template: '<button class="btn btn-primary btn-ef btn-ef-3 btn-ef-3c mb-10" ng-click="download()">Export to Excel <i class="fa fa-download"></i></button>',
+	        link: function (scope, element) {
+	        	
+	        	scope.download = function() {
+
+	        		function datenum(v, date1904) {
+	            		if(date1904) v+=1462;
+	            		var epoch = Date.parse(v);
+	            		return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
+	            	};
+	            	
+	            	function getSheet(data, opts) {
+	            		var ws = {};
+	            		var range = {s: {c:10000000, r:10000000}, e: {c:0, r:0 }};
+	            		for(var R = 0; R != data.length; ++R) {
+	            			for(var C = 0; C != data[R].length; ++C) {
+	            				if(range.s.r > R) range.s.r = R;
+	            				if(range.s.c > C) range.s.c = C;
+	            				if(range.e.r < R) range.e.r = R;
+	            				if(range.e.c < C) range.e.c = C;
+	            				var cell = {v: data[R][C] };
+	            				if(cell.v == null) continue;
+	            				var cell_ref = XLSX.utils.encode_cell({c:C,r:R});
+	            				
+	            				if(typeof cell.v === 'number') cell.t = 'n';
+	            				else if(typeof cell.v === 'boolean') cell.t = 'b';
+	            				else if(cell.v instanceof Date) {
+	            					cell.t = 'n'; cell.z = XLSX.SSF._table[14];
+	            					cell.v = datenum(cell.v);
+	            				}
+	            				else cell.t = 's';
+	            				
+	            				ws[cell_ref] = cell;
+	            			}
+	            		}
+	            		if(range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
+	            		return ws;
+	            	};
+	            	
+	            	function Workbook() {
+	            		if(!(this instanceof Workbook)) return new Workbook();
+	            		this.SheetNames = [];
+	            		this.Sheets = {};
+	            	}
+	            	 
+	            	var wb = new Workbook(), ws = getSheet(scope.data());
+	            	/* add worksheet to workbook */
+	            	wb.SheetNames.push(scope.fileName);
+	            	wb.Sheets[scope.fileName] = ws;
+	            	var wbout = XLSX.write(wb, {bookType:'xlsx', bookSST:true, type: 'binary'});
+
+	            	function s2ab(s) {
+	            		var buf = new ArrayBuffer(s.length);
+	            		var view = new Uint8Array(buf);
+	            		for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
+	            		return buf;
+	            	}
+	            	
+	        		saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), scope.fileName+'.xlsx');
+	        		
+	        	};
+	        
+	        }
+	      };
+	    }
+	 )
+.controller("reportsController", function($scope, $http, myFactory, $mdDialog, appConfig, $timeout, $compile) {
 	$scope.records = [];
 	$scope.searchId="";
 	// Date picker related code
@@ -7,6 +83,7 @@ myApp.controller("reportsController", function($scope, $http, myFactory, $mdDial
 	$scope.fromDate = today;
 	$scope.toDate = today;
 	$scope.reportMsg ="Please generate a report for preview.";
+	$scope.isDataAvailable  = false ;
 	$scope.validateDates = function(dateValue, from) {
 		if(from == "FromDate"){
 			var toDat = $scope.toDate;
@@ -225,10 +302,14 @@ myApp.controller("reportsController", function($scope, $http, myFactory, $mdDial
 	        method : "GET",
 	        url : url
 	    }).then(function mySuccess(response) {
-	    	if(response.data == "No data available"){
+	    	if(response.data[0] == "No data available"){
 	    		$scope.pdfUrl = response.data;
+	    		$scope.isDataAvailable  = false ;
 	    	}else{
-	    		$scope.pdfUrl = "reports/"+response.data;
+	    		$scope.pdfUrl = "reports/"+response.data[0];
+	    		$scope.jsonToExport = response.data[1];
+	    		excelDataFormation();
+	    		$scope.isDataAvailable  = true ;
 	    	}
 	    }, function myError(response) {
 	    	showAlert("Something went wrong while generating report!!!");
@@ -236,6 +317,38 @@ myApp.controller("reportsController", function($scope, $http, myFactory, $mdDial
 	    });
 	}
 
+//	function generateExcelReport(id,data) {
+//		debugger;
+//		
+//		var defaultURL= appConfig.appUri + "attendance/employeeLoginReportBasedOnDateTime?empId=" + id + "&fromDate=" + data.fromDate + "&toDate=" + data.toDate + "&fromTime=" + data.fromTime + "&toTime=" + data.toTime
+//		$http({   
+//	        method : "GET",
+//	        url : defaultURL
+//	    }).then(function mySuccess(response) {
+//	    	if(response.data){
+//	    		console.log(response.data);
+//	    		$scope.jsonToExport = response.data;
+//	    		excelDataFormation();
+//	    	}
+//	    }, function myError(response) {
+//	    	showAlert("Something went wrong while generating report!!!");
+//	    	$scope.pdfUrl = "";
+//	    });
+//	}
+	
+	function excelDataFormation(){
+		// Prepare Excel data:
+		$scope.fileName = "report";
+		$scope.exportData = [];
+	  // Headers:
+		
+		$scope.exportData.push([ "ID", "Name", "Date", "Login Time", "Logout Time", "Total Hours"]);
+	  // Data:
+		angular.forEach($scope.jsonToExport, function(value, key) {
+	    $scope.exportData.push([value.employeeId, value.employeeName,value.dateOfLogin, value.firstLogin,value.lastLogout,value.totalLoginTime]);
+		});
+	}
+	
 	function getFormattedDate(date){
 		var day = date.getDate();
 		var month = date.getMonth() + 1;

src/main/webapp/WEB-INF/css/default-styles.css

@@ -235,4 +235,7 @@ md-select {
 }
 .my-css-class{
 	margin-left: 20px;
-}
\ No newline at end of file
+}
+.align-button{
+	margin-left: -2%;
+}

src/main/webapp/WEB-INF/templates/reports.html

@@ -81,6 +81,18 @@
 				</div>
 			</div>
 		</div>
-
-
+		<div class="form-horizontal">
+			<div class="form-group">
+				<div class="form-inline col-lg-12 align-button">
+					<div class="form-group col-lg-9">
+					</div>
+					<div class="form-group col-lg-2">
+						<div excel-export export-data="exportData" file-name="{{fileName}}" ng-disabled = "!isDataAvailable"></div>
+					</div>
+					<div class="form-group col-lg-1">
+						<button class="btn btn-primary btn-ef btn-ef-3 btn-ef-3c mb-10" ng-click="print(pdfUrl)" ng-disabled = "!isDataAvailable" > Save as PDF <i class="fa fa-download"></i></button>
+					</div>
+				</div>
+			</div>
+		</div>
 </div>