feat: Update UI to make it easier to understand
All checks were successful
Build Docker / Build Image (push) Successful in 21s
All checks were successful
Build Docker / Build Image (push) Successful in 21s
This commit is contained in:
parent
71fff60b08
commit
28e11e2596
2
dist/bundle.js
vendored
2
dist/bundle.js
vendored
File diff suppressed because one or more lines are too long
46
render.py
46
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="updateLastInput()">'
|
||||
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 += 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 += '% of vote share<br>'
|
||||
|
||||
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() {{
|
||||
var inputs = document.querySelectorAll('#advancedOptions input[type="number"]:not([readonly])');
|
||||
function updateTotal() {{
|
||||
var inputs = document.querySelectorAll('#advancedOptions input[type="number"]');
|
||||
var sum = 0;
|
||||
|
||||
inputs.forEach(function(input) {{
|
||||
sum += parseInt(input.value);
|
||||
}});
|
||||
|
||||
var lastInput = document.getElementById('{lastOption}');
|
||||
lastInput.value = 100 - sum;
|
||||
var remaining = 100 - sum;
|
||||
document.getElementById("remaining").innerText = remaining;
|
||||
}}
|
||||
</script>
|
||||
'''
|
||||
|
@ -121,8 +121,8 @@ document.addEventListener('DOMContentLoaded', async function() {
|
||||
}
|
||||
}
|
||||
}
|
||||
if (total !== 100) {
|
||||
alert('Votes must total 100');
|
||||
if (total > 100) {
|
||||
alert('Votes must be less than or equal to 100');
|
||||
return;
|
||||
}
|
||||
const vote = JSON.stringify(options);
|
||||
|
@ -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"><button class="btn btn-primary" type="submit">Vote</button></div>
|
||||
<div class="shadow-lg mb-3">
|
||||
<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>
|
||||
|
Loading…
Reference in New Issue
Block a user