Skip to content
This repository has been archived by the owner on Jun 16, 2018. It is now read-only.

Commit

Permalink
performance improvements in teams
Browse files Browse the repository at this point in the history
  • Loading branch information
@rikkertkoppes
rikkertkoppes committed Dec 30, 2014
1 parent 80ef80a commit dac6f71
Show file tree
Hide file tree
Showing 5 changed files with 58 additions and 30 deletions.
12 changes: 12 additions & 0 deletions spec/views/teamsSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ describe('teams', function() {

var module = factory('views/teams', {
'services/log': logMock,
'services/ng-throttle': factory('services/ng-throttle'),
'controllers/TeamImportDialogController': factory('controllers/TeamImportDialogController')
});

Expand Down Expand Up @@ -34,6 +35,7 @@ describe('teams', function() {

describe('missing teams.json on storage',function() {
beforeEach(function() {
angular.mock.module('services');
angular.mock.module(module.name);
angular.mock.inject(function($controller, $rootScope, $q) {
$scope = $rootScope.$new();
Expand All @@ -59,6 +61,7 @@ describe('teams', function() {
describe('stored teams',function() {
beforeEach(function() {
angular.mock.module('TeamImportDialog');
angular.mock.module('services');
angular.mock.module(module.name);
angular.mock.inject(function($controller, $rootScope, _$httpBackend_,$q) {
$scope = $rootScope.$new();
Expand Down Expand Up @@ -184,6 +187,15 @@ describe('teams', function() {
});
});

describe('watching teams change',function() {
it('should save if teams change',function() {
$scope.saveTeams = jasmine.createSpy('saveTeams');
$scope.teams[0].name = 'newName';
$scope.$digest();
expect($scope.saveTeams).toHaveBeenCalled();
});
});

describe('toggleExtended',function() {
it('should not toggle when in edit mode',function() {
$scope.editMode = true;
Expand Down
2 changes: 1 addition & 1 deletion src/js/filters/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ define('filters/index',[
}
array.forEach(function(item,i) {
item[index] = i;
})
});
return array;
};
});
Expand Down
2 changes: 1 addition & 1 deletion src/js/services/ng-teams.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ define('services/ng-teams',[
this.teams = [];

this._rawTeams = []; // teams as created by the user and persisted to storage, no auto-generated properties
this._teamsMap = Object.create(null); // id => team
this._teamsMap = {}; // id => team

this._initialized = null; // Promise<void>
this.init();
Expand Down
19 changes: 15 additions & 4 deletions src/js/views/teams.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ define('views/teams',[
'services/log',
'services/ng-teams',
'services/ng-handshake',
'services/ng-throttle',
'controllers/TeamImportDialogController',
'angular'
], function(log) {
Expand All @@ -12,8 +13,8 @@ define('views/teams',[
]).config(['$httpProvider', function($httpProvider) {
delete $httpProvider.defaults.headers.common["X-Requested-With"];
}]).controller(moduleName + 'Ctrl', [
'$scope','$http','$q','$teams','$handshake',
function($scope,$http,$q,$teams,$handshake) {
'$scope','$http','$q','$teams','$handshake','$throttle',
function($scope,$http,$q,$teams,$handshake,$throttle) {

log('init teams ctrl');
$scope.log = log.get();
Expand Down Expand Up @@ -104,7 +105,7 @@ define('views/teams',[
return $scope.saveTeams();
};

$scope.saveTeams = function() {
$scope.saveTeams = $throttle(function() {
$scope.saving = true;
// Teams used to be managed by the scope, but
// that's now moved to a service.
Expand All @@ -113,15 +114,25 @@ define('views/teams',[
// To make transition to the service smooth and quick,
// we simply copy the desired-teams-list, and (re-)add
// these to the teams service.

//TODO: this is a performance killer as it rebuilds the entire page on every save
var newTeams = $scope.teams.slice();
$teams.clear();
newTeams.forEach(function(team) {
$teams.add(team);
});
return $teams.save().finally(function() {
$scope.saving = false;
$scope.needSave = false;
});
};
},5000);

$scope.$watch('teams',function(newValue, oldValue) {
if (!angular.equals(newValue,oldValue)) {
$scope.needSave = true;
$scope.saveTeams();
}
},true);

$scope.toggleExtended = function(isCollapsed) {
if ($scope.editMode) {
Expand Down
53 changes: 29 additions & 24 deletions src/views/teams.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
<div ng-controller="teamsCtrl" id="teams">
<h1>
Teams
<small ng-show="needSave">Not saved</small>
<small ng-hide="needSave">Saved</small>
<i ng-show="saving" class="icon-save"></i>
</h1>
<form class="form-inline form-new-team" name="newTeamForm" ng-show="editMode">
<span class="control-group" ng-class="{error:!newTeamForm.newTeamNumber.$valid}">
<label class="control-label">
Expand Down Expand Up @@ -27,7 +33,6 @@
<i class="icon-edit"></i> Edit
</button>
</p>
<h5>&nbsp;<i ng-show="saving" class="icon-save"></i></h5>
<div class="alert alert-info" ng-show="status">
<button type="button" class="close" ng-click="status=''">&times;</button>
{{status}}
Expand All @@ -50,7 +55,7 @@ <h5>&nbsp;<i ng-show="saving" class="icon-save"></i></h5>
<th ng-click="sort='team.translationNeeded';rev=false" style="width: 50px;">Translation</th>
</tr>
</thead>
<tr ng-show="!editMode" ng-repeat="team in teams | index | orderBy:sort:rev" ng-click="selectTeam(team)">
<tr ng-show="!editMode" ng-repeat="team in teams | orderBy:sort:rev track by team.number" ng-click="selectTeam(team)">
<td>{{team.number}}</td>
<td>{{team.name}}</td>
<td>{{team.cityState}}</td>
Expand All @@ -62,17 +67,17 @@ <h5>&nbsp;<i ng-show="saving" class="icon-save"></i></h5>
<td>{{team.pitLocation}}</td>
<td><i ng-show="team.translationNeeded===true" class="icon-ok"></i></td>
</tr>
<tr ng-show="editMode" ng-repeat="team in teams | index | orderBy:sort:rev">
<td><input type="text" ng-model=team.number class="team-number" ng-blur="saveTeams()"></td>
<td><input type="text" ng-model=team.name ng-blur="saveTeams()"></td>
<td><input type="text" ng-model=team.cityState ng-blur="saveTeams()">
<td><input type="text" ng-model=team.country ng-blur="saveTeams()"></td>
<td><input type="text" ng-model=team.affiliation ng-blur="saveTeams()"></td>
<td><input type="text" ng-model=team.coach1 ng-blur="saveTeams()"></td>
<td><input type="text" ng-model=team.coach2 ng-blur="saveTeams()"></td>
<td><input type="text" ng-model=team.judgingGroup class="team-number" ng-blur="saveTeams()"></td>
<td><input type="text" ng-model=team.pitLocation class="team-number" ng-blur="saveTeams()"></td>
<td><input type="checkbox" ng-model=team.translationNeeded ng-change="saveTeams()"></td>
<tr ng-show="editMode" ng-repeat="team in teams | orderBy:sort:rev" track by team.number>
<td><input type="text" ng-model=team.number class="team-number"></td>
<td><input type="text" ng-model=team.name></td>
<td><input type="text" ng-model=team.cityState>
<td><input type="text" ng-model=team.country></td>
<td><input type="text" ng-model=team.affiliation></td>
<td><input type="text" ng-model=team.coach1></td>
<td><input type="text" ng-model=team.coach2></td>
<td><input type="text" ng-model=team.judgingGroup class="team-number"></td>
<td><input type="text" ng-model=team.pitLocation class="team-number"></td>
<td><input type="checkbox" ng-model=team.translationNeeded></td>
<td>
<span ng-show="editMode">
<i class="icon-trash clickable" title="delete" fll-really-message="Sure to delete this team?" fll-really-click="removeTeam(team.number)"></i>
Expand All @@ -82,47 +87,47 @@ <h5>&nbsp;<i ng-show="saving" class="icon-save"></i></h5>
</table>
</div>
<div class="largeLayoutHide">
<div ng-class="{clickable:!editMode}" class="team" ng-repeat="team in teams | index | orderBy:sort:ref" ng-click="isCollapsed = toggleExtended(isCollapsed)">
<div ng-class="{clickable:!editMode}" class="team" ng-repeat="team in teams | orderBy:sort:ref track by team.number" ng-click="isCollapsed = toggleExtended(isCollapsed)">
<span ng-show="!editMode">({{team.number}}) {{team.name}}, {{team.cityState}}</span>
<input ng-show="editMode" ng-model="team.number" ng-blur="saveTeams()" class="team-number">
<input ng-show="editMode" ng-model="team.name" ng-blur="saveTeams()">
<input ng-show="editMode" ng-model="team.cityState" ng-blur="saveTeams()">
<input ng-show="editMode" ng-model="team.number" class="team-number">
<input ng-show="editMode" ng-model="team.name">
<input ng-show="editMode" ng-model="team.cityState">
<button ng-show="editMode" class="btn" ng-class="{active:isCollapsed}" ng-click="isCollapsed=!isCollapsed">+</button>
<div ng-class="{collapse:!isCollapsed}" class="extended">
<div>
<span class="title">Country</span>
<span ng-show="!editMode">{{team.country}}</span>
<input ng-show="editMode" ng-model="team.country" ng-blur="saveTeams()">
<input ng-show="editMode" ng-model="team.country">
</div>
<div>
<span class="title">Affiliation</span>
<span ng-show="!editMode">{{team.affiliation}}</span>
<input ng-show="editMode" ng-model="team.affiliation" ng-blur="saveTeams()">
<input ng-show="editMode" ng-model="team.affiliation">
</div>
<div>
<span class="title">Coach 1</span>
<span ng-show="!editMode">{{team.coach1}}</span>
<input ng-show="editMode" ng-model="team.coach1" ng-blur="saveTeams()">
<input ng-show="editMode" ng-model="team.coach1">
</div>
<div>
<span class="title">Coach 2</span>
<span ng-show="!editMode">{{team.coach2}}</span>
<input ng-show="editMode" ng-model="team.coach2" ng-blur="saveTeams()">
<input ng-show="editMode" ng-model="team.coach2">
</div>
<div>
<span class="title">Judging group</span>
<span ng-show="!editMode">{{team.judgingGroup}}</span>
<input ng-show="editMode" ng-model="team.judgingGroup" ng-blur="saveTeams()">
<input ng-show="editMode" ng-model="team.judgingGroup">
</div>
<div>
<span class="title">Pit location</span>
<span ng-show="!editMode">{{team.pitLocation}}</span>
<input ng-show="editMode" ng-model="team.pitLocation" ng-blur="saveTeams()">
<input ng-show="editMode" ng-model="team.pitLocation">
</div>
<div>
<span class="title">Translation needed</span>
<span ng-show="!editMode &amp;&amp; team.translationNeeded===true"><i class="icon-ok"></i></span>
<input ng-show="editMode" type="checkbox" ng-model="team.translationNeeded" ng-change="saveTeams()">
<input ng-show="editMode" type="checkbox" ng-model="team.translationNeeded">
</div>
</div>
</div>
Expand Down

0 comments on commit dac6f71

Please sign in to comment.