mirror of
https://github.com/Start9Labs/start-os.git
synced 2026-03-30 12:11:56 +00:00
80 lines
3.4 KiB
HTML
80 lines
3.4 KiB
HTML
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-title>Installed Services</ion-title>
|
|
<ion-buttons slot="end">
|
|
<badge-menu-button></badge-menu-button>
|
|
</ion-buttons>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content style="position: relative">
|
|
|
|
<!-- loading -->
|
|
<text-spinner *ngIf="loading" text="Connecting to Embassy"></text-spinner>
|
|
|
|
<!-- not loading -->
|
|
<div *ngIf="!loading">
|
|
<div *ngIf="pkgs | empty; else list" class="ion-text-center ion-padding">
|
|
<div style="display: flex; flex-direction: column; justify-content: center; height: 40vh">
|
|
<h2>Welcome to <ion-text color="danger" style="font-family: 'Montserrat';">Embassy</ion-text></h2>
|
|
<p class="ion-text-wrap">Get started by installing your first service.</p>
|
|
</div>
|
|
<ion-button color="dark" [routerLink]="['/marketplace']" routerDirection="root" style="width: 50%;">
|
|
<ion-icon slot="start" name="storefront-outline"></ion-icon>
|
|
Marketplace
|
|
</ion-button>
|
|
</div>
|
|
|
|
<ng-template #list>
|
|
<ion-grid>
|
|
<ion-row>
|
|
<ion-col *ngFor="let pkg of pkgs | keyvalue : asIsOrder" sizeXs="6" sizeSm="4" sizeLg="3">
|
|
<ion-card class="installed-card warn-shadow" [routerLink]="['/services', pkg.value.entry.manifest.id]">
|
|
<div
|
|
*ngIf="!pkg.value.error"
|
|
class="bulb"
|
|
[style.background-color]="connectionFailure ? 'var(--ion-color-dark)' : 'var(--ion-color-' + pkg.value.primaryRendering.color + ')'"
|
|
>
|
|
</div>
|
|
<ion-icon *ngIf="pkg.value.error" class="warning-icon" name="warning" color="warning"></ion-icon>
|
|
|
|
<div class="launch-container" *ngIf="pkg.value.entry.manifest.interfaces | hasUi">
|
|
<div class="launch-button-triangle" (click)="launchUi(pkg.value.entry, $event)" [class.launch-disabled]="!(pkg.value.entry.state | isLaunchable : pkg.value.entry.installed?.status.main.status : pkg.value.entry.manifest.interfaces)">
|
|
<ion-icon name="open-outline"></ion-icon>
|
|
</div>
|
|
</div>
|
|
<img class="main-img" [src]="pkg.value.entry['static-files'].icon" alt="icon" />
|
|
<ion-card-header>
|
|
<ion-card-title>
|
|
{{ pkg.value.entry.manifest.title }}
|
|
</ion-card-title>
|
|
</ion-card-header>
|
|
<ion-card-content>
|
|
<ion-toolbar class="status-toolbar">
|
|
<ion-title>
|
|
<ion-text
|
|
*ngIf="!!pkg.value.installProgress"
|
|
color="primary"
|
|
style="font-weight: bold; font-size: calc(10px + .3vw);"
|
|
>
|
|
{{ pkg.value.entry.state | titlecase }} {{ pkg.value.installProgress.totalProgress }}%
|
|
</ion-text>
|
|
<status
|
|
*ngIf="[PackageState.Installed, PackageState.Removing] | includes : pkg.value.entry.state"
|
|
[disconnected]="connectionFailure"
|
|
[rendering]="pkg.value.primaryRendering"
|
|
weight="bold"
|
|
size="calc(10px + .5vw)"
|
|
>
|
|
</status>
|
|
</ion-title>
|
|
</ion-toolbar>
|
|
</ion-card-content>
|
|
</ion-card>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
</ng-template>
|
|
</div>
|
|
</ion-content>
|