[{"__symbolic":"module","version":4,"metadata":{"DataSourceConfigurationComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../../shared/configure-component-base","name":"ConfigureComponentBase","line":30,"character":54},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":23,"character":1},"arguments":[{"selector":"data-source-configuration","template":"<div class=\"design-data-source-configuration\"> <div class=\"data-source-table-container clearfix\"> <div class=\"data-source-list\"> <div class=\"data-source-list-title\"> <span>{{lc('DataSource')}}</span> </div> <div class=\"data-source-list-content\"> <div class=\"scroll-body\"> <div class=\"add-data-source\" (click)=\"create()\"> <span>{{lc('AddDataSource')}}</span> </div> <div class=\"data-source-list-body\" #dataSourceListBody> <div *ngFor=\"let dataSource of dataSources\" class=\"data-source clearfix\" (click)=\"selectDataSource(dataSource)\" [ngClass]=\"{'active': selectedDataSource.id === dataSource.id }\"> <a class=\"data-source-name\" title=\"{{dataSource.displayName}}\">{{dataSource.displayName}}</a> <div class=\"icon\" (click)=\"showMoreOperation($event)\"> <i class=\"fcloud-more\"></i> </div> <div class=\"operations\" [style.left.px]=\"operationsLeft\" [style.top.px]=\"operationsTop\"> <nav> <div (click)=\"rename(dataSource)\">{{lc('Rename')}}</div> <div (click)=\"delete($event,dataSource)\">{{lc('Delete')}}</div> </nav> </div> </div> </div> </div> </div> </div> <div class=\"data-source-content\" [busyIf]=\"busy\"> <div class=\"has-data-source\" *ngIf=\"dataSources.length > 0\"> <div class=\"data-source-message\" *ngIf=\"selectedDataSource && selectedDataSource.refDataSourceKey\"> <div> <button type=\"button\" class=\"fe-btn fe-btn-default fe-btn-save\" (click)=\"openImportBoxDataModalClick()\">{{lc('ImportConfigurationButton')}}</button> </div> <tabset class=\"data-source-tab\" #tabs> <tab heading=\"{{lc('MonitorData')}}\" (selectTab)=\"activeTab($event,0)\"> <raw-variable #rawVariableView *ngIf=\"activeTabIndex==0\" [configureId]=\"configureId\" [dataSourceId]=\"selectedDataSource.id\"></raw-variable> </tab> <tab heading=\"{{lc('AlarmRegistration')}}\" (selectTab)=\"activeTab($event,1)\"> <raw-alarm-registration #rawAlarmRegistrationView *ngIf=\"activeTabIndex==1\" [configureId]=\"configureId\" [dataSourceId]=\"selectedDataSource.id\"></raw-alarm-registration> </tab> <tab heading=\"{{lc('HistoryData')}}\" (selectTab)=\"activeTab($event,2)\"> <raw-history-data #rawHistoryDataView *ngIf=\"activeTabIndex==2\" [configureId]=\"configureId\" [dataSourceId]=\"selectedDataSource.id\"></raw-history-data> </tab> <tab heading=\"{{lc('EdgeComputing')}}\" (selectTab)=\"activeTab($event,3)\"> <raw-edge-computing #rawEdgeComputing *ngIf=\"activeTabIndex==3\" [configureId]=\"configureId\" [dataSourceId]=\"selectedDataSource.id\"></raw-edge-computing> </tab> </tabset> </div> <div class=\"no-import-configuration\" *ngIf=\"selectedDataSource && !selectedDataSource.refDataSourceKey\"> <div> <div class=\"icon-no-data\"> <i class=\"fcloud-nodata-dashboard\"></i> </div> <div>{{lc('CurrentDataSourceNoConfigured')}}</div> <button type=\"button\" class=\"fe-btn fe-btn-default fe-btn-save\" (click)=\"openImportBoxDataModalClick()\">{{lc('ImportConfigurationButton')}}</button> </div> </div> </div> <div class=\"no-import-configuration\" *ngIf=\"dataSources.length < 1\"> <div> <div class=\"icon-no-data\"> <i class=\"fcloud-nodata-dashboard\"></i> </div> <div>{{lc(\"NoDataSourceAdded\")}}</div> </div> </div> </div> </div> <importBoxDataModal #importBoxDataModal (importAction)=\"importFromBox($event)\" (importAndGenerateAction)=\"importFromBoxAndGenerate($event)\"></importBoxDataModal> <fc-fbox-account-warning #fboxAccountWarningModal></fc-fbox-account-warning> </div>","styles":[".design-data-source-configuration{ .data-source-table-container { width: 100%; height: calc(100vh - 46px); .data-source-list { position: absolute; left: 0px; width: 200px; height: calc(100% - 46px); float: left; border-right: 1px solid #DCDEE3; .data-source-list-title { height: 50px; border-bottom: 1px solid #DCDEE3; display: flex; justify-content: flex-start; align-items: flex-end; span { padding: 5px; padding-left: 20px; font-size: 16px; font-weight: 300; color: #000000; } } .data-source-list-content { width: 100%; height: calc(100% - 50px); padding: 20px; .add-data-source { width: 100%; height: 32px; cursor: pointer; border: 1px solid #3695ff; color: #3695ff; text-align: center; margin-bottom: 10px; line-height: 32px; background-color: #ffffff; transition: background-color 0.2s ease-in; } .add-data-source:hover { background-color: #3695ff; color: #fff; } } .data-source { width: 100%; height: 32px; cursor: pointer; color: rgba(0, 0, 0, 0.9); position: relative; .icon { width: 32px; padding: 7px; height: 100%; text-align: center; display: none; float: left; } .data-source-name { width: calc(100% - 32px); height: 100%; padding-left: 10px; line-height: 32px; display: block; float: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .operations { width: 150px; position: fixed; background: #ffffff; box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3); z-index: 999; display: none; div { padding: 8px 16px; color: #000000; cursor: pointer; } div:hover { background: #EEF3F9; color: #3695ff; } } } .data-source:hover { background: #F2F3F7; .icon { display: block; background: #EBECF0; } } .data-source.active { background: #3695ff; color: #fff; .icon { background: #3695ff; } .icon:hover { background: #226bbc; } .icon.active { display: block; background: #226bbc; } } } .data-source-content { width: calc(100% - 200px); float: left; height: 100%; padding: 20px; overflow: auto; margin-left: 200px; .no-import-configuration { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: rgba(0, 0, 0, 0.3); font-size: 14px; text-align: center; .fcloud-nodata-dashboard { font-size: 140px; color: rgba(0, 0, 0, 0.3); margin-bottom: 12px; } .fe-btn-save { margin-top: 20px; } } .data-source-message { width: 100%; height: 100%; padding: 20px; ::ng-deep .tab-content { height: calc(100% - 100px); } } } } .data-source-tab>.nav.nav-tabs { .nav-link { color: #fff; } } .data-source-list-body { height: calc(100% - 42px); overflow-x: hidden; overflow-y: auto; } .data-source-tab>.nav.nav-tabs { margin: 0; padding: 3px 0px 0px 0px; border: none; display: -webkit-box; display: -ms-flexbox; display: inline-block; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; border-bottom: 1px solid #ddd; .nav-item { margin-right: 20px; } } .data-source-tab>.nav-tabs>li { float: none; display: inline-block; } .data-source-tab>.nav-tabs>li>a { padding: 10px; color: black !important; border: none; background-color: transparent; font-size: 16px; } .data-source-tab>.nav-tabs>li.active>a, .data-source-tab>.nav-tabs>li.active>a:hover, .data-source-tab>.nav-tabs>li.active>a:focus { padding: 10px; color: #3695ff !important; border-bottom-color: #3695ff; background-color: transparent; border: none; border-bottom: 4px solid #3695ff; } .has-data-source { width: 100%; height: 100%; } .scroll-body { width: 100%; height: 100%; } }"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":27,"character":19},"member":"None"},"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../animations/routerTransition","name":"appModuleAnimation","line":28,"character":17}}]}]}],"members":{"configureId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5}}]}],"fboxAccountWarningModal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":34,"character":5},"arguments":["fboxAccountWarningModal",{"static":false}]}]}],"modal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":35,"character":5},"arguments":["importBoxDataModal",{"static":false}]}]}],"rawVariableView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":36,"character":5},"arguments":["rawVariableView",{"static":false}]}]}],"rawAlarmRegistrationView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":37,"character":5},"arguments":["rawAlarmRegistrationView",{"static":false}]}]}],"rawHistoryDataView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":38,"character":5},"arguments":["rawHistoryDataView",{"static":false}]}]}],"rawEdgeComputing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":39,"character":5},"arguments":["rawEdgeComputing",{"static":false}]}]}],"dataSourceListBody":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":40,"character":5},"arguments":["dataSourceListBody",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":48,"character":18},{"__symbolic":"reference","module":"ngx-bootstrap","name":"BsModalService","line":49,"character":39},{"__symbolic":"reference","module":"../../../shared/service-proxies/service-proxies","name":"DataSourceImportInfoServiceProxy","line":50,"character":44},{"__symbolic":"reference","module":"../../../shared/service-proxies/service-proxies","name":"FBoxAccountSettingsServiceProxy","line":51,"character":53},{"__symbolic":"reference","module":"../../../shared/service-proxies/service-proxies","name":"DataSourceServiceProxy","line":52,"character":42}]}],"ngOnInit":[{"__symbolic":"method"}],"activeTab":[{"__symbolic":"method"}],"openImportBoxDataModalClick":[{"__symbolic":"method"}],"loadDataSources":[{"__symbolic":"method"}],"setDefaultSelected":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"showMoreOperation":[{"__symbolic":"method"}],"selectDataSource":[{"__symbolic":"method"}],"create":[{"__symbolic":"method"}],"edit":[{"__symbolic":"method"}],"rename":[{"__symbolic":"method"}],"openCreateOrEditDataSourceModel":[{"__symbolic":"method"}],"reloadDatasource":[{"__symbolic":"method"}],"reloadAndImportBoxData":[{"__symbolic":"method"}],"openImportBoxDataModal":[{"__symbolic":"method"}],"checkFBoxAccountIsConfigured":[{"__symbolic":"method"}],"importFromBox":[{"__symbolic":"method"}],"importFromBoxAndGenerate":[{"__symbolic":"method"}],"dataSourceImport":[{"__symbolic":"method"}],"buildDataAfterImport":[{"__symbolic":"method"}],"openRenameVariableOrAlarmModal":[{"__symbolic":"method"}],"reloadDataSource":[{"__symbolic":"method"}],"delete":[{"__symbolic":"method"}]}}}}]