61 lines
2.6 KiB
HTML
61 lines
2.6 KiB
HTML
<div class="text-center mt-3" *ngIf="loadingIndicator">
|
|
<div class="spinner-border text-info" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<ng-container *ngIf="!loadingIndicator">
|
|
<div class="btn-group w-100" btnRadioGroup>
|
|
<label [btnRadio]="group" class="btn" [class.active]="group === selectedPackageGroup" *ngFor="let group of packageGroups"
|
|
(click)="setPackageGroup($event, group)">
|
|
{{ group }}
|
|
</label>
|
|
</div>
|
|
|
|
<div class="list-group list-group-flush flex-grow-1" *ngIf="packages">
|
|
<ng-container *ngFor="let pkg of packages[selectedPackageGroup]">
|
|
<a *ngIf="pkg.visible" class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" id="pkg-{{ pkg.id }}" name="pkg" [value]="pkg" [(ngModel)]="selectedPackage">
|
|
<label class="form-check-label d-flex justify-content-between align-items-center pb-2" for="pkg-{{ pkg.id }}">
|
|
<span class="d-block flex-grow-1">
|
|
<span class="d-block">
|
|
<span class="h3 text-uppercase">
|
|
{{ pkg.name }}
|
|
<span class="price" *ngIf="pkg.price">{{ pkg.price | currency: 'USD': 'symbol': '1.0-2' }}/h</span>
|
|
<!--<small *ngIf="pkg.brand">{{ pkg.brand }}</small>-->
|
|
</span>
|
|
<small class="text-faded pb-1 d-block">
|
|
v<b>{{ pkg.version }}</b>
|
|
<small class="badge badge-discreet ms-2" *ngIf="pkg.flexible_disk">Flexible Disk</small>
|
|
</small>
|
|
<small class="mb-0 pe-3 text-faded" *ngIf="pkg.description">{{ pkg.description }}</small>
|
|
</span>
|
|
</span>
|
|
<b class="d-sm-flex flex-nowrap d-none justify-content-between">
|
|
<span class="package-specs">
|
|
<span class="title">CPU</span>
|
|
<span class="h5">{{ pkg.vcpus || 1 }}</span>
|
|
</span>
|
|
<span class="package-specs">
|
|
<span class="title">Memory</span>
|
|
<span class="h5">
|
|
{{ pkg.memorySize }}
|
|
<small>{{ pkg.memorySizeLabel }}</small>
|
|
</span>
|
|
</span>
|
|
<span class="package-specs">
|
|
<span class="title">Disk</span>
|
|
<span class="h5">
|
|
{{ pkg.diskSize }}
|
|
<small>{{ pkg.diskSizeLabel }}</small>
|
|
</span>
|
|
</span>
|
|
</b>
|
|
</label>
|
|
</div>
|
|
</a>
|
|
</ng-container>
|
|
</div>
|
|
</ng-container>
|