72 lines
3.4 KiB
HTML
72 lines
3.4 KiB
HTML
<div class="plan-manager-element">
|
|
<!-- Loading/Changing -->
|
|
<div class="quay-spinner 3x" ng-show="planLoading"></div>
|
|
|
|
<!-- Alerts -->
|
|
<div class="alert alert-danger" ng-show="limit == 'over' && !planLoading">
|
|
You are using more private repositories than your plan allows. Please
|
|
upgrade your subscription to avoid disruptions in your <span ng-show="organization">organization's</span> service.
|
|
</div>
|
|
|
|
<div class="alert alert-warning" ng-show="limit == 'at' && !planLoading">
|
|
You are at your current plan's number of allowed private repositories. It might be time to think about
|
|
upgrading your subscription to avoid future disruptions in your <span ng-show="organization">organization's</span> service.
|
|
</div>
|
|
|
|
<div class="alert alert-success" ng-show="limit == 'near' && !planLoading">
|
|
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 <span ng-show="organization">organization's</span> service.
|
|
</div>
|
|
|
|
<!-- Chart -->
|
|
<div>
|
|
<div id="repository-usage-chart" class="usage-chart limit-{{limit}}"></div>
|
|
<span class="usage-caption" ng-show="chart">Repository Usage</span>
|
|
</div>
|
|
|
|
<!-- Plans Table -->
|
|
<table class="table table-hover plans-list-table" ng-show="!planLoading">
|
|
<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-show="isPlanVisible(plan, subscribedPlan)"
|
|
ng-class="{'active':(subscribedPlan.stripeId === plan.stripeId), 'deprecated-plan':plan.deprecated}">
|
|
<td>
|
|
{{ plan.title }}
|
|
<div class="deprecated-plan-label" ng-show="plan.deprecated">
|
|
<span class="context-tooltip" title="This plan has been discontinued. As a valued early adopter, you may continue to stay on this plan indefinitely." bs-tooltip="tooltip.title" data-placement="right">Discontinued Plan</span>
|
|
</div>
|
|
</td>
|
|
<td>{{ plan.privateRepos }}</td>
|
|
<td><div class="plan-price">${{ plan.price / 100 }}</div></td>
|
|
<td class="controls">
|
|
<div ng-switch='plan.deprecated'>
|
|
<div ng-switch-when='true'>
|
|
<button class="btn btn-danger" ng-click="cancelSubscription()">
|
|
<span class="quay-spinner" ng-show="planChanging"></span>
|
|
<span ng-show="!planChanging">Cancel</span>
|
|
</button>
|
|
</div>
|
|
<div ng-switch-default>
|
|
<button class="btn" ng-show="subscribedPlan.stripeId !== plan.stripeId"
|
|
ng-class="subscribedPlan.price == 0 ? 'btn-primary' : 'btn-default'"
|
|
ng-click="changeSubscription(plan.stripeId)">
|
|
<span class="quay-spinner" ng-show="planChanging"></span>
|
|
<span ng-show="!planChanging && subscribedPlan.price != 0">Change</span>
|
|
<span ng-show="!planChanging && subscribedPlan.price == 0">Subscribe</span>
|
|
</button>
|
|
<button class="btn btn-danger" ng-show="subscription.plan === plan.stripeId && plan.price > 0"
|
|
ng-click="cancelSubscription()">
|
|
<span class="quay-spinner" ng-show="planChanging"></span>
|
|
<span ng-show="!planChanging">Cancel</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|