index.html

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style type="text/css">
    .form-section {
        margin-bottom: 20px;
    }

    @media (min-width: 750px) {
        .form {
            border-right: solid 1px #DDD;
        }
    }

    @media (max-width: 749px) {

        .form {
            border-bottom: solid 1px #DDD;
            padding-bottom: 20px;
        }
    }

    .status {
        border: solid 1px #DDD;
    }
</style>

<section class="container">

    <h1>gecko-ci</h1>
    <span class="text-muted">A lightweight build monitor that handles IoT gadgets and brings CI feedbacks to the real world.</span>
    <hr />

    <p class="lead" style="background-color:#F7F7F7; padding:10px;">
        Live demo
    </p>

    <div class="row" ng-controller="GeckoCIController">

        <form class="col-sm-6 form">
            <h4>TFS arguments</h4>

            <div class="form-section">
                <div class="form-group">
                    <label for="emailcollection">Collection :</label>
                    <input type="text" class="form-control" name="collection" ng-model="config.tfsCollection" required />
                </div>

                <div class="form-group">
                    <label for="server">Server :</label>
                    <input type="url" class="form-control" name="server" id="server" placeholder="https://<account>.visualstudio.com/" ng-model="config.tfsServer" required />
                </div>

                <div class="form-group">
                    <label for="user">User :</label>
                    <input type="text" class="form-control" name="user" id="user" placeholder="user@domain.com" ng-model="config.tfsUser" required />
                </div>

                <div class="form-group">
                    <label for="personalToken">Personal token :</label> <b><small class="pull-right">Only the scope Build (read) is required.</small></b>
                    <input type="text" class="form-control" name="personalToken" id="personalToken" placeholder="xxxXXXxxXXXXxxXXXXxxxXXXXxxXXXXxxxxxXXXXxxx" autocomplete="off" ng-model="config.tfsPersonalToken" required />
                    <small class="text-muted">Please create tokens giving only the bare minimum permissions required by the client.</small>
                </div>

                <div class="form-group">
                    <label for="teamProject">Team project :</label>
                    <input type="text" class="form-control" name="teamProject" id="teamProject" ng-model="config.tfsTeamProject" required />
                </div>
            </div>

            <input type="checkbox" ng-model="config.lifxActive" id="lifx-active" /> <label for="lifx-active" class="h4">LIFX arguments (optional)</label>

            <div class="form-section">
                <div class="form-group">
                    <label for="pwdlifx-selector">Selector :</label>
                    <input type="text" ng-disabled="!config.lifxActive" class="form-control" name="lifx-selector" id="lifx-selector" ng-model="config.lifxSelector" required />
                </div>
                <div class="form-group">
                    <label for="lifx-personalToken">Personal token :</label>
                    <input type="text" ng-disabled="!config.lifxActive" class="form-control" name="lifx-personalToken" id="lifx-personalToken" placeholder="xxxXXXxxXXXXxxXXXXxxxXXXXxxXXXXxxxxxXXXXxxx" autocomplete="off" ng-model="config.lifxPersonalToken" required />
                </div>
            </div>

            <button type="submit" class="btn btn-success btn-lg" ng-click="start(config)" ng-hide="isRunning()" style="width:120px">Start</button>
            <button type="button" class="btn btn-default btn-lg ng-hide" ng-click="stop()" ng-hide="!isRunning()" style="width:120px">Stop</button>

        </form>

        <div class="col-sm-6 result-section">
            <h4>Build Status</h4>

            <div class="status text-center" ng-class="textStatusClass">
                <span class="h1" ng-bind="textStatus"></span>
            </div>

            <div id="console" class="text-danger"></div>
        </div>
    </div>

</section>

<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bower_components/angularjs/angular.min.js"></script>
<script type="text/javascript" src="bower_components/gecko-ci/dist/gecko-ci.js"></script>

<script type="text/javascript">

        let gecko = window.$gecko;

        angular.module('app', [])
            .controller('GeckoCIController', ['$scope', function ($scope) {

                $scope.textStatus = "Not running"
                $scope.messages = {}

                $scope.config = {
                    tfsCollection: "DefaultCollection",
                    lifxSelector: "all",
                    lifxActive: false
                }

                $scope.start = function (config) {

                    $("#console").html("");

                    let options = {
                        connections: [
                            {
                                name: "default connection",
                                technology: "tfs",
                                collection: config.tfsCollection,
                                server: config.tfsServer,
                                user: config.tfsUser,
                                personalToken: config.tfsPersonalToken
                            }
                        ],
                        buildMonitors: [
                            {
                                name: "default monitor",
                                teamProject: config.tfsTeamProject,
                                connectionName: "default connection"
                            }
                        ],
                        lightBulbs: [
                            {
                                name: "local",
                                technology: "browser",
                                buildMonitorsNames: ["default monitor"]
                            }
                        ],
                        lightBulbfactories: {
                            "browser": function (connection) {

                                return {
                                    buildSucceeded: () => {
                                        changeStatus("Success", "text-success");
                                        $scope.$apply();
                                    },
                                    buildPartiallySucceeded: () => {
                                        changeStatus("Partial success", "text-warning");
                                        $scope.$apply();
                                    },
                                    buildFailed: () => {
                                        changeStatus("Fail", "text-danger");
                                        $scope.$apply();
                                    }
                                }
                            }
                        }
                    }

                    if (config.lifxActive) {
                        options.lightBulbs.push({
                            name: "default bulb",
                            technology: "lifx",
                            buildMonitorsNames: ["default monitor"],
                            selector: config.lifxSelector,
                            personalToken: config.lifxPersonalToken
                        })
                    }

                    $scope.monitor = gecko.watchBuilds(options);

                    $scope.textStatus = "Connecting..."
                };

                $scope.stop = function () {
                    if ($scope.monitor) {
                        $scope.monitor.stopWatchingBuilds();
                        $scope.monitor = undefined;
                        changeStatus("Not running")
                    }
                }

                $scope.isRunning = function () {
                    return $scope.monitor != undefined
                }

                let changeStatus = (newStatus, newTextStatusClass) => {
                    $scope.textStatus = newStatus;
                    $scope.textStatusClass = newTextStatusClass;
                }

            }]);

        let handleConsole = function () {
            if (typeof console != "undefined")
                if (typeof console.log != 'undefined')
                    console.olog = console.log;
                else
                    console.olog = function () { };

            console.log = function (message) {
                console.olog(message);
                $('#console').append('<p>' + message + '</p>');
            };
            console.error = console.debug = console.info = console.log
        }

        handleConsole();

</script>