320 lines
12 KiB
JavaScript
320 lines
12 KiB
JavaScript
define(['m', '_', 'spritz', 'teams'], function (m, _ , spritz, teams) {
|
|
|
|
var playersSelectionBar = {};
|
|
|
|
playersSelectionBar.toggleTeam = function(teamId, activatedTeams){
|
|
return function(isActive){
|
|
isActive = isActive != 'true';
|
|
if(isActive){
|
|
activatedTeams().push(teamId);
|
|
return;
|
|
}
|
|
activatedTeams(_.difference(activatedTeams(), [teamId]));
|
|
};
|
|
};
|
|
|
|
playersSelectionBar.teamInput = function(teamName, teamId, activatedTeams){
|
|
var isActive = _.includes(activatedTeams(), teamId);
|
|
var class_ = isActive ? 'uk-badge-success' : '';
|
|
var callback = playersSelectionBar.toggleTeam(teamId, activatedTeams);
|
|
return m('div.uk-badge.uk-margin-left.uk-border-rounded',
|
|
{class: class_, 'data-selected': isActive, onclick: m.withAttr("data-selected", callback)},
|
|
m('span', {style: {'min-width': '40px', display: 'inline-block'}}, teamName)
|
|
);
|
|
|
|
};
|
|
|
|
playersSelectionBar.scoreInput = function(score, activatedScores){
|
|
var isActive = _.includes(activatedScores(), score);
|
|
var class_ = isActive ? 'uk-badge-success' : '';
|
|
var callback = playersSelectionBar.toggleTeam(score, activatedScores);
|
|
return m('div.uk-badge.uk-margin-left.uk-border-rounded',
|
|
{class: class_, 'data-selected': isActive, onclick: m.withAttr("data-selected", callback)},
|
|
m('span', {style: {'min-width': '30px', display: 'inline-block'}}, score)
|
|
);
|
|
};
|
|
|
|
playersSelectionBar.getTeamInput = function(model, team){
|
|
var label = team.name;
|
|
return playersSelectionBar.teamInput(label, team.name, model.activatedTeams);
|
|
};
|
|
|
|
playersSelectionBar.chooseTeams = function(model){
|
|
return m('form.uk-grid', {style: {'margin-top': '1em'}},
|
|
m('div.uk-width-1-6', m('label', m('b', 'Équipes'))),
|
|
m('div.uk-width-5-6',
|
|
m('div.uk-grid',
|
|
_.map(teams.teams(), _.partial(playersSelectionBar.getTeamInput, model))
|
|
))
|
|
);
|
|
};
|
|
|
|
playersSelectionBar.chooseScore = function(model){
|
|
return m('form.uk-grid', {style: {'margin-top': '1em'}},
|
|
m('div.uk-width-1-6', m('label', m('b', 'Cote'))),
|
|
m('div.uk-width-5-6',
|
|
m('div.uk-grid', [
|
|
playersSelectionBar.scoreInput(1, model.activatedScores),
|
|
playersSelectionBar.scoreInput(2, model.activatedScores),
|
|
playersSelectionBar.scoreInput(3, model.activatedScores),
|
|
playersSelectionBar.scoreInput(4, model.activatedScores),
|
|
playersSelectionBar.scoreInput(5, model.activatedScores)
|
|
])));
|
|
};
|
|
|
|
playersSelectionBar.searchFactory = function(model){
|
|
return function(){
|
|
model.searchTerm(this.value);
|
|
};
|
|
};
|
|
|
|
playersSelectionBar.searchBar = function(model){
|
|
var icon = m('i.fa.fa-search', {'aria-hidden': true}, '');
|
|
return m('form.uk-grid', {style: {'margin-top': '1em'}},
|
|
m('div.uk-width-1-1.', {style: 'text-align: right;'},
|
|
m('label', m('b', icon, " Rechercher ")),
|
|
m('input', {type: 'text', onkeypress: playersSelectionBar.searchFactory(model)})));
|
|
};
|
|
|
|
playersSelectionBar.controller = function(model){
|
|
return model;
|
|
};
|
|
|
|
playersSelectionBar.view = function(model){
|
|
return m('div.uk-grid', [
|
|
m('div.uk-width-1-2',
|
|
playersSelectionBar.chooseTeams(model),
|
|
playersSelectionBar.chooseScore(model)),
|
|
m('div.uk-width-1-2',
|
|
playersSelectionBar.searchBar(model))
|
|
]);
|
|
};
|
|
|
|
|
|
var playersTable = {};
|
|
|
|
playersTable._sortPlayers = function(sorting, playerList){
|
|
var sortingKeys = _.map(sorting(), 'key');
|
|
var sortingDirections = _.map(sorting(), function(o){
|
|
return o.direction == 1 ? 'desc' : 'asc';
|
|
});
|
|
return _.orderBy(playerList, sortingKeys, sortingDirections);
|
|
};
|
|
|
|
playersTable.decryptPlayerList = function(encryptedPlayerList){
|
|
var keyLengthInBytes = 128;
|
|
var key = spritz.hash(localStorage.getItem('secret') || '', keyLengthInBytes);
|
|
var decryptedMessage = spritz.decrypt(key, encryptedPlayerList);
|
|
try{
|
|
return JSON.parse(spritz.utf8ByteArrayToString(decryptedMessage));
|
|
}catch(e){
|
|
localStorage.removeItem('secret');
|
|
m.route('/membre');
|
|
}
|
|
|
|
};
|
|
|
|
playersTable.getEncryptedPlayerList = function(){
|
|
var deferred = m.deferred();
|
|
var interval = setInterval(function() {
|
|
if(!_.isEmpty(window.encryptedPlayerList)){
|
|
clearInterval(interval);
|
|
deferred.resolve(window.encryptedPlayerList);
|
|
m.redraw();
|
|
}
|
|
}, 333);
|
|
return deferred.promise;
|
|
};
|
|
|
|
playersTable.controller = function(model){
|
|
var ctrl = {};
|
|
ctrl.model = model;
|
|
|
|
ctrl.players = playersTable.getEncryptedPlayerList()
|
|
.then(playersTable.decryptPlayerList);
|
|
|
|
ctrl.sortPlayers = function(){
|
|
ctrl.players(playersTable._sortPlayers(ctrl.model.sorting, ctrl.players()));
|
|
};
|
|
return ctrl;
|
|
};
|
|
|
|
playersTable._getSortDict = function(sorting){
|
|
var ret = {};
|
|
_.each(sorting(), function(elm){
|
|
ret[elm.key] = elm.direction;
|
|
});
|
|
return ret;
|
|
|
|
};
|
|
|
|
playersTable._isSortingUp = function(sorting, key){
|
|
var dict = playersTable._getSortDict(sorting);
|
|
return dict[key] === 1;
|
|
};
|
|
|
|
playersTable._isSortingDown = function(sorting, key){
|
|
var dict = playersTable._getSortDict(sorting);
|
|
return dict[key] === -1;
|
|
};
|
|
|
|
playersTable.arrows = function(sorting, key){
|
|
var sortUp = playersTable._isSortingUp(sorting, key);
|
|
var sortDown = playersTable._isSortingDown(sorting, key);
|
|
var style = {
|
|
display: 'inline-block',
|
|
'line-height': '0.5em',
|
|
'margin-right': '1em',
|
|
'font-size': '0.7em'
|
|
};
|
|
var sortedStyle = {color: '#8cc14c', 'font-weight': 'bold'};
|
|
return m('span', {style: style},
|
|
m('i.fa.fa-chevron-up', {style: sortUp ? sortedStyle: {}}),
|
|
m('br'),
|
|
m('i.fa.fa-chevron-down', {style: sortDown ? sortedStyle: {}})
|
|
);
|
|
};
|
|
|
|
playersTable._setSorting = function(sorting, key){
|
|
var newDirection = {key: key, direction: -1 * playersTable._getSortDict(sorting)[key]};
|
|
var directions = _.filter(sorting(), function(o){
|
|
return o.key != key;
|
|
});
|
|
sorting([newDirection].concat(directions));
|
|
};
|
|
|
|
playersTable.tableHeader = function(sorting){
|
|
var setSorting = function(key){
|
|
return _.partial(playersTable._setSorting, sorting, key);
|
|
};
|
|
return m('thead',
|
|
m('tr', [
|
|
m('th', {onclick: setSorting('team')}, playersTable.arrows(sorting, 'team'), 'Équipe'),
|
|
m('th', {onclick: setSorting('name')}, playersTable.arrows(sorting, 'name'), 'Nom'),
|
|
m('th.uk-hidden-small', 'Courriel'),
|
|
m('th.uk-hidden-small', 'Téléphone'),
|
|
m('th', {onclick: setSorting('score')}, playersTable.arrows(sorting, 'score'), 'Cote')
|
|
]));
|
|
};
|
|
|
|
playersTable.getPlayerTeamIcon = function(player){
|
|
var background = teams.getTeamColor(player.team);
|
|
var style = {width: '20px', height: '20px', 'background-color': background};
|
|
return m('div', {style: style}, m.trust(' '));
|
|
};
|
|
|
|
playersTable.showOrHidePlayerDetail = function(player){
|
|
return function(){
|
|
player.showDetails = !player.showDetails;
|
|
};
|
|
};
|
|
|
|
playersTable.playerTelLink = function(player){
|
|
return m('a[href=tel:' + player.tel + ']', player.tel);
|
|
};
|
|
|
|
playersTable.playerRow = function(player){
|
|
return m('tr', {onclick: playersTable.showOrHidePlayerDetail(player)}, [
|
|
m('td', playersTable.getPlayerTeamIcon(player)),
|
|
m('td', player.name),
|
|
m('td.uk-hidden-small', player.email),
|
|
m('td.uk-hidden-small', player.tel),
|
|
m('td', player.score)
|
|
]);
|
|
};
|
|
|
|
playersTable.playerInformation = function(player){
|
|
return m('tr.uk-visible-small', [
|
|
m('td', ''),
|
|
m('td[colspan=3]',
|
|
m('ul', [
|
|
m('li', [m('b', 'tel: '), playersTable.playerTelLink(player)]),
|
|
m('li', [m('b', 'email: '), player.email])
|
|
]))
|
|
]);
|
|
};
|
|
|
|
playersTable.playerRowAndInformation = function(player){
|
|
if(player.showDetails){
|
|
return [playersTable.playerRow(player),
|
|
m('tr', {style: {height: '0px'}}),
|
|
playersTable.playerInformation(player)];
|
|
}
|
|
return playersTable.playerRow(player);
|
|
};
|
|
|
|
playersTable.onlyPlayerOfTeams = function(visibleTeams){
|
|
return function(player){
|
|
return _.includes(visibleTeams, player.team);
|
|
};
|
|
};
|
|
|
|
playersTable.onlyPlayerOfScore = function(visibleScores){
|
|
return function(player){
|
|
return _.includes(visibleScores, player.score);
|
|
};
|
|
};
|
|
|
|
playersTable.playerHasBeenSearchedFor = function(searchTerm){
|
|
return function(player){
|
|
if(_.isEmpty(searchTerm)){
|
|
return true;
|
|
}
|
|
return new RegExp(searchTerm, 'i').test(player.name);
|
|
|
|
};
|
|
}
|
|
|
|
playersTable.tableBody = function(players, visibleTeams, activatedScores, searchTerm){
|
|
return m('tbody',
|
|
_(players)
|
|
.filter(_.isObject)
|
|
.filter(playersTable.onlyPlayerOfTeams(visibleTeams))
|
|
.filter(playersTable.onlyPlayerOfScore(activatedScores))
|
|
.filter(playersTable.playerHasBeenSearchedFor(searchTerm))
|
|
.map(playersTable.playerRowAndInformation).flatten().value()
|
|
);
|
|
};
|
|
|
|
playersTable.view = function(ctrl){
|
|
ctrl.sortPlayers();
|
|
return m('table.uk-table.uk-table-hover.uk-table-striped',
|
|
playersTable.tableHeader(ctrl.model.sorting),
|
|
playersTable.tableBody(ctrl.players(),
|
|
ctrl.model.activatedTeams(),
|
|
ctrl.model.activatedScores(),
|
|
ctrl.model.searchTerm()
|
|
|
|
)
|
|
);
|
|
};
|
|
|
|
var playersPage = {};
|
|
|
|
playersPage.controller = function(){
|
|
var model = {};
|
|
model.activatedTeams = m.prop(_.map(teams.teams(), 'name'));
|
|
model.activatedScores = m.prop([1, 2, 3, 4, 5]);
|
|
model.sorting = m.prop([{key: 'team', direction: 1}, {key: 'score', direction: -1}, {key: 'name', direction: 1}]);
|
|
model.searchTerm = m.prop('');
|
|
return model;
|
|
};
|
|
|
|
playersPage.downloadButton = function(){
|
|
return m('button.uk-button.uk-button-success.uk-border-rounded',
|
|
m('i.fa.fa-download', {'aria-hidden': true}),
|
|
" Télécharger");
|
|
};
|
|
|
|
playersPage.view = function(model){
|
|
return m('div.uk-grid.uk-margin-top.uk-margin-bottom',
|
|
m('div.uk-width-large-3-5.uk-width-small-1-1.uk-container-center', [
|
|
m.component(playersSelectionBar, model),
|
|
m.component(playersTable, model),
|
|
playersPage.downloadButton()
|
|
]));
|
|
};
|
|
|
|
return playersPage;
|
|
});
|