Skip to content

Commit

Permalink
SAK-50454 Polls improve voting ui responsiveness (#12856)
Browse files Browse the repository at this point in the history 
Co-authored-by: Sharadhi <[email protected]>
Co-authored-by: Adrian Fish <[email protected]>
Co-authored-by: Earle Nietzel <[email protected]>
Co-authored-by: Kunal Jaykam <[email protected]>
  • Loading branch information
@Sharadhi98 @adrianfish
@ern @kunaljaykam
5 people authored Oct 9, 2024
1 parent 1626be5 commit 91b9832
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 121 deletions.
244 changes: 124 additions & 120 deletions polls/tool/src/webapp/templates/votePolls.html
View file
Original file line number Diff line number Diff line change
@@ -1,120 +1,124 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html rsf:id="polls-html" xmlns="http://www.w3.org/1999/xhtml" xmlns:rsf="http://ponder.org.uk/rsf">
<head >
<title>Polls</title>
<link rsf:id="scr=portal-matter" href="https://vula.uct.ac.za/library/skin/tool_base.css" type="text/css" rel="stylesheet" media="all"/>
<link href="https://vula.uct.ac.za/library/skin/default-skin/tool.css" type="text/css" rel="stylesheet" media="all" rsf:id="scr=portal-matter" />
<script rsf:id="scr=portal-matter" type="text/javascript" src="/library/js/headscripts.js"></script>
<script type="text/javascript">includeLatestJQuery('polls');</script>
<script type="text/javascript">includeWebjarLibrary('jquery.tablesorter');</script>
<script type="text/javascript" src="../js/polls.js"></script>
</head>

<body rsf:id="scr=sakai-body">
<div class="portletBody">

<ul rsf:id="actions:" class="navIntraTool">
<li><span class="current" rsf:id="actions-main">Polls</span></li>
<li><span><a href="voteAdd.html" rsf:id="actions-add">Add</a></span></li>
<li><span><a href="votePermissions.html" rsf:id="actions-permissions">Permissions</a></span></li>
</ul>

<div class ="page-header">
<h1 rsf:id="poll-list-title">Polls</h1>
</div>

<div rsf:id="message-for:*" class="alertMessage">
<span>Message for user here</span>
</div>
<div class="sak-banner-info" rsf:id="no-polls">No polls have been created yet.</div>
<div class="addItem" rsf:id="add-poll-icon">
<a href="voteAdd.html" rsf:id="add-poll">Add</a>
</div>

<div rsf:id="poll_list_remove_confirm" id="poll_list_remove_confirm"></div>
<div rsf:id="poll_list_reset_confirm" id="poll_list_reset_confirm"></div>

<script type="text/javascript">
$(document).ready(function () {

$('#remove-all').change(function () {

var isChecked = $(this).is(':checked');
$('.checkbox-cell input').prop('checked', isChecked);
$('#delete-polls').prop('disabled', !isChecked);
$('#reset-polls-votes').prop('disabled', !isChecked);
});

$('.checkbox-cell input').change(function () {

var someChecked = $('.checkbox-cell input:checked').length;
$('#delete-polls').prop('disabled', !someChecked);
$('#reset-polls-votes').prop('disabled', !someChecked);

if (!someChecked) {
$('#remove-all').prop('checked', false);
}
});

$('#delete-polls').click(function () {

var removeMessage = $('#poll_list_remove_confirm').text();
return confirm(removeMessage);
});

$('#reset-polls-votes').click(function () {

var resetMessage = $('#poll_list_reset_confirm').text();
return confirm(resetMessage);
});
});
</script>

<form rsf:id="delete-poll-form">
<!-- This span is needed here to guide the renderer away to the checkboxes -->
<span rsf:id="delete-poll"/>

<table id="sortableTable" class="listHier lines nolines table table table-bordered table-striped table-hover" border="0" cellspacing="0">
<caption class="skip"><span class="skip" rsf:id="msg=poll_list_summary"></span></caption>
<thead>
<tr>
<th><a rsf:id="poll-question-title" title="Sort by Question" href="#" onclick="return false;">Question</a></th>
<th><a rsf:id="poll-open-title" title=" Sort by Opening Date" href="#" onclick="return false;">Opening</a></th>
<th><a rsf:id="poll-close-title" title="Sort by Closing Date" href="#" onclick="return false;">Closing</a></th>
<th><label rsf:id="poll-result-title"> Results</label></th>
<th ><input type="checkbox" rsf:id="remove-all" id="remove-all" title="Select to remove"/> <label for="remove-all" rsf:id="poll_select_title_all">Select all</label></th>
</tr>
</thead>
<tbody id="tasks:polllist:tbody_element">

<tr rsf:id="poll-row:votable">
<td><a href="voteQuestion.html" target="_self" rsf:id="poll-vote">Votable Poll Question</a>
<div class="itemAction"><a href="voteAdd.html" target="_self" rsf:id="poll-revise">Edit</a></div>
</td>
<td rsf:id="poll-open-date">opening date</td>
<td rsf:id="poll-close-date">closing date</td>
<td><a rsf:id="poll-results">Results</a></td>
<td class="checkbox-cell"><label rsf:id="delete-label" id="check-2" class="skip">Label for element</label><input rsf:id="poll-select" title="Select to remove" type="checkbox" id="check-2" name="deletePoll" value="" />
</td>
</tr>
<tr rsf:id="poll-row:nonvotable">
<td><span rsf:id="poll-text">Non Votable Question</span>
<div class="itemAction"><a href="voteAdd.html" target="_self" rsf:id="poll-revise">Edit</a></div>
</td>
<td rsf:id="poll-open-date">opening date</td>
<td rsf:id="poll-close-date">closing date</td>
<td><a href="voteResults.html" target="_self" rsf:id="poll-results">Results</a></td>
<td class="checkbox-cell"><label rsf:id="delete-label" id="check-2" class="skip">Label for element</label><input rsf:id="poll-select" title="Select to remove" type="checkbox" id="check-2" name="deletePoll" value="" />
</td>
</tr>
</tbody>
</table>

<p class="act">
<input type="submit" rsf:id="delete-polls" id="delete-polls" name="deleteSelectPoll" value="Update" accesskey="s" disabled="disabled" />
<input type="submit" rsf:id="reset-polls-votes" id="reset-polls-votes" name="resetSelectPoll" value="Reset" accesskey="r" disabled="disabled" />
</p>
</form>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html rsf:id="polls-html" xmlns="http://www.w3.org/1999/xhtml" xmlns:rsf="http://ponder.org.uk/rsf">
<head >
<title>Polls</title>
<link rsf:id="scr=portal-matter" href="https://vula.uct.ac.za/library/skin/tool_base.css" type="text/css" rel="stylesheet" media="all"/>
<link href="https://vula.uct.ac.za/library/skin/default-skin/tool.css" type="text/css" rel="stylesheet" media="all" rsf:id="scr=portal-matter" />
<script rsf:id="scr=portal-matter" src="/library/js/headscripts.js"></script>
<script>
includeLatestJQuery('polls');
includeWebjarLibrary('jquery.tablesorter');
</script>
<script src="../js/polls.js"></script>
</head>

<body rsf:id="scr=sakai-body">
<div class="portletBody">

<ul rsf:id="actions:" class="navIntraTool">
<li><span class="current" rsf:id="actions-main">Polls</span></li>
<li><span><a href="voteAdd.html" rsf:id="actions-add">Add</a></span></li>
<li><span><a href="votePermissions.html" rsf:id="actions-permissions">Permissions</a></span></li>
</ul>

<div class ="page-header">
<h1 rsf:id="poll-list-title">Polls</h1>
</div>

<div rsf:id="message-for:*" class="alertMessage">
<span>Message for user here</span>
</div>
<div class="sak-banner-info" rsf:id="no-polls">No polls have been created yet.</div>
<div class="addItem" rsf:id="add-poll-icon">
<a href="voteAdd.html" rsf:id="add-poll">Add</a>
</div>

<div rsf:id="poll_list_remove_confirm" id="poll_list_remove_confirm"></div>
<div rsf:id="poll_list_reset_confirm" id="poll_list_reset_confirm"></div>

<script>
$(document).ready(function () {

$('#remove-all').change(function () {

var isChecked = $(this).is(':checked');
$('.checkbox-cell input').prop('checked', isChecked);
$('#delete-polls').prop('disabled', !isChecked);
$('#reset-polls-votes').prop('disabled', !isChecked);
});

$('.checkbox-cell input').change(function () {

var someChecked = $('.checkbox-cell input:checked').length;
$('#delete-polls').prop('disabled', !someChecked);
$('#reset-polls-votes').prop('disabled', !someChecked);

if (!someChecked) {
$('#remove-all').prop('checked', false);
}
});

$('#delete-polls').click(function () {

var removeMessage = $('#poll_list_remove_confirm').text();
return confirm(removeMessage);
});

$('#reset-polls-votes').click(function () {

var resetMessage = $('#poll_list_reset_confirm').text();
return confirm(resetMessage);
});
});
</script>

<form rsf:id="delete-poll-form">
<!-- This span is needed here to guide the renderer away to the checkboxes -->
<span rsf:id="delete-poll"/>

<div class="table-responsive">
<table id="sortableTable" class="listHier lines nolines table table table-bordered table-striped table-hover" border="0" cellspacing="0">
<caption class="skip"><span class="skip" rsf:id="msg=poll_list_summary"></span></caption>
<thead>
<tr>
<th><a rsf:id="poll-question-title" title="Sort by Question" href="#" onclick="return false;">Question</a></th>
<th><a rsf:id="poll-open-title" title=" Sort by Opening Date" href="#" onclick="return false;">Opening</a></th>
<th><a rsf:id="poll-close-title" title="Sort by Closing Date" href="#" onclick="return false;">Closing</a></th>
<th><label rsf:id="poll-result-title"> Results</label></th>
<th ><input type="checkbox" rsf:id="remove-all" id="remove-all" title="Select to remove"/> <label for="remove-all" rsf:id="poll_select_title_all">Select all</label></th>
</tr>
</thead>
<tbody id="tasks:polllist:tbody_element">

<tr rsf:id="poll-row:votable">
<td><a href="voteQuestion.html" target="_self" rsf:id="poll-vote">Votable Poll Question</a>
<div class="itemAction"><a href="voteAdd.html" target="_self" rsf:id="poll-revise">Edit</a></div>
</td>
<td rsf:id="poll-open-date">opening date</td>
<td rsf:id="poll-close-date">closing date</td>
<td><a rsf:id="poll-results">Results</a></td>
<td class="checkbox-cell"><label rsf:id="delete-label" id="check-2" class="skip">Label for element</label><input rsf:id="poll-select" title="Select to remove" type="checkbox" id="check-2" name="deletePoll" value="" />
</td>
</tr>
<tr rsf:id="poll-row:nonvotable">
<td><span rsf:id="poll-text">Non Votable Question</span>
<div class="itemAction"><a href="voteAdd.html" target="_self" rsf:id="poll-revise">Edit</a></div>
</td>
<td rsf:id="poll-open-date">opening date</td>
<td rsf:id="poll-close-date">closing date</td>
<td><a href="voteResults.html" target="_self" rsf:id="poll-results">Results</a></td>
<td class="checkbox-cell"><label rsf:id="delete-label" id="check-2" class="skip">Label for element</label><input rsf:id="poll-select" title="Select to remove" type="checkbox" id="check-2" name="deletePoll" value="" />
</td>
</tr>
</tbody>
</table>
</div>

<p class="act flex-nowrap">
<input type="submit" rsf:id="delete-polls" id="delete-polls" name="deleteSelectPoll" value="Update" accesskey="s" disabled="disabled" />
<input type="submit" rsf:id="reset-polls-votes" id="reset-polls-votes" name="resetSelectPoll" value="Reset" accesskey="r" disabled="disabled" />
</p>
</form>
</div>
</body>
</html>
2 changes: 1 addition & 1 deletion portal/portal-render-engine-impl/impl/src/webapp/vm/morpheus/includePage.vm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
#else
#set( $numberTools = $pageColumn0Tools.size() )
#end
<div class="portal-main-container container-fluid mt-2">
<div class="portal-main-container container-fluid mt-2 d-flex flex-column">
<main id="$pageWrapperClass" class="portal-main-content #if( $numberTools > 1 || $homePage)Mrphs-multipleTools #end" role="main">
<h1 class="skip visually-hidden" tabindex="-1" id="tocontent">${rloader.sit_contentshead}</h1>
#parse("/vm/morpheus/includeSiteHierarchy.vm")
Expand Down

0 comments on commit 91b9832

Please sign in to comment.