stared to use mithril

script/calendarPage.js

@@ -0,0 +1,130 @@
+(function() {
+'use strict';
+
+var statsView = {};
+
+statsView.controller = function(){
+    var games = m.prop([]);
+    return m.request({method: "GET", url: "/api/resultats.json"})
+           .then(games)
+           .then(window.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', "? ")
+    ]);
+};
+
+statsView.mainTable = function(stats){
+    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', _.map(stats, statsView.getStatRow))
+    ]);
+};
+
+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-1-1',[
+                    m('h2', 'Classement 2016'),
+                    statsView.mainTable(stats()),
+                    statsView.legend()
+                ]));
+
+};
+
+
+var schedulView = {};
+window.schedulView = schedulView;
+
+schedulView.controller = function(){
+    var games = m.prop([]);
+    return m.request({method: "GET", url: "/api/resultats.json"})
+           .then(games)
+           .then(window.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._gameRow = function(game){
+    return m('tr',[
+        m('td', game.time),
+        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', gameNight.date),
+        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-3-5',
+                _.concat([m('h2', 'Calendrier 2016')], _.map(games(), schedulView._gameView))));
+};
+
+
+window.calendarPage = {};
+
+window.calendarPage.view  = function(){
+    return [m.component(window.topNavBar),
+            m('div.uk-grid',
+                m('div.uk-width-3-5.uk-push-1-5',[
+                    m.component(statsView),
+                    m.component(schedulView)])),
+            m.component(window.footer)];
+};
+
+}).call(this);

script/mainPage.js

@@ -0,0 +1,130 @@
+(function() {
+'use strict';
+
+var mainPageLogo = {};
+
+mainPageLogo.view = function(){
+    return m('div.uk-grid', [
+        m('div.uk-width-1-3.uk-push-1-3', [
+            m('div.uk-cover-background', {style: 'height: 500px; background-size: 500px; background-image: url(images/phenix_logo.png);'})
+        ])
+    ]);
+};
+
+var mainPageNews = {};
+
+mainPageNews.view = function(){
+    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', 'Nouvelles')
+    ], window.loremIpsum());
+};
+
+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._getGamesRow = function(game){
+    return m('tr', [
+        m('td', 'small txt'),
+        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',
+                m('tbody', [
+                    nextGameDaySchedule._getTableHead(),
+                    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', 'Horaire'),
+        m.component(nextGameDaySchedule)
+    ]);
+};
+
+var mainMap = {};
+
+mainMap.getMap = function(){
+    var iframeUrl = "http://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.view = function(){
+    return m('div.uk-grid',[
+        m('div.uk-width-1-5'),
+        m('div.uk-width-1-5', mainPageNews.view()),
+        m('div.uk-width-1-5', mainPageSchedule.view()),
+        m('div.uk-width-1-5', mainMap.view())
+    ]);
+};
+
+window.mainPage = {};
+
+window.mainPage.view  = function(){
+    return [window.topNavBar.view(),
+            mainPageLogo.view(),
+            mainPageBottom.view(),
+            window.footer.view()];
+};
+
+}).call(this);

script/phenix.js

@@ -0,0 +1,27 @@
+(function() {
+'use strict';
+window.loremIpsum = function(){
+    return "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a"+
+           " diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula "+
+           "ac quam viverra nec consectetur ante hendrerit. Donec et mollis"+
+           " dolor. Praesent et diam eget libero egestas mattis sit amet"+
+           " vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia "+
+           "consectetur. Donec ut libero sed arcu vehicula ultricies a non"+
+           " tortor. Lorem ipsum dolor sit amet, consectetur adipiscing "+
+           "elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a "+
+           "semper sed, adipiscing id dolor. Pellentesque auctor nisi id "+
+           "magna consequat sagittis. Curabitur dapibus enim sit amet elit "+
+           "pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero "+
+           "in urna ultrices accumsan. Donec sed od";
+};
+
+
+m.route.mode = "hash";
+
+//define a route
+m.route(document.body, "/", {
+    "/": window.mainPage,
+    "/calendrier": window.calendarPage,
+});
+
+}).call(this);

script/results.js

@@ -0,0 +1,83 @@
+(function() {
+'use strict';
+
+
+window.teams = {};
+
+teams.getTeamColor = function(teamName){
+    if(teamName == 'jaune'){
+        return 'yellow';
+    }
+    if(teamName == 'rouge'){
+        return 'red';
+    }
+    if(teamName == 'bleu'){
+        return 'bleu';
+    }
+    if(teamName == 'gris'){
+        return 'grey';
+    }
+};
+
+window.resultParser = {};
+
+resultParser._addJSDateToResult = function(res){
+    var date = res.date.split('/');
+    var time = res.time.split(':');
+    res.jsDate = new Date(
+        Number(date[0]),
+        Number(date[1]) - 1,
+        Number(date[2]),
+        Number(time[0]),
+        Number(time[1])
+    );
+    return res;
+};
+
+resultParser.parseResults = function(rawResults){
+    rawResults = _.map(rawResults, resultParser._addJSDateToResult);
+    rawResults = _.map(rawResults, resultParser._addCustomStyle);
+    return rawResults;
+};
+
+resultParser.getNightGames = function(rawResults){
+    var ret = {};
+    _.each(resultParser.parseResults(rawResults), function(res){
+        if(_.has(ret, res.date)){
+            ret[res.date].push(res);
+        }else{
+            ret[res.date] = [res];
+        }
+    });
+    return _.map(ret, function(games, date){
+        return {date: date, games: games};
+    });
+};
+
+resultParser._getAllTeams = function(rawResults){
+    var homeTeams = _.map(rawResults, 'home');
+    var awayTeams = _.map(rawResults, 'away');
+    return _.uniq(_.concat(homeTeams, awayTeams));
+};
+
+
+
+resultParser._getTeamStats = function(rawResults, team){
+    var ret = {team: team, gamePlayed: 0};
+    _.each(rawResults, function(res){
+        if((team != res.home && team != res.away) || !_.isNumber(res.home_points)){
+            return;
+        }
+        ret.gamePlayed += 1;
+    });
+    return ret;
+};
+
+
+resultParser.getStats = function(rawResults){
+    var allTeams = resultParser._getAllTeams(rawResults);
+    var getTeamStats = _.partial(resultParser._getTeamStats, rawResults);
+    return _.map(allTeams, getTeamStats);
+};
+
+}).call(this);

script/structure.js

@@ -0,0 +1,65 @@
+(function() {
+'use strict';
+
+var topNavBar = {};
+window.topNavBar = topNavBar;
+
+topNavBar._urlMapping = {
+    acceuil: 'Acceuil',
+    calendrier: 'Calendrier',
+    reglement: 'Règlement',
+    photos: 'Photos',
+    membre: 'Membre',
+    contact: 'Nous Joindre'
+};
+
+var facebookLink = function(){
+    return m('a[href="https://www.facebook.com/LigueDeBalleLesPhenix"]',
+               m('i.fa.fa-facebook-square')
+           );
+};
+
+topNavBar.controller = function(){
+    return {id: m.route.param("page")};
+};
+
+topNavBar._getUrlForId = function(id_){
+    return  '#/' + id_;
+};
+
+topNavBar._isActive = function(id_){
+    return id_ == m.route.param("page");
+};
+
+topNavBar._getItem = function(name, id){
+    var class_ = topNavBar._isActive(id) ? 'uk-active' : 'uk-parent';
+    var url = topNavBar._getUrlForId(id);
+    return m("li", {class: class_}, [m("a",{href: url},  name)]);
+};
+
+topNavBar.view = function(controller){
+    return m("nav.uk-navbar",
+              [m("div.uk-navbar-content.uk-navbar-center", [
+                  m("ul.uk-navbar-nav",
+                     m('li.uk-parent', facebookLink()),
+                    _.map(topNavBar._urlMapping, topNavBar._getItem)
+                    )
+    ])]);
+};
+
+var footer = {};
+window.footer = footer;
+
+footer.view = function(){
+    return m('footer.uk-grid.ph-footer', {style: {padding: '80px'}},
+        m('div.uk-container.uk-container-center.uk-text-center', [
+            m('div.uk-panel', 'Ligue de balle les Phénix... pour le plaisir de jouer!'),
+            m('ul.uk-subnav.uk-subnav-line.uk-flex-center',
+                m('li', m('a[href="mailto:info@ballephenix.com"]', 'info@ballephenix.com'))),
+            m('h1', facebookLink())
+        ])
+    );
+};
+
+
+}).call(this);