File

src/lib/logging-viewer-modal/logging-viewer-modal.component.ts

Description

Ionic modal containing LoggingViewerComponent, LoggingViewerLevelsComponent and LoggingViewerSearchComponent.

Implements

OnInit

Metadata

selector ionic-logging-viewer-modal
styleUrls ./logging-viewer-modal.component.scss
templateUrl ./logging-viewer-modal.component.html

Index

Properties
Methods
Inputs

Constructor

constructor(platform: Platform, modalController: ModalController, loggingService: LoggingService)

Creates a new instance of the component.

Parameters :
Name Type Optional
platform Platform No
modalController ModalController No
loggingService LoggingService No

Inputs

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.

Methods

Public getTranslation
getTranslation()

Helper method returning the current translation:

  • the property translation if defined
  • the translation according property language if valid
  • English translation, otherwise
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>

Properties

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

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""