https://github.com/snackaholic/steemfortune/
There will be the possibility to sort the participants.
There will be a winner tab instead of the current notificationmessage with some additional data showing, maybe winrates and so on.
There will be the possibility to export the outcome of the lottery.
From now on it is possible to sort the datasets by the specific datafields:
To sort the list, the user has to click the specific heading of the tablecolumn.
From now on the winnertab will contain a winnerlist.
This list contains the same information as the participants list and also provides the same functionality apart from deleting entrys.
From now on it will be possible to export the list of participants and winners in the following formats:
Therefore the user has to click the button above the table.
By doing so the download of the resource starts.
All these features got implemented with the help of the jquery framework jquery table.
To enable the features I first had to change the HTML to fit the frameworks need.
<section>
<h2>Teilnehmerliste</h2>
<div class="sectionInnerWrapper">
- <ul id="teilnehmerliste"></ul>
+ <table class="table" id="teilnehmerliste"></table>
<button id="loeschen">Liste leeren</button>
</div>
</section>
Also I had to remove the way the list got generated before the update. It was not possible to remain on the ul li construct which was used before.
After that I had to fill the framework with the expected data. The following code sequence was neccessary to do so:
+ if ($.fn.DataTable.isDataTable("#teilnehmerliste")) {
+ $('#teilnehmerliste').DataTable().clear().destroy();
+ }
+ $('#teilnehmerliste').DataTable({
+ data: participants,
+ columns: [
+ { data: 'name', title : 'Name' },
+ { data: 'didvote', title: 'Upvote' + upvotesvg + '' },
+ { data: 'didcomment', title : 'Comment' + commentsvg + '' },
+ { data: 'didresteem', title: 'Resteem' + resteemsvg + '' }
+ ],
+ dom: 'Bfrtip',
+ buttons: [{
+ extend: 'pdf',
+ title: 'Steemfortune Export',
+ filename: 'steemfortune_export'
+ }, {
+ extend: 'excel',
+ title: 'Steemfortune Export',
+ filename: 'steemfortune_export'
+ }, {
+ extend: 'csv',
+ title: 'Steemfortune Export',
+ filename: 'steemfortune_export'
+ }]
+ });
+
+ $("#teilnehmerliste").width("100%");
The same procedure was neccessary for the winnerlist.
To enable deleting entrys again, I needed to add a custom button to the table and a global event listener to reinitialize the table by clicking on it.
// the custom button implementation
columns: [
{ data: 'name', title : 'Name' },
{ data: 'didvote', title: 'Upvote' + upvotesvg + '' },
{ data: 'didcomment', title : 'Comment' + commentsvg + '' },
{ data: 'didresteem', title: 'Resteem' + resteemsvg + '' },
{ data: null, defaultContent: 'delete' }
],
// the eventlistener
/* add delete logic to custom button within datatable */
$('body').on('click', '.deleteButton', function () {
var participantToDelete = this.parentElement.parentElement.firstChild.textContent;
participants = deleteByName(participantToDelete, participants);
stelleListedar();
});
There will be the possibility to weight each user action within the winnerdetermination tab.
For this change, I want to rework the form within the winnerdetermination tab and add the weightings in the form of input fields. These weightings will influence the way the pot of the winners gets generated in favor of the user.
There will be additional data showing, maybe winrates and so on.
For the additional data, im going to use the google data visualization api called google charts.