svaponi/gitlab-client.html

## gitlab-client.html
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <style>
        .container>div {
            margin: 10px 0;
        }

        .visited {
            background-color: #f2f8ff;
        }
    </style>
</head>

<body ng-app="GitlabClient" class="container" ng-cloak ng-controller="GitlabController">
    <div class="col-md-5 col-xs-12">
        <h4>Your GitLab Host</h4>
        <input type="text" class="form-control" ng-model="conf.host" aria-describedby="host-addon" value="https://gitlab.mgmt.infocert.it">
    </div>
    <div class="col-md-5 col-xs-12">
        <h4>Your Personal Access Token <small ng-show="conf.host">(get it <a href="{{conf.host}}/profile/personal_access_tokens">here</a>)</small></h4>
        <input type="text" class="form-control" ng-model="conf.access_token" aria-describedby="token-addon">
    </div>
    <div class="col-md-2 col-xs-12 text-center">
        <h4>&nbsp;</h4>
        <button ng-disabled="!conf.access_token || !conf.access_token" class="form-control btn btn-default" type="button" ng-click="apply()">Apply</button>
    </div>
    <div class="col-xs-12" ng-if="loaded">
        <h4>Your GitLab Repositories</h4>
        <ul class="list-group" ng-if="!unauthorized">
            <li class="list-group-item" ng-repeat="p in projects | orderObjectBy:'path_with_namespace'" ng-class="{visited: p.tags}">
                <a href="#" ng-click="toggle(p.path_with_namespace)">{{p.path_with_namespace}}</a>
                <ul ng-if="p.showtags">
                    <li ng-repeat="t in p.tags | orderObjectBy:'name':false">{{t.name}} - {{t.message}}</li>
                    <li ng-if="p.notags">No tags found</li>
                </ul>
            </li>
        </ul>
        <p class="text-danger" ng-if="unauthorized">Unauthorized</p>
    </div>
    <!-- <pre class="col-xs-12">{{conf|json}}</pre> -->

    <!-- Your application bootstrap  -->
    <script type="text/javascript">
        var app = angular.module('GitlabClient', []);
        app.constant('conf', {
            access_token: 'YOUR_ACCESS_TOKEN',
            host: 'YOUR_GITLAB_HOST',
            basepath: '/api/v4'
        })
        app.service('GitlabService', ['$q', '$http', 'conf', function($q, $http, conf) {
            return {
                getProjects: function() {
                    var deferred = $q.defer();
                    $http.defaults.headers.common['PRIVATE-TOKEN'] = conf.access_token;
                    $http.get(conf.host + conf.basepath + '/projects').then(function(response) {
                        deferred.resolve(response.data);
                    }, function(error) {
                        console.log(error);
                        deferred.reject();
                    })
                    return deferred.promise;
                },
                getProjectTags: function(id) {
                    var deferred = $q.defer();
                    $http.get(conf.host + conf.basepath + '/projects/' + encodeURIComponent(id) + '/repository/tags').then(function(response) {
                        deferred.resolve(response.data);
                    }, function(error) {
                        deferred.resolve([]);
                    })
                    return deferred.promise;
                }
            };
        }]);
        app.controller('GitlabController', ['$scope', 'GitlabService', 'conf', function($scope, GitlabService, conf) {
            $scope.conf = conf;
            $scope.projects = {};
            $scope.load = function() {
                $scope.loaded = false;
                GitlabService.getProjects().then(function(projects) {
                    $scope.loaded = true;
                    $scope.unauthorized = false;
                    projects.forEach(function(p) {
                        $scope.projects[p.path_with_namespace] = p;
                    });
                }, function(projects) {
                    $scope.loaded = true;
                    $scope.unauthorized = true;
                });
            };
            $scope.apply = function() {
                if (conf.host !== undefined && conf.access_token !== undefined) $scope.load();
            };
            $scope.toggle = function(id) {
                if ($scope.projects[id].tags == undefined) {
                    GitlabService.getProjectTags(id).then(function(tags) {
                        $scope.projects[id].tags = tags.length > 0 ? tags : [];
                        $scope.projects[id].notags = tags.length == 0;
                        $scope.projects[id].showtags = true;
                    });
                } else {
                    $scope.projects[id].showtags = !$scope.projects[id].showtags;
                }
            };
            $scope.apply();
        }]);
        app.filter('orderObjectBy', function() {
            return function(items, field, reverse) {
                var filtered = [];
                angular.forEach(items, function(item) {
                    filtered.push(item);
                });
                filtered.sort(function(a, b) {
                    return (a[field] > b[field] ? 1 : -1);
                });
                if (reverse) filtered.reverse();
                return filtered;
            };
        });
    </script>

</body>

</html>
	<html lang="en">

	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
	<style>
	.container>div {
	margin: 10px 0;
	}

	.visited {
	background-color: #f2f8ff;
	}
	</style>
	</head>

	<body ng-app="GitlabClient" class="container" ng-cloak ng-controller="GitlabController">
	<div class="col-md-5 col-xs-12">
	<h4>Your GitLab Host</h4>
	<input type="text" class="form-control" ng-model="conf.host" aria-describedby="host-addon" value="https://gitlab.mgmt.infocert.it">
	</div>
	<div class="col-md-5 col-xs-12">
	<h4>Your Personal Access Token <small ng-show="conf.host">(get it <a href="{{conf.host}}/profile/personal_access_tokens">here</a>)</small></h4>
	<input type="text" class="form-control" ng-model="conf.access_token" aria-describedby="token-addon">
	</div>
	<div class="col-md-2 col-xs-12 text-center">
	<h4> </h4>
	<button ng-disabled="!conf.access_token \|\| !conf.access_token" class="form-control btn btn-default" type="button" ng-click="apply()">Apply</button>
	</div>
	<div class="col-xs-12" ng-if="loaded">
	<h4>Your GitLab Repositories</h4>
	<ul class="list-group" ng-if="!unauthorized">
	<li class="list-group-item" ng-repeat="p in projects \| orderObjectBy:'path_with_namespace'" ng-class="{visited: p.tags}">
	<a href="#" ng-click="toggle(p.path_with_namespace)">{{p.path_with_namespace}}</a>
	<ul ng-if="p.showtags">
	<li ng-repeat="t in p.tags \| orderObjectBy:'name':false">{{t.name}} - {{t.message}}</li>
	<li ng-if="p.notags">No tags found</li>
	</ul>
	</li>
	</ul>
	<p class="text-danger" ng-if="unauthorized">Unauthorized</p>
	</div>
	<!-- <pre class="col-xs-12">{{conf\|json}}</pre> -->

	<!-- Your application bootstrap -->
	<script type="text/javascript">
	var app = angular.module('GitlabClient', []);
	app.constant('conf', {
	access_token: 'YOUR_ACCESS_TOKEN',
	host: 'YOUR_GITLAB_HOST',
	basepath: '/api/v4'
	})
	app.service('GitlabService', ['$q', '$http', 'conf', function($q, $http, conf) {
	return {
	getProjects: function() {
	var deferred = $q.defer();
	$http.defaults.headers.common['PRIVATE-TOKEN'] = conf.access_token;
	$http.get(conf.host + conf.basepath + '/projects').then(function(response) {
	deferred.resolve(response.data);
	}, function(error) {
	console.log(error);
	deferred.reject();
	})
	return deferred.promise;
	},
	getProjectTags: function(id) {
	var deferred = $q.defer();
	$http.get(conf.host + conf.basepath + '/projects/' + encodeURIComponent(id) + '/repository/tags').then(function(response) {
	deferred.resolve(response.data);
	}, function(error) {
	deferred.resolve([]);
	})
	return deferred.promise;
	}
	};
	}]);
	app.controller('GitlabController', ['$scope', 'GitlabService', 'conf', function($scope, GitlabService, conf) {
	$scope.conf = conf;
	$scope.projects = {};
	$scope.load = function() {
	$scope.loaded = false;
	GitlabService.getProjects().then(function(projects) {
	$scope.loaded = true;
	$scope.unauthorized = false;
	projects.forEach(function(p) {
	$scope.projects[p.path_with_namespace] = p;
	});
	}, function(projects) {
	$scope.loaded = true;
	$scope.unauthorized = true;
	});
	};
	$scope.apply = function() {
	if (conf.host !== undefined && conf.access_token !== undefined) $scope.load();
	};
	$scope.toggle = function(id) {
	if ($scope.projects[id].tags == undefined) {
	GitlabService.getProjectTags(id).then(function(tags) {
	$scope.projects[id].tags = tags.length > 0 ? tags : [];
	$scope.projects[id].notags = tags.length == 0;
	$scope.projects[id].showtags = true;
	});
	} else {
	$scope.projects[id].showtags = !$scope.projects[id].showtags;
	}
	};
	$scope.apply();
	}]);
	app.filter('orderObjectBy', function() {
	return function(items, field, reverse) {
	var filtered = [];
	angular.forEach(items, function(item) {
	filtered.push(item);
	});
	filtered.sort(function(a, b) {
	return (a[field] > b[field] ? 1 : -1);
	});
	if (reverse) filtered.reverse();
	return filtered;
	};
	});
	</script>

	</body>

	</html>