Skip to content

Commit

Permalink
Finished Overlay
Browse files Browse the repository at this point in the history 
Overlay template finished (pending style check) and Overlay synced with
dash
  • Loading branch information
@cutecryptid
cutecryptid committed Nov 10, 2017
1 parent a306277 commit f94e4d3
Show file tree
Hide file tree
Showing 7 changed files with 210 additions and 76 deletions.
1 change: 0 additions & 1 deletion public/app/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,5 @@ angular.module('myApp', [
'app.routes',
'mainCtrl',
'robotCtrl',
'overCtrl',
'robotService'
]);
5 changes: 3 additions & 2 deletions public/app/app.routes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,9 @@ angular.module('app.routes', ['ngRoute'])
})
.when('/:categoryName/overlay', {
templateUrl: 'app/views/pages/overlay.html',
controller: 'overlayController',
controllerAs: 'over'
controller: 'mainController',
controllerAs: 'main',
overlay: true
})
// get rid of the hash in the URL
$locationProvider.html5Mode(true);
Expand Down
38 changes: 31 additions & 7 deletions public/app/controllers/mainCtrl.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
angular.module('mainCtrl', [])
.controller('mainController', function($route, $routeParams, $rootScope, $location, $scope, $filter, Robot, ngDialog) {
.controller('mainController', function($route, $routeParams, $rootScope, $location, $scope, $timeout, $filter, Robot, ngDialog) {
var vm = this;

$scope.isActive = function (viewLocation) {
Expand All @@ -14,10 +14,11 @@ angular.module('mainCtrl', [])

vm.prettyTime = function(robotTime){
if(robotTime){
return robotTime.minutes + ":" + pad(robotTime.seconds, 2, '0') + '.' + pad(robotTime.miliseconds, 3, '0');
} else {
return "00:00.000"
if (timeToMiliseconds(robotTime) != 0) {
return robotTime.minutes + ":" + pad(robotTime.seconds, 2, '0') + '.' + pad(robotTime.miliseconds, 3, '0');
}
}
return "--:--.---"
}

vm.prettyCategory = function(categorySlug){
Expand Down Expand Up @@ -90,6 +91,10 @@ angular.module('mainCtrl', [])
vm.categoryTitle = vm.prettyCategory(vm.categorySlug);
vm.categoryId = vm.getCategoryId(vm.categorySlug);
vm.routePath = "/"+vm.categorySlug;
vm.categoryRankingSize = 16;
if (vm.categoryId == 2){
vm.categoryRankingSize = 12;
}

var refreshRobotList = function(categoryId){
if (categoryId != 0 ){
Expand All @@ -99,6 +104,7 @@ angular.module('mainCtrl', [])
vm.processing = false;
// bind the robots that come back to vm.robots
vm.robots = ret.data.message;
vm.ranking = getRanking(vm.robots, vm.categoryRankingSize);
});
} else {
Robot.all()
Expand All @@ -107,11 +113,11 @@ angular.module('mainCtrl', [])
vm.processing = false;
// bind the robots that come back to vm.robots
vm.robots = ret.data.message;
vm.ranking = getRanking(vm.robots, vm.categoryRankingSize);
});
}
}

refreshRobotList(vm.categoryId);
}

vm.bestTimeIndex = function(robot){
var times = robot.times;
Expand Down Expand Up @@ -209,7 +215,7 @@ angular.module('mainCtrl', [])
});
};

vm.rankingDialog = function($event){
getRanking = function(robots, size){
if (vm.categoryId != 2){
sortedRobots = vm.robots.slice(0);
sortedRobots = sortedRobots.sort(function(a, b) {
Expand All @@ -225,7 +231,11 @@ angular.module('mainCtrl', [])
return 0;
});
}
return sortedRobots.slice(0,size-1);
}

vm.rankingDialog = function($event){
sortedRobots = vm.rankingRobots;
var dialog = ngDialog.open({
template: 'app/views/modals/ranking.html',
scope: $scope,
Expand Down Expand Up @@ -260,6 +270,20 @@ angular.module('mainCtrl', [])
});
}


refreshRobotList(vm.categoryId);

overlayRefresh = function(){
$timeout(function() {
refreshRobotList(vm.categoryId);
vm.ranking = getRanking(vm.robots, vm.categoryRankingSize);
overlayRefresh();
}, 500)
};

if ($route.current.$$route.overlay){
overlayRefresh();
}
});


Expand Down
50 changes: 0 additions & 50 deletions public/app/controllers/overCtrl.js
View file

This file was deleted.

1 change: 0 additions & 1 deletion public/app/views/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@

<!-- controllers -->
<script src="app/controllers/mainCtrl.js"></script>
<script src="app/controllers/overCtrl.js"></script>

<!-- services -->
<script src="app/services/robotService.js"></script>
Expand Down
72 changes: 63 additions & 9 deletions public/app/views/pages/overlay.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,67 @@ <h4>Competición de Robots {{over.categoryTitle}}</h4>
</div>
</div> -->

<table id="robot-ranking">
<tbody>
<tr class="ranking-line" ng-repeat="robot in over.robots track by $index">
<td>{{$index + 1}}</td>
<td>{{ robot.name }}</td>
<td>{{ over.prettyTime(robot.times[0]) }}</td>
</tr>
</tbody>
</table>
<div id="robot-ranking">
<table id="ranking-container" class="table-sm">
<tbody>
<tr class="ranking-line pos-{{$index}}" ng-if="main.categoryId != 2" ng-repeat="robot in main.ranking track by $index">
<td class="ranking-number">{{$index + 1}}</td>
<td class="ranking-name" ng-class="{'big-name': $index <= 2 }">{{ robot.name }}</td>
<td>
<table class="times-subtable" ng-if="$parent.$index <= 2">
<tr class="times-subline" ng-repeat="time in robot.times track by $index">
<td class="time-number">{{$index + 1}}</td>
<td align="left">{{main.prettyTime(time)}}</td>
</tr>
</table>
<span align="left" ng-if="$parent.$index > 2"> {{ main.prettyTime(robot[main.bestTimeIndex(robot)]) }} </span>
</td>
</tr>

<tr class="ranking-line pos-{{$index}}" ng-if="main.categoryId == 2" ng-repeat="robot in main.ranking track by $index">
<td class="ranking-number">{{$index + 1}}</td>
<td class="ranking-name">
<table>
<tr>
<td ng-class="{'small-name': $index > 2 }">{{ robot.name }}</td>
</tr>
<tr>
<td ng-if="$parent.$index <= 2" class="ranking-icons">
<i class="fa fa-recycle recycle" ng-class="{'icon-color': robot.extra.recycle }" aria-hidden="true"></i>
<i class="fa fa-lightbulb-o original" ng-class="{'icon-color': robot.extra.original }" aria-hidden="true"></i>
<i class="fa fa-file-text onlineDocs" ng-class="{'icon-color': robot.extra.onlineDocs }" aria-hidden="true"></i>
<span class="ranking-retweet-count">
<i ng-class="{'icon-color': main.isTwitterBest(robot) }" class="fa fa-twitter twitter" aria-hidden="true"></i> {{robot.extra.retweetCount}} RT
</span>
</td>
<td ng-if="$parent.$index > 2" class="ranking-icons icons-mini">
<i class="fa fa-circle recycle" ng-class="{'icon-color': robot.extra.recycle }" aria-hidden="true"></i>
<i class="fa fa-circle original" ng-class="{'icon-color': robot.extra.original }" aria-hidden="true"></i>
<i class="fa fa-circle onlineDocs" ng-class="{'icon-color': robot.extra.onlineDocs }" aria-hidden="true"></i>
<span class="ranking-retweet-count">
<i ng-class="{'icon-color': main.isTwitterBest(robot) }" class="fa fa-circle twitter" aria-hidden="true"></i> {{robot.extra.retweetCount}} RT
</span>
</td>
</tr>
</table>
</td>
<td>
<table class="times-subtable" ng-if="$parent.$index <= 2">
<tr class="times-subline" ng-repeat="time in robot.times.slice(0,2) track by $index">
<td class="time-number">{{$index + 1}}</td>
<td align="left">{{main.prettyTime(time)}}</td>
</tr>
<tr class="score-subline">
<td class="time-number">Score: </td>
<td align="left">{{main.calculateScore(robot)}} pts</td>
</tr>
</table>
<span align="left" ng-if="$parent.$index > 2"> {{ main.prettyTime(robot[main.bestTimeIndex(robot)]) }} </span>
<span class="mini-score" align="left" ng-if="$parent.$index > 2"> {{ main.calculateScore(robot) }} pts</span>
</td>
</tr>

</tbody>
</table>
</div>
</div>
119 changes: 113 additions & 6 deletions public/assets/css/style.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,16 +81,123 @@ body {
}

#robot-ranking{
font-size: 9pt;
font-weight: bold;
color: @light_gray;
position: absolute;
text-shadow: 0px 0px 4px #000;
top: 6%;
right: 3%;
padding: 10px;
background: @dark_gray;
border-radius: 3px;
width: 22%;
height: 80%;
right: 0;

#ranking-container{
width: 100%;
}

.ranking-line{
position: relative;
}
.ranking-line:before{
content: " ";
position:absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 50;
border: 1px solid @chroma_green;
border-right: 0px;
}

tr{
padding: 20px 0px;
border-spacing: 20px;

td {
padding: 2px;
background-color: @dark_gray;
}
.ranking-number{
font-size: 11pt;
padding: 0px 20px;
padding-right: 25px;
color: @dark_gray;
background-color: @light_gray;
position: relative;
z-index: 5;
}
.ranking-name{
padding: 0px 10px;
position: relative;
z-index: 15;
}
.ranking-name:after{
position: absolute;
content: "";
background-color: @dark_gray;
display: block;
width: 25px;
height: 101%;
top: 0px;
left: -1px;
z-index: -1;
transform-origin: top right;
-ms-transform: skew(-10deg, 0deg);
-webkit-transform: skew(-10deg, 0deg);
transform: skew(-10deg, 0deg);
}
.ranking-name.big-name{
font-size: 11pt;
}
}

.ranking-icons{
i{
color: darken(@light_gray, 50%);
}

td {
padding: 5px 10px;
i.recycle.icon-color{
color: #1c800f;
}
i.original.icon-color{
color: #f6c209;
}
i.onlineDocs.icon-color{
color: white;
}
i.twitter.icon-color{
color: #1bb1d2;
}
}

.ranking-name .small-name{
padding: 1px;
}

.ranking-icons.icons-mini{
padding: 2px 0px;
font-size: 7pt;
}

.mini-score{
display: inline-block;
margin-left: 5px;
}

.times-subtable{
tr{
border-bottom: 1px solid lighten(@dark_gray, 10%);

td {
padding: 0 5px;
width: 100%;
}
}

tr:last-child{
border: 0px;
}
}

}

0 comments on commit f94e4d3

Please sign in to comment.