added Average accuracy support

MPalarya · Jun 6, 2016 · df48411 · df48411
1 parent b443d0d
commit df48411
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 10 deletions.
diff --git a/DBFrontend/app.css b/DBFrontend/app.css
@@ -51,4 +51,18 @@
 	border:1px; 
 	box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
 	padding:2px;
+}
+
+.numberCircle {
+    border-radius: 50%;
+    width: 400px;
+    height: 200px;
+    padding: 30px;
+	margin-top:50px;
+    background: #fff;
+    border: 2px solid #666;
+    color: #666;
+    text-align: center;
+
+    font: 100px Arial, sans-serif;
 }
diff --git a/DBFrontend/app.js b/DBFrontend/app.js
@@ -163,6 +163,13 @@
 			});
 	  }
 
+	  this.getAverageAccuracy = function(){
+		  return $http.get('../php/api/avg_most_accurate').then(function successCallback(response) {
+				return JSON.parse(response.data);
+			}, function errorCallback(response) {
+				alert("Error on getAverageAccuracy!");
+			});
+	  }
   })
 
   app.controller('MainCtrl', function ($scope,$http, $uibModal, ChartService,UsersService,HistoryService) {
@@ -598,7 +605,7 @@
 	  $scope.mostAccurate = [];
 	  $scope.mostLikedWomen = [];
 	  $scope.mostLikedMen = [];
-
+	  $scope.averageAccuracy = [];
 
 	  WallOfFameService.getMostAccurate().then(function successCallback(data){
 		  $scope.mostAccurate = data;
@@ -611,5 +618,9 @@
 	  WallOfFameService.getMostLiked(0).then(function successCallback(data){
 		  $scope.mostLikedWomen = data;
 	  });
+
+	  WallOfFameService.getAverageAccuracy().then(function successCallback(data){
+		  $scope.averageAccuracy = data;
+	  });
   });
 })();
diff --git a/DBFrontend/walloffame.html b/DBFrontend/walloffame.html
@@ -28,6 +28,8 @@ <h1>Profilyze - Wall of Fame</h1>
 		  <li ng-class="{'active' : currentPage=='mostAccurate'}" style="cursor:pointer" ng-click="currentPage='mostAccurate'"><a>Most Accurate</a></li>
 		  <li ng-class="{'active' : currentPage=='mostLikedWomen'}" style="cursor:pointer" ng-click="currentPage='mostLikedWomen'"><a>Most Liked Women</a></li>
 		  <li ng-class="{'active' : currentPage=='mostLikedMen'}" style="cursor:pointer" ng-click="currentPage='mostLikedMen'"><a>Most Liked Men</a></li>
+		  <li ng-class="{'active' : currentPage=='averageAccuracy'}" style="cursor:pointer" ng-click="currentPage='averageAccuracy'"><a>Average accuracy for the attributes</a></li>
+
 		</ul>
 
 		<div ng-if="currentPage=='mostAccurate'">
@@ -111,11 +113,8 @@ <h1>Profilyze - Wall of Fame</h1>
 							<img ng-src="{{user[1]}}" class="col-md-12"/>
 						</a>
 					</div>
-					<div class="col-md-3">
-						<span class="fa-stack fa-lg" style="font-size:70px" >
-						  <i class="fa fa-circle fa-stack-2x"></i>
-						  <i class="fa fa-inverse fa-stack-1x" >{{user[2]}}</i>
-						</span>
+					<div class="col-md-3 numberCircle">
+						{{user[2]}}
 					</div>
 				</div>
 			</div>
@@ -137,11 +136,91 @@ <h1>Profilyze - Wall of Fame</h1>
 							<img ng-src="{{user[1]}}" class="col-md-12"/>
 						</a>
 					</div>
+					<div class="col-md-3 numberCircle">
+						{{user[2]}}
+					</div>
+				</div>
+			</div>
+		</div>
+		<div ng-if="currentPage=='averageAccuracy'">
+			<div class="panel panel-info" style="margin-top:10px">
+				<div class="panel-heading" style="height:50px;font-weight:bold;">
+					<div class="col-md-6">
+						Attribute
+					</div>
 					<div class="col-md-3">
-						<span class="fa-stack fa-lg" style="font-size:100px" >
-						  <i class="fa fa-circle fa-stack-2x"></i>
-						  <i class="fa fa-inverse fa-stack-1x" >{{user[2]}}</i>
-						</span>
+						Average Accuracy
+					</div>
+				</div>
+				<div class="row" style="margin:20px">
+					<div class="col-md-6" >
+						Gender
+					</div>
+					<div class="col-md-3">
+						{{averageAccuracy[0]["avg(p_Gender)"] | number:2}}
+					</div>
+				</div>
+
+				<div class="row" style="margin:20px">
+					<div class="col-md-6" >
+						Eye Color
+					</div>
+					<div class="col-md-3">
+						{{averageAccuracy[0]["avg(p_EyeColor)"] | number:2}}
+					</div>
+				</div>
+
+				<div class="row" style="margin:20px">
+					<div class="col-md-6" >
+						Hair Color
+					</div>
+					<div class="col-md-3">
+						{{averageAccuracy[0]["avg(p_HairColor)"] | number:2}}
+					</div>
+				</div>
+
+				<div class="row" style="margin:20px">
+					<div class="col-md-6" >
+						Has Beard
+					</div>
+					<div class="col-md-3">
+						{{averageAccuracy[0]["avg(p_HasBeard)"] | number:2}}
+					</div>
+				</div>
+
+				<div class="row" style="margin:20px">
+					<div class="col-md-6" >
+						Has Glasses
+					</div>
+					<div class="col-md-3">
+						{{averageAccuracy[0]["avg(p_HasGlasses)"] | number:2}}
+					</div>
+				</div>
+
+				<div class="row" style="margin:20px">
+					<div class="col-md-6" >
+						Smiles
+					</div>
+					<div class="col-md-3">
+						{{averageAccuracy[0]["avg(p_HasSmile)"] | number:2}}
+					</div>
+				</div>
+
+				<div class="row" style="margin:20px">
+					<div class="col-md-6" >
+						Age
+					</div>
+					<div class="col-md-3">
+						{{averageAccuracy[0]["avg(p_Age)"] | number:2}}
+					</div>
+				</div>
+
+				<div class="row" style="margin:20px;font-weight:bold">
+					<div class="col-md-6" >
+						Average Total
+					</div>
+					<div class="col-md-3" >
+						{{averageAccuracy[0]["avg(avg_att)"] | number:2}}
 					</div>
 				</div>
 			</div>