stared to use mithril

bower.json

@@ -19,6 +19,7 @@
   ],
   "dependencies": {
     "uikit": "~2.24.3",
-    "mithril": "~0.2.1"
+    "mithril": "~0.2.1",
+    "lodash": "~4.2.1"
   }
 }

data/resultats.yaml

@@ -0,0 +1,53 @@
+---
+
+-
+    date: 2016/06/02  # year/month/day
+    time: "18:00"
+    name: Jeudi 2 juin
+    home: gris
+    away: jaune
+    home_points: ~
+    away_points: ~
+
+-
+    date: 2016/06/02  # year/month/day
+    time: "20:30"
+    name: Jeudi 2 juin
+    home: bleu
+    away: rouge
+    home_points: ~
+    away_points: ~
+-
+    date: 2016/06/09  # year/month/day
+    time: "18:00"
+    name: Jeudi 9 juin
+    home: bleu
+    away: jaune
+    home_points: ~
+    away_points: ~
+
+-
+    date: 2016/06/09  # year/month/day
+    time: "20:30"
+    name: Jeudi 9 juin
+    home: gris
+    away: rouge
+    home_points: ~
+    away_points: ~
+-
+    date: 2016/06/16  # year/month/day
+    time: "18:00"
+    name: Jeudi 16 juin
+    home: bleu
+    away: jaune
+    home_points: ~
+    away_points: ~
+
+-
+    date: 2016/06/16  # year/month/day
+    time: "20:30"
+    name: Jeudi 16 juin
+    home: gris
+    away: rouge
+    home_points: ~
+    away_points: ~

gulpfile.js

@@ -3,6 +3,7 @@ var bower = require('gulp-bower');
 var help = require('gulp-task-listing');
 var clean = require('gulp-clean');
 var sass = require('gulp-sass');
+var yaml = require('gulp-yaml');
 var webserver = require('gulp-webserver');
 
 gulp.task('help', help);
@@ -25,17 +26,22 @@ gulp.task('clean', function(){
         .pipe(clean());
 });
 
-gulp.task('default', ['bower', 'sass']);
+gulp.task('compile-results', function(){
+    return gulp.src('data/*.yaml')
+    .pipe(yaml({safe: true}))
+    .pipe(gulp.dest('./api'));
+});
+
+gulp.task('default', ['bower', 'sass', 'compile-results']);
 
 gulp.task('webserver', function(){
     return gulp.src('.')
     .pipe(webserver({
-        livereload: true,
+        livereload: false,
-        directoryListing: true,
+        directoryListing: false,
-        open: 'index.html'
     }));
 });
 
-gulp.task('dev', ['bower', 'sass', 'webserver'], function(){
+gulp.task('dev', ['default', 'webserver'], function(){
     return gulp.watch('./scss/*.scss', ['sass']);
 });

index.html

@@ -6,110 +6,16 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="css/style.css" />
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
-    <script src="lib/mithril/mithril.min.js"></script>
 
     </head>
     <body>
+        <script src="lib/mithril/mithril.min.js"></script>
+        <script src="lib/lodash/dist/lodash.min.js"></script>
 
-<nav class="uk-navbar">
+        <script src="script/results.js"></script>
-    <div class="uk-navbar-content uk-navbar-center">
+        <script src="script/structure.js"></script>
-        <ul class="uk-navbar-nav">
+        <script src="script/mainPage.js"></script>
-            <li class="uk-parent">
+        <script src="script/calendarPage.js"></script>
-                <a href="https://www.facebook.com/LigueDeBalleLesPhenix">
+        <script src="script/phenix.js"></script>
-                    <i class="fa fa-facebook-square"></i>
-                </a>
-            </li>
-            <li class="uk-active"><a href="index.html">Acceuil</a></li>
-            <li class="uk-parent"><a href="calendrier.html">Calendrier</a></li>
-            <li class="uk-parent"><a>Règlements</a></li>
-            <li class="uk-parent"><a>Photos</a></li>
-            <li class="uk-parent"><a>Membre</a></li>
-            <li class="uk-parent"><a>Nous Joindre</a></li>
-
-        </ul>
-    </div>
-</nav>
-
-<div class="uk-grid">
-    <div class="uk-width-1-3"></div>
-    <div class="uk-width-1-3">
-        <div class="uk-cover-background"
-             style="height: 500px; background-size: 500px; background-image: url(/images/phenix_logo.png);">
-         </div>
-    </div>
-    <div class="uk-width-1-3"></div>
-</div>
-
-<div class="uk-grid">
-    <div class="uk-width-1-5"></div>
-    <div class="uk-width-1-5">
-        <div class="uk-panel uk-panel-box">
-            <div class="uk-panel-badge uk-badge">
-                <i class="fa fa-newspaper-o"></i>
-            </div>
-            <h3 class="uk-panel-title">Nouvelles</h3>
-            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
-        </div>
-    </div>
-    <div class="uk-width-1-5">
-        <div class="uk-panel uk-panel-box">
-            <div class="uk-panel-badge uk-badge"><i class="fa fa-clock-o"></i> </div>
-            <h3 class="uk-panel-title">Horaire</h3>
-                <table class="uk-table">
-                    <thead>
-                        <tr>
-                            <th>Date</th>
-                            <th>Heure</th>
-                            <th>Visiteur</th>
-                            <th>Receveur</th>
-                        </tr>
-                    </thead>
-                    <tr>
-                        <td>30 fevrier 2016</td>
-                        <td>18h60</td>
-                        <td>Mauve</td>
-                        <td>Noir</td>
-                    </tr>
-                    <tr>
-                        <td>30 fevrier 2016</td>
-                        <td>18h60</td>
-                        <td>Mauve</td>
-                        <td>Noir</td>
-                    </tr>
-                </table>
-        </div>
-    </div>
-    <div class="uk-width-1-5">
-        <div class="uk-panel uk-panel-box">
-            <div class="uk-panel-badge uk-badge"><i class="fa fa-map-o"></i></div>
-            <h3 class="uk-panel-title">Parc</h3>
-                <div style="width: 100%; height: 300px; background-color: red;"></div>
-        </div>
-    </div>
-    <div class="uk-width-1-5"></div>
-</div>
-
-<footer class="uk-grid ph-footer" style="padding: 80px;">
-    <div class="uk-container uk-container-center uk-text-center">
-            <div class="uk-panel">
-                Ligue de balle les Phénix &hellip; pour le plaisir de jouer!
-            </div>
-            <ul class="uk-subnav uk-subnav-line uk-flex-center">
-                <li><a href="mailto:info@ballephenix.com">info@ballephenix.com</a></li>
-            </ul>
-            <h1>
-                <a href="https://www.facebook.com/LigueDeBalleLesPhenix">
-                    <i class="fa fa-facebook-square"></i>
-                </a>
-            </h1>
-
-    </div>
-</footer>
-
-
-
-
-
-
     </body>
 </html>

package.json

@@ -11,7 +11,8 @@
     "gulp-task-listing": "^1.0.1"
   },
   "devDependencies": {
-    "gulp-webserver": "^0.9.1"
+    "gulp-webserver": "^0.9.1",
+    "gulp-yaml": "^1.0.1"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

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);