website/script/views/mainPage.js

define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer', 'articles/articles'], function (m, _ , util, resultParser, topNavBar, footer, articles) {
    var mainPageLogo = {};

    mainPageLogo.view = function(){
        return m('div.uk-grid', [
            m('div.uk-large-1-3.uk-medium-2-3.uk-container-center', [
                m('div.uk-cover-background.uk-container-center.uk-margin-left.uk-margin-top',{style: 'height:300px; width: 300px; background-size: 300px; background-image: url(images/logosansfond.JPG);'})
            ])
        ]);
    };

    var mainPageNews = {};

    mainPageNews.view = function(){
        var article = _.get(articles, 0, {});
        return m('div.uk-panel.uk-panel-box',[
            m('div.uk-panel-badge.uk-badge', [
                m('i.fa.fa-newspaper-o')
            ]),
            m('h3.uk-panel-title', m('a.uk-link-muted', {href: '#/nouvelles'}, article.title)),
            m('p', article.smallBody || article.body)
        ]);
    };

    var nextGameDaySchedule = {};

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

    nextGameDaySchedule._getTableHead = function(){
        return m('thead', m('tr', [
                    m('td', 'Date'),
                    m('td', 'Heure'),
                    m('td', 'Visiteur'),
                    m('td', 'Receveur')
                ]));
    };

    nextGameDaySchedule._responsoveText = function(largeText, smallText){
        return [m('span.uk-visible-large', largeText),
                m('span.uk-hidden-large', smallText)];
    };

    nextGameDaySchedule._getGamesRow = function(game){
        return m('tr', [
            m('td', nextGameDaySchedule._responsoveText(util.formatDate(game.jsDate),
                                                        util.formatDateSmall(game.jsDate))),
            m('td', game.time),
            m('td', game.away),
            m('td', game.home)
        ]);
    };

    nextGameDaySchedule._getGamesRows = function(games){
        return _.map(games(), nextGameDaySchedule._getGamesRow);
    };

    nextGameDaySchedule.view = function(games){
        return  m('table.uk-table.uk-table-hover.uk-table-striped.uk-table-condensed',[
                    nextGameDaySchedule._getTableHead(),
                    m('tbody',
                        nextGameDaySchedule._getGamesRows(games)
                    )]);
    };

    var mainPageSchedule = {};

    mainPageSchedule.view = function(){
        return m('div.uk-panel.uk-panel-box',[
            m('div.uk-panel-badge.uk-badge', m('i.fa.fa-clock-o')),
            m('h3.uk-panel-title', m('a.uk-link-muted', {href: '#/calendrier'}, 'Horaire')),
            m.component(nextGameDaySchedule)
        ]);
    };

    var mainMap = {};

    mainMap.getMap = function(){
        var iframeUrl = "//www.openstreetmap.org/export/embed.html?bbox=-73.55889558792114%2C45.53089890181621%2C-73.55181455612183%2C45.53426212742867&layer=mapnik";
        var externalLink = "http://www.openstreetmap.org/#map=18/45.53258/-73.55536";
        var iframeParams = {
            style: {border: '1px solid black', 'min-height': '300px'},
            width: '100%',
            // height: '100%',
            frameborder: 0,
            scrolling: 'no',
            marginheight: 0,
            src: iframeUrl
        };
        return [
            m('iframe', iframeParams),
            m('br'),
            m('small', m('a', {href: externalLink}, 'Voir la carte'))
        ];
    };

    mainMap.view = function(){
        return m('div.uk-panel.uk-panel-box',[
            m('div.uk-panel-badge.uk-badge', [
                m('i.fa.fa-map-o')
            ]),
            m('h3.uk-panel-title', 'Parc Walter-Stewart'),
            mainMap.getMap()
        ]);
    };

    var mainPageBottom = {};

    mainPageBottom.regularSizeView = function(){
        return m('div.uk-grid.uk-visible-large.uk-grid-match', [
            m('div.uk-width-large-1-3.uk-width-medium-1-3', m.component(mainPageNews)),
            m('div.uk-width-large-1-3.uk-width-medium-1-3', m.component(mainPageSchedule)),
            m('div.uk-width-large-1-3.uk-width-medium-1-3', m.component(mainMap))
        ]);
    };

    mainPageBottom.mediumSizeView = function(){
        return  m('div.uk-visible-medium', [
                    m('div.uk-grid.uk-grid-match', [
                        m('div.uk-width-medium-1-2', [m.component(mainPageNews)]),
                        m('div.uk-width-medium-1-2', [m.component(mainPageSchedule)]),
                    ]),
                    m('div.uk-grid',
                        m('div.uk-width-medium-1-1', m.component(mainMap))
                    )
        ]);
    };

    mainPageBottom.smallSizeView = function(){
        return  m('div.uk-visible-small',
                  [
                    m('div.uk-grid', m('div.uk-width-small-1-1', m.component(mainPageNews))),
                    m('div.uk-grid', m('div.uk-width-small-1-1', m.component(mainPageSchedule))),
                    m('div.uk-grid', m('div.uk-width-small-1-1', m.component(mainMap)))
              ]);
    };

    mainPageBottom.view = function(){
        return  m('div.uk-margin-top.uk-margin-bottom.uk-grid',
                    m('div.uk-width-large-3-5.uk-width-medium-4-5.uk-width-small-1-1.uk-container-center', [
                        mainPageBottom.regularSizeView(),
                        mainPageBottom.mediumSizeView(),
                        mainPageBottom.smallSizeView()
                    ])
        );
    };

    var mainPage = {};

    mainPage.view  = function(){
        return [
                m.component(topNavBar),
                m.component(mainPageLogo),
                m.component(mainPageBottom),
                m.component(footer)
            ];
    };

    return mainPage;
});