Files
start-os/setup-wizard/src/app/pages/home/home.page.html
Drew Ansbacher 517251d672 mo style
2022-01-21 20:35:52 -07:00

77 lines
2.6 KiB
HTML

<ion-content>
<div *ngIf="!stateService.dataDrive && dataDrives">
<div *ngIf="!dataDrives.length">
<h2 color="light">No data drives found</h2>
<p color="light">Please connect a data drive to your embassy and refresh the page.</p>
</div>
<div *ngIf="dataDrives.length">
<h2 style="text-align: center;" color="secondary">Select Data Drive</h2>
<ion-card
color="medium"
*ngFor="let drive of dataDrives"
(click)="selectDrive(drive)"
button="true"
[class.selected]="selectedDrive?.logicalname === drive.logicalname"
color="light"
class="wiz-card"
>
<ion-card-header>
<ion-card-title>{{drive.logicalname}}</ion-card-title>
<ion-card-subtitle>{{drive.labels}}</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
Currently using {{drive.used}} out of {{drive.capacity}} bytes.
</ion-card-content>
</ion-card>
<div style="width: 100%; text-align: center;">
<ion-button
(click)="warn()"
color="primary"
[disabled]="!selectedDrive"
style="text-align:center"
size="large"
>
Next
</ion-button>
</div>
</div>
</div>
<div *ngIf="stateService.dataDrive">
<ion-grid style="max-width: 800px; margin: auto; margin-top: 30px;">
<ion-row>
<ion-col size-xs="12" size-sm="6">
<ion-card
(click)="presentPasswordModal()"
button="true"
color="light"
class="wiz-card"
style="text-align: center; background-color: #00919b !important; height: 160px;"
>
<ion-card-header style="margin-top: 25px;">
<ion-card-title style="font-size: 40px">Start Fresh</ion-card-title>
<ion-card-subtitle>Get started with a brand new Embassy</ion-card-subtitle>
</ion-card-header>
</ion-card>
</ion-col>
<ion-col size-xs="12" size-sm="6">
<ion-card
[routerLink]="['/recover']"
button="true"
color="light"
class="wiz-card"
style="text-align: center; background-color: #bf5900 !important; height: 160px;"
>
<ion-card-header style="margin-top: 25px;">
<ion-card-title style="font-size: 40px">Recover</ion-card-title>
<ion-card-subtitle>Recover the data from an old embassy</ion-card-subtitle>
</ion-card-header>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>