mirror of
https://github.com/Start9Labs/start-os.git
synced 2026-03-26 02:11:53 +00:00
99 lines
2.8 KiB
HTML
99 lines
2.8 KiB
HTML
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-buttons slot="start">
|
|
<ion-back-button defaultHref="system"></ion-back-button>
|
|
</ion-buttons>
|
|
<ion-title>Sideload Service</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content class="ion-text-center">
|
|
<!-- file upload -->
|
|
<div
|
|
*ngIf="!toUpload.file; else fileUploaded"
|
|
class="drop-area"
|
|
[class.drop-area_mobile]="isMobile"
|
|
appDnd
|
|
(onFileDropped)="handleFileDrop($event)"
|
|
>
|
|
<ion-icon
|
|
name="cloud-upload-outline"
|
|
color="dark"
|
|
style="font-size: 42px"
|
|
></ion-icon>
|
|
<h4>Upload .s9pk package file</h4>
|
|
<p *ngIf="onTor">
|
|
<ion-text color="success"
|
|
>Tip: switch to LAN for faster uploads.</ion-text
|
|
>
|
|
</p>
|
|
<ion-button color="primary" type="file" class="ion-margin-top">
|
|
<label for="upload-photo">Browse</label>
|
|
<input
|
|
type="file"
|
|
style="position: absolute; opacity: 0; height: 100%"
|
|
id="upload-photo"
|
|
(change)="handleFileInput($event)"
|
|
/>
|
|
</ion-button>
|
|
</div>
|
|
<!-- file uploaded -->
|
|
<ng-template #fileUploaded>
|
|
<div class="drop-area_filled">
|
|
<h4>
|
|
<ion-icon
|
|
*ngIf="uploadState?.invalid"
|
|
name="close-circle-outline"
|
|
color="danger"
|
|
class="inline"
|
|
></ion-icon>
|
|
<ion-icon
|
|
*ngIf="!uploadState?.invalid"
|
|
class="inline"
|
|
name="checkmark-circle-outline"
|
|
color="success"
|
|
></ion-icon>
|
|
{{ uploadState?.message }}
|
|
</h4>
|
|
<div class="box" *ngIf="toUpload.icon && toUpload.manifest">
|
|
<div class="service-card">
|
|
<div class="row row_end">
|
|
<ion-button
|
|
style="
|
|
--background-hover: transparent;
|
|
--padding-end: 0px;
|
|
--padding-start: 0px;
|
|
"
|
|
fill="clear"
|
|
size="small"
|
|
(click)="clearToUpload()"
|
|
>
|
|
<ion-icon slot="icon-only" name="close" color="danger"></ion-icon>
|
|
</ion-button>
|
|
</div>
|
|
<div class="row">
|
|
<img
|
|
[alt]="toUpload.manifest.title + ' Icon'"
|
|
[src]="toUpload.icon | trustUrl"
|
|
/>
|
|
<h2>{{ toUpload.manifest.title }}</h2>
|
|
<p>{{ toUpload.manifest.version | displayEmver }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ion-button
|
|
*ngIf="!toUpload.icon && !toUpload.manifest; else uploadButton"
|
|
color="primary"
|
|
(click)="clearToUpload()"
|
|
>
|
|
Try again
|
|
</ion-button>
|
|
<ng-template #uploadButton>
|
|
<ion-button color="primary" (click)="handleUpload()">
|
|
Upload & Install
|
|
</ion-button>
|
|
</ng-template>
|
|
</div>
|
|
</ng-template>
|
|
</ion-content>
|