started to implement the member section

.gitignore

@@ -3,3 +3,4 @@ lib/*
 css/*
 /api/resultats.json
 /index.html
+/main-built.js

.gitlab-ci.yml

@@ -9,6 +9,7 @@ pages:
     script:
       - npm install
       - node_modules/.bin/gulp prod
+      - node_modules/.bin/r.js -o build.js
       - rm -rf node_modules .public public
       - mkdir .public
       - cp -r * .public

README.md

@@ -1 +1,41 @@
 # Site Web de Balle Phénix
+![Image Alt](https://gitlab.com/didiercrunch/phenix-website/raw/master/images/phenix_logo.png)
+
+
+## introduction
+
+Vous trouverez le code source du site web pour les Phénix ici.  Le site web
+en lui-même est accessible au https://didiercrunch.gitlab.io/phenix-website/.
+
+### Structure du site web.
+
+Premièrement, mille excuses pour mes choix hétéroclites.  J'ai décidé d'explorer
+de nouvels technologies avec ce projet.  En conséquence, le code est un peu
+difficile à comprendre à première vue mais il est __tellement__ plus cool!
+
+
+#### Choix
+
+*  mithril.js comme framework dans le fureteur
+*  require.js pour les dépendances
+*  uikit avec sass comme framework css
+*  gulp pour la compilation
+*  gitlab pour le deployment
+
+---
+
+# English Version
+
+All the source code is in english.  The source code is for a static web
+side for The  softball league 'Balle Phénix'.
+
+##  How to build
+
+    $ npm install
+    $ node_modules/.bin/gulp help
+
+#  How it is made
+
+*  mithril.js as client side framework
+*  uikit as css framework
+*  coffee and love

data/players.yaml

@@ -0,0 +1,289 @@
+---
+-
+  email: fleet80@hickle.org
+  name: "Delle Emmerich"
+  score: 2
+  team: rouge
+  tel: 613-805-2793x858
+-
+  email: qschamberger@yahoo.com
+  name: "Susie Quitzon MD"
+  score: 3
+  team: rouge
+  tel: 1-332-714-0777x97469
+-
+  email: kianna90@yahoo.com
+  name: "Johnathan Leuschke"
+  score: 5
+  team: jaune
+  tel: 974-275-2040
+-
+  email: susannah.grant@hotmail.com
+  name: "Dr. Wendell Sporer"
+  score: 3
+  team: rouge
+  tel: 04691879363
+-
+  email: millicent46@adams.info
+  name: "Emile Powlowski II"
+  score: 1
+  team: bleu
+  tel: 1-449-950-7363x2633
+-
+  email: cormier.codi@hotmail.com
+  name: "Gardner Willms"
+  score: 2
+  team: bleu
+  tel: 625-516-1325
+-
+  email: kamryn.kovacek@gmail.com
+  name: "Aliya Vandervort"
+  score: 4
+  team: rouge
+  tel: "250.915.3706"
+-
+  email: marian97@beahan.org
+  name: "Gaige Kautzer"
+  score: 2
+  team: gris
+  tel: "298.694.0319"
+-
+  email: patsy.kerluke@satterfieldberge.com
+  name: "Orilla Brakus"
+  score: 5
+  team: rouge
+  tel: (506)015-3098x8355
+-
+  email: alpha30@connelly.com
+  name: "Dr. Thurman O'Hara"
+  score: 5
+  team: bleu
+  tel: 07469452414
+-
+  email: thompson.willene@gmail.com
+  name: "Rachael Medhurst DDS"
+  score: 2
+  team: rouge
+  tel: 1-602-031-0376
+-
+  email: inader@kunze.info
+  name: "Mr. Ingram Thompson"
+  score: 2
+  team: rouge
+  tel: (109)873-9483x211
+-
+  email: desiree.harris@gmail.com
+  name: "Dr. Saul Streich Jr."
+  score: 5
+  team: gris
+  tel: 1-249-486-6759x84328
+-
+  email: samir83@hills.com
+  name: "Kimberley Kihn"
+  score: 5
+  team: jaune
+  tel: 304.586.6687x3262
+-
+  email: egrady@emmerichpadberg.com
+  name: "Arra Boyer"
+  score: 3
+  team: gris
+  tel: "485.730.8331"
+-
+  email: bgoodwin@gmail.com
+  name: "Miss Kaylan Robel DVM"
+  score: 4
+  team: gris
+  tel: "321.945.7155"
+-
+  email: angelic86@homenick.com
+  name: "Kyson Ruecker"
+  score: 4
+  team: bleu
+  tel: 1-017-690-5278
+-
+  email: val.sawayn@gmail.com
+  name: "Shaun Goodwin"
+  score: 3
+  team: jaune
+  tel: (271)085-2639x251
+-
+  email: kya.wunsch@gmail.com
+  name: "Mr. Denzell Casper"
+  score: 2
+  team: bleu
+  tel: 948-754-1786x17035
+-
+  email: delmus18@stoltenberg.org
+  name: "Bluford Marvin Jr."
+  score: 2
+  team: jaune
+  tel: (268)984-3065x3634
+-
+  email: kihn.zackery@gmail.com
+  name: "Lucio Kub"
+  score: 2
+  team: jaune
+  tel: 185-942-2355x8756
+-
+  email: jade24@aufderharkuhic.com
+  name: "Mr. Justice Pollich DVM"
+  score: 1
+  team: bleu
+  tel: 1-918-319-1713
+-
+  email: vgoyette@hotmail.com
+  name: "Bose Ankunding"
+  score: 4
+  team: gris
+  tel: "265.582.6145"
+-
+  email: raltenwerth@lueilwitz.com
+  name: "Harlen Harber"
+  score: 1
+  team: jaune
+  tel: (081)424-2803
+-
+  email: thiel.bode@reynolds.info
+  name: "Linnie Abshire"
+  score: 1
+  team: rouge
+  tel: 1-809-325-8148x5271
+-
+  email: istracke@lueilwitz.com
+  name: "Mr. Juwan Zemlak"
+  score: 5
+  team: jaune
+  tel: 982.535.6849x5299
+-
+  email: boysie44@hartmanngraham.com
+  name: "Mr. Tahj Bernhard"
+  score: 1
+  team: rouge
+  tel: +57(9)5038029147
+-
+  email: harm91@dare.net
+  name: "Dr. Lyle Lakin PhD"
+  score: 4
+  team: bleu
+  tel: 079-078-9724
+-
+  email: prosacco.dolphus@dickens.com
+  name: "Bertram Schuster"
+  score: 4
+  team: gris
+  tel: (917)409-8168x00826
+-
+  email: elian04@stroman.com
+  name: "Viviana Howell"
+  score: 5
+  team: rouge
+  tel: 1-414-103-3954x02444
+-
+  email: hakim08@hotmail.com
+  name: "Marques Goodwin"
+  score: 1
+  team: rouge
+  tel: (649)195-3556x81548
+-
+  email: nigel.kilback@gmail.com
+  name: "Rayfield Lubowitz"
+  score: 2
+  team: bleu
+  tel: (231)457-7181
+-
+  email: rogahn.tollie@lehnerwillms.com
+  name: "Miss Luz Altenwerth"
+  score: 3
+  team: gris
+  tel: 00248382520
+-
+  email: reilly.velia@hansenhegmann.com
+  name: "Lilly Brekke"
+  score: 1
+  team: rouge
+  tel: 006.284.1261x54374
+-
+  email: batz.dessa@rippin.org
+  name: "Jay Aufderhar"
+  score: 3
+  team: rouge
+  tel: 960-144-7624x406
+-
+  email: garth.barton@kerluke.com
+  name: "Ms. Contina Pfeffer DDS"
+  score: 5
+  team: jaune
+  tel: (352)043-9218x9064
+-
+  email: mmcglynn@gusikowski.com
+  name: "Robyn Lakin"
+  score: 1
+  team: bleu
+  tel: 667-492-9674x3911
+-
+  email: breinger@yahoo.com
+  name: "Latonia Kuhlman"
+  score: 2
+  team: bleu
+  tel: 404.860.5529x107
+-
+  email: jamarion.sipes@gmail.com
+  name: "Dr. Camryn Goyette"
+  score: 4
+  team: bleu
+  tel: 648-481-0991x380
+-
+  email: consuelo37@gmail.com
+  name: "Khloe Altenwerth"
+  score: 4
+  team: gris
+  tel: 1-480-994-8256x873
+-
+  email: icie.kohler@murphyrohan.com
+  name: "Pearl Dicki"
+  score: 1
+  team: rouge
+  tel: +04(3)0376370559
+-
+  email: miya43@yahoo.com
+  name: "Christoper Botsford"
+  score: 2
+  team: gris
+  tel: (731)031-5128x77337
+-
+  email: xschmidt@yahoo.com
+  name: "Lauren Bins"
+  score: 1
+  team: gris
+  tel: (503)215-2332x77244
+-
+  email: rempel.earley@waelchi.net
+  name: "Sigmund Stroman"
+  score: 4
+  team: rouge
+  tel: (719)103-8927x0887
+-
+  email: gustav.graham@kihn.com
+  name: "Brook Nolan"
+  score: 2
+  team: gris
+  tel: "642.931.3403"
+-
+  email: hettinger.emit@cartwright.com
+  name: "Mr. Gaston Bartell"
+  score: 5
+  team: jaune
+  tel: "00536147705"
+-
+  email: tlittle@marquardtfunk.info
+  name: "Ansel Schimmel"
+  score: 3
+  team: bleu
+  tel: (432)161-1237
+-
+  email: blangosh@hotmail.com
+  name: "Kiefer Funk"
+  score: 3
+  team: rouge
+  tel: 224-921-0391x3813

script/main.js

@@ -7,10 +7,14 @@ requirejs.config({
 });
 
 
-requirejs(['m', 'views/mainPage', 'views/calendarPage'], function(m, mainPage, calendarPage){
+requirejs(['m', 'views/mainPage', 'views/calendarPage', 'views/rulesPage', 'views/photosPage', 'views/confidentialPage', 'views/contactPage'], function(m, mainPage, calendarPage, rulesPage, photosPage, confidentialPage, contactPage){
     m.route.mode = "hash";
     m.route(document.body, "/", {
         "/": mainPage,
         "/calendrier": calendarPage,
+        "/reglement": rulesPage,
+        "/photos": photosPage,
+        "/membre": confidentialPage,
+        "/contact": contactPage
     });
 });

script/resultParser.js

@@ -75,9 +75,16 @@ define(['_'], function(_) {
         return res.home_points;
     };
 
+    resultParser._getPointsForGame = function(res, team){
+        if(resultParser._hasWon(res, team)){
+            return 2;
+        }
+        return resultParser._isDraw(res) ? 1: 0;
+    };
+
     resultParser._getTeamStats = function(rawResults, team){
         var ret = {
-            team: team, gamePlayed: 0, victories: 0,
+            team: team, gamePlayed: 0, victories: 0, points: 0,
             defeats: 0, draws: 0, pointsFor: 0, pointsAgaint: 0};
         _.each(rawResults, function(res){
             if((team != res.home && team != res.away) || !_.isNumber(res.home_points)){
@@ -89,6 +96,7 @@ define(['_'], function(_) {
             ret.draws += resultParser._isDraw(res) ? 1: 0;
             ret.pointsFor += resultParser._getPointsFor(res, team);
             ret.pointsAgaint += resultParser._getPointsForOpponent(res, team);
+            ret.points += resultParser._getPointsForGame(res, team);
         });
         return ret;
     };

script/teams.js

@@ -3,17 +3,19 @@ define(['m', '_'], function (m, _) {
 
     teams.getTeamColor = function(teamName){
         if(teamName == 'jaune'){
-            return 'yellow';
+            return '#FF0';
         }
         if(teamName == 'rouge'){
-            return 'red';
+            return '#F00';
         }
         if(teamName == 'bleu'){
-            return 'bleu';
+            return '#00F';
         }
         if(teamName == 'gris'){
-            return 'grey';
+            return '#808080';
         }
+
+        return undefined;
     };
 
     return teams;

script/views/calendarPage.js

@@ -21,7 +21,7 @@ define(['m', '_', 'util', 'resultParser', 'teams', 'views/topNavBar', 'views/foo
             m('td', formatStat(teamStats.pointsFor)),
             m('td', formatStat(teamStats.pointsAgaint)),
             m('td', formatStat(teamStats.pointsFor - teamStats.pointsAgaint)),
-            m('td', "? ")
+            m('td', formatStat(teamStats.points))
         ]);
     };
 

script/views/confidentialPage.js

@@ -0,0 +1,220 @@
+define(['m', '_', 'event', 'teams', 'views/topNavBar', 'views/footer'], function (m, _ , Events, teams, topNavBar, footer) {
+
+    var confidentialSelection = {};
+
+
+    confidentialSelection.toggleTeam = function(teamId, activatedTeams){
+        return function(isActive){
+            if(isActive){
+                activatedTeams().push(teamId);
+                return;
+            }
+            activatedTeams(_.difference(activatedTeams(), [teamId]));
+        };
+    };
+
+    confidentialSelection.teamInput = function(teamName, teamId, activatedTeams){
+        var checked = _.includes(activatedTeams(), teamId) ? '[checked=]' : '';
+        var callback = confidentialSelection.toggleTeam(teamId, activatedTeams);
+        return m('label.uk-width-1-5',
+            m('input[type=checkbox]' + checked, {onchange: m.withAttr("checked", callback)}), teamName);
+    };
+
+    confidentialSelection.scoreInput = function(score, activatedScores){
+        var checked = _.includes(activatedScores(), score) ? '[checked=]' : '';
+        var callback = confidentialSelection.toggleTeam(score, activatedScores);
+        return m('label.uk-width-1-5',
+            m('input[type=checkbox]' + checked, {onchange: m.withAttr("checked", callback)}), score);
+    };
+
+    confidentialSelection.chooseTeams = function(model){
+        return  m('form.uk-grid',
+                    m('div.uk-width-1-6', m('label', m('b', 'Équipes'))),
+                    m('div.uk-width-5-6',
+                        m('div.uk-grid', [
+                            confidentialSelection.teamInput('Bleu', 'bleu', model.activatedTeams),
+                            confidentialSelection.teamInput('Rouge', 'rouge', model.activatedTeams),
+                            confidentialSelection.teamInput('Jaune', 'jaune', model.activatedTeams),
+                            confidentialSelection.teamInput('Gris', 'gris', model.activatedTeams),
+                    ]))
+                    );
+    };
+
+    confidentialSelection.chooseScore = function(model){
+        return  m('form.uk-grid',
+                    m('div.uk-width-1-6', m('label', m('b', 'Score'))),
+                    m('div.uk-width-5-6',
+                        m('div.uk-grid', [
+                            confidentialSelection.scoreInput(1, model.activatedScores),
+                            confidentialSelection.scoreInput(2, model.activatedScores),
+                            confidentialSelection.scoreInput(3, model.activatedScores),
+                            confidentialSelection.scoreInput(4, model.activatedScores),
+                            confidentialSelection.scoreInput(5, model.activatedScores)
+                    ]))
+                    );
+    };
+
+    confidentialSelection.controller = function(model){
+        return model;
+    };
+
+    confidentialSelection.view = function(model){
+        return m('div.uk-grid', [
+            m('div.uk-width-1-2', confidentialSelection.chooseTeams(model)),
+            m('div.uk-width-1-2', confidentialSelection.chooseScore(model))
+        ]);
+    };
+
+
+    var confidentialTable = {};
+
+    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);
+        return ctrl;
+    };
+
+    confidentialTable.arrows = function(){
+        var style = {
+            display: 'inline-block',
+            'line-height': '0.5em',
+            'margin-right': '1em',
+            'font-size': '0.7em'
+        };
+        return  m('span', {style: style},
+                      m('i.fa.fa-chevron-up'),
+                      m('br'),
+                      m('i.fa.fa-chevron-down')
+                  );
+    };
+
+    confidentialTable.tableHeader = function(){
+        return  m('thead',
+                    m('tr', [
+                        m('th', confidentialTable.arrows(), 'Équipe'),
+                        m('th', confidentialTable.arrows(), 'Nom'),
+                        m('th', 'Courriel'),
+                        m('th', 'Téléphone'),
+                        m('th', confidentialTable.arrows(), 'Cote')
+                    ]));
+    };
+
+    confidentialTable.getPlayerTeamIcon = function(player){
+        var background = teams.getTeamColor(player.team);
+        var style = {width: '20px', height: '20px', 'background-color': background};
+        return m('div', {style: style}, m.trust(' '));
+    };
+
+    confidentialTable.playerRow = function(player){
+        return  m('tr',[
+                    m('td', confidentialTable.getPlayerTeamIcon(player)),
+                    m('td', player.name),
+                    m('td', player.email),
+                    m('td', player.tel),
+                    m('td', player.score)
+        ]);
+    };
+
+    confidentialTable.onlyPlayerOfTeam = function(visibleTeam){
+        return function(player){
+            return _.includes(visibleTeam, player.team);
+        };
+    };
+
+    confidentialTable.onlyPlayerOfScore = function(visibleScores){
+        return function(player){
+            return _.includes(visibleScores, player.score);
+        };
+    };
+
+    confidentialTable.tableBody = function(players, visibleTeam, activatedScores){
+        return  m('tbody',
+                    _(players)
+                    .filter(confidentialTable.onlyPlayerOfTeam(visibleTeam))
+                    .filter(confidentialTable.onlyPlayerOfScore(activatedScores))
+                    .map(confidentialTable.playerRow).value()
+                );
+    };
+
+    confidentialTable.view = function(ctrl){
+        return  m('table.uk-table.uk-table-hover.uk-table-striped',
+                    confidentialTable.tableHeader(),
+                    confidentialTable.tableBody(ctrl.players(),
+                                                ctrl.model.activatedTeams(),
+                                                ctrl.model.activatedScores()
+                                            )
+        );
+    };
+
+    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){
+        model.activatedTeams = m.prop(['bleu', 'rouge', 'jaune', 'gris']);
+        model.activatedScores = m.prop([1, 2, 3, 4, 5]);
+        return model;
+    };
+
+    confidentialPageBody.view = function(model){
+        return m('div', [
+            m.component(confidentialSelection, model),
+            m.component(confidentialTable, model),
+            m.component(testComponent)
+
+        ]);
+    };
+
+
+
+
+
+    var confidentialPage = {};
+
+
+    confidentialPage.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.component(confidentialPageBody, {})
+                    ])),
+                m.component(footer)
+            ];
+    };
+
+
+    return confidentialPage;
+
+
+});

script/views/contactPage.js

@@ -0,0 +1,20 @@
+define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], function (m, _ , util, resultParser, topNavBar, footer) {
+
+    var rulesPageBody = {};
+
+    rulesPageBody.view = function(){
+        return m('h1', 'En construction');
+    };
+
+    var contactPage = {};
+
+    contactPage.view  = function(){
+        return [
+                m.component(topNavBar),
+                m.component(rulesPageBody),
+                m.component(footer)
+            ];
+    };
+
+    return contactPage;
+});

script/views/mainPage.js

@@ -76,7 +76,7 @@ define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], fu
     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 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'},

script/views/photosPage.js

@@ -0,0 +1,20 @@
+define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], function (m, _ , util, resultParser, topNavBar, footer) {
+
+    var rulesPageBody = {};
+
+    rulesPageBody.view = function(){
+        return m('h1', 'En construction');
+    };
+
+    var photosPage = {};
+
+    photosPage.view  = function(){
+        return [
+                m.component(topNavBar),
+                m.component(rulesPageBody),
+                m.component(footer)
+            ];
+    };
+
+    return photosPage;
+});

script/views/rulesPage.js

@@ -0,0 +1,47 @@
+define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], function (m, _ , util, resultParser, topNavBar, footer) {
+
+    var rulesPage = {};
+
+    rulesPage.missionTest = 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."
+    };
+
+    rulesPage.mission = function(){
+        return  m('div.uk-panel.uk-panel-box.uk-panel-box-secondary', [
+                            m('h2', 'Mission'),
+                            m('p', rulesPage.missionTest())
+                    ]);
+
+    };
+
+    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')),
+                    ])
+                ]);
+    };
+
+    rulesPage.view  = function(){
+        return [
+                m.component(topNavBar),
+
+                m('div.uk-margin-top.uk-margin-bottom.uk-grid',
+                m('div.uk-width-large-3-5.uk-container-center', [
+                    rulesPage.mission(),
+                    rulesPage.rules()
+                ])),
+                m.component(footer)
+            ];
+    };
+
+    return rulesPage;
+});

script/views/topNavBar.js

@@ -2,7 +2,7 @@ define(['m', '_', 'util'], function (m, _, util) {
     var topNavBar = {};
 
     topNavBar._urlMapping = {
-        acceuil: 'Acceuil',
+        '': 'Acceuil',
         calendrier: 'Calendrier',
         reglement: 'Règlement',
         photos: 'Photos',
@@ -19,7 +19,7 @@ define(['m', '_', 'util'], function (m, _, util) {
     };
 
     topNavBar._isActive = function(id_){
-        return id_ == m.route.param("page");
+        return topNavBar._getUrlForId(id_) == window.location.hash;
     };
 
     topNavBar._getItem = function(name, id){
@@ -31,7 +31,7 @@ define(['m', '_', 'util'], function (m, _, util) {
     topNavBar.view = function(controller){
         return  m("nav.uk-navbar.uk-navbar-attached",[
                         m("ul.uk-navbar-nav.uk-navbar-center.uk-visible-large",
-                            m('li.uk-parent', util.facebookLink()),
+                            m('li.uk-parent', m('div.uk-navbar-brand', util.facebookLink())),
                             _.map(topNavBar._urlMapping, topNavBar._getItem)),
                         m("ul.uk-navbar-nav.uk-hidden-large",
                             m('li.uk-parent', util.facebookLink()),