Angular Ad-hoc group drawing

Aka poolsystem

by anup1986

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://underscorejs.org/underscore-min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="container" ng-app="myApp">
    <div class="page-header">
         <h3>Poolsystem</h3>

    </div>
    <div ng-controller="drawController">
        <div class="row">
            <div class="col-md-12">
                <div ng-repeat="group in groups">
                    <table class="table table-bordered group-table">
                        <thead>
                            <tr>
                                <th>{{group.id}}</th>
                                <th>Namn</th>
                                <th>Klubb</th>
                                <th class="center-text" ng-repeat="c in group.competitors">{{c.id}}</th>
                                <th>Vunna</th>
                                <th>Poäng</th>
                                <th>Flaggor</th>
                                <th>Placering</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="c in group.competitors" ng-class="{'bg-grey': missingComp(group.competitors, c.id)}">
                                <td>{{c.id}}</td>
                                <td>{{c.name}}</td>
                                <td>{{c.club.name}}</td>
                                <td ng-class="{'bg-grey': $index +1 === 1 || missingComp(group.competitors, 1) || missingComp(group.competitors, 2)}"></td>
                                <td ng-class="{'bg-grey': $index +1 === 2 || missingComp(group.competitors, 3) || missingComp(group.competitors, 4)}"></td>
                                <td ng-class="{'bg-grey': $index +1 === 3 || missingComp(group.competitors, 5) || missingComp(group.competitors, 6)}"></td>
                               ...

CSS

html, body, .brackets {
    width: 100%;
    min-height: 100%;
    font-family:"Arial", sans-serif;
}
.group-table .center-text {
    text-align: center;
}
.bg-grey {
    background: #ccc;
}
.bg-grey >span {
    color: #000;
}
.red {
    color: rgb(255, 99, 99);
}
.blue {
    color: blue;
}

JavaScript

// TODO: Add handling for groups in range 10 - 20 competitors (Group A, B, C and D)

var myApp = angular.module('myApp', []);

myApp.filter('range', function () {
    return function (input, total) {
        var total = parseInt(total);
        for (var i = 0; i < total; i++)
        input.push(i);
        return input;
    };
});

myApp.directive('mcRenderGroupSystem', [

function () {
    return {
        restrict: 'AE',
        scope: true,
        link: function (scope, element, attrs, controller) {

        }
    };
}]);

var Competitor = function (id, name, clubName) {
    this.id = id;
    this.name = name;

    this.club = {
        name: clubName
    };
};

var group = function (id) {
    this.id = id;
};

var groupMatch = function (id, matchNo, compA, compB) {
    this.id = id;
    this.matchNo = matchNo;
    this.compA = compA;
    this.compB = compB;
};

myApp.controller('drawController', [
    '$scope', '$rootScope', function ($scope, $rootScope) {
    $scope.competitors = [
    new Competitor(1, "Pontus", 'Södermalm tkd'),
    new Competitor(2, "Andreas", 'Södermalm tkd'),
    new Competitor(3, "Arto", 'Södermalm tkd'),
    new Competitor(4, "Mathias", 'Södermalm tkd'),
    new Competitor(5, "Samir", 'Telge ITF'),
    new Competitor(6, "Tomas", 'Södermalm tkd'),
    new Competitor(7, "Benny", 'Telge ITF'),
    //new Competitor(8, "Armani", 'Fighter GBG'),
    //new Competitor(9, "Åke", 'Fighter GBG'),
    //new Competitor(10, "Josef", 'Fighter GBG')
    ];

    $scope.shuffled = _.shuffle(angular.copy($scope.competitors));

    $scope.missingComp = function (listToSearch, compId) {
        var c = _.findWhere(listToSearch, {
            id: compId
        });
        if (!c) return false;

        if (!c['name']) {
            return true;
        } else {
            return false;
        }
    };

    var groupMatchesUpToFiveCompetitors = [
    new groupMatch('A', 1, 4, 5),
    new groupMatch('A', 2, 1, 2),
    new groupMatch('A', 3, 3, 4),
   ...