import { DiagnosticsService } from './diagnostics.service';
import { ActivatedRoute } from '@angular/router';
import { Component } from '@angular/core';
import { BehaviorSubject, pipe } from 'rxjs';
import { map } from 'rxjs/operators';
import { operationStatusClasses, operationStatusIcons, OperationRealtimeService } from '@c8y/ngx-components';
export class DiagnosticsComponent {
    constructor(route, diagnosticService, operationRealtime) {
        this.route = route;
        this.diagnosticService = diagnosticService;
        this.operationRealtime = operationRealtime;
        this.statusIcons = operationStatusIcons;
        this.statusClasses = operationStatusClasses;
        this.deviceId = this.route.snapshot.parent.data.contextData.id;
        this.device$ = new BehaviorSubject(this.route.snapshot.parent.data.contextData);
        this.operations$ = this.diagnosticService.getOperations$(this.device$);
        this.operationsPipe = pipe(map((ops) => ops.filter(op => op[this.diagnosticService.fragment])));
        this.realtimeOptions = {
            entityOrId: this.deviceId,
            removeOnUpdate: true,
            insertOnUpdate: true
        };
    }
    onDiagnosticRequest() {
        this.diagnosticService.createOperation(this.deviceId);
    }
    onDelete(operation) {
        this.diagnosticService.deleteOperation(operation);
    }
    onCancel(operation) {
        this.diagnosticService.cancelOperation(operation);
    }
}
DiagnosticsComponent.decorators = [
    { type: Component, args: [{
                template: "<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    title=\"{{ 'Request diagnostic file' | translate }}\"\n    class=\"btn btn-link\"\n    (click)=\"onDiagnosticRequest()\"\n  >\n    <i c8yIcon=\"stethoscope\"></i> <span translate>Request diagnostic file</span>\n  </button>\n</c8y-action-bar-item>\n\n<div\n  class=\"page-sticky-header hidden-xs c8y-list__item c8y-list--timeline\"\n  *ngIf=\"operationCount > 0\"\n>\n  <div class=\"d-flex\">\n    <div class=\"c8y-list--timeline__item__date flex-item-v-center\">\n      <label>{{ 'Date' | translate }}</label>\n    </div>\n    <div class=\"c8y-list__item__block flex-grow\">\n      <div class=\"c8y-list__item__icon\">\n        <i class=\"p-l-24\"></i>\n      </div>\n      <div class=\"c8y-list__item__body\">\n        <div class=\"content-flex-40\">\n          <div class=\"col-4\">{{ 'Event' | translate }}</div>\n          <div class=\"col-5 m-l-8\">{{ 'File' | translate }}</div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<c8y-list-group>\n  <ng-template\n    c8yFor\n    let-operation\n    [c8yForOf]=\"operations$\"\n    [c8yForPipe]=\"operationsPipe\"\n    [c8yForRealtime]=\"operationRealtime\"\n    [c8yForRealtimeOptions]=\"realtimeOptions\"\n    (c8yForCount)=\"operationCount = $event\"\n  >\n    <c8y-li-timeline>\n      {{ operation.creationTime | c8yDate }}\n      <c8y-li>\n        <c8y-li-icon>\n          <i\n            [c8yIcon]=\"statusIcons[operation.status]\"\n            [ngClass]=\"statusClasses[operation.status]\"\n            [tooltip]=\"operation.status?.toString() | translate\"\n          ></i>\n        </c8y-li-icon>\n        <c8y-li-body class=\"content-flex-40\">\n          <div class=\"col-4\">\n            <p class=\"text-truncate-wrap\" title=\"{{ operation.description | translate }}\">\n              {{ operation.description | translate }}\n            </p>\n          </div>\n          <div class=\"col-5\" *ngIf=\"operation.c8y_DiagnosticReport?.file\">\n            <div class=\"text-truncate-wrap m-t-xs-8\">\n              <span class=\"text-label-small visible-xs\" translate> File </span>\n              <span title=\"{{ operation.c8y_DiagnosticReport.file }}\">\n                <c8y-file-download\n                  url=\"{{ operation.c8y_DiagnosticReport.file }}\"\n                ></c8y-file-download>\n              </span>\n            </div>\n          </div>\n        </c8y-li-body>\n        <c8y-li-action\n          (click)=\"onCancel(operation)\"\n          *ngIf=\"operation.status === 'PENDING'\"\n          icon=\"times\"\n          label=\"{{ 'Cancel' | translate }}\"\n        >\n        </c8y-li-action>\n        <c8y-li-action\n          (click)=\"onDelete(operation)\"\n          *ngIf=\"operation.status === 'SUCCESSFUL'\"\n          icon=\"trash\"\n          label=\"{{ 'Delete' | translate }}\"\n        >\n        </c8y-li-action>\n      </c8y-li>\n    </c8y-li-timeline>\n  </ng-template>\n</c8y-list-group>\n\n<!-- EMPTY STATE -->\n\n<div class=\"c8y-empty-state m-t-40\" *ngIf=\"operationCount === 0\">\n  <h1 class=\"c8y-icon\">\n    <i c8yIcon=\"stethoscope\"></i>\n  </h1>\n  <h3 translate>No diagnostic files available.</h3>\n</div>\n",
                selector: 'c8y-diagnostics'
            },] }
];
DiagnosticsComponent.ctorParameters = () => [
    { type: ActivatedRoute },
    { type: DiagnosticsService },
    { type: OperationRealtimeService }
];
//# sourceMappingURL=data:application/json;base64, 