[prev in list] [next in list] [prev in thread] [next in thread]
List: kde-commits
Subject: [bodega-webapp-client/emberjs] /: We don't need a component for the participantpoints.
From: Antonis Tsiapaliokas <kok3rs () gmail ! com>
Date: 2014-01-02 14:34:13
Message-ID: E1VyjLh-00046f-U9 () scm ! kde ! org
[Download RAW message or body]
Git commit b059e03d195cf137608cf141b051a5ccf6d23bdc by Antonis Tsiapaliokas.
Committed on 02/01/2014 at 14:30.
Pushed by tsiapaliokas into branch 'emberjs'.
We don't need a component for the participantpoints.
Instead we use a controller and a view to replace the
existing functionality.
M +1 -1 lib/emberhelper.js
M +55 -0 public/assets/controllers/participant.js
M +0 -73 public/assets/participant.js
M +83 -87 public/assets/templates/participantpoints.hbs
A +21 -0 public/assets/views/participant.js
http://commits.kde.org/bodega-webapp-client/b059e03d195cf137608cf141b051a5ccf6d23bdc
diff --git a/lib/emberhelper.js b/lib/emberhelper.js
index ddddb37..fea02f0 100644
--- a/lib/emberhelper.js
+++ b/lib/emberhelper.js
@@ -19,7 +19,7 @@ var fs = require('fs');
var path = require('path');
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', \
'controllers/participant.js']; +var jsFiles = ['app.js', 'channels.js', 'participant.js', 'routes.js', \
'radioButton.js', 'controllers/participant.js', 'views/participant.js'];
var EmberHelper = (function() {
diff --git a/public/assets/controllers/participant.js b/public/assets/controllers/participant.js
index e573cbe..6e9d52c 100755
--- a/public/assets/controllers/participant.js
+++ b/public/assets/controllers/participant.js
@@ -42,3 +42,58 @@ App.ParticipantInfoController = Ember.ObjectController.extend({
},
});
+App.ParticipantPointsController = Ember.ObjectController.extend({
+ purchasePointsRequested: false,
+ pointsTypeChoice: 500,
+ validPoints: -1,
+ invalidAmountPoints: false,
+ pointsPrice: App.Participant.pointsPrice(),
+
+ 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/participant.js b/public/assets/participant.js
index 6746612..ad012e8 100755
--- a/public/assets/participant.js
+++ b/public/assets/participant.js
@@ -209,79 +209,6 @@ App.CreditCardComponent = 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);
- }
- }
-});
-
App.ParticipantHistory = Ember.Object.extend({
localeDate: function() {
var date = new Date(this.get('date'));
diff --git a/public/assets/templates/participantpoints.hbs \
b/public/assets/templates/participantpoints.hbs index e7a78d0..7a65334 100644
--- a/public/assets/templates/participantpoints.hbs
+++ b/public/assets/templates/participantpoints.hbs
@@ -1,106 +1,102 @@
<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>
+ <form class="form-horizontal">
+ <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}}
- {{/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"}} + <!-- 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>
- </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>
+ <!-- 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>
- </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>
+ <!-- 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>
- </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"}} + <!-- 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>
- </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> + <!-- 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>
- </div>
- </fieldset>
+ </fieldset>
+ </form>
</script>
diff --git a/public/assets/views/participant.js b/public/assets/views/participant.js
new file mode 100644
index 0000000..fe56aec
--- /dev/null
+++ b/public/assets/views/participant.js
@@ -0,0 +1,21 @@
+App.ParticipantPointsView = Ember.View.extend({
+ eventManager: Ember.Object.create({
+ mouseEnter: function(event, view) {
+ //On our form we prove two methods of purchasing points.
+ //the first one is a radio group and the second one is a
+ //an input field where the desired amount will be field in.
+ //So the following jquery code unchecks the radio group
+ //if the input field has a number inside and the other way around.
+ var otherValuePointsCheckbox = $("#otherValuePointsCheckbox");
+ var pointsRadio = $('input[type="radio"]');
+
+ otherValuePointsCheckbox.click(function() {
+ pointsRadio.prop('checked', false);
+ })
+
+ pointsRadio.click(function() {
+ otherValuePointsCheckbox.prop('checked', false);
+ })
+ }
+ })
+});
[prev in list] [next in list] [prev in thread] [next in thread]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic