From f95f0cc29b58c257f32a05465e529f0ce6eea838 Mon Sep 17 00:00:00 2001
From: snogcel <ledniknoj@gmail.com>
Date: Thu, 15 Dec 2016 21:49:38 -0700
Subject: [PATCH] calculate total proposal amount

---
 index.html         | 42 +++++++++++++++++++++++++++++++++++++-----
 js/paymentCycle.js | 46 ++++++++++++++++++++++++++++++----------------
 2 files changed, 67 insertions(+), 21 deletions(-)

diff --git a/index.html b/index.html
index b5a8c00..279752e 100755
--- a/index.html
+++ b/index.html
@@ -68,6 +68,29 @@
             $('#mainnet').change(function() { gov = init('mainnet', mainnetProvider); });
             $('#testnet').change(function() { gov = init('testnet', testnetProvider); });
 
+            $('#start_epoch').change(function() {
+                paymentCycle.selectedStartIndex = $('#start_epoch').find(':selected').data('index');
+                paymentCycle.updateEndEpoch();
+            });
+
+            $('#end_epoch').change(function() {
+                paymentCycle.selectedPeriods = $('#end_epoch').find(':selected').data('index');
+
+                var payment_amount = parseInt($('#payment_amount').val());
+                var periods = parseInt(paymentCycle.selectedPeriods+1);
+
+                $('#total_amount').text(payment_amount * periods);
+            });
+
+            $('#payment_amount').change(function() {
+                paymentCycle.selectedPeriods = $('#end_epoch').find(':selected').data('index');
+                
+                var payment_amount = parseInt($('#payment_amount').val());
+                var periods = parseInt(paymentCycle.selectedPeriods+1);
+
+                $('#total_amount').text(payment_amount * periods);
+            });
+
             $("#time").val(Math.floor((new Date).getTime() / 1000));
 
             $('#prepareProposal').click(function() {
@@ -242,7 +265,7 @@
                 <div class="row" id="createProposalHeader">
                     <div class="col-xs-12">
                         <h1 class="removeMargin">Create a Proposal</h1>
-                        <h5 class="header_description">Enter details for your proposal and click 'Create Proposal'.  This will generate a command you can run in your local wallet to prepare the proposal at a cost of 0.33 Dash</h5>
+                        <h5 class="header_description">Enter details for your proposal and click 'Create Proposal'.  This will generate a command you can run in your local wallet to prepare the proposal at a cost of 0.33 DASH</h5>
                     </div>
                 </div>
 
@@ -263,7 +286,7 @@
                   <div class="row">
                     <div class="col-xs-3">
                       <div class="form-group">
-                          <label for="start_epoch">Start Date:</label>
+                          <label for="start_epoch">First Payment:</label>
                           <select name="start_epoch" class="form-control" id="start_epoch"></select>
                       </div>
                     </div>
@@ -275,7 +298,7 @@
                       <!--  -->
                       <!-- The following form group is a placeholder for proposal end time. Please change to the correct id. -->
                       <div class="form-group">
-                          <label for="start_epoch">Number of Payments:</label>
+                          <label for="start_epoch">Last Payment:</label>
                           <select name="start_epoch" class="form-control" id="end_epoch"></select>
                       </div>
                       <!--  -->
@@ -293,7 +316,7 @@
                   <div class="row">
                     <div class="col-xs-7">
                       <div class="form-group">
-                          <label for="payment_amount">Monthly Payment Amount in Dash:</label>
+                          <label for="payment_amount">Payment Amount:</label>
                           <input type="text" class="form-control" id="payment_amount" value="" placeholder="0">
                       </div>
                     </div>
@@ -308,6 +331,15 @@
                     </div>
                   </div>
 
+                    <div class="row">
+                        <div class="col-xs-12">
+                            <div class="form-group">
+                                <label for="total_amount">Total Amount: </label>
+                                <span id="total_amount">0</span> <span>DASH</span>
+                            </div>
+                        </div>
+                    </div>
+
                   <div class="form-group" style="display:none;">
                       <label for="type">type:</label>
                       <input type="text" class="form-control" id="type" value="1" placeholder="1">
@@ -358,7 +390,7 @@
 
                         <div class="form-group">
                             <label for="prepareProposal">Prepare-Proposal Command:</label>
-                            <div>Paste this proposal command into your Dash wallet console to spend a Fee transaction of 0.33 DASH.</div>
+                            <div>Paste this proposal command into your wallet console to spend a Fee transaction of 0.33 DASH.</div>
                             <textarea readonly class="form-control" id="prepareProposal" rows="4" placeholder=""></textarea>
                         </div>
 
diff --git a/js/paymentCycle.js b/js/paymentCycle.js
index be21df0..4d6296b 100755
--- a/js/paymentCycle.js
+++ b/js/paymentCycle.js
@@ -12,11 +12,17 @@ function PaymentCycle(gov, provider) {
     this.paymentCycle = 16616; // mainnet
     this.budgetCycles = 24;
 
+    this.selectedStartIndex = 0;
+    this.selectedPeriods = 1;
+
     if (this.network == 'testnet') this.paymentCycle = 24;
     if (this.network == 'testnet') this.budgetCycles = 96;
 
     this.blockHeight = null;
 
+    this.startDate = [];
+    this.endDate = [];
+
     this.Messages = {
         paymentCycle: {
             months: "Months",
@@ -89,31 +95,28 @@ PaymentCycle.prototype.updateDropdowns = function() {
 
     var blockHeight = this.blockHeight;
 
-    var startDate = [];
-    var endDate = [];
-
     for (i = 0; i < this.budgetCycles + 1; i++) {
 
         var superblock = this.getNextSuperblock(blockHeight);
         var timestamp = this.getBlockTimestamp(superblock);
 
         var label = new Date(timestamp).toLocaleDateString();
-        if (this.network == 'testnet') label = new Date(timestamp).toLocaleString();
+        if (this.network == 'testnet') label += " @ " + new Date(timestamp).toLocaleTimeString();
 
         var superblockDate = {
             superblock: superblock,
             timestamp: timestamp,
             label: label
         };
-        startDate.push(superblockDate);
-        endDate.push(superblockDate);
+        this.startDate.push(superblockDate);
+        this.endDate.push(superblockDate);
 
         blockHeight = superblock;
 
     }
 
-    endDate.shift(); // remove first element of endDate
-    startDate.pop(); // remove last element of startDate to keep length even
+    this.endDate.shift(); // remove first element of endDate
+    this.startDate.pop(); // remove last element of startDate to keep length even
 
     var now = Math.floor(Date.now());
 
@@ -125,7 +128,7 @@ PaymentCycle.prototype.updateDropdowns = function() {
 
     var start_epoch = $("#start_epoch");
     start_epoch.find('option').remove();
-    $.each(startDate, function(index) {
+    $.each(this.startDate, function(index) {
 
         var eta = self.getTimeDifference(opts, now, this.timestamp);
         var time = this.timestamp - now;
@@ -134,22 +137,33 @@ PaymentCycle.prototype.updateDropdowns = function() {
 
     });
 
+    self.updateEndEpoch();
 
-    opts.precision = null; // 0 units of precision for eta formatting
+};
+
+PaymentCycle.prototype.updateEndEpoch = function() {
+    var self = this;
+
+    var opts = {
+        precision: null
+    }; // 0 units of precision for eta formatting
 
     var end_epoch = $("#end_epoch");
     end_epoch.find('option').remove();
-    $.each(endDate, function(index) {
+    $.each(this.endDate, function(index) {
 
-        var eta = self.getTimeDifference(opts, startDate[0].timestamp, this.timestamp);
-        var time = this.timestamp - startDate[0].timestamp;
+        if(index >= self.selectedStartIndex) {
 
-        var option = $("<option />").val((Math.floor(this.timestamp / 1000))).text(eta + " (" + this.label + ")").attr('data-index', index).attr('data-time', time).attr('data-eta', eta).attr('data-block', this.superblock);
-        end_epoch.append(option);
+            var eta = self.getTimeDifference(opts, self.startDate[self.selectedStartIndex].timestamp, this.timestamp);
+            var time = this.timestamp - self.startDate[self.selectedStartIndex].timestamp;
+
+            var option = $("<option />").val((Math.floor(this.timestamp / 1000))).text(this.label).attr('data-index', index).attr('data-time', time).attr('data-eta', eta).attr('data-block', this.superblock);
+            end_epoch.append(option);
+
+        }
 
     });
 
-
 };
 
 PaymentCycle.prototype.getInfo = function(cb) {