Vmeda.Online/src/addons/messages/pages/settings/settings.html

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            <h1>{{ 'addon.messages.messages' | translate }}</h1>
        </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-refresher slot="fixed" [disabled]="!preferencesLoaded" (ionRefresh)="refreshPreferences($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
    </ion-refresher>
    <core-loading [hideUntil]="preferencesLoaded">
        <!-- General settings. -->
        <ion-card>
            <ion-list>
                <ion-item-divider class="ion-text-wrap">
                    <ion-label>
                        <h2>{{ 'core.settings.general' | translate }}</h2>
                    </ion-label>
                </ion-item-divider>
                <ion-item class="ion-text-wrap">
                    <ion-label>
                        <p>{{ 'addon.messages.useentertosend' | translate }}</p>
                    </ion-label>
                    <ion-toggle [(ngModel)]="sendOnEnter" (ngModelChange)="sendOnEnterChanged()" slot="end" />
                </ion-item>
            </ion-list>
        </ion-card>

        <!-- Contactable privacy. -->
        <ion-card>
            <ion-item *ngIf="!advancedContactable">
                <ion-label class="ion-text-wrap">
                    <p>{{ 'addon.messages.blocknoncontacts' | translate }}</p>
                </ion-label>
                <ion-toggle [(ngModel)]="contactablePrivacy" (ngModelChange)="saveContactablePrivacy(contactablePrivacy)" slot="end" />
            </ion-item>

            <ion-list *ngIf="advancedContactable">
                <ion-radio-group [(ngModel)]="contactablePrivacy" (ionChange)="saveContactablePrivacy(contactablePrivacy)">
                    <ion-item-divider>
                        <ion-label>
                            <h2>{{ 'addon.messages.contactableprivacy' | translate }}</h2>
                        </ion-label>
                    </ion-item-divider>
                    <ion-item class="ion-text-wrap">
                        <ion-label>
                            <p>{{ 'addon.messages.contactableprivacy_onlycontacts' | translate }}</p>
                        </ion-label>
                        <ion-radio slot="start" [value]="onlyContactsValue" />
                    </ion-item>
                    <ion-item class="ion-text-wrap">
                        <ion-label>
                            <p>{{ 'addon.messages.contactableprivacy_coursemember' | translate }}</p>
                        </ion-label>
                        <ion-radio slot="start" [value]="courseMemberValue" />
                    </ion-item>
                    <ion-item *ngIf="allowSiteMessaging" class="ion-text-wrap">
                        <ion-label>
                            <p>{{ 'addon.messages.contactableprivacy_site' | translate }}</p>
                        </ion-label>
                        <ion-radio slot="start" [value]="siteValue" />
                    </ion-item>
                </ion-radio-group>
            </ion-list>
        </ion-card>

        <!-- Notifications. -->
        <ng-container *ngIf="preferences">
            <ng-container *ngIf="!groupMessagingEnabled">
                <ng-container *ngTemplateOutlet="legacySettings; context: {preferences: preferences}" />
            </ng-container>
            <ng-container *ngIf="groupMessagingEnabled">
                <ng-container *ngTemplateOutlet="settings; context: {preferences: preferences}" />
            </ng-container>
        </ng-container>
    </core-loading>
</ion-content>

<!-- Only 3.5 version -->
<ng-template #legacySettings let-preferences="preferences">
    <ng-container *ngFor="let component of preferences.components">
        <ion-card *ngFor="let notification of component.notifications">
            <ion-card-header class="ion-no-padding">
                <ion-item class="ion-text-wrap">
                    <ion-label>
                        <h2>{{ notification.displayname }}</h2>
                    </ion-label>
                </ion-item>
            </ion-card-header>
            <ion-card-content class="ion-no-padding">
                <ng-container *ngFor="let processor of notification.processors">
                    <ion-item-divider class="ion-text-wrap">
                        <ion-label>
                            <p class="item-heading">{{ processor.displayname }}</p>
                        </ion-label>
                    </ion-item-divider>
                    <!-- If notifications not disabled, show toggles.
                        If notifications are disabled, show "Disabled" instead of toggle. -->
                    <ion-item *ngFor="let state of ['loggedin', 'loggedoff']" class="ion-text-wrap">
                        <ion-label>
                            <p>{{ 'core.settings.' + state | translate }}</p>
                        </ion-label>
                        <ng-container *ngIf="!preferences.disableall">
                            <!-- If notifications enabled, show toggle. -->
                            <core-button-with-spinner *ngIf="!processor.locked" [loading]="notification['updating'+state]" slot="end">
                                <ion-toggle [(ngModel)]="processor[state].checked"
                                    (ngModelChange)="changePreferenceLegacy(notification, processor, state)" />
                            </core-button-with-spinner>
                            <span *ngIf="processor.locked && processor[state].checked" class="text-gray" slot="end">
                                {{'core.settings.forced' | translate }}
                            </span>
                            <span *ngIf="processor.locked && !processor[state].checked" class="text-gray" slot="end">
                                {{'core.settings.disallowed' | translate }}
                            </span>
                        </ng-container>
                        <span *ngIf="preferences.disableall">{{ 'core.settings.disabled' | translate }}</span>
                    </ion-item>
                </ng-container>
            </ion-card-content>
        </ion-card>
    </ng-container>
</ng-template>


<ng-template #settings let-preferences="preferences">
    <ng-container *ngFor="let component of preferences.components">
        <ion-card *ngFor="let notification of component.notifications">
            <ion-item-divider class="ion-text-wrap">
                <ion-label>
                    <h2>{{ 'addon.notifications.notificationpreferences' | translate }}</h2>
                </ion-label>
            </ion-item-divider>
            <ng-container *ngFor="let processor of notification.processors">
                <!-- If group messaging is enabled, display a simplified view. -->
                <ion-item class="ion-text-wrap">
                    <ion-label>
                        <p>{{ processor.displayname }}</p>
                    </ion-label>
                    <ng-container *ngIf="!preferences.disableall">
                        <!-- If notifications enabled, show toggle. -->
                        <core-button-with-spinner *ngIf="!processor.locked" [loading]="notification.updating" slot="end">
                            <ion-toggle [(ngModel)]="processor.enabled" (ngModelChange)="changePreference(notification, processor)" />
                        </core-button-with-spinner>
                        <span class="text-gray" *ngIf="processor.locked" slot="end">
                            {{ processor.lockedmessage }}
                        </span>
                    </ng-container>
                    <span *ngIf="preferences.disableall" class="text-gray" slot="end">{{ 'core.settings.disabled' | translate }}</span>
                </ion-item>
            </ng-container>
        </ion-card>
    </ng-container>
</ng-template>