diff --git a/script/views/confidentialPage.js b/script/views/confidentialPage.js index 44f5516..9cb9bc9 100644 --- a/script/views/confidentialPage.js +++ b/script/views/confidentialPage.js @@ -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), diff --git a/script/views/loginPage.js b/script/views/loginPage.js index c4e9e38..2c86de0 100644 --- a/script/views/loginPage.js +++ b/script/views/loginPage.js @@ -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"; diff --git a/script/views/playersPage.js b/script/views/playersPage.js new file mode 100644 index 0000000..d29ee74 --- /dev/null +++ b/script/views/playersPage.js @@ -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; +});