Playing with AngularJS

app.js

/**
 * Created by Danko on 14.01.14..
 */
angular.module('app', ['components'])

    .controller('TableCreator', function($scope) {

        var rows = [];

        /**
         * Position is valid if inside the array bounds and not yet set
         * @param rowCount
         * @param colCount
         * @param posX
         * @param posY
         * @returns {boolean}
         */
        function isValidPosition(rowCount, colCount, posX, posY) {
            return 0 <= posY && posY < rowCount &&
                0 <= posX && posX < colCount &&
                !rows[posY][posX];
        }

        /**
         * Runs the actual algorithm for filling the table with data
         * @param rowCount
         * @param colCount
         * @returns {Array}
         */
        function processTable(rowCount, colCount) {

            rows = [];

            for (var i = 0; i < rowCount; i++) {
                var cols = [];
                for (var j = 0; j < colCount; j++) {
                    cols.push(false);
                }
                rows.push(cols);
            }

            var posX = colCount - 1;
            var posY = rowCount - 1;

            /* Four directions in sequence */
            var directions = [[-1, 0], [0, -1], [1, 0], [0, 1]];
            var dir = 0;
            var numberOfFields = rowCount * colCount;

            var nextNumber = 1;
            rows[posY][posX] = nextNumber;

            for (var i = 0; i < numberOfFields; i ++) {

                var currentDirection = directions[dir];
                posX += currentDirection[0];
                posY += currentDirection[1];

                if (!isValidPosition(rowCount, colCount, posX, posY)) {
                    // 1. step back
                    posX -= currentDirection[0];
                    posY -= currentDirection[1];

                    // 2. look right
                    dir += 1;
                    if (dir > 3)
                        dir = 0;
                    currentDirection = directions[dir];

                    // 3. new step
                    posX += currentDirection[0];
                    posY += currentDirection[1];

                    if (!isValidPosition(rowCount, colCount, posX, posY)) {
                        // if no valid position in the front and on the right, we're done
                        // (this is the last possible move)
                        break;
                    }
                }
                nextNumber += 1;
                rows[posY][posX] = nextNumber;
            }

            return rows;
        }

        $scope.buildTable = function () {
            //console.log("build table");
            var txtRows = angular.element('input#rows');
            var txtCols = angular.element('input#cols');
            var placeholder = angular.element('div#placeholder');
            var rowCount = parseInt(txtRows[0].value);
            var colCount = parseInt(txtCols[0].value);

            // sanity check
            if (rowCount < 1) {
                rowCount = 1;
                txtRows[0].value = 1;
            }
            if (colCount < 1) {
                colCount = 1;
                txtCols[0].value = 1;
            }

            $scope.rows = processTable(rowCount, colCount);
        }

        $scope.showInfo = function (number) {
            alert("Kliknuli ste broj " + number + ".");
        }
    });

components.js

/**
 * Created by Danko on 14.01.14..
 */
angular.module('components', [])

    .directive('tabs', function() {
        return {
            restrict: 'E',
            transclude: true,
            scope: {},
            controller: function($scope, $element) {
                var panes = $scope.panes = [];

                $scope.select = function(pane) {
                    angular.forEach(panes, function(pane) {
                        pane.selected = false;
                    });
                    pane.selected = true;
                }

                this.addPane = function(pane) {
                    if (panes.length == 0) $scope.select(pane);
                    panes.push(pane);
                }
            },
            template:
                '<div class="tabbable">' +
                    '<ul class="nav nav-tabs">' +
                    '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
                    '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
                    '</li>' +
                    '</ul>' +
                    '<div class="tab-content" ng-transclude></div>' +
                    '</div>',
            replace: true
        };
    })

    .directive('pane', function() {
        return {
            require: '^tabs',
            restrict: 'E',
            transclude: true,
            scope: { title: '@' },
            link: function(scope, element, attrs, tabsCtrl) {
                tabsCtrl.addPane(scope);
            },
            template:
                '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
                    '</div>',
            replace: true
        };
    })

    .directive('customOnChange', function() {
        'use strict';

        return {
            restrict: "A",
            link: function (scope, element, attrs) {
                var onChangeFunc = element.scope()[attrs.customOnChange];
                element.bind('change', onChangeFunc);
            }
        };
    });

custom.css

.nav {
    margin-bottom: 16px;
}

index.html

<!doctype html>
<html ng-app="app">
<head>
    <meta http-equiv="content-Type" content="text/html; charset=utf-8" />
    <script src="js/jquery.js"></script>
    <script src="js/angular.js"></script>
    <script src="components.js"></script>
    <script src="app.js"></script>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
</head>
<body>

<div class="container">
    <div class="header">
        <ul class="nav nav-pills pull-right">
            <!--<li class="active"><a href="#">Home</a></li>-->
            <li><a href="http://dankokozar.com" target="_blank">About</a></li>
            <li><a href="http://dankokozar.com/blog/contact/" target="_blank">Contact</a></li>
        </ul>
        <h3 class="text-muted">My AngularJS Playground</h3>
    </div>

<div class="jumbotron">

<h1>Spiral Table Generator</h1>

<tabs class="well">
    <pane title="Table">

        <div id="myDiv" ng-controller="TableCreator" class="container">

            <div class="row">
                <div class="col-md-4">
                    <span>Broj redaka:</span><br>
                    <input id="rows" class="text-center" type="number" value="5" custom-on-change="buildTable" /><br><br>

                    <span>Broj stupaca:</span><br>
                    <input id="cols" class="text-center" type="number" value="5" custom-on-change="buildTable" /><br><br>

                    <button class="btn btn-primary btn-lg" ng-click="count = count + 1; buildTable()" ng-init="count=1; buildTable()">
                        Kreiraj tablicu!
                    </button><br/><br/>
                </div>

                <div class="col-md-4">
                    <table class="table">
                        <tr ng-repeat="row in rows" >
                            <td ng-repeat="col in row">
                                <input type="button" value="{{col}}" ng-click="showInfo(col)" class="btn btn-warning">
                            </td>
                        </tr>
                    </table>
                    Tablica kreirana {{count}} puta.
                </div>
            </div>
        </div>
    </pane>
    <pane title="About">
        Zadatak: Inchoo<br/>
        Rješenje: Danko Kozar (just for fun)<br/><br/>
        Korisnik unosi dva polja: broj redova i broj stupaca. Ispod postoji gumb "KREIRAJ TABLICU". Nakon submita, pored navedene forme se prikazuje tablica zatraženih dimenzija gdje su polja popunjena brojevima. Brojevi su popunjeni sljedećom logikom:<br/><br/>
        <ul>
            <li>Broj 1 se nalazi u donjem desnom kutu</li>
            <li>Polja tablice se popunjavaju spiralno ciklički u krug u smjeru kazaljke na satu</li>
        </ul><br/>
        <a href="http://www.moj-posao.net/Posao/232114/PHP-Developer-mf/" target="_blank">Link na originalni zadatak</a><br/>
        <a href="http://dankokozar.com/js/spiral_table/SpiralTable.zip" target="_blank">Download rješenja</a>
    </pane>
</tabs>

</div>

<div class="footer">
    <a href="http://dankokozar.com" target="_blank">&copy; Danko Kozar 2014</a>
</div>
</div>

</body>
</html>