added first news!

bower.json

@@ -21,6 +21,7 @@
     "uikit": "~2.24.3",
     "mithril": "~0.2.1",
     "lodash": "~4.2.1",
-    "almond": "~0.3.1"
+    "almond": "~0.3.1",
+    "requirejs": "~2.1.22"
   }
 }

data/articles/inscription.toml.md

@@ -0,0 +1,59 @@
+[title]
+innerMarkdown = """
+## Inscription 2016!
+"""
+
+[meta]
+innerMarkdown = """
+Lundi 14 mars 2016
+"""
+
+[body]
+innerMarkdown = """
+
+Bonjour à tous les phénixiens phénixiennes.
+
+Eh bien oui l'hiver tire à ça fin et il sera bientôt temps de sortir gants et
+batons (en bon français mites et battes) pour jouer à notre sport préféré:
+la balle-molle.
+
+
+**L'inscription aura lieu le vendredi 18 mars 2016 de 19h30 à 21h30 à la [taverne
+le normandie](http://bit.ly/1pmNWu8)**; situé au [1295 rue amherst,
+Montréal](http://bit.ly/1QUC6Ou). Il s'agit de l'endroit ou nous avons fêté la
+fin de la dernière saison.
+
+
+Le prix de l'inscription est de 110$ incluant la location du chandail au coût de
+10$.  La valeur de la location du chandail vous sera rendu en fin de saison
+lorsque vous le rendrez.
+
+Pour ceux et celles qui ne pourront être présent à l'inscription, vous pouvez
+vous inscrire par courrier.  Imprimez, remplissez et envoyez le formulaire
+avec le chèque.
+
+
+Nous avons très hâte de vous y voir et de fêter avec vous!!!
+
+
+Votre comité de balle les phénix.
+
+"""
+
+[smallBody]
+innerMarkdown = """
+Bonjour à tous les phénixiens phénixiennes.
+
+Eh bien oui l'hiver tire à ça fin et il sera bientôt temps de sortir gants et
+batons (en bon français mites et battes) pour jouer à notre sport préféré:
+la balle-molle.
+
+
+**L'inscription aura lieu le vendredi 18 mars 2016 de 19h30 à 21h30 à la [taverne
+le normandie](http://bit.ly/1pmNWu8)**; situé au [1295 rue amherst,
+Montréal](http://bit.ly/1QUC6Ou). Il s'agit de l'endroit ou nous avons fêté la
+fin de la dernière saison.
+
+**[lire la suite ...](#/nouvelles)**
+
+"""

data/resultats.yaml

@@ -1,63 +1,17 @@
 ---
 
 -
-    date: 2016/06/02  # year/month/day
+    date: ~
-    time: "18:00"
+    time: ~
     home: gris
     away: jaune
-    home_points: 6
+    home_points: ~
-    away_points: 7
+    away_points: !
 
 -
-    date: 2016/06/02  # year/month/day
+    date: ~
-    time: "20:30"
+    time: ~
     home: bleu
     away: rouge
-    home_points: 9
-    away_points: 2
--
-    date: 2016/06/09  # year/month/day
-    time: "18:00"
-    home: bleu
-    away: jaune
-    home_points: 7
-    away_points: 6
-
--
-    date: 2016/06/09  # year/month/day
-    time: "20:30"
-    home: gris
-    away: rouge
-    home_points: 4
-    away_points: 8
--
-    date: 2016/06/16  # year/month/day
-    time: "18:00"
-    home: bleu
-    away: jaune
-    home_points: 4
-    away_points: 7
-
--
-    date: 2016/06/16  # year/month/day
-    time: "20:30"
-    home: gris
-    away: rouge
-    home_points: ~
-    away_points: ~
-
--
-    date: 2016/06/23  # year/month/day
-    time: "18:00"
-    home: bleu
-    away: jaune
-    home_points: ~
-    away_points: ~
-
--
-    date: 2016/06/23  # year/month/day
-    time: "20:30"
-    home: gris
-    away: rouge
     home_points: ~
     away_points: ~

gulpfile.js

@@ -2,11 +2,16 @@ var gulp = require('gulp');
 var bower = require('gulp-bower');
 var help = require('gulp-task-listing');
 var clean = require('gulp-clean');
+var toml = require('gulp-toml');
 var sass = require('gulp-sass');
 var rename = require("gulp-rename");
 var yaml = require('gulp-yaml');
 var template = require('gulp-template');
+var wrapper = require('gulp-wrapper');
+var rename = require("gulp-rename");
 var webserver = require('gulp-webserver');
+var marked = require('marked');
+var _ = require('lodash');
 
 gulp.task('help', help);
 
@@ -48,21 +53,53 @@ gulp.task('template-dev', function () {
         .pipe(gulp.dest('.'));
 });
 
+gulp.task('compile-articles', function(){
 
-gulp.task('default', ['bower', 'sass', 'compile-results']);
+    var transformArticle = function(article){
+        var isMarkdownKey = /markdown/i;
+        _.each(article, function(section, sectionName){
+            _.each(section, function(value, key){
+                if(isMarkdownKey.test(key) && _.isString(value)){
+                    section[key] = marked(value);
+                }
+            });
+        });
+        return JSON.stringify(article, null, 4);
+    };
+
+    gulp.src('data/articles/**/*.toml.md')
+        .pipe(toml({to: transformArticle}))
+        .pipe(wrapper({
+            header: "define(['m', '_'], function (m, _ ) {\nreturn ",
+            footer: ';\n});\n'
+        }))
+        .pipe(rename(function(path){
+            path.basename = path.basename.replace(/\.toml$/i, '');
+            path.extname = '.js';
+            return path;
+        }))
+        .pipe(gulp.dest('./script/articles/'));
+
+});
+
+gulp.task('default', ['bower', 'sass', 'compile-results', 'compile-articles']);
 
 gulp.task('prod', ['default', 'template-prod']);
 
 gulp.task('webserver', function(){
     return gulp.src('.')
     .pipe(webserver({
+        host: '0.0.0.0',
+        port: 2222,
         livereload: false,
         directoryListing: false,
     }));
 });
 
-gulp.task('dev', ['default', 'webserver', 'template-dev'], function(){
+
+gulp.task('dev', ['default', 'webserver', 'template-dev', 'bower'], function(){
     gulp.watch('./scss/*.scss', ['sass']);
     gulp.watch('*.tmpl.html', ['template-dev']);
+    gulp.watch('./data/articles/**/*', ['compile-articles']);
     return gulp.watch('./data/*.yaml', ['compile-results']);
 });

index.tmpl.html

@@ -1,9 +1,11 @@
 <!doctype html>
 <html>
     <head>
+        <meta charset="utf-8" >
         <title>Balle Phenix</title>
-        <meta charset="utf-8" />
+        <link rel="shortcut icon" href="/favicon.ico">
         <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">
     </head>

package.json

@@ -11,6 +11,11 @@
     "gulp-sass": "^2.1.1",
     "gulp-task-listing": "^1.0.1",
     "gulp-template": "^3.1.0",
+    "gulp-toml": "^0.1.1",
+    "gulp-wrap": "^0.11.0",
+    "gulp-wrapper": "^1.0.0",
+    "lodash": "^4.6.1",
+    "marked": "^0.3.5",
     "requirejs": "^2.1.22"
   },
   "devDependencies": {

script/articles/articles.js

@@ -0,0 +1,16 @@
+define(['m', 'articles/inscription'], function (m, inscription) {
+
+    var simplifyArticleStructure = function(article){
+        var ret = {};
+        _.each(article, function(section, sectionName){
+            ret[sectionName] = m.trust(section.innerMarkdown);
+        });
+        return ret;
+    };
+
+    var articles = [];
+    articles.push(inscription);
+
+
+    return _.map(articles, simplifyArticleStructure);
+});

script/images/rain.svg.js

@@ -0,0 +1,19 @@
+define(['m'], function(m) {
+    return  function(size){
+        return  m("svg[viewBox='0 0 107.95 87.723']",{width: size, height: size}, [
+        			m("defs[id='defs16']"),
+        			m("g[id='layer1'][transform='translate(-310.1 -167.39)']", [
+        				m("g[id='g13542'][transform='translate(-2.4761 19.309)']", [
+        					m("path[d='m378.31 207.24c15.43-1.4 26.66-5.66 26.66-10.69 0-0.41-0.27-0.8-0.42-1.2 0.91 0.23 1.83 0.46 2.83 0.46 5.57 0 10.07-3.78 10.07-8.44 0-4.65-4.5-8.41-10.07-8.41-0.68 0-1.29 0.22-1.93 0.33 0.56-1.86 0.95-3.77 0.95-5.79 0-12.33-11.17-22.34-24.95-22.34-9.77 0-18.13 5.09-22.23 12.4-1.64-0.92-3.47-1.48-5.4-1.48-5.83 0-10.68 4.69-12.18 11.06-2.56-1.01-5.52-1.64-8.7-1.64-9.54 0-17.29 5.23-17.29 11.67 0 5.81 6.35 10.59 14.6 11.47-0.37 0.63-0.66 1.25-0.66 1.91 0 4.25 8.01 7.94 19.79 9.83'][id='path8749']", {style: {"stroke-linejoin": "round", "stroke": "#6798e9", "stroke-linecap": "round", "stroke-miterlimit": ".5", "stroke-width": "12.154", "fill": "none"}}),
+        					m("path[d='m338.14 223.91c-8.25 7.27 1.43 13.47 5.12 3.49l2.83-9.26-7.95 5.77z'][id='path8734']", {style: {"stroke": "#6798e9", "stroke-miterlimit": "3.2", "stroke-width": "8", "fill": "#6798e9"}}),
+        					m("path[d='m367.18 225.11c-8.25 7.27 1.44 13.47 5.13 3.49l2.83-9.26-7.96 5.77z'][id='path8736']", {style: {"stroke": "#6798e9", "stroke-miterlimit": "3.2", "stroke-width": "8", "fill": "#6798e9"}}),
+        					m("path[d='m360.42 209.77c-8.25 7.27 1.44 13.47 5.12 3.49l2.83-9.26-7.95 5.77z'][id='path8738']", {style: {"stroke": "#6798e9", "stroke-miterlimit": "3.2", "stroke-width": "8", "fill": "#6798e9"}}),
+        					m("path[d='m378.31 207.24c15.43-1.4 26.66-5.66 26.66-10.69 0-0.41-0.27-0.8-0.42-1.2 0.91 0.23 1.83 0.46 2.83 0.46 5.57 0 10.07-3.78 10.07-8.44 0-4.65-4.5-8.41-10.07-8.41-0.68 0-1.29 0.22-1.93 0.33 0.56-1.86 0.95-3.77 0.95-5.79 0-12.33-11.17-22.34-24.95-22.34-9.77 0-18.13 5.09-22.23 12.4-1.64-0.92-3.47-1.48-5.4-1.48-5.83 0-10.68 4.69-12.18 11.06-2.56-1.01-5.52-1.64-8.7-1.64-9.54 0-17.29 5.23-17.29 11.67 0 5.81 6.35 10.59 14.6 11.47-0.37 0.63-0.66 1.25-0.66 1.91 0 4.25 8.01 7.94 19.79 9.83'][id='path10281']", {style: {"stroke-linejoin": "round", "stroke": "#6798e9", "stroke-linecap": "round", "stroke-miterlimit": ".5", "stroke-width": "12.154", "fill": "none"}}),
+        					m("path[d='m338.14 223.91c-8.25 7.27 1.43 13.47 5.12 3.49l2.83-9.26-7.95 5.77z'][id='path10283']", {style: {"stroke": "#6798e9", "stroke-miterlimit": "3.2", "stroke-width": "8", "fill": "#6798e9"}}),
+        					m("path[d='m367.18 225.11c-8.25 7.27 1.44 13.47 5.13 3.49l2.83-9.26-7.96 5.77z'][id='path10285']", {style: {"stroke": "#6798e9", "stroke-miterlimit": "3.2", "stroke-width": "8", "fill": "#6798e9"}}),
+        					m("path[d='m360.42 209.77c-8.25 7.27 1.44 13.47 5.12 3.49l2.83-9.26-7.95 5.77z'][id='path10287']", {style: {"stroke": "#6798e9", "stroke-miterlimit": "3.2", "stroke-width": "8", "fill": "#6798e9"}})
+        				])
+        			])
+        		]);
+        };
+});

script/main.js

@@ -1,5 +1,4 @@
 requirejs.config({
-    // baseUrl: 'lib',
     paths: {
         '_': '../lib/lodash/dist/lodash.min',
         'm': '../lib/mithril/mithril.min'
@@ -7,10 +6,11 @@ requirejs.config({
 });
 
 
-requirejs(['m', 'views/mainPage', 'views/calendarPage', 'views/rulesPage', 'views/photosPage', 'views/confidentialPage', 'views/contactPage'], function(m, mainPage, calendarPage, rulesPage, photosPage, confidentialPage, contactPage){
+requirejs(['m', 'views/mainPage', 'views/newsPage', 'views/calendarPage', 'views/rulesPage', 'views/photosPage', 'views/confidentialPage', 'views/contactPage', 'views/loginPage',], function(m, mainPage, newsPage, calendarPage, rulesPage, photosPage, confidentialPage, contactPage, loginPage){
     m.route.mode = "hash";
     m.route(document.body, "/", {
         "/": mainPage,
+        "/nouvelles": newsPage,
         "/calendrier": calendarPage,
         "/reglement": rulesPage,
         "/photos": photosPage,

script/util.js

@@ -1,7 +1,7 @@
 define(['m'], function(m) {
     var util = {};
-    util.loremIpsum = function(){
+    util.loremIpsum = function(n){
-        return "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a"+
+        var loremIpsum =  "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"+
@@ -13,6 +13,10 @@ define(['m'], function(m) {
                "magna consequat sagittis. Curabitur dapibus enim sit amet elit "+
                "pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero "+
                "in urna ultrices accumsan. Donec sed od";
+        loremIpsum = loremIpsum.split(' ');
+        n = n || loremIpsum.length;
+        return loremIpsum.splice(0, n).join(" ");
+
     };
 
     util.formatDate = function(date){
@@ -25,6 +29,15 @@ define(['m'], function(m) {
 
     };
 
+    util.formatDateSmall = function(date){
+        var smallMonthNames = ['janv', 'févr', 'mars', 'avr', 'mai', 'juin',
+                          'juill', 'août', 'sept', 'oct', 'nov',
+                          'dec'];
+        return [date.getDate(),
+                smallMonthNames[date.getMonth()],
+                date.getFullYear() % 1000].join(' ');
+    };
+
     util.facebookLink = function(){
         return m('a[href="https://www.facebook.com/LigueDeBalleLesPhenix"]',
                    m('i.fa.fa-facebook-square')

script/views/calendarPage.js

@@ -1,4 +1,4 @@
-define(['m', '_', 'util', 'resultParser', 'teams', 'views/topNavBar', 'views/footer'], function(m, _, util, resultParser, teams, topNavBar, footer) {
+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(){
@@ -85,9 +85,17 @@ define(['m', '_', 'util', 'resultParser', 'teams', 'views/topNavBar', 'views/foo
         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', game.time),
+            m('td', schedulView._gameName(game)),
             m('td', schedulView._getTeamTag(game.home)),
             m('td', schedulView._asGamePoints(game.home_points)),
             m('td', 'vs'),
@@ -118,7 +126,7 @@ define(['m', '_', 'util', 'resultParser', 'teams', 'views/topNavBar', 'views/foo
     calendarPage.view  = function(){
         return [m.component(topNavBar),
                 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('div.uk-width-large-3-5.uk-width-medium-4-5.uk-width-small-1-1.uk-container-center',[
                         m.component(statsView),
                         m.component(schedulView)])),
                 m.component(footer)];

script/views/confidentialPage.js

@@ -1,10 +1,11 @@
-define(['m', '_', 'event', 'teams', 'views/topNavBar', 'views/footer'], function (m, _ , Events, teams, topNavBar, footer) {
+define(['m', '_', 'teams', 'views/topNavBar', 'views/footer'], function (m, _ , teams, topNavBar, footer) {
+
 
     var confidentialSelection = {};
 
-
     confidentialSelection.toggleTeam = function(teamId, activatedTeams){
         return function(isActive){
+            isActive = isActive != 'true';
             if(isActive){
                 activatedTeams().push(teamId);
                 return;
@@ -14,21 +15,28 @@ define(['m', '_', 'event', 'teams', 'views/topNavBar', 'views/footer'], function
     };
 
     confidentialSelection.teamInput = function(teamName, teamId, activatedTeams){
-        var checked = _.includes(activatedTeams(), teamId) ? '[checked=]' : '';
+        var isActive = _.includes(activatedTeams(), teamId);
+        var class_ =  isActive ? 'uk-badge-success' : '';
         var callback = confidentialSelection.toggleTeam(teamId, activatedTeams);
-        return m('label.uk-width-1-5',
+        return  m('div.uk-badge.uk-margin-left.uk-border-rounded',
-            m('input[type=checkbox]' + checked, {onchange: m.withAttr("checked", callback)}), teamName);
+                    {class: class_, 'data-selected': isActive, onclick: m.withAttr("data-selected", callback)},
+                        m('h3', {style: {width: '80px'}}, teamName)
+        );
+
     };
 
     confidentialSelection.scoreInput = function(score, activatedScores){
-        var checked = _.includes(activatedScores(), score) ? '[checked=]' : '';
+        var isActive = _.includes(activatedScores(), score);
+        var class_ =  isActive ? 'uk-badge-success' : '';
         var callback = confidentialSelection.toggleTeam(score, activatedScores);
-        return m('label.uk-width-1-5',
+        return  m('div.uk-badge.uk-margin-left.uk-border-rounded',
-            m('input[type=checkbox]' + checked, {onchange: m.withAttr("checked", callback)}), score);
+                    {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',
+        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', [
@@ -41,7 +49,7 @@ define(['m', '_', 'event', 'teams', 'views/topNavBar', 'views/footer'], function
     };
 
     confidentialSelection.chooseScore = function(model){
-        return  m('form.uk-grid',
+        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', [
@@ -59,45 +67,95 @@ define(['m', '_', 'event', 'teams', 'views/topNavBar', 'views/footer'], function
     };
 
     confidentialSelection.view = function(model){
-        return m('div.uk-grid', [
+        return  m('div', [
-            m('div.uk-width-1-2', confidentialSelection.chooseTeams(model)),
+            confidentialSelection.chooseTeams(model),
-            m('div.uk-width-1-2', confidentialSelection.chooseScore(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.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.arrows = function(){
+    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'),
+                      m('i.fa.fa-chevron-up', {style: sortUp ? sortedStyle: {}}),
                       m('br'),
-                      m('i.fa.fa-chevron-down')
+                      m('i.fa.fa-chevron-down',  {style: sortDown ? sortedStyle: {}})
                   );
     };
 
-    confidentialTable.tableHeader = function(){
+    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', confidentialTable.arrows(), 'Équipe'),
+                        m('th', {onclick: setSorting('team')}, confidentialTable.arrows(sorting, 'team'), 'Équipe'),
-                        m('th', confidentialTable.arrows(), 'Nom'),
+                        m('th', {onclick: setSorting('name')}, confidentialTable.arrows(sorting, 'name'), 'Nom'),
-                        m('th', 'Courriel'),
+                        m('th.uk-hidden-small', 'Courriel'),
-                        m('th', 'Téléphone'),
+                        m('th.uk-hidden-small', 'Téléphone'),
-                        m('th', confidentialTable.arrows(), 'Cote')
+                        m('th', {onclick: setSorting('score')}, confidentialTable.arrows(sorting, 'score'), 'Cote')
                     ]));
     };
 
@@ -111,8 +169,8 @@ define(['m', '_', 'event', 'teams', 'views/topNavBar', 'views/footer'], function
         return  m('tr',[
                     m('td', confidentialTable.getPlayerTeamIcon(player)),
                     m('td', player.name),
-                    m('td', player.email),
+                    m('td.uk-hidden-small', player.email),
-                    m('td', player.tel),
+                    m('td.uk-hidden-small', player.tel),
                     m('td', player.score)
         ]);
     };
@@ -139,8 +197,9 @@ define(['m', '_', 'event', 'teams', 'views/topNavBar', 'views/footer'], function
     };
 
     confidentialTable.view = function(ctrl){
+        ctrl.sortPlayers();
         return  m('table.uk-table.uk-table-hover.uk-table-striped',
-                    confidentialTable.tableHeader(),
+                    confidentialTable.tableHeader(ctrl.model.sorting),
                     confidentialTable.tableBody(ctrl.players(),
                                                 ctrl.model.activatedTeams(),
                                                 ctrl.model.activatedScores()
@@ -148,73 +207,87 @@ define(['m', '_', 'event', 'teams', 'views/topNavBar', 'views/footer'], function
         );
     };
 
-    var testComponent2 = {};
-
-    testComponent2.controller = function(){
-        var counter = m.prop(0);
-        return {counter: counter, plusplus: function(){
-            counter(counter() + 1);
-        }};
-    };
-
-    testComponent2.view = function(ctrl){
-        return m('button', {onclick: ctrl.plusplus}, "test component 2 " + ctrl.counter());
-    };
-
-    var testComponent = {};
-
-    testComponent.controller = function(){
-        var counter = m.prop(0);
-        return {counter: counter, plusplus: function(){
-            counter(counter() + 1);
-        }};
-    };
-
-    testComponent.view = function(ctrl){
-        return  m('div', [
-                    m('button', {onclick: ctrl.plusplus}, "test component " + ctrl.counter()),
-                    m.component(testComponent2)]);
-    };
-
-
-
     var confidentialPageBody = {};
 
-    confidentialPageBody.controller = function(model){
+    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', [
+        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),
-            m.component(testComponent)
+                    ]));
+    };
 
+
+    var loginComponent = {};
+
+    loginComponent.controller = function(){
+        return {email: m.prop(), password: m.prop()};
+    };
+
+    loginComponent.logo = function(){
+        var style = 'height: 250px; width: 250px; background-size: 250px; background-image: url(images/logosansfond.JPG);';
+        return m('div.uk-cover-background.uk-container-center', {style: style});
+    };
+
+    loginComponent.logoLine = function(){
+        return  m('div.uk-grid.uk-margin',
+                    m('div.uk-width-1-1', loginComponent.logo()));
+    };
+
+    loginComponent.login = function(ctrl){
+        return function(){
+            var salt = "9'D)E@E{DSq[|l2bq!v";
+            window.secret = salt + ctrl.email() + ctrl.password();
+
+        };
+    };
+
+    loginComponent.loginForm = function(ctrl){
+        return  m('div.uk-panel.uk-panel-box.uk-panel-box-secondary.uk-width-large-1-3.uk-container-center.uk-margin', [
+            m('form.uk-text-center', {onsubmit: m.withAttr("form", loginComponent.login(ctrl))},
+                m('div.uk-form-row',
+                    m('label', "Nom d'utilisateur ",
+                        m('input[type=text][required].uk-form-width-small', {oninput: m.withAttr("value", ctrl.email)}))),
+                m('div.uk-form-row',
+                    m('label', "Mot de passe ",
+                        m('input[type=password][required].uk-form-width-small', {oninput: m.withAttr("value", ctrl.password)}))),
+                m('div.uk-form-row', m('button.uk-button', m("i.fa.fa-mars-double"), " Pénétrez"))
+            )
+        ]);
+    };
+
+    loginComponent.view = function(ctrl){
+        return m('div', [
+            loginComponent.logoLine(),
+            loginComponent.loginForm(ctrl)
         ]);
     };
 
 
-
-
-
     var confidentialPage = {};
 
-
     confidentialPage.view  = function(){
+        var body;
+        window.secret = 'o'
+        if(!window.secret){
+            body = loginComponent;
+        }else{
+            body = confidentialPageBody;
+        }
         return [
                 m.component(topNavBar),
-                m('div.uk-grid.uk-margin-top.uk-margin-bottom',
+                m.component(body),
-                    m('div.uk-width-large-3-5.uk-width-small-1-1.uk-container-center',[
-                        m.component(confidentialPageBody, {})
-                    ])),
                 m.component(footer)
             ];
     };
 
-
     return confidentialPage;
-
-
 });

script/views/contactPage.js

@@ -1,9 +1,56 @@
 define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], function (m, _ , util, resultParser, topNavBar, footer) {
 
-    var rulesPageBody = {};
+    var contactBody = {};
 
-    rulesPageBody.view = function(){
+    contactBody.logo = function(){
-        return m('h1', 'En construction');
+        var style = 'height: 300px; width: 300px; background-size: 300px; background-image: url(images/logosansfond.JPG);';
+        return m('div.uk-cover-background.uk-container-center', {style: style});
+    };
+
+    contactBody.logoLine = function(){
+        return  m('div.uk-grid.uk-margin',
+                    m('div.uk-width-1-1', contactBody.logo()));
+    };
+
+    contactBody.email = function(){
+        return m('a[href=mailto:info@ballephenix.com]', 'info@ballephenix.com');
+    };
+
+    contactBody.tel = function(){
+        return ' (514) 544-8976';
+    };
+
+    contactBody.address = function(){
+        return m('p', ' 123 rue Dufresne', m('br'), 'Montréal, Québec H6Y 8U7');
+    };
+
+    contactBody.contact = function(){
+        return m('div.div.uk-panel.uk-panel-box.uk-panel-box-secondary.uk-container-center.uk-margin',[
+            m('table.uk-table',
+                m('tr',
+                    m('td.uk-text-right',  m('i.fa.fa-desktop')),
+                    m('td',  contactBody.email())
+                ),
+                m('tr',
+                    m('td.uk-text-right',  m('i.fa.fa-phone')),
+                    m('td',  contactBody.tel())
+                ),
+                m('tr',
+                    m('td.uk-text-right',  m('i.fa.fa-envelope')),
+                    m('td',  contactBody.address())
+                )
+            )
+        ]);
+
+    };
+
+    contactBody.view = function(){
+        return  m('div.uk-margin-top.uk-margin-bottom.uk-grid',
+                    m('div.uk-width-large-2-5.uk-width-medium-4-5.uk-width-small-1-1.uk-container-center', [
+                        contactBody.logoLine(),
+                        contactBody.contact()
+                    ])
+                );
     };
 
     var contactPage = {};
@@ -11,7 +58,7 @@ define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], fu
     contactPage.view  = function(){
         return [
                 m.component(topNavBar),
-                m.component(rulesPageBody),
+                m.component(contactBody),
                 m.component(footer)
             ];
     };

script/views/loginPage.js

@@ -0,0 +1,43 @@
+define(['m', '_', 'util', 'views/topNavBar', 'views/footer'], function (m, _ , util, topNavBar, footer) {
+
+    var loginComponent = {};
+
+    loginComponent.logo = function(){
+        var style = 'height: 250px; width: 250px; background-size: 250px; background-image: url(images/logosansfond.JPG);';
+        return m('div.uk-cover-background.uk-container-center', {style: style});
+    };
+
+    loginComponent.logoLine = function(){
+        return  m('div.uk-grid.uk-margin',
+                    m('div.uk-width-1-1', loginComponent.logo()));
+    };
+
+    loginComponent.loginForm = function(){
+        return  m('div.uk-panel.uk-panel-box.uk-panel-box-secondary.uk-width-large-1-3.uk-container-center.uk-margin', [
+            m('form.uk-text-center',
+                m('div.uk-form-row', m('label', "Nom d'utilisateur ", m('input[type=text].uk-form-width-small'))),
+                m('div.uk-form-row', m('label', "Mot de passe ", m('input[type=password].uk-form-width-small'))),
+                m('div.uk-form-row', m('button.uk-button', m("i.fa.fa-mars-double"), " Pénétrez"))
+            )
+        ]);
+    };
+
+    loginComponent.view = function(){
+        return m('div', [
+            loginComponent.logoLine(),
+            loginComponent.loginForm()
+        ]);
+    };
+
+    var loginPage = {};
+
+    loginPage.view  = function(){
+        return [
+                m.component(topNavBar),
+                m.component(loginComponent),
+                m.component(footer)
+            ];
+    };
+
+    return loginPage;
+});

script/views/mainPage.js

@@ -1,10 +1,10 @@
-define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], function (m, _ , util, resultParser, topNavBar, footer) {
+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.uk-hidden-small', [
+        return m('div.uk-grid', [
             m('div.uk-large-1-3.uk-medium-2-3.uk-container-center', [
-                m('div.uk-cover-background', {style: 'height: 500px; width: 500px; background-size: 500px; background-image: url(images/phenix_logo.png);'})
+                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);'})
             ])
         ]);
     };
@@ -12,12 +12,13 @@ define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], fu
     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', 'Nouvelles'),
+            m('h3.uk-panel-title', m('a.uk-link-muted', {href: '#/nouvelles'}, article.title)),
-            m('p', util.loremIpsum())
+            m('p', article.smallBody || article.body)
         ]);
     };
 
@@ -42,9 +43,15 @@ define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], fu
                 ]));
     };
 
+    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', util.formatDate(game.jsDate)),
+            m('td', nextGameDaySchedule._responsoveText(util.formatDate(game.jsDate),
+                                                        util.formatDateSmall(game.jsDate))),
             m('td', game.time),
             m('td', game.away),
             m('td', game.home)
@@ -68,7 +75,7 @@ define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], fu
     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('h3.uk-panel-title', m('a.uk-link-muted', {href: '#/calendrier'}, 'Horaire')),
             m.component(nextGameDaySchedule)
         ]);
     };
@@ -81,7 +88,7 @@ define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], fu
         var iframeParams = {
             style: {border: '1px solid black', 'min-height': '300px'},
             width: '100%',
-            height: '100%',
+            // height: '100%',
             frameborder: 0,
             scrolling: 'no',
             marginheight: 0,
@@ -107,11 +114,22 @@ define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], fu
     var mainPageBottom = {};
 
     mainPageBottom.regularSizeView = function(){
-        return m('div.uk-grid.uk-hidden-small.uk-grid-match', [
+        return m('div.uk-grid.uk-visible-large.uk-grid-match', [
-            m('div.uk-width-large-1-5.uk-hidden-medium'),
+            m('div.uk-width-large-1-3.uk-width-medium-1-3', m.component(mainPageNews)),
-            m('div.uk-width-large-1-5.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-5.uk-width-medium-1-3', m.component(mainPageSchedule)),
+            m('div.uk-width-large-1-3.uk-width-medium-1-3', m.component(mainMap))
-            m('div.uk-width-large-1-5.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))
+                    )
         ]);
     };
 
@@ -126,10 +144,13 @@ define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], fu
 
 
     mainPageBottom.view = function(){
-        return m('div.uk-margin-top.uk-margin-bottom', [
+        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()
-        ]);
+                    ])
+        );
 
     };
 

script/views/newsPage.js

@@ -0,0 +1,36 @@
+define(['m', '_', 'util', 'resultParser', 'articles/articles', 'views/topNavBar', 'views/footer'], function (m, _ , util, resultParser, articles, topNavBar, footer) {
+
+    var newsPageBody = {};
+
+    newsPageBody.logo = function(){
+        var style = 'height: 250px; width: 250px; background-size: 250px; background-image: url(images/logosansfond.JPG);';
+        return m('div.uk-cover-background.uk-container-center', {style: style});
+    };
+
+    newsPageBody.getArticle = function(article){
+        return m('article.uk-article.uk-margin-',
+            m('h1.uk-article-title', article.title),
+            m('p.uk-article-meta', article.meta),
+            article.body
+        );
+    };
+
+    newsPageBody.view = function(){
+        return m('div', _.map(articles, newsPageBody.getArticle));
+
+    };
+
+    var newsPage = {};
+
+    newsPage.view  = function(){
+        return [
+                m.component(topNavBar),
+                m('div.uk-grid.uk-margin-top.uk-margin-bottom',
+                    m('div.uk-width-large-2-5.uk-width-medium-3-5.uk-width-small-1-1.uk-container-center',
+                        m.component(newsPageBody))),
+                m.component(footer)
+            ];
+    };
+
+    return newsPage;
+});

script/views/photosPage.js

@@ -2,8 +2,14 @@ define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], fu
 
     var rulesPageBody = {};
 
+    rulesPageBody.logo = function(){
+        var style = 'height: 250px; width: 250px; background-size: 250px; background-image: url(images/logosansfond.JPG);';
+        return m('div.uk-cover-background.uk-container-center', {style: style});
+    };
+
     rulesPageBody.view = function(){
-        return m('h1', 'En construction');
+        return  m('div.uk-grid',
+                    m('div.uk-width-1-1', rulesPageBody.logo()));
     };
 
     var photosPage = {};

script/views/rulesPage.js

@@ -2,31 +2,47 @@ define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], fu
 
     var rulesPage = {};
 
-    rulesPage.missionTest = function(){
+    rulesPage.missionText = function(){
         return "La ligue de balle Les Phénix a été fondée en 2004 afin "+
                "d'offrir aux membres de la communauté gaie et lesbienne et à "+
                "leurs amis hétéros l'opportunité de s'amuser et de pratiquer "+
                "un sport dans une ambiance amicale et décontractée. "+
                "L'ouverture d'esprit, la camaraderie et le plaisir de "+
-               "pratiquer un sport à l'extérieur caractérisent cette ligue."
+               "pratiquer un sport à l'extérieur caractérisent cette ligue.";
+    };
+
+    rulesPage.logo = function(){
+        var style = 'height: 250px; width: 250px; background-size: 250px; background-image: url(images/logosansfond.JPG);';
+        return m('div.uk-cover-background.uk-container-center', {style: style});
+    };
+
+    rulesPage.rules = function(){
+        var urlASBM = 'http://montreal.baseballquebec.com/fr/publication/nouvelle/recherche_un_directeur_general_asbm.html';
+        return  m('div.uk-width-large-2-3.uk-width-small-1-1',
+                    m('div.uk-panel.uk-panel-box.uk-panel-box-secondary', [
+                        m('h2', 'Règlements 2016'),
+                        m('ul',[
+                            m('li', m('h3', m('a', {href: 'files/reglements_generaux.pdf'}, 'Règlements généraux'))),
+                            m('li',  m('h3', m('a', {href: 'files/regles_procedures2015.pdf'},'Règles et procédures'))),
+                            m('li',  m('h3', m('a', {href: 'files/reglements_de_terrain2015.pdf'},'Règlements de terrain'))),
+                            m('li',  m('h3', m('a', {href: urlASBM}, 'Association des Sports de Balle à Montréal (ASBM)'))),
+                        ])
+                    ])
+                );
+    };
+
+    rulesPage.logoAndRules = function(){
+        return  m('div.uk-grid',[
+                    m('div.uk-width-large-1-3.uk-width-small-1-1', rulesPage.logo()),
+                    rulesPage.rules()
+                    ]
+                );
     };
 
     rulesPage.mission = function(){
         return m('div.uk-panel.uk-panel-box.uk-panel-box-secondary', [
             m('h2', 'Mission'),
-                            m('p', rulesPage.missionTest())
+            m('p', rulesPage.missionText())
-                    ]);
-
-    };
-
-    rulesPage.rules = function(){
-        return  m('div.uk-panel.uk-panel-box.uk-panel-box-secondary', [
-                    m('h2', 'Règlements 2015'),
-                    m('ul',[
-                        m('li', m('h3', 'Règlements généraux')),
-                        m('li',  m('h3','Règles et procédures')),
-                        m('li',  m('h3','Règlements de terrain')),
-                    ])
         ]);
     };
 
@@ -35,9 +51,9 @@ define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], fu
                 m.component(topNavBar),
 
                 m('div.uk-margin-top.uk-margin-bottom.uk-grid',
-                m('div.uk-width-large-3-5.uk-container-center', [
+                m('div.uk-width-large-3-5.uk-width-medium-4-5.uk-width-large-1-1.uk-container-center', [
-                    rulesPage.mission(),
+                    rulesPage.logoAndRules(),
-                    rulesPage.rules()
+                    rulesPage.mission()
                 ])),
                 m.component(footer)
             ];

script/views/topNavBar.js

@@ -2,10 +2,11 @@ define(['m', '_', 'util'], function (m, _, util) {
     var topNavBar = {};
 
     topNavBar._urlMapping = {
-        '': 'Acceuil',
+        '': 'Accueil',
+        nouvelles: 'Nouvelles',
         calendrier: 'Calendrier',
         reglement: 'Règlement',
-        photos: 'Photos',
+        // photos: 'Photos',
         membre: 'Membre',
         contact: 'Nous Joindre'
     };

scss/_custom_uikit.scss

@@ -2,6 +2,20 @@
 @import "uikit/scss/uikit-mixins.scss";
 @import "uikit/scss/core/variables.scss";
 
+// Phenix colors
+
+$navbar-background: #f08d28; //#dabd5e;
+// $foo: ; // #f8c694;
+
+$panel-box-background: #fce3ca;
+$table-striped-background: #fce3ca;
+$navbar-nav-active-background: #fce3ca;
+$navbar-nav-hover-background: #fce3ca;
+$panel-box-secondary-background: #fce3ca;
+$badge-background: #fce3ca;
+$badge-color: black;
+$badge-font-size: 2em;
+
 // Defaults
 @import "uikit/scss/core/base.scss";