@iotize/ionic
Version:
Iotize specific building blocks on top of @ionic/angular.
54 lines • 14.6 kB
JavaScript
import { Component, Input } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { MonitoringSettingsService } from './monitoring-settings.service';
import { ModalController } from '@ionic/angular';
import { getFormFieldOrError } from '@iotize/ionic';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "./monitoring-settings.service";
import * as i3 from "@ionic/angular";
import * as i4 from "@angular/common";
export class TapMonitoringSettingsComponent {
formBuilder;
monitoringSettingsService;
modalController;
showDataSource = false;
form;
get period() {
return getFormFieldOrError(this.form, 'period');
}
get dataSource() {
return getFormFieldOrError(this.form, 'dataSource');
}
constructor(formBuilder, monitoringSettingsService, modalController) {
this.formBuilder = formBuilder;
this.monitoringSettingsService = monitoringSettingsService;
this.modalController = modalController;
this.form = this.formBuilder.group({
period: [this.monitoringSettingsService.settings.period],
dataSource: ['live'],
});
}
ngOnInit() {
this.form.valueChanges.subscribe(() => {
this.monitoringSettingsService.settings = {
period: this.period.value,
};
});
}
async dismiss() {
const topOverlay = await this.modalController.getTop();
if (topOverlay) {
await this.modalController.dismiss(topOverlay.id);
}
}
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TapMonitoringSettingsComponent, deps: [{ token: i1.FormBuilder }, { token: i2.MonitoringSettingsService }, { token: i3.ModalController }], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TapMonitoringSettingsComponent, selector: "tap-monitoring-settings", inputs: { showDataSource: "showDataSource" }, ngImport: i0, template: "<ion-header>\n <ion-toolbar color=\"primary\">\n <ion-buttons slot=\"start\">\n <ion-button (click)=\"dismiss()\">\n <ion-icon name=\"arrow-back\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title class=\"text-center\"> Monitoring Settings </ion-title>\n </ion-toolbar>\n</ion-header>\n<ion-content>\n <form [formGroup]=\"form\">\n <ion-list>\n <ion-item>\n <ion-input\n [formControlName]=\"'period'\"\n slot=\"end\"\n text-right\n type=\"number\"\n labelPlacement=\"start\"\n label=\"Frequency (in milliseconds)\"\n ></ion-input>\n </ion-item>\n <ion-item *ngIf=\"showDataSource\">\n <ion-select\n [formControlName]=\"'dataSource'\"\n slot=\"end\"\n labelPlacement=\"start\"\n label=\"Data source\"\n >\n <ion-select-option value=\"live\">Live data</ion-select-option>\n <ion-select-option value=\"datalog\">Data log</ion-select-option>\n </ion-select>\n </ion-item>\n </ion-list>\n </form>\n</ion-content>\n<ion-footer>\n <ion-toolbar>\n <ion-buttons slot=\"end\">\n <ion-button (click)=\"dismiss()\">Ok</ion-button>\n </ion-buttons>\n </ion-toolbar>\n</ion-footer>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i3.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i3.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i3.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonInput, selector: "ion-input", inputs: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearInputIcon", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i3.IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "required", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: i3.IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: i3.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i3.NumericValueAccessor, selector: "ion-input[type=number],ion-input-otp:not([type=text]),ion-range" }, { kind: "directive", type: i3.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TapMonitoringSettingsComponent, decorators: [{
type: Component,
args: [{ selector: 'tap-monitoring-settings', template: "<ion-header>\n <ion-toolbar color=\"primary\">\n <ion-buttons slot=\"start\">\n <ion-button (click)=\"dismiss()\">\n <ion-icon name=\"arrow-back\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title class=\"text-center\"> Monitoring Settings </ion-title>\n </ion-toolbar>\n</ion-header>\n<ion-content>\n <form [formGroup]=\"form\">\n <ion-list>\n <ion-item>\n <ion-input\n [formControlName]=\"'period'\"\n slot=\"end\"\n text-right\n type=\"number\"\n labelPlacement=\"start\"\n label=\"Frequency (in milliseconds)\"\n ></ion-input>\n </ion-item>\n <ion-item *ngIf=\"showDataSource\">\n <ion-select\n [formControlName]=\"'dataSource'\"\n slot=\"end\"\n labelPlacement=\"start\"\n label=\"Data source\"\n >\n <ion-select-option value=\"live\">Live data</ion-select-option>\n <ion-select-option value=\"datalog\">Data log</ion-select-option>\n </ion-select>\n </ion-item>\n </ion-list>\n </form>\n</ion-content>\n<ion-footer>\n <ion-toolbar>\n <ion-buttons slot=\"end\">\n <ion-button (click)=\"dismiss()\">Ok</ion-button>\n </ion-buttons>\n </ion-toolbar>\n</ion-footer>\n" }]
}], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.MonitoringSettingsService }, { type: i3.ModalController }], propDecorators: { showDataSource: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFwLW1vbml0b3Jpbmctc2V0dGluZ3MuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaW90aXplLWlvbmljL21vbml0b3Jpbmcvc3JjL2xpYi90YXAtbW9uaXRvcmluZy1zZXR0aW5ncy90YXAtbW9uaXRvcmluZy1zZXR0aW5ncy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9pb3RpemUtaW9uaWMvbW9uaXRvcmluZy9zcmMvbGliL3RhcC1tb25pdG9yaW5nLXNldHRpbmdzL3RhcC1tb25pdG9yaW5nLXNldHRpbmdzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pELE9BQU8sRUFBRSxXQUFXLEVBQWEsTUFBTSxnQkFBZ0IsQ0FBQztBQUN4RCxPQUFPLEVBQUUseUJBQXlCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUMxRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFakQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7QUFPcEQsTUFBTSxPQUFPLDhCQUE4QjtJQWNoQztJQUNBO0lBQ0E7SUFmQSxjQUFjLEdBQUcsS0FBSyxDQUFDO0lBRXpCLElBQUksQ0FBWTtJQUV2QixJQUFJLE1BQU07UUFDUixPQUFPLG1CQUFtQixDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsUUFBUSxDQUFDLENBQUM7SUFDbEQsQ0FBQztJQUVELElBQUksVUFBVTtRQUNaLE9BQU8sbUJBQW1CLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxZQUFZLENBQUMsQ0FBQztJQUN0RCxDQUFDO0lBRUQsWUFDUyxXQUF3QixFQUN4Qix5QkFBb0QsRUFDcEQsZUFBZ0M7UUFGaEMsZ0JBQVcsR0FBWCxXQUFXLENBQWE7UUFDeEIsOEJBQXlCLEdBQXpCLHlCQUF5QixDQUEyQjtRQUNwRCxvQkFBZSxHQUFmLGVBQWUsQ0FBaUI7UUFFdkMsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQztZQUNqQyxNQUFNLEVBQUUsQ0FBQyxJQUFJLENBQUMseUJBQXlCLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQztZQUN4RCxVQUFVLEVBQUUsQ0FBQyxNQUFNLENBQUM7U0FDckIsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO1lBQ3BDLElBQUksQ0FBQyx5QkFBeUIsQ0FBQyxRQUFRLEdBQUc7Z0JBQ3hDLE1BQU0sRUFBRSxJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUs7YUFDMUIsQ0FBQztRQUNKLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELEtBQUssQ0FBQyxPQUFPO1FBQ1gsTUFBTSxVQUFVLEdBQUcsTUFBTSxJQUFJLENBQUMsZUFBZSxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBQ3ZELElBQUksVUFBVSxFQUFFLENBQUM7WUFDZixNQUFNLElBQUksQ0FBQyxlQUFlLENBQUMsT0FBTyxDQUFDLFVBQVUsQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUNwRCxDQUFDO0lBQ0gsQ0FBQzsySEFyQ1UsOEJBQThCOytHQUE5Qiw4QkFBOEIsNkdDWjNDLDJ3Q0E0Q0E7OzRGRGhDYSw4QkFBOEI7a0JBTDFDLFNBQVM7K0JBQ0UseUJBQXlCO3NKQUsxQixjQUFjO3NCQUF0QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGb3JtQnVpbGRlciwgRm9ybUdyb3VwIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgTW9uaXRvcmluZ1NldHRpbmdzU2VydmljZSB9IGZyb20gJy4vbW9uaXRvcmluZy1zZXR0aW5ncy5zZXJ2aWNlJztcbmltcG9ydCB7IE1vZGFsQ29udHJvbGxlciB9IGZyb20gJ0Bpb25pYy9hbmd1bGFyJztcbmltcG9ydCB7IHRocm93RXJyb3IgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IGdldEZvcm1GaWVsZE9yRXJyb3IgfSBmcm9tICdAaW90aXplL2lvbmljJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndGFwLW1vbml0b3Jpbmctc2V0dGluZ3MnLFxuICB0ZW1wbGF0ZVVybDogJy4vdGFwLW1vbml0b3Jpbmctc2V0dGluZ3MuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi90YXAtbW9uaXRvcmluZy1zZXR0aW5ncy5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBUYXBNb25pdG9yaW5nU2V0dGluZ3NDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBzaG93RGF0YVNvdXJjZSA9IGZhbHNlO1xuXG4gIHB1YmxpYyBmb3JtOiBGb3JtR3JvdXA7XG5cbiAgZ2V0IHBlcmlvZCgpIHtcbiAgICByZXR1cm4gZ2V0Rm9ybUZpZWxkT3JFcnJvcih0aGlzLmZvcm0sICdwZXJpb2QnKTtcbiAgfVxuXG4gIGdldCBkYXRhU291cmNlKCkge1xuICAgIHJldHVybiBnZXRGb3JtRmllbGRPckVycm9yKHRoaXMuZm9ybSwgJ2RhdGFTb3VyY2UnKTtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHB1YmxpYyBmb3JtQnVpbGRlcjogRm9ybUJ1aWxkZXIsXG4gICAgcHVibGljIG1vbml0b3JpbmdTZXR0aW5nc1NlcnZpY2U6IE1vbml0b3JpbmdTZXR0aW5nc1NlcnZpY2UsXG4gICAgcHVibGljIG1vZGFsQ29udHJvbGxlcjogTW9kYWxDb250cm9sbGVyXG4gICkge1xuICAgIHRoaXMuZm9ybSA9IHRoaXMuZm9ybUJ1aWxkZXIuZ3JvdXAoe1xuICAgICAgcGVyaW9kOiBbdGhpcy5tb25pdG9yaW5nU2V0dGluZ3NTZXJ2aWNlLnNldHRpbmdzLnBlcmlvZF0sXG4gICAgICBkYXRhU291cmNlOiBbJ2xpdmUnXSxcbiAgICB9KTtcbiAgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMuZm9ybS52YWx1ZUNoYW5nZXMuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgIHRoaXMubW9uaXRvcmluZ1NldHRpbmdzU2VydmljZS5zZXR0aW5ncyA9IHtcbiAgICAgICAgcGVyaW9kOiB0aGlzLnBlcmlvZC52YWx1ZSxcbiAgICAgIH07XG4gICAgfSk7XG4gIH1cblxuICBhc3luYyBkaXNtaXNzKCkge1xuICAgIGNvbnN0IHRvcE92ZXJsYXkgPSBhd2FpdCB0aGlzLm1vZGFsQ29udHJvbGxlci5nZXRUb3AoKTtcbiAgICBpZiAodG9wT3ZlcmxheSkge1xuICAgICAgYXdhaXQgdGhpcy5tb2RhbENvbnRyb2xsZXIuZGlzbWlzcyh0b3BPdmVybGF5LmlkKTtcbiAgICB9XG4gIH1cbn1cbiIsIjxpb24taGVhZGVyPlxuICA8aW9uLXRvb2xiYXIgY29sb3I9XCJwcmltYXJ5XCI+XG4gICAgPGlvbi1idXR0b25zIHNsb3Q9XCJzdGFydFwiPlxuICAgICAgPGlvbi1idXR0b24gKGNsaWNrKT1cImRpc21pc3MoKVwiPlxuICAgICAgICA8aW9uLWljb24gbmFtZT1cImFycm93LWJhY2tcIj48L2lvbi1pY29uPlxuICAgICAgPC9pb24tYnV0dG9uPlxuICAgIDwvaW9uLWJ1dHRvbnM+XG4gICAgPGlvbi10aXRsZSBjbGFzcz1cInRleHQtY2VudGVyXCI+IE1vbml0b3JpbmcgU2V0dGluZ3MgPC9pb24tdGl0bGU+XG4gIDwvaW9uLXRvb2xiYXI+XG48L2lvbi1oZWFkZXI+XG48aW9uLWNvbnRlbnQ+XG4gIDxmb3JtIFtmb3JtR3JvdXBdPVwiZm9ybVwiPlxuICAgIDxpb24tbGlzdD5cbiAgICAgIDxpb24taXRlbT5cbiAgICAgICAgPGlvbi1pbnB1dFxuICAgICAgICAgIFtmb3JtQ29udHJvbE5hbWVdPVwiJ3BlcmlvZCdcIlxuICAgICAgICAgIHNsb3Q9XCJlbmRcIlxuICAgICAgICAgIHRleHQtcmlnaHRcbiAgICAgICAgICB0eXBlPVwibnVtYmVyXCJcbiAgICAgICAgICBsYWJlbFBsYWNlbWVudD1cInN0YXJ0XCJcbiAgICAgICAgICBsYWJlbD1cIkZyZXF1ZW5jeSAoaW4gbWlsbGlzZWNvbmRzKVwiXG4gICAgICAgID48L2lvbi1pbnB1dD5cbiAgICAgIDwvaW9uLWl0ZW0+XG4gICAgICA8aW9uLWl0ZW0gKm5nSWY9XCJzaG93RGF0YVNvdXJjZVwiPlxuICAgICAgICA8aW9uLXNlbGVjdFxuICAgICAgICAgIFtmb3JtQ29udHJvbE5hbWVdPVwiJ2RhdGFTb3VyY2UnXCJcbiAgICAgICAgICBzbG90PVwiZW5kXCJcbiAgICAgICAgICBsYWJlbFBsYWNlbWVudD1cInN0YXJ0XCJcbiAgICAgICAgICBsYWJlbD1cIkRhdGEgc291cmNlXCJcbiAgICAgICAgPlxuICAgICAgICAgIDxpb24tc2VsZWN0LW9wdGlvbiB2YWx1ZT1cImxpdmVcIj5MaXZlIGRhdGE8L2lvbi1zZWxlY3Qtb3B0aW9uPlxuICAgICAgICAgIDxpb24tc2VsZWN0LW9wdGlvbiB2YWx1ZT1cImRhdGFsb2dcIj5EYXRhIGxvZzwvaW9uLXNlbGVjdC1vcHRpb24+XG4gICAgICAgIDwvaW9uLXNlbGVjdD5cbiAgICAgIDwvaW9uLWl0ZW0+XG4gICAgPC9pb24tbGlzdD5cbiAgPC9mb3JtPlxuPC9pb24tY29udGVudD5cbjxpb24tZm9vdGVyPlxuICA8aW9uLXRvb2xiYXI+XG4gICAgPGlvbi1idXR0b25zIHNsb3Q9XCJlbmRcIj5cbiAgICAgIDxpb24tYnV0dG9uIChjbGljayk9XCJkaXNtaXNzKClcIj5PazwvaW9uLWJ1dHRvbj5cbiAgICA8L2lvbi1idXR0b25zPlxuICA8L2lvbi10b29sYmFyPlxuPC9pb24tZm9vdGVyPlxuIl19