refactored out the players page
This commit is contained in:
didier amyot committed
1 parent
bfd839b4cb
commit
efd279691a
3 files changed
+231
-229
No files matched your search
@@ -1,230 +1,4 @@
|
||||
define(['m', '_', 'teams', 'views/loginPage', 'views/topNavBar', 'views/footer'], function (m, _ , teams, loginPage, topNavBar, footer) {
|
||||
|
||||
|
||||
var confidentialSelection = {};
|
||||
|
||||
confidentialSelection.toggleTeam = function(teamId, activatedTeams){
|
||||
return function(isActive){
|
||||
isActive = isActive != 'true';
|
||||
if(isActive){
|
||||
activatedTeams().push(teamId);
|
||||
return;
|
||||
}
|
||||
activatedTeams(_.difference(activatedTeams(), [teamId]));
|
||||
};
|
||||
};
|
||||
|
||||
confidentialSelection.teamInput = function(teamName, teamId, activatedTeams){
|
||||
var isActive = _.includes(activatedTeams(), teamId);
|
||||
var class_ = isActive ? 'uk-badge-success' : '';
|
||||
var callback = confidentialSelection.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('h3', {style: {width: '80px'}}, teamName)
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
confidentialSelection.scoreInput = function(score, activatedScores){
|
||||
var isActive = _.includes(activatedScores(), score);
|
||||
var class_ = isActive ? 'uk-badge-success' : '';
|
||||
var callback = confidentialSelection.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('h3', {style: {width: '80px'}}, score)
|
||||
);
|
||||
};
|
||||
|
||||
confidentialSelection.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', [
|
||||
confidentialSelection.teamInput('Bleu', 'bleu', model.activatedTeams),
|
||||
confidentialSelection.teamInput('Rouge', 'rouge', model.activatedTeams),
|
||||
confidentialSelection.teamInput('Jaune', 'jaune', model.activatedTeams),
|
||||
confidentialSelection.teamInput('Gris', 'gris', model.activatedTeams),
|
||||
]))
|
||||
);
|
||||
};
|
||||
|
||||
confidentialSelection.chooseScore = function(model){
|
||||
return m('form.uk-grid', {style: {'margin-top': '1em'}},
|
||||
m('div.uk-width-1-6', m('label', m('b', 'Score'))),
|
||||
m('div.uk-width-5-6',
|
||||
m('div.uk-grid', [
|
||||
confidentialSelection.scoreInput(1, model.activatedScores),
|
||||
confidentialSelection.scoreInput(2, model.activatedScores),
|
||||
confidentialSelection.scoreInput(3, model.activatedScores),
|
||||
confidentialSelection.scoreInput(4, model.activatedScores),
|
||||
confidentialSelection.scoreInput(5, model.activatedScores)
|
||||
]))
|
||||
);
|
||||
};
|
||||
|
||||
confidentialSelection.controller = function(model){
|
||||
return model;
|
||||
};
|
||||
|
||||
confidentialSelection.view = function(model){
|
||||
return m('div', [
|
||||
confidentialSelection.chooseTeams(model),
|
||||
confidentialSelection.chooseScore(model)
|
||||
]);
|
||||
};
|
||||
|
||||
|
||||
var confidentialTable = {};
|
||||
|
||||
confidentialTable._sortFunction = function(sortingElm){
|
||||
|
||||
};
|
||||
|
||||
confidentialTable._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);
|
||||
};
|
||||
|
||||
confidentialTable.controller = function(model){
|
||||
var players = m.prop([]);
|
||||
var ctrl = {};
|
||||
ctrl.model = model;
|
||||
|
||||
ctrl.players = m.request({method: "GET", url: "api/players.json"})
|
||||
.then(players);
|
||||
ctrl.sortPlayers = function(){
|
||||
ctrl.players(confidentialTable._sortPlayers(ctrl.model.sorting, ctrl.players()));
|
||||
};
|
||||
return ctrl;
|
||||
};
|
||||
|
||||
confidentialTable._getSortDict = function(sorting){
|
||||
var ret = {};
|
||||
_.each(sorting(), function(elm){
|
||||
ret[elm.key] = elm.direction;
|
||||
});
|
||||
return ret;
|
||||
|
||||
};
|
||||
|
||||
confidentialTable._isSortingUp = function(sorting, key){
|
||||
var dict = confidentialTable._getSortDict(sorting);
|
||||
return dict[key] === 1;
|
||||
};
|
||||
|
||||
confidentialTable._isSortingDown = function(sorting, key){
|
||||
var dict = confidentialTable._getSortDict(sorting);
|
||||
return dict[key] === -1;
|
||||
};
|
||||
|
||||
confidentialTable.arrows = function(sorting, key){
|
||||
var sortUp = confidentialTable._isSortingUp(sorting, key);
|
||||
var sortDown = confidentialTable._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: {}})
|
||||
);
|
||||
};
|
||||
|
||||
confidentialTable._setSorting = function(sorting, key){
|
||||
var newDirection = {key: key, direction: -1 * confidentialTable._getSortDict(sorting)[key]};
|
||||
var directions = _.filter(sorting(), function(o){
|
||||
return o.key != key;
|
||||
});
|
||||
sorting([newDirection].concat(directions));
|
||||
};
|
||||
|
||||
confidentialTable.tableHeader = function(sorting){
|
||||
var setSorting = function(key){
|
||||
return _.partial(confidentialTable._setSorting, sorting, key);
|
||||
};
|
||||
return m('thead',
|
||||
m('tr', [
|
||||
m('th', {onclick: setSorting('team')}, confidentialTable.arrows(sorting, 'team'), 'Équipe'),
|
||||
m('th', {onclick: setSorting('name')}, confidentialTable.arrows(sorting, 'name'), 'Nom'),
|
||||
m('th.uk-hidden-small', 'Courriel'),
|
||||
m('th.uk-hidden-small', 'Téléphone'),
|
||||
m('th', {onclick: setSorting('score')}, confidentialTable.arrows(sorting, 'score'), 'Cote')
|
||||
]));
|
||||
};
|
||||
|
||||
confidentialTable.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(' '));
|
||||
};
|
||||
|
||||
confidentialTable.playerRow = function(player){
|
||||
return m('tr',[
|
||||
m('td', confidentialTable.getPlayerTeamIcon(player)),
|
||||
m('td', player.name),
|
||||
m('td.uk-hidden-small', player.email),
|
||||
m('td.uk-hidden-small', player.tel),
|
||||
m('td', player.score)
|
||||
]);
|
||||
};
|
||||
|
||||
confidentialTable.onlyPlayerOfTeams = function(visibleTeams){
|
||||
return function(player){
|
||||
return _.includes(visibleTeams, player.team);
|
||||
};
|
||||
};
|
||||
|
||||
confidentialTable.onlyPlayerOfScore = function(visibleScores){
|
||||
return function(player){
|
||||
return _.includes(visibleScores, player.score);
|
||||
};
|
||||
};
|
||||
|
||||
confidentialTable.tableBody = function(players, visibleTeams, activatedScores){
|
||||
return m('tbody',
|
||||
_(players)
|
||||
.filter(confidentialTable.onlyPlayerOfTeams(visibleTeams))
|
||||
.filter(confidentialTable.onlyPlayerOfScore(activatedScores))
|
||||
.map(confidentialTable.playerRow).value()
|
||||
);
|
||||
};
|
||||
|
||||
confidentialTable.view = function(ctrl){
|
||||
ctrl.sortPlayers();
|
||||
return m('table.uk-table.uk-table-hover.uk-table-striped',
|
||||
confidentialTable.tableHeader(ctrl.model.sorting),
|
||||
confidentialTable.tableBody(ctrl.players(),
|
||||
ctrl.model.activatedTeams(),
|
||||
ctrl.model.activatedScores()
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
var confidentialPageBody = {};
|
||||
|
||||
confidentialPageBody.controller = function(){
|
||||
var model = {};
|
||||
model.activatedTeams = m.prop(['bleu', 'rouge', 'jaune', 'gris']);
|
||||
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}]);
|
||||
return model;
|
||||
};
|
||||
|
||||
confidentialPageBody.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(confidentialSelection, model),
|
||||
m.component(confidentialTable, model),
|
||||
]));
|
||||
};
|
||||
|
||||
define(['m', '_', 'teams', 'views/loginPage', 'views/playersPage', 'views/topNavBar', 'views/footer'], function (m, _ , teams, loginPage, playersPage, topNavBar, footer) {
|
||||
|
||||
var confidentialPage = {};
|
||||
|
||||
@@ -233,7 +7,7 @@ define(['m', '_', 'teams', 'views/loginPage', 'views/topNavBar', 'views/footer']
|
||||
if(!window.secret){
|
||||
body = loginPage;
|
||||
}else{
|
||||
body = confidentialPageBody;
|
||||
body = playersPage;
|
||||
}
|
||||
return [
|
||||
m.component(topNavBar),
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
define(['m', '_', 'teams', 'views/topNavBar', 'views/footer'], function (m, _ , teams, topNavBar, footer) {
|
||||
define(['m', '_'], function (m, _) {
|
||||
|
||||
var loginPage = {};
|
||||
loginPage.salt = "9'D)E@E{DSq[|l2bq!v";
|
||||
|
||||
@@ -0,0 +1,228 @@
|
||||
define(['m', '_', 'teams'], function (m, _ , 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('h3', {style: {width: '80px'}}, 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('h3', {style: {width: '80px'}}, score)
|
||||
);
|
||||
};
|
||||
|
||||
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', [
|
||||
playersSelectionBar.teamInput('Bleu', 'bleu', model.activatedTeams),
|
||||
playersSelectionBar.teamInput('Rouge', 'rouge', model.activatedTeams),
|
||||
playersSelectionBar.teamInput('Jaune', 'jaune', model.activatedTeams),
|
||||
playersSelectionBar.teamInput('Gris', 'gris', model.activatedTeams),
|
||||
]))
|
||||
);
|
||||
};
|
||||
|
||||
playersSelectionBar.chooseScore = function(model){
|
||||
return m('form.uk-grid', {style: {'margin-top': '1em'}},
|
||||
m('div.uk-width-1-6', m('label', m('b', 'Score'))),
|
||||
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.controller = function(model){
|
||||
return model;
|
||||
};
|
||||
|
||||
playersSelectionBar.view = function(model){
|
||||
return m('div', [
|
||||
playersSelectionBar.chooseTeams(model),
|
||||
playersSelectionBar.chooseScore(model)
|
||||
]);
|
||||
};
|
||||
|
||||
|
||||
var playersTable = {};
|
||||
|
||||
playersTable._sortFunction = function(sortingElm){
|
||||
|
||||
};
|
||||
|
||||
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.controller = function(model){
|
||||
var players = m.prop([]);
|
||||
var ctrl = {};
|
||||
ctrl.model = model;
|
||||
|
||||
ctrl.players = m.request({method: "GET", url: "api/players.json"})
|
||||
.then(players);
|
||||
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.playerRow = function(player){
|
||||
return m('tr',[
|
||||
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.onlyPlayerOfTeams = function(visibleTeams){
|
||||
return function(player){
|
||||
return _.includes(visibleTeams, player.team);
|
||||
};
|
||||
};
|
||||
|
||||
playersTable.onlyPlayerOfScore = function(visibleScores){
|
||||
return function(player){
|
||||
return _.includes(visibleScores, player.score);
|
||||
};
|
||||
};
|
||||
|
||||
playersTable.tableBody = function(players, visibleTeams, activatedScores){
|
||||
return m('tbody',
|
||||
_(players)
|
||||
.filter(playersTable.onlyPlayerOfTeams(visibleTeams))
|
||||
.filter(playersTable.onlyPlayerOfScore(activatedScores))
|
||||
.map(playersTable.playerRow).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()
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
var playersPage = {};
|
||||
|
||||
playersPage.controller = function(){
|
||||
var model = {};
|
||||
model.activatedTeams = m.prop(['bleu', 'rouge', 'jaune', 'gris']);
|
||||
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}]);
|
||||
return model;
|
||||
};
|
||||
|
||||
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),
|
||||
]));
|
||||
};
|
||||
|
||||
return playersPage;
|
||||
});
|
||||
Reference in new issue
Block a user