ictgj-voting/templates/public-voting.html

374 lines
12 KiB
HTML

{{ if not .TemplateData.Teams }}
<div>No games have been created</div>
{{ else }}
<div class="content">
<p>First choose the games that you want to rank, then put them in order from your most favorite to least favorite.</p>
<p>Any games that you don't rank will be considered 'tied for last place'.</p>
</div>
<div class="content">
<h2>1. Choose the games you want to rank</h2>
<table id="unranked-table" class="pure-table pure-table-bordered center">
<thead>
<tr>
<th></th>
<th>Game Name</th>
<th>Team Name</th>
<th>Screenshots</th>
</tr>
</thead>
<tbody>
{{ range $i, $v := .TemplateData.Teams }}
<tr id="teamrow-{{$v.UUID}}" data-teamid="{{$v.UUID}}">
<td class="unranked-actions"><a class="pure-button pure-button-primary" href="javascript:moveToRanked('{{$v.UUID}}');"><i class="fa fa-plus"></i> Add to Vote</a></td>
<td class="voting-col game-name">{{ $v.Game.Name }}</td>
<td class="voting-col team-name">{{ $v.Name }}</td>
<td class="voting-col game-screenshots" data-sscount="{{len $v.Game.Screenshots}}">
{{ if not $v.Game.Screenshots }}
<i class="fa fa-image"></i> (No Screenshots)
{{ else }}
<a class="primary" tabindex="-1" href="javascript:showScreenshots('{{$v.UUID}}');"><i class="fa fa-image"></i> ({{ len $v.Game.Screenshots }}) Click to View</a>
{{ end }}
</td>
</tr>
{{ end }}
</tbody>
</table>
</div>
<div class="content">
<h2>2. Order them from your most favorite to least favorite</h2>
<table id="ranked-table" class="pure-table pure-table-bordered center">
<thead>
<tr>
<th>Rank</th>
<th>Game Name</th>
<th>Team Name</th>
<th>Screenshots</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="content half">
<h2>3. Submit your vote!</h2>
<form action="/vote" onsubmit="return validateVote();">
<input id="uservote" type="hidden" name="uservote" value="" />
<input id="timestamp" type="hidden" name="timestamp" value="{{.TemplateData.Timestamp}}" />
<button class="pure-button pure-button-primary space-vertical pull-right" type="submit">Submit Vote!</button>
</form>
</div>
{{ range $i, $v := .TemplateData.Teams }}
<div class="pure-control-group" id="screenshots-{{ $v.UUID }}" style="display:none;">
<h3>{{ $v.Game.Name }} by {{ $v.Name }}</h3>
<label class="control-label">Click to view original size</label>
<div class="center-all horizontal-scroll thumbnail-container" id="thumbnail-container">
{{ range $imgi, $imgv := $v.Game.Screenshots }}
<a href="javascript:embiggenScreenshot('{{$imgv.UUID}}');">
<img id="{{ $imgv.UUID }}" data-teamid="{{ $v.UUID }}" data-ssid="{{ $imgv.UUID }}" class="thumbnail" alt="{{ $imgv.Description }}" src="data:image/{{$imgv.Filetype}};base64,{{ $imgv.Thumbnail }}" />
</a>
{{ end }}
</div>
</div>
{{ end }}
<div id="embiggenedScreenShot" class="hidden fullscreen" onclick="javascript:document.getElementById('embiggenedScreenShot').classList.add('hidden');"></div>
<script>
var teams = { };
{{ range $i, $v := .TemplateData.Teams }}
teams[{{$v.UUID}}] = {
"team-name": "{{$v.Name}}",
"game-name": "{{$v.Game.Name}}",
"screenshots": [ {{ range $ssi, $ssv := $v.Game.Screenshots }} {{ $ssv.UUID }}, {{ end }} ]
};
{{ end }}
function showScreenshots(tmuuid) {
var screenshots = document.getElementById('screenshots-'+tmuuid).cloneNode(true);
screenshots.style.display='';
showModal({
title: 'Screenshots',
subtitle: teams[tmuuid].game-name,
bodyNode: screenshots,
buttons: [{
title: 'Done',
position: 'right',
click: hideModal
}]
});
}
function embiggenScreenshot(img) {
var ss = document.getElementById(img);
if(ss == null) {
// Couldn't find the screenshot... Error
setFlashMessage('Error viewing that screenshot, sorry...', ['error','fading']);
return;
}
var container = document.getElementById('embiggenedScreenShot');
while(container.hasChildNodes()) {
container.removeChild(container.firstChild);
}
var clickToCloseMsg = document.createElement('div');
clickToCloseMsg.innerText = "Click Image to Close";
var oImg = document.createElement("img");
oImg.setAttribute('src', '/image/'+ss.dataset.teamid+'/'+ss.dataset.ssid);
oImg.setAttribute('alt', ss.getAttribute('alt'));
container.appendChild(clickToCloseMsg);
container.appendChild(oImg);
container.classList.remove('hidden');
}
function validateVote() {
var isValid = (getRanked().length > 0);
if(!isValid) {
setFlashMessage('You must choose at least one game.', ['error','fading']);
}
return (getRanked().length > 0);
}
function updateView() {
updateButtonStates();
var rankedCells = snack.wrap('#ranked-table>tbody>tr>td.rank-cell');
for(var i = 0; i < rankedCells.length; i++) {
rankedCells[i].innerText = i+1;
}
setUserVoteValue();
}
function setUserVoteValue() {
document.getElementById('uservote').value=getRankedCSV();
}
// moveToRanked takes the uuid of a game/team and moves that game to the
// bottom of the 'ranked' table
function moveToRanked(tmUUID) {
// First, find the team's row
var rows = snack.wrap('#teamrow-'+tmUUID);
if(rows.length > 0) {
var row = rows[0];
var delCell = row.getElementsByClassName('unranked-actions');
if(delCell.length > 0) {
delCell = delCell[0];
}
delCell.remove();
var tbody = snack.wrap('#ranked-table>tbody')[0];
var rankTd = document.createElement('td');
rankTd.classList.add('rank-cell');
row.prepend(rankTd);
row.append(createRankedActionsTd(tmUUID));
tbody.append(row)
}
updateView();
}
function moveRankedUp(tmUUID) {
var rows = snack.wrap('#ranked-table>tbody>tr');
var numRows = rows.length;
var tbody = snack.wrap('#ranked-table>tbody')[0];
if(rows.length > 0) {
// Just loop through the rows adding them to the table
// if the _next_ row is the row for this team, add it now
for(var i = 0; i < numRows; i++) {
if(numRows > i && rows[i+1] != null
&& rows[i+1].dataset.teamid == tmUUID) {
// The next one is the one we're moving up
// Append the _next_ one, then this one
tbody.append(rows[i+1]);
tbody.append(rows[i]);
// Increment i manually, since we already added the next row
i++;
} else {
// Otherwise just add the row
tbody.append(rows[i]);
}
}
}
updateView();
}
function updateButtonStates() {
var upBtns = snack.wrap('.ranked-move-up');
for(var i = 0; i < upBtns.length; i++) {
if(i == 0) {
upBtns[i].disabled=true;
} else {
upBtns[i].disabled=false;
}
}
var downBtns = snack.wrap('.ranked-move-down');
for(var i = 0; i < downBtns.length; i++) {
if(i == downBtns.length-1) {
downBtns[i].disabled=true;
} else {
downBtns[i].disabled=false;
}
}
}
function moveRankedDown(tmUUID) {
var rows = snack.wrap('#ranked-table>tbody>tr');
var numRows = rows.length;
var tbody = snack.wrap('#ranked-table>tbody')[0];
if(numRows > 0) {
// Just loop through the rows adding them to the table
// When we hit the row for this team, delay it by one
for(var i = 0; i < numRows; i++) {
if(rows[i].dataset.teamid == tmUUID && numRows > i) {
// This is the one we're moving down
// Append the _next_ one, then this one
tbody.append(rows[i+1]);
tbody.append(rows[i]);
// Increment i manually, since we already added the next row
i++;
} else {
// Otherwise just add the row
tbody.append(rows[i]);
}
}
}
updateView();
}
// moveToRanked takes the uuid of a game/team and moves that game to the
// bottom of the 'unranked' table
function moveToUnranked(tmUUID) {
// First, find the team's row
var rows = snack.wrap('#teamrow-'+tmUUID);
if(rows.length > 0) {
var row = rows[0];
// Remove the cells we don't need
var actCell = row.getElementsByClassName('ranked-actions');
if(actCell.length > 0) {
actCell = actCell[0];
}
actCell.remove();
var rankTd = row.getElementsByClassName('rank-cell');
if(rankTd.length > 0) {
rankTd = rankTd[0];
}
rankTd.remove();
// Add the cells we do
row.prepend(createUnrankedActionsTd(tmUUID));
// And add the row to the unranked table
var tbody = snack.wrap('#unranked-table>tbody')[0];
tbody.append(row);
}
updateView();
}
// getUnranked returns an array of games that haven't been ranked yet
// (it builds the array from the 'unranked' table)
function getUnranked() {
return gameTableToArray('unranked');
}
// getRanked returns an array of games that the user has ranked
// (it builds the array from the 'ranked' table)
function getRanked() {
return gameTableToArray('ranked');
}
// Converts either the 'ranked' or 'unranked' table to an array of objects
// 'tbl' should be either 'ranked' or 'unranked'
function gameTableToArray(tbl) {
var ret = [];
var trs = snack.wrap('#'+tbl+'-table>tbody>tr')
if(trs.length > 0) {
trs.each(function(ele, idx) {
if(ele.dataset != null && ele.dataset.teamid != null) {
ret = ret.concat(getTeamObj(ele.dataset.teamid));
}
});
}
return ret;
}
// getTeamObj returns an object for team tmUUID from table
function getTeamObj(tmUUID) {
var ret = null;
var rows = snack.wrap('#teamrow-'+tmUUID);
if(rows.length > 0) {
var ele = rows[0];
ret = {
uuid: tmUUID,
name: ele.getElementsByClassName('game-name')[0].innerText,
teamName: ele.getElementsByClassName('team-name')[0].innerText,
ssCount: ele.getElementsByClassName('game-screenshots')[0].dataset.sscount
};
}
return ret;
}
// getRankedCSV pulls the getRanked array and just returns a CSV of
// the team IDs in ranked order
// (This is how the 'vote' post expects it)
function getRankedCSV() {
var r = getRanked();
var ret = "";
for(var i = 0; i < r.length; i++) {
ret = ret + r[i].uuid+",";
}
return ret;
}
// createRankedActionsTd creates the td that holds all of the action
// buttons for a 'ranked' table row
function createRankedActionsTd(tmUUID) {
var td = document.createElement('td');
td.classList.add('ranked-actions');
var upBtn = document.createElement('button');
upBtn.classList.add('ranked-move-up', 'pure-button', 'pure-button-toggle-first', 'pure-button-primary');
upBtn.innerHTML = '<i class="fa fa-arrow-up"></i> Move Up';
snack.listener({
node: upBtn,
event: 'click'
}, function() {
moveRankedUp(tmUUID);
});
td.appendChild(upBtn);
var dnBtn = document.createElement('button');
dnBtn.classList.add('ranked-move-down', 'pure-button', 'pure-button-toggle-middle', 'pure-button-primary');
dnBtn.innerHTML = '<i class="fa fa-arrow-down"></i> Move Down';
snack.listener({
node: dnBtn,
event: 'click'
}, function() {
moveRankedDown(tmUUID);
});
td.appendChild(dnBtn);
var delBtn = document.createElement('button');
delBtn.dataset.teamid=tmUUID
delBtn.classList.add('ranked-remove', 'pure-button', 'pure-button-toggle-last', 'pure-button-error');
delBtn.innerHTML = '<i class="fa fa-times"></i> Remove';
snack.listener({
node: delBtn,
event: 'click'
}, function (){
moveToUnranked(tmUUID);
});
td.appendChild(delBtn);
return td;
}
// createUnrankedActionsTd created the td that holds the 'Add to Vote' button
function createUnrankedActionsTd(tmUUID) {
var td = document.createElement('td');
td.classList.add('unranked-actions');
var addBtn = document.createElement('button');
addBtn.dataset.teamid=tmUUID
addBtn.classList.add('pure-button', 'pure-button-toggle-last', 'pure-button-primary');
addBtn.innerHTML = '<i class="fa fa-plus"></i> Add to Vote';
var params = {
node: addBtn,
event: 'click'
}
snack.listener(params, function (){
moveToRanked(addBtn.dataset.teamid);
})
td.appendChild(addBtn);
return td;
}
</script>
{{ end }}