import { ChangeDetectorRef, Component, EventEmitter, Input, Output, } from '@angular/core';
import { bufferToHexString } from '@iotize/common/byte-converter';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@ionic/angular";
export class TapDatalogTableComponent {
    constructor(changeRefDetector) {
        this.changeRefDetector = changeRefDetector;
        this.dataColumns = [];
        this.date = true;
        this.sync = true;
        this.onSyncEvent = new EventEmitter();
        this.onRetrySync = new EventEmitter();
    }
    set dataLogger(dataLogger) {
        if (dataLogger) {
            dataLogger.stream.subscribe((p) => {
                if (this.dataColumns.length === 0) {
                    this.initColumnsFromPacket(p);
                }
                if (!this._packets) {
                    this._packets = [];
                }
                this._packets.push(p);
                this.changeRefDetector.detectChanges();
            });
        }
    }
    set packets(packets) {
        this._packets = packets;
        if (packets && this.dataColumns.length === 0 && packets.length > 0) {
            this.initColumnsFromPacket(packets[0]);
        }
    }
    get packets() {
        return this._packets;
    }
    packetVariableValue(packet, key) {
        let value = packet.decodedData[key];
        if (value instanceof Uint8Array) {
            value = `0x${bufferToHexString(value)}`;
        }
        return value;
    }
    packetId(packet) {
        return packet.meta.packetId;
    }
    packetDate(packet) {
        return packet.meta.logTime;
    }
    isPacketSync(packetInfo) {
        if (!('syncInfo' in packetInfo)) {
            return false;
        }
        return packetInfo.syncInfo && packetInfo.syncInfo.isSync;
    }
    syncPacket(packetInfo) {
        this.onRetrySync.emit(packetInfo);
    }
    initColumnsFromPacket(p) {
        this.dataColumns = Object.keys(p.decodedData).map((key) => {
            return {
                key: key,
                title: key,
            };
        });
    }
}
/** @nocollapse */ TapDatalogTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TapDatalogTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ TapDatalogTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TapDatalogTableComponent, selector: "tap-datalog-table", inputs: { dataColumns: "dataColumns", date: "date", sync: "sync", dataLogger: "dataLogger", packets: "packets" }, outputs: { onSyncEvent: "onSyncEvent", onRetrySync: "onRetrySync" }, ngImport: i0, template: "<table *ngIf=\"dataColumns\" class=\"table\" mat-table>\n  <thead>\n    <th *ngIf=\"date\"><ion-icon name=\"time\"></ion-icon> Date</th>\n    <th><ion-icon name=\"document\"></ion-icon> ID</th>\n    <th *ngFor=\"let dataColumn of dataColumns\">\n      <ion-icon name=\"analytics\"></ion-icon> {{ dataColumn.title }}\n    </th>\n    <th *ngIf=\"sync\"><ion-icon name=\"cloud\"></ion-icon> Cloud sync</th>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let packet of packets\">\n      <td *ngIf=\"date\">\n        {{ packetDate(packet) | date: 'short' }}\n      </td>\n      <td>\n        {{ packetId(packet) }}\n      </td>\n      <td *ngFor=\"let info of dataColumns\">\n        {{ packetVariableValue(packet, info.key) }}\n      </td>\n      <td *ngIf=\"sync\">\n        <ion-text *ngIf=\"isPacketSync(packet)\" color=\"success\">\n          <ion-icon [name]=\"'checkmark'\"></ion-icon> &nbsp; Sync\n        </ion-text>\n        <ion-text *ngIf=\"!isPacketSync(packet)\" color=\"danger\">\n          <ion-icon [name]=\"'alert'\"></ion-icon> &nbsp; Not sync &nbsp;\n          <a (click)=\"syncPacket(packet)\"> retry </a>\n        </ion-text>\n        <!--  <ion-buttons slot=\"end\">\n                                    <ion-button (click)=\"syncPacket(packet)\" [color]=\"isPacketSync(packet) ? 'success': ''\" [disabled]=\"isPacketSync(packet)\">\n                                        <ion-icon [name]=\"isPacketSync(packet) ? 'checkmark' : 'sync'\"></ion-icon>\n                                        Sync\n                                    </ion-button>\n                                    <ion-button (click)=\"decodePacket(syncInfo)\">\n                        <ion-icon name=\"sync\"></ion-icon>\n                        Decode\n                    </ion-button> \n                                    <ion-button (click)=\"detail(syncInfo)\">\n                                                                                                                                                    <ion-icon name=\"more\"></ion-icon>\n                                                                                                                                                    Detail\n                                                                                                                                              </ion-button> \n                                </ion-buttons>-->\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: ["table{width:100%;border-collapse:collapse}tr:nth-of-type(odd){background:#eee}th{background:#333;color:#fff;font-weight:700}td,th{padding:10px;text-align:left}@media only screen and (max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px){table,thead,tbody,th,td,tr{display:block}thead tr{position:absolute;top:-9999px;left:-9999px}tr{border:1px solid #ccc}td{border:none;border-bottom:1px solid #eee;position:relative;padding-left:50%}td:before{position:relative;top:0;left:6px;width:45%;padding-right:10px;white-space:nowrap}}@media only screen and (min-device-width: 320px) and (max-device-width: 480px){body{padding:0;margin:0;width:320px}}@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){body{width:495px}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TapDatalogTableComponent, decorators: [{
            type: Component,
            args: [{ selector: 'tap-datalog-table', template: "<table *ngIf=\"dataColumns\" class=\"table\" mat-table>\n  <thead>\n    <th *ngIf=\"date\"><ion-icon name=\"time\"></ion-icon> Date</th>\n    <th><ion-icon name=\"document\"></ion-icon> ID</th>\n    <th *ngFor=\"let dataColumn of dataColumns\">\n      <ion-icon name=\"analytics\"></ion-icon> {{ dataColumn.title }}\n    </th>\n    <th *ngIf=\"sync\"><ion-icon name=\"cloud\"></ion-icon> Cloud sync</th>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let packet of packets\">\n      <td *ngIf=\"date\">\n        {{ packetDate(packet) | date: 'short' }}\n      </td>\n      <td>\n        {{ packetId(packet) }}\n      </td>\n      <td *ngFor=\"let info of dataColumns\">\n        {{ packetVariableValue(packet, info.key) }}\n      </td>\n      <td *ngIf=\"sync\">\n        <ion-text *ngIf=\"isPacketSync(packet)\" color=\"success\">\n          <ion-icon [name]=\"'checkmark'\"></ion-icon> &nbsp; Sync\n        </ion-text>\n        <ion-text *ngIf=\"!isPacketSync(packet)\" color=\"danger\">\n          <ion-icon [name]=\"'alert'\"></ion-icon> &nbsp; Not sync &nbsp;\n          <a (click)=\"syncPacket(packet)\"> retry </a>\n        </ion-text>\n        <!--  <ion-buttons slot=\"end\">\n                                    <ion-button (click)=\"syncPacket(packet)\" [color]=\"isPacketSync(packet) ? 'success': ''\" [disabled]=\"isPacketSync(packet)\">\n                                        <ion-icon [name]=\"isPacketSync(packet) ? 'checkmark' : 'sync'\"></ion-icon>\n                                        Sync\n                                    </ion-button>\n                                    <ion-button (click)=\"decodePacket(syncInfo)\">\n                        <ion-icon name=\"sync\"></ion-icon>\n                        Decode\n                    </ion-button> \n                                    <ion-button (click)=\"detail(syncInfo)\">\n                                                                                                                                                    <ion-icon name=\"more\"></ion-icon>\n                                                                                                                                                    Detail\n                                                                                                                                              </ion-button> \n                                </ion-buttons>-->\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: ["table{width:100%;border-collapse:collapse}tr:nth-of-type(odd){background:#eee}th{background:#333;color:#fff;font-weight:700}td,th{padding:10px;text-align:left}@media only screen and (max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px){table,thead,tbody,th,td,tr{display:block}thead tr{position:absolute;top:-9999px;left:-9999px}tr{border:1px solid #ccc}td{border:none;border-bottom:1px solid #eee;position:relative;padding-left:50%}td:before{position:relative;top:0;left:6px;width:45%;padding-right:10px;white-space:nowrap}}@media only screen and (min-device-width: 320px) and (max-device-width: 480px){body{padding:0;margin:0;width:320px}}@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){body{width:495px}}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { dataColumns: [{
                type: Input
            }], date: [{
                type: Input
            }], sync: [{
                type: Input
            }], onSyncEvent: [{
                type: Output
            }], dataLogger: [{
                type: Input
            }], packets: [{
                type: Input
            }], onRetrySync: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 