{{ if not .TemplateData.Teams }} <div>No games have been created</div> {{ else }} <div class="content"> Rank one or more games from your favorite to least favorite. </div> <div class="content"> <h2>Your Choices</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"> <h2>Unranked Games</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 half"> <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 }}