diff options
| -rw-r--r-- | public/partials/event.html | 0 | ||||
| -rw-r--r-- | public/partials/home.html | 5 | ||||
| -rw-r--r-- | public/partials/login.html | 15 | ||||
| -rw-r--r-- | public/partials/new.html | 20 | ||||
| -rw-r--r-- | public/scripts/app.js | 29 | ||||
| -rw-r--r-- | public/scripts/controllers.js | 39 | ||||
| -rw-r--r-- | public/stylesheets/style.css | 40 | ||||
| -rw-r--r-- | views/index.ejs | 50 |
8 files changed, 179 insertions, 19 deletions
diff --git a/public/partials/event.html b/public/partials/event.html new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/public/partials/event.html diff --git a/public/partials/home.html b/public/partials/home.html new file mode 100644 index 0000000..3646371 --- /dev/null +++ b/public/partials/home.html @@ -0,0 +1,5 @@ +<h1>{{title}}</h1> +<h2>Events</h2> + +<h2>New</h2> +<input type="button" onclick="newEvent()" value="+Event"></input> diff --git a/public/partials/login.html b/public/partials/login.html new file mode 100644 index 0000000..f3dd614 --- /dev/null +++ b/public/partials/login.html @@ -0,0 +1,15 @@ +<h1>{{title}}</h1> + +<!-- + Below we include the Login Button social plugin. This button uses + the JavaScript SDK to present a graphical Login button that triggers + the FB.login() function when clicked. +--> + +<fb:login-button scope="public_profile,email,user_friends" onlogin="checkLoginState();"> +</fb:login-button> + +<input type="button" onclick="logout()" value="logout"></input> + +<div id="status"> +</div> diff --git a/public/partials/new.html b/public/partials/new.html new file mode 100644 index 0000000..08793d8 --- /dev/null +++ b/public/partials/new.html @@ -0,0 +1,20 @@ +<h1>New Event</h1> +<h2>Details</h2> +<form> + <div class="input-group"> + <span class="input-group-addon">Date</span> + <input type="text" class="form-control" placeholder=""> + </div> + <div class="input-group"> + <span class="input-group-addon">Time</span> + <input type="text" class="form-control" placeholder=""> + </div> + <div class="input-group"> + <span class="input-group-addon">Location</span> + <input type="text" class="form-control" placeholder=""> + </div> +</form> +<h2>Invitees</h2> +<ul> + <li ng-repeat="friend in friends">{{friend.name}}</li> +</ul> diff --git a/public/scripts/app.js b/public/scripts/app.js new file mode 100644 index 0000000..de47a22 --- /dev/null +++ b/public/scripts/app.js @@ -0,0 +1,29 @@ +'use strict'; + + +// Declare app level module which depends on filters, and services +angular.module('app', [ + 'ngRoute', + 'app.controllers' +]) + .config(['$routeProvider', function($routeProvider) { + $routeProvider + .when('/', { + templateUrl: 'partials/login.html', + controller: 'loginController' + }) + .when('/home', { + templateUrl: 'partials/home.html', + controller: 'homeController' + }) + .when('/new-event', { + templateUrl: 'partials/new.html', + controller: 'newController' + }) + .when('/event', { + templateUrl: 'partials/event.html', + controller: 'eventController' + }).otherwise({ + redirectTo: '/' + }); + }]); diff --git a/public/scripts/controllers.js b/public/scripts/controllers.js new file mode 100644 index 0000000..048853e --- /dev/null +++ b/public/scripts/controllers.js @@ -0,0 +1,39 @@ +'use strict'; + +/* Controllers */ + +angular.module('app.controllers', []) + .controller('loginController', + ['$scope', '$routeParams', '$http', + function($scope, $routeParams, $http) { + $scope.title='Login' + }]) + .controller('homeController', + ['$scope', '$routeParams', '$http', + function($scope, $routeParams, $http) { + $scope.title='Home' + }]) + .controller('newController', + ['$scope', '$routeParams', '$http', + function($scope, $routeParams, $http) { + $scope.title='New Event' + + window.setTimeout(function(){ + console.log('calling'); + $http.get('https://graph.facebook.com/v2.2/' + + AUTH.userID + '/friends?access_token=' + + AUTH.accessToken + + '&format=json&method=get&pretty=0&suppress_http_code=1') + .success( + function(data) { + console.log(data); + $scope.friends = data.data; + } + ); + }, 3000); + }]) + .controller('eventController', + ['$scope', '$routeParams', '$http', + function($scope, $routeParams, $http) { + $scope.title='Event' + }]) diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 30e047d..edf2c4b 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -1,8 +1,38 @@ +/* Sticky footer styles +-------------------------------------------------- */ +html { + position: relative; + min-height: 100%; +} body { - padding: 50px; - font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; + /* Margin bottom by footer height */ + margin-bottom: 60px; +} +.footer { + position: absolute; + bottom: 0; + width: 100%; + /* Set the fixed height of the footer here */ + height: 60px; +} + + +/* Custom page CSS +-------------------------------------------------- */ +/* Not required for template or sticky footer method. */ + +body > .container { + padding: 60px 15px 0; +} +.container .text-muted { + margin: 20px 0; } -a { - color: #00B7FF; -}
\ No newline at end of file +.footer > .container { + padding-right: 15px; + padding-left: 15px; +} + +code { + font-size: 80%; +} diff --git a/views/index.ejs b/views/index.ejs index 4e478bc..ba6034e 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -1,14 +1,17 @@ <!DOCTYPE html> -<html> +<html ng-app="app"> <head> <title><%= title %></title> <meta charset="UTF-8"> +<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/slate/bootstrap.min.css' /> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> -<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> + <script> var AUTH = {}; + var USER = {}; + // This is called with the results from from FB.getLoginStatus(). function statusChangeCallback(response) { console.log('statusChangeCallback'); @@ -82,8 +85,7 @@ console.log('Welcome! Fetching your information.... '); FB.api('/me', function(response) { console.log('Successful login for: ' + response.name); - document.getElementById('status').innerHTML = - 'Thanks for logging in, ' + response.name + '!'; + USER = response; }); } @@ -106,19 +108,39 @@ } </script> -<!-- - Below we include the Login Button social plugin. This button uses - the JavaScript SDK to present a graphical Login button that triggers - the FB.login() function when clicked. ---> +<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> + <div class="container"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a class="navbar-brand" href="#">Sipping Point</a> + </div> + <div id="navbar" class="collapse navbar-collapse"> + <ul class="nav navbar-nav"> + </ul> + </div><!--/.nav-collapse --> + </div> +</nav> -<fb:login-button scope="public_profile,email,user_friends" onlogin="checkLoginState();"> -</fb:login-button> - -<input type="button" onclick="logout()" value="logout"></input> +<div class="container"></div> + <div ng-view></div> +</div> -<div id="status"> +<div class="footer"> + <div class="container"> + <p class="text-muted">©2014 Ultimate Developer Hack Team: Sipping Point</p> + </div> </div> +<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> +<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> +<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script> +<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-route.min.js"></script> +<script src="/scripts/app.js"></script> +<script src="/scripts/controllers.js"></script> </body> </html> |