147 lines
10 KiB
HTML
147 lines
10 KiB
HTML
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-buttons slot="start">
|
|
<ion-back-button [text]="'core.back' | translate" />
|
|
</ion-buttons>
|
|
<ion-title>
|
|
<h1>{{ 'addon.storagemanager.coursedownloads' | translate }}</h1>
|
|
</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
<ion-content class="limited-width">
|
|
<core-loading [hideUntil]="loaded">
|
|
<ion-item class="ion-text-wrap" *ngIf="downloadCourseEnabled">
|
|
<ion-label>
|
|
<p>{{ 'addon.storagemanager.courseinfo' | translate }}</p>
|
|
</ion-label>
|
|
</ion-item>
|
|
|
|
|
|
<ion-card class="wholecourse">
|
|
<ion-card-header>
|
|
<ion-card-title>
|
|
<core-format-text [text]="title" contextLevel="course" [contextInstanceId]="courseId" [adaptImg]="false" />
|
|
</ion-card-title>
|
|
<ion-item class="size ion-text-wrap ion-no-padding">
|
|
<ion-label>
|
|
<p class="item-heading ion-text-wrap">{{ 'addon.storagemanager.totaldownloads' | translate }}</p>
|
|
</ion-label>
|
|
<ion-badge color="light" slot="end">
|
|
<ng-container *ngIf="!calculatingSize">{{ totalSize | coreBytesToSize }}</ng-container>
|
|
<ng-container *ngIf="calculatingSize">{{ 'core.calculating' | translate }}</ng-container>
|
|
</ion-badge>
|
|
</ion-item>
|
|
<ion-button *ngIf="downloadCourseEnabled" (click)="prefetchCourse($event)" expand="block" fill="outline"
|
|
class="ion-no-margin" [disabled]="prefetchCourseData.loading">
|
|
<ion-icon *ngIf="!prefetchCourseData.loading" [name]="prefetchCourseData.icon" slot="start" aria-hidden="true" />
|
|
<ion-spinner *ngIf="prefetchCourseData.loading" slot="start" />
|
|
{{ prefetchCourseData.statusTranslatable | translate }}
|
|
</ion-button>
|
|
<ion-button [disabled]="calculatingSize || totalSize <= 0" (click)="deleteForCourse($event)" expand="block" color="danger"
|
|
class="ion-no-margin ion-margin-top">
|
|
<ion-icon name="fas-trash" slot="start" [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate:
|
|
{ name: title }" />
|
|
{{ 'addon.storagemanager.deleteall' | translate }}
|
|
</ion-button>
|
|
</ion-card-header>
|
|
</ion-card>
|
|
|
|
<ion-accordion-group [multiple]="true" (ionChange)="accordionGroupChange($event.detail)" #accordionGroup>
|
|
<ng-container *ngFor="let section of sections">
|
|
<ion-card class="section" *ngIf="section.modules.length > 0">
|
|
<ion-accordion [value]="section.id" toggleIconSlot="start">
|
|
<ion-item [detail]="false" slot="header" class="card-header">
|
|
<ion-label>
|
|
<p class="item-heading ion-text-wrap">
|
|
<core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="section.course"
|
|
[adaptImg]="false" />
|
|
</p>
|
|
<ion-badge [color]="section.downloadStatus === statusDownloaded ? 'success' : 'light'"
|
|
*ngIf="!section.calculatingSize && section.totalSize > 0">
|
|
<ion-icon name="fam-cloud-done" *ngIf="section.downloadStatus === statusDownloaded"
|
|
[attr.aria-label]="'core.downloaded' | translate" />{{ section.totalSize | coreBytesToSize }}
|
|
</ion-badge>
|
|
<ion-badge color="light" *ngIf="section.calculatingSize">
|
|
{{ 'core.calculating' | translate }}
|
|
</ion-badge>
|
|
<!-- Download progress. -->
|
|
<p *ngIf="downloadEnabled && section.isDownloading">
|
|
<core-progress-bar [progress]="section.total === 0 ? -1 : (section.count / section.total) * 100" />
|
|
</p>
|
|
</ion-label>
|
|
<div class="storage-buttons" slot="end"
|
|
*ngIf="(!section.calculatingSize && section.totalSize > 0) || downloadEnabled">
|
|
<div *ngIf="downloadEnabled" slot="end" class="core-button-spinner">
|
|
<core-download-refresh *ngIf="!section.isDownloading && section.downloadStatus !== statusDownloaded"
|
|
[status]="section.downloadStatus" [enabled]="true" (action)="prefecthSection(section)"
|
|
[loading]="section.isDownloading || section.isCalculating" [canTrustDownload]="true"
|
|
[statusesTranslatable]="{notdownloaded: 'addon.storagemanager.downloaddatafrom' }"
|
|
[statusSubject]="section.name" />
|
|
|
|
<ion-badge class="core-course-download-section-progress"
|
|
*ngIf="section.isDownloading && section.count < section.total" role="progressbar"
|
|
[attr.aria-valuemax]="section.total" [attr.aria-valuenow]="section.count"
|
|
[attr.aria-valuetext]="'core.course.downloadsectionprogressdescription' | translate:section">
|
|
{{section.count}} / {{section.total}}
|
|
</ion-badge>
|
|
</div>
|
|
<ion-button (click)="deleteForSection($event, section)"
|
|
*ngIf="!section.calculatingSize && section.totalSize > 0" color="danger" fill="clear">
|
|
<ion-icon name="fas-trash" slot="icon-only"
|
|
[attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: section.name }" />
|
|
</ion-button>
|
|
</div>
|
|
</ion-item>
|
|
<ion-card-content slot="content">
|
|
<ng-container *ngIf="section.expanded">
|
|
<ng-container *ngFor="let module of section.modules">
|
|
<ion-item class="core-course-storage-activity"
|
|
*ngIf="downloadEnabled || (!module.calculatingSize && module.totalSize > 0)">
|
|
<core-mod-icon slot="start" *ngIf="module.handlerData.icon" [modicon]="module.handlerData.icon"
|
|
[modname]="module.modname" [componentId]="module.instance"
|
|
[fallbackTranslation]="module.modplural" [isBranded]="module.branded" />
|
|
<ion-label class="ion-text-wrap">
|
|
<p class="item-heading {{module.handlerData!.class}} addon-storagemanager-module-size">
|
|
<core-format-text [text]="module.handlerData.title" [courseId]="module.course"
|
|
contextLevel="module" [contextInstanceId]="module.id" [adaptImg]="false" />
|
|
</p>
|
|
<ion-badge [color]="module.downloadStatus === statusDownloaded ? 'success' : 'light'"
|
|
*ngIf="!module.calculatingSize && module.totalSize > 0">
|
|
<ion-icon name="fam-cloud-done" *ngIf="module.downloadStatus === statusDownloaded"
|
|
[attr.aria-label]="'core.downloaded' | translate" />{{ module.totalSize |
|
|
coreBytesToSize }}
|
|
</ion-badge>
|
|
<ion-badge color="light" *ngIf="module.calculatingSize ||
|
|
(section.isDownloading && module.downloadStatus === statusDownloaded)">
|
|
{{ 'core.calculating' | translate }}
|
|
</ion-badge>
|
|
</ion-label>
|
|
|
|
<div class="storage-buttons" slot="end">
|
|
<core-download-refresh *ngIf="downloadEnabled && module.handlerData?.showDownloadButton &&
|
|
module.downloadStatus !== statusDownloaded" [status]="module.downloadStatus" [enabled]="true"
|
|
[canTrustDownload]="true" [loading]="module.spinner || module.handlerData.spinner"
|
|
(action)="prefetchModule(module)"
|
|
[statusesTranslatable]="{notdownloaded: 'addon.storagemanager.downloaddatafrom' }"
|
|
[statusSubject]="module.name" />
|
|
<ion-button fill="clear" (click)="deleteForModule($event, module, section)"
|
|
*ngIf="!module.calculatingSize && module.totalSize > 0" color="danger">
|
|
<ion-icon name="fas-trash" slot="icon-only" [attr.aria-label]="
|
|
'addon.storagemanager.deletedatafrom' | translate: { name: module.name }" />
|
|
</ion-button>
|
|
<p *ngIf="!downloadEnabled || !module.handlerData?.showDownloadButton" class="sr-only">
|
|
{{ 'core.notdownloadable' | translate }}
|
|
</p>
|
|
</div>
|
|
</ion-item>
|
|
</ng-container>
|
|
</ng-container>
|
|
</ion-card-content>
|
|
</ion-accordion>
|
|
</ion-card>
|
|
</ng-container>
|
|
</ion-accordion-group>
|
|
|
|
</core-loading>
|
|
</ion-content>
|