feat: Update UI to make it easier to understand

render.py

@@ -60,26 +60,37 @@ def votes():
     return html
 
 def options(options):
-    html = '<select id="vote" class="form-select" name="vote" onchange="showHideDiv()">'
+    html = '<select id="vote" class="form-select" name="vote" onchange="showHideDiv()" style="margin-bottom: 25px;">'
     for option in options:
         html += f'<option value="{option}">{option}</option>'
 
-    html += '<option value="Advanced">Advanced</option>'
+    # html += '<option value="Advanced">Mixed Vote</option>'
     html += '</select>'
+    # Add a toggle to show/hide the advanced options
+    html += '<label for="advancedToggle" style="display: inline;margin-left:10px;">Split Vote</label>'
+    html += '<input type="checkbox" id="advancedToggle" name="advancedToggle" onchange="showHideDiv()">'
+
+
     html += f'''
     <script>function showHideDiv() {{
-        var selectedValue = document.getElementById("vote").value;
+        var toggle = document.getElementById("advancedToggle");
         var divToToggle = document.getElementById("advancedOptions");
-        if (selectedValue === "Advanced") {{
+        if (toggle.checked) {{
             divToToggle.style.display = "block";
+            // Set select to disabled
+            document.querySelector('#vote').disabled = true;
+
+
         }} else {{
             divToToggle.style.display = "none";
+            document.querySelector('#vote').disabled = false;
             // Set value of all inputs to 0
             var inputs = document.querySelectorAll('#advancedOptions input[type="number"]');
             inputs.forEach(function(input) {{
                 input.value = 0;
             }});
             // Set value of matching select to 100
+            var selectedValue = document.querySelector('#vote').value;
             var select = document.querySelector('#advancedOptions input[name="' + selectedValue + '"]');
             select.value = 100;
         }}
@@ -89,7 +100,6 @@ def options(options):
     
 
     html += '<div id="advancedOptions" style="display: none;margin-top: 25px;text-align: left;">'
-    lastOption = options[-1]
     for option in options:
         html += '<div class="form-group" style="margin-bottom: 10px;">'
         html += f'<label for="{option}" style="display: inline;margin-right:10px;">{option}</label>'
@@ -97,30 +107,32 @@ def options(options):
         if option == options[0]:
             value = 100
 
-        if not lastOption == option:
+        html += f'<input id="{option}" type="number" name="{option}" value="{value}" class="form-control" style="width: auto; display: inline;margin-right:10px;" min="0" max="100" onchange="updateTotal()">'
-            html += f'<input id="{option}" type="number" name="{option}" value="{value}" class="form-control" style="width: auto; display: inline;margin-right:10px;" min="0" max="100" onchange="updateLastInput()">'
+        html += '% of vote share<br>'
-            html += '% of vote share<br>'
-        else:
-            html += f'<input id="{option}" type="number" name="{option}" value="0" class="form-control" style="width: auto; display: inline;margin-right:10px;" min="0" max="100" readonly>'
-            html += '% of vote share (automatically calculated)<br>'
 
-        
         html += '</div>'    
-    html += '</div>'
 
+    # Add a readonly input to show the remaining vote share
+    html += '<div class="form-group" style="margin-bottom: 10px;">'
+    html += '<p style="display:inline;">Remaining </p>'
+    html += f'<p style="display:inline;" id="remaining">0</p>'
+    html += '<p style="display:inline;">% of vote share</p>'
+
+    html += '</div>'
+    
+    
 
     html += f'''
     <script>
-        function updateLastInput() {{
+        function updateTotal() {{
-            var inputs = document.querySelectorAll('#advancedOptions input[type="number"]:not([readonly])');
+            var inputs = document.querySelectorAll('#advancedOptions input[type="number"]');
             var sum = 0;
 
             inputs.forEach(function(input) {{
                 sum += parseInt(input.value);
             }});
-
+            var remaining = 100 - sum;
-            var lastInput = document.getElementById('{lastOption}');
+            document.getElementById("remaining").innerText = remaining;
-            lastInput.value = 100 - sum;
         }}
     </script>    
     '''

src/index.js

@@ -121,8 +121,8 @@ document.addEventListener('DOMContentLoaded', async function() {
                 }
             }
         }
-        if (total !== 100) {
+        if (total > 100) {
-            alert('Votes must total 100');
+            alert('Votes must be less than or equal to 100');
             return;
         }
         const vote = JSON.stringify(options);

templates/index.html

@@ -49,8 +49,10 @@
                         <h4><span id="percent">0</span>% of the voting power.</h4>
                         <p class="fs-5 text-muted mb-5">Vote here</p>
                         <form class="d-flex justify-content-center flex-wrap" id="signMessageForm" data-bs-theme="light">
-                            <div class="shadow-lg mb-3">{{options|safe}}</div>
+                            <div class="shadow-lg mb-3">
-                            <div class="shadow-lg mb-3"><button class="btn btn-primary" type="submit">Vote</button></div>
+                                <p>Select your vote or split your votes between options.</p>{{options|safe}}
+                            </div>
+                            <div class="shadow-lg mb-3"><button class="btn btn-primary" type="submit" style="margin-top: 25px;">Vote</button></div>
                         </form>
                     </div>{{votes|safe}}
                 </div>