Combine Selections

by amindunited

HTML

<!-- SCRIPTS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.5.0/ember.min.js"></script>
    
<script type="text/x-handlebars" data-template-name="application">
    <h1>Selections</h1>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="home">
    <div class="amounts">
        <div>
            <button {{action showSelections target="controller"}}>
                Show Selections
            </button>
        </div>
        <div class="selectionsWrap">
            <h3>Selections</h3>
            {{#each slot in controller.content.slots}}
            <div>
                {{#each entry in slot}}
                    {{entry.id}}
                {{/each}}
            </div>
            {{/each}}
            <div class="permutations">
                Permutations {{controller.totalPerms}}
            </div>
            <div class="percent">
                Percent {{controller.percent}} %
            </div>
        </div>
        <label>Stake  </label>{{input type="number" min=0}}
    </div>
    <form>
        <ul>
        {{#each runner in controller.content.runners}}
        <li>
            <div class="col">{{runner.name}}</div>
            <div class="col col_1">
                {{input type="checkbox" checked=runner.slot_1}}
            </div>
            <div class="col col_2">
                {{input type="checkbox" checked=runner.slot_2}}
            </div>
            <div class="col col_3">
                {{input type="checkbox" checked=runner.slot_3}}
            </div>
        </li>
        {{/each}}
        </ul>
    </form>
</script>

CSS

h1 {
    text-align:center; 
    font-size: 24px; 
    font-weight: bold;
    background-color: #999999;
}
li {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
    padding: 5px;
}
.selectionsWrap h3 { background-color: #adadad; }
.selectionsWrap {
    padding: 5px;
    width: 100%;
    min-height: 80px;
    background-color: #999999;
    margin-bottom: 10px;
}
.col {
    display: inline-block;
    width: 24%;
}
.col_1, .col_2, .col_3 {
    width: 10%;
}

JavaScript

var fromServer = {
    runners: [{ name:"Runner_1", id:1 }, { name:"Runner_2", id:2}, 
              { name:"Runner_3", id:3 }, { name: "Runner_4", id:4}, 
              { name:"Runner_5", id:5 }, { name:"Runner_6", id:6}, 
              { name:"Runner_7", id:7 }, { name:"Runner_8", id:8}, 
              { name:"Runner_9", id:9 }, { name:"Runner_10", id:10}, 
              { name:"Runner_11", id:11}, { name:"Runner_12", id:12}, 
              { name:"Runner_13", id:13}, { name:"Runner_14", id:14}, 
              { name:"Runner_15", id:15}, { name:"Runner_16", id:16}, 
              { name:"Runner_17", id:17}, { name:"Runner_18", id:18}, 
              { name:"Runner_19", id:19}, { name:"Runner_20", id:20}
             ]
};

// @PARAMs arr - array - an array of slots ie:
// arr = [[1,2,3],[2,3,4,5],[4,5,6,7]]
// http://stackoverflow.com/questions/1112195/formula-for-calculating-exotic-wagers-such-as-trifecta-and-superfecta
function getPermutations(arr){
    var Groups = arr;
    var permutations = [];//an array or all the possible perms

    function getPerms(group, permSoFar, nextGroupIndex){
        console.log("in get perms, group", group);
        for ( var i = 0; i < group.length; i++ ) {
            var nextPermSoFar = permSoFar.slice(0);
            var num = group[i];

            //If the current number hasn't been used yet...
            console.log('!nextPermSoFar.indexOf(num)', nextPermSoFar.indexOf(num));
            if (nextPermSoFar.indexOf(num) < 0) {
                
                nextPermSoFar.push(num);
                console.log("pushing it", nextPermSoFar);
                //@TODO should this be <= instead?
                console.log("ngi = ", nextGroupIndex, " <= ", Groups.length);
                if (nextGroupIndex < (Groups.length)) {
                    getPerms(
                        Groups[nextGroupIndex], 
                        nextPermSoFar, 
                        (nextGroupIndex + 1)
                    );
                }...