[{"__symbolic":"module","version":4,"metadata":{"CreateOrEditVariableModalComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../../../../../shared/configure-component-base","name":"ConfigureComponentBase","line":42,"character":56},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":37,"character":1},"arguments":[{"selector":"create-or-edit-variable-modal","template":"<div class=\"modal-content fe-modal-container design-content-variable design-create-or-edit-variable\" bs-modal-drag> <div class=\"modal-header fe-modal-header\"> <h4 class=\"fe-modal-header-title\"> <span *ngIf=\"createOrUpdateVariableDto && createOrUpdateVariableDto.id\">{{l(\"Edit\")}}</span> <span *ngIf=\"!createOrUpdateVariableDto || !createOrUpdateVariableDto.id\">{{l(\"Add\")}}</span> </h4> <div class=\"fe-modal-header-close\" aria-label=\"Close\" (click)=\"close()\">×</div> </div> <form #variableSaveForm=\"ngForm\"> <div class=\"modal-body\"> <tabset #staticTabs class=\"tab-container tabbable-line\"> <tab heading=\"{{lc('BasicProperty')}}\" customClass=\"m-tabs__item\"> <div class=\"variable-transverse clearfix\"> <div class=\"variable-title\"> <i class=\"star\">*</i> {{lc('VariableName')}}: </div> <div class=\"variable-input\"> <input type=\"text\" name=\"variableName\" class=\"variableNameInput\" #name=\"ngModel\" [(ngModel)]=\"createOrUpdateVariableDto.name\" maxlength=\"200\" required autofocus> <validation-messages [formCtrl]=\"name\"></validation-messages> </div> </div> <div class=\"variable-transverse clearfix\"> <div class=\"variable-title\"> <i class=\"star\">*</i> {{lc(\"VariableGroup\")}}: </div> <div class=\"variable-input\"> <ng-select name=\"groupListSelect\" [items]=\"groupList\" bindLabel=\"name\" bindValue=\"id\" [searchable]=\"false\" [(ngModel)]=\"createOrUpdateVariableDto.configureVariableGroupId\" [required]=\"true\" [clearable]=\"false\" placeholder=\"{{lc('PleaseSelect')}}\" [notFoundText]=\"l('NoData')\"> <ng-template ng-option-tmp ng-label-tmp let-item=\"item\"> {{item.name}} </ng-template> </ng-select> </div> </div> <div class=\"variable-transverse clearfix\"> <div class=\"variable-title\"> <i class=\"star\">*</i> {{lc(\"DataType\")}}: </div> <div class=\"variable-input\"> <ng-select name=\"dataTypeSelect\" [items]=\"dataTypes\" bindLabel=\"key\" bindValue=\"value\" [searchable]=\"false\" [(ngModel)]=\"createOrUpdateVariableDto.dataType\" [required]=\"true\" [clearable]=\"false\" placeholder=\"{{lc('PleaseSelect')}}\" (change)=\"dataTypeChange()\" [notFoundText]=\"l('NoData')\"> <ng-template ng-option-tmp ng-label-tmp let-item=\"item\"> {{getConfigureVariableDataType(item.key)}} </ng-template> </ng-select> </div> </div> <div *ngIf=\"+createOrUpdateVariableDto.dataType == +dataType.Int32\" class=\"variable-transverse clearfix\"> <div class=\"variable-title\"> {{lc('MinValue')}}: </div> <div class=\"variable-input\"> <input type=\"number\" name=\"minValue\" [(ngModel)]=\"inputIntMinValue\" [max]=\"maxIntValue\" onkeydown=\"return event.keyCode !== 69\" [min]=\"minIntValue\" [step]=\"1\" (blur)=\"intValueOverflowCheck()\" [minNumber]=\"minIntValue\" [maxNumber]=\"maxIntValue\" minValueCheck> </div> <div class=\"has-danger\"> <div class=\"form-control-feedback\"> <span *ngIf=\"inputIntMinValue < minIntValue || inputIntMinValue > maxIntValue\">{{lc('DataOverflow')}}</span> </div> </div> </div> <div *ngIf=\"+createOrUpdateVariableDto.dataType == +dataType.Int32\" class=\"variable-transverse clearfix\"> <div class=\"variable-title\"> {{lc('MaxValue')}}: </div> <div class=\"variable-input\"> <input type=\"number\" name=\"maxValue\" [(ngModel)]=\"inputIntMaxValue\" [max]=\"maxIntValue\" onkeydown=\"return event.keyCode !== 69\" [min]=\"minIntValue\" [step]=\"1\" (blur)=\"intValueOverflowCheck()\" [minNumber]=\"minFloatValue\" [maxNumber]=\"maxFloatValue\" [moreThanNumber]=\"inputIntMinValue\" maxValueCheck> </div> <div class=\"has-danger\" *ngIf=\"intValueCheck()\"> <div class=\"form-control-feedback\"> <span>{{intValueCheck()}}</span> </div> </div> </div> <div *ngIf=\"+createOrUpdateVariableDto.dataType == +dataType.Float\" class=\"variable-transverse clearfix\"> <div class=\"variable-title\"> {{lc('MinValue')}}: </div> <div class=\"variable-input\"> <input type=\"number\" name=\"minValue\" [(ngModel)]=\"inputFloatMinValue\" [max]=\"maxFloatValue\" [min]=\"minFloatValue\" [step]=\"0.000001\" (blur)=\"floatValueOverflow()\" [minNumber]=\"minFloatValue\" [maxNumber]=\"maxFloatValue\" minValueCheck> </div> <div class=\"has-danger\"> <div class=\"form-control-feedback\"> <span *ngIf=\"inputFloatMinValue < minFloatValue || inputFloatMinValue > maxFloatValue\">{{lc('DataOverflow')}}</span> </div> </div> </div> <div *ngIf=\"+createOrUpdateVariableDto.dataType == +dataType.Float\" class=\"variable-transverse clearfix\"> <div class=\"variable-title\"> {{lc('MaxValue')}}: </div> <div class=\"variable-input\"> <input type=\"number\" name=\"maxValue\" [(ngModel)]=\"inputFloatMaxValue\" [max]=\"maxFloatValue\" [min]=\"minFloatValue\" [step]=\"0.000001\" (blur)=\"floatValueOverflow()\" [minNumber]=\"minFloatValue\" [maxNumber]=\"maxFloatValue\" [moreThanNumber]=\"inputFloatMinValue\" maxValueCheck> </div> <div class=\"has-danger\" *ngIf=\"floatValueCheck()\"> <div class=\"form-control-feedback\"> <span>{{floatValueCheck()}}</span> </div> </div> </div> <div *ngIf=\"+createOrUpdateVariableDto.dataType == +dataType.Int32 || +createOrUpdateVariableDto.dataType == +dataType.Float\" class=\"variable-transverse clearfix\"> <div class=\"variable-title\"> {{lc(\"Unit\")}}: </div> <div class=\"variable-input\"> <input type=\"text\" name=\"unit\" [(ngModel)]=\"inputUnit\" maxlength=\"30\"> </div> </div> <div *ngIf=\"+createOrUpdateVariableDto.dataType == dataType.Bool\" class=\"variable-transverse clearfix\"> <div class=\"variable-title\"> {{lc(\"StateDescription\")}}: </div> <div *ngFor=\"let state of stateArray; let i = index;\" class=\"label-input\"> <label for=\"label{{i}}\">{{i}}</label> <input id=\"label{{i}}\" type=\"text\" name=\"label{{i}}\" [(ngModel)]=\"state.value\" maxlength=\"200\"> </div> </div> <div *ngIf=\"+createOrUpdateVariableDto.dataType == dataType.String\" class=\"variable-transverse clearfix\"> <div class=\"variable-title\"> {{lc(\"CharCount\")}}: </div> <div class=\"variable-input\"> <input type=\"number\" name=\"charCount\" [(ngModel)]=\"inputCharCount\" [max]=\"maxIntValue\" onkeydown=\"return event.keyCode !== 69\" [min]=\"1\" [step]=\"1\" (blur)=\"charCountCheck()\"> </div> </div> <div class=\"variable-transverse clearfix\"> <div class=\"variable-title\"> {{lc(\"AccessRights\")}}: </div> <div class=\"variable-input\"> <div class=\"variable-access-btn-group\"> <button class=\"access-btn\" [class.rw-selected]=\"createOrUpdateVariableDto.variableRwType == +rwType.Read\" (click)=\"handleRwBtnClicked(rwType.Read)\">{{lc('Read')}}</button> <button class=\"access-btn\" [class.rw-selected]=\"createOrUpdateVariableDto.variableRwType == +rwType.ReadWrite\" (click)=\"handleRwBtnClicked(rwType.ReadWrite)\">{{lc('ReadWrite')}}</button> <button class=\"access-btn\" [class.rw-selected]=\"createOrUpdateVariableDto.variableRwType == +rwType.Write\" (click)=\"handleRwBtnClicked(rwType.Write)\">{{lc('Write')}}</button> </div> </div> </div> <div class=\"sub-title\"> {{lc('VariableDataSourceConfiguration')}} </div> <div class=\"variable-transverse clearfix\"> <div class=\"variable-title\"> {{lc(\"DataSourceType\")}}: </div> <div class=\"variable-input\"> <button disabled>{{getFBoxAlias()}}</button> </div> </div> <div class=\"variable-transverse clearfix\"> <div class=\"variable-title\"> {{lc(\"DataSourceName\")}}: </div> <div class=\"variable-input\"> <ng-select name=\"dataSourceName\" [items]=\"dataSources\" bindLabel=\"displayName\" bindValue=\"id\" [(ngModel)]=\"createOrUpdateVariableDto.dataSourceId\" [searchable]=\"false\" [clearable]=\"false\" [placeholder]=\"lc('PleaseSelect')\" (change)=\"changeDataSource()\" [notFoundText]=\"l('NoData')\"> <ng-template ng-option-tmp ng-label-tmp let-item=\"item\"> {{item.displayName}} </ng-template> </ng-select> </div> </div> <div class=\"variable-transverse clearfix\"> <div class=\"variable-title\"> {{lc('RefVariableName')}}: </div> <div class=\"variable-input\"> <ng-select name=\"refVariable\" style=\"display: inline-block; width: calc(100% - 30px); vertical-align: top;\" [items]=\"fBoxVariableFilterByDataType\" bindLabel=\"name\" bindValue=\"id\" [(ngModel)]=\"createOrUpdateVariableDto.refVariableId\" [clearable]=\"true\" [loading]=\"refVariableSearching\" [loadingText]=\"l('LoadWithThreeDot')\" [notFoundText]=\"l('NoData')\" (change)=\"getDetailSelectedVariable()\"> <ng-template ng-option-tmp ng-label-tmp let-item=\"item\"> {{item.name}}-{{item.groupName}} </ng-template> </ng-select> <button class=\"open-monitor-btn\" [disabled]=\"!createOrUpdateVariableDto.dataSourceId\" (click)=\"showChooseMonitor($event)\"> <span class=\"fa fa-bars\" [class.disable-span]=\"!createOrUpdateVariableDto.dataSourceId\"></span> </button> </div> </div> <div class=\"variable-transverse clearfix\" *ngIf=\"createOrUpdateVariableDto.refVariableId\"> <div class=\"select-search\"> <div> <div>{{lc('VariableDevice')}}:</div> <div>{{fBoxVariableDto?.devAlias}}</div> </div> <div> <div>{{lc('ConfigureVariableStationNo')}}:</div> <div>{{fBoxVariableDto?.stationNo}}</div> </div> <div> <div>{{lc('VariableDataType')}}:</div> <div> {{fBoxVariableDto ? formatDataType(fBoxVariableDto.dataType, fBoxVariableDto.bitIndexEnabled) : ''}} </div> </div> <div> <div>{{lc('VariableAddress')}}:</div> <div>{{fBoxVariableDto?.addressDescription}}</div> </div> <div *ngIf=\"fBoxVariableDto?.labelTextObj\"> <div>{{lc('Label')}}0:</div> <div>{{fBoxVariableDto?.labelTextObj.ftext}}</div> </div> <div *ngIf=\"fBoxVariableDto?.labelTextObj\"> <div>{{lc('Label')}}1:</div> <div>{{fBoxVariableDto?.labelTextObj.ttext}}</div> </div> </div> </div> </tab> <tab heading=\"{{lc('VariableStorage')}}\" customClass=\"m-tabs__item\" *ngIf=\"feature.isEnabled('VariableStorageManage') && AppSessionService.isSupportAdvancedCommunication\"> <div class=\"variable-transverse clearfix storage\"> <div class=\"variable-title\"> {{lc('EnableVariableStorage')}}: </div> <div class=\"variable-input col-6\"> <ui-switch [(ngModel)]=\"createOrUpdateVariableDto.enableVariableStorage\" name=\"EnableVariableStorage\" (change)=\"onEnableVariableStorageChange($event)\" color=\"#3695ff\" size=\"medium\"></ui-switch> </div> </div> <div class=\"variable-transverse clearfix\" *ngIf=\"createOrUpdateVariableDto.enableVariableStorage\"> <div class=\"variable-title\"> {{lc('StorageMode')}}: </div> <div class=\"variable-input col-6\"> <ng-select [items]=\"sampleModes\" bindLabel=\"name\" name=\"SampleMode\" [(ngModel)]=\"selectSampleMode\" [clearable]=\"false\" selectOnTab=\"false\" [placeholder]=\"\" [loadingText]=\"l('LoadWithThreeDot')\" [notFoundText]=\"l('NoData')\"> <ng-template ng-label-tmp let-item=\"item\" let-index=\"index\"> {{lc(item.name)}} </ng-template> <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\"> {{lc(item.name)}} </ng-template> </ng-select> </div> </div> <div class=\"variable-transverse clearfix\" *ngIf=\"createOrUpdateVariableDto.enableVariableStorage && +createOrUpdateVariableDto.sampleMode === +sampleMode.Period\"> <div class=\"variable-title\"> {{lc('StorageCycle')}}: </div> <div class=\"variable-input acquisition-interval col-6\"> <input type=\"number\" name=\"SampleRate\" [(ngModel)]=\"createOrUpdateVariableDto.sampleRate\"> {{lc('Second')}} </div> </div> <div class=\"variable-transverse clearfix\"> <div class=\"variable-title\"> {{lc('StoragePath')}}: </div> <div class=\"variable-input\"> <div class=\"ui-inputgroup margin-left-15px\"> <input type=\"text\" pInputText placeholder=\"{{lc('IoTDataBase')}}\" [disabled]=\"true\"> <span class=\"ui-inputgroup-addon\">...</span> </div> </div> </div> <div class=\"variable-transverse clearfix\"> <div class=\"variable-title\"> {{lc('StorageTime')}}: </div> <div class=\"variable-input margin-left-15px\"> <ng-select class=\"storage-time-types margin-left-15px\" [items]=\"storageTimeTypes\" bindLabel=\"name\" name=\"StorageTimeTypes\" [(ngModel)]=\"selectedStorageTimeType\" [clearable]=\"false\" selectOnTab=\"false\" [placeholder]=\"\" [loadingText]=\"l('LoadWithThreeDot')\" bindValue=\"key\" [notFoundText]=\"l('NoData')\" [disabled]=\"true\"> <ng-template ng-label-tmp let-item=\"item\" let-index=\"index\"> {{lc(item.name)}} </ng-template> <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\"> {{lc(item.name)}} </ng-template> </ng-select> </div> </div> </tab> </tabset> </div> <div class=\"fe-modal-footer\"> <div class=\"button-group\"> <button type=\"submit\" class=\"fe-btn fe-btn-default fe-btn-save\" (click)=\"save()\" [disabled]=\"!variableSaveForm.form.valid || saving\"> {{l('Save')}} </button> <button [disabled]=\"saving\" type=\"button\" class=\"fe-btn fe-btn-default fe-btn-cancel-one\" (click)=\"close()\"> {{l('Cancel')}} </button> </div> </div> </form> </div> ","styles":[".design-create-or-edit-variable{ .variable-transverse { width: 100%; margin: 1rem auto; .variable-title { white-space: nowrap; float: left; } .storage{ margin-top:0.1rem; } .variable-title{ width: 30%; line-height: 30px; text-align: right; padding-right: 20px; word-break: break-all; .star { color: red; } } .label-input { margin-bottom: 5px; } .label-input { margin-left: 30%; width: 271px; label { width: 20px; margin-right: 5px; } input { width: 246px; height: 30px; } } .variable-input { // margin-left: 30%; width: 271px; float: left; .storage-time-types{ width: 76%; ::ng-deep.ng-star-inserted{ color:#999; } } .ui-inputgroup{ width:76%; .ui-inputgroup-addon { height: 30px; margin-left: 10px; padding-top: 0px !important; } } input { width: 100%; height: 30px; } select { height: 30px; } .data-source-name-select { width: 100%; } .monitor-point-name-select { width: calc(100% - 31px); } .open-monitor-btn { height: 30px; width: 30px; background-color: white; border: 1px solid #b5c2ca; cursor: pointer; margin-left: 0; float: right; span { color: #3695FF; } span.disable-span { color: #7F939F; } } button[disabled] { border: 1px solid #C4C6CF; background-color: #F2F3F7; height: 30px; } .access-btn.rw-selected { background-color: #EBECF0; } .access-btn { white-space: nowrap; width: 91px; font-size: 12px; height: 30px; border: 1px solid #C4C6CF; background-color: white; cursor: pointer; } .access-btn:not(:first-child) { margin-left: -1px; } } .acquisition-interval{ input{ width:100px; padding-left:10px; } } } .ng-select-container .ng-value-container .ng-input{ top: 0!important; } .has-danger .form-control-feedback{ float: left; margin-left: 30%; } } .margin-left-15px{ margin-left:15px; } input, select { color: rgba(0, 0, 0, 0.6); } option { color: rgba(0, 0, 0, 0.6) } .fe-modal-container .fe-modal-header { border-bottom: 1px solid #f4f4f4; .fe-modal-header-title { line-height: 50px; } } .modal-content .modal-body { padding: 16px 16px 0; } .design-content{ .variable-transverse:last-child { margin-bottom: 0; } } .fe-btn.fe-btn-default.fe-btn-save.save-and-import { width: auto; padding: 0 10px; } .sub-title { border-bottom: 1px solid #f4f4f4; } .data-source-type { button:not(:first-child) { margin-left: 8px; } } select:invalid { color: gray !important; } option[disabled] { display: none !important; } option { color: black !important; } .select-search { float: left; width: 260px; margin-left: 30%; padding: 8px; background-color: #eee; div { margin-bottom: 4px; div:first-child { float: left; margin-right: 10px; } div:last-child { word-break: break-all; overflow: hidden; } } } .focus { color: white; background-color: #3695FF; } "]}]}],"members":{"modal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":43,"character":5},"arguments":["saveVariableModal",{"static":false}]}]}],"chooseMonitorModal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":44,"character":5},"arguments":["chooseSingleMonitorModal",{"static":false}]}]}],"selectElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":45,"character":5},"arguments":["select",{"static":false}]}]}],"variableCreated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":46,"character":5}}]}],"variableEdited":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":5}}]}],"configureId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":101,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":102,"character":42},{"__symbolic":"reference","module":"../../../../../../shared/service-proxies/service-proxies","name":"VariableServiceProxy","line":103,"character":42},{"__symbolic":"reference","module":"../../../../../../shared/fbox/fbox/dataType.service","name":"DataTypeService","line":104,"character":42},{"__symbolic":"reference","module":"../../../../../../shared/service-proxies/service-proxies","name":"DataSourceServiceProxy","line":105,"character":44},{"__symbolic":"reference","module":"../../../../../../shared/service-proxies/service-proxies","name":"VariableGroupServiceProxy","line":106,"character":47},{"__symbolic":"reference","module":"ngx-bootstrap","name":"BsModalRef","line":107,"character":37},{"__symbolic":"reference","module":"../../../../../../shared/common/session/app-session.service","name":"AppSessionService","line":108,"character":43},{"__symbolic":"reference","module":"ngx-bootstrap","name":"BsModalService","line":109,"character":39}]}],"ngOnInit":[{"__symbolic":"method"}],"loadDataSource":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"getVariableForEdit":[{"__symbolic":"method"}],"showChooseMonitor":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"dataTypeEqualValidation":[{"__symbolic":"method"}],"handleSave":[{"__symbolic":"method"}],"assignToDto":[{"__symbolic":"method"}],"getFBoxVariableSelected":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"changeDataSource":[{"__symbolic":"method"}],"loadRefVariables":[{"__symbolic":"method"}],"getDetailSelectedVariable":[{"__symbolic":"method"}],"formatDataType":[{"__symbolic":"method"}],"onEnableVariableStorageChange":[{"__symbolic":"method"}],"loadVariableGroup":[{"__symbolic":"method"}],"getEnum":[{"__symbolic":"method"}],"handleRwBtnClicked":[{"__symbolic":"method"}],"dataTypeChange":[{"__symbolic":"method"}],"minMaxValueCheck":[{"__symbolic":"method"}],"intValueOverflowCheck":[{"__symbolic":"method"}],"intValueCheck":[{"__symbolic":"method"}],"floatValueCheck":[{"__symbolic":"method"}],"floatValueOverflow":[{"__symbolic":"method"}],"getConfigureVariableDataType":[{"__symbolic":"method"}],"charCountCheck":[{"__symbolic":"method"}]}}}}]