\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n\r\n\r\n \r\n \r\n\r\n
\r\n\r\n \r\n\r\n \r\n\r\n \r\n","import { HttpErrorResponse } from '@angular/common/http';\r\nimport { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';\r\nimport { MatDialog } from '@angular/material/dialog';\r\nimport { MatPaginator, PageEvent } from '@angular/material/paginator';\r\nimport { MatTableDataSource } from '@angular/material/table';\r\nimport { NgxSpinnerService } from 'ngx-spinner';\r\nimport { Subscription } from 'rxjs';\r\nimport { EnterpriseService } from 'src/app/services/enterprise/enterprise.service';\r\nimport { GatewayService } from 'src/app/services/gateway/gateway.service';\r\nimport { HeadquarterService } from 'src/app/services/headquarter/headquarter.service';\r\nimport { SensorService } from 'src/app/services/sensor/sensor.service';\r\nimport { ZoneService } from 'src/app/services/zone/zone.service';\r\nimport { MessageModalComponent } from 'src/app/shared/components/modals/message/message-modal.component';\r\nimport { SensorModalComponent } from 'src/app/shared/components/modals/sensor/sensor-modal.component';\r\nimport { AppConstants } from 'src/app/shared/constants/app.contants';\r\nimport { AlertService, MessageSeverity } from 'src/app/shared/services/alert.service';\r\nimport { EmitterService } from 'src/app/shared/services/emitter.service';\r\nimport { environment } from 'src/environments/environment';\r\nimport { PanelSensorModalComponent } from 'src/app/shared/components/modals/panel-sensor-modal/panel-sensor-modal.component';\r\nimport { PanelIOTService } from 'src/app/services/panel-iot/panel-iot.service';\r\nimport 'fabric';\r\nimport { MatSlideToggleChange } from '@angular/material';\r\nimport { Router } from '@angular/router';\r\nimport { PanelActuatorModalComponent } from 'src/app/shared/components/modals/panel-actuator-modal/panel-actuator-modal.component';\r\ndeclare const fabric: any;\r\n\r\n@Component({\r\n selector: 'app-location-iot',\r\n templateUrl: './location-iot.component.html',\r\n styleUrls: ['./location-iot.component.css']\r\n})\r\nexport class LocationIotComponent implements OnInit {\r\n loading: boolean = false;\r\n dataSource = new MatTableDataSource();\r\n displayedColumns: string[] = ['enterprise','headquarter','gateway','name','description','nomenclature','action'];\r\n @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;\r\n isAdminGys: boolean = false;\r\n countMaxUserByEnterprise: number = 0;\r\n enterprises = [];\r\n colorToggle = \"\";\r\n headquarters = [];\r\n gateways = [];\r\n subscription: Subscription;\r\n enterpriseSelect: number = 0;\r\n pageEvent: PageEvent;\r\n pageIndex: number = 0;\r\n pageSize: number = AppConstants.Paginado.DEFAULT_PAGE_SIZE_PAGINATION;\r\n length: number = 0;\r\n page: number = 1;\r\n headquarterSelect: number = 0;\r\n gatewaySelect: number = 0;\r\n zones = [];\r\n zoneSelect: number = 0;\r\n canvas: any;\r\n nameMarker: string = '';\r\n sensors = [];\r\n displayListStadistics = 'block';\r\n showSensorEdit = false;\r\n showGraphSensor = false;\r\n showPanels = false;\r\n sensorsModals = [];\r\n sensorName = \"\";\r\n sensorId = 0;\r\n color1: string;\r\n color2: string;\r\n colorFont: string;\r\n colorFont2: string;\r\n enabledRead: number;\r\n enabledWrite: number;\r\n\r\n constructor(\r\n private el: ElementRef,\r\n public dialog: MatDialog,\r\n private alertService: AlertService,\r\n private enterpriseService: EnterpriseService,\r\n private spinner: NgxSpinnerService,\r\n private emitterService: EmitterService,\r\n private sensorService: SensorService,\r\n private headquarterService: HeadquarterService,\r\n private gatewayService: GatewayService,\r\n private panelIOTService: PanelIOTService,\r\n private router: Router,\r\n private zoneService: ZoneService\r\n ) {\r\n document.getElementById(\"titleHeaderNav\").innerHTML = 'IOT > ConfiguraciĆ³n de Panel';\r\n }\r\n\r\n ngOnInit() {\r\n this.setLS();\r\n this.enterpriseSelect = (+localStorage.getItem(AppConstants.Session.ENTERPRISE));\r\n this.headquarterSelect = (+localStorage.getItem(AppConstants.Session.HEADQUARTER));\r\n this.isAdminGys = (+localStorage.getItem(AppConstants.Session.ROLID) == AppConstants.UserRole.AdministradorGyS || +localStorage.getItem(AppConstants.Session.ROLID) == AppConstants.UserRole.UsuarioGyS) ? true : false;\r\n this.getZones();\r\n this.getCanvas();\r\n }\r\n\r\n setLS(){\r\n this.color1 = localStorage.getItem(AppConstants.Session.THEME_COLOR1);\r\n this.color2 = localStorage.getItem(AppConstants.Session.THEME_COLOR2);\r\n this.colorFont = localStorage.getItem(AppConstants.Session.THEME_COLOR_FONT);\r\n this.colorFont2 = localStorage.getItem(AppConstants.Session.THEME_COLOR_FONT2);\r\n //validate Permisses menu\r\n var menu = JSON.parse(localStorage.getItem(AppConstants.Session.MENU));\r\n var page = this.router.url.split(\"/\");\r\n var i = page[page.length-1];\r\n var itemTag = menu.filter(x => x.tag != null && (x.tag.toString()).toLowerCase().includes(i));\r\n if(itemTag.length>0){\r\n this.enabledRead = itemTag[0].activeRead;\r\n this.enabledWrite = itemTag[0].activeWrite;\r\n }else{\r\n this.enabledRead = 0;\r\n this.enabledWrite = 0;\r\n }\r\n }\r\n\r\n getCanvas() {\r\n this.canvas = new fabric.Canvas('canvas',{selection: false});\r\n }\r\n\r\n changeEnterprise(data) {\r\n this.countMaxUserByEnterprise = this.enterprises.find(f => f.enterpriseId == data.value).maximumUsers;\r\n this.enterpriseSelect = data.value;\r\n this.gatewaySelect = 0;\r\n this.headquarterSelect = 0;\r\n var objects = this.canvas.getObjects();\r\n for(var i = 0; i < objects.length; i++){\r\n this.canvas.remove(objects[i]);\r\n }\r\n this.headquarters = [];\r\n this.gateways = [];\r\n this.sensors = [];\r\n this.getHeadquarters();\r\n }\r\n\r\n getEnterprises() {\r\n if (this.isAdminGys) {\r\n this.spinner.show();\r\n this.enterpriseService.getEnterprises().subscribe((response) => {\r\n this.enterprises = response.filter(f => f.enabled == AppConstants.Flag.Active);\r\n this.enterpriseSelect = this.enterprises[0][\"enterpriseId\"];\r\n this.getHeadquarters();\r\n this.spinner.hide();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n } else {\r\n this.enterpriseSelect = +localStorage.getItem(AppConstants.Session.ENTERPRISE)\r\n this.getEnterpriseById(this.enterpriseSelect);\r\n this.getList();\r\n }\r\n }\r\n\r\n getHeadquarters() {\r\n if (this.isAdminGys) {\r\n this.spinner.show();\r\n this.headquarterService.getListAll().subscribe((response) => {\r\n if(response.error == null){\r\n this.headquarters = response.data.filter(f => f.idEnterprise == this.enterpriseSelect);\r\n if(this.headquarters.length > 0){\r\n this.headquarterSelect = this.headquarters[0].id;\r\n }\r\n this.getZones();\r\n this.getGateways();\r\n }else{\r\n this.headquarters = [];\r\n this.gateways = [];\r\n }\r\n this.spinner.hide();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.headquarters = [];\r\n this.gateways = [];\r\n this.spinner.hide();\r\n });\r\n } else {\r\n this.headquarterSelect = +localStorage.getItem(AppConstants.Session.HEADQUARTER);\r\n }\r\n }\r\n\r\n getGateways(){\r\n this.gatewayService.getListAll().subscribe((response) => {\r\n if(response.error == null){\r\n if(this.headquarterSelect == 0){\r\n var gateways = response.data.filter(x => x.idEnterprise == this.enterpriseSelect);\r\n this.gateways = gateways;\r\n }else{\r\n var gateways = response.data.filter(x => x.idHeadquarter == this.headquarterSelect);\r\n this.gateways = gateways;\r\n }\r\n\r\n if(this.gateways.length > 0){\r\n this.gatewaySelect = gateways[0].id;\r\n }\r\n }else{\r\n this.gateways = [];\r\n }\r\n this.getList();\r\n this.spinner.hide();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.gateways = [];\r\n });\r\n\r\n }\r\n\r\n getZones(){\r\n this.zoneService.getListAll(this.enterpriseSelect,this.headquarterSelect).subscribe((response) => {\r\n if(response.error == null){\r\n this.zones = response.data.filter(x => x.type == 2);\r\n if(this.zones.length>0){\r\n this.zoneSelect = this.zones[0].id;\r\n var image = this.zones[0].image;\r\n /* if(this.zones[0].idStorageTypeBlob == 1){ // Mode Local\r\n image = this.zones[0].storagePathBlob + image;\r\n }*/\r\n this.changeImage(image);\r\n this.headquarterSelect = this.zones[0].idHeadquarter;\r\n this.getGateways();\r\n } else {\r\n this.alertService.showMessage(\"No tiene zonas IOT registradas, debes de crear una zona para usar este mĆ³dulo\", \"\", MessageSeverity.error);\r\n this.changeImage('./assets/images/sin_image.jpg');\r\n }\r\n this.spinner.hide();\r\n }\r\n });\r\n }\r\n\r\n showView(event: MatSlideToggleChange){\r\n if(event.checked){\r\n this.displayListStadistics = 'none';\r\n }else{\r\n this.displayListStadistics = 'block';\r\n }\r\n }\r\n\r\n showTable(event: MatSlideToggleChange){\r\n //this.initPage = true;\r\n //this.showSensorsTable = event.checked;\r\n //event.checked = this.showSensorsTable ? false : true;\r\n this.showPanels = event.checked;\r\n if(event.checked){\r\n for (var i = 0; i < this.sensors.length; i++) {\r\n var obj = this.sensors[i];\r\n this.newGraphGroup(obj);\r\n this.canvas.renderAll();\r\n }\r\n }else{\r\n var objects = this.canvas.getObjects();\r\n for (var i = 0; i < this.sensors.length; i++) {\r\n var obj = this.sensors[i];\r\n for(var ii = 0; ii < objects.length; ii++){\r\n if(obj.id +\"_panel\" == objects[ii].id){\r\n this.canvas.remove(objects[ii]);\r\n }\r\n }\r\n }\r\n this.canvas.renderAll();\r\n }\r\n }\r\n\r\n\r\n getEnterpriseById(enterpriseId: number) {\r\n this.spinner.show();\r\n this.enterpriseService.getEnterpriseById(enterpriseId).subscribe((response => {\r\n this.countMaxUserByEnterprise = response.maximumUsers;\r\n this.spinner.hide();\r\n }),\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n getList(){\r\n this.spinner.show();\r\n if(this.zoneSelect && this.gatewaySelect){\r\n var objects = this.canvas.getObjects();\r\n for(var i = 0; i < objects.length; i++){\r\n this.canvas.remove(objects[i]);\r\n }\r\n this.canvas.renderAll();\r\n var filter = {\r\n idEnterprise: this.enterpriseSelect,\r\n idHeadquarter: this.headquarterSelect,\r\n idZone: this.zoneSelect,\r\n idGateway: this.gatewaySelect\r\n }\r\n this.panelIOTService.getList(filter).subscribe((_) => {\r\n if(_.error == null){\r\n this.sensors = _.data;\r\n this.createMarkers();\r\n }\r\n this.spinner.hide();\r\n });\r\n }\r\n this.spinner.hide();\r\n }\r\n\r\n createMarkers() {\r\n for (var i = 0; i < this.sensors.length; i++) {\r\n var obj = this.sensors[i];\r\n this.newGroup(obj);\r\n //add Graph\r\n if(this.showPanels){\r\n this.newGraphGroup(obj);\r\n }\r\n }\r\n }\r\n\r\n newGroup(obj) {\r\n\r\n\r\n var _this = this;\r\n if(obj.isActuator){\r\n var text = new fabric.Text(obj.nomenclature, {textBackgroundColor:\"gray\",fill: 'white', id: obj.id,fontSize: 15, originX: 'center', originY: 'center'});\r\n var img = \"\";\r\n if(obj.idActuatorType == 1){ // tanques\r\n var porc = (obj.value/obj.maxCapacity)*100;\r\n if(obj.value <= 0){\r\n img = \"../../../../../assets/actuator/tanque/tq_0.png\";\r\n }else if(porc <= 30 && porc > 0){\r\n img = \"../../../../../assets/actuator/tanque/tq_1.png\";\r\n }else if(porc <= 70 && porc > 30){\r\n img = \"../../../../../assets/actuator/tanque/tq_2.png\";\r\n }else if(porc < 100 && porc > 70){\r\n img = \"../../../../../assets/actuator/tanque/tq_3.png\";\r\n }else if(obj.value == obj.maxCapacity){\r\n img = \"../../../../../assets/actuator/tanque/tq_4.png\";\r\n }\r\n }else if(obj.idActuatorType == 2){//valvula\r\n img = \"../../../../../assets/actuator/valvula/\"+obj.value+\".png\";\r\n }\r\n \r\n new fabric.Image.fromURL(img,\r\n function(img) {\r\n var img1 = img.set({\r\n originX: 'center',\r\n originY: 'bottom',\r\n top: -10,\r\n id: obj.id,\r\n scaleX: 0.7,\r\n scaleY: 0.7\r\n });\r\n var group = new fabric.Group([text, img1], {\r\n left: obj.posX,\r\n top: obj.posY,\r\n borderColor: 'transparent',\r\n hasControls: false,\r\n hasRotatingPoint: false,\r\n id: obj.id,\r\n isGraph: 0\r\n });\r\n console.log(\"actuadores \",group);\r\n _this.canvas.add(group);\r\n });\r\n }else{\r\n var text = new fabric.Text(obj.nomenclature, {textBackgroundColor:obj.stateColor,fill:this.color1, fontSize: 15, originX: 'center', originY: 'center',\r\n fontWeight: 'bold',});\r\n var textBoundingRect = text.getBoundingRect();\r\n var background = new fabric.Rect({\r\n top: textBoundingRect.top,\r\n left: textBoundingRect.left,\r\n width: textBoundingRect.width,\r\n height: textBoundingRect.height,\r\n fill: '#00000033',\r\n rx: 5,\r\n ry: 5,\r\n objectCaching: false,\r\n });\r\n\r\n new fabric.Image.fromURL(obj.pin,\r\n function(img) {\r\n var img1 = img.set({\r\n originX: 'center',\r\n originY: 'bottom',\r\n top: -10,\r\n scaleX: 0.15,\r\n scaleY: 0.15\r\n });\r\n var group = new fabric.Group([text,background, img1], {\r\n left: obj.posX,\r\n top: obj.posY,\r\n borderColor: 'transparent',\r\n hasControls: false,\r\n hasRotatingPoint: false,\r\n id: obj.id,\r\n isGraph: 0\r\n });\r\n _this.canvas.add(group);\r\n });\r\n /*var group = new fabric.Group([background,text], {\r\n left: obj.posX,\r\n top: obj.posY,\r\n borderColor: 'transparent',\r\n hasControls: false,\r\n hasRotatingPoint: false,\r\n id: obj.id,\r\n isGraph: 0\r\n });\r\n this.canvas.add(group);*/\r\n }\r\n\r\n }\r\n\r\n\r\n newGraphGroup(obj) {\r\n var text = new fabric.Text(\"Panel - \" + obj.nomenclature, { width: 70,\r\n height: 100,textBackgroundColor:'transparent',fill: 'white', fontSize: 15, originX: 'center', originY: 'center'});\r\n var textBoundingRect = text.getBoundingRect();\r\n var background = new fabric.Rect({\r\n top: textBoundingRect.top,\r\n left: textBoundingRect.left,\r\n width: 250,\r\n height: 150,\r\n fill: '#1bc0dbba'\r\n });\r\n\r\n var group = new fabric.Group([background,text],{\r\n width: 250,\r\n height: 100,\r\n borderColor: 'white',\r\n left: obj.posGraphX,\r\n top: obj.posGraphY + 50,\r\n hasControls: false,\r\n hasRotatingPoint: false,\r\n id: obj.id+\"_panel\",\r\n isGraph: 1\r\n });\r\n this.canvas.add(group);\r\n}\r\n\r\n\r\n newGraphSensor(obj) {\r\n var text = new fabric.Text(obj.nomenclature, {textBackgroundColor:'#1f5165',fill: 'white', fontSize: 15, originX: 'center', originY: 'center'});\r\n var group = new fabric.Group([text], {\r\n left: obj.posX,\r\n top: obj.posY + 50,\r\n borderColor: 'transparent',\r\n hasControls: false,\r\n hasRotatingPoint: false,\r\n id: obj.id\r\n });\r\n this.canvas.add(group);\r\n}\r\n\r\nopenAddActuatorModal(){\r\n let dialogRef = this.dialog.open(PanelActuatorModalComponent, {\r\n data: {\r\n title: AppConstants.TitleModal.ADD_ACTUATOR_PANEL,\r\n idEnterprise: this.enterpriseSelect,\r\n idHeadquarter: this.headquarterSelect,\r\n idGateway: this.gatewaySelect,\r\n idZone: this.zoneSelect,\r\n enabledWrite: this.enabledWrite,\r\n enabledRead: this.enabledRead,\r\n isAdminGys: this.isAdminGys,\r\n action: AppConstants.OperationType.ADD,\r\n obj:null},\r\n width: '500px',\r\n hasBackdrop: true\r\n });\r\n dialogRef.afterClosed().subscribe(_ => {\r\n this.getList();\r\n });\r\n}\r\n\r\n openAddModal() {\r\n this.save(true);\r\n // validate exist sensors\r\n this.sensorService.getListAll(this.enterpriseSelect,this.headquarterSelect).subscribe((response) => {\r\n if(response.error == null){\r\n if(this.headquarterSelect > 0){\r\n this.sensorsModals = response.data.filter(x => x.idEnterprise == this.enterpriseSelect && x.idHeadquarter == this.headquarterSelect && x.idGateway == this.gatewaySelect);\r\n }else{\r\n this.sensorsModals = response.data.filter(x => x.idEnterprise == this.enterpriseSelect && x.idGateway == this.gatewaySelect);\r\n }\r\n if(this.sensorsModals.length>0){\r\n let dialogRef = this.dialog.open(PanelSensorModalComponent, {\r\n data: {\r\n title: AppConstants.TitleModal.ADD_SENSOR_PANEL,\r\n idEnterprise: this.enterpriseSelect,\r\n idHeadquarter: this.headquarterSelect,\r\n idGateway: this.gatewaySelect,\r\n idZone: this.zoneSelect,\r\n enabledWrite: this.enabledWrite,\r\n enabledRead: this.enabledRead,\r\n isAdminGys: this.isAdminGys,\r\n action: AppConstants.OperationType.ADD,\r\n sensorName: this.sensors[0] != null ? this.sensors[0].nomenclatureInit : '',\r\n sensorId: this.sensors[0] != null ? this.sensors[0].id : 0,\r\n sensors: this.sensorsModals,\r\n obj:null},\r\n width: '800px',\r\n hasBackdrop: true\r\n });\r\n dialogRef.afterClosed().subscribe(_ => {\r\n this.getList();\r\n });\r\n }else{\r\n this.alertService.showMessage(\"No tiene sensores registrados\", \"\", MessageSeverity.error);\r\n }\r\n }\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n this.alertService.showMessage(\"No tiene sensores registrados\", \"\", MessageSeverity.error);\r\n });\r\n }\r\n\r\n getSensors(){\r\n this.spinner.show();\r\n\r\n }\r\n\r\n openEditModal(data){\r\n let dialogRef = this.dialog.open(SensorModalComponent, {\r\n data: {\r\n title: AppConstants.TitleModal.UPDATE_SENSOR,\r\n action: AppConstants.OperationType.ADD,\r\n gateways: this.gateways,\r\n headquarters: this.headquarters,\r\n idEnterprise: this.enterpriseSelect,\r\n idHeadquarter: this.headquarterSelect,\r\n enabledWrite: this.enabledWrite,\r\n enabledRead: this.enabledRead,\r\n idGateway: this.gatewaySelect,\r\n isAdminGys: this.isAdminGys,\r\n sensors: this.sensorsModals,\r\n obj:data},\r\n width: '800px',\r\n hasBackdrop: true\r\n });\r\n dialogRef.afterClosed().subscribe(_ => {\r\n this.getList();\r\n });\r\n }\r\n\r\n\r\n changeHeadquarter(data) {\r\n this.headquarterSelect = data.value;\r\n this.getZones();\r\n }\r\n\r\n changeGateway(data) {\r\n this.gatewaySelect = data.value;\r\n this.getList();\r\n }\r\n\r\n changeZone(data) {\r\n this.zoneSelect = data.value;\r\n var zone = this.zones.filter(x => x.id == data.value)[0];\r\n this.headquarterSelect = zone.idHeadquarter;\r\n this.getGateways();\r\n\r\n var image = zone.image;\r\n if(image){\r\n /* if(zone.idStorageTypeBlob == 1){ // Mode Local\r\n image = environment.pathFile + image;\r\n } */ \r\n this.changeImage(image);\r\n }else {\r\n this.changeImage('./assets/images/sin_image.jpg');\r\n }\r\n this.getList();\r\n }\r\n\r\n handleDrop() {\r\n this.listenMovement();\r\n }\r\n\r\n changeImage(urlImage : string) {\r\n fabric.Image.fromURL(urlImage, (img) => {\r\n img.set({\r\n opacity: 0.5,\r\n scaleX: this.canvas.width / img.width,\r\n scaleY: this.canvas.height / img.height,\r\n });\r\n this.canvas.setBackgroundImage(img, this.canvas.requestRenderAll.bind(this.canvas));\r\n });\r\n }\r\n\r\n\r\n listenMovement(){\r\n var _this = this;\r\n\r\n this.canvas.on(\"mouse:up\", function(e) {\r\n /*});\r\n this.canvas.on(\"object:moving\", function(e) {*/\r\n var obj = e.target;\r\n var canvas = obj.canvas;\r\n var top = obj.top;\r\n var left = obj.left;\r\n var pan_x = 0;//canvas.viewportTransform[4];\r\n var pan_y = 0;//canvas.viewportTransform[5];\r\n\r\n var c_width = 1000;//canvas.width;\r\n var c_height = 500;//canvas.height;\r\n var w = obj.width * obj.scaleX\r\n\r\n var left_adjust, right_adjust\r\n if(obj.originX == \"center\") {\r\n left_adjust = right_adjust = w / 2;\r\n } else {\r\n left_adjust = 0;\r\n right_adjust = w;\r\n }\r\n\r\n var h = obj.height * obj.scaleY;\r\n var top_adjust, bottom_adjust;\r\n if(obj.originY == \"center\") {\r\n top_adjust = bottom_adjust = h / 2;\r\n } else {\r\n top_adjust = 0;\r\n bottom_adjust = h;\r\n }\r\n var top_margin = 0;\r\n var bottom_margin = 0;\r\n var left_margin = 0;\r\n var right_margin = 0;\r\n\r\n var top_bound = top_margin + top_adjust - pan_y;\r\n var bottom_bound = c_height - bottom_adjust - bottom_margin - pan_y;\r\n var left_bound = left_margin + left_adjust - pan_x;\r\n var right_bound = c_width - right_adjust - right_margin - pan_x;\r\n\r\n if( w > c_width ) {\r\n obj.left=(left_bound);\r\n } else {\r\n obj.left=(Math.min(Math.max(left, left_bound), right_bound));\r\n }\r\n\r\n if( h > c_height ) {\r\n obj.top=(top_bound);\r\n } else {\r\n obj.top=(Math.min(Math.max(top, top_bound), bottom_bound));\r\n }\r\n var objects = _this.canvas.getObjects();\r\n _this.sensors.forEach(g => {\r\n if (g.id == obj.id || g.id + \"_panel\" == obj.id) {\r\n for(var i = 0; i < objects.length; i++){\r\n if (g.id == objects[i][\"id\"] || g.id + \"_panel\" == objects[i][\"id\"]) {\r\n _this.canvas.remove(objects[i]);\r\n }\r\n }\r\n if(obj.isGraph == 0){\r\n g.posX = obj.left;\r\n g.posY = obj.top;\r\n }else{\r\n g.posGraphX = obj.left;\r\n g.posGraphY = obj.top;\r\n }\r\n\r\n _this.canvas.renderAll();\r\n _this.newGroup(g);\r\n if(_this.showPanels){\r\n _this.newGraphGroup(g);\r\n }\r\n }\r\n });\r\n });\r\n }\r\n\r\n save(newItem = false){\r\n if(!newItem){\r\n this.spinner.show();\r\n }\r\n this.panelIOTService.updateSensorPanelIOT(this.sensors).subscribe((response => {\r\n /*if(response.message == null){\r\n this.alertService.showMessage(AppConstants.TitleModal.UPDATE_TITLE, AppConstants.MessageModal.UPDATE, MessageSeverity.success);\r\n }*/\r\n this.spinner.hide();\r\n }),\r\n (error: HttpErrorResponse) => {\r\n this.alertService.showMessage(AppConstants.TitleModal.UPDATE_TITLE, error.error.messages, MessageSeverity.error);\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n doubleClick(){\r\n var _this = this;\r\n /*this.canvas.on(\"mouse:down\", function(e) {\r\n if(!_this.showGraphSensor){\r\n _this.showGraphSensor = true;\r\n _this.showSensorEdit = true;\r\n var dataS = null;\r\n _this.sensors.forEach(g => {\r\n if (g.id == e.target.id) {\r\n dataS = g;\r\n }\r\n });\r\n //_this.newGraphSensor(dataS);\r\n _this.showGraphSensor = false;\r\n _this.showSensorEdit = false;\r\n }\r\n });*/\r\n this.canvas.on(\"mouse:dblclick\", function(e) {\r\n if(!_this.showSensorEdit){\r\n _this.showSensorEdit = true;\r\n var dataS = null;\r\n _this.sensors.forEach(g => {\r\n console.log(g.id+\"---------------\",e);\r\n if (g.id == e.target.id) {\r\n dataS = g;\r\n }\r\n });\r\n\r\n _this.sensorService.getListAll(_this.enterpriseSelect,_this.headquarterSelect).subscribe((response) => {\r\n if(response.error == null){\r\n if(_this.headquarterSelect > 0){\r\n _this.sensorsModals = response.data.filter(x => x.idEnterprise == _this.enterpriseSelect && x.idHeadquarter == _this.headquarterSelect && x.idGateway == _this.gatewaySelect);\r\n }else{\r\n _this.sensorsModals = response.data.filter(x => x.idEnterprise == _this.enterpriseSelect && x.idGateway == _this.gatewaySelect);\r\n }\r\n if(_this.sensorsModals.length>0){\r\n let dialogRef = _this.dialog.open(PanelSensorModalComponent, {\r\n data: {\r\n title: AppConstants.TitleModal.UPDATE_SENSOR_PANEL,\r\n idEnterprise: _this.enterpriseSelect,\r\n idHeadquarter: _this.headquarterSelect,\r\n idGateway: _this.gatewaySelect,\r\n enabledWrite: _this.enabledWrite,\r\n enabledRead: _this.enabledRead,\r\n idZone: _this.zoneSelect,\r\n isAdminGys: _this.isAdminGys,\r\n action: AppConstants.OperationType.UPDATE,\r\n obj:dataS,\r\n sensors:_this.sensorsModals\r\n },\r\n width: '800px',\r\n hasBackdrop: true\r\n });\r\n dialogRef.afterClosed().subscribe(_ => {\r\n _this.showSensorEdit = false;\r\n _this.getList();\r\n });\r\n }\r\n }\r\n });\r\n }\r\n });\r\n }\r\n\r\n editSensor(element){\r\n this.sensorService.getListAll(this.enterpriseSelect,this.headquarterSelect).subscribe((response) => {\r\n if(response.error == null){\r\n if(this.headquarterSelect > 0){\r\n this.sensorsModals = response.data.filter(x => x.idEnterprise == this.enterpriseSelect && x.idHeadquarter == this.headquarterSelect && x.idGateway == this.gatewaySelect);\r\n }else{\r\n this.sensorsModals = response.data.filter(x => x.idEnterprise == this.enterpriseSelect && x.idGateway == this.gatewaySelect);\r\n }\r\n if(this.sensorsModals.length>0){\r\n\r\n let dialogRef = this.dialog.open(PanelSensorModalComponent, {\r\n data: {\r\n title: AppConstants.TitleModal.UPDATE_SENSOR_PANEL,\r\n idEnterprise: this.enterpriseSelect,\r\n idHeadquarter: this.headquarterSelect,\r\n idGateway: this.gatewaySelect,\r\n idZone: this.zoneSelect,\r\n isAdminGys: this.isAdminGys,\r\n action: AppConstants.OperationType.UPDATE,\r\n obj:element,\r\n sensors:this.sensorsModals\r\n },\r\n width: '800px',\r\n hasBackdrop: true\r\n });\r\n dialogRef.afterClosed().subscribe(_ => {\r\n this.showSensorEdit = false;\r\n this.getList();\r\n });\r\n }\r\n }\r\n });\r\n }\r\n}\r\n","\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Zonas \r\n \r\n \r\n {{zone.name}}\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Gateway \r\n \r\n \r\n {{gateway.name}}\r\n \r\n \r\n \r\n
\r\n \r\n Vista GrƔfica\r\n \r\n Vista Tabla\r\n \r\n |\r\n \r\n Mostrar Paneles\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n | Item | \r\nNombre | \r\nEstado | \r\nNomenclatura | \r\nTipo de GrƔfico | \r\nLugar de lectura | \r\n
|---|---|---|---|---|---|
| \r\n Actuador\r\n Sensor\r\n | \r\n{{item.sensor}} | \r\n{{item.stateSensor}} | \r\n{{item.nomenclature}} | \r\n{{item.graph}} | \r\n{{item.sensorReadingPlace}} | \r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n","import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';\r\nimport { Map, LngLatBounds, LngLat, Marker } from 'mapbox-gl';\r\nimport mapboxgl from 'mapbox-gl';\r\nimport { MapboxService } from 'mapbox-gl';\r\nimport * as MapboxDirections from '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions';\r\nimport { AgmMap, MapsAPILoader } from '@agm/core';\r\ndeclare var google: any;\r\n\r\n@Component({\r\n selector: 'app-panel-gps',\r\n templateUrl: './panel-gps.component.html',\r\n styleUrls: ['./panel-gps.component.css']\r\n})\r\nexport class PanelGPSComponent implements OnInit {\r\n @ViewChild('agmMap', { static: true }) agmMap: AgmMap;\r\n origin: number[] = [-77.04098497650233, -12.036230356017532]; // Coordenadas del origen (Longitud, Latitud)\r\n destination: number[] = [-77.92204403404787,-10.450804774012902]; // Coordenadas del destino (Longitud, Latitud) ,\r\n public markers: any[];\r\n apiKeyGM = \"AIzaSyB70sStdEOl_sHU-GiUwtWg-WP99eLf7GE\";\r\n //map: Map;\r\n map: Map;\r\n mapGM: any;\r\n latInicio = 37.7913;\r\n lngInicio = -122.3960;\r\n latDestino = 37.7749;\r\n lngDestino = -122.4194;\r\n agmMapOptions: any;\r\n zoom = 12;\r\n lat = 51.678418;\r\n lng = 7.809007;\r\n originGM = { lat: 19.4326, lng: -99.1332 };\r\n destinationGM = { lat: 20.6736, lng: -103.344 };\r\n centerLat = 51.678418;\r\n centerLng = 7.809007;\r\n originLat = 51.678418;\r\n originLng = 7.809007;\r\n destinationLat = 51.678418;\r\n destinationLng = 7.909007;\r\n waypoints = [];\r\n /*mapOptions: google.maps.MapOptions = {\r\n zoomControl: true,\r\n draggable: true\r\n };*/\r\n directionsService: any;\r\n directionsDisplay: any;\r\n devices = [{\r\n id: 1,name: \"Zona 1\", direction: { origin: [-77.04098497650233,-12.036230356017532], destination: [-77.92204403404787,-10.450804774012902]}\r\n },{\r\n id: 2,name: \"Zona 2\", direction: { origin: [-74.23392410751605, -15.86664539872316], destination: [-70.93588421856971, -17.196176750466424]}\r\n },{\r\n id: 3,name: \"Zona 3\", direction: { origin: [-78.58987956044771, -9.074790109996867], destination: [-77.03417288414991, -12.026692813166463]}\r\n },{\r\n id: 4,name: \"Zona 4\", direction: { origin: [-76.34158778467048, -6.478963173313768], destination: [-71.59596256358822, -16.42779012923858]}\r\n },{\r\n id: 5,name: \"Zona 5\", direction: { origin: [-70.25329741682341, -17.987965409885113], destination: [-80.68663397971476, -4.9136410156142025]}\r\n },{\r\n id: 6,name: \"Zona 6\", direction: { origin: [-78.79375332464798, -5.723345155627996], destination: [-75.21262622794198, -12.087424352346558]}\r\n }];\r\n selectedDirection: any;\r\n active = 0;\r\n directions: MapboxDirections;\r\n /*coordinates: number[][] = [\r\n [-99.1332, 19.4326], // Origen\r\n [-99.1689, 19.3969] // Destino\r\n ];*/\r\n constructor(private mapsAPILoader: MapsAPILoader){\r\n // this.active = this.devices[0].id;\r\n //this.configureMapsAPILoader();\r\n }\r\n/*\r\n private configureMapsAPILoader(): void {\r\n const apiKey = this.apiKeyGM; // Reemplaza con tu API Key de Google Maps\r\n\r\n this.mapsAPILoader.load().then(() => {\r\n (window as any)['google']['maps'].load(() => {\r\n const maps = (window as any)['google']['maps'];\r\n const mapsConfig = {\r\n apiKey: apiKey,\r\n libraries: ['places']\r\n };\r\n maps.createMap(document.getElementById('map'), mapsConfig);\r\n });\r\n });\r\n }*/\r\n\r\n selectDirection(data: any) {\r\n this.active = data.id;\r\n // this.selectedDirection = data.direction;\r\n console.log(\"devices X => \",data.direction.origin + \"---------\" + data.direction.destination);\r\n // this.getDirections(data.direction.origin, data.direction.destination);\r\n\r\n // Actualiza las direcciones de origen y destino\r\n this.directions.setOrigin(data.direction.origin);\r\n this.directions.setDestination(data.direction.destination);\r\n\r\n // ObtĆ©n y muestra la nueva ruta en el mapa\r\n // this.directions.query();\r\n }\r\n\r\n ngOnInit() {\r\n\r\n /*this.mapsAPILoader.load().then(() => {\r\n const apiKey = 'AIzaSyB70sStdEOl_sHU-GiUwtWg-WP99eLf7GE';\r\n const script = document.createElement('script');\r\n script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}`;\r\n script.async = true;\r\n script.defer = true;\r\n script.onload = () => {\r\n this.initMap();\r\n };\r\n this.elementRef.nativeElement.appendChild(script);\r\n });*/\r\n }\r\n/*\r\n\r\n calculateAndDisplayRoute() {\r\n const request = {\r\n origin: this.originGM,\r\n destination: this.destinationGM,\r\n travelMode: 'DRIVING'\r\n };\r\n\r\n this.directionsService.route(request, (result: any, status: any) => {\r\n console.log(\"result\",result);\r\n console.log(\"status\",status);\r\n if (status === 'OK') {\r\n this.directionsDisplay.setDirections(result);\r\n }\r\n });\r\n }\r\n\r\n\r\n initMap() {\r\n const mapOptions = {\r\n center: { lat: -34.397, lng: 150.644 }, // Coordenadas del centro del mapa\r\n zoom: 8 // Nivel de zoom del mapa\r\n };\r\n\r\n const map = new google.maps.Map(this.elementRef.nativeElement.querySelector('#map'), mapOptions);\r\n\r\n const origin = new google.maps.Marker({\r\n position: { lat: -34.397, lng: 150.644 }, // Coordenadas del origen\r\n map: map,\r\n title: 'Origen'\r\n });\r\n\r\n const destination = new google.maps.Marker({\r\n position: { lat: -33.867, lng: 151.206 }, // Coordenadas del destino\r\n map: map,\r\n title: 'Destino'\r\n });\r\n }\r\n ngOnInit(){\r\n // GOOGLE MAPS\r\n\r\n this.mapsAPILoader.load().then(() => {\r\n this.agmMapOptions = {\r\n // Configura aquĆ las opciones del mapa\r\n zoom: 7,\r\n center: {\r\n lat: 19.4326,\r\n lng: -99.1332\r\n },\r\n apiKey: // Asigna la apiKey al atributo apiKey del componente agm-map\r\n };\r\n });\r\n\r\n }*/\r\n\r\n ngAfterViewInit() {\r\n\r\n // GOOGLE MAPS\r\n /*this.loadGoogleMaps().then(() => {\r\n this.setOriginAndDestination(); // Configura el origen y el destino\r\n });*/\r\n // MAP BOX\r\n mapboxgl.accessToken = 'pk.eyJ1Ijoic2ViYXN0aWFuOTZqcCIsImEiOiJjbGl4bjhpaGEwODB5M2xsMndvOWhxeXZqIn0.Yt4_ynMIZUiiJF4TS3exVA';\r\n\r\n this.map = new mapboxgl.Map({\r\n container: 'mapPanelGPS',\r\n style: 'mapbox://styles/mapbox/streets-v11',\r\n center: this.origin,\r\n zoom: 7\r\n });\r\n\r\n this.directions = new MapboxDirections({\r\n accessToken: mapboxgl.accessToken,\r\n unit: 'metric',\r\n profile: 'mapbox/driving',\r\n interactive: false, // Deshabilitar la interacciĆ³n con el control de direcciones\r\n controls: {\r\n inputs: false, // Deshabilitar los campos de entrada de ubicaciones\r\n instructions: false // Deshabilitar las instrucciones paso a paso\r\n }\r\n });\r\n\r\n this.map.addControl(this.directions, 'top-left');\r\n/*\r\n map.on('idle', () => {\r\n const directions = new MapboxDirections({\r\n accessToken: mapboxgl.accessToken,\r\n unit: 'metric',\r\n profile: 'mapbox/driving',\r\n interactive: false, // Deshabilitar la interacciĆ³n con el control de direcciones\r\n controls: {\r\n inputs: false, // Deshabilitar los campos de entrada de ubicaciones\r\n instructions: false // Deshabilitar las instrucciones paso a paso\r\n }\r\n });\r\n\r\n this.map.addControl(this.directions, 'top-left');\r\n map.addControl(directions);\r\n\r\n directions.setOrigin(this.origin);\r\n directions.setDestination(this.destination);\r\n\r\n map.on('click', (event) => {\r\n if (this.selectedDirection) {\r\n // Obtener las coordenadas del clic\r\n const lngLat = event.lngLat;\r\n\r\n // Obtener la direcciĆ³n seleccionada\r\n const direction = this.selectedDirection;\r\n console.log(\"direction new\",direction);\r\n // Actualizar las direcciones de inicio y fin\r\n directions.setOrigin(direction.origin);\r\n directions.setDestination(direction.destination);\r\n // Mostrar la ruta en el mapa\r\n // directions.query();\r\n }\r\n });\r\n/*\r\n // Agregar el icono de auto en la ruta\r\n const carIcon = document.createElement('div');\r\n carIcon.className = 'car-icon'; // Estilos CSS para el icono de auto\r\n\r\n const carMarker = new mapboxgl.Marker(carIcon)\r\n .setLngLat(this.originGM) // Coordenadas del auto\r\n .addTo(map);\r\n\r\n // Actualizar la posiciĆ³n del auto mientras se mueve la ruta\r\n directions.on('route', (e) => {\r\n const route = e.route[0];\r\n const coordinates = route.geometry.coordinates;\r\n\r\n let currentIndex = 0;\r\n\r\n const animateCar = () => {\r\n if (currentIndex < coordinates.length) {\r\n const lngLat = coordinates[currentIndex];\r\n carMarker.setLngLat(lngLat);\r\n\r\n currentIndex++;\r\n\r\n requestAnimationFrame(animateCar);\r\n }\r\n };\r\n\r\n animateCar();\r\n });\r\n });*/\r\n\r\n /*\r\n this.map = new Map({\r\n accessToken: 'pk.eyJ1Ijoic2ViYXN0aWFuOTZqcCIsImEiOiJjbGl4bjhpaGEwODB5M2xsMndvOWhxeXZqIn0.Yt4_ynMIZUiiJF4TS3exVA',\r\n container: 'mapPanelGPS',\r\n style: 'mapbox://styles/mapbox/streets-v11',\r\n center: this.origin,\r\n zoom: 7\r\n });\r\n\r\n this.map.on('idle', () => {\r\n this.map.addSource('route', {\r\n type: 'geojson',\r\n data: {\r\n type: 'Feature',\r\n properties: {},\r\n geometry: {\r\n type: 'LineString',\r\n coordinates: [this.origin, this.destination] // coordenadas de origen y destino\r\n }\r\n }\r\n });\r\n\r\n this.map.addLayer({\r\n id: 'route',\r\n type: 'line',\r\n source: 'route',\r\n layout: {\r\n 'line-join': 'round',\r\n 'line-cap': 'round'\r\n },\r\n paint: {\r\n 'line-color': '#888',\r\n 'line-width': 8\r\n }\r\n });\r\n });\r\n*/\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n /*this.map = new Map({\r\n accessToken: 'pk.eyJ1Ijoic2ViYXN0aWFuOTZqcCIsImEiOiJjbGl4bjhpaGEwODB5M2xsMndvOWhxeXZqIn0.Yt4_ynMIZUiiJF4TS3exVA',\r\n container: 'map',\r\n style: 'mapbox://styles/mapbox/streets-v11',\r\n zoom: 7,\r\n center: origin\r\n });\r\n\r\n const geoJSON = {\r\n type: 'Feature',\r\n properties: {},\r\n geometry: {\r\n type: 'LineString',\r\n coordinates: [this.origin,this.destination]//this.coordinates\r\n }\r\n };\r\n\r\n this.map.on('load', () => {\r\n alert(\"dasdas\");\r\n this.map.addSource('route', {\r\n type: 'geojson',\r\n data: geoJSON\r\n });\r\n\r\n this.map.addLayer({\r\n id: 'route',\r\n type: 'line',\r\n source: 'route',\r\n layout: {\r\n 'line-join': 'round',\r\n 'line-cap': 'round'\r\n },\r\n paint: {\r\n 'line-color': '#FF0000',\r\n 'line-width': 2\r\n }\r\n });\r\n });*/\r\n }\r\n\r\n /*loadGoogleMaps(): Promise\r\n \r\n \r\n\r\n \r\n \r\n
\r\n\r\n \r\n
\r\nLista de GPS
\r\n\r\n
\r\n \r\n\r\n
\r\n {{item.name}}
\r\n {{item.name}}
\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n","import { HttpErrorResponse } from '@angular/common/http';\r\nimport { Component, OnInit, ViewChild } from '@angular/core';\r\nimport { MatDialog } from '@angular/material/dialog';\r\nimport { MatPaginator, PageEvent } from '@angular/material/paginator';\r\nimport { MatTableDataSource } from '@angular/material/table';\r\nimport { NgxSpinnerService } from 'ngx-spinner';\r\nimport { Subscription } from 'rxjs';\r\nimport { EnterpriseService } from 'src/app/services/enterprise/enterprise.service';\r\nimport { GatewayService } from 'src/app/services/gateway/gateway.service';\r\nimport { HeadquarterService } from 'src/app/services/headquarter/headquarter.service';\r\nimport { PanelIOTService } from 'src/app/services/panel-iot/panel-iot.service';\r\nimport { SensorService } from 'src/app/services/sensor/sensor.service';\r\nimport { ZoneService } from 'src/app/services/zone/zone.service';\r\nimport { PanelSensorModalComponent } from 'src/app/shared/components/modals/panel-sensor-modal/panel-sensor-modal.component';\r\nimport { SensorModalComponent } from 'src/app/shared/components/modals/sensor/sensor-modal.component';\r\nimport { AppConstants } from 'src/app/shared/constants/app.contants';\r\nimport { AlertService, MessageSeverity } from 'src/app/shared/services/alert.service';\r\nimport { EmitterService } from 'src/app/shared/services/emitter.service';\r\nimport { environment } from 'src/environments/environment';\r\nimport 'fabric';\r\nimport { MatSlideToggleChange } from '@angular/material/slide-toggle';\r\ndeclare const fabric: any;\r\nimport { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';\r\nimport { Router } from '@angular/router';\r\nimport { ActuatorDetailPanelModalComponent } from 'src/app/shared/components/modals/actuator-detail-panel-modal/actuator-detail-panel-modal.component';\r\nimport { ActuatorService } from 'src/app/services/actuator/actuator.service';\r\n\r\n@Component({\r\n selector: 'app-panel-iot',\r\n templateUrl: './panel-iot.component.html',\r\n styleUrls: ['./panel-iot.component.css']\r\n})\r\nexport class PanelIotComponent implements OnInit {\r\n loading: boolean = false;\r\n dataSource = new MatTableDataSource();\r\n displayedColumns: string[] = ['enterprise','headquarter','gateway','name','description','nomenclature','action'];\r\n @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;\r\n isAdminGys: boolean = false;\r\n countMaxUserByEnterprise: number = 0;\r\n enterprises = [];\r\n headquarters = [];\r\n gateways = [];\r\n subscription: Subscription;\r\n enterpriseSelect: number = 0;\r\n pageEvent: PageEvent;\r\n pageIndex: number = 0;\r\n pageSize: number = AppConstants.Paginado.DEFAULT_PAGE_SIZE_PAGINATION;\r\n length: number = 0;\r\n page: number = 1;\r\n headquarterSelect: number = 0;\r\n gatewaySelect: number = 0;\r\n zones = [];\r\n zoneSelect: number = 0;\r\n canvas: any;\r\n nameMarker: string = '';\r\n sensors = [];\r\n showSensorEdit = false;\r\n showGraphSensor = false;\r\n showSensorsGraphs = false;\r\n showSensorsTable:boolean = true;\r\n displayListStadistics = 'block';\r\n dataStreaming = [];\r\n colorToggle = \"\";\r\n initPage = false;\r\n private _hubConnection: HubConnection;\r\n color1: string;\r\n color2: string;\r\n colorFont: string;\r\n colorFont2: string;\r\n guardTotal: number = 0;\r\n guardTotalTQ: number = 0;\r\n contentTotal: number = 0;\r\n isGuardTotal = false;\r\n enabledRead: number;\r\n enabledWrite: number;\r\n editSetting = false;\r\n\r\n constructor(\r\n public dialog: MatDialog,\r\n private alertService: AlertService,\r\n private enterpriseService: EnterpriseService,\r\n private spinner: NgxSpinnerService,\r\n private router: Router,\r\n private actuatorService: ActuatorService,\r\n private headquarterService: HeadquarterService,\r\n private gatewayService: GatewayService,\r\n private panelIOTService: PanelIOTService,\r\n private zoneService: ZoneService\r\n ) {\r\n document.getElementById(\"titleHeaderNav\").innerHTML = 'IOT > Panel de Actuadores y Sensores';\r\n /*var _this = this;\r\n const connection = this._hubConnection = new HubConnectionBuilder()\r\n .withUrl(environment.signalR +\"/api\")\r\n .withAutomaticReconnect()\r\n .configureLogging(signalR.LogLevel.Information)\r\n .build();\r\n\r\n connection.on('eventHubIOT', (message) => {\r\n if(_this.showSensorsTable){\r\n var data = message.data;\r\n console.log(\"data eventHubIOT\",data);\r\n _this.dataStreaming = this.panelIOTService.getDataStreamingSensors();\r\n _this.dataStreaming.forEach(g => {\r\n if (data[g.nomenclature] != null) {\r\n g.value = data[g.nomenclature];\r\n }\r\n _this.panelIOTService.setDataStreamingSensors(_this.dataStreaming);\r\n _this.removeValueSensors();\r\n _this.createValueSensor();\r\n });\r\n }\r\n });\r\n\r\n connection.start()\r\n .catch(console.error);*/\r\n var _this = this;\r\n setInterval(()=>{\r\n console.log('update',_this.panelIOTService.getUpdatePanelIOT());\r\n if(_this.panelIOTService.getUpdatePanelIOT()){\r\n _this.dataStreaming = this.panelIOTService.getDataStreamingSensors();\r\n _this.dataStreaming.forEach(g => {\r\n //_this.panelIOTService.setDataStreamingSensors(_this.dataStreaming);\r\n _this.removeValueSensors();\r\n _this.getList();\r\n // _this.createValueSensor();\r\n _this.panelIOTService.setUpdatePanelIOT(0);\r\n });\r\n }\r\n },1000);\r\n }\r\n\r\n offEdit(){\r\n this.editSetting = this.editSetting == true ? false : true;\r\n if(this.editSetting){\r\n this.showGraph();\r\n }\r\n }\r\n\r\n setLS(){\r\n this.color1 = localStorage.getItem(AppConstants.Session.THEME_COLOR1);\r\n this.color2 = localStorage.getItem(AppConstants.Session.THEME_COLOR2);\r\n this.colorFont = localStorage.getItem(AppConstants.Session.THEME_COLOR_FONT);\r\n this.colorFont2 = localStorage.getItem(AppConstants.Session.THEME_COLOR_FONT2);\r\n //validate Permisses menu\r\n var menu = JSON.parse(localStorage.getItem(AppConstants.Session.MENU));\r\n var page = this.router.url.split(\"/\");\r\n var i = page[page.length-1];\r\n var itemTag = menu.filter(x => x.tag != null && (x.tag.toString()).toLowerCase().includes(i));\r\n if(itemTag.length>0){\r\n this.enabledRead = itemTag[0].activeRead;\r\n this.enabledWrite = itemTag[0].activeWrite;\r\n }else{\r\n this.enabledRead = 0;\r\n this.enabledWrite = 0;\r\n }\r\n }\r\n\r\n ngOnInit() {\r\n this.setLS();\r\n this.panelIOTService.setDataStreamingSensors([]);\r\n this.isAdminGys = (+localStorage.getItem(AppConstants.Session.ROLID) == AppConstants.UserRole.AdministradorGyS || +localStorage.getItem(AppConstants.Session.ROLID) == AppConstants.UserRole.UsuarioGyS) ? true : false;\r\n this.enterpriseSelect = (+localStorage.getItem(AppConstants.Session.ENTERPRISE));\r\n this.headquarterSelect = (+localStorage.getItem(AppConstants.Session.HEADQUARTER));\r\n this.getGuardTotalTQ();\r\n this.getZones();\r\n this.getCanvas();\r\n var _this = this;\r\n /*setInterval(function () {\r\n if(_this.showSensorsTable){\r\n _this.dataStreaming = _this.panelIOTService.getDataStreamingSensors();\r\n _this.removeValueSensors();\r\n _this.createValueSensor();\r\n }\r\n }, 1000);*/\r\n }\r\n\r\n setTheme(){\r\n this.color1 = localStorage.getItem(AppConstants.Session.THEME_COLOR1);\r\n this.color2 = localStorage.getItem(AppConstants.Session.THEME_COLOR2);\r\n this.colorFont = localStorage.getItem(AppConstants.Session.THEME_COLOR_FONT);\r\n this.colorFont2 = localStorage.getItem(AppConstants.Session.THEME_COLOR_FONT2);\r\n }\r\n\r\n getGuardTotalTQ(){\r\n this.actuatorService.getListAll(this.enterpriseSelect,this.headquarterSelect).subscribe((response) => {\r\n var actuators = response.data.filter(x => x.idActuatorType == 1);\r\n var totalguards = 0;\r\n actuators.forEach(x => {\r\n totalguards = totalguards + x.minCapacity;\r\n });\r\n this.guardTotalTQ = totalguards;\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n showTable(event: MatSlideToggleChange){\r\n this.initPage = true;\r\n this.showSensorsTable = event.checked;\r\n event.checked = this.showSensorsTable ? false : true;\r\n if(!event.checked){\r\n this.createValueSensor();\r\n }else{\r\n this.removeValueSensors();\r\n }\r\n }\r\n\r\n showView(event: MatSlideToggleChange){\r\n this.initPage = true;\r\n if(event.checked){\r\n this.displayListStadistics = 'none';\r\n }else{\r\n this.displayListStadistics = 'block';\r\n }\r\n }\r\n\r\n getCanvas() {\r\n this.canvas = new fabric.Canvas('canvas',{\r\n selection: true,\r\n allowTouchScrolling: true,\r\n enableRetinaScaling: true\r\n });\r\n }\r\n\r\n changeEnterprise(data) {\r\n this.countMaxUserByEnterprise = this.enterprises.find(f => f.enterpriseId == data.value).maximumUsers;\r\n this.enterpriseSelect = data.value;\r\n this.gatewaySelect = 0;\r\n this.headquarterSelect = 0;\r\n this.headquarters = [];\r\n this.gateways = [];\r\n this.getHeadquarters();\r\n }\r\n\r\n getEnterprises() {\r\n if (this.isAdminGys) {\r\n this.spinner.show();\r\n this.enterpriseService.getEnterprises().subscribe((response) => {\r\n this.enterprises = response.filter(f => f.enabled == AppConstants.Flag.Active);\r\n this.enterpriseSelect = this.enterprises[0][\"enterpriseId\"];\r\n this.spinner.hide();\r\n this.getHeadquarters();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n } else {\r\n this.enterpriseSelect = +localStorage.getItem(AppConstants.Session.ENTERPRISE)\r\n this.getEnterpriseById(this.enterpriseSelect);\r\n this.getList();\r\n }\r\n }\r\n\r\n getHeadquarters(){\r\n if (this.isAdminGys) {\r\n this.spinner.show();\r\n this.headquarterService.getListAll().subscribe((response) => {\r\n if(response.error == null){\r\n this.headquarters = response.data.filter(f => f.idEnterprise == this.enterpriseSelect);\r\n if(this.headquarters.length > 0){\r\n this.headquarterSelect = this.headquarters[0].id;\r\n }\r\n this.spinner.hide();\r\n this.getZones();\r\n this.getGateways();\r\n }else{\r\n this.headquarters = [];\r\n this.gateways = [];\r\n this.spinner.hide();\r\n }\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.headquarters = [];\r\n this.gateways = [];\r\n this.spinner.hide();\r\n });\r\n } else {\r\n this.headquarterSelect = +localStorage.getItem(AppConstants.Session.HEADQUARTER);\r\n }\r\n }\r\n\r\n getGateways(){\r\n this.gatewayService.getListAll().subscribe((response) => {\r\n if(response.error == null){\r\n if(this.headquarterSelect == 0){\r\n var gateways = response.data.filter(x => x.idEnterprise == this.enterpriseSelect);\r\n this.gateways = gateways;\r\n }else{\r\n var gateways = response.data.filter(x => x.idEnterprise == this.enterpriseSelect && x.idHeadquarter == this.headquarterSelect);\r\n this.gateways = gateways;\r\n }\r\n if(this.gateways.length > 0){\r\n this.isGuardTotal = this.gateways[0].isGuardTotal == 1 ? true : false;\r\n this.gatewaySelect = this.gateways[0].id;\r\n this.guardTotal = gateways[0].guardTotal;\r\n }\r\n }else{\r\n this.gateways = [];\r\n }\r\n this.getList();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.gateways = [];\r\n });\r\n }\r\n\r\n showGuardTank(){\r\n let dialogRef = this.dialog.open(ActuatorDetailPanelModalComponent, {\r\n data: {\r\n title: AppConstants.TitleModal.LIST_ACTUATOR_PANEL_IOT,\r\n action: AppConstants.OperationType.UPDATE,\r\n headquarters: this.headquarters,\r\n idEnterprise: this.enterpriseSelect,\r\n idHeadquarter: this.headquarterSelect,\r\n idGateway: this.gatewaySelect,\r\n enabledWrite: this.enabledWrite,\r\n enabledRead: this.enabledRead,\r\n color: this.color1,\r\n colorFont: this.color2,\r\n obj:null},\r\n width: '500px',\r\n hasBackdrop: true\r\n });\r\n dialogRef.afterClosed().subscribe(_ => {\r\n if (_.result == true) {\r\n this.guardTotalTQ = _.totalguard;\r\n }\r\n });\r\n }\r\n\r\n getZones(){\r\n this.zoneService.getListAll(this.enterpriseSelect,this.headquarterSelect).subscribe((response) => {\r\n if(response.error == null){\r\n this.zones = response.data.filter(x => x.type == 2);\r\n if(this.zones.length>0){\r\n this.zoneSelect = this.zones[0].id;\r\n var image = this.zones[0].image;\r\n if(this.zones[0].idStorageFile == 1){ // Mode Local\r\n image = environment.pathFile + image;\r\n }\r\n this.changeImage(image);\r\n this.headquarterSelect = this.zones[0].idHeadquarter;\r\n this.getGateways();\r\n } else {\r\n this.alertService.showMessage(\"No tiene zonas IOT registradas, debes de crear una zona para usar este mĆ³dulo\", \"\", MessageSeverity.error);\r\n this.changeImage('./assets/images/sin_image.jpg');\r\n }\r\n }\r\n });\r\n }\r\n\r\n\r\n getEnterpriseById(enterpriseId: number) {\r\n this.spinner.show();\r\n this.enterpriseService.getEnterpriseById(enterpriseId).subscribe((response => {\r\n this.countMaxUserByEnterprise = response.maximumUsers;\r\n this.spinner.hide();\r\n }),\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n getList(){\r\n this.spinner.show();\r\n if(this.zoneSelect && this.gatewaySelect){\r\n var objects = this.canvas.getObjects();\r\n for(var i = 0; i < objects.length; i++){\r\n this.canvas.remove(objects[i]);\r\n }\r\n this.canvas.renderAll();\r\n var filter = {\r\n idEnterprise: this.enterpriseSelect,\r\n idHeadquarter: this.headquarterSelect,\r\n idZone: this.zoneSelect,\r\n idGateway: this.gatewaySelect\r\n }\r\n var contentTotal = 0;\r\n this.panelIOTService.getList(filter).subscribe((_) => {\r\n if(_.error == null){\r\n this.sensors = _.data;\r\n this.dataStreaming = _.data;\r\n this.panelIOTService.setDataStreamingSensors(this.sensors);\r\n this.showSensorsGraphs = true;\r\n this.createMarkers();\r\n this.createValueSensor();\r\n var _this = this;\r\n _.data.forEach(x =>{\r\n if(x.idActuatorType == 1){ //TANQUE\r\n contentTotal += parseFloat(x.value);\r\n }\r\n });\r\n _this.contentTotal = contentTotal;\r\n }\r\n this.spinner.hide();\r\n });\r\n }\r\n this.spinner.hide();\r\n }\r\n\r\n createMarkers() {\r\n for (var i = 0; i < this.sensors.length; i++) {\r\n var obj = this.sensors[i];\r\n this.newGroup(obj);\r\n }\r\n }\r\n\r\n createValueSensor() {\r\n console.log(\"crear valores streaming\",this.dataStreaming.length);\r\n for (var i = 0; i < this.dataStreaming.length; i++) {\r\n var obj = this.dataStreaming[i];\r\n if(obj.idActuatorType != 2){ // no valvulas\r\n this.newValue(obj);\r\n }\r\n }\r\n }\r\n\r\n removeValueSensors(){\r\n var objects = this.canvas.getObjects();\r\n for (var i = 0; i < this.dataStreaming.length; i++) {\r\n var obj = this.dataStreaming[i];\r\n for(var ii = 0; ii < objects.length; ii++){\r\n if(obj.id +\"_value\" == objects[ii].id){\r\n this.canvas.remove(objects[ii]);\r\n }\r\n }\r\n }\r\n this.canvas.renderAll();\r\n }\r\n\r\n newValue(obj) {\r\n if(obj.value == null || obj.value == undefined){ obj.value = 0; }\r\n //actuator\r\n if(obj.isActuator){\r\n var salveGuarda = \"\";\r\n if(!this.isGuardTotal){\r\n salveGuarda = \"\\n S:\" + obj.minCapacity+ \" TN\";\r\n }\r\n var text = new fabric.Text( \"V:\"+ obj.value.toString() + \"TN (\" + ((((parseFloat(obj.value.toString())/100) / (parseFloat(obj.maxCapacity)/100)))*100).toFixed(2) +\"%) \\n CM:\" + obj.maxCapacity + \" TN\"+salveGuarda,\r\n {\r\n selection: false,\r\n selectable: false,\r\n textBorderColor: this.color1,\r\n textShadow: this.color1,\r\n backgroundColor: 'transparent',\r\n fontSize: 12,\r\n fontWeight: 'bold',\r\n textBackgroundColor:'transparent',\r\n fill: this.color1,\r\n //fontSize: 20,\r\n strokeWidth: 0,\r\n selectionRadius: 20,\r\n originX: 'center',\r\n originY: 'center'\r\n }\r\n );\r\n\r\n var textBoundingRect = text.getBoundingRect();\r\n var background = new fabric.Rect({\r\n top: textBoundingRect.top,\r\n left: textBoundingRect.left,\r\n width: textBoundingRect.width,\r\n height: textBoundingRect.height,\r\n fill: 'transparent',//'#00000033',\r\n rx: 5,\r\n ry: 5,\r\n objectCaching: false,\r\n });\r\n var group = new fabric.Group([background,text], {\r\n left: parseFloat(obj.posX)-100,\r\n top: parseFloat(obj.posY)+20,\r\n borderColor: this.color1,\r\n strokeWidth: 0,\r\n selectionRadius: 20,\r\n rx: 5,\r\n ry: 5,\r\n hasControls: false,\r\n hasRotatingPoint: false,\r\n id: obj.id+\"_value\",\r\n selectable: false,\r\n selection: false,\r\n isGraph: 0,\r\n fill:'red'\r\n });\r\n this.canvas.add(group);\r\n\r\n\r\n /* densidad */\r\n\r\n var imgDensity = \"../../../../../assets/actuator/density/aceite.png\";\r\n var _this= this;\r\n if(obj.density != obj.contentDensity){ imgDensity = \"../../../../../assets/actuator/density/agua.png\";}\r\n new fabric.Image.fromURL(imgDensity,\r\n function(img) {\r\n var img1 = img.set({\r\n originX: 'center',\r\n originY: 'bottom',\r\n top: -10,\r\n scaleX: 0.5,\r\n scaleY: 0.5\r\n });\r\n var group = new fabric.Group([img1], {\r\n left: parseFloat(obj.posX)-80,\r\n top: parseFloat(obj.posY)+80,\r\n borderColor: 'transparent',\r\n strokeWidth: 0,\r\n selectionRadius: 20,\r\n rx: 5,\r\n ry: 5,\r\n hasControls: false,\r\n hasRotatingPoint: false,\r\n id: obj.id+\"_value\",\r\n selectable: false,\r\n selection: false,\r\n isGraph: 0\r\n });\r\n _this.canvas.add(group);\r\n });\r\n /* var colorDensity = \"rgb(252, 235, 0)\";\r\n if(obj.density != obj.contentDensity){ colorDensity = \"blue\";}\r\n var density = new fabric.Circle({\r\n radius: 5,\r\n fill: colorDensity,\r\n stroke: colorDensity,\r\n strokeWidth: 5\r\n }); \r\n var group2 = new fabric.Group([density], {\r\n \r\n });\r\n this.canvas.add(group2);*/\r\n }else{//sensor\r\n var _this = this;\r\n var text = new fabric.Text(obj.nomenclature, {\r\n textBorderColor: this.color1,\r\n textShadow: this.color1,\r\n backgroundColor: 'transparent',\r\n fontSize: 15,\r\n fontWeight: 'bold',\r\n textBackgroundColor:'transparent',\r\n fill: this.color1,\r\n originX: 'center', \r\n originY: 'center',});\r\n var textBoundingRect = text.getBoundingRect();\r\n var background = new fabric.Rect({\r\n top: textBoundingRect.top,\r\n left: textBoundingRect.left,\r\n width: textBoundingRect.width,\r\n height: textBoundingRect.height,\r\n fill: '#00000033',\r\n rx: 5,\r\n ry: 5,\r\n objectCaching: false,\r\n });\r\n\r\n new fabric.Image.fromURL(obj.pin,\r\n function(img) {\r\n var img1 = img.set({\r\n originX: 'center',\r\n originY: 'bottom',\r\n top: -10,\r\n scaleX: 0.15,\r\n scaleY: 0.15\r\n });\r\n var group = new fabric.Group([text,background, img1], {\r\n /* left: obj.posX,\r\n top: obj.posY,\r\n borderColor: 'transparent',\r\n hasControls: false,\r\n hasRotatingPoint: false,\r\n id: obj.id,\r\n isGraph: 0*/\r\n left: parseFloat(obj.posX)+10,\r\n top: parseFloat(obj.posY)+20,\r\n borderColor: 'transparent',\r\n strokeWidth: 0,\r\n selectionRadius: 20,\r\n rx: 5,\r\n ry: 5,\r\n hasControls: false,\r\n hasRotatingPoint: false,\r\n id: obj.id+\"_value\",\r\n selectable: false,\r\n selection: false,\r\n isGraph: 0\r\n });\r\n _this.canvas.add(group);\r\n });\r\n /*\r\n var group = new fabric.Group([background,text], {\r\n \r\n });\r\n this.canvas.add(group);*/\r\n\r\n var text2 = new fabric.Text(obj.value.toString(),\r\n {\r\n backgroundColor: 'transparent',\r\n selection: false,\r\n selectable: false,\r\n textBorderColor: this.color1,\r\n textShadow: this.color1,\r\n textBackgroundColor:'transparent',\r\n fill: this.color1,\r\n fontSize: 20,\r\n strokeWidth: 0,\r\n selectionRadius: 20,\r\n originX: 'center',\r\n originY: 'center'\r\n }\r\n );\r\n var group2 = new fabric.Group([text2], {\r\n left: parseFloat(obj.posX)+20,\r\n top: parseFloat(obj.posY)-8,\r\n borderColor: 'transparent',\r\n strokeWidth: 0,\r\n selectionRadius: 20,\r\n rx: 5,\r\n ry: 5,\r\n hasControls: false,\r\n hasRotatingPoint: false,\r\n id: obj.id+\"_value\",\r\n selectable: false,\r\n selection: false,\r\n isGraph: 0\r\n });\r\n this.canvas.add(group2);\r\n }\r\n\r\n }\r\n\r\n newGroup(obj) {\r\n // text = new fabric.Text(obj.nomenclature, {selection: false,selectable: false,textBackgroundColor:obj.stateColor,fill: 'white', fontSize: 15, originX: 'center', originY: 'center'});\r\n\r\n var _this = this;\r\n if(obj.isActuator){\r\n var color = \"\";\r\n if(obj.state == 0){\r\n color = \"green\";\r\n }else if(obj.state == 1){\r\n color = \"gray\";\r\n }else if(obj.state == 2){\r\n color = \"red\";\r\n }\r\n var text = new fabric.Text(obj.nomenclature, {\r\n \r\n textBorderColor: color,\r\n textShadow: color,\r\n backgroundColor: 'transparent',\r\n fontSize: 15,\r\n fontWeight: 'bold',\r\n textBackgroundColor:'transparent',\r\n fill: color,\r\n originX: 'center', \r\n originY: 'center'});\r\n var img = \"\";\r\n\r\n \r\n /* if(obj.value != \"\" && obj.value != null && obj.imageActuator2 != \"\" && obj.imageActuator2 != null){\r\n if(obj.value == \"1\"){\r\n img = obj.imageActuator2;\r\n }\r\n }*/\r\n var scale = 0.7;\r\n if(obj.idActuatorType == 1){ // tanques\r\n var porc = Math.round((obj.value*100)/obj.maxCapacity);\r\n if(porc <= 0){\r\n img = \"../../../../../assets/actuator/tanque/tq_0.png\";\r\n }else if(porc <= 25 && porc > 0){\r\n img = \"../../../../../assets/actuator/tanque/tq_1.png\";\r\n }else if(porc <= 50 && porc > 25){\r\n img = \"../../../../../assets/actuator/tanque/tq_2.png\";\r\n }else if(porc <= 75 && porc > 50){\r\n img = \"../../../../../assets/actuator/tanque/tq_3.png\";\r\n }else if(porc <= 99 && porc > 75){\r\n img = \"../../../../../assets/actuator/tanque/tq_4.png\";\r\n }else if(porc >= 100){\r\n img = \"../../../../../assets/actuator/tanque/tq_5.png\";\r\n }\r\n }else if(obj.idActuatorType == 2){//valvula\r\n scale = 0.5;\r\n img = \"../../../../../assets/actuator/valvula/\"+obj.state+\".png\";\r\n }\r\n\r\n var opacity = 1;\r\n /* if(obj.state == 4){\r\n opacity = 0.3;\r\n }*/\r\n\r\n new fabric.Image.fromURL(img,\r\n function(img) {\r\n var img1 = img.set({\r\n originX: 'center',\r\n originY: 'bottom',\r\n top: -10,\r\n scaleX: scale,\r\n scaleY: scale\r\n });\r\n var group = new fabric.Group([text, img1], {\r\n left: obj.posX,\r\n top: obj.posY,\r\n borderColor: 'transparent',\r\n hasControls: false,\r\n hasRotatingPoint: false,\r\n selectable: false,\r\n selection: false,\r\n opacity: opacity,\r\n id: obj.id,\r\n isGraph: 0\r\n });\r\n _this.canvas.add(group);\r\n _this.nameMarker = '';\r\n });\r\n }else{\r\n var _this = this;\r\n /* var text = new fabric.Text(obj.nomenclature, {textBackgroundColor:obj.stateColor,fill: 'white', fontSize: 15, originX: 'center', originY: 'center'});\r\n \r\n var group = new fabric.Group([text], {\r\n left: obj.posX,\r\n top: obj.posY,\r\n borderColor: 'transparent',\r\n hasControls: false,\r\n hasRotatingPoint: false,\r\n id: obj.id,\r\n isGraph: 0\r\n });\r\n this.canvas.add(group);*/\r\n }\r\n /*\r\n var group = new fabric.Group([text], {\r\n left: obj.posX,\r\n top: obj.posY,\r\n borderColor: 'transparent',\r\n hasControls: false,\r\n hasRotatingPoint: false,\r\n id: obj.id,\r\n selectable: false,\r\n selection: false,\r\n isGraph: 0\r\n });\r\n this.canvas.add(group);*/\r\n }\r\n\r\n\r\n newGraphSensor(obj) {\r\n var text = new fabric.Text(obj.nomenclature, {textBackgroundColor:'#1f5165',fill: 'white', fontSize: 15, originX: 'center', originY: 'center'});\r\n var group = new fabric.Group([text], {\r\n left: obj.posX,\r\n top: obj.posY + 50,\r\n borderColor: 'transparent',\r\n hasControls: false,\r\n hasRotatingPoint: false,\r\n id: obj.id\r\n });\r\n this.canvas.add(group);\r\n}\r\n\r\n openEditModal(data){\r\n let dialogRef = this.dialog.open(SensorModalComponent, {\r\n data: {\r\n title: AppConstants.TitleModal.UPDATE_SENSOR,\r\n action: 0,\r\n gateways: this.gateways,\r\n headquarters: this.headquarters,\r\n idEnterprise: this.enterpriseSelect,\r\n idHeadquarter: this.headquarterSelect,\r\n idGateway: this.gatewaySelect,\r\n isAdminGys: this.isAdminGys,\r\n obj:data},\r\n width: '500px',\r\n hasBackdrop: true\r\n });\r\n dialogRef.afterClosed().subscribe(_ => {\r\n this.getList();\r\n });\r\n }\r\n\r\n changeHeadquarter(data) {\r\n this.headquarterSelect = data.value;\r\n this.getGateways();\r\n this.getZones();\r\n }\r\n\r\n changeGateway(data) {\r\n this.gatewaySelect = data.value;\r\n this.getList();\r\n }\r\n\r\n changeZone(data) {\r\n this.zoneSelect = data.value;\r\n var zone = this.zones.filter(x => x.id == this.zoneSelect);\r\n if(zone.length>0)\r\n {\r\n this.headquarterSelect = zone[0].idHeadquarter;\r\n this.getGateways();\r\n\r\n var image = zone[0].image;\r\n if(image){\r\n if(zone[0].idStorageFile == 1){ // Mode Local\r\n image = environment.pathFile + image;\r\n }\r\n this.changeImage(image);\r\n }else {\r\n this.changeImage('./assets/images/sin_image.jpg');\r\n }\r\n }else {\r\n this.changeImage('./assets/images/sin_image.jpg');\r\n }\r\n\r\n this.getList();\r\n }\r\n\r\n changeImage(urlImage : string) {\r\n fabric.Image.fromURL(urlImage, (img) => {\r\n img.set({\r\n opacity: 0.5,\r\n scaleX: this.canvas.width / img.width,\r\n scaleY: this.canvas.height / img.height,\r\n });\r\n this.canvas.setBackgroundImage(img, this.canvas.requestRenderAll.bind(this.canvas));\r\n });\r\n }\r\n\r\n openModal(id){\r\n document.getElementById('actuactorPanel'+id).style.display=\"initial\";\r\n }\r\n\r\n\r\n showGraph(){\r\n var _this = this;\r\n this.canvas.on(\"mouse:up\", function(e) {\r\n if(!_this.showGraphSensor && e.target != undefined && e.target != null){\r\n _this.showGraphSensor = true;\r\n _this.showSensorEdit = true;\r\n var dataS = null;\r\n _this.sensors.forEach(g => {\r\n if ((g.id == e.target.id || g.id + \"_value\" == e.target.id) && g.state == 0) {\r\n dataS = g;\r\n _this.openModal(g.id);\r\n }\r\n });\r\n _this.showGraphSensor = false;\r\n _this.showSensorEdit = false;\r\n }\r\n });\r\n }\r\n\r\n save(){\r\n var data = {\r\n isGuardTotal: this.isGuardTotal == true ? 1:0,\r\n guardTotal: this.guardTotal,\r\n idGateway: this.gatewaySelect,\r\n idUser: +localStorage.getItem(AppConstants.Session.USERID)\r\n }\r\n this.gatewayService.updateSettingGateway(data).subscribe((response) => {\r\n if(response.message == \"\" || !response.message){\r\n this.alertService.showMessage(\"Se actualizo el total guarda correctamente\", \"\", MessageSeverity.success);\r\n this.getList();\r\n }else{\r\n this.alertService.showMessage(\"OcurriĆ³ un problema al actualizar el guarda\", \"\", MessageSeverity.error);\r\n }\r\n });\r\n }\r\n\r\n isGuardTotalSwitch(event: MatSlideToggleChange){\r\n if(event.checked){\r\n this.isGuardTotal = true;\r\n }else{\r\n this.isGuardTotal = false;\r\n }\r\n }\r\n}\r\n","\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Zonas \r\n \r\n \r\n {{zone.name}}\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Gateway \r\n \r\n \r\n {{gateway.name}}\r\n \r\n \r\n \r\n
\r\n \r\n Mostrar Valores \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n Vista GrƔfica\r\n \r\n Vista Tabla\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {{guardTotal}}
\r\n{{guardTotalTQ}}
\r\n\r\n \r\n
\r\n \r\n {{guardTotalTQ}}\r\n
\r\n \r\n \r\n
\r\n {{contentTotal}}
\r\n\r\n Warrant x Tanque \r\n \r\n \r\n Total Warrant\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n Densidad\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n ![](\"../../../../../assets/actuator/density/aceite.png\")
\r\n Aceite
\r\n
\r\n \r\n ![](\"../../../../../assets/actuator/density/agua.png\")
\r\n Mezcla
\r\n Estado\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n Conectado
Desconectado
Error conexiĆ³n
\r\n \r\n \r\n
\r\n
\r\n | Item | \r\nEstado | \r\nValor | \r\n
|---|---|---|
| {{item.nomenclature}} | \r\n{{item.stateSensor}} | \r\n{{item.value}} | \r\n
\n \n \n \n \n \n \n \n
\n \n \n
\n ","import { DatePipe } from '@angular/common';\nimport { HttpErrorResponse } from '@angular/common/http';\nimport { Component, ElementRef, OnInit, ViewChild } from '@angular/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\nimport { IDropdownSettings } from 'ng-multiselect-dropdown';\nimport { MatDialog } from '@angular/material/dialog';\nimport { MessageSeverity, AlertService } from 'src/app/shared/services/alert.service';\nimport { AppConstants } from 'src/app/shared/constants/app.contants';\nimport { MatPaginator, PageEvent } from '@angular/material/paginator';\nimport { PanelIOTService } from 'src/app/services/panel-iot/panel-iot.service';\nimport { HeadquarterService } from 'src/app/services/headquarter/headquarter.service';\nimport { NgxSpinnerService } from 'ngx-spinner';\nimport { EnterpriseService } from 'src/app/services/enterprise/enterprise.service';\nimport { GatewayService } from 'src/app/services/gateway/gateway.service';\nimport { MatTableDataSource } from '@angular/material/table';\nimport { ZoneService } from 'src/app/services/zone/zone.service';\nimport {DateAdapter, MAT_DATE_FORMATS} from '@angular/material';\nimport { APP_DATE_FORMATS, AppDateAdapter } from 'src/app/shared/helpers/format-datepicker';\n@Component({\n selector: 'app-report-activity-actuator',\n templateUrl: './report-activity-actuator.component.html',\n styleUrls: ['./report-activity-actuator.component.css'],\n providers: [\n {provide: DateAdapter, useClass: AppDateAdapter},\n {provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS}\n ]\n})\nexport class ReportActivityActuatorComponent implements OnInit {\n\n cameraSelect: number;\n cameraAlertType = [];\n reportForm: FormGroup;\n myDate = new Date();\n alertSelect: number = 0;\n date = new Date();\n dateF = new Date();\n timeI: string;\n timeF: string;\n dateV:string;\n isAdministrator=false;\n dateIView:string;\n dateFView:string;\n\n dropdownList = [];\n selectedItems = [];\n dropdownSettings:IDropdownSettings;\n chartItem:any;\n\n labelsChart = [];\n dataChart:any;\n isAdminGys: boolean = false;\n enterprises = [];\n headquarters = [];\n gateways = [];\n enterpriseSelect: number = 0;\n pageEvent: PageEvent;\n pageIndex: number = 0;\n pageSize: number = AppConstants.Paginado.DEFAULT_PAGE_SIZE_PAGINATION;\n length: number = 0;\n page: number = 1;\n headquarterSelect: number = 0;\n gatewaySelect: number = 0;\n zones = [];\n zoneSelect: number = 0;\n sensors = [];\n\n dataSource = new MatTableDataSource();\n displayedColumns: string[] = ['index','headquarter', 'zone','actuator', 'value','createdAt', 'createdBy', 'startDate', 'finishDate', 'state'];\n @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;\n @ViewChild('paginatorTop', { static: false }) paginatorTop: MatPaginator;\n @ViewChild('paginatorBottom', { static: false }) paginatorBottom: MatPaginator;\n color1: string;\n color2: string;\n colorFont: string;\n colorFont2: string;\n\n constructor(\n private datePipe: DatePipe,\n public dialog: MatDialog,\n private AlertService: AlertService,\n private formBuilder: FormBuilder,\n private panelIOTService: PanelIOTService,\n private headquarterService: HeadquarterService,\n private spinner: NgxSpinnerService,\n private enterpriseService: EnterpriseService,\n private gatewayService: GatewayService,\n private zoneService: ZoneService\n ) {\n document.getElementById(\"titleHeaderNav\").innerHTML = 'IOT > Reporte de Actividades';\n this.dropdownSettings = {\n singleSelection: false,\n idField: 'id',\n textField: 'nomenclature',\n tooltipField: 'Sensor',\n selectAllText: 'Todos',\n unSelectAllText: 'Limpiar',\n searchPlaceholderText: 'Buscar',\n noFilteredDataAvailablePlaceholderText: 'Item no encontrado',\n itemsShowLimit: 6,\n allowSearchFilter: false, //input search\n };\n }\n\n ngOnInit(): void {\n this.setTheme();\n this.isAdminGys = (+localStorage.getItem(AppConstants.Session.ROLID) == AppConstants.UserRole.AdministradorGyS || +localStorage.getItem(AppConstants.Session.ROLID) == AppConstants.UserRole.UsuarioGyS) ? true : false;\n this.createForm();\n this.enterpriseSelect = (+localStorage.getItem(AppConstants.Session.ENTERPRISE));\n this.headquarterSelect = (+localStorage.getItem(AppConstants.Session.HEADQUARTER));\n this.getZonesList()\n this.timeI = this.datePipe.transform(\"Tue Aug 18 2020 00:00:58 GMT-0500\", 'HH:mm');\n this.timeF = this.datePipe.transform(\"Tue Aug 18 2020 23:59:58 GMT-0500\", 'HH:mm');\n this.dateV = this.datePipe.transform(this.myDate, 'yyyy-MM-dd');\n this.dataSource.paginator = this.paginator;\n }\n\n setTheme(){\n this.color1 = localStorage.getItem(AppConstants.Session.THEME_COLOR1);\n this.color2 = localStorage.getItem(AppConstants.Session.THEME_COLOR2);\n this.colorFont = localStorage.getItem(AppConstants.Session.THEME_COLOR_FONT);\n this.colorFont2 = localStorage.getItem(AppConstants.Session.THEME_COLOR_FONT2);\n }\n\n ngAfterContentChecked(): void {\n if (this.paginatorTop) {\n this.paginatorBottom.length = this.paginatorTop.length;\n }\n}\n\nhandlePaginatorTop(e): void {\n const { pageSize, pageIndex } = e;\n this.paginatorTop.pageSize = pageSize\n this.paginatorTop.pageIndex = pageIndex;\n this.paginatorTop.page.emit(e);\n}\n\nhandlePaginatorBottom(e): void {\n const { pageSize, pageIndex } = e;\n this.paginatorBottom.pageSize = pageSize\n this.paginatorBottom.length = this.paginatorTop.length;\n this.paginatorBottom.pageIndex = pageIndex;\n }\n\n createForm(){\n this.reportForm = this.formBuilder.group({\n startDateReport: ['', [Validators.required]],\n endDateReport: ['', [Validators.required]],\n startTimeReport: ['', [Validators.required, Validators.pattern(\"^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$\")]],\n endTimeReport: ['', [Validators.required, Validators.pattern(\"^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$\")]],\n idEnterprise: ['', [Validators.required]],\n idHeadquarter: ['', [Validators.required]],\n idGateway: ['', [Validators.required]],\n idZone: ['', [Validators.required]],\n idSensors: ['']\n });\n }\n\n getEnterprises() {\n this.spinner.show();\n if (this.isAdminGys) {\n this.enterpriseService.getEnterprises().subscribe((response) => {\n this.enterprises = response.filter(f => f.enabled == AppConstants.Flag.Active);\n this.enterpriseSelect = this.enterprises[0][\"enterpriseId\"];\n this.getHeadquarters();\n },\n (error: HttpErrorResponse) => {\n this.spinner.hide();\n });\n } else {\n this.enterpriseSelect = +localStorage.getItem(AppConstants.Session.ENTERPRISE);\n this.getHeadquarters();\n }\n }\n\n _keyUp(event: any) {\n let charCode = (event.which) ? event.which : event.keyCode;\n console.log(event.keyCode)\n if (charCode != 46 && charCode != 58 && charCode > 31\n && (charCode < 48 || charCode > 57)) {\n return false;\n }\n }\n\n\n get f() { return this.reportForm.controls; }\n onItemSelect(item: any) {\n console.log(item);\n }\n onSelectAll(items: any) {\n console.log(items);\n }\n\n closeModal(){\n this.dialog.closeAll();\n }\n\n search(){\n var idSensors = [];\n this.selectedItems.forEach(x => {\n idSensors.push(x.id);\n });\n\n if(idSensors.length == 0){\n this.AlertService.showMessage(\n AppConstants.MessageModal.FILTER_SENSOR_VALIDATE,\"\",\n MessageSeverity.error);\n return false;\n }\n\n if(this.date > this.dateF){\n this.AlertService.showMessage(\n AppConstants.MessageModal.FILTER_DATES_VALIDATE,\"\",\n MessageSeverity.error);\n return false\n }\n\n var filter = {\n dateI: this.reportForm.value[\"startDateReport\"],\n dateF: this.reportForm.value[\"endDateReport\"],\n timeI: this.timeI,\n timeF: this.timeF,\n idEnterprise: this.enterpriseSelect,\n idHeadquarter: this.headquarterSelect,\n idGateway: this.gatewaySelect,\n idZone: this.zoneSelect,\n idSensors: idSensors\n };\n filter.dateI = this.datePipe.transform(filter.dateI, 'yyyy-MM-dd');\n filter.dateF = this.datePipe.transform(filter.dateF, 'yyyy-MM-dd');\n this.spinner.show();\n this.panelIOTService.reportActivity(filter).subscribe(\n result => {\n if(result.error == null){\n this.dataSource.data = result.data;\n if(result.data.length == 0){\n this.AlertService.showMessage(\"No tiene registros\", \"\", MessageSeverity.error);\n }\n }\n this.spinner.hide();\n },\n (error: HttpErrorResponse) => {\n this.AlertService.showMessage(AppConstants.TitleModal.ERROR_TITLE, error.error.messages, MessageSeverity.error);\n });\n }\n\n changeEnterprise(data) {\n this.enterpriseSelect = data.value;\n this.getHeadquarters();\n }\n\n getHeadquarters() {\n if (this.isAdminGys) {\n this.spinner.show();\n this.headquarterService.getListAll().subscribe((response) => {\n if(response.error == null){\n this.headquarters = response.data.filter(f => f.idEnterprise == this.enterpriseSelect);\n if(this.headquarters.length == 1){\n this.headquarterSelect = this.headquarters[0][\"id\"];\n }else{\n this.headquarterSelect = 0;\n }\n this.getZonesList()\n }else{\n this.headquarters = [];\n }\n this.spinner.hide();\n },\n (error: HttpErrorResponse) => {\n this.headquarters = [];\n this.spinner.hide();\n });\n } else {\n this.headquarterSelect = +localStorage.getItem(AppConstants.Session.HEADQUARTER)\n // this.getList(1);\n }\n }\n\n getGateways(){\n this.gatewayService.getListAll().subscribe((_) => {\n if(_.error == null){\n if(this.headquarterSelect == 0){\n this.gateways = _.data.filter(x => x.idEnterprise == this.enterpriseSelect);\n }else{\n this.gateways = _.data.filter(x => x.idEnterprise == this.enterpriseSelect && x.idHeadquarter == this.headquarterSelect);\n }\n\n if(this.gateways.length == 1){\n this.gatewaySelect = this.gateways[0][\"id\"];\n }else{\n this.gatewaySelect = 0;\n }\n }\n this.getSensors();\n });\n }\n\n getZonesList() {\n this.zoneService.getListAll(this.enterpriseSelect,this.headquarterSelect).subscribe((response) => {\n if(response.error == null){\n this.zones = response.data.filter(x => x.type == 2);\n if(this.zones.length == 1){\n this.zoneSelect = this.zones[0][\"id\"];\n }else if(this.zones.length>1){\n this.zoneSelect = 0;\n }else{\n this.AlertService.showMessage(\"No tiene zonas IOT registradas, debes de crear una zona para usar este mĆ³dulo\", \"\", MessageSeverity.error);\n }\n }\n this.getGateways();\n this.spinner.hide();\n },\n (error: HttpErrorResponse) => {\n this.spinner.hide();\n });\n }\n\n getSensors(){\n var filter = {\n idEnterprise: this.enterpriseSelect,\n idHeadquarter: this.headquarterSelect,\n idZone: this.zoneSelect,\n idGateway: this.gatewaySelect\n }\n this.spinner.show();\n this.selectedItems = [];\n this.panelIOTService.getList(filter).subscribe((_) => {\n this.sensors = [];\n if(_.error == null){\n var s = _.data.filter(x => x.idActuatorType == 1);\n this.sensors=this.sensors.concat(s);\n console.log(\"sensors\",this.sensors);\n }\n this.spinner.hide();\n });\n }\n\n changeGateway(data) {\n this.gatewaySelect = data.value;\n this.getSensors();\n //this.getList(1);\n }\n\n changeZone(data) {\n this.zoneSelect = data.value;\n var zone = this.zones.filter(x => x.id == data.value)[0];\n this.headquarterSelect = zone.idHeadquarter;\n this.getGateways();\n this.getSensors();\n }\n\n changeHeadquarter(data) {\n this.headquarterSelect = data.value;\n this.getZonesList();\n }\n\n}\n\n","\n \n
\n | # | \n\n {{this.paginator.pageIndex == 0 ? i + 1 : 1 + i + this.paginator.pageIndex * this.paginator.pageSize}}\n | \nSede | \n{{element.headquarter}} | \nZona | \n{{element.zone}} | \nItem | \n{{element.actuator}} | \nValor | \n{{element.value}} | \nFecha CreaciĆ³n | \n{{element.date}} | \nCreado por | \n{{element.createdBy}} | \nFecha Inicio | \n{{element.startDate}} | \nFecha Fin | \n{{element.finishDate}} | \nEstado | \n{{element.state}} | \n
|---|
\r\n \r\n\r\n\r\n \r\n\r\n \r\n\r\n
\r\n\r\n \r\n
\r\n","import { DatePipe } from '@angular/common';\r\nimport { HttpErrorResponse } from '@angular/common/http';\r\nimport { Component, ElementRef, OnInit, ViewChild } from '@angular/core';\r\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\r\nimport { IDropdownSettings } from 'ng-multiselect-dropdown';\r\nimport { MatDialog } from '@angular/material/dialog';\r\nimport { MessageSeverity, AlertService } from 'src/app/shared/services/alert.service';\r\nimport { AppConstants } from 'src/app/shared/constants/app.contants';\r\nimport { MatPaginator, PageEvent } from '@angular/material/paginator';\r\nimport { PanelIOTService } from 'src/app/services/panel-iot/panel-iot.service';\r\nimport { HeadquarterService } from 'src/app/services/headquarter/headquarter.service';\r\nimport { NgxSpinnerService } from 'ngx-spinner';\r\nimport { EnterpriseService } from 'src/app/services/enterprise/enterprise.service';\r\nimport { GatewayService } from 'src/app/services/gateway/gateway.service';\r\nimport { MatTableDataSource } from '@angular/material/table';\r\nimport { ZoneService } from 'src/app/services/zone/zone.service';\r\nimport {DateAdapter, MAT_DATE_FORMATS} from '@angular/material';\r\nimport { APP_DATE_FORMATS, AppDateAdapter } from 'src/app/shared/helpers/format-datepicker';\r\n\r\n@Component({\r\n selector: 'app-alert-iot-report',\r\n templateUrl: './alert-iot-report.component.html',\r\n styleUrls: ['./alert-iot-report.component.css'],\r\n providers: [\r\n {provide: DateAdapter, useClass: AppDateAdapter},\r\n {provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS}\r\n ]\r\n})\r\nexport class ReportAlertIOTComponent implements OnInit {\r\n\r\n cameraSelect: number;\r\n cameraAlertType = [];\r\n reportForm: FormGroup;\r\n myDate = new Date();\r\n alertSelect: number = 0;\r\n date = new Date();\r\n dateF = new Date();\r\n timeI: string;\r\n timeF: string;\r\n dateV:string;\r\n isAdministrator=false;\r\n dateIView:string;\r\n dateFView:string;\r\n\r\n dropdownList = [];\r\n selectedItems = [];\r\n dropdownSettings:IDropdownSettings;\r\n chartItem:any;\r\n\r\n labelsChart = [];\r\n dataChart:any;\r\n isAdminGys: boolean = false;\r\n enterprises = [];\r\n headquarters = [];\r\n gateways = [];\r\n enterpriseSelect: number = 0;\r\n pageEvent: PageEvent;\r\n pageIndex: number = 0;\r\n pageSize: number = AppConstants.Paginado.DEFAULT_PAGE_SIZE_PAGINATION;\r\n length: number = 0;\r\n page: number = 1;\r\n headquarterSelect: number = 0;\r\n gatewaySelect: number = 0;\r\n zones = [];\r\n zoneSelect: number = 0;\r\n sensors = [];\r\n\r\n dataSource = new MatTableDataSource();\r\n displayedColumns: string[] = ['index','headquarter', 'zone','sensor', 'value', 'date'];\r\n @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;\r\n @ViewChild('paginatorTop', { static: false }) paginatorTop: MatPaginator;\r\n @ViewChild('paginatorBottom', { static: false }) paginatorBottom: MatPaginator;\r\n color1: string;\r\n color2: string;\r\n colorFont: string;\r\n colorFont2: string;\r\n\r\n constructor(\r\n private datePipe: DatePipe,\r\n public dialog: MatDialog,\r\n private AlertService: AlertService,\r\n private formBuilder: FormBuilder,\r\n private panelIOTService: PanelIOTService,\r\n private headquarterService: HeadquarterService,\r\n private spinner: NgxSpinnerService,\r\n private enterpriseService: EnterpriseService,\r\n private gatewayService: GatewayService,\r\n private zoneService: ZoneService\r\n ) {\r\n document.getElementById(\"titleHeaderNav\").innerHTML = 'IOT > Reporte de Alerta';\r\n this.dropdownSettings = {\r\n singleSelection: false,\r\n idField: 'id',\r\n textField: 'nomenclature',\r\n tooltipField: 'Sensor',\r\n selectAllText: 'Todos',\r\n unSelectAllText: 'Limpiar',\r\n searchPlaceholderText: 'Buscar',\r\n noFilteredDataAvailablePlaceholderText: 'Item no encontrado',\r\n itemsShowLimit: 6,\r\n allowSearchFilter: false, //input search\r\n };\r\n }\r\n\r\n ngOnInit(): void {\r\n this.setTheme();\r\n this.isAdminGys = (+localStorage.getItem(AppConstants.Session.ROLID) == AppConstants.UserRole.AdministradorGyS || +localStorage.getItem(AppConstants.Session.ROLID) == AppConstants.UserRole.UsuarioGyS) ? true : false;\r\n this.createForm();\r\n this.enterpriseSelect = (+localStorage.getItem(AppConstants.Session.ENTERPRISE));\r\n this.headquarterSelect = (+localStorage.getItem(AppConstants.Session.HEADQUARTER));\r\n this.getZonesList()\r\n this.timeI = this.datePipe.transform(\"Tue Aug 18 2020 00:00:58 GMT-0500\", 'HH:mm');\r\n this.timeF = this.datePipe.transform(\"Tue Aug 18 2020 23:59:58 GMT-0500\", 'HH:mm');\r\n this.dateV = this.datePipe.transform(this.myDate, 'yyyy-MM-dd');\r\n this.dataSource.paginator = this.paginator;\r\n }\r\n\r\n setTheme(){\r\n this.color1 = localStorage.getItem(AppConstants.Session.THEME_COLOR1);\r\n this.color2 = localStorage.getItem(AppConstants.Session.THEME_COLOR2);\r\n this.colorFont = localStorage.getItem(AppConstants.Session.THEME_COLOR_FONT);\r\n this.colorFont2 = localStorage.getItem(AppConstants.Session.THEME_COLOR_FONT2);\r\n }\r\n\r\n ngAfterContentChecked(): void {\r\n if (this.paginatorTop) {\r\n this.paginatorBottom.length = this.paginatorTop.length;\r\n }\r\n}\r\n\r\nhandlePaginatorTop(e): void {\r\n const { pageSize, pageIndex } = e;\r\n this.paginatorTop.pageSize = pageSize\r\n this.paginatorTop.pageIndex = pageIndex;\r\n this.paginatorTop.page.emit(e);\r\n}\r\n\r\nhandlePaginatorBottom(e): void {\r\n const { pageSize, pageIndex } = e;\r\n this.paginatorBottom.pageSize = pageSize\r\n this.paginatorBottom.length = this.paginatorTop.length;\r\n this.paginatorBottom.pageIndex = pageIndex;\r\n }\r\n\r\n createForm(){\r\n this.reportForm = this.formBuilder.group({\r\n startDateReport: ['', [Validators.required]],\r\n endDateReport: ['', [Validators.required]],\r\n startTimeReport: ['', [Validators.required, Validators.pattern(\"^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$\")]],\r\n endTimeReport: ['', [Validators.required, Validators.pattern(\"^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$\")]],\r\n idEnterprise: ['', [Validators.required]],\r\n idHeadquarter: ['', [Validators.required]],\r\n idGateway: ['', [Validators.required]],\r\n idZone: ['', [Validators.required]],\r\n idSensors: ['']\r\n });\r\n }\r\n\r\n getEnterprises() {\r\n this.spinner.show();\r\n if (this.isAdminGys) {\r\n this.enterpriseService.getEnterprises().subscribe((response) => {\r\n this.enterprises = response.filter(f => f.enabled == AppConstants.Flag.Active);\r\n this.enterpriseSelect = this.enterprises[0][\"enterpriseId\"];\r\n this.getHeadquarters();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n } else {\r\n this.enterpriseSelect = +localStorage.getItem(AppConstants.Session.ENTERPRISE);\r\n this.getHeadquarters();\r\n }\r\n }\r\n\r\n _keyUp(event: any) {\r\n let charCode = (event.which) ? event.which : event.keyCode;\r\n console.log(event.keyCode)\r\n if (charCode != 46 && charCode != 58 && charCode > 31\r\n && (charCode < 48 || charCode > 57)) {\r\n return false;\r\n }\r\n }\r\n\r\n\r\n get f() { return this.reportForm.controls; }\r\n onItemSelect(item: any) {\r\n console.log(item);\r\n }\r\n onSelectAll(items: any) {\r\n console.log(items);\r\n }\r\n\r\n closeModal(){\r\n this.dialog.closeAll();\r\n }\r\n\r\n search(){\r\n var idSensors = [];\r\n this.selectedItems.forEach(x => {\r\n idSensors.push(x.id);\r\n });\r\n\r\n if(idSensors.length == 0){\r\n this.AlertService.showMessage(\r\n AppConstants.MessageModal.FILTER_SENSOR_VALIDATE,\"\",\r\n MessageSeverity.error);\r\n return false;\r\n }\r\n\r\n if(this.date > this.dateF){\r\n this.AlertService.showMessage(\r\n AppConstants.MessageModal.FILTER_DATES_VALIDATE,\"\",\r\n MessageSeverity.error);\r\n return false\r\n }\r\n\r\n var filter = {\r\n dateI: this.reportForm.value[\"startDateReport\"],\r\n dateF: this.reportForm.value[\"endDateReport\"],\r\n timeI: this.timeI,\r\n timeF: this.timeF,\r\n idEnterprise: this.enterpriseSelect,\r\n idHeadquarter: this.headquarterSelect,\r\n idGateway: this.gatewaySelect,\r\n idZone: this.zoneSelect,\r\n idSensors: idSensors\r\n };\r\n filter.dateI = this.datePipe.transform(filter.dateI, 'yyyy-MM-dd');\r\n filter.dateF = this.datePipe.transform(filter.dateF, 'yyyy-MM-dd');\r\n this.spinner.show();\r\n this.panelIOTService.reportAlerts(filter).subscribe(\r\n result => {\r\n if(result.error == null){\r\n this.dataSource.data = result.data;\r\n if(result.data.length == 0){\r\n this.AlertService.showMessage(\"No tiene registros\", \"\", MessageSeverity.error);\r\n }\r\n }\r\n this.spinner.hide();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.AlertService.showMessage(AppConstants.TitleModal.ERROR_TITLE, error.error.messages, MessageSeverity.error);\r\n });\r\n }\r\n\r\n changeEnterprise(data) {\r\n this.enterpriseSelect = data.value;\r\n this.getHeadquarters();\r\n }\r\n\r\n getHeadquarters() {\r\n if (this.isAdminGys) {\r\n this.spinner.show();\r\n this.headquarterService.getListAll().subscribe((response) => {\r\n if(response.error == null){\r\n this.headquarters = response.data.filter(f => f.idEnterprise == this.enterpriseSelect);\r\n if(this.headquarters.length == 1){\r\n this.headquarterSelect = this.headquarters[0][\"id\"];\r\n }else{\r\n this.headquarterSelect = 0;\r\n }\r\n this.getZonesList()\r\n }else{\r\n this.headquarters = [];\r\n }\r\n this.spinner.hide();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.headquarters = [];\r\n this.spinner.hide();\r\n });\r\n } else {\r\n this.headquarterSelect = +localStorage.getItem(AppConstants.Session.HEADQUARTER)\r\n // this.getList(1);\r\n }\r\n }\r\n\r\n getGateways(){\r\n this.gatewayService.getListAll().subscribe((_) => {\r\n if(_.error == null){\r\n if(this.headquarterSelect == 0){\r\n this.gateways = _.data.filter(x => x.idEnterprise == this.enterpriseSelect);\r\n }else{\r\n this.gateways = _.data.filter(x => x.idEnterprise == this.enterpriseSelect && x.idHeadquarter == this.headquarterSelect);\r\n }\r\n\r\n if(this.gateways.length == 1){\r\n this.gatewaySelect = this.gateways[0][\"id\"];\r\n }else{\r\n this.gatewaySelect = 0;\r\n }\r\n }\r\n this.getSensors();\r\n });\r\n }\r\n\r\n getZonesList() {\r\n this.zoneService.getListAll(this.enterpriseSelect,this.headquarterSelect).subscribe((response) => {\r\n if(response.error == null){\r\n this.zones = response.data.filter(x => x.type == 2);\r\n if(this.zones.length == 1){\r\n this.zoneSelect = this.zones[0][\"id\"];\r\n }else if(this.zones.length>1){\r\n this.zoneSelect = 0;\r\n }else{\r\n this.AlertService.showMessage(\"No tiene zonas IOT registradas, debes de crear una zona para usar este mĆ³dulo\", \"\", MessageSeverity.error);\r\n }\r\n }\r\n this.getGateways();\r\n this.spinner.hide();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n getSensors(){\r\n var filter = {\r\n idEnterprise: this.enterpriseSelect,\r\n idHeadquarter: this.headquarterSelect,\r\n idZone: this.zoneSelect,\r\n idGateway: this.gatewaySelect\r\n }\r\n this.spinner.show();\r\n this.selectedItems = [];\r\n this.panelIOTService.getList(filter).subscribe((_) => {\r\n this.sensors = [];\r\n if(_.error == null){\r\n var s = _.data;//.filter(x => x.stateSensor != \"instalado\");\r\n this.sensors=this.sensors.concat(s);\r\n console.log(\"sensors\",this.sensors);\r\n }\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n changeGateway(data) {\r\n this.gatewaySelect = data.value;\r\n this.getSensors();\r\n //this.getList(1);\r\n }\r\n\r\n changeZone(data) {\r\n this.zoneSelect = data.value;\r\n var zone = this.zones.filter(x => x.id == data.value)[0];\r\n this.headquarterSelect = zone.idHeadquarter;\r\n this.getGateways();\r\n this.getSensors();\r\n }\r\n\r\n changeHeadquarter(data) {\r\n this.headquarterSelect = data.value;\r\n this.getZonesList();\r\n }\r\n\r\n}\r\n\r\n","\n\n\n ","import { HttpErrorResponse } from '@angular/common/http';\nimport { Component, OnInit, Pipe } from '@angular/core';\nimport { MatDialog } from '@angular/material';\nimport { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';\nimport { Router } from '@angular/router';\nimport { NgxSpinnerService } from 'ngx-spinner';\nimport { PowerBIService } from 'src/app/services/power-bi/power-bi.service';\nimport { PowerbiModalComponent } from 'src/app/shared/components/modals/powerbi-modal/powerbi-modal.component';\nimport { AppConstants } from 'src/app/shared/constants/app.contants';\n\n@Component({\n selector: 'app-report-bi-iot',\n templateUrl: './report-bi-iot.component.html',\n styleUrls: ['./report-bi-iot.component.css']\n})\n@Pipe({ name: 'safe' })\nexport class ReportBiIOTComponent implements OnInit {\n\n url:SafeResourceUrl;\n enterpriseSelect: number = 0;\n headquarterSelect: number = 0;\n color1: string;\n color2: string;\n colorFont: string;\n colorFont2: string;\n enabledRead: number;\n enabledWrite: number;\n\n constructor(\n public dialog: MatDialog,\n private spinner: NgxSpinnerService,\n private router: Router,\n private _sanitizer: DomSanitizer,\n private powerBIService: PowerBIService) {\n document.getElementById(\"titleHeaderNav\").innerHTML = 'IOT > Reporte Power BI';\n }\n\n ngOnInit() {\n this.setLS();\n this.enterpriseSelect = (+localStorage.getItem(AppConstants.Session.ENTERPRISE));\n this.headquarterSelect = (+localStorage.getItem(AppConstants.Session.HEADQUARTER));\n this.getPowerBI();\n }\n\n setLS(){\n this.color1 = localStorage.getItem(AppConstants.Session.THEME_COLOR1);\n this.color2 = localStorage.getItem(AppConstants.Session.THEME_COLOR2);\n this.colorFont = localStorage.getItem(AppConstants.Session.THEME_COLOR_FONT);\n this.colorFont2 = localStorage.getItem(AppConstants.Session.THEME_COLOR_FONT2);\n //validate Permisses menu\n var menu = JSON.parse(localStorage.getItem(AppConstants.Session.MENU));\n var page = this.router.url.split(\"/\");\n var i = page[page.length-1];\n var itemTag = menu.filter(x => x.tag != null && (x.tag.toString()).toLowerCase().includes(i));\n if(itemTag.length>0){\n this.enabledRead = itemTag[0].activeRead;\n this.enabledWrite = itemTag[0].activeWrite;\n }else{\n this.enabledRead = 0;\n this.enabledWrite = 0;\n }\n }\n\n getPowerBI() {\n this.spinner.show();\n this.powerBIService.getListAll(this.enterpriseSelect,this.headquarterSelect,2).subscribe((response) => {\n if(response.data.length>0){\n this.url = this._sanitizer.bypassSecurityTrustResourceUrl(response.data[0].url);\n }\n this.spinner.hide();\n },\n (error: HttpErrorResponse) => {\n this.spinner.hide();\n });\n }\n\n openAddModal() {\n let dialogRef = this.dialog.open(PowerbiModalComponent, {\n data: {\n title: AppConstants.TitleModal.POWER_BI,\n action: AppConstants.OperationType.ADD,\n idSystem:2,\n idEnterprise: this.enterpriseSelect,\n idHeadquarter: this.headquarterSelect,\n enabledWrite: this.enabledWrite,\n enabledRead: this.enabledRead,\n color: this.color1,\n colorFont: this.color2,\n obj:null},\n width: '500px',\n hasBackdrop: true\n });\n dialogRef.afterClosed().subscribe(_ => {\n if (_.result == true) {\n /* this.page = 1;\n this.paginator.pageIndex = 0;\n this.getList(); */\n }\n });\n }\n}\n","\r\n \r\n
\r\n| # | \r\n\r\n {{this.paginator.pageIndex == 0 ? i + 1 : 1 + i + this.paginator.pageIndex * this.paginator.pageSize}}\r\n | \r\nSede | \r\n{{element.headquarter}} | \r\nZona | \r\n{{element.zone}} | \r\nItem | \r\n{{element.panelIOT}} | \r\nDescription | \r\n{{element.description}} | \r\nFecha | \r\n{{element.date}} | \r\n
|---|
\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n
\r\n\r\n \r\n
\r\n","import { DatePipe } from '@angular/common';\r\nimport { HttpErrorResponse } from '@angular/common/http';\r\nimport { Component, ElementRef, OnInit, ViewChild } from '@angular/core';\r\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\r\nimport { IDropdownSettings } from 'ng-multiselect-dropdown';\r\nimport { MatDialog } from '@angular/material/dialog';\r\nimport { MessageSeverity, AlertService } from 'src/app/shared/services/alert.service';\r\nimport { AppConstants } from 'src/app/shared/constants/app.contants';\r\nimport { MatPaginator, PageEvent } from '@angular/material/paginator';\r\nimport { PanelIOTService } from 'src/app/services/panel-iot/panel-iot.service';\r\nimport { HeadquarterService } from 'src/app/services/headquarter/headquarter.service';\r\nimport { NgxSpinnerService } from 'ngx-spinner';\r\nimport { EnterpriseService } from 'src/app/services/enterprise/enterprise.service';\r\nimport { GatewayService } from 'src/app/services/gateway/gateway.service';\r\nimport { MatTableDataSource } from '@angular/material/table';\r\nimport { ZoneService } from 'src/app/services/zone/zone.service';\r\nimport {DateAdapter, MAT_DATE_FORMATS} from '@angular/material';\r\nimport { APP_DATE_FORMATS, AppDateAdapter } from 'src/app/shared/helpers/format-datepicker';\r\n\r\n@Component({\r\n selector: 'app-iot-report',\r\n templateUrl: './iot-report.component.html',\r\n styleUrls: ['./iot-report.component.css'],\r\n providers: [\r\n {provide: DateAdapter, useClass: AppDateAdapter},\r\n {provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS}\r\n ]\r\n})\r\nexport class ReportIOTComponent implements OnInit {\r\n\r\n cameraSelect: number;\r\n cameraAlertType = [];\r\n reportForm: FormGroup;\r\n myDate = new Date();\r\n alertSelect: number = 0;\r\n date = new Date();\r\n dateF = new Date();\r\n timeI: string;\r\n timeF: string;\r\n dateV:string;\r\n isAdministrator=false;\r\n dateIView:string;\r\n dateFView:string;\r\n\r\n dropdownList = [];\r\n selectedItems = [];\r\n dropdownSettings:IDropdownSettings;\r\n chartItem:any;\r\n\r\n labelsChart = [];\r\n dataChart:any;\r\n isAdminGys: boolean = false;\r\n enterprises = [];\r\n headquarters = [];\r\n gateways = [];\r\n enterpriseSelect: number = 0;\r\n pageEvent: PageEvent;\r\n pageIndex: number = 0;\r\n pageSize: number = AppConstants.Paginado.DEFAULT_PAGE_SIZE_PAGINATION;\r\n length: number = 0;\r\n page: number = 1;\r\n headquarterSelect: number = 0;\r\n gatewaySelect: number = 0;\r\n zones = [];\r\n zoneSelect: number = 0;\r\n sensors = [];\r\n\r\n dataSource = new MatTableDataSource();\r\n displayedColumns: string[] = ['index','enterprise', 'headquarter', 'gateway', 'zone','isActuator', 'sensor', 'value', 'date'];\r\n @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;\r\n @ViewChild('paginatorTop', { static: false }) paginatorTop: MatPaginator;\r\n @ViewChild('paginatorBottom', { static: false }) paginatorBottom: MatPaginator;\r\n color1: string;\r\n color2: string;\r\n colorFont: string;\r\n colorFont2: string;\r\n\r\n constructor(\r\n private datePipe: DatePipe,\r\n public dialog: MatDialog,\r\n private AlertService: AlertService,\r\n private formBuilder: FormBuilder,\r\n private panelIOTService: PanelIOTService,\r\n private headquarterService: HeadquarterService,\r\n private spinner: NgxSpinnerService,\r\n private enterpriseService: EnterpriseService,\r\n private gatewayService: GatewayService,\r\n private zoneService: ZoneService\r\n ) {\r\n document.getElementById(\"titleHeaderNav\").innerHTML = 'IOT > Reporte de Actuadores y Sensores';\r\n this.dropdownSettings = {\r\n singleSelection: false,\r\n idField: 'id',\r\n textField: 'nomenclature',\r\n tooltipField: 'Sensor',\r\n selectAllText: 'Todos',\r\n unSelectAllText: 'Limpiar',\r\n searchPlaceholderText: 'Buscar',\r\n noFilteredDataAvailablePlaceholderText: 'Item no encontrado',\r\n itemsShowLimit: 6,\r\n allowSearchFilter: false, //input search\r\n };\r\n }\r\n\r\n ngOnInit(): void {\r\n this.setTheme();\r\n this.isAdminGys = (+localStorage.getItem(AppConstants.Session.ROLID) == AppConstants.UserRole.AdministradorGyS || +localStorage.getItem(AppConstants.Session.ROLID) == AppConstants.UserRole.UsuarioGyS) ? true : false;\r\n this.createForm();\r\n this.enterpriseSelect = (+localStorage.getItem(AppConstants.Session.ENTERPRISE));\r\n this.headquarterSelect = (+localStorage.getItem(AppConstants.Session.HEADQUARTER));\r\n this.getZonesList()\r\n this.timeI = this.datePipe.transform(\"Tue Aug 18 2020 00:00:58 GMT-0500\", 'HH:mm');\r\n this.timeF = this.datePipe.transform(\"Tue Aug 18 2020 23:59:58 GMT-0500\", 'HH:mm');\r\n this.dateV = this.datePipe.transform(this.myDate, 'yyyy-MM-dd');\r\n this.dataSource.paginator = this.paginator;\r\n }\r\n\r\n setTheme(){\r\n this.color1 = localStorage.getItem(AppConstants.Session.THEME_COLOR1);\r\n this.color2 = localStorage.getItem(AppConstants.Session.THEME_COLOR2);\r\n this.colorFont = localStorage.getItem(AppConstants.Session.THEME_COLOR_FONT);\r\n this.colorFont2 = localStorage.getItem(AppConstants.Session.THEME_COLOR_FONT2);\r\n }\r\n\r\n ngAfterContentChecked(): void {\r\n if (this.paginatorTop) {\r\n this.paginatorBottom.length = this.paginatorTop.length;\r\n }\r\n}\r\n\r\nhandlePaginatorTop(e): void {\r\n const { pageSize, pageIndex } = e;\r\n this.paginatorTop.pageSize = pageSize\r\n this.paginatorTop.pageIndex = pageIndex;\r\n this.paginatorTop.page.emit(e);\r\n}\r\n\r\nhandlePaginatorBottom(e): void {\r\n const { pageSize, pageIndex } = e;\r\n this.paginatorBottom.pageSize = pageSize\r\n this.paginatorBottom.length = this.paginatorTop.length;\r\n this.paginatorBottom.pageIndex = pageIndex;\r\n }\r\n\r\n createForm(){\r\n this.reportForm = this.formBuilder.group({\r\n startDateReport: ['', [Validators.required]],\r\n endDateReport: ['', [Validators.required]],\r\n startTimeReport: ['', [Validators.required, Validators.pattern(\"^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$\")]],\r\n endTimeReport: ['', [Validators.required, Validators.pattern(\"^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$\")]],\r\n idEnterprise: ['', [Validators.required]],\r\n idHeadquarter: ['', [Validators.required]],\r\n idGateway: ['', [Validators.required]],\r\n idZone: ['', [Validators.required]],\r\n idSensors: ['']\r\n });\r\n }\r\n\r\n getEnterprises() {\r\n this.spinner.show();\r\n if (this.isAdminGys) {\r\n this.enterpriseService.getEnterprises().subscribe((response) => {\r\n this.enterprises = response.filter(f => f.enabled == AppConstants.Flag.Active);\r\n this.enterpriseSelect = this.enterprises[0][\"enterpriseId\"];\r\n this.getHeadquarters();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n } else {\r\n this.enterpriseSelect = +localStorage.getItem(AppConstants.Session.ENTERPRISE);\r\n this.getHeadquarters();\r\n }\r\n }\r\n\r\n _keyUp(event: any) {\r\n let charCode = (event.which) ? event.which : event.keyCode;\r\n console.log(event.keyCode)\r\n if (charCode != 46 && charCode != 58 && charCode > 31\r\n && (charCode < 48 || charCode > 57)) {\r\n return false;\r\n }\r\n }\r\n\r\n\r\n get f() { return this.reportForm.controls; }\r\n onItemSelect(item: any) {\r\n console.log(item);\r\n }\r\n onSelectAll(items: any) {\r\n console.log(items);\r\n }\r\n\r\n closeModal(){\r\n this.dialog.closeAll();\r\n }\r\n\r\n search(){\r\n var idSensors = [];\r\n this.selectedItems.forEach(x => {\r\n idSensors.push(x.id);\r\n });\r\n\r\n if(idSensors.length == 0){\r\n this.AlertService.showMessage(\r\n AppConstants.MessageModal.FILTER_SENSOR_VALIDATE,\"\",\r\n MessageSeverity.error);\r\n return false;\r\n }\r\n\r\n if(this.date > this.dateF){\r\n this.AlertService.showMessage(\r\n AppConstants.MessageModal.FILTER_DATES_VALIDATE,\"\",\r\n MessageSeverity.error);\r\n return false\r\n }\r\n\r\n var filter = {\r\n dateI: this.reportForm.value[\"startDateReport\"],\r\n dateF: this.reportForm.value[\"endDateReport\"],\r\n timeI: this.timeI,\r\n timeF: this.timeF,\r\n idEnterprise: this.enterpriseSelect,\r\n idHeadquarter: this.headquarterSelect,\r\n idGateway: this.gatewaySelect,\r\n idZone: this.zoneSelect,\r\n idSensors: idSensors\r\n };\r\n filter.dateI = this.datePipe.transform(filter.dateI, 'yyyy-MM-dd');\r\n filter.dateF = this.datePipe.transform(filter.dateF, 'yyyy-MM-dd');\r\n this.spinner.show();\r\n this.panelIOTService.reportSensors(filter).subscribe(\r\n result => {\r\n if(result.error == null){\r\n this.dataSource.data = result.data;\r\n if(result.data.length == 0){\r\n this.AlertService.showMessage(\"No tiene registros\", \"\", MessageSeverity.error);\r\n }\r\n }\r\n this.spinner.hide();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.AlertService.showMessage(AppConstants.TitleModal.ERROR_TITLE, error.error.messages, MessageSeverity.error);\r\n });\r\n }\r\n\r\n changeEnterprise(data) {\r\n this.enterpriseSelect = data.value;\r\n this.getHeadquarters();\r\n }\r\n\r\n getHeadquarters() {\r\n if (this.isAdminGys) {\r\n this.spinner.show();\r\n this.headquarterService.getListAll().subscribe((response) => {\r\n if(response.error == null){\r\n this.headquarters = response.data.filter(f => f.idEnterprise == this.enterpriseSelect);\r\n if(this.headquarters.length == 1){\r\n this.headquarterSelect = this.headquarters[0][\"id\"];\r\n }else{\r\n this.headquarterSelect = 0;\r\n }\r\n this.getZonesList()\r\n }else{\r\n this.headquarters = [];\r\n }\r\n this.spinner.hide();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.headquarters = [];\r\n this.spinner.hide();\r\n });\r\n } else {\r\n this.headquarterSelect = +localStorage.getItem(AppConstants.Session.HEADQUARTER)\r\n // this.getList(1);\r\n }\r\n }\r\n\r\n getGateways(){\r\n this.gatewayService.getListAll().subscribe((_) => {\r\n if(_.error == null){\r\n if(this.headquarterSelect == 0){\r\n this.gateways = _.data.filter(x => x.idEnterprise == this.enterpriseSelect);\r\n }else{\r\n this.gateways = _.data.filter(x => x.idEnterprise == this.enterpriseSelect && x.idHeadquarter == this.headquarterSelect);\r\n }\r\n\r\n if(this.gateways.length == 1){\r\n this.gatewaySelect = this.gateways[0][\"id\"];\r\n }else{\r\n this.gatewaySelect = 0;\r\n }\r\n }\r\n this.getSensors();\r\n });\r\n }\r\n\r\n getZonesList() {\r\n this.zoneService.getListAll(this.enterpriseSelect,this.headquarterSelect).subscribe((response) => {\r\n if(response.error == null){\r\n this.zones = response.data.filter(x => x.type == 2);\r\n if(this.zones.length == 1){\r\n this.zoneSelect = this.zones[0][\"id\"];\r\n }else if(this.zones.length>1){\r\n this.zoneSelect = 0;\r\n }else{\r\n this.AlertService.showMessage(\"No tiene zonas IOT registradas, debes de crear una zona para usar este mĆ³dulo\", \"\", MessageSeverity.error);\r\n }\r\n }\r\n this.getGateways();\r\n this.spinner.hide();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n getSensors(){\r\n var filter = {\r\n idEnterprise: this.enterpriseSelect,\r\n idHeadquarter: this.headquarterSelect,\r\n idZone: this.zoneSelect,\r\n idGateway: this.gatewaySelect\r\n }\r\n this.spinner.show();\r\n this.selectedItems = [];\r\n this.panelIOTService.getList(filter).subscribe((_) => {\r\n this.sensors = [];\r\n if(_.error == null){\r\n var s = _.data;//.filter(x => x.stateSensor != \"instalado\");\r\n this.sensors=this.sensors.concat(s);\r\n console.log(\"sensors\",this.sensors);\r\n }\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n changeGateway(data) {\r\n this.gatewaySelect = data.value;\r\n this.getSensors();\r\n //this.getList(1);\r\n }\r\n\r\n changeZone(data) {\r\n this.zoneSelect = data.value;\r\n var zone = this.zones.filter(x => x.id == data.value)[0];\r\n this.headquarterSelect = zone.idHeadquarter;\r\n this.getGateways();\r\n this.getSensors();\r\n }\r\n\r\n changeHeadquarter(data) {\r\n this.headquarterSelect = data.value;\r\n this.getZonesList();\r\n }\r\n\r\n}\r\n\r\n","\r\n \r\n
\r\n | # | \r\n\r\n {{this.paginator.pageIndex == 0 ? i + 1 : 1 + i + this.paginator.pageIndex * this.paginator.pageSize}}\r\n | \r\nEmpresa | \r\n{{element.enterprise}} | \r\nSede | \r\n{{element.headquarter}} | \r\nZona | \r\n{{element.zone}} | \r\nGateway | \r\n{{element.gateway}} | \r\n\r\n | Actuador Sensor | \r\nItem | \r\n{{element.sensor}} | \r\nValor | \r\n{{element.value}} | \r\nFecha | \r\n{{element.date}} | \r\n
|---|
\r\n \r\n \r\n\r\n
\r\n \r\n \r\n \r\n\r\n
\r\n\r\n","import { HttpErrorResponse } from '@angular/common/http';\r\nimport { Component, OnInit, ViewChild } from '@angular/core';\r\nimport { MatDialog } from '@angular/material/dialog';\r\nimport { MatPaginator } from '@angular/material/paginator';\r\nimport { MatTableDataSource } from '@angular/material/table';\r\nimport { NgxSpinnerService } from 'ngx-spinner';\r\nimport { ShowRoomService } from 'src/app/services/showroom/showroom.service';\r\nimport { ItemdomainIframeStreamingModalComponent } from 'src/app/shared/components/modals/domain-iframe-streaming/domain-iframe-streaming-modal.component';\r\nimport { MessageModalComponent } from 'src/app/shared/components/modals/message/message-modal.component';\r\nimport { ModalEmailShowRoomComponent } from 'src/app/shared/components/modals/showroom/modal-email-show-room/modal-email-show-room.component';\r\nimport { AppConstants } from 'src/app/shared/constants/app.contants';\r\nimport { AlertService, MessageSeverity } from 'src/app/shared/services/alert.service';\r\n\r\n@Component({\r\n selector: 'app-showroom-email',\r\n templateUrl: './showroom-email.component.html',\r\n styleUrls: ['./showroom-email.component.css']\r\n})\r\nexport class ShowroomEmailComponent implements OnInit {\r\n loading: boolean = false;\r\n dataSource = new MatTableDataSource();\r\n dataSources = new MatTableDataSource();\r\n displayedColumns: string[] = ['email','action'];\r\n @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;\r\n @ViewChild(MatPaginator, { static: true }) paginators: MatPaginator;\r\n\r\n constructor(\r\n public dialog: MatDialog,\r\n private alertService: AlertService,\r\n private spinner: NgxSpinnerService,\r\n private showRoomService: ShowRoomService,\r\n ) { }\r\n\r\n ngOnInit() {\r\n this.dataSource.paginator = this.paginator;\r\n this.dataSources.paginator = this.paginators;\r\n this.paginator._intl.itemsPerPageLabel = '';\r\n this.paginators._intl.itemsPerPageLabel = '';\r\n this.getList();\r\n }\r\n\r\n getList(){\r\n this.showRoomService.getEmails().subscribe((_) => {\r\n if(_.error == null){\r\n this.dataSource.data = _.data;\r\n }\r\n });\r\n }\r\n\r\n openAddModal() {\r\n let dialogRef = this.dialog.open(ModalEmailShowRoomComponent, {\r\n data: { title: 'Agregar Correo', action: 0,obj:null},\r\n width: '500px',\r\n hasBackdrop: true\r\n });\r\n dialogRef.afterClosed().subscribe(_ => {\r\n this.getList();\r\n });\r\n }\r\n\r\n openEditModal(data){\r\n let dialogRef = this.dialog.open(ModalEmailShowRoomComponent, {\r\n data: { title: 'Actualizar Correo', action: 1,obj:data},\r\n width: '500px',\r\n hasBackdrop: true\r\n });\r\n dialogRef.afterClosed().subscribe(_ => {\r\n this.getList();\r\n });\r\n }\r\n\r\n delete(obj) {\r\n let dialogRef = this.dialog.open(MessageModalComponent, {\r\n data: {\r\n title: AppConstants.TitleModal.DELETE_CONFIRMATION_TITLE,\r\n message: `${AppConstants.MessageModal.DELETE_EMAIL_CONFIRMATION_MESSAGE1}`,\r\n hasButton: true,\r\n contentButton: {\r\n yes: 'SI',\r\n no: 'CANCELAR'\r\n }\r\n },\r\n width: '600px',\r\n });\r\n\r\n dialogRef.afterClosed().subscribe(response => {\r\n if (response.result == true) {\r\n this.deleteSecurity(obj.id);\r\n }\r\n });\r\n\r\n }\r\n\r\n deleteSecurity(id: number) {\r\n this.spinner.show();\r\n this.showRoomService.deleteEmail(id).subscribe((response => {\r\n this.spinner.hide();\r\n this.alertService.showMessage(AppConstants.TitleModal.DELETE_CONFIRMATION_TITLE, AppConstants.MessageModal.DELETE, MessageSeverity.success);\r\n this.getList();\r\n }),\r\n (error: HttpErrorResponse) => {\r\n this.alertService.showMessage(AppConstants.TitleModal.DELETE_CONFIRMATION_TITLE, error.error.messages, MessageSeverity.error);\r\n this.spinner.hide();\r\n });\r\n }\r\n}\r\n","\r\n
\r\n \r\n ShowRoom > Email \r\n
\r\n \r\n
\r\n\r\n \r\n Lista de Correos para envĆo de notificaciones de alertas\r\n
\r\n \r\n \r\n
\r\n | # | \r\n\r\n {{this.paginator.pageIndex == 0 ? i + 1 : 1 + i + this.paginator.pageIndex * this.paginator.pageSize}}\r\n | \r\nCorreo | \r\n{{element.email}} | \r\nAcciones | \r\n\r\n | \r\n
|---|
\r\n ![]()
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n \r\n\r\n\r\n \r\n\r\n\r\n\r\n
\r\n\r\n close \r\n
\r\n \r\n G&S\r\n gestiĆ³n y sistemas\r\n
\r\n\r\n\r\n G&S LAB\r\n
\r\n\r\n{{nivel}}
\r\n{{presion}}
\r\n{{temperatura}}
\r\n\r\n","import { HttpErrorResponse } from '@angular/common/http';\r\nimport { Component, Inject, OnInit } from '@angular/core';\r\nimport { Router } from '@angular/router';\r\nimport { NgxSpinnerService } from 'ngx-spinner';\r\nimport { ShowRoomService } from 'src/app/services/showroom/showroom.service';\r\nimport { AlertService, MessageSeverity } from 'src/app/shared/services/alert.service';\r\nimport { environment } from 'src/environments/environment';\r\nimport * as signalR from '@microsoft/signalr';\r\nimport { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';\r\nimport { MatDialog } from '@angular/material';\r\nimport { ModalReportSensorPbiShowRoomComponent } from 'src/app/shared/components/modals/showroom/modal-report-sensor-pbi/modal-report-sensor-pbi-show-room.component';\r\n\r\n@Component({\r\n selector: 'app-showroom-panel-diagram-public',\r\n templateUrl: './showroom-panel-diagram-public.component.html',\r\n styleUrls: ['./showroom-panel-diagram-public.component.css']\r\n})\r\nexport class ShowroomPanelDiagramPublicComponent implements OnInit {\r\n private _hubConnection: HubConnection;\r\n imagePanel = environment.pathFile + \"assets/showroom/public/1.png\";\r\n imagePanelOrden = 1;\r\n showActuatorPanel=false;\r\n actuators = [];\r\n staticActuators = [];\r\n startButton = 0;\r\n stopButton = 0;\r\n startAlert = 0;\r\n stopAlert = 0;\r\n stepIndex: number = 0;\r\n showScreenshot = false;\r\n showMenu = false;\r\n docElement: HTMLElement;\r\n isFullScreen: boolean = false;\r\n nivel = \"\";\r\n temperatura = 0;\r\n presion = \"\";\r\n showDataPanel = true;\r\n showDataShare = true;\r\n bomba = 0;\r\n\r\n constructor(\r\n private router: Router,\r\n private alertService: AlertService,\r\n public dialog: MatDialog,\r\n private spinner: NgxSpinnerService,\r\n public showroomService: ShowRoomService) {\r\n var _this = this;\r\n setInterval(function () {\r\n _this.listPanels();\r\n },\r\n 1000);\r\n var _this = this;\r\n const connection = this._hubConnection = new HubConnectionBuilder()\r\n .withUrl(environment.wsUrl +\"/ws/showroom\",{\r\n skipNegotiation: true,\r\n transport: signalR.HttpTransportType.WebSockets\r\n })\r\n .withAutomaticReconnect()\r\n .build();\r\n var _this = this;\r\n console.log(environment.wsUrl +\"/ws/showroom\");\r\n connection.on(\"updatePanel\", (panel) => {\r\n console.log(\"updatepanel -- \",panel);\r\n if(panel.value==\"1\"){ document.getElementById('actuactorPanel'+panel.id).style.display=\"initial\"; }\r\n else{ document.getElementById('actuactorPanel'+panel.id).style.display=\"none\"; }\r\n });\r\n connection.start().catch(err => document.write(err));\r\n }\r\n\r\n ngOnInit(): void {\r\n this.docElement = document.documentElement;\r\n this.getListActuators();\r\n }\r\n\r\n listPanels(){\r\n var _this = this;\r\n _this.nivel = _this.showroomService.getNivel();\r\n _this.temperatura = _this.showroomService.getTemperatura();\r\n _this.presion = _this.showroomService.getPresion();\r\n _this.bomba = _this.showroomService.getBomba();\r\n if(_this.showDataShare){\r\n\r\n _this.showroomService.getPanels().subscribe(_=>{\r\n if(_.error == null){\r\n _this.showDataShare = false;\r\n var sc = _.data.filter( x => x.id == 'sharedControl')[0];\r\n if(!sc.value){ _this.router.navigate(['/gys/showroom']) }\r\n _.data = _.data.filter(_ =>_.id != 'sharedControl');\r\n _.data.forEach( _ =>{\r\n\r\n if(_.id == 0){\r\n _this.imagePanel = environment.pathFile + \"assets/showroom/\"+_.value+\".png\";\r\n }else{\r\n if(_.value){ document.getElementById('actuactorPanel'+_.id).style.display=\"initial\"; }\r\n else{ document.getElementById('actuactorPanel'+_.id).style.display=\"none\"; }\r\n }\r\n\r\n });\r\n\r\n _this.showDataShare = true;\r\n }\r\n });\r\n }\r\n }\r\n\r\n selectMenu(){\r\n this.showMenu = !this.showMenu;\r\n }\r\n\r\n goControl(){\r\n this.router.navigate(['/gys/showroom']);\r\n }\r\n\r\n saveActuators(){\r\n //this.spinner.show();\r\n console.log('data enviada');\r\n console.log(this.actuators);\r\n this.showroomService.updateActuators(this.actuators).subscribe((_) => {\r\n // this.spinner.hide();\r\n },\r\n (error: HttpErrorResponse) => {\r\n // this.spinner.hide();\r\n });\r\n }\r\n\r\n getListActuators(){\r\n this.spinner.show();\r\n this.showroomService.getListActuators().subscribe((_) => {\r\n this.actuators = _.data;\r\n var start = parseInt(this.actuators.filter(_ => _.id == 6)[0].value);\r\n var stop = parseInt(this.actuators.filter(_ => _.id == 7)[0].value);\r\n var startAlert = parseInt(this.actuators.filter(_ => _.id == 11)[0].value);\r\n var stopAlert = parseInt(this.actuators.filter(_ => _.id == 12)[0].value);\r\n // if(start==1 && stop==0){ start = 0; }\r\n this.stopButton = stop;\r\n this.startButton = start;\r\n this.stopAlert = stopAlert;\r\n this.startAlert = startAlert;\r\n this.actuators.filter(_ => {\r\n let options;\r\n _.idOrigin = _.id;\r\n _.idPanel = \"panelActuator\"+_.id;\r\n if(_.maxLimit > 0){\r\n _.value =(_.value * 100) / _.maxLimit;\r\n }\r\n if(_.type==2){\r\n _.colors = ['#e5f6ff', '#82cfff'];\r\n }else{\r\n if(_.stepOptions != \"\" && _.stepOptions){\r\n var stepsArray = [];\r\n var array = _.stepOptions.split(\",\");\r\n array.forEach(function(n) {\r\n stepsArray.push({value: n});\r\n })\r\n options = {\r\n floor: 0,\r\n ceil: 100,\r\n showTicks: false,\r\n showTicksValues: true,\r\n stepsArray: stepsArray,\r\n showSelectionBar: true,\r\n selectionBarGradient: {\r\n from: 'white',\r\n to: '#01c4e7'\r\n }\r\n };\r\n }else{\r\n options = {\r\n floor: 0,\r\n ceil: 100,\r\n showSelectionBar: true,\r\n selectionBarGradient: {\r\n from: 'white',\r\n to: '#01c4e7'\r\n }\r\n }\r\n }\r\n }\r\n\r\n if(_.type == 6){\r\n _.relationshipActuators.filter(__ => {\r\n __.idPanel = \"panelActuator\"+__.id;\r\n __.update = 0;\r\n this.actuators.push(__);\r\n });\r\n }\r\n\r\n _.dataValue = _.value;\r\n _.options = options;\r\n _.update = 0;\r\n _.beforeValue = _.value;\r\n });\r\n this.staticActuators = this.actuators;\r\n this.staticActuators = this.staticActuators.filter(_ => _.id != 6 && _.id != 7 && _.id != 11 && _.id != 12 && _.id != 14);\r\n this.spinner.hide();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n nextPanel(){\r\n /*this.imagePanelOrden++;\r\n if(this.imagePanelOrden == 8){\r\n this.imagePanelOrden=1;\r\n }\r\n\r\n this.imagePanel = environment.pathFile + \"assets/showroom/\"+this.imagePanelOrden+\".png\";*/\r\n }\r\n\r\n showPanel(id){\r\n\r\n if(id == 4){ //Resistencia\r\n //var motor = this.actuators.filter(x => x.id == 8)[0];\r\n //console.log(\"actuators\" , this.actuators)\r\n console.log(\"motor value\",this.bomba);\r\n if(this.bomba == 0){\r\n this.alertService.showMessage(\"\", \"Prenda el motor\", MessageSeverity.error);\r\n }else{\r\n var data = {\r\n id: id,\r\n value: 1\r\n }\r\n this.showroomService.updatePanelValue(data).subscribe(_ => {\r\n document.getElementById('actuactorPanel'+id).style.display=\"initial\";\r\n });\r\n }\r\n }else{\r\n var data = {\r\n id: id,\r\n value: 1\r\n }\r\n this.showroomService.updatePanelValue(data).subscribe(_ => {\r\n document.getElementById('actuactorPanel'+id).style.display=\"initial\";\r\n });\r\n }\r\n\r\n\r\n }\r\n\r\n\r\n closeModal(id){\r\n var data = {\r\n id: id,\r\n value: 0\r\n }\r\n this.showroomService.updatePanelValue(data).subscribe(_ => {\r\n document.getElementById('actuactorPanel'+id).style.display=\"none\";\r\n });\r\n }\r\n\r\n playButtonShowRoom(){\r\n this.startButton = 1;\r\n this.stopButton = 1;\r\n var value6,value7;\r\n this.actuators.filter(_ => {\r\n if(_.id == 6){\r\n value6 = 1;\r\n }\r\n if(_.id == 7){\r\n value7 = 0;\r\n }\r\n });\r\n this.save(6,value6);\r\n this.save(7,value7);\r\n }\r\n\r\n stopButtonShowRoom(){\r\n this.startButton = 0;\r\n this.stopButton = 0;\r\n var value6,value7;\r\n this.actuators.filter(_ => {\r\n if(_.id == 6){\r\n value6 = 0;\r\n }\r\n if(_.id == 7){\r\n value7 = 1;\r\n }\r\n });\r\n this.save(6,value6);\r\n this.save(7,value7);\r\n }\r\n\r\n playButtonAlert(){\r\n this.showroomService.startAlert().subscribe(_ =>{});\r\n this.startAlert = 1;\r\n this.stopAlert = 1;\r\n var value11,value12;\r\n this.actuators.filter(_ => {\r\n if(_.id == 11){\r\n value11 = 1;\r\n }\r\n if(_.id == 12){\r\n value12 = 0;\r\n }\r\n });\r\n this.save(11,value11);\r\n this.save(12,value12);\r\n }\r\n\r\n stopButtonAlert(){\r\n this.showroomService.stopAlert().subscribe(_ =>{});\r\n this.startAlert = 0;\r\n this.stopAlert = 0;\r\n var value11,value12;\r\n this.actuators.filter(_ => {\r\n if(_.id == 11){\r\n value11 = 0;\r\n }\r\n if(_.id == 12){\r\n value12 = 1;\r\n }\r\n });\r\n this.save(11,value11);\r\n this.save(12,value12);\r\n }\r\n\r\n save(id,value){\r\n var data = {\r\n id: id,\r\n value: value\r\n }\r\n\r\n this.showroomService.updateSensorValue(data).subscribe(_ => {\r\n console.log(\"UPDATE SENSOR: \",_);\r\n });\r\n }\r\n\r\n toggleFullScreen() {\r\n if (!this.isFullScreen) {\r\n this.docElement.requestFullscreen();\r\n }\r\n else {\r\n document.exitFullscreen();\r\n }\r\n this.isFullScreen = !this.isFullScreen;\r\n }\r\n\r\n showPBI(){\r\n let dialogRef = this.dialog.open(ModalReportSensorPbiShowRoomComponent, {\r\n width: '1000px',\r\n });\r\n\r\n }\r\n}\r\n","\r\n
\r\n","import { ChangeContext } from '@angular-slider/ngx-slider';\r\nimport { Component, Input, OnInit } from '@angular/core';\r\nimport { ShowRoomService } from 'src/app/services/showroom/showroom.service';\r\nimport { AlertService, MessageSeverity } from 'src/app/shared/services/alert.service';\r\nimport { environment } from 'src/environments/environment';\r\nimport * as signalR from '@microsoft/signalr';\r\nimport { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';\r\nimport { DOCUMENT } from '@angular/common';\r\n\r\n\r\n@Component({\r\n selector: 'app-showroom-actuator-panel',\r\n templateUrl: './showroom-actuator-panel.component.html',\r\n styleUrls: ['./showroom-actuator-panel.component.css']\r\n})\r\nexport class ShowroomActuatorPanelComponent implements OnInit {\r\n private _hubConnection: HubConnection;\r\n @Input('data') item : any;\r\n @Input('items') items : any;\r\n dataValue: any;\r\n imagePanel = environment.pathFile + \"assets/showroom/1.png\";\r\n imagePanelOrden = 1;\r\n showActuatorPanel=false;\r\n actuators = [];\r\n staticActuators = [];\r\n startButton = 0;\r\n stopButton = 0;\r\n startAlert = 0;\r\n stopAlert = 0;\r\n stepIndex: number = 0;\r\n showScreenshot = false;\r\n showMenu = false;\r\n tiempoDisabledResistencia = false;\r\n disabledResistencia: any;\r\n offResistencia: any;\r\n showData = true;\r\n\r\n constructor(\r\n private alertService: AlertService,\r\n public showroomService: ShowRoomService) {}\r\n\r\n ngOnInit(): void {\r\n if(this.item.id != 5 && this.item.id != 8 && this.item.id != 9){\r\n var _this = this;\r\n this.dataValue = this.item.value;\r\n const connection = this._hubConnection = new HubConnectionBuilder()\r\n .withUrl(environment.wsUrl +\"/ws/showroom\",{\r\n skipNegotiation: true,\r\n transport: signalR.HttpTransportType.WebSockets\r\n })\r\n .withAutomaticReconnect()\r\n .build();\r\n var _this = this;\r\n console.log(environment.wsUrl +\"/ws/showroom\");\r\n connection.on(\"streamingActuator\", (actuator) => {\r\n var actuator = actuator.data;\r\n if(actuator.id == _this.item.idOrigin){\r\n if(_this.item.maxLimit > 0){\r\n var value = 0;\r\n if(actuator.id == 2){ // centrifuga\r\n if(actuator.value == 0){\r\n value = 0;\r\n }else{\r\n value = (actuator.value-85)/1.7;\r\n }\r\n }else if(actuator.id == 1){ // faja\r\n if(actuator.value == 0){\r\n value = 0;\r\n }else{\r\n value = (actuator.value-36.061)/2.1894;\r\n }\r\n }\r\n _this.item.value = value;\r\n console.log(\"value actuator: \",value);\r\n }\r\n }\r\n });\r\n connection.start().catch(err => document.write(err));\r\n /*setInterval(function () {\r\n if(_this.showData){\r\n _this.showData = false;\r\n _this.showroomService.getActuatorValue(_this.item.idOrigin).subscribe(_ => {\r\n if(_.data.maxLimit > 0){\r\n _this.item.value =(_.data.value * 100) / _.data.maxLimit;\r\n }\r\n _this.showData = true;\r\n });\r\n }\r\n },\r\n 1000)*/\r\n };\r\n }\r\n\r\n onInputChange(changeContext: ChangeContext,item:any): void {\r\n var data = changeContext.value;\r\n var value = data;\r\n if(item.maxLimit > 0){\r\n if(item.id == 2){ // centrifuga\r\n if(data == 0){\r\n value = 0;\r\n }else{\r\n value = (1.7*data+85);\r\n }\r\n }else if(item.id == 1){ // faja\r\n if(data == 0){\r\n value = 0;\r\n }else{\r\n value = 2.1894*data+36.061;\r\n }\r\n }\r\n }\r\n this.dataValue = parseFloat(value.toString());\r\n this.save();\r\n }\r\n\r\n\r\n onChangeToogle(value, id){\r\n var value = this.dataValue;\r\n if(this.item.id == 4){ //resistencia\r\n if(!this.tiempoDisabledResistencia){\r\n if(this.item.maxLimit > 0){\r\n if(value){this.dataValue = 0; }else{this.dataValue = this.item.maxLimit; }\r\n }else{\r\n if(value){this.dataValue = 0; }else{this.dataValue = 1; }\r\n }\r\n this.item.value = this.dataValue;\r\n var _this = this;\r\n this.save();\r\n if(this.dataValue){\r\n this.showroomService.setResistencia(true);\r\n this.offResistencia = setInterval(function () {\r\n _this.item.value = 0;\r\n _this.dataValue = 0;\r\n _this.tiempoDisabledResistencia = true;\r\n _this.showroomService.setResistencia(false);\r\n _this.save();\r\n clearInterval(_this.offResistencia);\r\n },\r\n 30000);\r\n this.disabledResistencia = setInterval(function () {\r\n _this.save();\r\n _this.tiempoDisabledResistencia = false;\r\n clearInterval(_this.offResistencia);\r\n clearInterval(_this.disabledResistencia);\r\n },\r\n 180000);\r\n\r\n }else{\r\n this.showroomService.setResistencia(false);\r\n clearInterval(_this.disabledResistencia);\r\n clearInterval(_this.offResistencia);\r\n this.tiempoDisabledResistencia = false;\r\n }\r\n }else{\r\n this.alertService.showMessage(\"\", \"Por favor, esperar 3 minutos para volver a activar\", MessageSeverity.error);\r\n }\r\n }else{\r\n if(this.item.maxLimit > 0){\r\n if(value){this.dataValue = 0; }else{this.dataValue = this.item.maxLimit; }\r\n }else{\r\n if(value){this.dataValue = 0; }else{this.dataValue = 1; }\r\n }\r\n if(this.item.id == 8){ this.showroomService.setBomba(this.dataValue); } // Bomba\r\n if(this.item.id == 9){ this.showroomService.setValvulaSelenoide(this.dataValue); } // VĆ”lvula Selenoide\r\n this.save();\r\n\r\n\r\n if(this.item.id == 8){\r\n if(this.dataValue){\r\n this.alertService.showMessage(\"\", \"Se prendiĆ³ la bomba\", MessageSeverity.success);\r\n }else{\r\n this.alertService.showMessage(\"\", \"Se apagĆ³ la bomba\", MessageSeverity.error);\r\n }\r\n }\r\n }\r\n }\r\n\r\n onChangeToogleChild(idParent, value, id){\r\n if(value){ this.dataValue = 0; }else{ this.dataValue = 1; }\r\n this.item.value = !this.dataValue;\r\n this.save();\r\n }\r\n\r\n onInputChangeSlider($event: any,item:any) {\r\n this.stepIndex = +$event.value;\r\n var array = item.stepOptions.split(\",\");\r\n var data = parseInt(array[this.stepIndex]);\r\n this.dataValue = data;\r\n this.save();\r\n }\r\n\r\n save(){\r\n var data = {\r\n id: this.item.id,\r\n value: this.dataValue\r\n }\r\n\r\n this.showroomService.updateSensorValue(data).subscribe(_ => {\r\n console.log(\"UPDATE SENSOR: \",_);\r\n });\r\n }\r\n\r\n}\r\n","\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n \r\n \r\n \r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n ![]()
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n \r\n\r\n\r\n \r\n\r\n\r\n\r\n
\r\n\r\n close \r\n
\r\n \r\n G&S\r\n gestiĆ³n y sistemas\r\n
\r\n\r\n\r\n G&S LAB\r\n
\r\n\r\n{{nivel}}
\r\n{{presion}}
\r\n{{temperatura}}
\r\n\r\n","import { ChangeContext } from '@angular-slider/ngx-slider';\r\nimport { HttpErrorResponse } from '@angular/common/http';\r\nimport { Component, OnInit } from '@angular/core';\r\nimport { NgxSpinnerService } from 'ngx-spinner';\r\nimport { ShowRoomService } from 'src/app/services/showroom/showroom.service';\r\nimport { AlertService, MessageSeverity } from 'src/app/shared/services/alert.service';\r\nimport { environment } from 'src/environments/environment';\r\nimport * as signalR from '@microsoft/signalr';\r\nimport { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';\r\nimport { ModalReportSensorPbiShowRoomComponent } from 'src/app/shared/components/modals/showroom/modal-report-sensor-pbi/modal-report-sensor-pbi-show-room.component';\r\nimport { MatDialog } from '@angular/material';\r\n\r\n@Component({\r\n selector: 'app-showroom-panel-diagram',\r\n templateUrl: './showroom-panel-diagram.component.html',\r\n styleUrls: ['./showroom-panel-diagram.component.css']\r\n})\r\nexport class ShowroomPanelDiagramComponent implements OnInit {\r\n private _hubConnection: HubConnection;\r\n imagePanelOrden = 1;\r\n showActuatorPanel=false;\r\n actuators = [];\r\n staticActuators = [];\r\n startButton = 0;\r\n stopButton = 0;\r\n startAlert = 0;\r\n stopAlert = 0;\r\n imagePanel = \"\";\r\n stepIndex: number = 0;\r\n showScreenshot = false;\r\n showMenu = false;\r\n docElement: HTMLElement;\r\n isFullScreen: boolean = false;\r\n nivel = \"\";\r\n temperatura = 0;\r\n presion = \"\";\r\n showDataPanel = true;\r\n bomba = 0;\r\n\r\n constructor(\r\n private alertService: AlertService,\r\n private spinner: NgxSpinnerService,\r\n public dialog: MatDialog,\r\n public showroomService: ShowRoomService) {\r\n var _this = this;\r\n this.imagePanel = environment.pathFile + \"assets/showroom/\"+this.showroomService.getImageDiagram()+\".png\";\r\n setInterval(function () {\r\n _this.listPanels();\r\n },\r\n 1000);\r\n\r\n var _this = this;\r\n const connection = this._hubConnection = new HubConnectionBuilder()\r\n .withUrl(environment.wsUrl +\"/ws/showroom\",{\r\n skipNegotiation: true,\r\n transport: signalR.HttpTransportType.WebSockets\r\n })\r\n .withAutomaticReconnect()\r\n .build();\r\n var _this = this;\r\n console.log(environment.wsUrl +\"/ws/showroom\");\r\n connection.on(\"updatePanel\", (panel) => {\r\n if(panel.value == \"1\"){ document.getElementById('actuactorPanel'+panel.id).style.display=\"initial\"; }\r\n else{ document.getElementById('actuactorPanel'+panel.id).style.display=\"none\"; }\r\n });\r\n connection.on(\"streamingSensors\", (sensores) => {\r\n _this.nivel = _this.showroomService.getNivel();\r\n _this.temperatura = _this.showroomService.getTemperatura();\r\n _this.presion = _this.showroomService.getPresion();\r\n });\r\n connection.start().catch(err => document.write(err));\r\n }\r\n\r\n ngOnInit(): void {\r\n this.docElement = document.documentElement;\r\n this.getListActuators();\r\n }\r\n\r\n selectMenu(){\r\n this.showMenu = !this.showMenu;\r\n }\r\n\r\n saveActuators(){\r\n //this.spinner.show();\r\n console.log('data enviada');\r\n console.log(this.actuators);\r\n this.showroomService.updateActuators(this.actuators).subscribe((_) => {\r\n // this.spinner.hide();\r\n },\r\n (error: HttpErrorResponse) => {\r\n // this.spinner.hide();\r\n });\r\n }\r\n\r\n getListActuators(){\r\n this.spinner.show();\r\n this.showroomService.getListActuators().subscribe((_) => {\r\n this.actuators = _.data;\r\n var start = parseInt(this.actuators.filter(_ => _.id == 6)[0].value);\r\n var stop = parseInt(this.actuators.filter(_ => _.id == 7)[0].value);\r\n var startAlert = parseInt(this.actuators.filter(_ => _.id == 11)[0].value);\r\n var stopAlert = parseInt(this.actuators.filter(_ => _.id == 12)[0].value);\r\n // if(start==1 && stop==0){ start = 0; }\r\n this.stopButton = stop;\r\n this.startButton = start;\r\n this.stopAlert = stopAlert;\r\n this.startAlert = startAlert;\r\n this.actuators.filter(_ => {\r\n let options;\r\n _.idOrigin=_.id;\r\n if(_.idSensors != null){\r\n _.idPanel = \"panelActuator\"+_.id;\r\n if(_.maxLimit > 0){\r\n _.value =(_.value * 100) / _.maxLimit;\r\n }\r\n if(_.type==2){\r\n _.colors = ['#e5f6ff', '#82cfff'];\r\n }else{\r\n if(_.stepOptions != \"\" && _.stepOptions){\r\n var stepsArray = [];\r\n var array = _.stepOptions.split(\",\");\r\n array.forEach(function(n) {\r\n stepsArray.push({value: n});\r\n })\r\n options = {\r\n floor: 0,\r\n ceil: 100,\r\n showTicks: false,\r\n showTicksValues: true,\r\n stepsArray: stepsArray,\r\n showSelectionBar: true,\r\n selectionBarGradient: {\r\n from: 'white',\r\n to: '#01c4e7'\r\n }\r\n };\r\n }else{\r\n options = {\r\n floor: 0,\r\n ceil: 100,\r\n showSelectionBar: true,\r\n selectionBarGradient: {\r\n from: 'white',\r\n to: '#01c4e7'\r\n }\r\n }\r\n }\r\n }\r\n }\r\n if(_.type == 6){\r\n _.relationshipActuators.filter(__ => {\r\n __.idPanel = \"panelActuator\"+__.id;\r\n __.update = 0;\r\n this.actuators.push(__);\r\n });\r\n }\r\n\r\n _.dataValue = _.value;\r\n _.options = options;\r\n _.update = 0;\r\n _.beforeValue = _.value;\r\n });\r\n this.staticActuators = this.actuators;\r\n this.staticActuators = this.staticActuators.filter(_ => _.id != 6 && _.id != 7 && _.id != 11 && _.id != 12);\r\n console.log(this.staticActuators);\r\n this.spinner.hide();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n nextPanel(){\r\n /*this.imagePanelOrden++;\r\n if(this.imagePanelOrden == 8){\r\n this.imagePanelOrden=1;\r\n }\r\n\r\n this.imagePanel = environment.pathFile + \"assets/showroom/\"+this.imagePanelOrden+\".png\";*/\r\n }\r\n\r\n showPanel(id){\r\n if(id == 4){ //Resistencia\r\n // var motor = this.actuators.filter(x => x.id == 8)[0]; //motor\r\n //console.log(\"actuators\" , this.actuators)\r\n console.log(\"motor value\",this.bomba);\r\n if(this.bomba == 0){\r\n this.alertService.showMessage(\"\", \"Prenda el motor\", MessageSeverity.error);\r\n }else{\r\n var data = {\r\n id: id,\r\n value: 1\r\n }\r\n this.showroomService.updatePanelValue(data).subscribe(_ => {\r\n console.log(\"updatePanelValue: \",_);\r\n document.getElementById('actuactorPanel'+id).style.display=\"initial\";\r\n });\r\n }\r\n }else{\r\n var data = {\r\n id: id,\r\n value: 1\r\n }\r\n this.showroomService.updatePanelValue(data).subscribe(_ => {\r\n console.log(\"updatePanelValue: \",_);\r\n document.getElementById('actuactorPanel'+id).style.display=\"initial\";\r\n });\r\n }\r\n\r\n }\r\n\r\n closeModal(id){\r\n\r\n var data = {\r\n id: id,\r\n value: 0\r\n }\r\n this.showroomService.updatePanelValue(data).subscribe(_ => {\r\n console.log(\"actuactorPanel: \",_);\r\n document.getElementById('actuactorPanel'+id).style.display=\"none\";\r\n });\r\n }\r\n\r\n playButtonShowRoom(){\r\n this.startButton = 1;\r\n this.stopButton = 1;\r\n var value6,value7;\r\n this.actuators.filter(_ => {\r\n if(_.id == 6){\r\n value6 = 1;\r\n }\r\n if(_.id == 7){\r\n value7 = 0;\r\n }\r\n });\r\n console.log(\"valor de showroom play\",value6);\r\n this.save(6,value6);\r\n //this.save(7,value7);\r\n }\r\n\r\n stopButtonShowRoom(){\r\n this.startButton = 0;\r\n this.stopButton = 0;\r\n var value6,value7;\r\n this.actuators.filter(_ => {\r\n if(_.id == 6){\r\n value6 = 0;\r\n }\r\n if(_.id == 7){\r\n value7 = 1;\r\n }\r\n });\r\n console.log(\"valor de showroom play\",value6);\r\n this.save(6,value6);\r\n //this.save(7,value7);\r\n }\r\n\r\n playButtonAlert(){\r\n this.showroomService.startAlert().subscribe(_ =>{});\r\n this.startAlert = 1;\r\n this.stopAlert = 1;\r\n var value11,value12;\r\n this.actuators.filter(_ => {\r\n if(_.id == 11){\r\n value11 = 1;\r\n }\r\n if(_.id == 12){\r\n value12 = 0;\r\n }\r\n });\r\n this.save(11,value11);\r\n this.save(12,value12);\r\n }\r\n\r\n stopButtonAlert(){\r\n this.showroomService.stopAlert().subscribe(_ =>{});\r\n this.startAlert = 0;\r\n this.stopAlert = 0;\r\n var value11,value12;\r\n this.actuators.filter(_ => {\r\n if(_.id == 11){\r\n value11 = 0;\r\n }\r\n if(_.id == 12){\r\n value12 = 1;\r\n }\r\n });\r\n this.save(11,value11);\r\n this.save(12,value12);\r\n }\r\n\r\n save(id,value){\r\n var data = {\r\n id: id,\r\n value: value\r\n }\r\n console.log(data);\r\n this.showroomService.updateSensorValue(data).subscribe(_ => {\r\n console.log(\"UPDATE SENSOR: \",_);\r\n });\r\n }\r\n\r\n toggleFullScreen() {\r\n if (!this.isFullScreen) {\r\n this.docElement.requestFullscreen();\r\n }\r\n else {\r\n document.exitFullscreen();\r\n }\r\n this.isFullScreen = !this.isFullScreen;\r\n }\r\n\r\n sharedWindow(value){\r\n //this.sharedVideoAnalitica(0);\r\n var data ={\r\n id: 'sharedControl',\r\n value: 1\r\n }\r\n this.showroomService.updatePanelValue(data).subscribe(_ =>{\r\n console.log(\"update shared\");\r\n });\r\n }\r\n\r\n sharedVideoAnalitica(value){\r\n this.sharedWindow(0);\r\n var data ={\r\n id: 'sharedControl',\r\n value: 0\r\n }\r\n this.showroomService.updatePanelValue(data).subscribe(_ =>{\r\n console.log(\"update shared\");\r\n });\r\n }\r\n\r\n listPanels(){\r\n var _this = this;\r\n _this.nivel = _this.showroomService.getNivel();\r\n _this.temperatura = _this.showroomService.getTemperatura();\r\n _this.presion = _this.showroomService.getPresion();\r\n _this.bomba = _this.showroomService.getBomba();\r\n\r\n if(_this.showDataPanel){\r\n\r\n _this.showroomService.getPanels().subscribe(_=>{\r\n if(_.error == null){\r\n _this.showDataPanel = false;\r\n _.data = _.data.filter(_ =>_.id != 'sharedControl');\r\n _.data.forEach( _ =>{\r\n\r\n if(_.id == 0){\r\n _this.imagePanel = environment.pathFile + \"assets/showroom/\"+_.value+\".png\";\r\n }else{\r\n if(_.value){ document.getElementById('actuactorPanel'+_.id).style.display=\"initial\"; }\r\n else{ document.getElementById('actuactorPanel'+_.id).style.display=\"none\"; }\r\n }\r\n\r\n });\r\n _this.showDataPanel = true;\r\n }\r\n });\r\n }\r\n }\r\n\r\n showPBI(){\r\n let dialogRef = this.dialog.open(ModalReportSensorPbiShowRoomComponent, {\r\n width: '1000px',\r\n });\r\n }\r\n}\r\n","\r\n ;\r\n finalValue: number = 0;\r\n options: Options = {\r\n floor: 0,\r\n ceil: 100,\r\n showSelectionBar: true,\r\n selectionBarGradient: {\r\n from: 'white',\r\n to: '#01c4e7'\r\n }\r\n };\r\n\r\n options2: Options = {\r\n floor: 0,\r\n ceil: 100,\r\n showTicks: false,\r\n showTicksValues: true,\r\n stepsArray: [\r\n {value: 0},\r\n {value: 10},\r\n {value: 25},\r\n {value: 50},\r\n {value: 100}\r\n ],\r\n showSelectionBar: true,\r\n selectionBarGradient: {\r\n from: 'white',\r\n to: '#01c4e7'\r\n }\r\n };\r\n \r\n constructor(\r\n public dialog: MatDialog,\r\n private router: Router,\r\n private spinner: NgxSpinnerService,\r\n private _sanitizer: DomSanitizer,\r\n public showroomService: ShowRoomService,\r\n public captureService: NgxCaptureService) {\r\n this.spinner.show();\r\n }\r\n\r\n ngOnInit(): void {\r\n this.getListActuators();\r\n }\r\n\r\n selectMenu(){\r\n this.showMenu = !this.showMenu;\r\n }\r\n\r\n onInputChangeSlider($event: any,item:any) {\r\n this.stepIndex = +$event.value;\r\n var array = item.stepOptions.split(\",\");\r\n var data = parseInt(array[this.stepIndex]);\r\n this.actuators.filter(_ => {\r\n if(_.id == item.id){\r\n if(data != _.value){ _.update = 1; }else{ _.update = 0; }\r\n _.value = data;\r\n }\r\n });\r\n //document.getElementById(\"value-slider\"+item.id).innerHTML = array[this.stepIndex] + \"%\";\r\n this.saveActuators();\r\n }\r\n /*\r\n @HostListener('contextmenu', ['$event'])\r\n onRightClick(event) {\r\n event.preventDefault();\r\n }\r\n */\r\n getListActuators(){\r\n this.showroomService.getListActuators().subscribe((_) => {\r\n this.actuators = _.data;\r\n var start = parseInt(this.actuators.filter(_ => _.id == 6)[0].value);\r\n var stop = parseInt(this.actuators.filter(_ => _.id == 7)[0].value);\r\n var startAlert = parseInt(this.actuators.filter(_ => _.id == 11)[0].value);\r\n var stopAlert = parseInt(this.actuators.filter(_ => _.id == 12)[0].value);\r\n // if(start==1 && stop==0){ start = 0; }\r\n this.stopButton = stop;\r\n this.startButton = start; \r\n this.stopAlert = stopAlert;\r\n this.startAlert = startAlert; \r\n this.actuators.filter(_ => {\r\n let options;\r\n console.log(\"sensors \"+ _.idSensors);\r\n _.idPanel = \"panelActuator\"+_.id;\r\n if(_.maxLimit > 0){\r\n _.value =(_.value * 100) / _.maxLimit;\r\n }\r\n if(_.type==2){\r\n _.colors = ['#e5f6ff', '#82cfff'];\r\n }else{\r\n if(_.stepOptions != \"\" && _.stepOptions){\r\n var stepsArray = [];\r\n var array = _.stepOptions.split(\",\");\r\n array.forEach(function(n) {\r\n stepsArray.push({value: n});\r\n })\r\n options = {\r\n floor: 0,\r\n ceil: 100,\r\n showTicks: false,\r\n showTicksValues: true,\r\n stepsArray: stepsArray,\r\n showSelectionBar: true,\r\n selectionBarGradient: {\r\n from: 'white',\r\n to: '#01c4e7'\r\n }\r\n };\r\n }else{\r\n options = {\r\n floor: 0,\r\n ceil: 100,\r\n showSelectionBar: true,\r\n selectionBarGradient: {\r\n from: 'white',\r\n to: '#01c4e7'\r\n }\r\n }\r\n }\r\n }\r\n\r\n if(_.type == 6){\r\n _.relationshipActuators.filter(__ => {\r\n __.idPanel = \"panelActuator\"+__.id;\r\n __.update = 0;\r\n });\r\n }\r\n console.log(\"valor :\"+ _.value);\r\n _.dataValue = _.value;\r\n _.options = options;\r\n _.update = 0;\r\n _.beforeValue = _.value;\r\n });\r\n this.staticActuators = this.actuators;\r\n this.staticActuators = this.staticActuators.filter(_ => _.id != 6 && _.id != 7 && _.id != 11 && _.id != 12);\r\n console.log(this.staticActuators);\r\n this.spinner.hide();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n\r\n formatLabel(value: number | null) {\r\n if (!value) {\r\n return 0;\r\n }\r\n\r\n if (value >= 1000) {\r\n var data = Math.round(value / 1000);\r\n return data + '%';\r\n }\r\n \r\n return value;\r\n }\r\n\r\n formatLabel2(value: number | null) {\r\n if (!value) {\r\n return 0;\r\n }\r\n var array = [0, 25, 50, 75, 90];\r\n value = array[value];\r\n\r\n if (value >= 1000) {\r\n var data = Math.round(value / 1000);\r\n return data + '%';\r\n }\r\n \r\n return value;\r\n }\r\n\r\n onInputChange(changeContext: ChangeContext,item:any): void {\r\n var data = changeContext.value;\r\n var id = item.id;\r\n var beforeValue = item.beforeValue;\r\n // document.getElementById(\"value-slider\"+id).innerHTML = data.toString() + \"%\";\r\n /**/\r\n this.actuators.filter(_ => {\r\n if(_.id == id){\r\n if(data != beforeValue){ _.update = 1; }else{ _.update = 0; }\r\n var dataValue = data;\r\n if(item.maxLimit > 0){\r\n dataValue = (item.maxLimit * data)/100;\r\n }\r\n _.dataValue = parseFloat(dataValue.toString());\r\n _.value = data;\r\n _.beforeValue = data;\r\n }\r\n });\r\n this.staticActuators = this.actuators;\r\n this.staticActuators = this.staticActuators.filter(_ => _.id != 6 && _.id != 7 && _.id != 11 && _.id != 12);\r\n this.saveActuators();\r\n }\r\n\r\n /*onInputChange(data: any,item:any) {\r\n console.log(data);\r\n var data = Math.round(event.value / 1000);\r\n var id = event.source._elementRef.nativeElement.id\r\n document.getElementById(\"value-slider\"+id).innerHTML = data.toString() + \"%\";\r\n var dataValue = data;\r\n if(item.maxLimit > 0){\r\n dataValue = (item.maxLimit * data)/100;\r\n }\r\n this.actuators.filter(_ => {\r\n if(_.id == id){\r\n if(dataValue != _.value){ _.update = 1; }else{ _.update = 0; }\r\n _.value = dataValue;\r\n }\r\n });\r\n }*/\r\n\r\n onChangeToogle(value, id){\r\n var valueActuator;\r\n if(value){ valueActuator = 0; }else{ valueActuator = 1; }\r\n this.actuators.filter(_ => {\r\n if(_.id == id){\r\n _.update = 1;\r\n _.value = valueActuator;\r\n _.dataValue = _.value;\r\n if(_.type==6){\r\n _.relationshipActuators.filter(__ => {\r\n __.update = 1;\r\n __.value = 0;\r\n __.dataValue = __.value;\r\n });\r\n }\r\n }\r\n });\r\n this.staticActuators = this.actuators;\r\n this.staticActuators = this.staticActuators.filter(_ => _.id != 6 && _.id != 7 && _.id != 11 && _.id != 12);\r\n this.saveActuators();\r\n\r\n if(id == 14){ // Humedad\r\n var dataH = {\r\n id: id,\r\n value: valueActuator\r\n }\r\n var _this = this;\r\n clearInterval(_this.humedadLoop);\r\n this.humedadLoop = setInterval(()=>{\r\n _this.showroomService.updateSensorlValue(dataH).subscribe(_ =>{\r\n console.log(\"update sensor\");\r\n });\r\n },2000);\r\n }\r\n }\r\n\r\n onChangeToogleChild(idParent, value, id){\r\n this.actuators.filter(_ => {\r\n if(_.id == idParent){\r\n _.update = 1;\r\n _.relationshipActuators.filter(__ =>{\r\n if(__.id == id){\r\n __.update = 1;\r\n if(value){ __.value = 0; }else{ __.value = 1; }\r\n __.dataValue = __.value;\r\n }\r\n });\r\n }\r\n });\r\n this.staticActuators = this.actuators;\r\n this.staticActuators = this.staticActuators.filter(_ => _.id != 6 && _.id != 7 && _.id != 11 && _.id != 12);\r\n this.saveActuators();\r\n }\r\n/*\r\n @HostListener('contextmenu', ['$event'])\r\n onRightClick(event) {\r\n event.preventDefault();\r\n }\r\n*/\r\n saveActuators(){\r\n //this.spinner.show();\r\n console.log('data enviada');\r\n console.log(this.actuators);\r\n this.showroomService.updateActuators(this.actuators).subscribe((_) => {\r\n // this.spinner.hide();\r\n },\r\n (error: HttpErrorResponse) => {\r\n // this.spinner.hide();\r\n });\r\n }\r\n\r\n playButtonShowRoom(){\r\n this.startButton = 1;\r\n this.stopButton = 1;\r\n this.actuators.filter(_ => {\r\n if(_.id == 6){\r\n _.update = 1;\r\n _.value = 1;\r\n }\r\n if(_.id == 7){\r\n _.update = 1;\r\n _.value = 0;\r\n }\r\n _.dataValue = _.value;\r\n });\r\n this.saveActuators();\r\n }\r\n\r\n stopButtonShowRoom(){\r\n this.startButton = 0;\r\n this.stopButton = 0;\r\n this.actuators.filter(_ => {\r\n if(_.id == 6){\r\n _.update = 1;\r\n _.value = 0;\r\n }\r\n if(_.id == 7){\r\n _.update = 1;\r\n _.value = 1;\r\n }\r\n _.dataValue = _.value;\r\n });\r\n console.log(this.actuators);\r\n this.saveActuators();\r\n }\r\n\r\n playButtonAlert(){\r\n this.showroomService.startAlert().subscribe(_ =>{});\r\n this.startAlert = 1;\r\n this.stopAlert = 1;\r\n this.actuators.filter(_ => {\r\n if(_.id == 11){\r\n _.update = 1;\r\n _.value = 1;\r\n }\r\n if(_.id == 12){\r\n _.update = 1;\r\n _.value = 0;\r\n }\r\n _.dataValue = _.value;\r\n });\r\n this.saveActuators();\r\n } \r\n\r\n stopButtonAlert(){\r\n this.showroomService.stopAlert().subscribe(_ =>{});\r\n this.startAlert = 0;\r\n this.stopAlert = 0;\r\n this.actuators.filter(_ => {\r\n if(_.id == 11){\r\n _.update = 1;\r\n _.value = 0;\r\n }\r\n if(_.id == 12){\r\n _.update = 1;\r\n _.value = 1;\r\n }\r\n _.dataValue = _.value;\r\n });\r\n this.saveActuators();\r\n }\r\n\r\n changeIcon(){\r\n this.router.navigate(['/gys/showroom']);\r\n }\r\n\r\n save(){ \r\n this.spinner.show();\r\n this.saveActuators();\r\n var _this = this;\r\n setTimeout(function(){\r\n html2canvas(document.querySelector('.control-actuators')).then(function(canvas) {\r\n _this.imagePath = canvas.toDataURL('image/png');\r\n _this.showScreenshot = true; \r\n _this.spinner.hide();\r\n setTimeout(function(){\r\n _this.showScreenshot = false; \r\n }, 3000)\r\n });\r\n }, 100);\r\n }\r\n\r\n getDate(){\r\n var d = new Date(),\r\n hora = d.getHours(),\r\n minutos = d.getMinutes(),\r\n segundos = d.getSeconds(),\r\n month = (d.getMonth()+1),\r\n day = d.getDate().toString();\r\n if(parseInt(day) < 10){ day = \"0\"+day.toString(); }\r\n var m = month.toString();\r\n if(month < 10){ m = \"0\"+month; }\r\n return d.getFullYear() + \"-\" + m + \"-\" + day + \" \"+ hora+\":\"+minutos+\":\"+segundos;\r\n }\r\n\r\n}\r\n","![]()
","import { Component, OnInit } from '@angular/core';\r\nimport { io } from \"socket.io-client\";\r\n\r\n@Component({\r\n selector: 'app-showroom-va-streaming',\r\n templateUrl: './showroom-va-streaming.component.html',\r\n styleUrls: ['./showroom-va-streaming.component.css']\r\n})\r\n\r\nexport class ShowroomVAStreamingComponent implements OnInit {\r\n socket = io('ws://192.168.2.51:8080/camera-feed');\r\n\r\n constructor() { \r\n }\r\n\r\n ngOnInit(): void {\r\n this.socket.on('new-frame', message => {\r\n document.getElementById('camera-frame').setAttribute(\r\n 'src', `data:image/jpeg;base64,${message.base64}`\r\n );\r\n });\r\n var _this = this;\r\n window.setInterval(() => {\r\n _this.socket.emit('request-frame', {});\r\n }, 100);\r\n }\r\n}\r\n","();\r\n reportForm: FormGroup;\r\n myDate = new Date();\r\n alertSelect: number = 0;\r\n idStorageFile: number;\r\n date = new Date();\r\n dateF = new Date();\r\n timeI: string;\r\n timeF: string;\r\n dateV:string;\r\n\r\n dateIView:string;\r\n dateFView:string;\r\n\r\n image: any;\r\n file: File = null;\r\n canvas: any;\r\n genredCanva: boolean = true;\r\n nameMarker: string = '';\r\n cameraId: number = 0;\r\n cameraSelect: number = 0;\r\n cameras = [];\r\n zoneId: number = 0;\r\n filterCamera = '';\r\n countAlerts = 0;\r\n isAdministrator=false;\r\n cameraAlert = [];\r\n cameraAlertType = [];\r\n filter = 0;\r\n private _hubConnection: HubConnection;\r\n\r\n constructor(\r\n public dialog: MatDialog,\r\n private spinner: NgxSpinnerService,\r\n private enterpriseService: EnterpriseService,\r\n private cameraService: CameraService,\r\n private alertService: AlertService,\r\n private OcurrenceService: OcurrenceService,\r\n private showRoomService: ShowRoomService,\r\n private formBuilder: FormBuilder,\r\n private datePipe: DatePipe\r\n ) {\r\n this.cameraSelect = 235//228;\r\n }\r\n\r\n ngOnInit() {\r\n this.createForm();\r\n this.timeI = this.datePipe.transform(\"Tue Aug 18 2020 00:00:58 GMT-0500\", 'HH:mm');\r\n this.timeF = this.datePipe.transform(\"Tue Aug 18 2020 23:59:58 GMT-0500\", 'HH:mm');\r\n this.dateV = this.datePipe.transform(this.myDate, 'yyyy-MM-dd');\r\n\r\n\r\n this.enterpriseSelect = parseInt(localStorage.getItem(AppConstants.Session.ENTERPRISE));\r\n this.getZonesByEnterprise(68);\r\n this.getCanvas();\r\n this.changeCamera();\r\n\r\n const connection = this._hubConnection = new HubConnectionBuilder()\r\n .withUrl(environment.wsUrl +\"/ws/showroom\",{\r\n skipNegotiation: true,\r\n transport: signalR.HttpTransportType.WebSockets\r\n })\r\n .withAutomaticReconnect()\r\n .build();\r\n var _this = this;\r\n connection.on(\"newAlertShowRoom\", (data) => {\r\n _this.cameraAlert.splice(0, 0, data);\r\n _this.countAlerts++;\r\n _this.OcurrenceService.GetListOcurrenceById(data.ocurennceId).subscribe((response) => {\r\n if(response.idStorageFile == 1){\r\n _this.imgAlert = environment.pathFile + response.patch;\r\n }\r\n });\r\n });\r\n connection.start().catch(err => document.write(err));\r\n /* connection.start().then(function () {\r\n\r\n var filterData;\r\n filterData = {\r\n dateI: 0,\r\n dateF: 0,\r\n timeI: 0,\r\n timeF: 0,\r\n zoneId: 142,\r\n alertId: _this.alertSelect,\r\n cameraId: 228\r\n };\r\n console.log(filterData);\r\n connection.stream('GetAlerts', filterData.toString()).subscribe({\r\n next: (response) => {\r\n console.log(\"return data alerts\",response);\r\n _this.cameraAlert = response;\r\n _this.countAlerts = response.length;\r\n if(response.length > 0 && _this.filter == 0){\r\n var dateI = _this.cameraAlert[response.length - 1].date;\r\n _this.date = dateI;\r\n _this.dateF = _this.myDate;\r\n }\r\n _this.spinner.hide();\r\n if(_this.countAlerts > 0){\r\n _this.clearCanvas();\r\n _this.createMarkers();\r\n _this.alerta(_this.cameraAlert[response.length - 1].ocurennceId,1);\r\n }\r\n },\r\n complete: () => {\r\n console.log(\"finished.\");\r\n },\r\n error: (err) => {\r\n console.log(err);\r\n }\r\n });\r\n })*/\r\n\r\n\r\n\r\n\r\n\r\n /* window.setInterval(() => {\r\n this.socketShowRoom.emit('showroomshowroom/va', {});\r\n }, 100);\r\n this.refreshAlerts(1);\r\n //this.changeCamera();\r\n setInterval(() => {\r\n this.refreshAlerts(0);\r\n }, 2000);\r\n\r\n setInterval(() => {\r\n window.location.reload();\r\n },600000);*/\r\n }\r\n\r\n createForm() {\r\n this.reportForm = this.formBuilder.group({\r\n enterpriseId: [68, [Validators.required]],\r\n zoneId: [142, [Validators.required]],\r\n cameraReport: [228, [Validators.required]],\r\n alertReport: [0, []],\r\n });\r\n }\r\n\r\n refreshAlerts(init){\r\n this.updateColor();\r\n this.getCameras(this.enterpriseZoneSelect,0);\r\n this.ocurrenceListByCamera(init);\r\n }\r\n/*\r\n cameraList() {\r\n this.cameras = [];\r\n this.cameraService.GetListCameraByEnterprise(this.enterpriseSelect).subscribe((response) => {\r\n this.cameras = this.cameras.concat(response);\r\n this.cameraSelect = 0;\r\n this.createMarkers();\r\n this.changeCamera();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n }*/\r\n\r\n updateColor(){\r\n let data = this.listCameras;\r\n for(let j= 0;j < data.length;j++){\r\n let registers =\r\n {\r\n cameraId: data[j].cameraId\r\n }\r\n this.cameraService.postColor(registers).subscribe(\r\n result => {\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.alertService.showMessage(AppConstants.TitleModal.ERROR_TITLE, error.error.messages, MessageSeverity.error);\r\n }\r\n );\r\n }\r\n }\r\n\r\n get f() { return this.reportForm.controls; }\r\n\r\n showAllAlert(){\r\n this.cameraSelect = 228;\r\n this.alertSelect = 0;\r\n this.filterCamera = \"\";\r\n this.filter = 0;\r\n this.ocurrenceListByCamera(0);\r\n }\r\n\r\n getCanvas() {\r\n this.canvas = new fabric.Canvas('canvas');\r\n var _this = this;\r\n this.canvas.on('mouse:down', function (e) {\r\n _this.filterCamera = \" - \"+ e.target.camera;\r\n _this.cameraSelect = e.target.cameraId;\r\n _this.changeCamera();\r\n _this.reportForm.controls['cameraReport'].setValue(_this.cameraSelect);\r\n _this.ocurrenceListByCamera(0);\r\n // _this.cameraAlert = _this.cameraAlert.filter(x => x.cameraId == _this.cameraSelect);\r\n return false;\r\n });\r\n }\r\n\r\n getEnterprises() {\r\n this.enterpriseService.getEnterprises().subscribe((response) => {\r\n this.enterprises = response.filter(f => f.enabled == AppConstants.Flag.Active);\r\n this.enterpriseSelect = this.enterprises[0][\"enterpriseId\"];\r\n this.getZonesByEnterprise(this.enterpriseSelect);\r\n this.spinner.hide();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n getZonesByEnterprise(enterpriseId: number) {\r\n this.enterprisesZones = [];\r\n this.enterpriseService.getEnterpriseById(enterpriseId).subscribe((response => {\r\n if (response.enterpriseZone.length > 0) {\r\n this.idStorageFile = response.idStorageFile;\r\n this.enterprisesZones = response.enterpriseZone;\r\n this.enterprisesZones.forEach(function(e){\r\n if(response.idStorageFile == 1){ // Mode Local\r\n e.zonePath = environment.pathFile + e.zonePath;\r\n }\r\n });\r\n this.enterpriseZoneSelect = this.enterprisesZones[0][\"zoneId\"];\r\n if(this.enterprisesZones[0][\"zonePath\"]){\r\n this.changeImage(this.enterprisesZones[0][\"zonePath\"]);\r\n }else{\r\n this.changeImage('./assets/images/sin_image.jpg');\r\n }\r\n //this.getCameras(this.enterpriseZoneSelect,1);\r\n this.zoneId = this.enterpriseZoneSelect;\r\n this.reportForm.controls['zoneId'].setValue(this.zoneId);\r\n //this.ocurrenceListByCamera();\r\n this.getCameras(this.zoneId,1);\r\n } else {\r\n this.changeImage('./assets/images/sin_image.jpg');\r\n }\r\n this.spinner.hide();\r\n }),\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n getCameras(zoneId: number,init: number) {\r\n this.cameraService.getCameraByZoneCP(zoneId).subscribe((response => {\r\n this.listCameras = response;\r\n this.dataSource.data = this.listCameras;\r\n this.spinner.hide();\r\n if(init){\r\n this.clearCanvas();\r\n this.createMarkers();\r\n }\r\n }),\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n clearCanvas() {\r\n this.canvas.remove(...this.canvas.getObjects());\r\n }\r\n\r\n positionMarkers() {\r\n let data = this.canvas._objects.filter(f => f.cameraId != undefined);\r\n data.forEach(f => {\r\n let index = this.listCameras.findIndex(item => item.cameraId == f.cameraId);\r\n if (index != -1) {\r\n var obj = this.listCameras[index];\r\n obj.cameraPosX = f.group.left;\r\n obj.cameraPosY = f.group.top;\r\n }\r\n });\r\n }\r\n\r\n createMarkers() {\r\n for (var i = 0; i < this.listCameras.length; i++) {\r\n var obj = this.listCameras[i];\r\n if (obj.cameraPosX != 0 && obj.cameraPosY != 0) {\r\n //Dynamic red - alerts\r\n var color = obj.cameraColor;\r\n if(color == \"red\"){\r\n if(this.cameraAlert.filter(x => x.camera == obj.camera).length < 1){\r\n color = \"green\";\r\n }\r\n }\r\n this.newGroup(obj,color);\r\n }\r\n }\r\n }\r\n\r\n newGroup(obj,color) {\r\n var _this = this;\r\n if(this.idStorageFile == 1){ // Mode Local\r\n obj.pathPinMap = environment.pathFile + obj.pathPinMap;\r\n }\r\n new fabric.Image.fromURL(obj.pathPinMap,\r\n function(img) {\r\n img.scaleToWidth(40);\r\n img.scaleToHeight(40);\r\n var img1 = img.set({\r\n originX: 'center',\r\n originY: 'bottom',\r\n angle: 0,\r\n top: -10,\r\n scaleX: obj.oppositeMapDirection == '0' ? 0.1 : -0.1,\r\n scaleY: 0.1\r\n });\r\n\r\n var text = new fabric.Text(obj.camera, //.replace(\" \",\"\\n\")\r\n {\r\n textBackgroundColor:color,\r\n fill: 'white',\r\n fontSize: 15,\r\n originX: 'center',\r\n originY: 'center'\r\n }\r\n );\r\n\r\n var group = new fabric.Group([text, img1], {\r\n left: obj.cameraPosX,\r\n top: obj.cameraPosY,\r\n borderColor: 'transparent',\r\n hasControls: false,\r\n hasRotatingPoint: false,\r\n camera: obj.camera,\r\n cameraId: obj.cameraId,\r\n });\r\n\r\n _this.canvas.add(group);\r\n });\r\n }\r\n\r\n stopDragging(element) {\r\n element.lockMovementX = true;\r\n element.lockMovementY = true;\r\n }\r\n\r\n changeImage(urlImage : string) {\r\n fabric.Image.fromURL(urlImage, (img) => {\r\n img.set({\r\n opacity: 0.5,\r\n scaleX: this.canvas.width / img.width,\r\n scaleY: this.canvas.height / img.height,\r\n });\r\n this.canvas.setBackgroundImage(img, this.canvas.requestRenderAll.bind(this.canvas));\r\n });\r\n }\r\n\r\n ocurrenceListByCamera(init) {\r\n var filterData;\r\n //if(this.filter){\r\n filterData = {\r\n dateI: 0,\r\n dateF: 0,\r\n timeI: 0,\r\n timeF: 0,\r\n zoneId: 142,\r\n alertId: this.alertSelect,\r\n cameraId: 228\r\n };\r\n /*}else{\r\n filterData = {\r\n dateI: 0,\r\n dateF: 0,\r\n timeI: 0,\r\n timeF: 0,\r\n zoneId: 142,\r\n alertId: this.alertSelect,\r\n cameraId: 228\r\n };\r\n }\r\n*/\r\n this.OcurrenceService.GetListOcurrenceCP(filterData).subscribe((response) => {\r\n this.cameraAlert = response;\r\n this.countAlerts = response.length;\r\n if(response.length > 0 && this.filter == 0){\r\n var dateI = this.cameraAlert[response.length - 1].date;\r\n this.date = dateI;\r\n this.dateF = this.myDate;\r\n }\r\n this.spinner.hide();\r\n if(this.countAlerts > 0){\r\n this.clearCanvas();\r\n this.createMarkers();\r\n this.alerta(this.cameraAlert[0].ocurennceId,1);\r\n }\r\n /* if(filterData.cameraId != 0){\r\n this.filterCamera = \" - \"+ this.listCameras.find(x => x.cameraId == filterData.cameraId).camera;\r\n }else{\r\n this.filterCamera = \" - todas las cĆ”maras\";\r\n }*/\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n this.cameraAlert = [];\r\n });\r\n }\r\n\r\n showReport(){\r\n let dialogRef = this.dialog.open(ModalReportVideoAnaliticaShowRoomComponent, {\r\n data: {\r\n title: AppConstants.TitleModal.UPDATE_SENSOR,\r\n action: 0,\r\n },\r\n panelClass: 'report-modal',\r\n width: '1000px',\r\n hasBackdrop: true\r\n });\r\n }\r\n\r\n changeCamera() {\r\n this.cameraAlertType = [];\r\n this.alertSelect = 0;\r\n var cameraId = this.cameraSelect;// this.filterCameraId = 0 ? this.cameraSelect : this.filterCameraId;\r\n //if(cameraId != 0){\r\n this.cameraService.GetAlertByCamera(cameraId,0).subscribe((response) => {\r\n this.cameraAlertType = response;\r\n //this.alertSelect = cameraId;\r\n this.spinner.hide();\r\n this.searchAlerts();\r\n //this.searchAlerts();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.cameraAlertType = []\r\n });\r\n //}\r\n\r\n }\r\n\r\n alerta(id,init) {\r\n this.OcurrenceService.GetListOcurrenceById(id).subscribe((response) => {\r\n if(response.idStorageFile == 1){\r\n this.imgAlert = environment.pathFile + response.patch;\r\n }\r\n });\r\n /*var _this = this;\r\n setInterval(()=>{\r\n _this.filter = false;\r\n },10000);*/\r\n /*let dialogRef = this.dialog.open(PanelCameraModalComponent, {\r\n data: { ocurrenceId: id, cameraId: id1, enterpiseId: this.enterpriseSelect },\r\n width: '800px', hasBackdrop: true\r\n });\r\n\r\n dialogRef.afterClosed().subscribe(() => {\r\n this.refreshAlerts();\r\n });*/\r\n }\r\n\r\n searchAlerts(){\r\n if (this.reportForm.valid) {\r\n //this.filter = true;\r\n this.imgAlert = \"../../../../assets/images/sin_image.jpg\";\r\n var data = this.reportForm.value;\r\n this.ocurrenceListByCamera(0);\r\n /*var zone = this.reportForm.value[\"zoneId\"];\r\n if(this.enterpriseZoneSelect != zone){\r\n this.changeZone(zone);\r\n }else{\r\n var data = this.reportForm.value;\r\n this.ocurrenceListByCamera(data);\r\n }*/\r\n }\r\n }\r\n\r\n _keyUp(event: any) {\r\n let charCode = (event.which) ? event.which : event.keyCode;\r\n if (charCode != 46 && charCode != 58 && charCode > 31\r\n && (charCode < 48 || charCode > 57)) {\r\n return false;\r\n }\r\n }\r\n\r\n changeZone() {\r\n this.nameMarker = ''\r\n this.clearCanvas();\r\n this.zoneId = this.enterpriseZoneSelect;\r\n var item = this.enterprisesZones.filter(f => f.zoneId == this.zoneId);\r\n if(item[0][\"zonePath\"] != null && item[0][\"zonePath\"] != \"\"){\r\n this.changeImage(item[0][\"zonePath\"]);\r\n }\r\n this.getCameras(this.zoneId,1);\r\n }\r\n\r\n changeAlert(data){\r\n this.alertSelect = data.value;\r\n this.searchAlerts();\r\n }\r\n}\r\n","\r\n \r\n ","import { Options } from '@angular-slider/ngx-slider';\r\nimport { DOCUMENT } from '@angular/common';\r\nimport { HttpErrorResponse } from '@angular/common/http';\r\nimport { Component, HostListener, OnInit } from '@angular/core';\r\nimport { MatDialog } from '@angular/material';\r\nimport { Router } from '@angular/router';\r\nimport * as signalR from '@microsoft/signalr';\r\nimport { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';\r\nimport { ShowRoomService } from 'src/app/services/showroom/showroom.service';\r\nimport { ModalReportSensorPbiShowRoomComponent } from 'src/app/shared/components/modals/showroom/modal-report-sensor-pbi/modal-report-sensor-pbi-show-room.component';\r\nimport { environment } from 'src/environments/environment';\r\n\r\n@Component({\r\n selector: 'app-showroom',\r\n templateUrl: './showroom.component.html',\r\n styleUrls: ['./showroom.component.css']\r\n})\r\nexport class ShowroomComponent implements OnInit {\r\n public itemMenu: number;\r\n public steps: Array;\r\n showLab = false;\r\n isFullScreen: boolean = false;\r\n imagePanel = environment.pathFile + \"assets/showroom/1.png\";\r\n imagePanelOrden = 1;\r\n showMenu = false;\r\n docElement: HTMLElement;\r\n finalValue: number = 0;\r\n showDataPanel=true;\r\n elem: any;\r\n private _hubConnection: HubConnection;\r\n options: Options = {\r\n floor: 0,\r\n ceil: 100,\r\n showSelectionBar: true,\r\n selectionBarGradient: {\r\n from: 'white',\r\n to: '#01c4e7'\r\n }\r\n };\r\n\r\n options2: Options = {\r\n floor: 0,\r\n ceil: 100,\r\n showTicks: false,\r\n showTicksValues: true,\r\n stepsArray: [\r\n {value: 0},\r\n {value: 10},\r\n {value: 25},\r\n {value: 50},\r\n {value: 100}\r\n ],\r\n showSelectionBar: true,\r\n selectionBarGradient: {\r\n from: 'white',\r\n to: '#01c4e7'\r\n }\r\n };\r\n actuators = [];\r\n staticActuators = [];\r\n constructor(private router: Router ,\r\n public dialog: MatDialog,\r\n public showroomService: ShowRoomService,) {\r\n this.itemMenu = 1;\r\n this.showroomService.getPanels().subscribe(_=>{\r\n if(_.error == null){\r\n var sc = _.data.filter( x => x.id == 'sharedControl')[0];\r\n if(sc.value){ _this.showLab = true;}else{ _this.showLab = false; }// _this.router.navigate(['/gys/showroom/panel/diagram/public']) }\r\n }\r\n });\r\n\r\n var _this = this;\r\n const connection = this._hubConnection = new HubConnectionBuilder()\r\n .withUrl(environment.wsUrl +\"/ws/showroom\",{\r\n skipNegotiation: true,\r\n transport: signalR.HttpTransportType.WebSockets\r\n }).build();\r\n var _this = this;\r\n connection.on(\"sharedDiagram\", (data) => {\r\n _this.showLab = data;\r\n _this.openFullscreen();\r\n });\r\n connection.start().catch(err => document.write(err));\r\n /* setInterval(function () {\r\n if(_this.showDataPanel){\r\n _this.showroomService.getPanels().subscribe(_=>{\r\n if(_.error == null){\r\n _this.showDataPanel = false;\r\n var sc = _.data.filter( x => x.id == 'sharedControl')[0];\r\n console.log(\"redirrecion a diagrama\",sc.value);\r\n if(sc.value){ _this.showLab = true;}else{ _this.showLab = false; }// _this.router.navigate(['/gys/showroom/panel/diagram/public']) }\r\n _this.showDataPanel = true;\r\n }\r\n });\r\n }\r\n },\r\n 500);*/\r\n\r\n }\r\n\r\n getListActuators(){\r\n this.showroomService.getListActuators().subscribe((_) => {\r\n this.actuators = _.data;\r\n var start = parseInt(this.actuators.filter(_ => _.id == 6)[0].value);\r\n var stop = parseInt(this.actuators.filter(_ => _.id == 7)[0].value);\r\n var startAlert = parseInt(this.actuators.filter(_ => _.id == 11)[0].value);\r\n var stopAlert = parseInt(this.actuators.filter(_ => _.id == 12)[0].value);\r\n // if(start==1 && stop==0){ start = 0; }\r\n\r\n this.actuators.filter(_ => {\r\n let options;\r\n _.idPanel = \"panelActuator\"+_.id;\r\n if(_.maxLimit > 0){\r\n _.value =(_.value * 100) / _.maxLimit;\r\n }\r\n if(_.type==2){\r\n _.colors = ['#e5f6ff', '#82cfff'];\r\n }else{\r\n if(_.stepOptions != \"\" && _.stepOptions){\r\n var stepsArray = [];\r\n var array = _.stepOptions.split(\",\");\r\n array.forEach(function(n) {\r\n stepsArray.push({value: n});\r\n })\r\n options = {\r\n floor: 0,\r\n ceil: 100,\r\n showTicks: false,\r\n showTicksValues: true,\r\n stepsArray: stepsArray,\r\n showSelectionBar: true,\r\n selectionBarGradient: {\r\n from: 'white',\r\n to: '#01c4e7'\r\n }\r\n };\r\n }else{\r\n options = {\r\n floor: 0,\r\n ceil: 100,\r\n showSelectionBar: true,\r\n selectionBarGradient: {\r\n from: 'white',\r\n to: '#01c4e7'\r\n }\r\n }\r\n }\r\n }\r\n\r\n if(_.type == 6){\r\n _.relationshipActuators.filter(__ => {\r\n __.idPanel = \"panelActuator\"+__.id;\r\n __.update = 0;\r\n });\r\n }\r\n _.dataValue = _.value;\r\n _.options = options;\r\n _.update = 0;\r\n _.beforeValue = _.value;\r\n });\r\n this.staticActuators = this.actuators;\r\n this.staticActuators = this.staticActuators.filter(_ => _.id != 6 && _.id != 7 && _.id != 11 && _.id != 12);\r\n\r\n },\r\n (error: HttpErrorResponse) => {\r\n\r\n });\r\n }\r\n ngOnInit() {\r\n this.docElement = document.documentElement;\r\n this.getListActuators();\r\n }\r\n\r\n goControl(){\r\n this.router.navigate(['/gys/showroom/panel/diagram/public']);\r\n }\r\n\r\n showMenuItem(item){\r\n this.itemMenu = item;\r\n }\r\n\r\n\r\n selectMenu(){\r\n this.showMenu = !this.showMenu;\r\n }\r\n\r\n toggleFullScreen() {\r\n if (!this.isFullScreen) {\r\n this.docElement.requestFullscreen();\r\n }\r\n else {\r\n document.exitFullscreen();\r\n }\r\n this.isFullScreen = !this.isFullScreen;\r\n }\r\n\r\n\r\n nextPanel(){\r\n this.imagePanelOrden++;\r\n if(this.imagePanelOrden == 8){\r\n this.imagePanelOrden=1;\r\n }\r\n\r\n this.imagePanel = environment.pathFile + \"assets/showroom/\"+this.imagePanelOrden+\".png\";\r\n }\r\n/*\r\n @HostListener('contextmenu', ['$event'])\r\n onRightClick(event) {\r\n event.preventDefault();\r\n }*/\r\n\r\n\r\n getDate(){\r\n var d = new Date(),\r\n hora = d.getHours(),\r\n minutos = d.getMinutes(),\r\n segundos = d.getSeconds(),\r\n month = (d.getMonth()+1),\r\n day = d.getDate().toString();\r\n if(parseInt(day) < 10){ day = \"0\"+day.toString(); }\r\n var m = month.toString();\r\n if(month < 10){ m = \"0\"+month; }\r\n return d.getFullYear() + \"-\" + m + \"-\" + day + \" \"+ hora+\":\"+minutos+\":\"+segundos;\r\n}\r\n\r\n\r\nopenFullscreen() {\r\n if (this.elem.requestFullscreen) {\r\n this.elem.requestFullscreen();\r\n } else if (this.elem.mozRequestFullScreen) {\r\n /* Firefox */\r\n this.elem.mozRequestFullScreen();\r\n } else if (this.elem.webkitRequestFullscreen) {\r\n /* Chrome, Safari and Opera */\r\n this.elem.webkitRequestFullscreen();\r\n } else if (this.elem.msRequestFullscreen) {\r\n /* IE/Edge */\r\n this.elem.msRequestFullscreen();\r\n }\r\n}\r\n\r\n showPBI(){\r\n let dialogRef = this.dialog.open(ModalReportSensorPbiShowRoomComponent, {\r\n width: '1000px',\r\n });\r\n }\r\n}\r\n","\r\n ();\r\n listInitCameras = new Array();\r\n listStreaming = [];\r\n limitTitleStreaming = 15;\r\n inputSearch = \"\";\r\n headquarterSelect = 0;\r\n headquarters=[];\r\n\r\n constructor(\r\n private enterpriseService: EnterpriseService,\r\n private streamingService: StreamingService,\r\n private spinner: NgxSpinnerService,\r\n public dialog: MatDialog,\r\n private headquarterService: HeadquarterService,\r\n private alertService: AlertService\r\n ) {\r\n document.getElementById(\"titleHeaderNav\").innerHTML = 'Streaming > CĆ”maras';\r\n }\r\n\r\n ngOnInit() {\r\n ///this.getEnterprises();\r\n if(parseInt(localStorage.getItem(AppConstants.Session.ROLID)) == AppConstants.UserRole.AdministradorGyS) this.isAdministrator = true;\r\n if(parseInt(localStorage.getItem(AppConstants.Session.ROLID)) == AppConstants.UserRole.AdministradorEmpresaStreaming) this.isAdministratorStreaming = true;\r\n this.enterpriseSelect = (+localStorage.getItem(AppConstants.Session.ENTERPRISE));\r\n this.headquarterSelect = (+localStorage.getItem(AppConstants.Session.HEADQUARTER));\r\n this.getCameras();\r\n }\r\n\r\n changeHeadquarter(data) {\r\n this.headquarterSelect = data.value;\r\n this.getCameras();\r\n }\r\n\r\n showStreaming(token: string,enterprise: number){\r\n var port = document.location.port;\r\n if(port){ port = \":\"+port;}\r\n var hostname = document.location.protocol +'//'+ document.location.hostname + ((port != \"80\") ? port : \"\");\r\n var url = hostname+\"/streaming/camera/\" + token;\r\n if(enterprise == 1){\r\n url = hostname+\"/streaming/enterprise/\" + token;\r\n }\r\n window.open(url, '_blank').focus();\r\n }\r\n\r\n copyIframe(token: string){\r\n this.spinner.show();\r\n this.streamingService.getIframeCamera(token).subscribe(_ => {\r\n if(_.error == null){\r\n let listener = (e: ClipboardEvent) => {\r\n e.clipboardData.setData('text/plain', _.iframe);\r\n e.preventDefault();\r\n };\r\n document.addEventListener('copy', listener);\r\n document.execCommand('copy');\r\n document.removeEventListener('copy', listener);\r\n this.alertService.showMessage(\"Se copiĆ³ el link del iframe de la cĆ”mara\", \"\", MessageSeverity.success);\r\n }\r\n this.spinner.hide();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n getEnterprises() {\r\n this.spinner.show();\r\n this.enterpriseService.getEnterprises().subscribe((response) => {\r\n /*this.enterprises = response.filter(f => f.enabled == AppConstants.Flag.Active);\r\n this.enterpriseSelect = parseInt(localStorage.getItem(AppConstants.Session.ENTERPRISE));*/\r\n this.enterpriseToken = response.filter(f => f.enterpriseId == this.enterpriseSelect)[0].token.toString();\r\n // this.getHeadquarters();\r\n //this.getZonesByEnterprise(this.enterpriseSelect);\r\n // this.spinner.hide();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n getHeadquarters() {\r\n // if (this.isAdminGys) {\r\n //this.spinner.show();\r\n this.headquarterService.getListAll().subscribe((response) => {\r\n if(response.error == null){\r\n this.headquarters = response.data.filter(f => f.idEnterprise == this.enterpriseSelect);\r\n this.headquarterSelect = 0;\r\n }else{\r\n this.headquarters = [];\r\n }\r\n this.getCameras();\r\n //this.spinner.hide();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.headquarters = [];\r\n this.spinner.hide();\r\n });\r\n //} else {\r\n // this.headquarterSelect = +localStorage.getItem(AppConstants.Session.HEADQUARTER)\r\n //}\r\n }\r\n\r\n changeEnterprise(data) {\r\n this.enterpriseSelect = data.value;\r\n this.listCameras = [];\r\n this.listStreaming = [];\r\n this.enterpriseToken = this.enterprises.filter(f => f.enterpriseId == this.enterpriseSelect)[0].token;\r\n this.getHeadquarters();\r\n //this.getZonesByEnterprise(this.enterpriseSelect);\r\n }\r\n\r\n getZonesByEnterprise(enterpriseId: number) {\r\n this.enterprisesZones = [];\r\n this.spinner.show();\r\n this.enterpriseService.getEnterpriseById(enterpriseId).subscribe((response => {\r\n if (response.enterpriseZone.length > 0) {\r\n this.enterprisesZones = response.enterpriseZone;\r\n this.enterpriseZoneSelect = this.enterprisesZones[0][\"zoneId\"];\r\n }\r\n this.spinner.hide();\r\n }),\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n getCameras() {\r\n this.spinner.show();\r\n this.listCameras = new Array();\r\n this.streamingService.getCameraByEnterprise(this.enterpriseSelect,this.headquarterSelect).subscribe((res => {\r\n if(res.error == null){\r\n this.listCameras = res.camera;\r\n this.listCameras.forEach(function (value) {\r\n value.play = false;\r\n\r\n if(value.streamingImage == null && !value.streamingImage){ value.streamingImage = \"../../../../../assets/images/sin_image.jpg\"; }\r\n //else{ value.streamingImage = environment.pathFile + value.streamingImage;}\r\n\r\n if(value.streamingDescription == null && !value.streamingDescription){ value.streamingDescription = \"\"; }\r\n });\r\n this.listInitCameras = this.listCameras;\r\n }\r\n this.spinner.hide();\r\n }),\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n playStreaming(id){\r\n var item = this.listCameras.filter(x => x.cameraId == id);\r\n if(item){\r\n item[0].play = true;\r\n }\r\n }\r\n\r\n /* changeZone(data) {\r\n var item = this.enterprisesZones.filter(f => f.zoneId == data.value);\r\n this.enterpriseToken = item[0].token;\r\n this.listStreaming = [];\r\n this.getCameras(data.value);\r\n }*/\r\n\r\n loadStream(data:CameraStreaming){\r\n var id = \"video\"+data.cameraId.toString();\r\n let searchData = this.listStreaming.filter(x => x.id.toString().startsWith(id));\r\n if(searchData.length > 0 ){\r\n for(let i = 0;this.listStreaming.length > i;i++){\r\n if(this.listStreaming[i].id == id){\r\n this.listStreaming.splice(i,1);\r\n }\r\n }\r\n }else{\r\n this.listStreaming = this.listStreaming.concat({\r\n id:id,\r\n name:data.camera,\r\n linkStre:data.streamingUrl,\r\n /*urlFile: data.streamingFile,\r\n streamingKey: data.streamingKey,*/\r\n token: data.token\r\n });\r\n }\r\n }\r\n\r\n\r\n search(){\r\n if(this.inputSearch != \"\"){\r\n this.listCameras = this.listCameras.filter(x => x.camera.toLowerCase().indexOf(this.inputSearch.toLowerCase()) != -1);\r\n }else{\r\n this.listCameras = this.listInitCameras;\r\n }\r\n }\r\n}\r\n","\r\n \r\n\r\n \r\n;\r\n headquarterSelect = 0;\r\n headquarters = [];\r\n dropdownSettings:IDropdownSettings;\r\n selectedItems = [];\r\n color1: string;\r\n color2: string;\r\n colorFont: string;\r\n colorFont2: string;\r\n showGraph = false;\r\n\r\n constructor(public dialog: MatDialog,\r\n private spinner: NgxSpinnerService,\r\n private enterpriseService: EnterpriseService,\r\n private datePipe: DatePipe,\r\n private AlertService: AlertService,\r\n private headquarterService: HeadquarterService,\r\n private CameraService: CameraService,\r\n private streamingStadisticsService: StreamingStadisticsService,\r\n private formBuilder: FormBuilder) {\r\n document.getElementById(\"titleHeaderNav\").innerHTML = 'Streaming > EstadĆsticas';\r\n this.camerasSelect.setValue([0]);\r\n this.dropdownSettings = {\r\n singleSelection: false,\r\n idField: 'cameraId',\r\n textField: 'camera',\r\n tooltipField: 'CĆ”mara',\r\n selectAllText: 'Todos',\r\n unSelectAllText: 'Limpiar',\r\n searchPlaceholderText: 'Buscar',\r\n noFilteredDataAvailablePlaceholderText: 'Item no encontrado',\r\n itemsShowLimit: 3,\r\n allowSearchFilter: false, //input search\r\n };/*\r\n Chart.register(ChartDataLabels);\r\n Chart.defaults.set('plugins.datalabels', {\r\n color: 'black'\r\n });*/\r\n }\r\n\r\n ngOnInit() {\r\n this.setTheme();\r\n if(parseInt(localStorage.getItem(AppConstants.Session.ROLID)) == AppConstants.UserRole.AdministradorEmpresaStreaming) this.isAdministratorStreaming = true;\r\n this.createForm();\r\n this.enterpriseSelect = (+localStorage.getItem(AppConstants.Session.ENTERPRISE));\r\n this.headquarterSelect = (+localStorage.getItem(AppConstants.Session.HEADQUARTER));\r\n this.cameraList();\r\n this.timeI = this.datePipe.transform(\"Tue Aug 18 2020 00:00:58 GMT-0500\", 'HH:mm');\r\n this.timeF = this.datePipe.transform(\"Tue Aug 18 2020 23:59:58 GMT-0500\", 'HH:mm');\r\n this.dateV = this.datePipe.transform(this.myDate, 'yyyy-MM-dd');\r\n //this.setData();\r\n }\r\n\r\n setTheme(){\r\n this.color1 = localStorage.getItem(AppConstants.Session.THEME_COLOR1);\r\n this.color2 = localStorage.getItem(AppConstants.Session.THEME_COLOR2);\r\n this.colorFont = localStorage.getItem(AppConstants.Session.THEME_COLOR_FONT);\r\n this.colorFont2 = localStorage.getItem(AppConstants.Session.THEME_COLOR_FONT2);\r\n }\r\n\r\n ngAfterViewInit(){\r\n this.dataSource.paginator = this.paginator;\r\n }\r\n\r\n _keyUp(event: any) {\r\n let charCode = (event.which) ? event.which : event.keyCode;\r\n if (charCode != 46 && charCode != 58 && charCode > 31\r\n && (charCode < 48 || charCode > 57)) {\r\n return false;\r\n }\r\n }\r\n\r\n createForm() {\r\n this.reportForm = this.formBuilder.group({\r\n startDateReport: ['', [Validators.required]],\r\n endDateReport: ['', [Validators.required]],\r\n startTimeReport: ['', [Validators.required, Validators.pattern(\"^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$\")]],\r\n endTimeReport: ['', [Validators.required, Validators.pattern(\"^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$\")]],\r\n idEnterprise: ['0', [Validators.required]],\r\n idHeadquarter: ['0', [Validators.required]],\r\n // cameraReport: [[], [Validators.required]],\r\n idCameras:[],\r\n showGraph: [false]\r\n });\r\n }\r\n\r\n get f() { return this.reportForm.controls; }\r\n\r\n checkGraph(refreshData){\r\n if(!refreshData){\r\n this.showPaginator = !this.showPaginator;\r\n this.reportForm.controls[\"showGraph\"].setValue(this.reportForm.value[\"showGraph\"] == false ? true:false);\r\n }\r\n \r\n if(this.reportForm.value[\"showGraph\"]){ \r\n this.showData = true;\r\n /*if (this.canvas) {\r\n this.canvas.nativeElement.destroy(); // Destruye el grĆ”fico existente si ya estĆ” creado\r\n }*/\r\n //this.displayListStadistics = 'block';\r\n //var chartExist = Chart.getChart(\"myChart123\");\r\n /*var chartExist2 = Chart.getChart(\"myChart2\");\r\n var chartExist3 = Chart.getChart(\"myChart3\");\r\n var chartExist4 = Chart.getChart(\"myChart4\");\r\n if (chartExist != undefined){\r\n chartExist.destroy();\r\n /*chartExist2.destroy();\r\n chartExist3.destroy();\r\n chartExist4.destroy();*/\r\n // }*/\r\n //}\r\n\r\n // if(this.reportForm.get(\"showGraph\").value){\r\n this.displayListStadistics = 'none';\r\n if(!refreshData){this.displayListStadistics = 'none';}\r\n this.loadChartCamerasByVisit();\r\n this.loadPiePCMobile();\r\n this.loadChartTypesVisit();\r\n this.loadLineVisitByMonth();\r\n }else{\r\n this.showData = false;\r\n this.displayListStadistics = 'block';\r\n }\r\n }\r\n\r\n getHeadquarters() {\r\n // if (this.isAdminGys) {\r\n //this.spinner.show();\r\n this.headquarterService.getListAll().subscribe((response) => {\r\n if(response.error == null){\r\n this.headquarters = response.data.filter(f => f.idEnterprise == this.enterpriseSelect);\r\n // this.headquarterSelect = 0;\r\n }else{\r\n this.headquarters = [];\r\n }\r\n this.cameraList();\r\n //this.spinner.hide();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.headquarters = [];\r\n this.spinner.hide();\r\n });\r\n //} else {\r\n // this.headquarterSelect = +localStorage.getItem(AppConstants.Session.HEADQUARTER)\r\n //}\r\n }\r\n\r\n changeHeadquarter(data) {\r\n this.headquarterSelect = data.value;\r\n this.cameraList();\r\n }\r\n\r\n cameraList() {\r\n this.cameras = [];\r\n this.CameraService.GetCamerasIdEnterprise(this.enterpriseSelect,this.headquarterSelect).subscribe((response) => {\r\n setTimeout(()=> { this.cameras = response; },1000);\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n getEnterprises() {\r\n this.spinner.show();\r\n this.enterpriseService.getEnterprises().subscribe((response) => {\r\n if(response != null){\r\n this.enterprises = response;\r\n this.enterpriseSelect = parseInt(localStorage.getItem(AppConstants.Session.ENTERPRISE));\r\n this.getHeadquarters();\r\n }\r\n this.spinner.hide();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n changeEnterprise(data) {\r\n this.enterpriseSelect = data.value;\r\n this.getHeadquarters();\r\n }\r\n\r\n onItemSelect(item: any) {\r\n console.log(item);\r\n }\r\n onSelectAll(items: any) {\r\n console.log(items);\r\n }\r\n\r\n setFilter(){\r\n /*let search = this.reportForm.value;\r\n try{\r\n this.dateIView = search.startDateReport;\r\n this.dateFView = search.endDateReport;\r\n }catch{\r\n this.dateIView = search.startDateReport;\r\n this.dateFView = search.endDateReport;\r\n\r\n search.startDateReport = search.startDateReport;\r\n search.endDateReport = search.endDateReport;\r\n }*/\r\n\r\n var idCameras = \"\";\r\n this.selectedItems.forEach(x => {\r\n idCameras = idCameras+\",\"+ x.cameraId;\r\n });\r\n\r\n\r\n if(idCameras == \"\"){\r\n this.AlertService.showMessage(\r\n AppConstants.MessageModal.FILTER_CAMERA_VALIDATE,\"\",\r\n MessageSeverity.error);\r\n return false;\r\n }\r\n\r\n if(this.date > this.dateF){\r\n this.AlertService.showMessage(\r\n AppConstants.MessageModal.FILTER_DATES_VALIDATE,\"\",\r\n MessageSeverity.error);\r\n return false\r\n }\r\n\r\n var filterS = {\r\n dateI: this.reportForm.value[\"startDateReport\"],\r\n dateF: this.reportForm.value[\"endDateReport\"],\r\n timeI: this.timeI,\r\n timeF: this.timeF,\r\n idCamera: idCameras.replace(idCameras.charAt(0), \"\"),\r\n idEnterprise: this.enterpriseSelect,\r\n };\r\n filterS.dateI = this.datePipe.transform(filterS.dateI, 'yyyy-MM-dd');\r\n filterS.dateF = this.datePipe.transform(filterS.dateF, 'yyyy-MM-dd');\r\n return filterS;\r\n }\r\n\r\n setData(){\r\n this.spinner.show();\r\n this.streamingStadisticsService.getList(this.setFilter()).subscribe((response) => {\r\n if(response.error == null){\r\n if(response.data.length > 0){\r\n this.dataSource.data = response.data;\r\n this.paginator.pageIndex = 0;\r\n }else{\r\n this.dataSource.data = response.data;\r\n this.AlertService.showMessage(\r\n AppConstants.TitleModal.WARNING_TITLE,\r\n AppConstants.MessageModal.DATA_NULL_SEARCH,\r\n MessageSeverity.error);\r\n }\r\n this.dataStreamingStadistics = response.data;\r\n this.length = response.data.length;\r\n this.checkGraph(1);\r\n }\r\n this.spinner.hide();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n exportExcel(){\r\n this.streamingStadisticsService.downloadExportExcel(this.setFilter()).subscribe((response) => {\r\n const data: Blob = new Blob([response], {\r\n type: response.type\r\n });\r\n FileSaver.saveAs(data, 'archivo');\r\n });\r\n }\r\n\r\n loadChartCamerasByVisit(){\r\n /*var chartExist = Chart.getChart(\"myChart123\"); //
\r\n
\r\n\r\n \r\n \r\n\r\n \r\n\r\n\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n 0\">\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n G&S\r\n gestiĆ³n y sistemas\r\n
\r\n\r\n \r\n
","import { ChangeContext, Options } from '@angular-slider/ngx-slider';\r\nimport { HttpErrorResponse } from '@angular/common/http';\r\nimport { Component, HostListener, OnInit, ViewChild } from '@angular/core';\r\nimport { NgxSpinnerService } from 'ngx-spinner';\r\nimport { ShowRoomService } from 'src/app/services/showroom/showroom.service';\r\nimport html2canvas from \"html2canvas\"; \r\nimport { MatDialog } from '@angular/material/dialog';\r\nimport { NgxCaptureService } from 'ngx-capture';\r\nimport { DomSanitizer } from '@angular/platform-browser';\r\nimport { Router } from '@angular/router';\r\nimport { __values } from 'tslib';\r\n\r\n@Component({\r\n selector: 'app-showroom-panel',\r\n templateUrl: './showroom-panel.component.html',\r\n styleUrls: ['./showroom-panel.component.css']\r\n})\r\nexport class ShowroomPanelComponent implements OnInit {\r\n actuators = [];\r\n staticActuators = [];\r\n startButton = 0;\r\n stopButton = 0;\r\n startAlert = 0;\r\n stopAlert = 0;\r\n stepIndex: number = 0;\r\n showScreenshot = false;\r\n showMenu = false;\r\n humedadLoop:any;\r\n imagePath:any;\r\n @ViewChild('screen', { static: true }) screen: any;\r\n\r\n public steps: Array\r\n ![]()
\r\n
\r\nCaptura de datos exitosa
\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n
","import { DatePipe } from '@angular/common';\r\nimport { HttpErrorResponse } from '@angular/common/http';\r\nimport { Component, OnInit, ViewChild } from '@angular/core';\r\nimport { FormGroup, FormBuilder, Validators } from '@angular/forms';\r\nimport { MatPaginator, PageEvent } from '@angular/material/paginator';\r\nimport { MatTableDataSource } from '@angular/material/table';\r\nimport { NgxSpinnerService } from 'ngx-spinner';\r\nimport { CameraZoneViewModel } from 'src/app/models/camera/camera';\r\nimport { CameraService } from 'src/app/services/camera/camera.service';\r\nimport { EnterpriseService } from 'src/app/services/enterprise/enterprise.service';\r\nimport { AppConstants } from 'src/app/shared/constants/app.contants';\r\nimport { AlertService,MessageSeverity } from 'src/app/shared/services/alert.service';\r\nimport { environment } from 'src/environments/environment';\r\nimport 'fabric';\r\nimport { MatDialog } from '@angular/material/dialog';\r\nimport { OcurrenceService } from 'src/app/services/Ocurrence/ocurrence.service';\r\nimport { Subscription } from 'rxjs';\r\nimport { ShowRoomService } from 'src/app/services/showroom/showroom.service';\r\nimport { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';\r\nimport * as signalR from '@microsoft/signalr';\r\nimport { ModalReportVideoAnaliticaShowRoomComponent } from 'src/app/shared/components/modals/showroom/modal-report-video-analitica-show-room/modal-report-video-analitica-show-room.component';\r\n\r\ndeclare const fabric: any;\r\n\r\n@Component({\r\n selector: 'app-showroom-va',\r\n templateUrl: './showroom-va.component.html',\r\n styleUrls: ['./showroom-va.component.css']\r\n})\r\nexport class ShowroomVaComponent implements OnInit {\r\n imgAlert = \"../../../../assets/images/sin_image.jpg\";\r\n loading: boolean = false;\r\n enterprises = [];\r\n enterpriseSelect: number = 0;\r\n enterprisesZones = [];\r\n enterpriseZoneSelect: number = 0;\r\n dataSource = new MatTableDataSource();\r\n displayedColumns: string[] = ['index', 'camera', 'enabled'];\r\n @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;\r\n subscription: Subscription;\r\n listCameras = new Array\r\n
\r\n \r\n
\r\n \r\n \r\n ![]()
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Estado de alertas\r\n NĀŗ de Alertas: {{countAlerts}}\r\n
\r\n \r\n
\r\n - \r\n
- \r\n \r\n\r\n\r\n \r\n \r\n
\r\n
\r\n PLATAFORMA VIDEOANALĆTICA
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n G&S\r\n gestiĆ³n y sistemas\r\n
\r\n\r\n \r\n \r\n\r\n
\r\n","import { HttpErrorResponse } from '@angular/common/http';\r\nimport { Component, Inject, OnInit } from '@angular/core';\r\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\r\nimport { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';\r\nimport { Router } from '@angular/router';\r\nimport { NgxSpinnerService } from 'ngx-spinner';\r\nimport { EnterpriseSettingService } from 'src/app/services/enterprise-setting/enterprise-setting.service';\r\nimport { MessageModalComponent } from 'src/app/shared/components/modals/message/message-modal.component';\r\nimport { AppConstants } from 'src/app/shared/constants/app.contants';\r\nimport { AlertService, MessageSeverity } from 'src/app/shared/services/alert.service';\r\nimport { EmitterService } from 'src/app/shared/services/emitter.service';\r\n\r\n@Component({\r\n selector: 'app-enterprise-profile',\r\n templateUrl: './enterprise-profile.component.html',\r\n styleUrls: ['./enterprise-profile.component.css']\r\n})\r\nexport class EnterpriseProfileComponent implements OnInit {\r\n settingForm: FormGroup\r\n title: string;\r\n loading: boolean = false;\r\n isAdminGys: boolean = false;\r\n sessionUserId: string;\r\n storageFileSelect: number;\r\n logo = \"../../../../../../assets/images/enterprise-default.png\";\r\n fileLogo: File;\r\n idEnterprise: number;\r\n color1: string;\r\n color2: string;\r\n colorFont: string;\r\n colorFont2: string;\r\n enabledRead: number;\r\n enabledWrite: number;\r\n\r\n colorPrimary: string;\r\n colorSecundary: string;\r\n\r\n constructor(\r\n private spinner: NgxSpinnerService,\r\n private formBuilder: FormBuilder,\r\n public dialog: MatDialog,\r\n private router: Router,\r\n private enterpriseSettingService: EnterpriseSettingService,\r\n private alertService: AlertService,\r\n private emitterService: EmitterService) {\r\n this.idEnterprise = +localStorage.getItem(AppConstants.Session.ENTERPRISE);\r\n document.getElementById(\"titleHeaderNav\").innerHTML = 'Mi Empresa';\r\n }\r\n\r\n setTheme(){\r\n this.color1 = localStorage.getItem(AppConstants.Session.THEME_COLOR1);\r\n this.color2 = localStorage.getItem(AppConstants.Session.THEME_COLOR2);\r\n this.colorFont = localStorage.getItem(AppConstants.Session.THEME_COLOR_FONT);\r\n this.colorFont2 = localStorage.getItem(AppConstants.Session.THEME_COLOR_FONT2);\r\n //validate Permisses menu\r\n var menu = JSON.parse(localStorage.getItem(AppConstants.Session.MENU));\r\n var page = this.router.url.split(\"/\");\r\n var i = page[page.length-1];\r\n var itemTag = menu.filter(x => x.tag != null && (x.tag.toString()).toLowerCase().includes(i));\r\n if(itemTag.length>0){\r\n this.enabledRead = itemTag[0].activeRead;\r\n this.enabledWrite = itemTag[0].activeWrite;\r\n }else{\r\n this.enabledRead = 0;\r\n this.enabledWrite = 0;\r\n }\r\n }\r\n\r\n ngOnInit() {\r\n this.setTheme();\r\n this.title = AppConstants.TitleModal.UPDATE_ENTERPRISE_SETTING ;\r\n this.isAdminGys = (+localStorage.getItem(AppConstants.Session.ROLID) == AppConstants.UserRole.AdministradorGyS || +localStorage.getItem(AppConstants.Session.ROLID) == AppConstants.UserRole.UsuarioGyS) ? true : false;\r\n this.sessionUserId = localStorage.getItem(AppConstants.Session.USERID);\r\n this.createForm();\r\n this.getData();\r\n }\r\n\r\n getData() {\r\n this.spinner.show();\r\n this.enterpriseSettingService.getEnterpriseSetting(this.idEnterprise).subscribe((response => {\r\n if(response.error == null && response.enterpriseSetting != null){\r\n this.settingForm.patchValue({\r\n idEnterprise: this.idEnterprise,\r\n color1: \"\",//response.enterpriseSetting.color1,\r\n color2: \"\",\r\n /*idStorageFile: response.enterpriseSetting.idStorageFile,\r\n pathFile: response.enterpriseSetting.pathFile,*/\r\n userId: parseInt(this.sessionUserId)\r\n });\r\n this.colorPrimary = response.enterpriseSetting.color1;\r\n this.colorSecundary = response.enterpriseSetting.color2;\r\n if(response.enterpriseSetting.logo != \"\" && response.enterpriseSetting.logo){\r\n if(response.enterpriseSetting.idStorageType == 2){//azure\r\n this.logo = response.enterpriseSetting.logo;\r\n }else{\r\n this.logo = response.enterpriseSetting.storagePath + \"/\"+response.enterpriseSetting.logo;\r\n }\r\n }\r\n }\r\n this.spinner.hide();\r\n }),\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n createForm() {\r\n this.settingForm = this.formBuilder.group({\r\n idEnterprise: this.idEnterprise,\r\n color1: [true, []],\r\n color2: [true, []],\r\n /*idStorageFile: [[Validators.required]],\r\n pathFile: [],*/\r\n userId: parseInt(this.sessionUserId)\r\n });\r\n }\r\n\r\n get f() { return this.settingForm.controls; }\r\n\r\n openConfirmationModal() {\r\n if (this.settingForm.valid) {\r\n let dialogRef = this.dialog.open(MessageModalComponent, {\r\n data: {\r\n title: AppConstants.TitleModal.ENTERPRISE_SETTING_UPDATE,\r\n message: AppConstants.MessageModal.UPDATE_MESSAGE_ENTERPRISE_SETTING_CONFIRM,\r\n hasButton: true,\r\n contentButton: {\r\n yes: 'SI',\r\n no: 'CANCELAR'\r\n }\r\n },\r\n });\r\n\r\n dialogRef.afterClosed().subscribe(response => {\r\n if (response.result == true) {\r\n this.update();\r\n }\r\n });\r\n\r\n } else {\r\n this.settingForm.markAllAsTouched();\r\n }\r\n }\r\n\r\n update() {\r\n /*if(this.settingForm.get('idStorageFile').value == 1 && !this.settingForm.get('pathFile').value){\r\n this.alertService.showMessage(\"\", AppConstants.MessageModal.REQUIRED_ENTERPRISE_SETTING_PATH_FILE, MessageSeverity.error);\r\n return false;\r\n }*/\r\n\r\n if(this.settingForm.valid){\r\n this.spinner.show();\r\n\r\n var formData = new FormData();\r\n formData.append(\"color1\",this.colorPrimary);\r\n formData.append(\"color2\",this.colorSecundary);\r\n formData.append(\"userId\",this.sessionUserId);\r\n formData.append(\"idEnterprise\",this.idEnterprise.toString());\r\n formData.append(\"logo\",this.fileLogo);\r\n\r\n this.enterpriseSettingService.updateEnterpriseSetting(formData).subscribe((response => {\r\n this.alertService.showMessage(\"\", AppConstants.MessageModal.UPDATE_ENTERPRISE_SETTING, MessageSeverity.success);\r\n this.spinner.hide();\r\n // localStorage.setItem(AppConstants.Session.LOGO, enterprise.enterprises[0]['logo'].toString());\r\n localStorage.setItem(AppConstants.Session.THEME_COLOR1, this.colorPrimary);\r\n localStorage.setItem(AppConstants.Session.THEME_COLOR2, this.colorSecundary);\r\n \r\n window.location.reload();\r\n }),\r\n (error: HttpErrorResponse) => {\r\n this.alertService.showMessage(\"\", error.error.messages, MessageSeverity.error);\r\n this.spinner.hide();\r\n });\r\n }else{\r\n this.settingForm.markAllAsTouched();\r\n this.alertService.showMessage(\"\", AppConstants.MessageModal, MessageSeverity.error);\r\n }\r\n }\r\n\r\n close() {\r\n this.dialog.closeAll();\r\n }\r\n\r\n onFileSelected(event: any) {\r\n if (event.target.files && event.target.files[0]) {\r\n var reader = new FileReader();\r\n var _this = this;\r\n reader.onload = (event:any) => {\r\n _this.logo = event.target.result;\r\n }\r\n\r\n reader.readAsDataURL(event.target.files[0]);\r\n this.fileLogo = event.target.files[0];\r\n }\r\n }\r\n}\r\n\r\n","\r\n \r\n
\r\n \r\n \r\n
\r\n","import { HttpErrorResponse } from '@angular/common/http';\r\nimport { Component, OnInit } from '@angular/core';\r\nimport { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';\r\nimport { NgxSpinnerService } from 'ngx-spinner';\r\nimport { UserService } from 'src/app/services/user/user.service';\r\nimport { AppConstants } from 'src/app/shared/constants/app.contants';\r\nimport { AlertService, MessageSeverity } from 'src/app/shared/services/alert.service';\r\n\r\n@Component({\r\n selector: 'app-user-profile',\r\n templateUrl: './user-profile.component.html',\r\n styleUrls: ['./user-profile.component.css']\r\n})\r\nexport class UserProfileComponent implements OnInit {\r\n hide = true;\r\n repeatHide = true;\r\n userForm: FormGroup\r\n headquarterSelect = 0;\r\n headquarters = [];\r\n showEdit: boolean = false;\r\n\r\n constructor(\r\n private formBuilder: FormBuilder,\r\n private spinner: NgxSpinnerService,\r\n private userService: UserService,\r\n private alertService: AlertService,\r\n ) {\r\n document.getElementById(\"titleHeaderNav\").innerHTML = 'Mi Perfil';\r\n }\r\n\r\n ngOnInit() {\r\n this.createForm()\r\n this.setValues();\r\n }\r\n\r\n createForm() {\r\n this.userForm = this.formBuilder.group({\r\n // documentNumber: ['', [Validators.required, Validators.minLength(8), Validators.maxLength(8)]],\r\n email: ['', [Validators.required, Validators.maxLength(100), Validators.email]],\r\n names: ['', [Validators.required, Validators.maxLength(30), this.noWhitespaceValidator]],\r\n lastName: ['', [Validators.required, Validators.maxLength(30), this.noWhitespaceValidator]],\r\n role: ['', [Validators.required]],\r\n password: ['', [Validators.minLength(6)]],\r\n confirmPassword: ['', [Validators.minLength(6)]],\r\n status: [true, [Validators.required]],\r\n sendEmail: [true, [Validators.required]],\r\n idHeadquarter: ['', []],\r\n idUser: [localStorage.getItem(AppConstants.Session.USERID)]\r\n // locked: [false],\r\n });\r\n }\r\n\r\n passwordMatcher(): boolean {\r\n const password = this.userForm.get('password');\r\n const confirmPassword = this.userForm.get('confirmPassword');\r\n\r\n if (password.value === confirmPassword.value) {\r\n return true;\r\n }\r\n return false ;\r\n }\r\n\r\n get f() { return this.userForm.controls; }\r\n\r\n setValues() {\r\n this.spinner.show();\r\n this.userService.getUserById(parseInt(localStorage.getItem(AppConstants.Session.USERID))).subscribe((response => {\r\n this.userForm.patchValue({\r\n // documentNumber: this.data.row.dni,\r\n email: response.username,\r\n names: response.names,\r\n lastName: response.lasName,\r\n // password: '******',\r\n // confirmPassword: '******',\r\n status: response.enabled,\r\n sendEmail: response.sendEmail,\r\n idHeadquarter: response.idHeadquarter\r\n // locked: response.locked\r\n });\r\n this.headquarterSelect = !response.idHeadquarter ? 0 : response.idHeadquarter;\r\n this.spinner.hide();\r\n }),\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n public noWhitespaceValidator(control: FormControl) {\r\n const isWhitespace = (control.value || '').trim().length === 0;\r\n const isValid = !isWhitespace;\r\n return isValid ? null : { 'whitespace': true };\r\n }\r\n\r\n save(){\r\n\r\n if(!this.passwordMatcher()){\r\n this.alertService.showMessage(\"\", \"No coincide la contraseƱa con la contraseƱa de confirmaciĆ³n\", MessageSeverity.error);\r\n return false;\r\n }\r\n\r\n this.spinner.show();\r\n this.userService.updateUserMyProfile(this.userForm.value).subscribe((response => {\r\n this.alertService.showMessage(AppConstants.TitleModal.UPDATE_USER, AppConstants.MessageModal.UPDATE_USER, MessageSeverity.success);\r\n localStorage.setItem(AppConstants.Session.USER,this.userForm.get('names').value+ \" \"+this.userForm.get('lastName').value);\r\n this.spinner.hide();\r\n }),\r\n (error: HttpErrorResponse) => {\r\n this.alertService.showMessage(AppConstants.TitleModal.UPDATE_USER, error.error.messages, MessageSeverity.error);\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n}\r\n","\r\n \r\n
\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n \r\n \r\n
\r\n\r\n","import { HttpErrorResponse } from '@angular/common/http';\r\nimport { Component, OnInit} from '@angular/core';\r\nimport { MatDialog } from '@angular/material/dialog';\r\nimport { NgxSpinnerService } from 'ngx-spinner';\r\nimport { CameraStreaming } from 'src/app/models/streaming/cameraStreaming';\r\nimport { EnterpriseService } from 'src/app/services/enterprise/enterprise.service';\r\nimport { HeadquarterService } from 'src/app/services/headquarter/headquarter.service';\r\nimport { StreamingService } from 'src/app/services/streaming/streaming.service';\r\nimport { AppConstants } from 'src/app/shared/constants/app.contants';\r\nimport { AlertService, MessageSeverity } from 'src/app/shared/services/alert.service';\r\nimport { environment } from 'src/environments/environment';\r\n\r\n@Component({\r\n selector: 'app-camera-streaming',\r\n templateUrl: './camera-streaming.component.html',\r\n styleUrls: ['./camera-streaming.component.css']\r\n})\r\n\r\nexport class CameraStreamingComponent implements OnInit {\r\n\r\n loading: boolean = false;\r\n isAdministrator=false;\r\n isAdministratorStreaming=false;\r\n enterprises = [];\r\n enterpriseSelect: number = 0;\r\n enterpriseToken: string;\r\n enterprisesZones = [];\r\n enterpriseZoneSelect: number = 0;\r\n listCameras = new Array\r\n
\r\n \r\n
\r\n \r\n \r\n\r\n
\r\n \r\n \r\n Buscar CƔmara \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {{ (item.camera.length>limitTitleStreaming) ? (item.camera | slice:0:limitTitleStreaming)+ '...' :(item.camera) }}\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n ![\"img-camera\"](\"{{item.streamingImage}}\")
\r\n
\r\n\r\n \r\n
\r\n \r\n ![\"img-play\"](\"../../../../../assets/images/play.png\")
\r\n
\r\n \r\n \r\n
\r\n\r\n {{ item.streamingDescription }}
\r\n\r\n \r\n
\r\n\r\n\r\n \r\n\r\n \r\n \r\n\r\n
\r\n \r\n \r\n \r\n\r\n
\r\n\r\n \r\n\r\n","import { HttpErrorResponse } from '@angular/common/http';\r\nimport { Component, OnInit, ViewChild } from '@angular/core';\r\nimport { MatDialog } from '@angular/material/dialog';\r\nimport { MatPaginator } from '@angular/material/paginator';\r\nimport { MatTableDataSource } from '@angular/material/table';\r\nimport { Router } from '@angular/router';\r\nimport { NgxSpinnerService } from 'ngx-spinner';\r\nimport { EnterpriseService } from 'src/app/services/enterprise/enterprise.service';\r\nimport { HeadquarterService } from 'src/app/services/headquarter/headquarter.service';\r\nimport { StreamingDomainIframeService } from 'src/app/services/streamingDomainIframe/streamingDomainIframe.service';\r\nimport { ItemdomainIframeStreamingModalComponent } from 'src/app/shared/components/modals/domain-iframe-streaming/domain-iframe-streaming-modal.component';\r\nimport { MessageModalComponent } from 'src/app/shared/components/modals/message/message-modal.component';\r\nimport { AppConstants } from 'src/app/shared/constants/app.contants';\r\nimport { AlertService, MessageSeverity } from 'src/app/shared/services/alert.service';\r\n\r\n@Component({\r\n selector: 'app-domain-iframe-streaming',\r\n templateUrl: './domain-iframe-streaming.component.html',\r\n styleUrls: ['./domain-iframe-streaming.component.css']\r\n})\r\nexport class StreamingDomainIframeComponent implements OnInit {\r\n loading: boolean = false;\r\n dataSource = new MatTableDataSource();\r\n dataSources = new MatTableDataSource();\r\n displayedColumns: string[] = ['domain','action'];\r\n @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;\r\n @ViewChild(MatPaginator, { static: true }) paginators: MatPaginator;\r\n enterprises = [];\r\n headquarterSelect = 0;\r\n enterpriseSelect: number = 0;\r\n headquarters=[];\r\n color1: string;\r\n color2: string;\r\n colorFont: string;\r\n colorFont2: string;\r\n enabledRead: number;\r\n enabledWrite: number;\r\n\r\n constructor(\r\n public dialog: MatDialog,\r\n private alertService: AlertService,\r\n private spinner: NgxSpinnerService,\r\n private router: Router,\r\n private securityService: StreamingDomainIframeService,\r\n private enterpriseService: EnterpriseService,\r\n private headquarterService: HeadquarterService,\r\n ) {\r\n document.getElementById(\"titleHeaderNav\").innerHTML = 'Streaming > Dominios Iframe ';\r\n }\r\n\r\n ngOnInit() {\r\n this.setLS();\r\n this.dataSource.paginator = this.paginator;\r\n this.dataSources.paginator = this.paginators;\r\n this.paginator._intl.itemsPerPageLabel = '';\r\n this.paginators._intl.itemsPerPageLabel = '';\r\n this.enterpriseSelect = (+localStorage.getItem(AppConstants.Session.ENTERPRISE));\r\n this.getList();\r\n }\r\n\r\n setLS(){\r\n this.color1 = localStorage.getItem(AppConstants.Session.THEME_COLOR1);\r\n this.color2 = localStorage.getItem(AppConstants.Session.THEME_COLOR2);\r\n this.colorFont = localStorage.getItem(AppConstants.Session.THEME_COLOR_FONT);\r\n this.colorFont2 = localStorage.getItem(AppConstants.Session.THEME_COLOR_FONT2);\r\n //validate Permisses menu\r\n var menu = JSON.parse(localStorage.getItem(AppConstants.Session.MENU));\r\n var page = this.router.url.split(\"/\");\r\n var i = page[page.length-1];\r\n var itemTag = menu.filter(x => x.tag != null && (x.tag.toString()).toLowerCase().includes(i));\r\n if(itemTag.length>0){\r\n this.enabledRead = itemTag[0].activeRead;\r\n this.enabledWrite = itemTag[0].activeWrite;\r\n }else{\r\n this.enabledRead = 0;\r\n this.enabledWrite = 0;\r\n }\r\n }\r\n\r\n getEnterprises() {\r\n this.spinner.show();\r\n this.enterpriseService.getEnterprises().subscribe((response) => {\r\n this.enterprises = response.filter(f => f.enabled == AppConstants.Flag.Active);\r\n this.enterpriseSelect = parseInt(localStorage.getItem(AppConstants.Session.ENTERPRISE));\r\n this.getHeadquarters();\r\n //this.getZonesByEnterprise(this.enterpriseSelect);\r\n // this.spinner.hide();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n}\r\n\r\ngetHeadquarters() {\r\n // if (this.isAdminGys) {\r\n //this.spinner.show();\r\n this.headquarterService.getListAll().subscribe((response) => {\r\n if(response.error == null){\r\n this.headquarters = response.data.filter(f => f.idEnterprise == this.enterpriseSelect);\r\n this.headquarterSelect = 0;\r\n }else{\r\n this.headquarters = [];\r\n }\r\n this.getList();\r\n //this.spinner.hide();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.headquarters = [];\r\n this.spinner.hide();\r\n });\r\n //} else {\r\n // this.headquarterSelect = +localStorage.getItem(AppConstants.Session.HEADQUARTER)\r\n //}\r\n}\r\n\r\nchangeEnterprise(data) {\r\n this.enterpriseSelect = data.value;\r\n this.getList();//this.getHeadquarters();\r\n}\r\n\r\n changeHeadquarter(data) {\r\n this.headquarterSelect = data.value;\r\n this.getList();\r\n }\r\n\r\n getList(){\r\n this.securityService.getList(this.enterpriseSelect).subscribe((_) => {\r\n if(_.error == null){\r\n this.dataSource.data = _.security;\r\n }\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n applyFilter(event: Event) {\r\n const filterValue = (event.target as HTMLInputElement).value;\r\n this.dataSource.filter = filterValue.trim().toLowerCase();\r\n }\r\n\r\n openAddModal() {\r\n let dialogRef = this.dialog.open(ItemdomainIframeStreamingModalComponent, {\r\n data: { title: 'Agregar dominio', action: 0,idEnterprise: this.enterpriseSelect , enabledWrite: this.enabledWrite,\r\n enabledRead: this.enabledRead,obj:null},\r\n width: '500px',\r\n hasBackdrop: true\r\n });\r\n dialogRef.afterClosed().subscribe(_ => {\r\n this.getList();\r\n });\r\n }\r\n\r\n openEditModal(data){\r\n let dialogRef = this.dialog.open(ItemdomainIframeStreamingModalComponent, {\r\n data: { title: 'Actualizar dominio', action: 1,idEnterprise: this.enterpriseSelect ,\r\n enabledWrite: this.enabledWrite,\r\n enabledRead: this.enabledRead,obj:data},\r\n width: '500px',\r\n hasBackdrop: true\r\n });\r\n dialogRef.afterClosed().subscribe(_ => {\r\n this.getList();\r\n });\r\n }\r\n\r\n delete(obj) {\r\n let dialogRef = this.dialog.open(MessageModalComponent, {\r\n data: {\r\n title: AppConstants.TitleModal.DELETE_CONFIRMATION_TITLE,\r\n message: `${AppConstants.MessageModal.DELETE_SECURITY_CONFIRMATION_MESSAGE1}`,\r\n hasButton: true,\r\n contentButton: {\r\n yes: 'SI',\r\n no: 'CANCELAR'\r\n }\r\n },\r\n width: '600px',\r\n });\r\n\r\n dialogRef.afterClosed().subscribe(response => {\r\n if (response.result == true) {\r\n this.deleteSecurity(obj.id);\r\n }\r\n });\r\n\r\n }\r\n\r\n deleteSecurity(id: number) {\r\n this.spinner.show();\r\n this.securityService.delete(id).subscribe((response => {\r\n this.spinner.hide();\r\n this.alertService.showMessage(AppConstants.TitleModal.DELETE_SECURITY, AppConstants.MessageModal.DELETE, MessageSeverity.success);\r\n this.getList();\r\n }),\r\n (error: HttpErrorResponse) => {\r\n this.alertService.showMessage(AppConstants.TitleModal.DELETE_SECURITY, error.error.messages, MessageSeverity.error);\r\n this.spinner.hide();\r\n });\r\n }\r\n}\r\n","| # | \r\n\r\n {{this.paginator.pageIndex == 0 ? i + 1 : 1 + i + this.paginator.pageIndex * this.paginator.pageSize}}\r\n | \r\nDominio | \r\n{{element.domain}} | \r\nAcciones | \r\n\r\n | \r\n
|---|
\r\n \r\n
\r\n\r\n \r\n\r\n \r\n \r\n\r\n
\r\n \r\n \r\n \r\n\r\n
\r\n\r\n\r\n\r\n","import { HttpErrorResponse } from '@angular/common/http';\r\nimport { Component, OnInit, ViewChild } from '@angular/core';\r\nimport { MatDialog } from '@angular/material/dialog';\r\nimport { MatPaginator } from '@angular/material/paginator';\r\nimport { MatTableDataSource } from '@angular/material/table';\r\nimport { Router } from '@angular/router';\r\nimport { NgxSpinnerService } from 'ngx-spinner';\r\nimport { EnterpriseService } from 'src/app/services/enterprise/enterprise.service';\r\nimport { StreamingServerService } from 'src/app/services/streamingServer/streamingServer.service';\r\nimport { MessageModalComponent } from 'src/app/shared/components/modals/message/message-modal.component';\r\nimport { ServerStreamingModalComponent } from 'src/app/shared/components/modals/server-streaming/server-streaming-modal.component';\r\nimport { AppConstants } from 'src/app/shared/constants/app.contants';\r\nimport { AlertService, MessageSeverity } from 'src/app/shared/services/alert.service';\r\n\r\n@Component({\r\n selector: 'app-server-streaming',\r\n templateUrl: './server-streaming.component.html',\r\n styleUrls: ['./server-streaming.component.css']\r\n})\r\nexport class ServerStreamingComponent implements OnInit {\r\n loading: boolean = false;\r\n dataSource = new MatTableDataSource();\r\n displayedColumns: string[] = ['name','ip','streamingRtmp','streamingFile','action'];\r\n @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;\r\n enterprises = [];\r\n enterpriseSelect = 0;\r\n color1: string;\r\n color2: string;\r\n colorFont: string;\r\n colorFont2: string;\r\n enabledRead: number;\r\n enabledWrite: number;\r\n\r\n constructor(\r\n public dialog: MatDialog,\r\n private alertService: AlertService,\r\n private spinner: NgxSpinnerService,\r\n private router: Router,\r\n private streamingServerService: StreamingServerService,\r\n private enterpriseService: EnterpriseService,\r\n ) {\r\n document.getElementById(\"titleHeaderNav\").innerHTML = 'Streaming > Servidores';\r\n }\r\n\r\n ngOnInit() {\r\n this.setTheme();\r\n this.dataSource.paginator = this.paginator;\r\n this.paginator._intl.itemsPerPageLabel = '';\r\n this.enterpriseSelect = (+localStorage.getItem(AppConstants.Session.ENTERPRISE));\r\n this.getList();\r\n }\r\n\r\n setTheme(){\r\n this.color1 = localStorage.getItem(AppConstants.Session.THEME_COLOR1);\r\n this.color2 = localStorage.getItem(AppConstants.Session.THEME_COLOR2);\r\n this.colorFont = localStorage.getItem(AppConstants.Session.THEME_COLOR_FONT);\r\n this.colorFont2 = localStorage.getItem(AppConstants.Session.THEME_COLOR_FONT2);\r\n //validate Permisses menu\r\n var menu = JSON.parse(localStorage.getItem(AppConstants.Session.MENU));\r\n var page = this.router.url.split(\"/\");\r\n var i = page[page.length-1];\r\n var itemTag = menu.filter(x => x.tag != null && (x.tag.toString()).toLowerCase().includes(i));\r\n if(itemTag.length>0){\r\n this.enabledRead = itemTag[0].activeRead;\r\n this.enabledWrite = itemTag[0].activeWrite;\r\n }else{\r\n this.enabledRead = 0;\r\n this.enabledWrite = 0;\r\n }\r\n }\r\n\r\n applyFilter(event: Event) {\r\n const filterValue = (event.target as HTMLInputElement).value;\r\n this.dataSource.filter = filterValue.trim().toLowerCase();\r\n }\r\n\r\n getEnterprises() {\r\n this.spinner.show();\r\n this.enterpriseService.getEnterprises().subscribe((response) => {\r\n this.enterprises = response.filter(f => f.enabled == AppConstants.Flag.Active);\r\n this.enterpriseSelect = parseInt(localStorage.getItem(AppConstants.Session.ENTERPRISE));\r\n this.getList();\r\n },\r\n (error: HttpErrorResponse) => {\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n getList(){\r\n this.spinner.show();\r\n this.streamingServerService.getList(this.enterpriseSelect).subscribe((_) => {\r\n if(_.error == null){\r\n this.dataSource.data = _.data;\r\n }\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n openAddModal() {\r\n let dialogRef = this.dialog.open(ServerStreamingModalComponent, {\r\n data: { title: AppConstants.TitleModal.CREATE_SERVER_STREAMING, enabledWrite: this.enabledWrite,\r\n enabledRead: this.enabledRead, action: 0,idEnterprise: this.enterpriseSelect, obj:null,\r\n color: this.color1,colorFont:this.color2},\r\n width: '500px',\r\n hasBackdrop: true\r\n });\r\n dialogRef.afterClosed().subscribe(_ => {\r\n this.getList();\r\n });\r\n }\r\n\r\n openEditModal(data){\r\n let dialogRef = this.dialog.open(ServerStreamingModalComponent, {\r\n data: { title: AppConstants.TitleModal.UPDATE_SERVER_STREAMING, enabledWrite: this.enabledWrite,\r\n enabledRead: this.enabledRead,action: 1,idEnterprise: this.enterpriseSelect,obj:data,\r\n color: this.color1,colorFont:this.color2},\r\n width: '500px',\r\n hasBackdrop: true\r\n });\r\n dialogRef.afterClosed().subscribe(_ => {\r\n this.getList();\r\n });\r\n }\r\n\r\n changeEnterprise(data) {\r\n this.enterpriseSelect = data.value;\r\n this.getList();\r\n }\r\n\r\n delete(obj) {\r\n let dialogRef = this.dialog.open(MessageModalComponent, {\r\n data: {\r\n title: AppConstants.TitleModal.DELETE_CONFIRMATION_TITLE,\r\n message: `${AppConstants.MessageModal.DELETE_SERVER_CONFIRMATION_MESSAGE1}`,\r\n hasButton: true,\r\n contentButton: {\r\n yes: 'SI',\r\n no: 'CANCELAR'\r\n }\r\n },\r\n width: '600px',\r\n });\r\n\r\n dialogRef.afterClosed().subscribe(response => {\r\n if (response.result == true) {\r\n this.deleteSecurity(obj.id);\r\n }\r\n });\r\n\r\n }\r\n\r\n deleteSecurity(id: number) {\r\n this.spinner.show();\r\n this.streamingServerService.delete(id).subscribe((response => {\r\n this.spinner.hide();\r\n this.alertService.showMessage(AppConstants.TitleModal.DELETE_STREAMING_SERVER, AppConstants.MessageModal.DELETE, MessageSeverity.success);\r\n this.getList();\r\n }),\r\n (error: HttpErrorResponse) => {\r\n this.alertService.showMessage(AppConstants.TitleModal.DELETE_STREAMING_SERVER, error.error.messages, MessageSeverity.error);\r\n this.spinner.hide();\r\n });\r\n }\r\n}\r\n","| # | \r\n\r\n {{this.paginator.pageIndex == 0 ? i + 1 : 1 + i + this.paginator.pageIndex * this.paginator.pageSize}}\r\n | \r\nNombre | \r\n{{element.name}} | \r\nIP | \r\n{{element.ip}} | \r\nRMTP | \r\n{{element.streamingRtmp}} | \r\nFile | \r\n{{element.streamingFile}} | \r\nAcciones | \r\n\r\n | \r\n
|---|
\r\n\r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n
\r\n\r\n","import { DatePipe } from '@angular/common';\r\nimport { HttpErrorResponse } from '@angular/common/http';\r\nimport { Component, ElementRef, OnInit, ViewChild } from '@angular/core';\r\nimport { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';\r\nimport { NgxSpinnerService } from 'ngx-spinner';\r\nimport { StreamingStadisticsService } from 'src/app/services/streamingStadistics/streamingStadistics.service';\r\nimport { AppConstants } from 'src/app/shared/constants/app.contants';\r\nimport { EnterpriseService } from 'src/app/services/enterprise/enterprise.service';\r\nimport { CameraService } from '../../../../services/camera/camera.service';\r\nimport { MessageSeverity, AlertService } from 'src/app/shared/services/alert.service';\r\nimport * as FileSaver from 'file-saver';\r\nimport { sum } from 'lodash';\r\nimport { StreamingStadisticsModel } from 'src/app/models/streamingStadistics/streamingStadistics';\r\nimport { MatDialog } from '@angular/material/dialog';\r\nimport { MatPaginator, PageEvent } from '@angular/material/paginator';\r\nimport { MatTableDataSource } from '@angular/material/table';\r\nimport { HeadquarterService } from 'src/app/services/headquarter/headquarter.service';\r\nimport { IDropdownSettings } from 'ng-multiselect-dropdown';\r\nimport {DateAdapter, MAT_DATE_FORMATS} from '@angular/material';\r\nimport { APP_DATE_FORMATS, AppDateAdapter } from 'src/app/shared/helpers/format-datepicker';\r\nimport {Chart} from 'chart.js';\r\nimport ChartDataLabels from 'chartjs-plugin-datalabels';\r\n\r\n@Component({\r\n selector: 'app-streaming-stadistics',\r\n templateUrl: './streaming-stadistics.component.html',\r\n styleUrls: ['./streaming-stadistics.component.css']\r\n})\r\nexport class StreamingStadisticsComponent implements OnInit {\r\n dataSource = new MatTableDataSource();\r\n dataSources = new MatTableDataSource();\r\n displayedColumns: string[] = ['index','enterprise', 'camera', 'createdAt', 'ip', 'pc_movil', 'browser', 'origin', 'originDomain', 'userAgent'];\r\n @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;\r\n @ViewChild('chart', { static: false }) canvas: ElementRef;\r\n @ViewChild('chart2', { static: false }) canvas2: ElementRef;\r\n @ViewChild('chart3', { static: false }) canvas3: ElementRef;\r\n @ViewChild('chart4', { static: false }) canvas4: ElementRef;\r\n\r\n enterpriseSelect: number = 0;\r\n cameraSelect = \"TODOS\";\r\n length: number = 0;\r\n isAdministratorStreaming=false;\r\n reportForm: FormGroup;\r\n camerasSelect = new FormControl();\r\n myDate = new Date();\r\n pageEvent: PageEvent;\r\n pageSize: number = 12;\r\n cameras = [];\r\n enterprises = [];\r\n date = new Date();\r\n dateF = new Date();\r\n timeI: string;\r\n timeF: string;\r\n dateV:string;\r\n showData = false;\r\n showPaginator = true;\r\n displayListStadistics = 'block';\r\n dateIView:string;\r\n dateFView:string;\r\n dataStreamingStadistics: Array\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n | # | \r\n\r\n {{this.paginator.pageIndex == 0 ? i + 1 : 1 + i + this.paginator.pageIndex * this.paginator.pageSize}}\r\n | \r\nEmpresa | \r\n{{element.enterprise}} | \r\nCĆ”mara | \r\n{{element.camera}} | \r\nFecha de Registro | \r\n{{element.createdAt}} | \r\nIP | \r\n{{element.ip}} | \r\nPC / MĆ³vil | \r\n{{element.pc_movil}} | \r\nNavegador | \r\n{{element.browser}} | \r\nOrigen | \r\n{{element.origin}} | \r\nDominio | \r\n{{element.originDomain}} | \r\nAgente | \r\n{{element.userAgent}} | \r\n
|---|
\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n