forked from CIT/Vmeda.Online
166 lines
10 KiB
HTML
166 lines
10 KiB
HTML
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-buttons slot="start">
|
|
<ion-back-button [text]="'core.back' | translate" />
|
|
</ion-buttons>
|
|
<ion-title>
|
|
<h1>
|
|
<core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId" />
|
|
</h1>
|
|
</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
<ion-content class="limited-width">
|
|
<core-loading [hideUntil]="feedbackLoaded" class="has-spacer">
|
|
<ng-container *ngIf="items && items.length">
|
|
<ion-list class="ion-no-margin has-spacer">
|
|
<ion-item class="ion-text-wrap">
|
|
<ion-label>
|
|
<p class="item-heading">{{ 'addon.mod_feedback.mode' | translate }}</p>
|
|
<p *ngIf="access!.isanonymous">{{ 'addon.mod_feedback.anonymous' | translate }}</p>
|
|
<p *ngIf="!access!.isanonymous">{{ 'addon.mod_feedback.non_anonymous' | translate }}</p>
|
|
</ion-label>
|
|
</ion-item>
|
|
<ng-container *ngFor="let item of items">
|
|
<core-spacer *ngIf="item.typ === 'pagebreak'" />
|
|
<ng-container *ngIf="item.typ !== 'pagebreak'">
|
|
<ion-item class="ion-text-wrap addon-mod_feedback-item" [color]="item.dependitem > 0 ? 'light' : ''"
|
|
[class.core-danger-item]="item.isEmpty || item.hasError">
|
|
<ion-label *ngIf="!item.slottedLabel">
|
|
<ng-container *ngTemplateOutlet="label; context: {item: item}" />
|
|
<p *ngIf="item.templateName === 'label'">
|
|
<core-format-text [component]="component" [componentId]="cmId" [text]="item.presentation"
|
|
contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId" />
|
|
</p>
|
|
</ion-label>
|
|
|
|
<ion-input labelPlacement="stacked" *ngIf="item.templateName === 'textfield'" type="text"
|
|
[(ngModel)]="item.value" autocorrect="off" name="{{item.typ}}_{{item.id}}" maxlength="{{item.length}}"
|
|
[required]="item.required">
|
|
<ng-container *ngTemplateOutlet="label; context: {item: item}" />
|
|
</ion-input>
|
|
|
|
<ng-container *ngIf="item.templateName === 'numeric'">
|
|
<ion-input labelPlacement="stacked" type="number" [(ngModel)]="item.value" name="{{item.typ}}_{{item.id}}"
|
|
[required]="item.required">
|
|
<ng-container *ngTemplateOutlet="label; context: {item: item}" />
|
|
</ion-input>
|
|
<ion-text *ngIf="item.hasError" color="danger" class="addon-mod_feedback-item-error">
|
|
{{ 'addon.mod_feedback.numberoutofrange' | translate }} [{{item.rangefrom}}
|
|
<span *ngIf="item.rangefrom && item.rangeto">, </span>{{item.rangeto}}]
|
|
</ion-text>
|
|
</ng-container>
|
|
|
|
<ion-textarea labelPlacement="stacked" *ngIf="item.templateName === 'textarea'" [required]="item.required"
|
|
name="{{item.typ}}_{{item.id}}" [(ngModel)]="item.value">
|
|
<ng-container *ngTemplateOutlet="label; context: {item: item}" />
|
|
</ion-textarea>
|
|
|
|
<ion-select labelPlacement="stacked" *ngIf="item.templateName === 'multichoice-d'" [required]="item.required"
|
|
name="{{item.typ}}_{{item.id}}" [(ngModel)]="item.value" interface="action-sheet"
|
|
[cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: item.name}">
|
|
<ng-container *ngTemplateOutlet="label; context: {item: item}" />
|
|
<ion-select-option *ngFor="let option of item.choices" [value]="option.value">
|
|
<core-format-text [component]="component" [componentId]="cmId" [text]="option.label"
|
|
contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId" />
|
|
</ion-select-option>
|
|
</ion-select>
|
|
</ion-item>
|
|
|
|
<ion-radio-group *ngIf="item.templateName === 'multichoice-r'" [(ngModel)]="item.value" [required]="item.required"
|
|
name="{{item.typ}}_{{item.id}}">
|
|
<ion-item *ngFor="let option of item.choices" class="ion-text-wrap">
|
|
<ion-radio [value]="option.value">
|
|
<core-format-text [component]="component" [componentId]="cmId" [text]="option.label"
|
|
contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId" />
|
|
</ion-radio>
|
|
</ion-item>
|
|
</ion-radio-group>
|
|
|
|
<ng-container *ngIf="item.templateName === 'multichoice-c'">
|
|
<ion-item *ngFor="let option of item.choices">
|
|
<ion-checkbox [required]="item.required" name="{{item.typ}}_{{item.id}}" [(ngModel)]="option.checked"
|
|
value="option.value">
|
|
<core-format-text [component]="component" [componentId]="cmId" [text]="option.label"
|
|
contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId" />
|
|
</ion-checkbox>
|
|
</ion-item>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="item.templateName === 'captcha'">
|
|
<core-recaptcha *ngIf="!preview && !offline" [publicKey]="item.captcha.recaptchapublickey" [model]="item"
|
|
modelValueName="value" />
|
|
<div *ngIf="!preview && (!item.captcha || offline)" class="core-warning-card">
|
|
<ion-item>
|
|
<ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
|
|
<ion-label>{{ 'addon.mod_feedback.captchaofflinewarning' | translate }}</ion-label>
|
|
</ion-item>
|
|
</div>
|
|
</ng-container>
|
|
</ng-container>
|
|
</ng-container>
|
|
|
|
<ion-row class="ion-align-items-center spacer-top" *ngIf="!preview">
|
|
<ion-col *ngIf="hasPrevPage">
|
|
<ion-button expand="block" fill="outline" (click)="gotoPage(true)" class="ion-text-wrap">
|
|
<ion-icon name="fas-chevron-left" slot="start" aria-hidden="true" />
|
|
{{ 'core.previous' | translate }}
|
|
</ion-button>
|
|
</ion-col>
|
|
<ion-col *ngIf="hasNextPage">
|
|
<ion-button expand="block" (click)="gotoPage(false)" class="ion-text-wrap">
|
|
{{ 'core.next' | translate }}
|
|
<ion-icon name="fas-chevron-right" slot="end" aria-hidden="true" />
|
|
</ion-button>
|
|
</ion-col>
|
|
<ion-col *ngIf="!hasNextPage">
|
|
<ion-button expand="block" (click)="gotoPage(false)" class="ion-text-wrap">
|
|
{{ 'core.submit' | translate }}
|
|
</ion-button>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-list>
|
|
</ng-container>
|
|
|
|
<ion-card class="core-success-card" *ngIf="completed">
|
|
<ion-item class="ion-text-wrap">
|
|
<ion-icon name="fas-check" slot="start" aria-hidden="true" />
|
|
<ion-label>
|
|
<p *ngIf="!completionPageContents && !completedOffline">
|
|
{{ 'addon.mod_feedback.this_feedback_is_already_submitted' | translate }}
|
|
</p>
|
|
<p *ngIf="!completionPageContents && completedOffline">
|
|
{{ 'addon.mod_feedback.feedback_submitted_offline' | translate }}
|
|
</p>
|
|
<core-format-text *ngIf="completionPageContents" [component]="component" componentId="componentId"
|
|
[text]="completionPageContents" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId" />
|
|
</ion-label>
|
|
</ion-item>
|
|
</ion-card>
|
|
|
|
<div collapsible-footer *ngIf="feedbackLoaded && completed" slot="fixed" appearOnBottom>
|
|
<div class="list-item-limited-width adaptable-buttons-row">
|
|
<ion-button expand="block" fill="outline" (click)="showAnalysis()" class="ion-text-wrap ion-margin"
|
|
*ngIf="access!.canviewanalysis">
|
|
<ion-icon name="fas-chart-bar" slot="start" aria-hidden="true" />
|
|
{{ 'addon.mod_feedback.completed_feedbacks' | translate }}
|
|
</ion-button>
|
|
<ion-button expand="block" (click)="continue()" class="ion-text-wrap ion-margin">
|
|
<ng-container *ngIf="!siteAfterSubmit">{{ 'core.continue' | translate }}</ng-container>
|
|
<ng-container *ngIf="siteAfterSubmit">{{ 'core.course.nextactivity' | translate }}</ng-container>
|
|
</ion-button>
|
|
</div>
|
|
</div>
|
|
</core-loading>
|
|
</ion-content>
|
|
|
|
|
|
<ng-template #label let-item="item">
|
|
<p class="ion-text-wrap" *ngIf="item.name" [core-mark-required]="item.required" [attr.slot]="item.slottedLabel ? 'label' : undefined">
|
|
<span *ngIf="feedback!.autonumbering && item.itemnumber">{{item.itemnumber}}. </span>
|
|
<core-format-text [component]="component" [componentId]="cmId" [text]="item.name" contextLevel="module" [contextInstanceId]="cmId"
|
|
[courseId]="courseId" [wsNotFiltered]="true" />
|
|
<span *ngIf="item.postfix" class="addon-mod_feedback-postfix">{{item.postfix}}</span>
|
|
</p>
|
|
</ng-template>
|