dropdown made popup, css, undecided color change

jonobrien · Aug 30, 2016 · 1825397 · 1825397
1 parent 45b6e0d
commit 1825397
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 43 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 node_modules/
+*.txt
diff --git a/static/css/my.css b/static/css/my.css
@@ -12,4 +12,7 @@
 .ui.message>.close.icon {
     margin: .3em 0em 0em 0em;
     right: .2em;
+}
+.pop {
+  cursor: pointer;
 }
diff --git a/static/js/tournamentMatches.js b/static/js/tournamentMatches.js
@@ -32,17 +32,19 @@ function parseMatches(data) {
     var rScore = ''; var bScore = '';
     var winner = ''; var winName = '';
     var matches = ''; var match = '';
-    var itemStart = '<div class="item">';
     var rDot = '<i class="red icon circle"></i>';
     var bDot = '<i class="blue icon circle"></i>';
     var winDot = '';
-    var itemEnd = '</div>';
     var s = data.query_url.split('/');
     var currInt = s[s.length -3];
     var matchMenu = '#matchMenu' + currInt;
     // handle bye series with no matches
     if (lenItems === 0) {
-        $(matchMenu).append(itemStart + '<i class="icon circle thin"></i>' + itemEnd);
+        $(matchMenu)
+        .popup({
+            on: 'click',
+            html: '<i class="icon circle thin"></i>'
+        });
         return;
     }
     // all other series have data
@@ -65,7 +67,10 @@ function parseMatches(data) {
         matches += match;
         i++;
     }
-    var final = itemStart + matches + itemEnd;
     // attach to the dropdown in the '?' type column
-    $(matchMenu).append(final);
+    $(matchMenu)
+    .popup({
+        on: 'click',
+        html: matches
+    });
 }
diff --git a/static/js/tournamentSeries.js b/static/js/tournamentSeries.js
@@ -57,8 +57,10 @@ function parseSeries(data) {
     var redT = '';
     var blueT = '';
     var winner = '';
-    var matchDrop = '';
+    var matchPopup = '';
     var bye = '- - bye - -';
+    var solidDot = '<i class="icon circle"></i>';
+    var emptyDot = '<i class="icon circle thin"></i>';
     while (i < lenItems) {
         // ? COLUMN
         // attach dropdown to later attach table of matches, etc
@@ -69,24 +71,20 @@ function parseSeries(data) {
                         && data.items[i].redTeam.isBye === true) {
             blueT = winner = data.items[i].winner.team.teamName;
             redT = bye;
-            matchDrop = ''+
-            '<td class="ui info message">'+
-                '<div class="ui dropdown">'+
-                    '<i class="icon circle thin"></i>'+
-                    '<div class="menu" id="matchMenu'+i+'"></div>'+
-                '</div></td>';
+            matchPopup = ''+  // blue wins
+            '<td id="matchMenu'+i+'" class="ui info message pop">'+
+                emptyDot +
+            '</td>';
         }
         // redTeam has bye, no blueTeam present, red wins
         else if ('isBye' in data.items[i].blueTeam
                             && data.items[i].blueTeam.isBye === true) {
             redT = winner = data.items[i].winner.team.teamName;
             blueT = bye;
-            matchDrop = ''+
-                '<td class="ui negative message">'+
-                    '<div class="ui dropdown">'+
-                        '<i class="icon circle thin"></i>'+
-                    '<div class="menu" id="matchMenu'+i+'"></div>'+
-                '</div></td>';
+            matchPopup = ''+  // red wins
+                '<td id="matchMenu'+i+'" class="ui negative message pop">'+
+                   emptyDot +
+                '</td>';
         }
         // nobody wins by default, get both teams and winner
         // actual match
@@ -96,46 +94,48 @@ function parseSeries(data) {
             if (data.items[i].winner.isDecided === true) {
                 winner = data.items[i].winner.team.teamName;
                 if (winner === redT) {
-                    matchDrop = ''+ // redTeam winner
-                        '<td class="ui negative message">'+
-                            '<div class="ui dropdown">'+
-                                '<i class="icon circle"></i>'+
-                                '<div class="menu" id="matchMenu'+i+'"></div>'+
-                            '</div></td>';
+                    matchPopup = ''+  // redTeam winner
+                        '<td id="matchMenu'+i+'" class="ui negative message pop">'+
+                            solidDot +
+                        '</td>';
                 }
                 else {
-                    matchDrop = ''+ // blueTeam winner
-                        '<td class="ui info message">'+
-                            '<div class="ui dropdown">'+
-                                '<i class="icon circle"></i>'+
-                                '<div class="menu" id="matchMenu'+i+'"></div>'+
-                            '</div></td>';
-                }
+                    matchPopup = ''+  // blueTeam winner
+                        '<td id="matchMenu'+i+'" class="ui info message pop">'+
+                            solidDot +
+                        '</td>';
+            }
             }
             else {
                 winner = 'undecided';
-                matchDrop = '<td class="ui message">'+ // no series winner
-                        '<div class="ui dropdown">'+
-                            '<i class="icon warning circle"></i>'+
-                            '<div class="menu" id="matchMenu'+i+'"></div>'+
-                        '</div></td>';
+                matchPopup = '' +  // no series winner
+                    '<td id="matchMenu'+i+'" class="ui message pop">'+ 
+                        '<i class="icon warning circle"></i>'+
+                    '</td>';
             }
         }
-        $('#series').append(matchDrop);
+        $('#series').append(matchPopup);
 
         // WINNER column
         // color coordinate winner
         if (winner === redT) {
-            $('#series').append('<td class="negative">'+winner+'</td>');
+            $('#series').append('<td class="ui negative message">'+winner+'</td>');
         }
-        else {
+        else  if (winner === blueT) {
             $('#series').append('<td class="ui info message">'+winner+'</td>');
         }
+        else { // undecided series
+            $('#series').append('<td class="ui message">'+winner+'</td>');
+        }
+
+
         // RED COLUMN | BLUE COLUMN
-        $('#series').append('<td class="negative">'+redT+'</td>'+
-                '<td class="ui info message">'+blueT+'</td>'
+        $('#series').append('' +
+            '<td class="ui negative message">'+redT+'</td>'+
+            '<td class="ui info message">'+blueT+'</td>'
         );
 
+
         // SERIES WINS COLUMN
         // add matches won, link to team info
         // should be converted to dropdown table info instead
@@ -158,10 +158,10 @@ function parseSeries(data) {
             bLink = '#';
         }
         // dynamically link team info off this element
-        var drop = '<td class="ui info message">'+
+        var teamPop = '<td class="ui message">'+
                 '<div class="ui dropdown">'+
                     '<i class="icon circle thin"></i>'+
-                    '<div class="menu" id="matchMenu'+i+'"></div>'+
+                    '<div class="menu" id="team'+i+'"></div>'+
                 '</div></td>';
         var red_blue_teams = "<a id=rTeam" + i + "' target='blank' href='"+rLink+"'>"+
                 "<i class='red icon user'/></a> " + rWon + "&nbsp;&nbsp;" +