Created
May 18, 2017 07:09
-
-
Save pradeepdhankhar/950572ca39ecb53088b037dd8d16dc22 to your computer and use it in GitHub Desktop.
Knockout bracket for leagues and tournaments
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> | |
| <!-- Latest compiled and minified CSS --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> | |
| <!-- Optional theme --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | |
| <!-- Latest compiled and minified JavaScript --> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> | |
| <style type="text/css"> | |
| .aDown{ | |
| border-top: 2px solid #000; | |
| top: 33px; | |
| border-right: 2px solid #000; | |
| height: 40px; | |
| } | |
| .aUp{ | |
| border-bottom: 2px solid #000; | |
| border-right: 2px solid #000; | |
| height: 35px; | |
| } | |
| .aline{ | |
| border-right: 2px solid #000; | |
| top: 0px; | |
| height: 68px; | |
| margin-left: 15px; | |
| } | |
| </style> | |
| </head> | |
| <div class="container"> | |
| <div class="row line"> | |
| <nav class="navbar navbar-default"> | |
| <div class="container-fluid"> | |
| <!-- Brand and toggle get grouped for better mobile display --> | |
| <div class="navbar-header"> | |
| <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| </button> | |
| </div> | |
| <!-- Collect the nav links, forms, and other content for toggling --> | |
| <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> | |
| <form class="navbar-form navbar-left" role="search"> | |
| <div class="form-group"><h5>Create Brackets</h5></div> | |
| </form> | |
| <div class="nav navbar-nav navbar-form navbar-right"> | |
| <div class="form-group"> | |
| <button class="btn btn-primary" click="addTeam()" id="add">Add Team</button> | |
| <button class="btn btn-primary" click="removeTeam()" id="remove">Remove Team</button> | |
| <!--button class="btn btn-primary" id="type">SE</button--> | |
| </div> | |
| </div> | |
| </div><!-- /.navbar-collapse --> | |
| </div><!-- /.container-fluid --> | |
| </nav> | |
| </div> | |
| <div id="dataOutput" style="margin-top:10px;"> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| var level = 0; | |
| var teams = 1; | |
| $(document).ready(function(){ | |
| $('#add').on('click',function(){ | |
| level = level+1; | |
| teams = teams*2; | |
| if(level<=5){ | |
| createChart(); | |
| plus(); | |
| minus(); | |
| rename(); | |
| save(); | |
| }else{ | |
| alert("Can't create more than this"); | |
| } | |
| $('#dataOutput').animate({ | |
| transform: 'scale(.5,.5)' | |
| }); | |
| }); | |
| $('#remove').on('click',function(){ | |
| level = level-1; | |
| teams = teams/2; | |
| createChart(); | |
| plus(); | |
| minus(); | |
| rename(); | |
| save(); | |
| $('#dataOutput').animate({ | |
| transform: 'scale(2.5,2.5)' | |
| }); | |
| }); | |
| }); | |
| function save(){ | |
| $('#save').on('click',function(){ | |
| console.log($('#dataOutput').html()); | |
| }); | |
| } | |
| function rename(){ | |
| $('.teamName').on('change',function(){ | |
| var id = $(this).attr('rel'); | |
| var name = $(this).val(); | |
| jQuery('.teamName'+id).each(function(){ | |
| $(this).html(name); | |
| }); | |
| }); | |
| $(".form-control").hover(function(e) { | |
| var id = $(this).attr('rel'); | |
| $('.teamName'+id).css("background-color",e.type === "mouseenter"?"#46b8da":"#fff"); | |
| }); | |
| } | |
| function plus(){ | |
| $('.plus').on('click',function(){ | |
| var Id = $(this).attr('rel'); | |
| var score = parseInt($("#score"+Id).html()); | |
| var level = Id.charAt(0); | |
| var grpId = parseInt($(this).parents('.level'+level).attr('rel')); | |
| score = score+1; | |
| if(level == 1){ | |
| $("#score"+Id).html(score); | |
| checkScore(Id,grpId); | |
| }else if($('#text'+Id).html().length != 0){ | |
| $("#score"+Id).html(score); | |
| checkScore(Id,grpId); | |
| } | |
| }); | |
| } | |
| function minus(){ | |
| $('.minus').on('click',function(){ | |
| var Id = $(this).attr('rel'); | |
| var score = parseInt($("#score"+Id).html()); | |
| if($('#text'+Id).html() != " "){ | |
| if(score == 0 ){score = score}else{score = score-1}; | |
| var level = Id.charAt(0); | |
| var grpId = parseInt($(this).parents('.level'+level).attr('rel')); | |
| if(level == 1){ | |
| $("#score"+Id).html(score); | |
| checkScore(Id,grpId); | |
| }else if($('#text'+Id).html().length != 0){ | |
| $("#score"+Id).html(score); | |
| checkScore(Id,grpId); | |
| } | |
| } | |
| }); | |
| } | |
| function checkScore(Id,grpId){ | |
| var l = Id.charAt(0); | |
| var level = parseInt(l)+1; | |
| var t1=t2=0; | |
| var nextId; | |
| var previousId; | |
| nextId = l+(parseInt(Id.slice(1)) + 1); | |
| previousId = l+(parseInt(Id.slice(1)) - 1); | |
| Id = parseInt(Id); | |
| if(l==1){ | |
| if(Id%2==0){ | |
| t1 = parseInt($("#score"+Id).html()); | |
| t2 = parseInt($("#score"+previousId).html()); | |
| if(t1>t2){ | |
| $('#text'+level+grpId).html($("#text"+Id).val()); | |
| $('#text'+level+grpId).addClass('teamName'+$("#text"+Id).attr('rel')); | |
| $('#text'+level+grpId).removeClass('teamName'+$("#text"+previousId).attr('rel')); | |
| $('#text'+level+grpId).attr('rel',$("#text"+Id).attr('rel')); | |
| } | |
| if(t2>t1){ | |
| $('#text'+level+grpId).html($("#text"+previousId).val()); | |
| $('#text'+level+grpId).removeClass('teamName'+$("#text"+Id).attr('rel')); | |
| $('#text'+level+grpId).addClass('teamName'+$("#text"+previousId).attr('rel')); | |
| $('#text'+level+grpId).attr('rel',$("#text"+previousId).attr('rel')); | |
| } | |
| if(t2==t1){ | |
| $('#text'+level+grpId).html(''); | |
| $('#score'+level+grpId).html(0); | |
| } | |
| }else{ | |
| t1 = parseInt($("#score"+(Id)).html()); | |
| t2 = parseInt($("#score"+nextId).html()); | |
| if(t1>t2){ | |
| $('#text'+level+grpId).html($("#text"+Id).val()); | |
| $('#text'+level+grpId).addClass('teamName'+$("#text"+Id).attr('rel')); | |
| $('#text'+level+grpId).removeClass('teamName'+$("#text"+nextId).attr('rel')); | |
| $('#text'+level+grpId).attr('rel',$("#text"+Id).attr('rel')); | |
| } | |
| if(t2>t1){ | |
| $('#text'+level+grpId).html($("#text"+nextId).val()); | |
| $('#text'+level+grpId).removeClass('teamName'+$("#text"+Id).attr('rel')); | |
| $('#text'+level+grpId).addClass('teamName'+$("#text"+nextId).attr('rel')); | |
| $('#text'+level+grpId).attr('rel',$("#text"+nextId).attr('rel')); | |
| } | |
| if(t2==t1){ | |
| $('#text'+level+grpId).html(''); | |
| $('#score'+level+grpId).html(0); | |
| } | |
| } | |
| }else{ | |
| if(Id%2==0){ | |
| t1 = parseInt($("#score"+Id).html()); | |
| t2 = parseInt($("#score"+previousId).html()); | |
| console.log(Id); | |
| console.log(previousId); | |
| if(t1>t2){ | |
| $('#text'+level+grpId).html($("#text"+Id).html()); | |
| $('#text'+level+grpId).addClass('teamName'+$("#text"+Id).attr('rel')); | |
| $('#text'+level+grpId).removeClass('teamName'+$("#text"+previousId).attr('rel')); | |
| $('#text'+level+grpId).attr('rel',$("#text"+Id).attr('rel')); | |
| } | |
| if(t2>t1){ | |
| $('#text'+level+grpId).html($("#text"+previousId).html()); | |
| $('#text'+level+grpId).removeClass('teamName'+$("#text"+Id).attr('rel')); | |
| $('#text'+level+grpId).addClass('teamName'+$("#text"+previousId).attr('rel')); | |
| $('#text'+level+grpId).attr('rel',$("#text"+previousId).attr('rel')); | |
| } | |
| if(t2==t1){ | |
| $('#text'+level+grpId).html(''); | |
| $('#score'+level+grpId).html(0); | |
| } | |
| }else{ | |
| t1 = parseInt($("#score"+(Id)).html()); | |
| t2 = parseInt($("#score"+nextId).html()); | |
| console.log(Id); | |
| console.log(nextId); | |
| if(t1>t2){ | |
| $('#text'+level+grpId).html($("#text"+Id).html()); | |
| $('#text'+level+grpId).addClass('teamName'+$("#text"+Id).attr('rel')); | |
| $('#text'+level+grpId).removeClass('teamName'+$("#text"+nextId).attr('rel')); | |
| $('#text'+level+grpId).attr('rel',$("#text"+Id).attr('rel')); | |
| } | |
| if(t2>t1){ | |
| $('#text'+level+grpId).html($("#text"+nextId).html()); | |
| $('#text'+level+grpId).removeClass('teamName'+$("#text"+Id).attr('rel')); | |
| $('#text'+level+grpId).addClass('teamName'+$("#text"+nextId).attr('rel')); | |
| $('#text'+level+grpId).attr('rel',$("#text"+nextId).attr('rel')); | |
| } | |
| if(t2==t1){ | |
| $('#text'+level+grpId).html(''); | |
| $('#score'+level+grpId).html(0); | |
| } | |
| } | |
| } | |
| } | |
| function createChart(){ | |
| $('#dataOutput').empty(); | |
| var rows = teams - 1; | |
| var chartData; | |
| var l=0; | |
| var t=3; | |
| var bracketObj = []; | |
| var brackets ='<div class="row"><div id="t'+l+i+'" class="input-group team'+l+i+'"><div class="input-group-btn"><button id="minus'+l+i+'" rel="'+l+i+'" class="btn btn-danger minus">-</button></div><span class="form-control" placeholder="Team Name" aria-describedby="basic-addon2"></span><div class="input-group-btn"><button id="score'+l+i+'" class="btn btn-info score">0</button><button id="plus'+l+i+'" rel="'+l+i+'" class="btn btn-success plus">+</button></div></div><div id="t'+l+(i+1)+'" class="input-group team'+l+(i+1)+'"><div class="input-group-btn"><button id="minus'+l+(i+1)+'" rel="'+l+(i+1)+'" class="btn btn-danger minus">-</button></div><span class="form-control" placeholder="Team Name" aria-describedby="basic-addon2"></span><div class="input-group-btn"><button id="score'+l+(i+1)+'" class="btn btn-info score">0</button><button id="plus'+l+(i+1)+'" rel="'+l+(i+1)+'" class="btn btn-success plus">+</button></div></div></div>'; | |
| //Level 1 | |
| var i=1; | |
| var levelObj = []; | |
| for (var j = 1; j <= rows; j++) { | |
| //For initial box structure | |
| if(j%2==0){ | |
| chartData = '<div class="row" id="row'+j+'"></div>'; | |
| i=i-1; | |
| }else{ | |
| chartData = '<div class="row" id="row'+j+'"><div id="grp1'+i+'" rel="'+i+'" class="col-sm-2 col-xs-2 col-md-2 level1"><div class="row"><div id="t1'+j+'" class="input-group team1'+j+'"><div class="input-group-btn"><button id="minus1'+j+'" rel="1'+j+'" class="btn btn-danger minus">-</button></div><input id="text1'+j+'" type="text" class="form-control teamName teamName'+j+'" rel="'+j+'" value="Team'+j+'" aria-describedby="basic-addon2"><div class="input-group-btn"><button id="score1'+j+'" class="btn btn-info score">0</button><button id="plus1'+j+'" rel="1'+j+'" class="btn btn-success plus">+</button></div></div><div id="t1'+(j+1)+'" class="input-group team1'+(j+1)+'"><div class="input-group-btn"><button id="minus1'+(j+1)+'" rel="1'+(j+1)+'" class="btn btn-danger minus">-</button></div><input type="text" id="text1'+(j+1)+'" class="form-control teamName teamName'+(j+1)+'" rel="'+(j+1)+'" value="Team'+(j+1)+'" aria-describedby="basic-addon2"><div class="input-group-btn"><button id="score1'+(j+1)+'" class="btn btn-info score">0</button><button id="plus1'+(j+1)+'" rel="1'+(j+1)+'" class="btn btn-success plus">+</button></div></div></div></div></div>'; | |
| var item = {}; | |
| item ["id"] = 'teamName'+j; | |
| item ["group"] = '1'+j; | |
| item ["score"] = 0; | |
| item ["name"] = 'Team'+j; | |
| levelObj.push(item); | |
| var item = {}; | |
| item ["id"] = 'teamName'+(j+1); | |
| item ["group"] = '1'+j; | |
| item ["score"] = 0; | |
| item ["name"] = 'Team'+(j+1); | |
| levelObj.push(item); | |
| } | |
| $('#dataOutput').append(chartData); | |
| i=i+1; | |
| }; | |
| bracketObj.push({'level1':levelObj}); | |
| //Level 2 | |
| if(level>=2){ | |
| //For box | |
| var i=1; | |
| var k=1; | |
| l=2; | |
| var levelObj = []; | |
| for (var j = 2; j <= rows;) { | |
| chartData = '<div id="grp2'+k+'" rel="'+k+'" class="col-sm-2 col-xs-2 col-md-2 col-sm-offset-2 level2"><div class="row"><div id="t'+l+i+'" class="input-group team'+l+i+'"><div class="input-group-btn"><button id="minus'+l+i+'" rel="'+l+i+'" class="btn btn-danger minus">-</button></div><span class="form-control" id="text'+l+i+'" aria-describedby="basic-addon2"></span><div class="input-group-btn"><button id="score'+l+i+'" class="btn btn-info score">0</button><button id="plus'+l+i+'" rel="'+l+i+'" class="btn btn-success plus">+</button></div></div><div id="t'+l+(i+1)+'" class="input-group team'+l+(i+1)+'"><div class="input-group-btn"><button id="minus'+l+(i+1)+'" rel="'+l+(i+1)+'" class="btn btn-danger minus">-</button></div><span id="text'+l+(i+1)+'" class="form-control" aria-describedby="basic-addon2"></span><div class="input-group-btn"><button id="score'+l+(i+1)+'" class="btn btn-info score">0</button><button id="plus'+l+(i+1)+'" rel="'+l+(i+1)+'" class="btn btn-success plus">+</button></div></div></div></div>'; | |
| $('#row'+j).append(chartData); | |
| if(j%2==0){ | |
| var item = {}; | |
| item ["id"] = ' '; | |
| item ["group"] = '2'+k; | |
| item ["score"] = 0; | |
| item ["name"] = ' '; | |
| levelObj.push(item); | |
| var item = {}; | |
| item ["id"] = ' '; | |
| item ["group"] = '2'+k; | |
| item ["score"] = 0; | |
| item ["name"] = ' '; | |
| levelObj.push(item); | |
| } | |
| j=j+4; | |
| i=i+2; | |
| k=k+1; | |
| }; | |
| bracketObj.push({'level2':levelObj}); | |
| //For pointer | |
| var j=2; | |
| for (var i = 1; i <= rows;) { | |
| if(j%2==0){ | |
| chartData='<div class="row col-sm-1 col-xs-1 col-md-1 aDown"></div>'; | |
| }else{ | |
| chartData='<div class="row col-sm-1 col-xs-1 col-md-1 aUp"></div>'; | |
| } | |
| $('#row'+i).append(chartData); | |
| i=i+2 | |
| j=j+1; | |
| }; | |
| } | |
| //Level 3 | |
| if(level>=3){ | |
| //For Box | |
| var i=1; | |
| var k=1; | |
| l=3; | |
| var levelObj = []; | |
| for (var j = 4; j <= rows;) { | |
| chartData = '<div id="grp3'+k+'" rel="'+k+'" class="col-sm-2 col-xs-2 col-md-2 col-sm-offset-4 col-xs-offset-4 col-md-offset-4 level3"><div class="row"><div id="t'+l+i+'" class="input-group team'+l+i+'"><div class="input-group-btn"><button id="minus'+l+i+'" rel="'+l+i+'" class="btn btn-danger minus">-</button></div><span class="form-control" id="text'+l+i+'" aria-describedby="basic-addon2"></span><div class="input-group-btn"><button id="score'+l+i+'" class="btn btn-info score">0</button><button id="plus'+l+i+'" rel="'+l+i+'" class="btn btn-success plus">+</button></div></div><div id="t'+l+(i+1)+'" class="input-group team'+l+(i+1)+'"><div class="input-group-btn"><button id="minus'+l+(i+1)+'" rel="'+l+(i+1)+'" class="btn btn-danger minus">-</button></div><span class="form-control" id="text'+l+(i+1)+'" aria-describedby="basic-addon2"></span><div class="input-group-btn"><button id="score'+l+(i+1)+'" class="btn btn-info score">0</button><button id="plus'+l+(i+1)+'" rel="'+l+(i+1)+'" class="btn btn-success plus">+</button></div></div></div></div>'; | |
| $('#row'+j).append(chartData); | |
| item ["id"] = ' '; | |
| item ["group"] = '3'+k; | |
| item ["score"] = 0; | |
| item ["name"] = ' '; | |
| levelObj.push(item); | |
| item ["id"] = ' '; | |
| item ["group"] = '3'+k; | |
| item ["score"] = 0; | |
| item ["name"] = ' '; | |
| levelObj.push(item); | |
| j=j+8; | |
| i=i+2; | |
| k=k+1; | |
| }; | |
| bracketObj.push({'level3':levelObj}); | |
| //For pointer | |
| var j=2; | |
| for (var i = 2; i <= rows;) { | |
| if(j%2==0){ | |
| chartData='<div class="row col-sm-1 col-xs-1 col-md-1 aDown"></div>'; | |
| $('#row'+(i+1)).append('<div class="row col-sm-2 col-xs-2 col-md-2 aline"></div>') | |
| }else{ | |
| chartData='<div class="row col-sm-1 col-xs-1 col-md-1 aUp"></div>'; | |
| $('#row'+(i-1)).append('<div class="row col-sm-2 col-xs-2 col-md-2 aline"></div>') | |
| } | |
| $('#row'+i).append(chartData); | |
| i=i+4 | |
| j=j+1; | |
| }; | |
| } | |
| //Level 4 | |
| if(level>=4){ | |
| //For box | |
| var i=1; | |
| var k=1; | |
| l=4; | |
| var levelObj = []; | |
| for (var j = 8; j <= rows;) { | |
| chartData = '<div id="grp4'+k+'" rel="'+k+'" class="col-sm-2 col-xs-2 col-md-2 col-sm-offset-6 col-xs-offset-6 col-md-offset-6 level4"><div class="row"><div id="t'+l+i+'" class="input-group team'+l+i+'"><div class="input-group-btn"><button id="minus'+l+i+'" rel="'+l+i+'" class="btn btn-danger minus">-</button></div><span class="form-control" id="text'+l+i+'" aria-describedby="basic-addon2"></span><div class="input-group-btn"><button id="score'+l+i+'" class="btn btn-info score">0</button><button id="plus'+l+i+'" rel="'+l+i+'" class="btn btn-success plus">+</button></div></div><div id="t'+l+(i+1)+'" class="input-group team'+l+(i+1)+'"><div class="input-group-btn"><button id="minus'+l+(i+1)+'" rel="'+l+(i+1)+'" class="btn btn-danger minus">-</button></div><span class="form-control" id="text'+l+(i+1)+'" aria-describedby="basic-addon2"></span><div class="input-group-btn"><button id="score'+l+(i+1)+'" class="btn btn-info score">0</button><button id="plus'+l+(i+1)+'" rel="'+l+(i+1)+'" class="btn btn-success plus">+</button></div></div></div></div>'; | |
| $('#row'+j).append(chartData); | |
| var item = {} | |
| item ["id"] = ''; | |
| item ["group"] = 2+k; | |
| item ["score"] = 0; | |
| item ["name"] = ''; | |
| levelObj.push(item); | |
| var item = {} | |
| item ["id"] = ''; | |
| item ["group"] = 2+k; | |
| item ["score"] = 0; | |
| item ["name"] = ''; | |
| levelObj.push(item); | |
| j=j+16; | |
| i=i+2; | |
| k=k+1; | |
| }; | |
| bracketObj.push({'level4':levelObj}); | |
| //For pointer | |
| var j=2; | |
| for (var i = 4; i <= rows;) { | |
| if(j%2==0){ | |
| chartData='<div class="row col-sm-1 col-xs-1 col-md-1 aDown"></div>'; | |
| $('#row'+(i+1)).append('<div class="row col-sm-2 col-xs-2 col-md-2 aline"></div>'); | |
| $('#row'+(i+2)).append('<div class="row col-sm-2 col-xs-2 col-md-2 aline"></div>'); | |
| $('#row'+(i+3)).append('<div class="row col-sm-4 aline"></div>'); | |
| }else{ | |
| chartData='<div class="row col-sm-1 col-xs-1 col-md-1 aUp"></div>'; | |
| $('#row'+(i-1)).append('<div class="row col-sm-2 col-xs-2 col-md-2 aline"></div>'); | |
| $('#row'+(i-2)).append('<div class="row col-sm-2 col-xs-2 col-md-2 aline"></div>'); | |
| $('#row'+(i-3)).append('<div class="row col-sm-4 aline"></div>'); | |
| } | |
| $('#row'+i).append(chartData); | |
| i=i+8 | |
| j=j+1; | |
| }; | |
| } | |
| //Level 5 | |
| if(level>=5){ | |
| //For box | |
| var i=1; | |
| var k=1; | |
| l=5; | |
| var levelObj = []; | |
| for (var j = 16; j <= rows;) { | |
| chartData = '<div id="grp5'+k+'" rel="'+k+'" class="col-sm-2 col-xs-2 col-md-2 col-sm-offset-8 col-xs-offset-8 col-md-offset-8 level5"><div class="row"><div id="t'+l+i+'" class="input-group team'+l+i+'"><div class="input-group-btn"><button id="minus'+l+i+'" rel="'+l+i+'" class="btn btn-danger minus">-</button></div><span class="form-control" id="text'+l+i+'" aria-describedby="basic-addon2"></span><div class="input-group-btn"><button id="score'+l+i+'" class="btn btn-info score">0</button><button id="plus'+l+i+'" rel="'+l+i+'" class="btn btn-success plus">+</button></div></div><div id="t'+l+(i+1)+'" class="input-group team'+l+(i+1)+'"><div class="input-group-btn"><button id="minus'+l+(i+1)+'" rel="'+l+(i+1)+'" class="btn btn-danger minus">-</button></div><span class="form-control" id="text'+l+(i+1)+'" aria-describedby="basic-addon2"></span><div class="input-group-btn"><button id="score'+l+(i+1)+'" class="btn btn-info score">0</button><button id="plus'+l+(i+1)+'" rel="'+l+(i+1)+'" class="btn btn-success plus">+</button></div></div></div></div>'; | |
| $('#row'+j).append(chartData); | |
| var item = {} | |
| item ["id"] = ''; | |
| item ["group"] = 2+k; | |
| item ["score"] = 0; | |
| item ["name"] = ''; | |
| levelObj.push(item); | |
| var item = {} | |
| item ["id"] = ''; | |
| item ["group"] = 2+k; | |
| item ["score"] = 0; | |
| item ["name"] = ''; | |
| levelObj.push(item); | |
| j=j+16; | |
| i=i+2; | |
| k=k+1; | |
| }; | |
| bracketObj.push({'level5':levelObj}); | |
| //For pointer | |
| var j=2; | |
| for (var i = 8; i <= rows;) { | |
| if(j%2==0){ | |
| chartData='<div class="row col-sm-1 col-xs-1 col-md-1 aDown"></div>'; | |
| $('#row'+(i+1)).append('<div class="row col-sm-2 col-xs-2 col-md-2 aline"></div>'); | |
| $('#row'+(i+2)).append('<div class="row col-sm-2 col-xs-2 col-md-2 aline"></div>'); | |
| $('#row'+(i+3)).append('<div class="row col-sm-2 col-xs-2 col-md-2 aline"></div>'); | |
| $('#row'+(i+4)).append('<div class="row col-sm-2 col-xs-2 col-md-2 aline"></div>'); | |
| $('#row'+(i+5)).append('<div class="row col-sm-4 aline"></div>'); | |
| $('#row'+(i+6)).append('<div class="row col-sm-4 aline"></div>'); | |
| $('#row'+(i+7)).append('<div class="row col-sm-6 aline"></div>'); | |
| }else{ | |
| chartData='<div class="row col-sm-1 col-xs-1 col-md-1 aUp"></div>'; | |
| $('#row'+(i-1)).append('<div class="row col-sm-2 col-xs-2 col-md-2 aline"></div>'); | |
| $('#row'+(i-2)).append('<div class="row col-sm-2 col-xs-2 col-md-2 aline"></div>'); | |
| $('#row'+(i-3)).append('<div class="row col-sm-2 col-xs-2 col-md-2 aline"></div>'); | |
| $('#row'+(i-4)).append('<div class="row col-sm-2 col-xs-2 col-md-2 aline"></div>'); | |
| $('#row'+(i-5)).append('<div class="row col-sm-4 aline"></div>'); | |
| $('#row'+(i-6)).append('<div class="row col-sm-4 aline"></div>'); | |
| $('#row'+(i-7)).append('<div class="row col-sm-6 aline"></div>'); | |
| } | |
| $('#row'+i).append(chartData); | |
| i=i+16 | |
| j=j+1; | |
| }; | |
| } | |
| //$('#dataOutput').append(chartData); | |
| console.log(bracketObj); | |
| } | |
| function singleElimination(){ | |
| } | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment