[prev in list] [next in list] [prev in thread] [next in thread]
List: kde-commits
Subject: [bodega-webapp-client/emberjs] /: Implement the points functionality
From: Antonis Tsiapaliokas <kok3rs () gmail ! com>
Date: 2013-12-24 17:12:38
Message-ID: E1VvVX4-0000un-Tj () scm ! kde ! org
[Download RAW message or body]
Git commit 156cd770150507543110cf11cb96f01f71423a2f by Antonis Tsiapaliokas.
Committed on 24/12/2013 at 17:11.
Pushed by tsiapaliokas into branch 'emberjs'.
Implement the points functionality
M +1 -1 lib/emberhelper.js
M +1 -0 public/assets/app.js
M +104 -2 public/assets/participant.js
M +10 -0 public/assets/routes.js
A +109 -0 public/assets/templates/participantpoints.hbs
http://commits.kde.org/bodega-webapp-client/156cd770150507543110cf11cb96f01f71423a2f
diff --git a/lib/emberhelper.js b/lib/emberhelper.js
index 5e2a231..191048d 100644
--- a/lib/emberhelper.js
+++ b/lib/emberhelper.js
@@ -18,7 +18,7 @@
var fs = require('fs');
var path = require('path');
-var templateFiles = ['mainpage.hbs', 'channel.hbs', 'participant.hbs', 'participanthistory.hbs', \
'participantpaymentmethod.hbs', 'participantinfo.hbs']; +var templateFiles = ['mainpage.hbs', \
'channel.hbs', 'participant.hbs', 'participanthistory.hbs', 'participantpaymentmethod.hbs', \
'participantinfo.hbs', 'participantpoints.hbs']; var jsFiles = ['app.js', 'channels.js', \
'participant.js', 'routes.js', 'radioButton.js'];
var EmberHelper = (function() {
diff --git a/public/assets/app.js b/public/assets/app.js
index 0f5d06c..6f169c8 100755
--- a/public/assets/app.js
+++ b/public/assets/app.js
@@ -10,5 +10,6 @@ App.Router.map(function() {
this.resource('participantPaymentMethod', { path: '/participant/paymentMethod'});
this.resource('participantHistory', { path: '/participant/history' });
this.resource('participantInfo', { path: '/participant/info' });
+ this.resource('participantPoints', { path: '/participant/points' });
});
diff --git a/public/assets/participant.js b/public/assets/participant.js
index 5e5da1e..960ea93 100755
--- a/public/assets/participant.js
+++ b/public/assets/participant.js
@@ -19,7 +19,37 @@ App.Participant.reopenClass({
} else {
console.log('assetId' + assetId + 'doesn\'t exists!');
}
- }
+ },
+
+ pointsPrice: function() {
+ return Ember.Deferred.promise(function (p) {
+ p.resolve( $.ajax({url: 'http://localhost:3001/json/points/price' }).then(function(response) \
{ + return response;
+ }));
+ });
+ },
+
+ purchasePoints: function(pointsAmount) {
+ if (pointsAmount > 0) {
+ var pointsAmountData = {
+ 'amount': pointsAmount
+ };
+
+ return Ember.Deferred.promise(function (p) {
+ p.resolve( $.ajax({
+ url: 'http://localhost:3001/json/points/buy',
+ type: "POST",
+ dataType: "json",
+ data: pointsAmountData
+ }).then(function(response) {
+ return response;
+ }));
+ });
+ } else {
+ console.log('pointsAmount is less that 0. PointsAmount: ' + pointsAmount);
+ }
+ },
+
});
App.ParticipantInfo = Ember.Object.extend({
@@ -178,7 +208,6 @@ App.CreditCardComponent = Ember.Component.extend({
_this.cardDataIsValid(cardData);
_this.set('updatePaymentMethodRequested', true);
App.ParticipantPaymentMethod.updatePaymentMethod(cardData).then(function(response) {
- console.log(response)
if (response.error && response.error.type) {
_this.set('updatePaymentMethodError', response.error.type);
}
@@ -240,3 +269,76 @@ App.AccountPasswordComponent = Ember.Component.extend({
}
}
});
+
+App.ParticipantPointsComponent = Ember.Component.extend({
+ classNames: ['form-horizontal'],
+ tagName: 'form',
+ purchasePointsRequested: false,
+ pointsTypeChoice: 500,
+ validPoints: -1,
+ invalidAmountPoints: false,
+ pointsPrice: App.Participant.pointsPrice(),
+
+ eventManager: Ember.Object.create({
+ mouseEnter: function(event, view) {
+ var otherValuePointsCheckbox = $("#otherValuePointsCheckbox");
+ var pointsRadio = $('input[type="radio"]');
+
+ otherValuePointsCheckbox.click(function() {
+ pointsRadio.prop('checked', false);
+ })
+
+ pointsRadio.click(function() {
+ otherValuePointsCheckbox.prop('checked', false);
+ })
+ }
+ }),
+
+ calculatePoints: function(otherPointsAmount, pointsAmount) {
+ var _this = this;
+ var validPoints = _this.get('validPoints');
+ _this.get('pointsPrice').then(function(response) {
+ var realPrice = response.USD;
+
+ validPoints = pointsAmount > 0 ? pointsAmount : otherPointsAmount;
+ _this.set('validPoints', validPoints);
+ if (validPoints > 0) {
+ _this.set('pointsCost', validPoints * realPrice);
+ } else {
+ _this.set('pointsCost', 'You must select a valid number of points');
+ }
+ });
+ },
+
+ actions: {
+ purchasePoints: function(otherPointsAmount, pointsAmount) {
+ var _this = this;
+ var validPoints = _this.get('validPoints');
+
+ validPoints = pointsAmount > 0 ? pointsAmount : otherPointsAmount;
+ if (validPoints) {
+ _this.set('purchasePointsRequested', true);
+ _this.set('invalidAmountPoints', false);
+ App.Participant.purchasePoints(validPoints).then(function(response) {
+ console.log(response)
+ if (response.error && response.error.type) {
+ _this.set('purchasePointsError', response.error.type);
+ }
+ });
+ } else {
+ _this.set('invalidAmountPoints', true);
+ }
+
+ //After the purchase is being finished,
+ //we are closing the modal manualy.
+ $("#purchasePointsModal").modal('hide');
+ },
+
+ modalConfirm: function(otherPointsAmount, pointsAmount) {
+ $("#purchasePointsModal").modal('show');
+
+ var _this = this;
+ _this.calculatePoints(otherPointsAmount, pointsAmount);
+ }
+ }
+});
diff --git a/public/assets/routes.js b/public/assets/routes.js
index 25eb119..8bda434 100755
--- a/public/assets/routes.js
+++ b/public/assets/routes.js
@@ -38,3 +38,13 @@ App.ParticipantHistoryRoute = Ember.Route.extend({
}
});
+
+App.ParticipantPointsRoute = Ember.Route.extend({
+ //We don't need to load any information in order to
+ //purchase some points. But we are creating an empty model
+ //because it is being required by emberjs.
+ model: function(params) {
+ return [];
+ }
+});
+
diff --git a/public/assets/templates/participantpoints.hbs \
b/public/assets/templates/participantpoints.hbs new file mode 100644
index 0000000..e7a78d0
--- /dev/null
+++ b/public/assets/templates/participantpoints.hbs
@@ -0,0 +1,109 @@
+<script type="text/x-handlebars" data-template-name="participantPoints">
+
+ {{participant-points}}
+
+</script>
+
+
+<script type="text/x-handlebars" data-template-name="components/participant-points">
+ <fieldset>
+
+ <!-- Update purchase points progress -->
+ {{#if purchasePointsRequested}}
+ {{#if purchasePointsError}}
+ <div class="alert alert-error">
+ <button type="button" class="close" data-dismiss="alert">×</button>
+ <h3>An error has occur {{purchasePointsError}}</h3>
+ </div>
+ {{else}}
+ <div class="alert alert-success">
+ <button type="button" class="close" data-dismiss="alert">×</button>
+ <h3>Your points has been purchased successfully</h3>
+ </div>
+ {{/if}}
+ {{/if}}
+
+ <!-- Text input-->
+ <div class="control-group">
+ <label class="control-label" for="redeemCode">Redeem Code</label>
+ <div class="controls">
+ {{input id="redeemCode" name="redeemCode" type="text" placeholder="Enter Your Code" \
value=redeemCode class="input-xlarge"}} + </div>
+ </div>
+
+ <!-- Button -->
+ <div class="control-group">
+ <label class="control-label" for="reddemButton"></label>
+ <div class="controls">
+ <button id="reddemButton" name="reddemButton" class="btn btn-primary">Reddem</button>
+ </div>
+ </div>
+
+ <!-- Multiple Radios -->
+ <div class="control-group">
+ <label class="control-label" for="pointsRadio">Purchase Points</label>
+ <div class="controls">
+ <label class="radio" for="pointsRadio-0">
+ {{view Ember.RadioButton name="pointsTypeSelection" selectionBinding="pointsTypeChoice" \
value="500"}} + 500
+ </label>
+ <label class="radio" for="pointsRadio-1">
+ {{view Ember.RadioButton name="pointsTypeSelection" selectionBinding="pointsTypeChoice" \
value="1000"}} + 1000
+ </label>
+ <label class="radio" for="pointsRadio-2">
+ {{view Ember.RadioButton name="pointsTypeSelection" selectionBinding="pointsTypeChoice" \
value="5000"}} + 5000
+ </label>
+ <label class="radio" for="pointsRadio-3">
+ {{view Ember.RadioButton name="pointsTypeSelection" selectionBinding="pointsTypeChoice" \
value="10000"}} + 10000
+ </label>
+ </div>
+ </div>
+
+ <!-- Prepended checkbox -->
+ <div class="control-group">
+ <label class="control-label" for="otherValuePoints"></label>
+ <div class="controls">
+ <div class="input-prepend">
+ <span class="add-on">
+ <label class="checkbox">
+ <input id="otherValuePointsCheckbox" type="checkbox">
+ </label>
+ </span>
+ {{input id="otherValuePoints" name="otherValuePoints" class="input-medium" type="text" \
value=otherPointsAmount placeholder="Other Value"}} + </div>
+ </div>
+ </div>
+
+ <!-- Button -->
+ <div class="control-group">
+ <label class="control-label" for="purchaseButton"></label>
+ <div class="controls">
+ <a {{action 'modalConfirm' otherPointsAmount pointsTypeChoice}} role="button" class="btn \
btn-primary" data-toggle="modal">Purchase</a> + <!-- Button to trigger modal -->
+
+ <!-- Modal -->
+ <div id="purchasePointsModal" class="modal hide fade" tabindex="-1" role="dialog" \
aria-labelledby="myModalLabel" aria-hidden="true"> + <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+ <h3 id="myModalLabel">Purchase Points</h3>
+ </div>
+ <div class="modal-body">
+ <p>You are about to purchase {{validPoints}} for {{pointsCost}} USD</p>
+ </div>
+ <div class="modal-footer">
+ <button class="btn" data-dismiss="modal" aria-hidden="true">Not Now</button>
+ <button {{action 'purchasePoints' otherPointsAmount pointsTypeChoice}} class="btn \
btn-primary">Purchase Now!</button> + </div>
+ </div>
+ </div>
+ </div>
+ </fieldset>
+
+</script>
+
+
+
+
[prev in list] [next in list] [prev in thread] [next in thread]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic