diff --git a/app/app-upgraded-providers.ts b/app/app-upgraded-providers.ts index 025d6c4f0..f82ccabf0 100644 --- a/app/app-upgraded-providers.ts +++ b/app/app-upgraded-providers.ts @@ -15,6 +15,9 @@ import {kommonitorShareHelperService} from 'util/genericServices/kommonitorShare import {kommonitorSingleFeatureMapHelperService} from 'util/genericServices/kommonitorSingleFeatureMapHelperService/kommonitor-single-feature-map-helper-service.module' import {kommonitorVisualStyleHelperService} from 'util/genericServices/kommonitorVisualStyleHelperService/kommonitor-visual-style-helper-service.module' + +//cache helper service + export function kommonitorCacheHelperServiceFactory(injector:any){ return injector.get('kommonitorCacheHelperService'); } @@ -24,7 +27,7 @@ export const ajskommonitorCacheHelperServiceProvider: any = { useFactory:kommonitorCacheHelperServiceFactory , }; - + //batch update helper service export function kommonitorBatchUpdateHelperServiceFactory (injector:any){ return injector.get('kommonitorBatchUpdateHelperService') } @@ -35,6 +38,7 @@ export const ajskommonitorBatchUpdateHelperServiceProvider: any = { useFactory:kommonitorBatchUpdateHelperServiceFactory , }; + //config storage export function kommonitorConfigStorageServiceFactory (injector:any){ return injector.get('kommonitorConfigStorageService') } @@ -65,9 +69,8 @@ export const ajskommonitorDataGridHelperServiceProvider: any = { useFactory:kommonitorDataGridHelperServiceFactory, }; //diagram helper - export function kommonitorDiagramHelperServiceFactory (injector:any){ - return injector.get('kommonitorDiagramHelperService') -} + +export const kommonitorDiagramHelperServiceFactory = (injector: any) => injector.get('kommonitorDiagramHelperService'); export const ajskommonitorDiagramHelperServiceProvider: any = { deps: ['$injector'], diff --git a/app/app.module.ts b/app/app.module.ts index dcbea29be..66b9a3b1a 100644 --- a/app/app.module.ts +++ b/app/app.module.ts @@ -13,11 +13,14 @@ import { NgxEchartsModule } from 'ngx-echarts'; import { EchartsDirective, EchartsxModule } from 'echarts-for-angular'; import { InfoModalComponent } from 'components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.component'; import { VersionInfoComponent } from 'components/kommonitorUserInterface/kommonitorControls/versionInfo/version-info.component'; +import { KommonitorDiagramsComponent } from 'components/kommonitorUserInterface/kommonitorControls/kommonitorDiagrams/kommonitor-diagrams.component'; +// import { IndicatorRadarComponent } from 'components/kommonitorUserInterface/kommonitorControls/indicatorRadar/indicator-radar'; // import { InfoModalModule } from 'components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.module'; // import { VersionInfoModule } from 'components/kommonitorUserInterface/kommonitorControls/versionInfo/version-info.module'; +// import { RegressionDiagramComponent } from 'components/kommonitorUserInterface/kommonitorControls/regressionDiagram/regression-diagram.component'; import { ajskommonitorCacheHelperServiceProvider,ajskommonitorBatchUpdateHelperServiceProvider,ajskommonitorConfigStorageServiceProvider,ajskommonitorDataExchangeServiceeProvider,ajskommonitorDataGridHelperServiceProvider,ajskommonitorDiagramHelperServiceProvider,ajskommonitorFilterHelperServiceProvider,ajskommonitorKeycloackHelperServiceProvider,ajskommonitorMultiStepFormHelperServiceProvider, ajskommonitorSingleFeatureMapServiceProvider } from 'app-upgraded-providers'; //import { KommonitorDiagramsComponent } from 'components/kommonitorUserInterface/kommonitorControls/kommonitorDiagrams/kommonitor-diagrams.component'; -import { KommonitorDiagramsModule } from 'components/kommonitorUserInterface/kommonitorControls/kommonitorDiagrams/kommonitor-diagrams.module'; + // currently the AngularJS routing is still used as part of kommonitorClient module const routes: Routes = []; @@ -28,7 +31,6 @@ declare var MathJax; BrowserModule, UpgradeModule, RouterModule.forRoot(routes , { useHash: true }), - KommonitorDiagramsModule, NgxEchartsModule.forRoot({ echarts: () => import('echarts') }), @@ -47,17 +49,28 @@ declare var MathJax; declarations: [ InfoModalComponent, - + VersionInfoComponent, + KommonitorDiagramsComponent, + // IndicatorRadarComponent, + // RegressionDiagramComponent + + + ] }) export class AppModule implements DoBootstrap { + + + + private env: any = {}; constructor(private upgrade: UpgradeModule) { } + async ngDoBootstrap() { this.checkBrowser(); @@ -90,9 +103,15 @@ export class AppModule implements DoBootstrap { angular.module('kommonitorUserInterface') .directive('versionInfo', downgradeComponent({ component: VersionInfoComponent }) as angular.IDirectiveFactory); + + // angular.module('kommonitorUserInterface') + // .directive('regression-diagram', downgradeComponent({ component: RegressionDiagramComponent }) as angular.IDirectiveFactory); + + // angular.module('kommonitorUserInterface') + // .directive('kommonitorDiagrams', downgradeComponent({ component: KommonitorDiagramsComponent }) as angular.IDirectiveFactory); - //angular.module('kommonitorUserInterface') - //.directive('kommonitor-diagrams', downgradeComponent({ component: KommonitorDiagramsComponent }) as angular.IDirectiveFactory); + angular.module('kommonitorUserInterface') + .directive('kommonitorDiagrams', downgradeComponent({ component: KommonitorDiagramsComponent }) as angular.IDirectiveFactory); console.log("registered downgraded Angular components for AngularJS usage"); } @@ -534,4 +553,8 @@ export class AppModule implements DoBootstrap { } } + + + + } \ No newline at end of file diff --git a/app/components/kommonitorUserInterface/kommonitor-user-interface.module.js b/app/components/kommonitorUserInterface/kommonitor-user-interface.module.js index 38c7f98b4..bd98156f0 100644 --- a/app/components/kommonitorUserInterface/kommonitor-user-interface.module.js +++ b/app/components/kommonitorUserInterface/kommonitor-user-interface.module.js @@ -1,6 +1,6 @@ "use strict"; -angular.module('kommonitorUserInterface', ['kommonitorMap', 'kommonitorDataSetup', - 'kommonitorIndividualIndicatorComputation', 'kommonitorDiagrams', 'indicatorRadar', 'regressionDiagram', 'kommonitorFilter', 'kommonitorBalance', - 'kommonitorReachability', 'poi', 'spatialUnitNotificationModal', 'feedbackModal', 'reportingModal', 'wmsModal', 'wfsModal', 'kommonitorDataImport', +angular.module('kommonitorUserInterface', ['kommonitorMap', 'kommonitorDataSetup', 'kommonitorAdmin', + 'kommonitorIndividualIndicatorComputation', 'kommonitorFilter', 'kommonitorBalance', + 'kommonitorReachability', 'poi', 'spatialUnitNotificationModal', 'feedbackModal', 'reportingModal', 'wmsModal', 'wfsModal', 'kommonitorDataImport', 'kommonitorLegend', 'kommonitorElementVisibilityHelper', 'kommonitorShareHelper']); //# sourceMappingURL=kommonitor-user-interface.module.js.map \ No newline at end of file diff --git a/app/components/kommonitorUserInterface/kommonitorControls/indicatorRadar/indicator-radar.component.js b/app/components/kommonitorUserInterface/kommonitorControls/indicatorRadar/indicator-radar.component.js index 57b899a81..6f79825e1 100644 --- a/app/components/kommonitorUserInterface/kommonitorControls/indicatorRadar/indicator-radar.component.js +++ b/app/components/kommonitorUserInterface/kommonitorControls/indicatorRadar/indicator-radar.component.js @@ -77,6 +77,7 @@ angular } modifyRadarContent(kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime); }; + //here $scope.onChangeSelectedDate = function (input) { if (input.isSelected) { modifyRadarContent(kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime); diff --git a/app/components/kommonitorUserInterface/kommonitorControls/indicatorRadar/indicator-radar.component.ts b/app/components/kommonitorUserInterface/kommonitorControls/indicatorRadar/indicator-radar.component.ts deleted file mode 100644 index 95cceef81..000000000 --- a/app/components/kommonitorUserInterface/kommonitorControls/indicatorRadar/indicator-radar.component.ts +++ /dev/null @@ -1,612 +0,0 @@ -angular - .module('indicatorRadar') - .component( - 'indicatorRadar', - { - templateUrl: "components/kommonitorUserInterface/kommonitorControls/indicatorRadar/indicator-radar.template.html", - - controller: [ - 'kommonitorDataExchangeService', 'kommonitorDiagramHelperService', 'kommonitorFilterHelperService', '$scope', '$rootScope', '$timeout', '$http', '__env', - function indicatorRadarController( - kommonitorDataExchangeService, kommonitorDiagramHelperService, kommonitorFilterHelperService, $scope, $rootScope, $timeout, $http, __env) { - /* - * reference to kommonitorDataExchangeService instances - */ - this.kommonitorDataExchangeServiceInstance = kommonitorDataExchangeService; - this.kommonitorDiagramHelperServiceInstance = kommonitorDiagramHelperService; - - var self = this; - - $scope.activeTab = 0; - - // initialize any adminLTE box widgets - $('.box').boxWidget(); - - $(window).on('resize', function () { - if ($scope.radarChart != null && $scope.radarChart != undefined) { - $scope.radarChart.resize(); - } - }); - - $scope.$on("resizeDiagrams", function (event) { - - setTimeout(function () { - if ($scope.radarChart != null && $scope.radarChart != undefined) { - $scope.radarChart.resize(); - } - }, 350); - }); - - const DATE_PREFIX = __env.indicatorDatePrefix; - - $scope.indicatorNameFilter = undefined; - - $scope.eventsRegistered = false; - - var numberOfDecimals = __env.numberOfDecimals; - - $scope.setupCompleted = true; - - $scope.onChangeFilterSameUnitAndSameTime = function(){ - if($scope.radarChart){ - $scope.radarChart.dispose(); - $scope.radarChart = echarts.init(document.getElementById('radarDiagram')); - } - kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime = []; - - kommonitorDiagramHelperService.setupIndicatorPropertiesForCurrentSpatialUnitAndTime(kommonitorDiagramHelperService.filterSameUnitAndSameTime); - }; - - $scope.date; - $scope.spatialUnitName; - - $scope.$on("updateDiagrams", function (event, indicatorMetadataAndGeoJSON, spatialUnitName, spatialUnitId, date, defaultBrew, gtMeasureOfValueBrew, ltMeasureOfValueBrew, dynamicIncreaseBrew, dynamicDecreaseBrew, isMeasureOfValueChecked, measureOfValue, justRestyling) { - - // if the layer is just restyled (i.e. due to change of measureOfValue) - // then we do not need to costly update the radar diagram - if (justRestyling) { - return; - } - - console.log("updating radar diagram"); - - $scope.setupCompleted = false; - - updateRadarChart(indicatorMetadataAndGeoJSON, spatialUnitName, spatialUnitId, date); - - $rootScope.$broadcast("preserveHighlightedFeatures"); - - }); - - // RADAR CHART TIME SERIES FUNCTION - var updateRadarChart = async function (indicatorMetadataAndGeoJSON, spatialUnitName, spatialUnitId, date) { - // based on prepared DOM, initialize echarts instance - $scope.date = date; - $scope.spatialUnitName = spatialUnitName; - - if (!$scope.radarChart) - $scope.radarChart = echarts.init(document.getElementById('radarDiagram')); - else { - // explicitly kill and reinstantiate radar diagram to avoid zombie states on spatial unit change - $scope.radarChart.dispose(); - $scope.radarChart = echarts.init(document.getElementById('radarDiagram')); - kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime = new Array(); - } - - await $scope.radarChart.showLoading(); - - kommonitorDiagramHelperService.setupIndicatorPropertiesForCurrentSpatialUnitAndTime(); - - $scope.activeTab = 0; - if(kommonitorDataExchangeService.selectedIndicator.creationType == "COMPUTATION"){ - $scope.activeTab = 1; - } - if(kommonitorDataExchangeService.selectedIndicator.isHeadlineIndicator){ - $scope.activeTab = 2; - } - - modifyRadarContent(kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime); - }; - - $scope.onChangeSelectedDate = function(input){ - if(input.isSelected){ - modifyRadarContent(kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime); - } - }; - - var wait = ms => new Promise((r, j) => setTimeout(r, ms)); - - $scope.$on("allIndicatorPropertiesForCurrentSpatialUnitAndTime setup begin", async function (event) { - - await wait(130); - $scope.setupCompleted = false; - - - $timeout(function(){ - $scope.$digest(); - }, 500); - - }); - - $scope.$on("allIndicatorPropertiesForCurrentSpatialUnitAndTime setup completed", async function (event) { - - await wait(130); - $scope.setupCompleted = true; - - - $timeout(function(){ - $scope.$digest(); - self.filterDisplayedIndicatorsOnRadar(); - }, 500); - - }); - - var modifyRadarContent = async function (indicatorsForRadar) { - var indicatorArrayForRadarChart = new Array(); - var defaultSeriesValueArray = new Array(); - - var sampleProperties = null; - - for (var i = 0; i < indicatorsForRadar.length; i++) { - if (indicatorsForRadar[i].isSelected) { - - await kommonitorDiagramHelperService.fetchIndicatorPropertiesIfNotExists(i); - - // make object to hold indicatorName, max value and average value - var indicatorProperties = indicatorsForRadar[i].indicatorProperties; - - if(kommonitorFilterHelperService.completelyRemoveFilteredFeaturesFromDisplay && kommonitorFilterHelperService.filteredIndicatorFeatureIds.size > 0){ - indicatorProperties = indicatorProperties.filter(featureProperties => ! kommonitorFilterHelperService.featureIsCurrentlyFiltered(featureProperties[__env.FEATURE_ID_PROPERTY_NAME])); - } - - sampleProperties = indicatorsForRadar[i].indicatorProperties; - - // var closestApplicableTimestamp = kommonitorDiagramHelperService.findClostestTimestamForTargetDate(indicatorsForRadar[i], $scope.date); - // indicatorsForRadar[i].closestTimestamp = closestApplicableTimestamp; - - var sample = indicatorProperties[0]; - var maxValue = sample[DATE_PREFIX + indicatorsForRadar[i].selectedDate]; - var minValue = sample[DATE_PREFIX + indicatorsForRadar[i].selectedDate]; - var valueSum = 0; - - for (var indicatorPropertyInstance of indicatorProperties) { - // for average only apply real numeric values - if (!kommonitorDataExchangeService.indicatorValueIsNoData(indicatorPropertyInstance[DATE_PREFIX + indicatorsForRadar[i].selectedDate])) { - var value = kommonitorDataExchangeService.getIndicatorValueFromArray_asNumber(indicatorPropertyInstance, indicatorsForRadar[i].selectedDate) - valueSum += value; - - if (value > maxValue) - maxValue = value; - - if (value < minValue) - minValue = value; - } - } - - if (minValue == null) { - minValue = 0; - } - - if (maxValue == null) { - maxValue = 1; - } - - // IT MIGHT HAPPEN THAT AN INDICATOR IS INSPECTED THAT DOES NOT SUPPORT THE DATE - // HENCE ONLY ADD VALUES TO DEFAULT IF THEY SHOW MEANINGFUL VALUES - // if(valueSum != null){ - indicatorArrayForRadarChart.push({ - name: indicatorsForRadar[i].indicatorMetadata.indicatorName + " - " + indicatorsForRadar[i].selectedDate, - unit: indicatorsForRadar[i].indicatorMetadata.unit, - max: maxValue, - min: minValue - }); - - defaultSeriesValueArray.push(kommonitorDataExchangeService.getIndicatorValue_asNumber(Number(valueSum / indicatorProperties.length))); - // } - } - - } - - if (defaultSeriesValueArray.length === 0) { - - if ($scope.radarChart) { - $scope.radarChart.dispose(); - $scope.radarChart = undefined; - } - - } - else { - - if (!$scope.radarChart) - $scope.radarChart = echarts.init(document.getElementById('radarDiagram')); - // else{ - // // explicitly kill and reinstantiate radar diagram to avoid zombie states on spatial unit change - // $scope.radarChart.dispose(); - // $scope.radarChart = echarts.init(document.getElementById('radarDiagram')); - // } - - $scope.radarOption = { - grid: { - left: '4%', - top: 0, - right: '4%', - bottom: 30, - containLabel: true - }, - title: { - text: 'Indikatorenradar - ' + $scope.spatialUnitName + ' - ' + $scope.date, - left: 'center', - top: 0, - show: false - }, - tooltip: { - confine: 'true', - formatter: function (params) { - - var string = "" + params.name + "
"; - - for (var index = 0; index < params.value.length; index++) { - string += $scope.radarOption.radar.indicator[index].name + ": " + kommonitorDataExchangeService.getIndicatorValue_asFormattedText(params.value[index]) + " [" + $scope.radarOption.radar.indicator[index].unit + "]
"; - }; - - return string; - } - // position: ['50%', '50%'] - }, - toolbox: { - show: true, - right: '15', - feature: { - // mark : {show: true}, - dataView: { - show: kommonitorDataExchangeService.showDiagramExportButtons, readOnly: true, title: "Datenansicht", lang: ['Datenansicht - Indikatorenradar', 'schließen', 'refresh'], optionToContent: function (opt) { - - // - // - // - // - // - // - // - // - // - // - // - // - // - //
Indikator-NameBeschreibung der Verknüpfung
{{indicator.referencedIndicatorName}}{{indicator.referencedIndicatorDescription}}
- - var radarSeries = opt.series[0].data; - var indicators = opt.radar[0].indicator; - - var dataTableId = "radarDataTable"; - var tableExportName = opt.title[0].text; - - var htmlString = ''; - htmlString += ""; - htmlString += ""; - htmlString += ""; - - for (var i = 0; i < indicators.length; i++) { - htmlString += ""; - } - - htmlString += ""; - htmlString += ""; - - htmlString += ""; - - - - for (var j = 0; j < radarSeries.length; j++) { - htmlString += ""; - htmlString += ""; - for (var k = 0; k < indicators.length; k++) { - htmlString += ""; - } - htmlString += ""; - } - - htmlString += ""; - htmlString += "
Feature-Name" + indicators[i].name + " [" + indicators[i].unit + "]
" + radarSeries[j].name + "" + kommonitorDataExchangeService.getIndicatorValue_asNumber(radarSeries[j].value[k]) + "
"; - - $rootScope.$broadcast("AppendExportButtonsForTable", dataTableId, tableExportName); - - return htmlString; - } - }, - restore: { show: false, title: "Darstellung erneuern" }, - saveAsImage: { show: true, title: "Export", pixelRatio: 4 } - } - }, - legend: { - type: "scroll", - bottom: 0, - align: 'left', - left: 5, - data: ['Arithmetisches Mittel'] - }, - radar: { - // shape: 'circle', - // name: { - // textStyle: { - // color: '#fff', - // backgroundColor: '#999', - // borderRadius: 3, - // padding: [3, 5] - // } - // }, - name: { - formatter: function (value, indicator) { - - return kommonitorDataExchangeService.formatIndicatorNameForLabel(value, 15); - }, - textStyle: { - color: '#525252' - }, - fontSize: 11 - }, - indicator: indicatorArrayForRadarChart - }, - series: [{ - name: 'Indikatorvergleich', - type: 'radar', - symbolSize: 8, - data: [ - { - value: defaultSeriesValueArray, - name: 'Arithmetisches Mittel', - lineStyle: { - color: 'gray', - type: 'dashed', - width: 3 - }, - itemStyle: { - borderWidth: 2, - color: 'gray' - }, - emphasis: { - lineStyle: { - width: 4 - }, - itemStyle: { - borderType: 'dashed' - } - } - } - ] - }] - }; - - // check if any feature is still clicked/selected - // then append those as series within radar chart - appendSelectedFeaturesIfNecessary(sampleProperties); - - // use configuration item and data specified to show chart - $scope.radarChart.setOption($scope.radarOption); - - $scope.radarChart.hideLoading(); - setTimeout(function () { - $scope.radarChart.resize(); - $scope.$digest(); - }, 350); - registerEventsIfNecessary(); - - } - - } - - var appendSelectedFeaturesIfNecessary = function (sampleProperties) { - - for (var propertiesInstance of sampleProperties) { - if (kommonitorFilterHelperService.featureIsCurrentlySelected(propertiesInstance[__env.FEATURE_ID_PROPERTY_NAME])) { - appendSeriesToRadarChart(propertiesInstance); - } - } - }; - - function registerEventsIfNecessary() { - if (!$scope.eventsRegistered) { - // when hovering over elements of the chart then highlight them in the map. - $scope.radarChart.on('mouseOver', function (params) { - // $scope.userHoveresOverItem = true; - var spatialFeatureName = params.data.name; - // console.log(spatialFeatureName); - if(spatialFeatureName){ - $rootScope.$broadcast("highlightFeatureOnMap", spatialFeatureName); - } - - }); - - $scope.radarChart.on('mouseOut', function (params) { - // $scope.userHoveresOverItem = false; - - var spatialFeatureName = params.data.name; - // console.log(spatialFeatureName); - if(spatialFeatureName){ - $rootScope.$broadcast("unhighlightFeatureOnMap", spatialFeatureName); - } - - }); - - //disable feature removal for radar chart - seems to be unintuititve - // $scope.radarChart.on('click', function(params){ - // var spatialFeatureName = params.data.name; - // // console.log(spatialFeatureName); - // if(spatialFeatureName){ - // $rootScope.$broadcast("switchHighlightFeatureOnMap", spatialFeatureName); - // } - // }); - - $scope.eventsRegistered = true; - } - }; - - - $scope.$on("updateDiagramsForHoveredFeature", function (event, featureProperties) { - - if (!$scope.radarChart || !$scope.radarOption || !$scope.radarOption.legend || !$scope.radarOption.series) { - return; - } - - if (!kommonitorFilterHelperService.featureIsCurrentlySelected(featureProperties[__env.FEATURE_ID_PROPERTY_NAME])) { - appendSeriesToRadarChart(featureProperties); - } - - highlightFeatureInRadarChart(featureProperties); - }); - - var appendSeriesToRadarChart = function (featureProperties) { - // append feature name to legend - $scope.radarOption.legend.data.push(featureProperties[__env.FEATURE_NAME_PROPERTY_NAME]); - - // create feature data series - var featureSeries = {}; - featureSeries.name = featureProperties[__env.FEATURE_NAME_PROPERTY_NAME]; - featureSeries.value = new Array(); - featureSeries.emphasis = { - lineStyle: { - width: 4, - type: 'dotted' - } - }; - featureSeries.lineStyle = { - width: 3, - type: 'solid' - }; - featureSeries.itemStyle = { - borderWidth: 2 - }; - - - // for each indicator create series data entry for feature - for (var i = 0; i < kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime.length; i++) { - if (kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime[i].isSelected) { - // make object to hold indicatorName, max value and average value - var indicatorProperties = kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime[i].indicatorProperties; - var date = kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime[i].selectedDate; - - for (var indicatorPropertyInstance of indicatorProperties) { - if (indicatorPropertyInstance[__env.FEATURE_NAME_PROPERTY_NAME] == featureProperties[__env.FEATURE_NAME_PROPERTY_NAME]) { - if (!kommonitorDataExchangeService.indicatorValueIsNoData(indicatorPropertyInstance[DATE_PREFIX + date])) { - featureSeries.value.push(kommonitorDataExchangeService.getIndicatorValueFromArray_asNumber(indicatorPropertyInstance, date)); - } - else { - featureSeries.value.push(null); - } - break; - } - } - } - - } - - $scope.radarOption.series[0].data.push(featureSeries); - - $scope.radarChart.setOption($scope.radarOption); - setTimeout(function () { - $scope.radarChart.resize(); - }, 350); - registerEventsIfNecessary(); - }; - - var highlightFeatureInRadarChart = function (featureProperties) { - // highlight the corresponding bar diagram item - // get series index of series - var dataIndex = getSeriesDataIndexByFeatureName(featureProperties[__env.FEATURE_NAME_PROPERTY_NAME]); - - if (dataIndex > -1) { - $scope.radarChart.dispatchAction({ - type: 'highlight', - seriesIndex: 0, - dataIndex: dataIndex - }); - } - }; - - $scope.$on("updateDiagramsForUnhoveredFeature", function (event, featureProperties) { - - if (!$scope.radarChart || !$scope.radarOption || !$scope.radarOption.legend || !$scope.radarOption.series) { - return; - } - - unhighlightFeatureInRadarChart(featureProperties); - - if (!kommonitorFilterHelperService.featureIsCurrentlySelected(featureProperties[__env.FEATURE_ID_PROPERTY_NAME])) { - removeSeriesFromRadarChart(featureProperties); - } - }); - - var getSeriesDataIndexByFeatureName = function (featureName) { - for (var index = 0; index < $scope.radarOption.series[0].data.length; index++) { - if ($scope.radarOption.series[0].data[index].name == featureName) - return index; - } - - //return -1 if none was found - return -1; - }; - - var removeSeriesFromRadarChart = function (featureProperties) { - // remove feature from legend - var legendIndex = $scope.radarOption.legend.data.indexOf(featureProperties[__env.FEATURE_NAME_PROPERTY_NAME]); - if (legendIndex > -1) { - $scope.radarOption.legend.data.splice(legendIndex, 1); - } - - // remove feature data series - var dataIndex = getSeriesDataIndexByFeatureName(featureProperties[__env.FEATURE_NAME_PROPERTY_NAME]); - if (dataIndex > -1) { - $scope.radarOption.series[0].data.splice(dataIndex, 1); - } - - // second parameter tells echarts to not merge options with previous data. hence really remove series from graphic - $scope.radarChart.setOption($scope.radarOption, true); - setTimeout(function () { - $scope.radarChart.resize(); - }, 350); - registerEventsIfNecessary(); - }; - - var unhighlightFeatureInRadarChart = function (featureProperties) { - // highlight the corresponding bar diagram item - // get series index of series - var dataIndex = getSeriesDataIndexByFeatureName(featureProperties[__env.FEATURE_NAME_PROPERTY_NAME]); - - if (dataIndex > -1) { - $scope.radarChart.dispatchAction({ - type: 'downplay', - seriesIndex: 0, - dataIndex: dataIndex - }); - } - }; - - this.filterDisplayedIndicatorsOnRadar = function () { - console.log("Filtering indicator radar"); - - modifyRadarContent(kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime); - - } - - this.selectAllIndicatorsForRadar = function () { - - for (var indicator of kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime) { - indicator.isSelected = true; - } - - modifyRadarContent(kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime); - } - - this.deselectAllIndicatorsForRadar = function () { - - for (var indicator of kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime) { - indicator.isSelected = false; - } - - modifyRadarContent(kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime); - } - - - }] - }); diff --git a/app/components/kommonitorUserInterface/kommonitorControls/indicatorRadar/indicator-radar.module.ts b/app/components/kommonitorUserInterface/kommonitorControls/indicatorRadar/indicator-radar.module.ts index 4358673cd..5ffb451cc 100644 --- a/app/components/kommonitorUserInterface/kommonitorControls/indicatorRadar/indicator-radar.module.ts +++ b/app/components/kommonitorUserInterface/kommonitorControls/indicatorRadar/indicator-radar.module.ts @@ -1 +1,16 @@ -angular.module('indicatorRadar', [ 'kommonitorDataExchange', 'kommonitorDiagramHelper']); +// indicator-radar.module.ts + +import { NgModule } from '@angular/core'; +import { ajskommonitorDiagramHelperServiceProvider } from 'app-upgraded-providers'; +import { ajskommonitorDataExchangeServiceeProvider } from 'app-upgraded-providers'; +import { ajskommonitorFilterHelperServiceProvider } from 'app-upgraded-providers'; +import { IndicatorRadarComponent } from './indicator-radar'; +@NgModule({ + imports: [ + + ], + providers: [ajskommonitorDiagramHelperServiceProvider,ajskommonitorDataExchangeServiceeProvider,ajskommonitorFilterHelperServiceProvider], + declarations: [IndicatorRadarComponent], + exports: [] +}) +export class IndicatorRadarModule { } diff --git a/app/components/kommonitorUserInterface/kommonitorControls/indicatorRadar/indicator-radar.ts b/app/components/kommonitorUserInterface/kommonitorControls/indicatorRadar/indicator-radar.ts new file mode 100644 index 000000000..81a0ce9e5 --- /dev/null +++ b/app/components/kommonitorUserInterface/kommonitorControls/indicatorRadar/indicator-radar.ts @@ -0,0 +1,569 @@ +import { Component, OnInit, OnDestroy, ViewChild, ElementRef, Inject,AfterViewInit } from '@angular/core'; +import { Subscription, fromEvent } from 'rxjs'; +import { environment } from 'env_backup'; +import * as echarts from 'echarts'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { ajskommonitorDataExchangeServiceeProvider, ajskommonitorDiagramHelperServiceProvider, ajskommonitorFilterHelperServiceProvider } from 'app-upgraded-providers'; +@Component({ + selector: 'indicator-radar', + templateUrl: 'indicator-radar.template.html', + providers:[ajskommonitorDataExchangeServiceeProvider,ajskommonitorDiagramHelperServiceProvider,ajskommonitorFilterHelperServiceProvider] +}) +export class IndicatorRadarComponent implements OnInit, OnDestroy, AfterViewInit { + @ViewChild('radarDiagram', { static: false }) radarDiagram: ElementRef | undefined; + private destroy$ = new Subject(); + setupCompleted = false; + private ngUnsubscribe: Subject = new Subject(); + eventsRegistered=false + private resizeSubscription= new Subscription; + public activeTab = 0; + public radarChart; + radarOption; + private DATE_PREFIX = environment.indicatorDatePrefix; + public indicatorNameFilter = undefined; + private numberOfDecimals = environment.numberOfDecimals; + public date=''; + public spatialUnitName:string | undefined; + public indicatorPropertiesForCurrentSpatialUnitAndTime: any[] = []; + @ViewChild('radarChart') radarChart: ElementRef; + + FEATURE_ID_PROPERTY_NAME = environment.FEATURE_ID_PROPERTY_NAME; + defaultSeriesValueArray: any[] = []; + resizeTimeout: any; + + + constructor( + @Inject('kommonitorDataExchangeService') private kommonitorDataExchangeService:any, + @Inject('kommonitorDiagramHelperService') private kommonitorDiagramHelperService:any, + @Inject('kommonitorFilterHelperService') private kommonitorFilterHelperService:any, + + ) { + + } + + ngOnInit() { + // Your initialization logic + $('.box').boxWidget(); + + $(window).on('resize', this.resizeChart.bind(this)); + + // subscribe to the "resizeDiagrams" event + // assuming that it's a Subject in your service + this.kommonitorDiagramHelperService.resizeDiagrams.subscribe(() => { + this.resizeTimeout = setTimeout(this.resizeChart.bind(this), 350); + }); + + this.kommonitorDiagramHelperService.allIndicatorPropertiesForCurrentSpatialUnitAndTimeSetupBegin$ + .pipe(takeUntil(this.destroy$)) + .subscribe(async () => { + await this.wait(130); + this.setupCompleted = false; + setTimeout(() => this.filterDisplayedIndicatorsOnRadar(), 500); + }); + + this.kommonitorDiagramHelperService.allIndicatorPropertiesForCurrentSpatialUnitAndTimeSetupCompleted$ + .pipe(takeUntil(this.destroy$)) + .subscribe(async () => { + await this.wait(130); + this.setupCompleted = true; + setTimeout(() => this.filterDisplayedIndicatorsOnRadar(), 500); + }); + + + } + resizeChart() { + if (this.radarChart) { + this.radarChart.resize(); + } + } + + ngAfterViewInit() { + this.resizeSubscription = fromEvent(window, 'resize').subscribe(e => { + if (this.radarChart) { + this.radarChart.resize(); + } + }); + } + + + ngOnDestroy() { + this.resizeSubscription.unsubscribe(); + this.destroy$.next(); + this.destroy$.complete(); + $(window).off('resize', this.resizeChart.bind(this)); + if (this.resizeTimeout) { + clearTimeout(this.resizeTimeout); + } + } + + onChangeFilterSameUnitAndSameTime() { + if (this.radarChart && this.radarDiagram && this.radarDiagram.nativeElement) { + this.radarChart.dispose(); + this.radarChart = echarts.init(this.radarDiagram.nativeElement); + } + + this.kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime = []; + this.kommonitorDiagramHelperService.setupIndicatorPropertiesForCurrentSpatialUnitAndTime(this.kommonitorDiagramHelperService.filterSameUnitAndSameTime); + } + + updateDiagrams(event, indicatorMetadataAndGeoJSON, spatialUnitName, spatialUnitId, date, defaultBrew, gtMeasureOfValueBrew, ltMeasureOfValueBrew, dynamicIncreaseBrew, dynamicDecreaseBrew, isMeasureOfValueChecked, measureOfValue, justRestyling) { + if (justRestyling) { + return; + } + console.log("updating radar diagram"); + this.setupCompleted = false; + this.updateRadarChart(indicatorMetadataAndGeoJSON, spatialUnitName, spatialUnitId, date); + this.preserveHighlightedFeatures.emit(); + } + + async updateRadarChart(indicatorMetadataAndGeoJSON: any, spatialUnitName: string, spatialUnitId: string, date: any) { + this.date = date; + this.spatialUnitName = spatialUnitName; + + if (!this.radarChart) { + this.radarChart = echarts.init(document.getElementById('radarDiagram')); + } else { + this.radarChart.dispose(); + this.radarChart = echarts.init(document.getElementById('radarDiagram')); + this.indicatorPropertiesForCurrentSpatialUnitAndTime = []; + } + + await this.radarChart.showLoading(); + this.kommonitorDiagramHelperService.setupIndicatorPropertiesForCurrentSpatialUnitAndTime(); + + this.activeTab = 0; + + if (this.kommonitorDataExchangeService.selectedIndicator.creationType === 'COMPUTATION') { + this.activeTab = 1; + } + + if (this.kommonitorDataExchangeService.selectedIndicator.isHeadlineIndicator) { + this.activeTab = 2; + } + + this.modifyRadarContent(this.indicatorPropertiesForCurrentSpatialUnitAndTime); + } + + private wait(ms: number): Promise { + return new Promise(resolve => setTimeout(resolve, ms)); + } + onChangeSelectedDate(input: any): void { + if (input.isSelected) { + this.modifyRadarContent(this.kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime); + } + } + appendSelectedFeaturesIfNecessary(sampleProperties: any[]) { // adjust the type of sampleProperties + for (const propertiesInstance of sampleProperties) { + if (this.kommonitorFilterHelperService.featureIsCurrentlySelected(propertiesInstance[environment.FEATURE_ID_PROPERTY_NAME])) { + this.appendSeriesToRadarChart(propertiesInstance); + } + } + } + async modifyRadarContent(indicatorsForRadar: any[]): Promise { + const indicatorArrayForRadarChart = []; + const defaultSeriesValueArray = []; + let sampleProperties = null; + + + for (let i = 0; i < indicatorsForRadar.length; i++) { + if (indicatorsForRadar[i].isSelected) { + await this.kommonitorDiagramHelperService.fetchIndicatorPropertiesIfNotExists(i); + let indicatorProperties = indicatorsForRadar[i].indicatorProperties; + if (this.kommonitorFilterHelperService.completelyRemoveFilteredFeaturesFromDisplay && this.kommonitorFilterHelperService.filteredIndicatorFeatureIds.size > 0) { + indicatorProperties = indicatorProperties.filter(featureProperties => !this.kommonitorFilterHelperService.featureIsCurrentlyFiltered(featureProperties[this.FEATURE_ID_PROPERTY_NAME])); + } + sampleProperties = indicatorsForRadar[i].indicatorProperties; + const sample = indicatorProperties[0]; + let maxValue = sample[this.DATE_PREFIX + indicatorsForRadar[i].selectedDate]; + let minValue = sample[this.DATE_PREFIX + indicatorsForRadar[i].selectedDate]; + let valueSum = 0; + + for (const indicatorPropertyInstance of indicatorProperties) { + if (!this.kommonitorDataExchangeService.indicatorValueIsNoData(indicatorPropertyInstance[this.DATE_PREFIX + indicatorsForRadar[i].selectedDate])) { + const value = this.kommonitorDataExchangeService.getIndicatorValueFromArray_asNumber(indicatorPropertyInstance, indicatorsForRadar[i].selectedDate); + valueSum += value; + if (value > maxValue) + maxValue = value; + if (value < minValue) + minValue = value; + } + } + if (minValue == null) { + minValue = 0; + } + if (maxValue == null) { + maxValue = 1; + } + indicatorArrayForRadarChart.push({ + name: indicatorsForRadar[i].indicatorMetadata.indicatorName + " - " + indicatorsForRadar[i].selectedDate, + unit: indicatorsForRadar[i].indicatorMetadata.unit, + max:maxValue, + min: minValue + }); + defaultSeriesValueArray.push(this.kommonitorDataExchangeService.getIndicatorValueFromArray_asNumber(indicatorPropertyInstance, date)); + } + };//end of for loop + if (this.defaultSeriesValueArray.length === 0) { + this.disposeRadarChart(); + } + else + { + if (!this.radarChart) { + this.radarChart = echarts.init(document.getElementById('radarDiagram')); + } + this.radarOption = { + grid: { + left: '4%', + top: 0, + right: '4%', + bottom: 30, + containLabel: true + }, + title: { + text: 'Indikatorenradar - ' + this.spatialUnitName + ' - ' + this.date, + left: 'center', + top: 0, + show: false + }, + tooltip: { + confine: 'true', + formatter: (params) => { + let string = "" + params.name + "
"; + for (let index = 0; index < params.value.length; index++) { + string += this.radarOption.radar.indicator[index].name + ": " + this.kommonitorDataExchangeService.getIndicatorValue_asFormattedText(params.value[index]) + " [" + this.radarOption.radar.indicator[index].unit + "]
"; + } + return string; + } + }, + toolbox :{ + show: true, + right: '15', + feature: { + dataView: { + show: this.kommonitorDataExchangeService.showDiagramExportButtons, + readOnly: true, + title: "Datenansicht", + lang: ['Datenansicht - Indikatorenradar', 'schließen', 'refresh'], + optionToContent: (opt: any) => { + let radarSeries = opt.series[0].data; + let indicators = opt.radar[0].indicator; + let dataTableId = "radarDataTable"; + let tableExportName = opt.title[0].text; + let htmlString = ''; + htmlString += ""; + htmlString += ""; + htmlString += ""; + for (let i = 0; i < indicators.length; i++) { + htmlString += ""; + } + htmlString += ""; + htmlString += ""; + htmlString += ""; + for (let j = 0; j < radarSeries.length; j++) { + htmlString += ""; + htmlString += ""; + for (let k = 0; k < indicators.length; k++) { + htmlString += ""; + } + htmlString += ""; + } + htmlString += ""; + htmlString += "
Feature-Name" + indicators[i].name + " [" + indicators[i].unit + "]
" + radarSeries[j].name + "" + this.kommonitorDataExchangeService.getIndicatorValue_asNumber(radarSeries[j].value[k]) + "
"; + // Broadcast event to append export buttons for table + // $rootScope.$broadcast("AppendExportButtonsForTable", dataTableId, tableExportName); + return htmlString; + } + }, + restore: { show: false, title: "Darstellung erneuern" }, + saveAsImage: { show: true, title: "Export", pixelRatio: 4 } + } + }, + + legend : { + type: "scroll", + bottom: 0, + align: 'left', + left: 5, + data: ['Arithmetisches Mittel'] + }, + + radar : { + name: { + formatter: (value: any, indicator: any) => { + return this.kommonitorDataExchangeService.formatIndicatorNameForLabel(value, 15); + }, + textStyle: { + color: '#525252' + }, + fontSize: 11 + }, + indicator: [] // indicatorArrayForRadarChart + }, + series:[{ + name: 'Indikatorvergleich', + type: 'radar', + symbolSize: 8, + data: [ + { + value: this.defaultSeriesValueArray, + name: 'Arithmetisches Mittel', + lineStyle: { + color: 'gray', + type: 'dashed', + width: 3 + }, + itemStyle: { + borderWidth: 2, + color: 'gray' + }, + emphasis: { + lineStyle: { + width: 4 + }, + itemStyle: { + borderType: 'dashed' + } + } + } + ] + }] + + + + // Add other options here + }//end of radar options + }// end of else + this.appendSelectedFeaturesIfNecessary(sampleProperties); + this.radarChart.setOption(this.radarChart.nativeElement, this.radarOption); // Assuming you have a method to set the option + this.radarChart.hideLoading(this.radarChart.nativeElement); // Assuming you have a method to hide loading + setTimeout(() => { + this.radarChart.resize(this.radarChart.nativeElement); // Assuming you have a method to resize the chart + }, 350); + this.registerEventsIfNecessary(); // Assuming you have this method + + + + } // endof modifycharater + + + + registerEventsIfNecessary() { + if (!this.eventsRegistered) { + this.radarChart.on('mouseOver', (params: any) => { // adjust the type of params + const spatialFeatureName = params.data.name; + if (spatialFeatureName) { + // broadcast event + } + }); + + this.radarChart.on('mouseOut', (params: any) => { // adjust the type of params + const spatialFeatureName = params.data.name; + if (spatialFeatureName) { + // broadcast event + } + }); + + this.eventsRegistered = true; + } + } + + updateDiagramsForHoveredFeature(featureProperties: any) { // adjust the type of featureProperties + if (!this.radarChart || !this.radarOption || !this.radarOption.legend || !this.radarOption.series) { + return; + } + if (!this.kommonitorFilterHelperService.featureIsCurrentlySelected(featureProperties[environment.FEATURE_ID_PROPERTY_NAME])) { + this.appendSeriesToRadarChart(featureProperties); + } + this.highlightFeatureInRadarChart(featureProperties); + } + + appendSeriesToRadarChart(featureProperties: any): void { + this.radarOption.legend.data.push(featureProperties[environment.FEATURE_NAME_PROPERTY_NAME]); + let featureSeries = { + name: featureProperties[environment.FEATURE_NAME_PROPERTY_NAME], + value: [], + emphasis: { + lineStyle: { + width: 4, + type: 'dotted' + } + }, + lineStyle: { + width: 3, + type: 'solid' + }, + itemStyle: { + borderWidth: 2 + } + }; + + for (let i = 0; i < this.kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime.length; i++) { + if (this.kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime[i].isSelected) { + let indicatorProperties = this.kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime[i].indicatorProperties; + let date = this.kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime[i].selectedDate; + for (let indicatorPropertyInstance of indicatorProperties) { + if (indicatorPropertyInstance[environment.FEATURE_NAME_PROPERTY_NAME] == featureProperties[environment.FEATURE_NAME_PROPERTY_NAME]) { + if (!this.kommonitorDataExchangeService.indicatorValueIsNoData(indicatorPropertyInstance[date])) { + featureSeries.value.push(this.kommonitorDataExchangeService.getIndicatorValueFromArray_asNumber(indicatorPropertyInstance, date)); + } + else { + featureSeries.value.push(); + } + break; + } + } + } + } + + this.radarOption.series[0].data.push(featureSeries); + this.radarChart.setOption(this.radarOption); + setTimeout(() => { + this.radarChart.resize(); + }, 350); + this.registerEventsIfNecessary(); + } + + highlightFeatureInRadarChart(featureProperties: any): void { + let dataIndex = this.getSeriesDataIndexByFeatureName(featureProperties[environment.FEATURE_NAME_PROPERTY_NAME]); + if (dataIndex > -1) { + this.radarChart.dispatchAction({ + type: 'highlight', + seriesIndex: 0, + dataIndex: dataIndex + }); + } + } + + updateDiagramsForUnhoveredFeature(event: any, featureProperties: any): void { + if (!this.radarChart || !this.radarOption || !this.radarOption.legend || !this.radarOption.series) { + return; + } + this.unhighlightFeatureInRadarChart(featureProperties); + if (!this.kommonitorFilterHelperService.featureIsCurrentlySelected(featureProperties[environment.FEATURE_ID_PROPERTY_NAME])) { + this.removeSeriesFromRadarChart(featureProperties); + } + } + + + getSeriesDataIndexByFeatureName(featureName: string): number { + for (let index = 0; index < this.radarOption.series[0].data.length; index++) { + if (this.radarOption.series[0].data[index].name == featureName) + return index; + } + //return -1 if none was found + return -1; + } + + removeSeriesFromRadarChart(featureProperties: any): void { + // remove feature from legend + let legendIndex = this.radarOption.legend.data.indexOf(featureProperties[environment.FEATURE_NAME_PROPERTY_NAME]); + if (legendIndex > -1) { + this.radarOption.legend.data.splice(legendIndex, 1); + } + // remove feature data series + let dataIndex = this.getSeriesDataIndexByFeatureName(featureProperties[environment.FEATURE_NAME_PROPERTY_NAME]); + if (dataIndex > -1) { + this.radarOption.series[0].data.splice(dataIndex, 1); + } + // second parameter tells echarts to not merge options with previous data. hence really remove series from graphic + this.radarChart.setOption(this.radarOption, true); + setTimeout(() => { + this.radarChart.resize(); + }, 350); + this.registerEventsIfNecessary(); + } + + unhighlightFeatureInRadarChart(featureProperties: any): void { + // highlight the corresponding bar diagram item + // get series index of series + let dataIndex = this.getSeriesDataIndexByFeatureName(featureProperties[environment.FEATURE_NAME_PROPERTY_NAME]); + if (dataIndex > -1) { + this.radarChart.dispatchAction({ + type: 'downplay', + seriesIndex: 0, + dataIndex: dataIndex + }); + } + } + + filterDisplayedIndicatorsOnRadar(): void { + console.log("Filtering indicator radar"); + this.modifyRadarContent(this.kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime); + } + + selectAllIndicatorsForRadar() { + for (let indicator of this.kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime) { + indicator.isSelected = true; + } + this.modifyRadarContent(this.kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime); +} + +deselectAllIndicatorsForRadar() { + for (let indicator of this.kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime) { + indicator.isSelected = false; + } + this.modifyRadarContent(this.kommonitorDiagramHelperService.indicatorPropertiesForCurrentSpatialUnitAndTime); +} + + + + + + + + + + + + + disposeRadarChart() { + if (this.radarChart) { + this.radarChart.dispose(); + this.radarChart = undefined; + } + } + + + + + + + + + + + + + + +} // class ending of IndicatorRadarComponent + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.component.js b/app/components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.component.js new file mode 100644 index 000000000..634cc1722 --- /dev/null +++ b/app/components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.component.js @@ -0,0 +1,85 @@ +import { __decorate } from "tslib"; +import { Component } from '@angular/core'; +import { environment } from 'env_backup'; +import { kommonitorDataExchangeServiceFactory } from 'app-upgraded-providers'; +export let InfoModalComponent = class InfoModalComponent { + constructor(modalService) { + this.modalService = modalService; + this.isHideGreetings = false; + this.tab1 = 'null'; + this.customGreetingsContact_name = "Test"; + this.customGreetingsContact_organisation = "Test"; + this.customGreetingsContact_mail = "Test"; + this.customGreetingsTextInfoMessage = "Test"; + this.customGreetingsContact_name = "Test"; + this.customGreetingsContact_organisation = "Test"; + this.customGreetingsContact_mail = "Test"; + this.customGreetingsTextInfoMessage = "Test"; + } + ngOnInit() { + this.modalService.startGuidedTour$.subscribe(() => { + // Call a method to handle the guided tour event + this.callStartGuidedTour(); + }); + this.kommonitorDataExchangeServiceInstance = kommonitorDataExchangeServiceFactory; + if (!(localStorage.getItem("hideKomMonitorAppGreeting") === "true")) { + this.isHideGreetings = false; + $('#infoModal').modal('show'); + } + else { + this.isHideGreetings = true; + $("#changeHideGreetingsInput").prop('checked', true); + } + const tab1 = document.getElementById("infoModalTab1"); + if (tab1) { + tab1.innerHTML = environment.standardInfoModalTabTitle; + tab1.click(); + tab1.focus(); + if (environment.enableExtendedInfoModal) { + const tab3 = document.getElementById("infoModalTab3"); + const tab3content = document.getElementById("infoModalTab3Content"); + if (tab3 && tab3content) { + tab3.innerHTML = environment.extendedInfoModalTabTitle; + tab3content.innerHTML = environment.extendedInfoModalHTMLMessage; + } + else { + alert("not founde"); + } + } + else { + console.log("content hasnt be loaded"); + } + } + setTimeout(() => { + // You might need to use Angular's change detection instead of $digest + }, 250); + } + onChangeHideGreetings() { + if (this.isHideGreetings) { + localStorage.setItem("hideKomMonitorAppGreeting", "true"); + } + else { + localStorage.setItem("hideKomMonitorAppGreeting", "false"); + } + } + onToggleHideGreetings() { + this.isHideGreetings = !this.isHideGreetings; + localStorage.setItem("hideKomMonitorAppGreeting", this.isHideGreetings ? "true" : "false"); + } + callStartGuidedTour() { + $('#infoModal').modal('hide'); + this.modalService.startGuidedTour(); + } + showFeedbackForm() { + $('#infoModal').modal('hide'); + $('#feedbackModal').modal('show'); + } +}; +InfoModalComponent = __decorate([ + Component({ + selector: 'info-modal', + templateUrl: 'info-modal.template.html', + styleUrls: ['info-modal.component.css'], + }) +], InfoModalComponent); +//# sourceMappingURL=info-modal.component.js.map \ No newline at end of file diff --git a/app/components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.component.js.map b/app/components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.component.js.map new file mode 100644 index 000000000..70883bd9f --- /dev/null +++ b/app/components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.component.js.map @@ -0,0 +1 @@ +{"version":3,"file":"info-modal.component.js","sourceRoot":"","sources":["info-modal.component.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/app/components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.component.ts b/app/components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.component.ts index 03905f2a2..b3df34b9c 100644 --- a/app/components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.component.ts +++ b/app/components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.component.ts @@ -1,25 +1,23 @@ -import { Component, OnInit,AfterViewInit } from '@angular/core'; +import { Component, OnInit,AfterViewInit, Inject } from '@angular/core'; import { environment } from 'env_backup'; -import { kommonitorDataExchangeServiceFactory } from 'app-upgraded-providers'; +import { ajskommonitorDataExchangeServiceeProvider, kommonitorDataExchangeServiceFactory } from 'app-upgraded-providers'; import { ModalService } from 'util/genericServices/modal.service'; import { VersionInfoComponent } from '../versionInfo/version-info.component'; @Component({ selector: 'info-modal', templateUrl: 'info-modal.template.html', styleUrls: ['info-modal.component.css'], - + providers:[ModalService,ajskommonitorDataExchangeServiceeProvider] }) export class InfoModalComponent implements OnInit{ - kommonitorDataExchangeServiceInstance: any; + isHideGreetings: boolean = false; tab1:any='null'; - - customGreetingsContact_name = "Test"; customGreetingsContact_organisation = "Test"; customGreetingsContact_mail = "Test"; customGreetingsTextInfoMessage = "Test"; - constructor(private modalService: ModalService) { + constructor(private modalService: ModalService,@Inject('kommonitorDataExchangeService') public kommonitorDataExchangeService: any) { this.customGreetingsContact_name = "Test"; this.customGreetingsContact_organisation = "Test"; this.customGreetingsContact_mail = "Test"; @@ -35,7 +33,6 @@ export class InfoModalComponent implements OnInit{ // Call a method to handle the guided tour event this.callStartGuidedTour(); }); - this.kommonitorDataExchangeServiceInstance = kommonitorDataExchangeServiceFactory; if (!(localStorage.getItem("hideKomMonitorAppGreeting") === "true")) { this.isHideGreetings = false; @@ -75,11 +72,6 @@ export class InfoModalComponent implements OnInit{ }, 250); - - - - - } diff --git a/app/components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.module.js b/app/components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.module.js new file mode 100644 index 000000000..69738db8d --- /dev/null +++ b/app/components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.module.js @@ -0,0 +1,16 @@ +import { __decorate } from "tslib"; +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { InfoModalComponent } from './info-modal.component'; +import { VersionInfoModule } from '../versionInfo/version-info.module'; +export let InfoModalModule = class InfoModalModule { +}; +InfoModalModule = __decorate([ + NgModule({ + declarations: [InfoModalComponent], + imports: [CommonModule, VersionInfoModule], + exports: [InfoModalComponent], + bootstrap: [InfoModalComponent] + }) +], InfoModalModule); +//# sourceMappingURL=info-modal.module.js.map \ No newline at end of file diff --git a/app/components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.module.js.map b/app/components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.module.js.map new file mode 100644 index 000000000..8f295cf72 --- /dev/null +++ b/app/components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.module.js.map @@ -0,0 +1 @@ +{"version":3,"file":"info-modal.module.js","sourceRoot":"","sources":["info-modal.module.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAShE,WAAM,eAAe,GAArB,MAAM,eAAe;CAE3B,CAAA;AAFY,eAAe;IAR3B,QAAQ,CAAC;QACV,YAAY,EAAC,CAAC,kBAAkB,CAAC;QACjC,OAAO,EAAC,CAAC,YAAY,EAAC,iBAAiB,CAAC;QACxC,OAAO,EAAC,CAAC,kBAAkB,CAAC;QAC5B,SAAS,EAAC,CAAC,kBAAkB,CAAC;KAE7B,CAAC;GAEW,eAAe,CAE3B"} \ No newline at end of file diff --git a/app/components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.module.ts b/app/components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.module.ts index f862dfcd0..50e84e70f 100644 --- a/app/components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.module.ts +++ b/app/components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.module.ts @@ -2,12 +2,14 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { InfoModalComponent } from './info-modal.component'; import { VersionInfoModule } from '../versionInfo/version-info.module'; +import { ajskommonitorDataExchangeServiceeProvider } from 'app-upgraded-providers'; + @NgModule({ declarations:[InfoModalComponent], imports:[CommonModule,VersionInfoModule], exports:[InfoModalComponent], -bootstrap:[InfoModalComponent] - +bootstrap:[InfoModalComponent], +providers:[ajskommonitorDataExchangeServiceeProvider] }) export class InfoModalModule{ diff --git a/app/components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.template.html b/app/components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.template.html index b7396f364..e3f89c3d3 100644 --- a/app/components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.template.html +++ b/app/components/kommonitorUserInterface/kommonitorControls/infoModal/info-modal.template.html @@ -63,8 +63,8 @@