Start on org admin page

This commit is contained in:
Joseph Schorr 2013-11-05 18:39:27 -05:00
parent 91806ee252
commit b145f72369
3 changed files with 184 additions and 1 deletions

View file

@ -1490,6 +1490,26 @@ p.editable:hover i {
padding: 6px;
}
.org-admin .plans-table thead td {
color: #aaa;
font-weight: bold;
}
.org-admin .plans-table td {
padding: 10px;
font-size: 16px;
vertical-align: middle;
}
.org-admin .plans-table td.controls {
text-align: right;
}
.org-admin .plans-table .plan-price {
font-size: 16px;
margin-bottom: 0px;
}
/* Overrides for typeahead to work with bootstrap 3. */
.twitter-typeahead .tt-query,

View file

@ -1180,8 +1180,63 @@ function OrgViewCtrl($rootScope, $scope, Restangular, $routeParams) {
loadOrganization();
}
function OrgAdminCtrl($scope, Restangular, $routeParams) {
function OrgAdminCtrl($rootScope, $scope, Restangular, $routeParams, UserService, PlanService) {
// Load the list of plans.
PlanService.getPlans(function(plans) {
$scope.plans = plans.business;
});
var orgname = $routeParams.orgname;
var loadOrganization = function() {
var getOrganization = Restangular.one(getRestUrl('organization', orgname));
getOrganization.get().then(function(resp) {
if (resp && resp.is_admin) {
$scope.organization = resp;
$rootScope.title = orgname + ' (Admin)';
}
$scope.loading = false;
}, function() {
$scope.loading = false;
});
};
var subscribedToPlan = function(sub) {
$scope.subscription = sub;
PlanService.getPlan(sub.plan, function(subscribedPlan) {
$scope.subscribedPlan = subscribedPlan;
$scope.planUsagePercent = sub.usedPrivateRepos * 100 / $scope.subscribedPlan.privateRepos;
if (sub.usedPrivateRepos > $scope.subscribedPlan.privateRepos) {
$scope.overLimit = true;
} else if (sub.usedPrivateRepos >= $scope.subscribedPlan.privateRepos * 0.7) {
$scope.nearLimit = true;
} else {
$scope.overLimit = false;
$scope.nearLimit = false;
}
$scope.planLoading = false;
});
};
var loadSubscription = function() {
$scope.planLoading = true;
UserService.getCurrentSubscription(subscribedToPlan, function() {
// Organization has no subscription.
$scope.planLoading = false;
});
};
$scope.getActiveSubClass = function() {
if ($scope.overLimit) { return 'danger'; }
if ($scope.nearLimit) { return 'warning'; }
return 'success';
};
loadSubscription();
loadOrganization();
}
function TeamViewCtrl($rootScope, $scope, Restangular, $routeParams) {

View file

@ -0,0 +1,108 @@
<div class="loading" ng-show="loading">
<i class="fa fa-spinner fa-spin fa-3x"></i>
</div>
<div class="loading" ng-show="!loading && !organization">
No matching organization found
</div>
<div class="org-admin container" ng-show="!loading && organization">
<div class="organization-header" organization="organization"></div>
<div class="row">
<!-- Side tabs -->
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="javascript:void(0)" data-toggle="tab" data-target="#usage">Current Usage</a></li>
<li><a href="javascript:void(0)" data-toggle="tab" data-target="#plan">Plan/Billing</a></li>
<li><a href="javascript:void(0)" data-toggle="tab" data-target="#members">Members</a></li>
</ul>
</div>
<!-- Content -->
<div class="col-md-10">
<div class="tab-content">
<!-- Usage tab -->
<div id="usage" class="tab-pane active">
<div class="alert alert-danger" ng-show="overLimit">
You are using more private repositories than your plan allows, please
<a href="javascript:void(0)" data-toggle="tab" data-target="#plan">upgrade your subscription</a>
to avoid disruptions in your organization's service.
</div>
<div class="alert alert-warning" ng-show="nearLimit">
You are nearing the number of allowed private repositories. It might be time to think about
<a href="javascript:void(0)" data-toggle="tab" data-target="#plan">upgrading your subscription</a>
to avoid future disruptions in your organization's service.
</div>
<!-- Subscription -->
<i class="fa fa-spinner fa-spin fa-3x" ng-show="planLoading"></i>
<div class="row" ng-show="!planLoading && subscription">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
Current Usage
</div>
<div class="panel-body">
<div class="used-description">
<b>{{ subscription.usedPrivateRepos }}</b> of <b>{{ subscribedPlan.privateRepos }}</b> private repositories used
</div>
<div class="progress">
<div ng-class="'progress-bar ' + (planUsagePercent > 90 ? 'progress-bar-danger' : '')" role="progressbar" aria-valuenow="{{ subscription.usedPrivateRepos }}" aria-valuemin="0" aria-valuemax="{{ subscribedPlan.privateRepos }}" style="width: {{ planUsagePercent }}%;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Plans tab -->
<div id="plan" class="tab-pane">
<div class="alert alert-danger" ng-show="overLimit">
You are using more private repositories than your plan allows, please
upgrade your subscription to avoid disruptions in your organization's service.
</div>
<div class="alert alert-warning" ng-show="nearLimit">
You are nearing the number of allowed private repositories. It might be time to think about
upgrading your subscription to avoid future disruptions in your organization's service.
</div>
<table class="table table-hover plans-table">
<thead>
<td>Plan</td>
<td>Private Repositories</td>
<td style="min-width: 64px">Price</td>
<td></td>
</thead>
<tr ng-repeat="plan in plans" ng-class="(subscription.plan === plan.stripeId) ? getActiveSubClass() : ''">
<td>{{ plan.title }}</td>
<td>{{ plan.privateRepos }}</td>
<td><div class="plan-price">${{ plan.price / 100 }}</div></td>
<td class="controls">
<div ng-switch='plan.stripeId'>
<div ng-switch-when='free'>
<button class="btn button-hidden">Hidden!</button>
</div>
<div ng-switch-default>
<button class="btn btn-primary" ng-show="subscription.plan === 'free'" ng-click="subscribe(plan.stripeId)">Subscribe</button>
<button class="btn btn-default" ng-hide="subscription.plan === 'free' || subscription.plan === plan.stripeId" ng-click="changeSubscription(plan.stripeId)">Change</button>
<button class="btn btn-danger" ng-show="subscription.plan === plan.stripeId" ng-click="cancelSubscription()">Cancel</button>
</div>
</div>
</td>
</tr>
</table>
</div>
<!-- Members tab -->
<div id="members" class="tab-pane">
members
</div>
</div>
</div>
</div>
</div>