151 lines
10 KiB
HTML
151 lines
10 KiB
HTML
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-buttons slot="start">
|
|
<ion-back-button [text]="'core.back' | translate"></ion-back-button>
|
|
</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>{{ title }}</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"></ion-icon>
|
|
<ion-spinner *ngIf="prefetchCourseData.loading" slot="start"></ion-spinner>
|
|
{{ 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 }">
|
|
</ion-icon>
|
|
{{ 'addon.storagemanager.deleteall' | translate }}
|
|
</ion-button>
|
|
</ion-card-header>
|
|
</ion-card>
|
|
<ng-container *ngFor="let section of sections">
|
|
<ion-card class="section" *ngIf="section.modules.length > 0">
|
|
<ion-card-header>
|
|
<ion-item [lines]="section.expanded ? 'full' : 'none'" button detail="false" (click)="toggleExpand($event, section)"
|
|
[class.core-course-storage-section-expanded]="section.expanded"
|
|
[attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate"
|
|
[attr.aria-expanded]="section.expanded" [attr.aria-controls]="'core-course-storage-section-' + section.id">
|
|
<ion-icon name="fas-chevron-right" flip-rtl slot="start" class="expandable-status-icon"
|
|
[class.expandable-status-icon-expanded]="section.expanded">
|
|
</ion-icon>
|
|
<ion-label>
|
|
<p class="item-heading ion-text-wrap">
|
|
<core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="section.course"
|
|
[adaptImg]="false">
|
|
</core-format-text>
|
|
</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">
|
|
</ion-icon>{{ 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">
|
|
</core-progress-bar>
|
|
</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">
|
|
</core-download-refresh>
|
|
|
|
<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-icon>
|
|
</ion-button>
|
|
</div>
|
|
</ion-item>
|
|
</ion-card-header>
|
|
<ion-card-content id="core-course-storage-section-{{section.id}}">
|
|
<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">
|
|
</core-mod-icon>
|
|
<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">
|
|
</core-format-text>
|
|
</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">
|
|
</ion-icon>{{ module.totalSize | coreBytesToSize }}
|
|
</ion-badge>
|
|
<ion-badge color="light" *ngIf="module.calculatingSize">
|
|
{{ '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)">
|
|
</core-download-refresh>
|
|
<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-icon>
|
|
</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-card>
|
|
</ng-container>
|
|
</core-loading>
|
|
</ion-content>
|