[{"__symbolic":"module","version":4,"metadata":{"VariableComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../../../../shared/configure-component-base","name":"ConfigureComponentBase","line":43,"character":39},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":37,"character":1},"arguments":[{"selector":"variable","template":"<div class=\"portlet-input design-portlet-input\"> <div class=\"variable-operation row\"> <div class=\"search-condition col-lg-8\"> <div class=\"operation-input-select col-lg-2\"> <ng-select name=\"dataTypeSelect\" [items]=\"dataTypes\" bindLabel=\"key\" bindValue=\"value\" [searchable]=\"false\" [placeholder]=\"lc('AllDataType')\" [(ngModel)]=\"selectedDataType\" [clearable]=\"true\" (change)=\"loadVariablesAndClearSelectedItems()\" [notFoundText]=\"l('NoData')\"> <ng-template ng-option-tmp ng-label-tmp let-item=\"item\"> {{getConfigureVariableDataType(item.key)}} </ng-template> </ng-select> </div> <div class=\"operation-input-select col-lg-2\"> <ng-select name=\"groupSelect\" [items]=\"groupList\" bindLabel=\"name\" bindValue=\"id\" [searchable]=\"true\" [placeholder]=\"lc('AllGroup')\" [(ngModel)]=\"selectedGroupId\" [clearable]=\"true\" (change)=\"loadVariablesAndClearSelectedItems()\" [notFoundText]=\"l('NoData')\"> <ng-template ng-option-tmp ng-label-tmp let-item=\"item\"> {{item.name}} </ng-template> </ng-select> </div> <div class=\"operation-input-select col-lg-2\"> <ng-select name=\"dataSourceSelect\" [items]=\"dataSources\" bindLabel=\"displayName\" bindValue=\"id\" [searchable]=\"false\" [placeholder]=\"lc('AllDataSource')\" [(ngModel)]=\"selectedDataSourceId\" [clearable]=\"true\" (change)=\"loadVariablesAndClearSelectedItems()\" [notFoundText]=\"l('NoData')\"> <ng-template ng-option-tmp ng-label-tmp let-item=\"item\"> {{item.displayName}} </ng-template> </ng-select> </div> <div class=\"operation-input-select col-lg-2\"> <ng-select name=\"rwTypeSelect\" [items]=\"rwTypes\" bindLabel=\"key\" bindValue=\"value\" [searchable]=\"false\" [placeholder]=\"lc('AllReadWrite')\" [(ngModel)]=\"selectedRwType\" [clearable]=\"true\" (change)=\"loadVariablesAndClearSelectedItems()\" [notFoundText]=\"l('NoData')\"> <ng-template ng-option-tmp ng-label-tmp let-item=\"item\"> {{lc(item.key)}} </ng-template> </ng-select> </div> </div> </div> <div class=\"variable-operation row\"> <div class=\"operation-button col-lg-6\"> <button class=\"fe-btn fe-btn-default fe-btn-save\" (click)=\"createVariable()\">{{l('Add')}}</button> <button class=\"fe-btn fe-btn-default fe-btn-save\" (click)=\"showBatchImportModal()\">{{lc('BatchImport')}}</button> <button class=\"fe-btn fe-btn-default btn-batch-delete\" [disabled]=\"!selectedVariables || selectedVariables.length == 0\" (click)=\"batchEditVariables()\">{{lc('BatchEdit')}}</button> <button class=\"fe-btn fe-btn-default btn-batch-delete\" [disabled]=\"!selectedVariables || selectedVariables.length == 0\" (click)=\"batchDeleteVariables()\">{{lc('BatchDelete')}}</button> <button class=\"fe-btn fe-btn-default fe-btn-normal\" (click)=\"showVariableGroupModal()\">{{lc('VariableGroupManage')}}</button> </div> <div class=\"operation-input col-lg-6 clearfix\"> <div class=\"operation-input-search col-lg-4\"> <input placeholder='{{lc(\"SearchVariableOrMonitor\")}}' type=\"text\" name=\"variableName\" [(ngModel)]=\"variableName\" (change)=\"loadVariablesAndClearSelectedItems()\"> <i class=\"fcloud-search\" (click)=\"loadVariablesAndClearSelectedItems()\"></i> </div> </div> </div> </div> <div class=\"primeng-datatable-container variable-component-table\" [busyIf]=\"primengTableHelper.isLoading\"> <p-table #dataTable (onLazyLoad)=\"loadVariables($event)\" [value]=\"primengTableHelper.records\" rows=\"{{primengTableHelper.defaultRecordsCountPerPage}}\" [paginator]=\"false\" [lazy]=\"true\" [(selection)]=\"selectedVariables\" selectionMode=\"multiple\" dataKey=\"id\" [scrollable]=\"true\" ScrollWidth=\"100%\" responsive=\"primengTableHelper.isResponsive\" frozenWidth=\"200px\"> <ng-template pTemplate=\"frozenheader\"> <tr class=\"p-table-change-frozen-column-height designer-actions-style\"> <th class=\"last-th\"> {{l('Actions')}} <span class=\"fa fa-cog fa-fw\"></span> </th> </tr> </ng-template> <ng-template pTemplate=\"frozenbody\" let-record> <tr class=\"p-table-change-frozen-column-height\" [pSelectableRow]=\"record\"> <td> <div class=\"table-control-right\"> <ul> <li> <a (click)=\"editVariable(record.id)\">{{l('Edit')}}</a> </li> <li> <a (click)=\"deleteVariable(record)\">{{l('Delete')}}</a> </li> </ul> </div> </td> </tr> </ng-template> <ng-template pTemplate=\"header\"> <tr class=\"p-table-get-unfrozen-column-height\"> <th class=\"checkbox\" style=\"width: 50px;\"> <p-tableHeaderCheckbox #tableHeaderCheckbox></p-tableHeaderCheckbox> </th> <th class=\"col-xs-1 col-md-1\"> {{lc('ConfigureVariableName')}} </th> <th class=\"col-xs-1 col-md-1\"> {{lc('Unit')}} </th> <th class=\"col-xs-1 col-md-1\"> {{lc('DataSourceName')}} </th> <th class=\"col-xs-1 col-md-1\"> {{lc('VariableGroup')}} </th> <th class=\"col-xs-1 col-md-1\"> {{lc('DataType')}} </th> <th class=\"col-xs-1 col-md-1\"> {{lc('MinValue')}} </th> <th class=\"col-xs-1 col-md-1\"> {{lc('MaxValue')}} </th> <th class=\"col-xs-1 col-md-1\"> {{lc('CharCount')}} </th> <th class=\"col-xs-1 col-md-1\"> {{lc('StateDescription')}} </th> <th class=\"col-xs-1 col-md-1\"> {{lc('AccessRights')}} </th> <th class=\"col-xs-1 col-md-1\"> {{lc('RefVariableName')}} </th> <th class=\"col-xs-1 col-md-1\"> {{lc('VariableDevice')}} </th> <th class=\"col-xs-1 col-md-1\"> {{lc('ConfigureVariableStationNo')}} </th> <th class=\"col-xs-1 col-md-1\"> {{lc('VariableDataType')}} </th> <th class=\"col-xs-1 col-md-1\"> {{lc('VariableAddress')}} </th> </tr> </ng-template> <ng-template pTemplate=\"body\" let-record> <tr class=\"p-table-get-unfrozen-column-height\" [pSelectableRow]=\"record\"> <td class=\"checkbox\"> <p-tableCheckbox [value]=\"record\"></p-tableCheckbox> </td> <td> {{record.name}} </td> <td> {{record.dataType === dataType.Int32 || record.dataType === dataType.Float ? record.unit : '-'}} </td> <td> {{record.configureDataSourceName}} </td> <td> {{record.groupName}} </td> <td> {{getConfigureVariableDataType(record.dataTypeStr)}} </td> <td> {{record.dataType === dataType.Int32 || record.dataType === dataType.Float ? record.minValue : '-'}} </td> <td> {{record.dataType === dataType.Int32 || record.dataType === dataType.Float ? record.maxValue : '-'}} </td> <td> {{record.dataType === dataType.String ? record.charCount : '-'}} </td> <td> {{record.dataType === dataType.Bool ? getLabelString(record.labelText) : '-'}} </td> <td> {{lc(record.variableRwTypeStr)}} </td> <td> {{record.refFBoxVariableDto?.name}} </td> <td> {{record.refFBoxVariableDto?.devAlias}} </td> <td> {{record.refFBoxVariableDto?.stationNo}} </td> <td> {{record.refFBoxVariableDto ? formatDataType(record.refFBoxVariableDto.dataType, record.refFBoxVariableDto.bitIndexEnabled) : ''}} </td> <td> {{record.refFBoxVariableDto?.addressDescription}} </td> </tr> </ng-template> </p-table> <div class=\"primeng-no-data\" *ngIf=\"primengTableHelper.totalRecordsCount == 0\"> {{l('NoData')}} </div> <div class=\"primeng-paging-container\"> <p-paginator #paginator [rows]=\"primengTableHelper.defaultRecordsCountPerPage\" (onPageChange)=\"loadVariables($event)\" [totalRecords]=\"primengTableHelper.totalRecordsCount\" [rowsPerPageOptions]=\"primengTableHelper.predefinedRecordsCountPerPage\"> </p-paginator> <span class=\"total-records-count\"> {{l('TotalRecordsCount', primengTableHelper.totalRecordsCount)}} </span> </div> </div> ","styles":[".design-portlet-input { .last-th { text-align: right !important; span { padding-right: 0; float: right; } .fa-fw{ float: none !important; } } .ng-select-container { height: 34px !important; } .checkbox { width: 50px; } .empty-box { height: 0; padding: 0; margin: 0; font-size: 0 } .variable-operation { .operation-button { button:not(:last-child) { margin-right: 12px; margin-bottom: 12px; } } // .search-condition { //     div { //     } // } select, input[type=\"text\"] { height: 34px; line-height: 34px; border: 1px solid #C4C6CF; color: rgba(0, 0, 0, 0.6); } input::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.6); } input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: rgba(0, 0, 0, 0.6); } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: rgba(0, 0, 0, 0.6); } input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: rgba(0, 0, 0, 0.6); } .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input { top: 0 !important; } .operation-input-select { padding: 0; float: left; margin-bottom: 12px; select { width: 100%; } } .operation-input { font-size: 0; } .operation-input>div { float: right; margin-bottom: 12px; font-size: 14px; } .operation-input-search { position: relative; padding: 0; input { width: 100%; padding-left: 10px; padding-right: 34px; } .fcloud-search { position: absolute; right: 10px; top: 10px; cursor: pointer; } } } input, select { color: rgba(0, 0, 0, 0.6); } option { color: rgba(0, 0, 0, 0.6) } .operation { text-align: right !important; a { color: #3695FF !important; cursor: pointer; } a:first-child { margin-right: 10px; } } .fe-btn.fe-btn-default.btn-batch-delete { color: #000; background-color: #FFF; border: 1px solid #C4C6CF; } .fe-btn.fe-btn-default.fe-btn-normal { border: 1px solid #b5c2ca; background-color: white; } .fe-btn.fe-btn-default.btn-batch-delete:disabled { color: #7F939F; border: 1px solid #b5c2ca; } @media (min-width: 992px) { .variable-operation .operation-input-select select { margin-right: 12px; width: calc(100% - 12px); } } ng-select { margin-right: 12px; } .operation-input-select ::ng-deep .ng-select-container { height: 34px !important; border: 1px solid #C4C6CF; padding-top: 8px; } .p-table-get-unfrozen-column-height th:not(:first-child) { width: 150px; } .p-table-get-unfrozen-column-height td:not(:first-child) { width: 150px; } } .variable-component-table{ .checkbox { width: 50px !important; } } .designer-actions-style{ .last-th{ span{ float: right; } } .fa-fw{ float: none !important; } }"],"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../../../animations/routerTransition","name":"appModuleAnimation","line":41,"character":17}}]}]}],"members":{"tableHeaderCheckbox":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":44,"character":5},"arguments":["tableHeaderCheckbox",{"static":false}]}]}],"configureId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"dataTable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":46,"character":5},"arguments":["dataTable",{"static":true}]}]}],"paginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":47,"character":5},"arguments":["paginator",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":63,"character":26},{"__symbolic":"reference","module":"../../../../../shared/service-proxies/service-proxies","name":"VariableServiceProxy","line":64,"character":42},{"__symbolic":"reference","module":"../../../../../shared/fbox/fbox/dataType.service","name":"DataTypeService","line":65,"character":42},{"__symbolic":"reference","module":"../../../../../shared/service-proxies/service-proxies","name":"DataSourceServiceProxy","line":66,"character":44},{"__symbolic":"reference","module":"../../../../../shared/service-proxies/service-proxies","name":"VariableGroupServiceProxy","line":67,"character":47},{"__symbolic":"reference","module":"ngx-bootstrap","name":"BsModalService","line":68,"character":39}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"createVariable":[{"__symbolic":"method"}],"loadGroups":[{"__symbolic":"method"}],"showBatchImportModal":[{"__symbolic":"method"}],"getDataSources":[{"__symbolic":"method"}],"loadVariablesData":[{"__symbolic":"method"}],"loadVariablesAndGroupOnCurrentPage":[{"__symbolic":"method"}],"loadVariableAndGroup":[{"__symbolic":"method"}],"loadVariablesDataOnCurrentPage":[{"__symbolic":"method"}],"loadVariables":[{"__symbolic":"method"}],"handleHeaderCheckboxState":[{"__symbolic":"method"}],"emptyConditions":[{"__symbolic":"method"}],"editVariable":[{"__symbolic":"method"}],"deleteVariable":[{"__symbolic":"method"}],"batchDeleteVariables":[{"__symbolic":"method"}],"batchEditVariables":[{"__symbolic":"method"}],"formatDataType":[{"__symbolic":"method"}],"showVariableGroupModal":[{"__symbolic":"method"}],"loadVariablesAndClearSelectedItems":[{"__symbolic":"method"}],"getLabelString":[{"__symbolic":"method"}],"getConfigureVariableDataType":[{"__symbolic":"method"}],"getEnum":[{"__symbolic":"method"}]}}}}]