Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Front-end goodness and wiring up

  • Loading branch information...
commit 9b5b35452f512cd6e44d0408ef1f989edbee5e5f 1 parent c10692b
@iplanwebsites authored
View
14 public/js/app/model_constant.js
@@ -0,0 +1,14 @@
+var Constant = Backbone.Model.extend({
+
+ initialize: function() {
+ // Fetch user from server...
+ // do local stuff, possibly validation, units, etc
+ //console.log('user created locally');
+ //log(this);
+ },
+
+ author: function() { }
+
+
+});
+
View
8 public/js/app/router.js
@@ -7,6 +7,7 @@ var FRouter = Backbone.Router.extend({
'/location': 'location',
'/dashboard': 'dashboard',
'/reserve': 'reserve',
+ '/pay': 'pay',
'/search/:query': 'search',
'/search/:query/p:page': 'search',
'/help': 'help'
@@ -19,11 +20,14 @@ var FRouter = Backbone.Router.extend({
$('section#' + s).show();
},
reserve: function (s) {
- this.section('reserve:');
+ this.section('reserve');
},
location: function (user_id) {
this.section('location');
},
+ pay: function () {
+ this.section('pay');
+ },
driver: function (user_id) {
this.section('driver');
},
@@ -57,7 +61,7 @@ var FRouter = Backbone.Router.extend({
$(css_selector).click(function (e) {
//alert('click!');
var h = $(this).attr('href');
- log(h);
+ log('ROUTE: '+h);
if ((h.indexOf('http://') != 0) && (!$(this).hasClass('norun')) && (h != "")) { // if it's not an external link...
// TODO: if CTRL key was pressed, let default happen... (open in a new page...)
e.preventDefault();
View
11 public/js/app/start.js
@@ -3,12 +3,16 @@ $(function(){
app = {};
// First, we fetch data from Server...
+
+
+
+
$.get('/api/user', function(data){
log(data);
app.user = new User(data);
$('body').addClass('logged').removeClass('not-logged');
app.router = new FRouter();
- var route_has_run = Backbone.history.start({pushState: false});
+ var route_has_run = Backbone.history.start({pushState: true});
log(Backbone);
if(!route_has_run) app.router.navigate('home', {trigger: true});
@@ -18,6 +22,11 @@ $(function(){
});
+ $.get('/api/constant', function(data){
+ app.constant = new Constant(data);
+ stripe_setup( app.constant.get('FACEBOOK_APP_ID') );//setup stripe
+ });
+
// TODO: The ROutes arent running, create a basic nav...
View
56 public/js/app/stripe_setup.js
@@ -3,9 +3,33 @@
// Payment Provider
////////////////////////////////////////////////////////////////
// stripe_key = '<%= process.env.STRIPE_PUBLIC_DEV %>';
- Stripe.setPublishableKey(stripe_key);
+function stripe_setup(stripe_key){
+ Stripe.setPublishableKey(stripe_key);
+ log('Stripe has been setup:' + stripe_key);
+ //Wire Form Action// http://stripe.com/docs/tutorials/forms
+ $("#payment-form input #cc-amount").value(app.constant.get('BASE-PRICE'))
+ $("#payment-form").submit(function(event) {
+ log('submit');
+ $('#error').hide();
+ // disable the submit button to prevent repeated clicks
+ $('.submit-button').attr("disabled", "disabled");
- function stripeResponseHandler (status, response) {
+ var amount = $('#cc-amount').val(); // amount you want to charge in cents
+ Stripe.createToken({
+ number: $('.card-number').val(),
+ cvc: $('.card-cvc').val(),
+ exp_month: $('.card-expiry-month').val(),
+ exp_year: $('.card-expiry-year').val()
+ }, amount, stripeResponseHandler);
+
+ // prevent the form from submitting with the default action
+ return false;
+ });
+
+}
+
+
+function stripeResponseHandler (status, response) {
log(response);
if (response.error) {
$('#error').text(response.error.message);
@@ -32,28 +56,10 @@
$('.submit-button').removeAttr("disabled");
}
);
- }
-
-
- $(function(){ //doc ready
- // http://stripe.com/docs/tutorials/forms
- $("#payment-form").submit(function(event) {
- log('submit');
- $('#error').hide();
- // disable the submit button to prevent repeated clicks
- $('.submit-button').attr("disabled", "disabled");
-
- var amount = $('#cc-amount').val(); // amount you want to charge in cents
- Stripe.createToken({
- number: $('.card-number').val(),
- cvc: $('.card-cvc').val(),
- exp_month: $('.card-expiry-month').val(),
- exp_year: $('.card-expiry-year').val()
- }, amount, stripeResponseHandler);
-
- // prevent the form from submitting with the default action
- return false;
- });
- })
+}
+
+
+
+
View
239 views/index.ejs
@@ -66,7 +66,9 @@
<script src="/js/libs/LAB.min.js"></script> <!-- Script Loader-->
<script type="text/javascript">
var minification = false;
- var debug = (window.location.hostname == '127.0.0.1');
+ if(window.location.hostname == '127.0.0.1'){ debug = true; }else{ debug = false;}
+ function log(s){if(debug){return console.log(s);}} //shortcut, local only
+
$LAB
// LIBS
.script("/js/libs/modernizr-2.5.3.min.js").wait()
@@ -94,6 +96,7 @@
// APP
.script("/js/app/stripe_setup.js")
.script("/js/app/router.js")
+ .script("/js/app/model_constant.js")
.script("/js/app/user.js")
.wait()
.script("/js/app/start.js")// instanciation and configuration of main objets
@@ -114,12 +117,12 @@
<script type="text/javascript">
- var debug = <%= app.debug %>;
- stripe_key = '<%= process.env.STRIPE_PUBLIC_DEV %>'; //required in a script...
+ //var debug = <%= app.debug %>;
+ // stripe_key = '<%= process.env.STRIPE_PUBLIC_DEV %>'; //not needed anymore
+
- function log(s){return console.log(s);} //shortcut
@@ -228,6 +231,8 @@
+
+
<!-- navbar -->
<div class="navbar navbar-fixed-top">
@@ -238,26 +243,24 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
- <a class="brand" href="/">Project name</a>
+ <a class="brand" href="#/" class="route">App Stack</a>
<div class="nav-collapse">
<ul class="nav">
- <li class="active"><a href="/#">Home</a></li>
- <li><a href="/#location">/#location</a></li>
- <li><a href="/location">/location</a></li>
- <li><a href="#/dashboard">#location</a></li>
- <li><a href="#/location">#/location</a></li>
- <li><a href="#dashboard">Dashboard</a></li>
- <li><a href="#">Link</a></li>
+ <li class="active"><a href="#/" class="route">Home</a></li>
+ <li><a href="#/dashboard" class="route">Dashboard</a></li>
+ <li><a href="#/location" class="route">Location</a></li>
+ <li><a href="#/pay" class="route">Pay</a></li>
+ <li><a href="#" class="route">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
+ <li><a href="#" class="route">Action</a></li>
+ <li><a href="#" class="route">Another action</a></li>
+ <li><a href="#" class="route">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
- <li><a href="#">Separated link</a></li>
- <li><a href="#">One more separated link</a></li>
+ <li><a href="#" class="route">Separated link</a></li>
+ <li><a href="#" class="route">One more separated link</a></li>
</ul>
</li>
</ul>
@@ -265,16 +268,16 @@
<input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav pull-right">
- <li><a href="#">Link</a></li>
+ <li><a href="#" class="external">@twitter</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
+ <li><a href="#" class="route">Action</a></li>
+ <li><a href="#" class="route">Another action</a></li>
+ <li><a href="#" class="route">Something else here</a></li>
<li class="divider"></li>
- <li><a href="#">Separated link</a></li>
+ <li><a href="#" class="route">Separated link</a></li>
</ul>
</li>
</ul>
@@ -289,194 +292,62 @@
<div class="container">
+
+ <p id="picture" style="background-image: url(https://graph.facebook.com/XXXXXXXXXXX/picture?type=normal)"></p>
+ <h1>Welcome, <strong>XXXXXXXXXXX</strong></h1>
+
- <header class="clearfix">
- <% if (user) { %>
- <p id="picture" style="background-image: url(https://graph.facebook.com/<%= user.id %>/picture?type=normal)"></p>
-
- <div>
- <h1>Welcome, <strong><%= user.name %></strong></h1>
- <p class="tagline">
- This is your app
- <a href="<%= app.link %>" target="_top"><%= app.name %></a>
- </p>
-
- <div id="share-app">
- <p>Share your app:</p>
- <ul>
- <li>
- <a href="#" class="facebook-button" id="postToWall" data-url="<%= url() %>">
- <span class="plus">Post to Wall</span>
- </a>
- </li>
- <li>
- <a href="#" class="facebook-button speech-bubble" id="sendToFriends" data-url="<%= url() %>">
- <span class="speech-bubble">Send Message</span>
- </a>
- </li>
- <li>
- <a href="#" class="facebook-button apprequests" id="sendRequest" data-message="Test this awesome app">
- <span class="apprequests">Send Requests</span>
- </a>
- </li>
- </ul>
- </div>
- </div>
- <% } else { %>
- <div>
- <h1>Welcome</h1>
- <div class="fb-login-button" data-scope="user_likes,user_photos,user_photo_video_tags,email,user_location,user_website,user_religion_politics,user_interests,user_education_history,user_birthday,user_about_me"></div>
-
- works: user_likes,user_photos,user_photo_video_tags,email
-
- ,user_work_history,offline_access,location,friends,languages,user_website
- </div>
- <% } %>
- </header>
+
+
<section id="get-started">
<p>Welcome to your Facebook app, running on <span>heroku</span>!</p>
<a href="https://devcenter.heroku.com/articles/facebook" target="_top" class="button">Learn How to Edit This App</a>
</section>
- <% if (user) { %>
-
- <section id="samples" class="clearfix">
- <h1>Examples of the Facebook Graph API</h1>
-
- <div class="list">
- <h3>A few of your friends</h3>
- <ul id="friends" class="friends">
- <% req.friends.forEach(function(friend) { %>
- <li>
- <a href="https://www.facebook.com/<%= friend.id %>" target="_top">
- <img src="https://graph.facebook.com/<%= friend.id %>/picture?type=square" alt="<%= friend.name %>">
- <%= friend.name %>
- </a>
- </li>
- <% }); %>
- </ul>
- </div>
-
- <div class="list inline">
- <h3>Recent photos</h3>
- <ul id="photos" class="photos">
- <% req.photos.forEach(function(photo) { %>
- <li style="background-image: url(<%= photo.picture %>>);" class="<%= photo.link %>">
- <a href="<%= photo.link %>>" target="_top"></a>
- </li>
- <% }); %>
- </ul>
- </div>
-
- <div class="list">
- <h3>Things you like</h3>
- <ul id="likes" class="things">
- <% req.likes.forEach(function(like) { %>
- <li>
- <a href="https://www.facebook.com/<%= like.id %>" target="_top">
- <img src="https://graph.facebook.com/<%= like.id %>/picture?type=square" alt="<%= like.name %>">
- <%= like.name %>
- </a>
- </li>
- <% }); %>
- </ul>
- </div>
+
- <div class="list">
- <h3>Friends using this app</h3>
- <ul id="friends_using_app" class="friends">
- <% req.friends_using_app.forEach(function(friend) { %>
- <li>
- <a href="https://www.facebook.com/<%= friend.id %>>" target="_top">
- <img src="https://graph.facebook.com/<%= friend.id %>>/picture?type=square" alt="<%= friend.name %>">
- <%= friend.name %>
- </a>
- </li>
- <% }); %>
- </ul>
+ <section id="promo">
+ <h1> Promo page! here, you can login, and that's about it...</h1>
+ <div class="fb-login-button" data-scope="user_likes,user_photos,user_photo_video_tags,email,user_location,user_website,user_religion_politics,user_interests,user_education_history,user_birthday,user_about_me">
</div>
-
- </section>
-
- <% } %>
-
- <section id="guides" class="clearfix">
- <h1>Learn More About Heroku &amp; Facebook Apps</h1>
- <ul>
- <li>
- <a href="https://www.heroku.com/?utm_source=facebook&utm_medium=app&utm_campaign=fb_integration" target="_top" class="icon heroku">Heroku</a>
- <p>Learn more about <a href="https://www.heroku.com/?utm_source=facebook&utm_medium=app&utm_campaign=fb_integration" target="_top">Heroku</a>, or read developer docs in the Heroku <a href="https://devcenter.heroku.com/" target="_top">Dev Center</a>.</p>
- </li>
- <li>
- <a href="https://developers.facebook.com/docs/guides/web/" target="_top" class="icon websites">Websites</a>
- <p>
- Drive growth and engagement on your site with
- Facebook Login and Social Plugins.
- </p>
- </li>
- <li>
- <a href="https://developers.facebook.com/docs/guides/mobile/" target="_top" class="icon mobile-apps">Mobile Apps</a>
- <p>
- Integrate with our core experience by building apps
- that operate within Facebook.
- </p>
- </li>
- <li>
- <a href="https://developers.facebook.com/docs/guides/canvas/" target="_top" class="icon apps-on-facebook">Apps on Facebook</a>
- <p>Let users find and connect to their friends in mobile apps and games.</p>
- </li>
- </ul>
-
</section>
+ <section id="location">
+ <h1> So, what's your thing?</h1>
+ <form action="/api/setlocation" method="POST" id="location-form" class="well">
+ <div class="form-row">
+ <div class="cc-text">From</div>
+ <input type="text" size="30" autocomplete="off" class=""/>
+ </div>
+ <div class="form-row">
+ <div class="cc-text">To</div>
+ <input type="text" size="4" autocomplete="off" class=""/>
+ </div>
+
+
+ <button type="submit" class="submit-button">Submit Payment</button>
+ </form>
+ </section>
-
- <section id="misc">
-
+ <section id="misc">
facepile...
- <!--
- <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=102452128776&amp;xfbml=1"></script><fb:facepile></fb:facepile>
- Hadcoded APP ID !!
-
-102452128776 farmville
-263229590416899 FB dev
-
-24 photos 306188538557
- <br>
- 22
-
- <iframe src="//www.facebook.com/plugins/facepile.php?href=http%3A%2F%2Fdevelopers.facebook.com&amp;size=large&amp;max_rows=1&amp;width=300&amp;colorscheme=light&amp;appId=218936571546789" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px;" allowTransparency="true"></iframe>
- <hr/>
- <iframe src="//www.facebook.com/plugins/facepile.php?href=http%3A%2F%2F24photos.org&amp;size=large&amp;max_rows=1&amp;width=300&amp;colorscheme=light&amp;appId=218936571546789" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px;" allowTransparency="true"></iframe>
-
- -->
- <hr/>
-
- <!-- TODO: set the facepile in a wrapper to remove FOUC. -->
+ <!-- TODO: set the facepile in a wrapper to remove FOUC. ALso very SLOW -->
<div class="fb-facepile" data-href="http://24photos.org" data-size="large" data-max-rows="1" data-width="300"></div>
-
-
-
- <!--
- <br>
- 3333
- <iframe src="//www.facebook.com/plugins/facepile.php?appId=102452128776&amp;size=large&amp;max_rows=1&amp;width=300&amp;colorscheme=light&amp;appId=218936571546789" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px;" allowTransparency="true"></iframe>
- -->
+
<br>
-
</section>
- <section id="payment">
+ <section id="pay">
<div id="stripe-form">
<form action="/plans/browserling_developer" method="POST" id="payment-form" class="well">
View
55 web.js
@@ -75,10 +75,12 @@ app.dynamicHelpers({
},
});
+
+
function render_page(req, res) {
req.facebook.app(function (app) {
req.facebook.me(function (user) {
- res.render('index.ejs', {
+ res.render('fb_test.ejs', {
layout: false,
req: req,
app: app,
@@ -89,6 +91,14 @@ function render_page(req, res) {
}
+function index(req, res){ //TODO: MAKE the delivery 100% static, no node processing.
+ res.render('index.ejs', {
+ layout: false,
+ req: req,
+ app: app
+ });
+}
+
///////////////////////////////////////////////////////////////////
// email server
////////////////////////////////////////////////////////////////
@@ -146,7 +156,7 @@ app.get('/pay', function (req, res) {
///////////////////////////////////////////////////////////////////
-// FB connect //http://howtonode.org/facebook-connect
+// FB Demo Fetch (garbage) -loooong //http://howtonode.org/facebook-connect
////////////////////////////////////////////////////////////////
function handle_facebook_request(req, res) { // default facebook example, Do some fetches on facebook graph asyncrounously
@@ -199,18 +209,21 @@ function handle_facebook_request(req, res) { // default facebook example, Do som
////////////////////////////////////////////////////////////////
-app.get('/', handle_facebook_request);
-app.post('/', handle_facebook_request);
-app.get('/location', handle_facebook_request);
-app.get('/commute', handle_facebook_request);
-app.get('/promo', handle_facebook_request);
-app.get('/driver', handle_facebook_request);
-app.get('/passenger', handle_facebook_request);
-app.get('/driver/:user_id', handle_facebook_request);
-app.get('/passenger/:user_id', handle_facebook_request);
-app.get('/dashboard', handle_facebook_request);
-app.get('/home', handle_facebook_request);
-app.get('/settings', handle_facebook_request);
+app.get('/', index);
+app.post('/', handle_facebook_request); //required??
+app.get('/location', index);
+app.get('/commute', index);
+app.get('/promo', index);
+app.get('/driver', index);
+app.get('/passenger', index);
+app.get('/driver/:user_id', index);
+app.get('/passenger/:user_id', index);
+app.get('/dashboard', index);
+app.get('/home', index);
+app.get('/settings', index);
+
+
+app.get('/fb', handle_facebook_request);
app.get('/echo', function (req, res) {
echo = req.param("echo", "no param")
@@ -245,8 +258,18 @@ app.get('/me', function (req, res) {
});
});
-
-
+///////////////////////////////////////////////////////////////////
+// CONSTANTS
+////////////////////////////////////////////////////////////////
+app.get('/api/constant', function (req, res) {
+ var c={
+ FACEBOOK_APP_ID: process.env.FACEBOOK_APP_ID,
+ STRIPE_PUBLIC_DEV: process.env.STRIPE_PUBLIC_DEV,
+ STRIPE_PUBLIC: process.env.STRIPE_PUBLIC,
+ BASE_PRICE: 1900
+ }
+ res.send(c);
+});
///////////////////////////////////////////////////////////////////
// USER data, and facebook fetching
////////////////////////////////////////////////////////////////
Please sign in to comment.
Something went wrong with that request. Please try again.