| <mat-toolbar color="primary"> |
| <span>Ledger Cloud Dashboard</span> |
| </mat-toolbar> |
| <div class="lcd-container"> |
| <div *ngIf="!authenticated"> |
| <mat-card class="lcd-card"> |
| <mat-card-content> |
| <h1>Authentication required</h1> |
| <p>Please authenticate in order to use the dashboard.</p> |
| </mat-card-content> |
| <mat-card-actions> |
| <button mat-raised-button color="accent" (click)="login()">Login</button> |
| </mat-card-actions> |
| </mat-card> |
| </div> |
| |
| <div *ngIf="deleteInProgress"> |
| <mat-card class="lcd-card"> |
| <mat-card-content> |
| <h1>Delete in progress</h1> |
| <p>Please don't close the tab!!!</p> |
| <mat-progress-spinner mode="indeterminate"></mat-progress-spinner> |
| <p>Deleted documents: <b>{{ deletedDocumentCount }} </b></p> |
| </mat-card-content> |
| </mat-card> |
| </div> |
| |
| <div *ngIf="authenticated && !deleteInProgress"> |
| <!-- Info about the user --> |
| <mat-card class="lcd-card"> |
| <mat-card-content> |
| <h1>User</h1> |
| <p>You are signed in as <b>{{ (user | async)?.email }}</b> |
| a.k.a <b>{{ uid }}</b> (Firebase user ID).</p> |
| </mat-card-content> |
| <mat-card-actions> |
| <button mat-raised-button color="accent" (click)="logout()">Logout</button> |
| </mat-card-actions> |
| </mat-card> |
| |
| <!-- State --> |
| <mat-card class="lcd-card"> |
| <mat-card-content> |
| <h1>State</h1> |
| <div *ngIf="loading"> |
| <p>Loading the state.</p> |
| </div> |
| <div *ngIf="!loading && !version"> |
| <p>Ledger is empty.</p> |
| </div> |
| <div *ngIf="!loading && version"> |
| <p>Looking at serialization version <b>{{ version }}</b>.</p> |
| <p>There are <b>{{ (devices | async)?.length }}</b> devices syncing.</p> |
| <ul> |
| <li class="text" *ngFor="let device of devices | async"> |
| {{device.id}} |
| <span *ngIf="device.connectionTimestamp"> |
| -- Last connection at |
| {{device.connectionTimestamp | date:'yyyy-MM-dd HH:mm:ss Z'}}</span> |
| </li> |
| </ul> |
| <p>Device IDs are opaque and meaningful only to Ledger.</p> |
| </div> |
| </mat-card-content> |
| </mat-card> |
| |
| <!-- Cloud delete --> |
| <mat-card class="lcd-card"> |
| <mat-card-content> |
| <h1>Reset Ledger state</h1> |
| <p><i>Why do we even have this lever?</i></p> |
| <p><b>This will also trigger erase of the local data, the next time each of |
| the devices sync</b></p> |
| <p>Collections to be erased:</p> |
| <ul *ngFor="let collection of allCollections"> |
| <li>{{ collection.ref.path }}</li> |
| </ul> |
| </mat-card-content> |
| <mat-card-actions> |
| <button mat-raised-button color="warn" (click)="erase()">Permanently erase all my data</button> |
| </mat-card-actions> |
| </mat-card> |
| </div> |
| </div> |