mirror of
https://github.com/Start9Labs/start-os.git
synced 2026-03-30 12:11:56 +00:00
c782bab296
* switch all fe to camelCase * switch to camelCase on backend --------- Co-authored-by: Aiden McClelland <me@drbonez.dev>
120 lines
4.7 KiB
HTML
120 lines
4.7 KiB
HTML
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-title>Updates</ion-title>
|
|
<ion-buttons slot="end">
|
|
<badge-menu-button></badge-menu-button>
|
|
</ion-buttons>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content class="with-widgets">
|
|
<ion-item-group *ngIf="data$ | async as data">
|
|
<div *ngFor="let host of data.hosts">
|
|
<ion-item-divider class="inline">
|
|
<store-icon [url]="host.url" size="26px"></store-icon>
|
|
|
|
<span style="padding-left: 8px; letter-spacing: 0.7px; font-size: 20px">
|
|
{{ host.name }}
|
|
</span>
|
|
</ion-item-divider>
|
|
|
|
<ion-item *ngIf="data.errors.includes(host.url)">
|
|
<ion-text color="danger">Request Failed</ion-text>
|
|
</ion-item>
|
|
|
|
<ng-container
|
|
*ngIf="data.marketplace[host.url]?.packages as packages else loading"
|
|
>
|
|
<ng-container
|
|
*ngIf="packages | filterUpdates : data.localPkgs as updates"
|
|
>
|
|
<ion-accordion-group multiple="true" class="ion-padding-start">
|
|
<div *ngFor="let pkg of updates" class="item-container">
|
|
<ion-accordion *ngIf="data.localPkgs[pkg.manifest.id] as local">
|
|
<ion-item lines="none" slot="header">
|
|
<ion-avatar slot="start" style="width: 50px; height: 50px">
|
|
<img [src]="pkg.icon | trustUrl" />
|
|
</ion-avatar>
|
|
<ion-label>
|
|
<h1 style="line-height: 1.3">{{ pkg.manifest.title }}</h1>
|
|
<h2 class="inline">
|
|
<span>
|
|
{{ local.stateInfo.manifest.version | displayEmver }}
|
|
</span>
|
|
|
|
<ion-icon name="arrow-forward"></ion-icon>
|
|
|
|
<ion-text color="success">
|
|
{{ pkg.manifest.version | displayEmver }}
|
|
</ion-text>
|
|
</h2>
|
|
<p
|
|
*ngIf="marketplaceService.updateErrors[pkg.manifest.id] as error"
|
|
>
|
|
<ion-text color="danger">{{ error }}</ion-text>
|
|
</p>
|
|
</ion-label>
|
|
<div slot="end" style="margin-left: 4px">
|
|
<round-progress
|
|
*ngIf="local.stateInfo.state === 'updating' else notUpdating"
|
|
[current]="(local.stateInfo.installingInfo.progress.overall | installingProgress) || 0"
|
|
[max]="100"
|
|
[radius]="13"
|
|
[stroke]="3"
|
|
[rounded]="true"
|
|
color="var(--ion-color-primary)"
|
|
></round-progress>
|
|
<ng-template #notUpdating>
|
|
<ion-spinner
|
|
*ngIf="marketplaceService.updateQueue[pkg.manifest.id] else updateBtn"
|
|
color="dark"
|
|
></ion-spinner>
|
|
<ng-template #updateBtn>
|
|
<ion-button
|
|
(click)="tryUpdate(pkg.manifest, host.url, $event)"
|
|
[color]="marketplaceService.updateErrors[pkg.manifest.id] ? 'danger' : 'tertiary'"
|
|
strong
|
|
>
|
|
{{ marketplaceService.updateErrors[pkg.manifest.id] ?
|
|
'Retry' : 'Update' }}
|
|
</ion-button>
|
|
</ng-template>
|
|
</ng-template>
|
|
</div>
|
|
</ion-item>
|
|
<div class="ion-padding" slot="content">
|
|
<div class="notes">
|
|
<h5>What's new</h5>
|
|
<p [innerHTML]="pkg.manifest.releaseNotes| markdown"></p>
|
|
</div>
|
|
<ion-button
|
|
fill="clear"
|
|
strong
|
|
(click)="viewInMarketplace($event, host.url, pkg.manifest.id)"
|
|
>
|
|
View listing
|
|
<ion-icon slot="end" name="open-outline"></ion-icon>
|
|
</ion-button>
|
|
</div>
|
|
</ion-accordion>
|
|
</div>
|
|
</ion-accordion-group>
|
|
<ion-item
|
|
*ngIf="!updates.length"
|
|
class="ion-text-center ion-padding"
|
|
lines="none"
|
|
>
|
|
<ion-label>All services are up to date!</ion-label>
|
|
</ion-item>
|
|
</ng-container>
|
|
</ng-container>
|
|
|
|
<ng-template #loading>
|
|
<div class="ion-padding">
|
|
<skeleton-list [showAvatar]="true" [rows]="2"></skeleton-list>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
</ion-item-group>
|
|
</ion-content>
|