diff --git a/bower.json b/bower.json index 8e1929e..304f05b 100644 --- a/bower.json +++ b/bower.json @@ -19,6 +19,7 @@ ], "dependencies": { "uikit": "~2.24.3", - "mithril": "~0.2.1" + "mithril": "~0.2.1", + "lodash": "~4.2.1" } } diff --git a/data/resultats.yaml b/data/resultats.yaml new file mode 100644 index 0000000..6831714 --- /dev/null +++ b/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: ~ diff --git a/gulpfile.js b/gulpfile.js index eeadf46..2a6db98 100644 --- a/gulpfile.js +++ b/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, - directoryListing: true, - open: 'index.html' + livereload: false, + directoryListing: false, })); }); -gulp.task('dev', ['bower', 'sass', 'webserver'], function(){ +gulp.task('dev', ['default', 'webserver'], function(){ return gulp.watch('./scss/*.scss', ['sass']); }); diff --git a/index.html b/index.html index 012fb33..e86515c 100644 --- a/index.html +++ b/index.html @@ -1,115 +1,21 @@ - - Balle Phenix - - - - - + + Balle Phenix + + + + - - + + + + - - -
-
-
-
-
-
-
-
- -
-
-
-
-
- -
-

Nouvelles

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

Horaire

- - - - - - - - - - - - - - - - - - - - - -
DateHeureVisiteurReceveur
30 fevrier 201618h60MauveNoir
30 fevrier 201618h60MauveNoir
-
-
-
-
-
-

Parc

-
-
-
-
-
- - - - - - - - - + + + + + + diff --git a/package.json b/package.json index b37082c..95bea2c 100644 --- a/package.json +++ b/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" diff --git a/script/calendarPage.js b/script/calendarPage.js new file mode 100644 index 0000000..cbfb125 --- /dev/null +++ b/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); diff --git a/script/mainPage.js b/script/mainPage.js new file mode 100644 index 0000000..233b168 --- /dev/null +++ b/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); diff --git a/script/phenix.js b/script/phenix.js new file mode 100644 index 0000000..4b68c6a --- /dev/null +++ b/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); diff --git a/script/results.js b/script/results.js new file mode 100644 index 0000000..286db82 --- /dev/null +++ b/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); diff --git a/script/structure.js b/script/structure.js new file mode 100644 index 0000000..ab92df2 --- /dev/null +++ b/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);