website/script/views/calendarPage.js

define(['m', '_', 'util', 'resultParser', 'teams', 'views/topNavBar', 'views/footer', 'images/rain.svg'], function(m, _, util, resultParser, teams, topNavBar, footer, rainSvg) {
    var statsView = {};

    statsView.controller = function(){
        var games = m.prop([]);
        return m.request({method: "GET", url: "api/resultats.json"})
               .then(games)
               .then(resultParser.getStats);
    };

    statsView.getStatRow = function(teamStats){
        var formatStat = function(n){
            return teamStats.gamePlayed === 0 ? '-' : n;
        };
        return m('tr', [
            m('td', teamStats.team),
            m('td', teamStats.gamePlayed),
            m('td', formatStat(teamStats.victories)),
            m('td', formatStat(teamStats.defeats)),
            m('td', formatStat(teamStats.draws)),
            m('td', formatStat(teamStats.pointsFor)),
            m('td', formatStat(teamStats.pointsAgaint)),
            m('td', formatStat(teamStats.pointsFor - teamStats.pointsAgaint)),
            m('td', formatStat(teamStats.points))
        ]);
    };

    statsView.isStatForValidTeam = function(stat){
        var teamNames = _.map(teams.teams(), 'name');
        return _.includes(teamNames, stat.team);
    }


    statsView.mainTable = function(stats){
        var orderedStats = _.reverse(_.sortBy(stats, ['victories', 'pointsFor']));
        return m('table.uk-table.uk-table-hover.uk-table-striped',[
            m('thead', m('tr', [
                m('th', 'Équipes'),
                m('th', 'PJ'),
                m('th', 'V'),
                m('th', 'D'),
                m('th', 'N'),
                m('th', 'PP'),
                m('th', 'PC'),
                m('th', 'DIF'),
                m('th', 'PTS')
            ])),
            m('tbody', _(orderedStats)
                        .filter(statsView.isStatForValidTeam)
                        .map(statsView.getStatRow)
                        .value())
        ]);
    };

    statsView.legend = function(){
        var items = ["PJ : Parties joués", "V : Victoire",  "D : Défaite",
                     "N : Nul", "PP : Points pour", "PC : Points contre",
                     "DIF : Diférenciel","PTS : Points"];
        return  m('ul.uk-subnav.uk-subnav-line.uk-flex-center',[
                    _.map(items, function(itm){
                        return m('li', itm);
                    })
                ]);
    };

    statsView.view = function(stats){
        return  m('div.uk-grid',
                    m('div.uk-width-medium-1-1.uk-width-large-1-1.uk-container-center',[
                        m('h2', 'Classement 2017'),
                        statsView.mainTable(stats()),
                        statsView.legend()
                    ]));

    };

    var tabView = {};

    tabView.view = function(vnode, isPlayoff){
        return m('div.uk-margin', m('h2', 'Calendrier 2017'),
         m('ul.uk-tab', [
            m('li', {'class': isPlayoff || 'uk-active'},
                m('a', {href: '#/calendrier'}, 'Saison')),
            m('li', {'class': isPlayoff && 'uk-active'},
                m('a', {href: '#/calendrier/playoff'}, 'Éliminatoire'))
        ]));
    };

    var playoffView = {};

    playoffView.line = function(x1, y1, x2, y2){
        return m('line', {'x1': x1,
                   'y1': y1,
                   'x2': x2,
                   'y2': y2,
                    style: 'stroke:rgb(255,0,0);stroke-width:2'})
    }

    playoffView.horizontalLine = function(x1, x2, y){
        return playoffView.line(x1, y, x2, y);
    };

    playoffView.view = function(){
        var width = 600;
        var height = 600;
        var padding = 40;
        return m('div',
            m('svg', {width: width, height: height},
                playoffView.horizontalLine(padding, width/2 - padding, height/3),
                playoffView.horizontalLine(padding, width/2 - padding, 2 * height/3)
        ));
    };

    var schedulView = {};

    schedulView.controller = function(){
        var games = m.prop([]);
        return m.request({method: "GET", url: "api/resultats.json"})
               .then(games)
               .then(resultParser.getNightGames);
    };

    schedulView._getTeamTag = function(teamName){
        var teamColor = teams.getTeamColor(teamName);
        return [
            m('i.fa.fa-flag', {style: {color: teamColor}}),
            m('span', ' ' + teamName)
        ];
    };

    schedulView._asGamePoints = function(points){
        return !_.isNumber(points) ? '-' : points + '';
    };

    schedulView._gameName = function(game){
        if(game.rain){
            return [rainSvg('1.5em'), " ", game.time];
        }
        return [game.time, " ", m('span', {style: {visibility: 'hidden'}}, rainSvg('1.5em'))];
    };

    schedulView._gameRow = function(game){

        return m('tr',[
            m('td', schedulView._gameName(game)),
            m('td', schedulView._getTeamTag(game.home)),
            m('td', schedulView._asGamePoints(game.home_points)),
            m('td', 'vs'),
            m('td', schedulView._getTeamTag(game.away)),
            m('td', schedulView._asGamePoints(game.away_points))
        ]);
    };

    schedulView._gameView = function(gameNight){
        return m('div', [m('h3', util.formatDate(gameNight.jsDate)),
            m('table.uk-table.uk-table-hover.uk-table-condensed.uk-table-striped',
                m('tbody',[
                    _.map(gameNight.games, schedulView._gameRow),
                ])
            )
        ]);

    };

    schedulView.view = function(games){
        return m('div.uk-grid',
                   m('div.uk-width-large-3-5.uk-width-medium-1-1',
                    _.concat([m('h2', 'Calendrier 2017')], _.map(games(), schedulView._gameView))));
    };

    calendarPage = {};

    calendarPage.view  = function(vnode){
        var toto = vnode;
        var isPlayoff = window.location.hash.endsWith('playoff');
        var main = isPlayoff ? m.component(playoffView) : m.component(schedulView);
        return [m.component(topNavBar),
                m('div.uk-grid.uk-margin-top.uk-margin-bottom',
                    m('div.uk-width-large-3-5.uk-width-medium-4-5.uk-width-small-1-1.uk-container-center',[
                        m.component(statsView),
                        m.component(tabView, isPlayoff),
                        main
                    ])),
                m.component(footer)];
    };

    return calendarPage;
});