From d3ead9ac562363af0746b50cb10fb03fa920e42c Mon Sep 17 00:00:00 2001
From: snogcel <ledniknoj@gmail.com>
Date: Wed, 21 Sep 2016 22:32:43 -0600
Subject: [PATCH] ProposalGenerator / UI Controller

---
 index.html | 233 ++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 150 insertions(+), 83 deletions(-)

diff --git a/index.html b/index.html
index 01aaecf..26facdb 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,7 @@
     <script type="text/javascript">
 
         var Bitcore = require('bitcore-lib-dash');
+        var gov = new Bitcore.GovObject.Proposal();
 
         $(document).ready(function() {
 
@@ -22,12 +23,6 @@
             $('#start_epoch').datepicker(opts, 'getdate');
             $('#end_epoch').datepicker(opts, 'getdate');
 
-            /*
-            $('#dataHex').click(function() {
-               copyToClipboard($(this).attr('id'));
-            });
-            */
-
             $('#prepareProposal').click(function() {
                 copyToClipboard($(this).attr('id'));
             });
@@ -36,51 +31,120 @@
                 copyToClipboard($(this).attr('id'));
             });
 
-            var gov = '';
-
             $('#btnPrepare').click(function() {
 
-                gov = new Bitcore.GovObject.Proposal();
+                var proposal = new ProposalGenerator(gov);
 
-                // proposal basic fields
-                gov.name = $('#name').val();
-                gov.url = $('#url').val();
-                gov.payment_address = $('#payment_address').val();
-                gov.payment_amount = parseFloat($('#payment_amount').val());
+                var validProposal = proposal.validate();
 
-                // format dates for gobject serialization
-                gov.start_epoch = (new Date($('#start_epoch').val()) / 1000) || null;
-                gov.end_epoch = (new Date($('#end_epoch').val()) / 1000) || null;
+                if (validProposal) {
 
-                // hidden elements
-                gov.type = parseInt($('#type').val());
+                    proposal.walletCommands();
 
-                //document.getElementById('dataHex').innerHTML = gov.uncheckedSerialize();
+                    $('#feeTxid').on('input', function() {
+                        if ($(this).val().length > 0) {
+                            var submitCommand = "gobject submit " + $('#parentHash').val() + " " + $('#revision').val() + " " + $('#time').val() + " " + proposal.gov.uncheckedSerialize() + " " + $(this).val();
 
-                var propCommand = "gobject submit "+$('#parentHash').val() + " " + $('#revision').val() +"  " + $('#time').val() +" " + gov.uncheckedSerialize();
-                $("textarea#prepareProposal").val(propCommand);
+                            $('textarea#submitProposal').val(submitCommand);
+                            $('.walletCommands#walletCommandsSubmit').removeClass('hidden');
+                        } else {
+                            $('textarea#submitProposal').val('');
+                            $('.walletCommands#walletCommandsSubmit').addClass('hidden');
+                        }
+                    });
 
-                $('#feeTxid').on('input', function() {
-                    if ($('#feeTxid').val().length > 0) {
-                        var submitCommand = "gobject submit " + $('#parentHash').val() + " " + $('#revision').val() + " " + $('#time').val() + " " + gov.uncheckedSerialize() + " " + $('#feeTxid').val();
-                        $("textarea#submitProposal").val(submitCommand);
-                    } else {
-                        $("textarea#submitProposal").val('');
-                    }
-                });
+                    $('#btnEdit').click(function() {
+
+                        proposal.createProposal();
+
+                    });
+                }
             });
         });
 
-        function copyToClipboard(id)
-        {
+        var ProposalGenerator = function(gov) {
+            this._mode = 'proposal';
+            this.gov = gov;
+
+            // proposal basic fields
+            this.gov.name = $('#name').val();
+            this.gov.url = $('#url').val();
+            this.gov.payment_address = $('#payment_address').val();
+            this.gov.payment_amount = parseFloat($('#payment_amount').val());
+
+            // format dates for gobject serialization
+            this.gov.start_epoch = (new Date($('#start_epoch').val()) / 1000) || null;
+            this.gov.end_epoch = (new Date($('#end_epoch').val()) / 1000) || null;
+
+            // hidden elements
+            this.gov.type = parseInt($('#type').val());
+        };
+
+        ProposalGenerator.prototype.validate = function() {
+            var gov = this.gov;
+
+            // TODO: perform validation within bitcore-lib-dash
+            // return gov.getSerializationError();
+            return true;
+        };
+
+        ProposalGenerator.prototype.walletCommands = function() {
+            var gov = this.gov;
+
+            var propCommand = "gobject submit "+$('#parentHash').val() + " " + $('#revision').val() +"  " + $('#time').val() +" " + gov.uncheckedSerialize();
+            $("textarea#prepareProposal").val(propCommand);
+
+            if(this._mode == 'proposal') {
+                $('.createProposal#createProposalHeader').addClass('hidden');
+                $('.createProposal#createProposalForm').addClass('hidden');
+
+                $('.walletCommands#walletCommandsHeader').removeClass('hidden');
+                $('.walletCommands#walletCommandsPrepare').removeClass('hidden');
+                $('.walletCommands#walletCommandsTx').removeClass('hidden');
+                $('.walletCommands#walletCommandsSubmit').removeClass('hidden');
+
+                this._mode = 'command';
+            }
+        };
+
+        ProposalGenerator.prototype.createProposal = function() {
+            $('#feeTxid').val("");
+            $('#submitProposal').val("");
+
+            if(this._mode == 'command') {
+                $('.createProposal#createProposalHeader').removeClass('hidden');
+                $('.createProposal#createProposalForm').removeClass('hidden');
+
+                $('.walletCommands#walletCommandsHeader').addClass('hidden');
+                $('.walletCommands#walletCommandsPrepare').addClass('hidden');
+                $('.walletCommands#walletCommandsTx').addClass('hidden');
+                $('.walletCommands#walletCommandsSubmit').addClass('hidden');
+
+                this._mode = 'proposal';
+            }
+        };
+
+        var copyToClipboard = function(id) {
             document.getElementById(id).select();
             document.execCommand('copy');
-        }
+        };
 
     </script>
 
     <style type="text/css">
         textarea { background-color:#fafafa !important; }
+        #header { margin-top:2em; }
+
+        .createProposal {  }
+        #createProposalHeader { margin-top:1em; }
+        #createProposalForm { margin-top:1em; }
+
+        .walletCommands {  }
+        #walletCommandsHeader { margin-top:2em; }
+        #walletCommandsPrepare { margin-top:2em; }
+        #walletCommandsTx { margin-top:2em; }
+        #walletCommandsSubmit { margin-top:2em; }
+
     </style>
 
 </head>
@@ -88,55 +152,59 @@
 
 <div class="col-xs-10 col-xs-offset-1">
 
-    <div class="row" style="margin-top:2em;">
-        <div class="col-xs-12"><h1>Dash Budget Proposal Generator</h1></div>
-        <div class="col-xs-12">Generate budget proposal commands you can copy/paste into your Dash wallet to prepare a budget proposal and submit it to the network.</div>
+    <div class="row" id="header">
+        <div class="col-xs-12">
+            <h1>Dash Budget Proposal Generator</h1>
+            Generate budget proposal commands you can copy/paste into your Dash wallet to prepare a budget proposal and submit it to the network.
+        </div>
     </div>
 
-    <div class="row" style="margin-top:2em;">
-        <div class="col-xs-12"><h2>Create a Proposal</h2></div>
-        <div class="col-xs-12">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</div>
+    <div class="row createProposal" id="createProposalHeader">
+        <div class="col-xs-12">
+            <h2>Create a Proposal</h2>
+            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
+        </div>
     </div>
 
-    <div class="row" style="margin-top:1em;">
+    <div class="row createProposal" id="createProposalForm">
         <div class="col-xs-6">
 
-                <div class="form-group">
-                    <label for="name">Proposal Name:</label>
-                    <input type="text" class="form-control" id="name" value="" placeholder="proposal-name">
-                </div>
+            <div class="form-group">
+                <label for="name">Proposal Name:</label>
+                <input type="text" class="form-control" id="name" value="" placeholder="proposal-name">
+            </div>
 
-                <div class="form-group">
-                    <label for="url">Proposal Description URL:</label>
-                    <input type="text" class="form-control" id="url" value="" placeholder="https://www.dashcentral.org/p/proposal-name">
-                </div>
+            <div class="form-group">
+                <label for="url">Proposal Description URL:</label>
+                <input type="text" class="form-control" id="url" value="" placeholder="https://www.dashcentral.org/p/proposal-name">
+            </div>
 
-                <div class="form-group">
-                    <label for="start_epoch">Proposal Start Date:</label>
-                    <input type="text" class="form-control" id="start_epoch" value="" placeholder="">
-                </div>
+            <div class="form-group">
+                <label for="start_epoch">Proposal Start Date:</label>
+                <input type="text" class="form-control" id="start_epoch" value="" placeholder="">
+            </div>
 
-                <div type="submit" class="btn btn-primary" id="btnPrepare">Create Proposal</div>
+            <div type="submit" class="btn btn-primary" id="btnPrepare">Create Proposal</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">
-                </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">
+            </div>
 
-                <div class="form-group" style="display:none;">
-                    <label for="parentHash">parent-hash:</label>
-                    <input type="text" class="form-control" id="parentHash" value="0" placeholder="0">
-                </div>
+            <div class="form-group" style="display:none;">
+                <label for="parentHash">parent-hash:</label>
+                <input type="text" class="form-control" id="parentHash" value="0" placeholder="0">
+            </div>
 
-                <div class="form-group" style="display:none;">
-                    <label for="revision">revision:</label>
-                    <input type="text" class="form-control" id="revision" value="1" placeholder="1">
-                </div>
+            <div class="form-group" style="display:none;">
+                <label for="revision">revision:</label>
+                <input type="text" class="form-control" id="revision" value="1" placeholder="1">
+            </div>
 
-                <div class="form-group" style="display:none;">
-                    <label for="time">Creation Time:</label>
-                    <input type="text" class="form-control" id="time" value="" placeholder="">
-                </div>
+            <div class="form-group" style="display:none;">
+                <label for="time">Creation Time:</label>
+                <input type="text" class="form-control" id="time" value="" placeholder="">
+            </div>
 
         </div>
 
@@ -161,20 +229,19 @@
 
     </div>
 
-    <div class="row" style="margin-top:2em;">
-        <div class="col-xs-12"><h2>Wallet Commands</h2></div>
+    <div class="row walletCommands hidden" id="walletCommandsHeader">
+
+        <div class="col-xs-12">
+            <div type="submit" class="btn btn-primary" id="btnEdit">Edit Proposal</div>
+        </div>
+
+        <div class="col-xs-12">
+            <h2>Wallet Commands</h2>
+        </div>
+
     </div>
 
-    <div class="row" style="margin-top:2em;">
-
-        <!--div class="col-xs-12" style="display:none;">
-            <form>
-                <div class="form-group">
-                    <label for="dataHex">data-hex:</label>
-                    <textarea class="form-control" id="dataHex" rows="6" placeholder=""></textarea>
-                </div>
-            </form>
-        </div-->
+    <div class="row walletCommands hidden" id="walletCommandsPrepare">
 
         <div class="col-xs-12">
 
@@ -188,7 +255,7 @@
 
     </div>
 
-    <div class="row" style="margin-top:2em;">
+    <div class="row walletCommands hidden" id="walletCommandsTx">
 
         <div class="col-xs-12">
 
@@ -202,7 +269,7 @@
 
     </div>
 
-    <div class="row" style="margin-top:2em;">
+    <div class="row walletCommands hidden" id="walletCommandsSubmit">
 
         <div class="col-xs-12">