src/lib/logging-viewer-modal/logging-viewer-modal.component.ts
Ionic modal containing LoggingViewerComponent, LoggingViewerLevelsComponent and LoggingViewerSearchComponent.
| selector | ionic-logging-viewer-modal |
| styleUrls | ./logging-viewer-modal.component.scss |
| templateUrl | ./logging-viewer-modal.component.html |
Properties |
|
Methods |
|
Inputs |
constructor(platform: Platform, modalController: ModalController, loggingService: LoggingService)
|
||||||||||||
|
Creates a new instance of the component.
Parameters :
|
| allowClearLogs | |
Type : boolean
|
|
|
Flag showing a delete button, which removes all existing log messages. |
|
| language | |
Type : string
|
|
|
Language to be used for the modal. Currently supported: en, de |
|
| localStorageKeys | |
Type : string
|
|
|
Comma-separated list of localStorageKeys. If set, the logs get loaded from localStorage instead of memory. |
|
| translation | |
Type : LoggingViewerTranslation
|
|
|
Translation to be used for the modal. If specified, the language is ignored. |
|
| Public getTranslation |
getTranslation()
|
|
Helper method returning the current translation:
Returns :
LoggingViewerTranslation
|
| Public ionViewDidEnter |
ionViewDidEnter()
|
|
Eventhandler called by Ionic when the modal is opened.
Returns :
void
|
| Public ngOnInit |
ngOnInit()
|
|
Initializes the LoggingViewerModalComponent. It configures the supported translations.
Returns :
void
|
| Public onClearLogs |
onClearLogs()
|
|
Eventhandler called when the clear button is clicked.
Returns :
void
|
| Public Async onClose |
onClose()
|
|
Eventhandler called when the cancel button is clicked.
Returns :
Promise<void>
|
| Public isAndroid |
Type : boolean
|
|
Flag controlling which close button will be shown. |
import { Component, OnInit, Input } from "@angular/core";
import { ModalController, Platform } from "@ionic/angular";
import { Logger, LoggingService } from "ionic-logging-service";
import { LoggingViewerTranslation } from "../logging-viewer-translation.model";
/**
* Ionic modal containing [LoggingViewerComponent](LoggingViewerComponent.html),
* [LoggingViewerLevelsComponent](LoggingViewerLevelsComponent.html) and
* [LoggingViewerSearchComponent](LoggingViewerSearchComponent.html).
*/
@Component({
selector: "ionic-logging-viewer-modal",
templateUrl: "./logging-viewer-modal.component.html",
styleUrls: ["./logging-viewer-modal.component.scss"]
})
export class LoggingViewerModalComponent implements OnInit {
private static languageEn = "en";
private static languageDe = "de";
/**
* Language to be used for the modal.
* Currently supported: en, de
*/
@Input()
public language: string;
/**
* Translation to be used for the modal.
* If specified, the language is ignored.
*/
@Input()
public translation: LoggingViewerTranslation;
/**
* Comma-separated list of localStorageKeys. If set, the logs get loaded from localStorage instead of memory.
*/
@Input()
public localStorageKeys: string;
/**
* Flag showing a delete button, which removes all existing log messages.
*/
@Input()
public allowClearLogs: boolean;
/**
* Flag controlling which close button will be shown.
*/
public isAndroid: boolean;
// tslint:disable-next-line:completed-docs
private logger: Logger;
// tslint:disable-next-line:completed-docs
private translations: { [language: string]: LoggingViewerTranslation; };
/**
* Creates a new instance of the component.
*/
constructor(
platform: Platform,
private modalController: ModalController,
private loggingService: LoggingService) {
this.logger = loggingService.getLogger("Ionic.Logging.Viewer.Modal.Component");
const methodName = "ctor";
this.logger.entry(methodName);
this.isAndroid = platform.is("android");
this.logger.exit(methodName);
}
/**
* Initializes the LoggingViewerModalComponent.
* It configures the supported translations.
*/
public ngOnInit(): void {
// prepare translations
this.translations = {};
this.translations[LoggingViewerModalComponent.languageEn] = {
cancel: "Cancel",
searchPlaceholder: "Search",
title: "Logging",
};
this.translations[LoggingViewerModalComponent.languageDe] = {
cancel: "Abbrechen",
searchPlaceholder: "Suchen",
title: "Logging",
};
}
/**
* Eventhandler called by Ionic when the modal is opened.
*/
public ionViewDidEnter(): void {
const methodName = "ionViewDidEnter";
this.logger.entry(methodName);
this.logger.exit(methodName);
}
/**
* Eventhandler called when the cancel button is clicked.
*/
public async onClose(): Promise<void> {
const methodName = "onClose";
this.logger.entry(methodName);
await this.modalController.dismiss();
this.logger.exit(methodName);
}
/**
* Eventhandler called when the clear button is clicked.
*/
public onClearLogs(): void {
const methodName = "onClearLogs";
this.logger.entry(methodName);
if (this.localStorageKeys) {
for (const localStorageKey of this.localStorageKeys.split(",")) {
this.loggingService.removeLogMessagesFromLocalStorage(localStorageKey);
}
} else {
this.loggingService.removeLogMessages();
}
this.logger.exit(methodName);
}
/**
* Helper method returning the current translation:
* - the property translation if defined
* - the translation according property language if valid
* - English translation, otherwise
*/
public getTranslation(): LoggingViewerTranslation {
if (typeof this.translation !== "undefined") {
return this.translation;
} else if (typeof this.language !== "undefined" && typeof this.translations[this.language] === "object") {
return this.translations[this.language];
} else {
return this.translations[LoggingViewerModalComponent.languageEn];
}
}
}
<ion-header>
<ion-toolbar color=primary>
<ion-title>{{ getTranslation().title }}</ion-title>
<ion-buttons slot="start">
<ion-button *ngIf="!isAndroid" (click)="onClose()">
{{ getTranslation().cancel }}
</ion-button>
<ion-button *ngIf="isAndroid" icon-only (click)="onClose()">
<ion-icon name="md-close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ionic-logging-viewer-search [placeholder]="getTranslation().searchPlaceholder"></ionic-logging-viewer-search>
<ion-buttons slot="end" *ngIf="allowClearLogs !== false">
<ion-button (click)="onClearLogs()">
<ion-icon name="trash-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ionic-logging-viewer-levels></ionic-logging-viewer-levels>
</ion-toolbar>
</ion-header>
<ion-content>
<ionic-logging-viewer [localStorageKeys]="localStorageKeys"></ionic-logging-viewer>
</ion-content>
./logging-viewer-modal.component.scss