From 8204b4ba3bb5edec465436efa9006f1cf1e7ac61 Mon Sep 17 00:00:00 2001 From: Konstantinos Triantafyllou Date: Thu, 28 Nov 2019 10:30:56 +0000 Subject: [PATCH] [Monitor Dashboard]: Customize loading component. Make input pristine if the value is equal to initial value git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57735 d315682c-612b-4755-9ff5-7f18f6832af3 --- src/app/home/home.component.html | 4 ++-- .../sharedComponents/input/input.component.ts | 11 ++++++++++- .../sharedComponents/loading/loading.component.ts | 9 +++------ src/app/topic/indicators.component.html | 10 ++++------ src/app/topic/indicators.component.ts | 14 ++++++++++++-- src/app/utils/indicator-utils.ts | 6 +----- src/assets/theme-assets/css/themes/my_theme.css | 3 +++ .../theme-assets/css/themes/my_theme.min.css | 2 +- 8 files changed, 36 insertions(+), 23 deletions(-) diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 944fef5..668862d 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -34,7 +34,7 @@ [class.max-width-large]="!grid" class="uk-grid-match uk-grid-small" uk-grid> - +
@@ -85,7 +85,7 @@ [class.max-width-large]="!grid" class="uk-grid-match uk-grid-small" uk-grid> - +
diff --git a/src/app/library/sharedComponents/input/input.component.ts b/src/app/library/sharedComponents/input/input.component.ts index 6106db1..730d3db 100644 --- a/src/app/library/sharedComponents/input/input.component.ts +++ b/src/app/library/sharedComponents/input/input.component.ts @@ -1,5 +1,7 @@ import {Component, Input, OnDestroy, OnInit} from "@angular/core"; import {Option} from "../../../utils/indicator-utils"; +import {FormControl} from "@angular/forms"; +import {HelperFunctions} from "../../../openaireLibrary/utils/HelperFunctions.class"; @Component({ selector: '[dashboard-input]', @@ -18,16 +20,23 @@ import {Option} from "../../../utils/indicator-utils"; ` }) export class InputComponent implements OnInit, OnDestroy { - @Input('formInput') formControl: any; + @Input('formInput') formControl: FormControl; @Input('type') type: string = 'text'; @Input('label') label: string; @Input('rows') rows: number = 3; @Input('options') options: Option[]; + private initValue: any; constructor() { } ngOnInit(): void { + this.initValue = HelperFunctions.copy(this.formControl.value); + this.formControl.valueChanges.subscribe(value => { + if(this.initValue.toString() === value.toString()) { + this.formControl.markAsPristine(); + } + }); } ngOnDestroy(): void { diff --git a/src/app/library/sharedComponents/loading/loading.component.ts b/src/app/library/sharedComponents/loading/loading.component.ts index f9a4f39..8ac4269 100644 --- a/src/app/library/sharedComponents/loading/loading.component.ts +++ b/src/app/library/sharedComponents/loading/loading.component.ts @@ -3,8 +3,8 @@ import {Component, Input} from "@angular/core"; @Component({ selector: 'loading', template: ` -
-
+
+
@@ -12,13 +12,10 @@ import {Component, Input} from "@angular/core";
` }) export class LoadingComponent { - @Input() - public loading: boolean = false; - /** * Possible values '': blue, 'success': green, 'warning': orange and 'danger': red */ - @Input() color: string = ''; + @Input() color: 'success' | 'warning' | 'danger' = null; constructor() { } diff --git a/src/app/topic/indicators.component.html b/src/app/topic/indicators.component.html index ceb4fec..228d2b7 100644 --- a/src/app/topic/indicators.component.html +++ b/src/app/topic/indicators.component.html @@ -119,8 +119,7 @@ - + {{indicatorUtils.chartTypesIcons.get(indicatorPath.type)}} {{indicatorPath.type + ' Chart'}} @@ -159,8 +158,7 @@
- + {{indicatorUtils.chartTypesIcons.get(indicatorPath.type)}}
{{indicatorPath.type + ' Chart'}}
@@ -270,10 +268,10 @@
-
-
+
refresh
Click to refresh the graph view
diff --git a/src/app/topic/indicators.component.ts b/src/app/topic/indicators.component.ts index 2b8c81f..64c47a2 100644 --- a/src/app/topic/indicators.component.ts +++ b/src/app/topic/indicators.component.ts @@ -407,12 +407,22 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV }); } - refreshIndicator(index: number) { + hasDifference(index: number): boolean { + let hasDifference = false; + this.indicatorPaths.at(index).value.parameters.forEach((parameter) => { + if(parameter.value !== this.indicator.indicatorPaths[index].parameters[parameter.key]) { + hasDifference = true; + return; + } + }); + return hasDifference; + } + + refreshIndicator() { this.indicator = this.indicatorUtils.generateIndicatorByForm(this.indicatorFb.value, this.indicator.indicatorPaths); this.indicator.indicatorPaths.forEach(indicatorPath => { indicatorPath.safeResourceUrl = this.getUrlByStakeHolder(indicatorPath) }); - this.indicatorPaths.at(index).markAsPristine({onlySelf: true}); } deleteIndicatorOpen(id: string, type: string = 'chart') { diff --git a/src/app/utils/indicator-utils.ts b/src/app/utils/indicator-utils.ts index a931285..704dfc8 100644 --- a/src/app/utils/indicator-utils.ts +++ b/src/app/utils/indicator-utils.ts @@ -40,14 +40,10 @@ export class IndicatorUtils { ['table', 'table_chart'], ['line', 'show_chart'], ['column', 'bar_chart'], - ['bar', 'bar_chart'], + ['bar', 'notes'], ['other', 'perm_media'] ]); - chartTypesIconsClasses: Map = new Map([ - ['bar', 'rotate-90'] - ]); - isPublicIcon: Map = new Map([ [true, 'public'], [false, 'lock'] diff --git a/src/assets/theme-assets/css/themes/my_theme.css b/src/assets/theme-assets/css/themes/my_theme.css index df1313f..43e23e0 100755 --- a/src/assets/theme-assets/css/themes/my_theme.css +++ b/src/assets/theme-assets/css/themes/my_theme.css @@ -173,6 +173,9 @@ .app_my_theme .md-card-primary { border-left-color: #0d47a1; } +.app_my_theme .md-preloader:not(.md-preloader-success):not(.md-preloader-warning):not(.md-preloader-danger) svg circle { + stroke: #0d47a1; +} .app_my_theme .waves-effect.md-btn-flat-primary { background: none; } diff --git a/src/assets/theme-assets/css/themes/my_theme.min.css b/src/assets/theme-assets/css/themes/my_theme.min.css index 09839e7..79f95ab 100755 --- a/src/assets/theme-assets/css/themes/my_theme.min.css +++ b/src/assets/theme-assets/css/themes/my_theme.min.css @@ -1 +1 @@ -.app_my_theme .uk-alert{background:#0d47a1}.app_my_theme .md-btn-primary,.app_my_theme .md-btn-primary:active,.app_my_theme .md-btn-primary:focus,.app_my_theme .md-btn-primary:hover{background:#0d47a1;color:#fff}.app_my_theme .md-btn-flat-primary,.app_my_theme .md-btn-flat-primary:active,.app_my_theme .md-btn-flat-primary:focus,.app_my_theme .md-btn-flat-primary:hover{color:#0d47a1}.app_my_theme .md-btn-flat-primary:active,.app_my_theme .md-btn-flat-primary:focus,.app_my_theme .md-btn-flat-primary:hover{background:#85b1f5}.app_my_theme .uk-badge-primary{background:#0d47a1}.app_my_theme .md-card-list-wrapper .md-card-list>ul>li.item-shown.md-card-list-item-selected:before{background:#e8eaf6}.app_my_theme .md-card-list-wrapper .md-card-list .md-card-list-item-selected{background:#e8eaf6}.app_my_theme .md-card-list-wrapper .md-card-list .md-card-list-item-selected.item-shown{background:#fff}.app_my_theme .md-card-list-wrapper .md-card-list .md-card-list-item-selected.item-shown:before{background:#e8eaf6}.app_my_theme .md-fab.md-fab-accent{background:#0d47a1}.app_my_theme .md-list .uk-nestable-list>li.md-list-item-active,.app_my_theme .md-list>li.md-list-item-active{color:#0d47a1}.app_my_theme .md-list-addon>li.md-list-item-active .md-list-addon-element,.app_my_theme .md-list-addon>li.md-list-item-active .md-list-addon-element .material-icons{color:#0d47a1}.app_my_theme .uk-pagination>li>a:hover{background:#5693f1}.app_my_theme .uk-pagination>li.uk-active>a,.app_my_theme .uk-pagination>li.uk-active>span{background:#0d47a1;color:#fff}.app_my_theme .uk-subnav-pill>.uk-active>*{background:#0d47a1}.app_my_theme .uk-tab>li>a:focus,.app_my_theme .uk-tab>li>a:hover{border-bottom-color:#5693f1}.app_my_theme .uk-tab>li.uk-active>a{border-bottom-color:#0d47a1}.app_my_theme .uk-tab-bottom li>a:focus,.app_my_theme .uk-tab-bottom li>a:hover{border-top-color:#5693f1}.app_my_theme .uk-tab-bottom li.uk-active>a{border-top-color:#0d47a1}.app_my_theme .uk-tab-left li>a:focus,.app_my_theme .uk-tab-left li>a:hover{border-right-color:#5693f1}.app_my_theme .uk-tab-left li.uk-active>a{border-right-color:#0d47a1}.app_my_theme .uk-tab-right li>a:focus,.app_my_theme .uk-tab-right li>a:hover{border-left-color:#5693f1}.app_my_theme .uk-tab-right li.uk-active>a{border-left-color:#0d47a1}.app_my_theme .uk-tab-double-header li a:focus,.app_my_theme .uk-tab-double-header li a:hover{border-bottom-color:#115cd0}.app_my_theme .uk-tab-double-header li.uk-active>a{border-bottom-color:#0d47a1}.app_my_theme #header_main{background:#0d47a1}.app_my_theme.header_double_height:after{background:#0d47a1}.app_my_theme #top_bar .top_bar_nav>li>a:hover{-webkit-box-shadow:inset 0 -3px 0 #0d47a1;box-shadow:inset 0 -3px 0 #0d47a1}.app_my_theme #top_bar .top_bar_nav>li.uk-active a{-webkit-box-shadow:inset 0 -3px 0 #0d47a1;box-shadow:inset 0 -3px 0 #0d47a1}.app_my_theme .user_heading{background:#0d47a1}.app_my_theme #sidebar_main .menu_section>ul>li ul li.act_item a{color:#0d47a1}.app_my_theme #sidebar_main .menu_section>ul>li.current_section>a>.menu_icon .material-icons{color:#0d47a1}.app_my_theme #sidebar_main .menu_section>ul>li.current_section>a .menu_title{color:#0d47a1}.app_my_theme.sidebar_mini #sidebar_main .menu_section>ul>li>a>.menu_title{background:#0d47a1;color:#fff}.app_my_theme.sidebar_mini #sidebar_main .menu_section>ul>li:hover.sidebar_submenu{background:#0d47a1}.app_my_theme.sidebar_mini #sidebar_main .menu_section>ul>li:hover.sidebar_submenu>a .menu_icon .material-icons{color:#fff}.app_my_theme.sidebar_mini #sidebar_main .menu_section>ul>li:hover.sidebar_submenu ul{border-left-color:#0d47a1}.app_my_theme.sidebar_mini #sidebar_main .menu_section>ul>li.current_section>a>.menu_icon .material-icons{color:#0d47a1}.app_my_theme .clndr .clndr_days .clndr_days_grid .day.today>span{background:#0d47a1}.app_my_theme .DTTT_print_info h6{color:#0d47a1}.app_my_theme .fc-unthemed .fc-button.fc-state-active:after{color:#0d47a1}.app_my_theme .fc-unthemed .fc-highlight{-webkit-box-shadow:inset 0 0 0 2px #0d47a1,inset 0 -1px 0 2px #0d47a1;box-shadow:inset 0 0 0 2px #0d47a1,inset 0 -1px 0 2px #0d47a1}.app_my_theme .tablesorter-altair tbody>tr.row_highlighted>td{background:#e8eaf6}.app_my_theme .tablesorter-altair .headerSortDown,.app_my_theme .tablesorter-altair .headerSortUp,.app_my_theme .tablesorter-altair .tablesorter-headerAsc,.app_my_theme .tablesorter-altair .tablesorter-headerDesc,.app_my_theme .tablesorter-altair .tablesorter-headerSortDown,.app_my_theme .tablesorter-altair .tablesorter-headerSortUp{color:#0d47a1}.app_my_theme .wizard>.steps{background:#0d47a1}.app_my_theme .wizard>.steps>ul>li.current a,.app_my_theme .wizard>.steps>ul>li.current a:active,.app_my_theme .wizard>.steps>ul>li.current a:hover{background:#115cd0}.app_my_theme .wizard>.steps>ul>li.done a,.app_my_theme .wizard>.steps>ul>li.done a:active,.app_my_theme .wizard>.steps>ul>li.done a:hover{background:#0d47a1}.app_my_theme .md-card-primary{border-left-color:#0d47a1}.app_my_theme .waves-effect.md-btn-flat-primary{background:0 0}.app_my_theme .waves-effect.md-btn-flat-primary .waves-ripple{background:rgba(13,71,161,.4)}.app_my_theme .search_list_link{color:#0d47a1}.app_my_theme .chatbox.cb_active .chatbox_header{background:#0d47a1}.app_my_theme .chatbox_content .chatbox_message.own .chatbox_message_content li>span{background:#0d47a1}.app_my_theme .uk-table tr.row_checked td,.app_my_theme .uk-table-hover tbody tr:hover{background:#e8eaf6} \ No newline at end of file +.app_my_theme .uk-alert{background:#0d47a1}.app_my_theme .md-btn-primary,.app_my_theme .md-btn-primary:active,.app_my_theme .md-btn-primary:focus,.app_my_theme .md-btn-primary:hover{background:#0d47a1;color:#fff}.app_my_theme .md-btn-flat-primary,.app_my_theme .md-btn-flat-primary:active,.app_my_theme .md-btn-flat-primary:focus,.app_my_theme .md-btn-flat-primary:hover{color:#0d47a1}.app_my_theme .md-btn-flat-primary:active,.app_my_theme .md-btn-flat-primary:focus,.app_my_theme .md-btn-flat-primary:hover{background:#85b1f5}.app_my_theme .uk-badge-primary{background:#0d47a1}.app_my_theme .md-card-list-wrapper .md-card-list>ul>li.item-shown.md-card-list-item-selected:before{background:#e8eaf6}.app_my_theme .md-card-list-wrapper .md-card-list .md-card-list-item-selected{background:#e8eaf6}.app_my_theme .md-card-list-wrapper .md-card-list .md-card-list-item-selected.item-shown{background:#fff}.app_my_theme .md-card-list-wrapper .md-card-list .md-card-list-item-selected.item-shown:before{background:#e8eaf6}.app_my_theme .md-fab.md-fab-accent{background:#0d47a1}.app_my_theme .md-list .uk-nestable-list>li.md-list-item-active,.app_my_theme .md-list>li.md-list-item-active{color:#0d47a1}.app_my_theme .md-list-addon>li.md-list-item-active .md-list-addon-element,.app_my_theme .md-list-addon>li.md-list-item-active .md-list-addon-element .material-icons{color:#0d47a1}.app_my_theme .uk-pagination>li>a:hover{background:#5693f1}.app_my_theme .uk-pagination>li.uk-active>a,.app_my_theme .uk-pagination>li.uk-active>span{background:#0d47a1;color:#fff}.app_my_theme .uk-subnav-pill>.uk-active>*{background:#0d47a1}.app_my_theme .uk-tab>li>a:focus,.app_my_theme .uk-tab>li>a:hover{border-bottom-color:#5693f1}.app_my_theme .uk-tab>li.uk-active>a{border-bottom-color:#0d47a1}.app_my_theme .uk-tab-bottom li>a:focus,.app_my_theme .uk-tab-bottom li>a:hover{border-top-color:#5693f1}.app_my_theme .uk-tab-bottom li.uk-active>a{border-top-color:#0d47a1}.app_my_theme .uk-tab-left li>a:focus,.app_my_theme .uk-tab-left li>a:hover{border-right-color:#5693f1}.app_my_theme .uk-tab-left li.uk-active>a{border-right-color:#0d47a1}.app_my_theme .uk-tab-right li>a:focus,.app_my_theme .uk-tab-right li>a:hover{border-left-color:#5693f1}.app_my_theme .uk-tab-right li.uk-active>a{border-left-color:#0d47a1}.app_my_theme .uk-tab-double-header li a:focus,.app_my_theme .uk-tab-double-header li a:hover{border-bottom-color:#115cd0}.app_my_theme .uk-tab-double-header li.uk-active>a{border-bottom-color:#0d47a1}.app_my_theme #header_main{background:#0d47a1}.app_my_theme.header_double_height:after{background:#0d47a1}.app_my_theme #top_bar .top_bar_nav>li>a:hover{-webkit-box-shadow:inset 0 -3px 0 #0d47a1;box-shadow:inset 0 -3px 0 #0d47a1}.app_my_theme #top_bar .top_bar_nav>li.uk-active a{-webkit-box-shadow:inset 0 -3px 0 #0d47a1;box-shadow:inset 0 -3px 0 #0d47a1}.app_my_theme .user_heading{background:#0d47a1}.app_my_theme #sidebar_main .menu_section>ul>li ul li.act_item a{color:#0d47a1}.app_my_theme #sidebar_main .menu_section>ul>li.current_section>a>.menu_icon .material-icons{color:#0d47a1}.app_my_theme #sidebar_main .menu_section>ul>li.current_section>a .menu_title{color:#0d47a1}.app_my_theme.sidebar_mini #sidebar_main .menu_section>ul>li>a>.menu_title{background:#0d47a1;color:#fff}.app_my_theme.sidebar_mini #sidebar_main .menu_section>ul>li:hover.sidebar_submenu{background:#0d47a1}.app_my_theme.sidebar_mini #sidebar_main .menu_section>ul>li:hover.sidebar_submenu>a .menu_icon .material-icons{color:#fff}.app_my_theme.sidebar_mini #sidebar_main .menu_section>ul>li:hover.sidebar_submenu ul{border-left-color:#0d47a1}.app_my_theme.sidebar_mini #sidebar_main .menu_section>ul>li.current_section>a>.menu_icon .material-icons{color:#0d47a1}.app_my_theme .clndr .clndr_days .clndr_days_grid .day.today>span{background:#0d47a1}.app_my_theme .DTTT_print_info h6{color:#0d47a1}.app_my_theme .fc-unthemed .fc-button.fc-state-active:after{color:#0d47a1}.app_my_theme .fc-unthemed .fc-highlight{-webkit-box-shadow:inset 0 0 0 2px #0d47a1,inset 0 -1px 0 2px #0d47a1;box-shadow:inset 0 0 0 2px #0d47a1,inset 0 -1px 0 2px #0d47a1}.app_my_theme .tablesorter-altair tbody>tr.row_highlighted>td{background:#e8eaf6}.app_my_theme .tablesorter-altair .headerSortDown,.app_my_theme .tablesorter-altair .headerSortUp,.app_my_theme .tablesorter-altair .tablesorter-headerAsc,.app_my_theme .tablesorter-altair .tablesorter-headerDesc,.app_my_theme .tablesorter-altair .tablesorter-headerSortDown,.app_my_theme .tablesorter-altair .tablesorter-headerSortUp{color:#0d47a1}.app_my_theme .wizard>.steps{background:#0d47a1}.app_my_theme .wizard>.steps>ul>li.current a,.app_my_theme .wizard>.steps>ul>li.current a:active,.app_my_theme .wizard>.steps>ul>li.current a:hover{background:#115cd0}.app_my_theme .wizard>.steps>ul>li.done a,.app_my_theme .wizard>.steps>ul>li.done a:active,.app_my_theme .wizard>.steps>ul>li.done a:hover{background:#0d47a1}.app_my_theme .md-card-primary{border-left-color:#0d47a1}.app_my_theme .md-preloader:not(.md-preloader-success):not(.md-preloader-warning):not(.md-preloader-danger) svg circle{stroke:#0d47a1}.app_my_theme .waves-effect.md-btn-flat-primary{background:0 0}.app_my_theme .waves-effect.md-btn-flat-primary .waves-ripple{background:rgba(13,71,161,.4)}.app_my_theme .search_list_link{color:#0d47a1}.app_my_theme .chatbox.cb_active .chatbox_header{background:#0d47a1}.app_my_theme .chatbox_content .chatbox_message.own .chatbox_message_content li>span{background:#0d47a1}.app_my_theme .uk-table tr.row_checked td,.app_my_theme .uk-table-hover tbody tr:hover{background:#e8eaf6} \ No newline at end of file