amos-ionic-logging/projects/ionic-logging-viewer-app/src/app/home/home.page.html

Components for Ionic logging

<ion-header>
	<ion-toolbar color="medium">
		<ion-title>
			Ionic Logging Viewer App
		</ion-title>
	</ion-toolbar>
</ion-header>

<ion-content>

	<ion-grid>
		<ion-row>
			<ion-col size="12" size-md="6">

				<ion-card color="light">
					<ion-card-header>
						<ion-card-title>Logging Actions</ion-card-title>
					</ion-card-header>
					<ion-list>
						<ion-item>
							<ion-label position="floating">Logger</ion-label>
							<ion-input type="text" [(ngModel)]="testLoggerName"
								(ionChange)="onLogLevelOrLoggerChanged()"></ion-input>
						</ion-item>
						<ion-item>
							<ion-label position="floating">Method</ion-label>
							<ion-input type="text" [(ngModel)]="testMethod"></ion-input>
						</ion-item>
						<ion-item>
							<ion-label position="floating">Log Level</ion-label>
							<ion-select interface="popover" [(ngModel)]="testLogLevel"
								(ionChange)="onLogLevelOrLoggerChanged()">
								<ion-select-option *ngFor="let logLevel of logLevels" [value]="logLevel">
									{{ logLevel }}
								</ion-select-option>
							</ion-select>
						</ion-item>
						<ion-item>
							<ion-label position="floating">Message</ion-label>
							<ion-input type="text" [(ngModel)]="message"></ion-input>
						</ion-item>
						<ion-item>
							<ion-button expand="block" fill="outline" (click)="logTrace()">TRACE</ion-button>
						</ion-item>
						<ion-item>
							<ion-button expand="block" fill="outline" (click)="logDebug()">DEBUG</ion-button>
						</ion-item>
						<ion-item>
							<ion-button expand="block" color="success" (click)="logInfo()">INFO</ion-button>
						</ion-item>
						<ion-item>
							<ion-button expand="block" color="warning" (click)="logWarn()">WARN</ion-button>
						</ion-item>
						<ion-item>
							<ion-button expand="block" color="danger" (click)="logError()">ERROR</ion-button>
						</ion-item>
						<ion-item>
							<ion-button expand="block" color="danger" (click)="logFatal()">FATAL</ion-button>
						</ion-item>
						<ion-item>
							<ion-button expand="block" color="medium" (click)="logEntry()">ENTRY</ion-button>
						</ion-item>
						<ion-item>
							<ion-button expand="block" color="medium" (click)="logExit()">EXIT</ion-button>
						</ion-item>
					</ion-list>
				</ion-card>

				<ion-card color="light">
					<ion-card-header>
						<ion-card-title>AjaxAppender</ion-card-title>
					</ion-card-header>
					<ion-list>
						<ion-item>
							<ion-label>Enabled</ion-label>
							<ion-toggle [(ngModel)]="ajaxAppenderEnabled" (ionChange)="onAjaxAppenderConfigChanged()">
							</ion-toggle>
						</ion-item>
						<ion-item *ngIf="ajaxAppenderEnabled">
							<ion-label position="floating">Url</ion-label>
							<ion-input type="text" [(ngModel)]="ajaxAppenderUrl"
								(ionChange)="onAjaxAppenderConfigChanged()"></ion-input>
						</ion-item>
						<ion-item *ngIf="ajaxAppenderEnabled">
							<ion-label position="floating">Threshold</ion-label>
							<ion-select interface="popover" [(ngModel)]="ajaxAppenderThreshold"
								(ionChange)="onAjaxAppenderConfigChanged()">
								<ion-select-option *ngFor="let logLevel of logLevels" [value]="logLevel">
									{{ logLevel }}
								</ion-select-option>
							</ion-select>
						</ion-item>
						<ion-item *ngIf="ajaxAppenderEnabled">
							<ion-label position="floating">Batch Size</ion-label>
							<ion-select interface="popover" [(ngModel)]="ajaxAppenderBatchSize"
								(ionChange)="onAjaxAppenderConfigChanged()">
								<ion-select-option *ngFor="let batchSize of batchSizes" [value]="batchSize">
									{{ batchSize }}
								</ion-select-option>
							</ion-select>
						</ion-item>
					</ion-list>
				</ion-card>

				<ion-card color="light">
					<ion-card-header>
						<ion-card-title>LocalStorageAppender</ion-card-title>
					</ion-card-header>
					<ion-list>
						<ion-item>
							<ion-label>Enabled</ion-label>
							<ion-toggle [(ngModel)]="localStorageAppenderConfiguration.enabled"
								(ionChange)="onLocalStorageConfigChanged()">
							</ion-toggle>
						</ion-item>
						<ion-item *ngIf="localStorageAppenderConfiguration.enabled">
							<ion-label position="floating">Key</ion-label>
							<ion-input type="text" [(ngModel)]="localStorageAppenderConfiguration.localStorageKey"
								(ionChange)="onLocalStorageConfigChanged()"></ion-input>
						</ion-item>
						<ion-item *ngIf="localStorageAppenderConfiguration.enabled">
							<ion-label position="floating">Threshold</ion-label>
							<ion-select interface="popover" [(ngModel)]="localStorageAppenderConfiguration.threshold"
								(ionChange)="onLocalStorageConfigChanged()">
								<ion-select-option *ngFor="let logLevel of logLevels" [value]="logLevel">
									{{ logLevel }}
								</ion-select-option>
							</ion-select>
						</ion-item>
						<ion-item *ngIf="localStorageAppenderConfiguration.enabled">
							<ion-label position="floating">Max Messages</ion-label>
							<ion-select interface="popover" [(ngModel)]="localStorageAppenderConfiguration.maxMessages"
								(ionChange)="onLocalStorageConfigChanged()">
								<ion-select-option
									*ngFor="let maxMessagesValue of localStorageAppenderConfiguration.maxMessagesValues"
									[value]="maxMessagesValue">
									{{ maxMessagesValue }}
								</ion-select-option>
							</ion-select>
						</ion-item>
					</ion-list>
				</ion-card>

				<ion-card color="light">
					<ion-card-header>
						<ion-card-title>Logging Modal</ion-card-title>
					</ion-card-header>
					<ion-list>
						<ion-item>
							<ion-button expand="block" fill="outline" (click)="openModal()">Open modal</ion-button>
						</ion-item>
						<ion-item>
							<ion-label>Allow Clear Logs</ion-label>
							<ion-toggle [(ngModel)]="allowClearLogs"></ion-toggle>
						</ion-item>
						<ion-item>
							<ion-label position="floating">Local Storage Keys</ion-label>
							<ion-input type="text" [(ngModel)]="localStorageKeys"></ion-input>
						</ion-item>
						<ion-radio-group [value]="selectedLanguage" (ionChange)="changeLanguage($event.detail.value)">
							<ion-list-header>
								<ion-label>Language</ion-label>
							</ion-list-header>
							<ion-item *ngFor="let language of languages">
								<ion-label>{{language}}</ion-label>
								<ion-radio value="{{language}}"></ion-radio>
							</ion-item>
						</ion-radio-group>
						<ion-item *ngIf="selectedLanguage === 'custom'">
							<ion-label position="floating">title</ion-label>
							<ion-input type="text" [(ngModel)]="translation.title"></ion-input>
						</ion-item>
						<ion-item *ngIf="selectedLanguage === 'custom'">
							<ion-label position="floating">cancel</ion-label>
							<ion-input type="text" [(ngModel)]="translation.cancel"></ion-input>
						</ion-item>
						<ion-item *ngIf="selectedLanguage === 'custom'">
							<ion-label position="floating">ok</ion-label>
							<ion-input type="text" [(ngModel)]="translation.ok"></ion-input>
						</ion-item>
						<ion-item *ngIf="selectedLanguage === 'custom'">
							<ion-label position="floating">searchPlaceholder</ion-label>
							<ion-input type="text" [(ngModel)]="translation.searchPlaceholder"></ion-input>
						</ion-item>
						<ion-item *ngIf="selectedLanguage === 'custom'">
							<ion-label position="floating">confirmDelete</ion-label>
							<ion-input type="text" [(ngModel)]="translation.confirmDelete"></ion-input>
						</ion-item>
					</ion-list>
				</ion-card>

			</ion-col>

			<ion-col size="12" size-md="6">

				<ion-card color="light">
					<ion-card-header>
						<ion-card-title>Logging Viewer</ion-card-title>
					</ion-card-header>
					<ion-toolbar>
						<ionic-logging-viewer-search></ionic-logging-viewer-search>
					</ion-toolbar>
					<ion-toolbar>
						<ionic-logging-viewer-levels></ionic-logging-viewer-levels>
					</ion-toolbar>
					<ionic-logging-viewer></ionic-logging-viewer>
				</ion-card>

			</ion-col>
		</ion-row>
	</ion-grid>

</ion-content>