Hello,
Am new @angularjs.
I am using progressbar in angular bootstarp.
but for my requirement its little bit tricky.
I am using progressbar for DB migrations.
OnClick of button my migration process starts and bar should show progress.
What I was thinking to do is : onclick call function which will trnsferring data and same function parallelly put one counter in session varible.
On angular side when I call this function , I want to call the another function for fetching session varible too.
I wrote below code for this:
IN VIEW:
<html ng-app="progress">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="/js/controllers/processBar.js"></script>
<script src="js/lib/ngStorage.js"></script>
</head>
<body>
<div ng-controller="progressBarController" style="width:70%!important">
<h3>Progress bar value is {{dynamic}}</h3>
<progressbar max="max" value="dynamic">
<span style="color:black; white-space:nowrap;">
{{x_dynamic}} / {{x_max}}
</span>
</progressbar>
<input type="button" ng-click="progress()" value="Click Me To Progress" />
</div>
</body>
</html>
IN ANGULAR CONTROLER:
var app= angular.module('progress', ['ui.bootstrap']);
app.controller("progressBarController", function($scope,$http,ProcessBarService) {
$scope.dynamic = 0;
$scope.max = 100;
$scope.x_dynamic = ""
$scope.x_max = "Start Migration";
$scope.progress = function()
{
working_array=['Practice','Project'];
$scope.x_maximum=working_array.length;
$scope.x_dynamic=working_array.length;
angular.forEach(working_array, function(value,key) //key: 0,1,2,3 // value: Practice,Project ...
{
$scope.x_dynamic="Processing ..." ;
$scope.x_max="";
$http.get('../MigratePractice/').success(function (data)
{
$scope.x_dynamic = value + " migration completed";
$scope.x_max = " Out of all ";
$scope.dynamic = $scope.dynamic + 50;
ProcessBarService.GetSessionVariable()
.success(function(data) {
alert(data['ProgressSuccessCounter'] + " is progress counter");
});
});
});
}
});
Am using Laravel, so I put below functions in laravel controller:
public function MigratePractice()
{
$date = date('Y-m-d H:i:s');
$a = 0;
$file = fopen("/var/www/migration_logfile.txt","w");
if(!$file)
echo " failed to open migration log file";
else{
while($a!= 100000){
$a=$a+1;
fwrite($file,$date ." Value: " . $a);
$b=fwrite($file,"\n");
if($b){
Session::put('ProgressSuccessCounter', $a);
}
else{
Session::put('ProgressFailCounter', $a);
}
}
}
}
public function GetSessionVariable()
{
return Response::json(array('ProgressSuccessCounter' => Session::get('ProgressSuccessCounter') ,
'ProgressFailCounter' => Session::get('ProgressFailCounter')));
}
Above code is working (but) with one problem as, it alerts me "ProgressSuccessCounter" variable only when first whole process is get completed.
So can I run above two functions parallaly??
how??
or welcome for any other solution.
Thanks,