48 lines
2.2 KiB
HTML
48 lines
2.2 KiB
HTML
<div class="container user-admin">
|
|
<div class="loading" ng-show="planLoading || planChanging">
|
|
<div class="spin"></div>
|
|
</div>
|
|
<div class="row" ng-show="errorMessage">
|
|
<div class="col-md-12">
|
|
<div class="alert alert-danger">{{ errorMessage }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" ng-hide="planLoading">
|
|
<div class="col-md-4" ng-repeat='plan in plans'>
|
|
<div class="panel" ng-class="{'panel-success': subscription.plan == plan.stripeId, 'panel-default': subscription.plan != plan.stripeId}">
|
|
<div class="panel-heading">
|
|
{{ plan.title }}
|
|
<span class="pull-right" ng-show="subscription.plan == plan.stripeId">
|
|
<i class="icon-ok"></i>
|
|
Subscribed
|
|
</span>
|
|
</div>
|
|
<div class="panel-body panel-plan">
|
|
<div class="plan-price">${{ plan.price / 100 }}</div>
|
|
<div class="plan-description"><b>{{ plan.privateRepos }}</b> Private Repositories</div>
|
|
<button class="btn btn-primary" ng-hide="subscription" ng-click="subscribe(plan.stripeId)">Subscribe</button>
|
|
<button class="btn" ng-show="subscription && (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>
|
|
</div>
|
|
</div>
|
|
<div class="row" ng-show="subscription">
|
|
<div class="col-md-6">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
Plan 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>
|