190 lines
11 KiB
HTML
190 lines
11 KiB
HTML
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-buttons slot="start">
|
|
<ion-back-button [text]="'core.back' | translate" />
|
|
</ion-buttons>
|
|
<ion-title>
|
|
<h1>{{ 'addon.notifications.notifications' | translate }}</h1>
|
|
</ion-title>
|
|
<ion-buttons slot="end" />
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
<core-navbar-buttons slot="end">
|
|
<core-context-menu>
|
|
<core-context-menu-item *ngFor="let handler of processorHandlers" [priority]="handler.priority"
|
|
[content]="handler.label | translate" (action)="openExtraPreferences(handler)" [iconAction]="handler.icon" />
|
|
</core-context-menu>
|
|
</core-navbar-buttons>
|
|
<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">
|
|
@if (warningMessage()) {
|
|
<ion-card class="core-warning-card ion-margin-top">
|
|
<ion-item>
|
|
<ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
|
|
<ion-label>{{ warningMessage() }}</ion-label>
|
|
</ion-item>
|
|
</ion-card>
|
|
} @else {
|
|
<ion-card>
|
|
<ion-item class="ion-text-wrap" *ngIf="preferences">
|
|
<ion-toggle [(ngModel)]="preferences.enableall" (ngModelChange)="enableAll(preferences.enableall)">
|
|
<p class="item-heading">{{ 'addon.notifications.allownotifications' | translate }}</p>
|
|
</ion-toggle>
|
|
</ion-item>
|
|
<ion-item class="ion-text-wrap" *ngIf="canChangeSound">
|
|
<ion-toggle [(ngModel)]="notificationSound" (ngModelChange)="changeNotificationSound(notificationSound)">
|
|
<p class="item-heading">{{ 'addon.notifications.playsound' | translate }}</p>
|
|
</ion-toggle>
|
|
</ion-item>
|
|
</ion-card>
|
|
|
|
<ion-card>
|
|
<ion-item class="ion-text-wrap addon-notification-type-form" *ngIf="preferences?.processors?.length">
|
|
<!-- Show processor selector. -->
|
|
<ion-select [(ngModel)]="currentProcessorName" (ionChange)="changeProcessor($event)" interface="popover">
|
|
<p class="item-heading" slot="label">{{ 'addon.notifications.typeofnotification' | translate }}</p>
|
|
<ion-select-option class="ion-text-wrap" *ngFor="let processor of preferences?.processors" [value]="processor.name">
|
|
{{ processor.displayname }}
|
|
</ion-select-option>
|
|
</ion-select>
|
|
</ion-item>
|
|
|
|
<ng-container *ngIf="loggedInOffLegacyMode">
|
|
<ng-container *ngTemplateOutlet="legacySettings; context: {preferences: preferences}" />
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="!loggedInOffLegacyMode">
|
|
<ng-container *ngTemplateOutlet="settings; context: {preferences: preferences}" />
|
|
</ng-container>
|
|
</ion-card>
|
|
}
|
|
</core-loading>
|
|
|
|
</ion-content>
|
|
|
|
|
|
<!-- 3.11 downwards version -->
|
|
<ng-template #legacySettings let-preferences="preferences">
|
|
<ng-container *ngFor="let component of components" class="ion-margin-top">
|
|
<ion-card-header class="ion-no-padding">
|
|
<ion-item class="ion-text-wrap divider">
|
|
<ion-label class="ion-text-wrap">
|
|
<ion-row class="ion-no-padding">
|
|
<ion-col class="ion-no-padding">
|
|
<p class="item-heading">{{ component.displayname }}</p>
|
|
</ion-col>
|
|
<ion-col size="2" class="ion-text-center ion-no-padding ion-hide-md-down">
|
|
<p>{{ 'core.settings.loggedin' | translate }}</p>
|
|
</ion-col>
|
|
<ion-col size="2" class="ion-text-center ion-no-padding ion-hide-md-down">
|
|
<p>{{ 'core.settings.loggedoff' | translate }}</p>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-label>
|
|
</ion-item>
|
|
</ion-card-header>
|
|
<ng-container *ngFor="let notification of component.notifications">
|
|
<!-- Tablet view -->
|
|
<ion-item class="ion-text-wrap ion-hide-md-down addon-notifications-table-content only-links" lines="none">
|
|
<ion-label>
|
|
<ion-row class="ion-no-padding ion-align-items-center">
|
|
<ion-col class="ion-margin-horizontal ion-no-padding">
|
|
<p class="item-heading">{{ notification.displayname }}</p>
|
|
</ion-col>
|
|
<ion-col size="2" class="ion-text-center ion-no-padding" *ngFor="let state of ['loggedin', 'loggedoff']">
|
|
<ng-container *ngIf="preferences!.enableall && notification.processorsByName[currentProcessorName][state]">
|
|
<!-- If notifications enabled, show toggle. -->
|
|
<core-button-with-spinner *ngIf="!notification.processorsByName[currentProcessorName].locked"
|
|
[loading]="notification.processorsByName[currentProcessorName][state].updating">
|
|
<ion-toggle [(ngModel)]="notification.processorsByName[currentProcessorName][state].checked"
|
|
(ngModelChange)="changePreferenceLegacy(notification, state)" />
|
|
</core-button-with-spinner>
|
|
<span class="text-gray" *ngIf="notification.processorsByName[currentProcessorName].locked &&
|
|
notification.processorsByName[currentProcessorName][state].checked">
|
|
{{'core.settings.forced' | translate }}
|
|
</span>
|
|
<span class="text-gray" *ngIf="notification.processorsByName[currentProcessorName].locked &&
|
|
!notification.processorsByName[currentProcessorName][state].checked">
|
|
{{'core.settings.disallowed' | translate }}
|
|
</span>
|
|
</ng-container>
|
|
<!-- If notifications are disabled, show "Disabled" instead of toggle. -->
|
|
<span *ngIf="!preferences!.enableall" class="text-gray">{{ 'core.settings.disabled' | translate }}</span>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-label>
|
|
</ion-item>
|
|
|
|
<!-- Phone view -->
|
|
<ion-item class="ion-text-wrap ion-no-margin ion-hide-md-up">
|
|
<ion-label>
|
|
<p class="item-heading">{{ notification.displayname }}</p>
|
|
</ion-label>
|
|
</ion-item>
|
|
<!-- If notifications enabled, show toggles. If disabled, show "Disabled" instead of toggle. -->
|
|
<ion-item *ngFor="let state of ['loggedin', 'loggedoff']" class="ion-text-wrap ion-hide-md-up" lines="none">
|
|
<ion-label class="ion-margin-horizontal">
|
|
<p>{{ 'core.settings.' + state | translate }}</p>
|
|
</ion-label>
|
|
<div slot="end" *ngIf="preferences!.enableall && notification.processorsByName[currentProcessorName][state]">
|
|
<core-button-with-spinner *ngIf="!notification.processorsByName[currentProcessorName].locked"
|
|
[loading]="notification.processorsByName[currentProcessorName][state].updating">
|
|
<ion-toggle *ngIf="!notification.processorsByName[currentProcessorName].locked"
|
|
[(ngModel)]="notification.processorsByName[currentProcessorName][state].checked"
|
|
(ngModelChange)="changePreferenceLegacy(notification, state)" />
|
|
</core-button-with-spinner>
|
|
<span class="text-gray" *ngIf="notification.processorsByName[currentProcessorName].locked &&
|
|
notification.processorsByName[currentProcessorName][state].checked">
|
|
{{'core.settings.forced' | translate }}
|
|
</span>
|
|
<span class="text-gray" *ngIf="notification.processorsByName[currentProcessorName].locked &&
|
|
!notification.processorsByName[currentProcessorName][state].checked">
|
|
{{'core.settings.disallowed' | translate }}
|
|
</span>
|
|
</div>
|
|
<span class="text-gray" slot="end" *ngIf="!preferences!.enableall">{{ 'core.settings.disabled' | translate }}</span>
|
|
</ion-item>
|
|
</ng-container>
|
|
</ng-container>
|
|
</ng-template>
|
|
|
|
<!-- 4.0 onwards version -->
|
|
<ng-template #settings let-preferences="preferences">
|
|
<ng-container *ngFor="let component of components" class="ion-margin-top">
|
|
<ion-item-divider class="ion-text-wrap">
|
|
<ion-label>
|
|
<p class="item-heading">{{ component.displayname }}</p>
|
|
</ion-label>
|
|
</ion-item-divider>
|
|
<ng-container *ngFor="let notification of component.notifications">
|
|
<!-- If notifications enabled, show toggles. If disabled, show "Disabled" instead of toggle. -->
|
|
<ion-item class="ion-text-wrap" lines="none">
|
|
<ion-label>
|
|
<p>{{ notification.displayname }}</p>
|
|
</ion-label>
|
|
|
|
<div slot="end" *ngIf="preferences!.enableall">
|
|
<core-button-with-spinner *ngIf="!notification.processorsByName[currentProcessorName].locked"
|
|
[loading]="notification.processorsByName[currentProcessorName].updating">
|
|
<ion-toggle *ngIf="!notification.processorsByName[currentProcessorName].locked"
|
|
[(ngModel)]="notification.processorsByName[currentProcessorName].enabled"
|
|
(ngModelChange)="changePreference(notification)" />
|
|
</core-button-with-spinner>
|
|
<span class="text-gray" *ngIf=" notification.processorsByName[currentProcessorName].locked &&
|
|
notification.processorsByName[currentProcessorName].enabled">
|
|
{{'core.settings.forced' | translate }}
|
|
</span>
|
|
<span class="text-gray" *ngIf=" notification.processorsByName[currentProcessorName].locked &&
|
|
!notification.processorsByName[currentProcessorName].enabled">
|
|
{{'core.settings.disallowed' | translate }}
|
|
</span>
|
|
</div>
|
|
<span class="text-gray" slot="end" *ngIf="!preferences!.enableall">{{ 'core.settings.disabled' | translate }}</span>
|
|
</ion-item>
|
|
</ng-container>
|
|
</ng-container>
|
|
</ng-template>
|