From 0565d23cc8276a05b9321e4366c4d35268154c8e Mon Sep 17 00:00:00 2001 From: didier amyot Date: Sat, 6 Feb 2016 23:04:26 -0500 Subject: [PATCH] moved to requirejs --- .gitignore | 1 + bower.json | 3 +- build.js | 11 +++ data/resultats.yaml | 20 +++--- index.html | 10 +-- package.json | 3 +- script/calendarPage.js | 130 ----------------------------------- script/main.js | 16 +++++ script/mainPage.js | 130 ----------------------------------- script/phenix.js | 27 -------- script/resultParser.js | 64 +++++++++++++++++ script/results.js | 83 ---------------------- script/structure.js | 65 ------------------ script/teams.js | 20 ++++++ script/util.js | 25 +++++++ script/views/calendarPage.js | 128 ++++++++++++++++++++++++++++++++++ script/views/footer.js | 16 +++++ script/views/mainPage.js | 130 +++++++++++++++++++++++++++++++++++ script/views/topNavBar.js | 42 +++++++++++ 19 files changed, 468 insertions(+), 456 deletions(-) create mode 100644 build.js delete mode 100644 script/calendarPage.js create mode 100644 script/main.js delete mode 100644 script/mainPage.js delete mode 100644 script/phenix.js create mode 100644 script/resultParser.js delete mode 100644 script/results.js delete mode 100644 script/structure.js create mode 100644 script/teams.js create mode 100644 script/util.js create mode 100644 script/views/calendarPage.js create mode 100644 script/views/footer.js create mode 100644 script/views/mainPage.js create mode 100644 script/views/topNavBar.js diff --git a/.gitignore b/.gitignore index e37f0cc..fdd0ea3 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules/* lib/* css/* +/api/resultats.json diff --git a/bower.json b/bower.json index 304f05b..65ef559 100644 --- a/bower.json +++ b/bower.json @@ -20,6 +20,7 @@ "dependencies": { "uikit": "~2.24.3", "mithril": "~0.2.1", - "lodash": "~4.2.1" + "lodash": "~4.2.1", + "almond": "~0.3.1" } } diff --git a/build.js b/build.js new file mode 100644 index 0000000..86f7430 --- /dev/null +++ b/build.js @@ -0,0 +1,11 @@ +({ + baseUrl: "script", + paths: { + m: '../lib/mithril/mithril.min', + _: '../lib/lodash/dist/lodash.min', + requireLib: '../lib/requirejs/require' + }, + include: 'main', + name: "../lib/almond/almond", + out: "main-built.js" +}) diff --git a/data/resultats.yaml b/data/resultats.yaml index 6831714..aa1476e 100644 --- a/data/resultats.yaml +++ b/data/resultats.yaml @@ -6,8 +6,8 @@ name: Jeudi 2 juin home: gris away: jaune - home_points: ~ - away_points: ~ + home_points: 6 + away_points: 7 - date: 2016/06/02 # year/month/day @@ -15,16 +15,16 @@ name: Jeudi 2 juin home: bleu away: rouge - home_points: ~ - away_points: ~ + home_points: 9 + away_points: 2 - date: 2016/06/09 # year/month/day time: "18:00" name: Jeudi 9 juin home: bleu away: jaune - home_points: ~ - away_points: ~ + home_points: 7 + away_points: 6 - date: 2016/06/09 # year/month/day @@ -32,16 +32,16 @@ name: Jeudi 9 juin home: gris away: rouge - home_points: ~ - away_points: ~ + home_points: 4 + away_points: 8 - date: 2016/06/16 # year/month/day time: "18:00" name: Jeudi 16 juin home: bleu away: jaune - home_points: ~ - away_points: ~ + home_points: 4 + away_points: 7 - date: 2016/06/16 # year/month/day diff --git a/index.html b/index.html index e86515c..5dd5c31 100644 --- a/index.html +++ b/index.html @@ -6,16 +6,8 @@ - + - - - - - - - - diff --git a/package.json b/package.json index 95bea2c..08e5a16 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,8 @@ "gulp-bower": "0.0.13", "gulp-clean": "^0.3.1", "gulp-sass": "^2.1.1", - "gulp-task-listing": "^1.0.1" + "gulp-task-listing": "^1.0.1", + "requirejs": "^2.1.22" }, "devDependencies": { "gulp-webserver": "^0.9.1", diff --git a/script/calendarPage.js b/script/calendarPage.js deleted file mode 100644 index cbfb125..0000000 --- a/script/calendarPage.js +++ /dev/null @@ -1,130 +0,0 @@ -(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/main.js b/script/main.js new file mode 100644 index 0000000..8b8dedd --- /dev/null +++ b/script/main.js @@ -0,0 +1,16 @@ +requirejs.config({ + // baseUrl: 'lib', + paths: { + '_': '../lib/lodash/dist/lodash.min', + 'm': '../lib/mithril/mithril.min' + } +}); + + +requirejs(['m', 'views/mainPage', 'views/calendarPage'], function(m, mainPage, calendarPage){ + m.route.mode = "hash"; + m.route(document.body, "/", { + "/": mainPage, + "/calendrier": calendarPage, + }); +}); diff --git a/script/mainPage.js b/script/mainPage.js deleted file mode 100644 index 233b168..0000000 --- a/script/mainPage.js +++ /dev/null @@ -1,130 +0,0 @@ -(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 deleted file mode 100644 index 4b68c6a..0000000 --- a/script/phenix.js +++ /dev/null @@ -1,27 +0,0 @@ -(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/resultParser.js b/script/resultParser.js new file mode 100644 index 0000000..cb07f71 --- /dev/null +++ b/script/resultParser.js @@ -0,0 +1,64 @@ +define(['_'], function(_) { + var 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); + }; + + return resultParser; +}); diff --git a/script/results.js b/script/results.js deleted file mode 100644 index 286db82..0000000 --- a/script/results.js +++ /dev/null @@ -1,83 +0,0 @@ -(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 deleted file mode 100644 index ab92df2..0000000 --- a/script/structure.js +++ /dev/null @@ -1,65 +0,0 @@ -(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); diff --git a/script/teams.js b/script/teams.js new file mode 100644 index 0000000..da7bb25 --- /dev/null +++ b/script/teams.js @@ -0,0 +1,20 @@ +define(['m', '_'], function (m, _) { + var 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'; + } + }; + + return teams; +}); diff --git a/script/util.js b/script/util.js new file mode 100644 index 0000000..3e1d220 --- /dev/null +++ b/script/util.js @@ -0,0 +1,25 @@ +define(['m'], function(m) { + var util = {}; + util.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"; + }; + + util.facebookLink = function(){ + return m('a[href="https://www.facebook.com/LigueDeBalleLesPhenix"]', + m('i.fa.fa-facebook-square') + ); + }; + + return util; +}); diff --git a/script/views/calendarPage.js b/script/views/calendarPage.js new file mode 100644 index 0000000..fa26edb --- /dev/null +++ b/script/views/calendarPage.js @@ -0,0 +1,128 @@ +define(['m', '_', 'resultParser', 'teams', 'views/topNavBar', 'views/footer'], function(m, _, resultParser, teams, topNavBar, footer) { + var statsView = {}; + + statsView.controller = function(){ + var games = m.prop([]); + return m.request({method: "GET", url: "/api/resultats.json"}) + .then(games) + .then(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 = {}; + + schedulView.controller = function(){ + var games = m.prop([]); + return m.request({method: "GET", url: "/api/resultats.json"}) + .then(games) + .then(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)))); + }; + + calendarPage = {}; + + calendarPage.view = function(){ + return [m.component(topNavBar), + m('div.uk-grid', + m('div.uk-width-3-5.uk-push-1-5',[ + m.component(statsView), + m.component(schedulView)])), + m.component(footer)]; + }; + + return calendarPage; +}); diff --git a/script/views/footer.js b/script/views/footer.js new file mode 100644 index 0000000..e292bd4 --- /dev/null +++ b/script/views/footer.js @@ -0,0 +1,16 @@ +define(['m', '_', 'util'], function (m, _, util) { + var 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', util.facebookLink()) + ]) + ); + }; + + return footer; +}); diff --git a/script/views/mainPage.js b/script/views/mainPage.js new file mode 100644 index 0000000..a6d946d --- /dev/null +++ b/script/views/mainPage.js @@ -0,0 +1,130 @@ +define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], function (m, _ , util, resultParser, topNavBar, footer) { + 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') + ], util.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()) + ]); + }; + + var mainPage = {}; + + mainPage.view = function(){ + return [topNavBar.view(), + mainPageLogo.view(), + mainPageBottom.view(), + footer.view() + ]; + }; + + return mainPage; +}); diff --git a/script/views/topNavBar.js b/script/views/topNavBar.js new file mode 100644 index 0000000..d69d2fb --- /dev/null +++ b/script/views/topNavBar.js @@ -0,0 +1,42 @@ +define(['m', '_', 'util'], function (m, _, util) { + var topNavBar = {}; + + topNavBar._urlMapping = { + acceuil: 'Acceuil', + calendrier: 'Calendrier', + reglement: 'Règlement', + photos: 'Photos', + membre: 'Membre', + contact: 'Nous Joindre' + }; + + 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', util.facebookLink()), + _.map(topNavBar._urlMapping, topNavBar._getItem) + ) + ])]); + }; + + return topNavBar; +});