MaDgIK
/
monitor-dashboard
13
0
Fork 0
Code Issues Pull Requests Projects Releases 17 Wiki Activity

Add mobile view for monitor page and add change tabs to slider-tabs

This commit is contained in:
Konstantinos Triantafyllou 2023-02-15 12:53:47 +02:00
parent 74934c1a8b
commit f76bf6091d
7 changed files with 127 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

185
src/app/monitor/monitor.component.html
View File

@ -32,29 +32,31 @@
</ng-container>
</ul>
</div>
<a class="uk-position-center-left uk-blur-background" uk-slider-item="previous"><span uk-icon="chevron-left"></span></a>
<a class="uk-position-center-right uk-blur-background" uk-slider-item="next"><span uk-icon="chevron-right"></span></a>
<slider-arrow type="previous"></slider-arrow>
<slider-arrow type="next"></slider-arrow>
</div>
</div>
</ng-template>
<div page-content>
<div page-content [border]="false">
<div header>
<div *ngIf="stakeholder" class="uk-hidden">
<h1 class="uk-h6 uk-margin-remove">{{stakeholder.name}}</h1>
</div>
</div>
<div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1" class="uk-margin-medium-top" actions>
<ul *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-tab uk-margin-remove-bottom">
<ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory>
<li *ngIf="hasPermission(subCategory.visibility)"
[class.uk-active]="subCategory.alias === activeSubCategory.alias">
<a [routerLink]="['/', stakeholder.alias, activeTopic.alias, activeCategory.alias, subCategory.alias]"
[queryParams]="queryParams">
<span class="uk-text-uppercase">{{subCategory.name}}</span>
</a>
</li>
</ng-template>
</ul>
<div actions>
<sidebar-mobile-toggle *ngIf="isMobile" [class.uk-margin-bottom]="!activeCategory || countSubCategoriesToShow(activeCategory) <= 1" class="uk-margin-top uk-display-block"></sidebar-mobile-toggle>
<div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1"
[class.uk-margin-bottom]="isMobile" class="uk-margin-medium-top">
<slider-tabs *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" [border]="!isMobile"
[tabsClass]="isMobile?'uk-subnav uk-subnav-pill-alt uk-text-small':'uk-tab'" [type]="'dynamic'">
<ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory>
<slider-tab *ngIf="hasPermission(subCategory.visibility)" [tabTitle]="subCategory.name"
[queryParams]="queryParams" customClass="uk-text-uppercase"
[routerLink]="['/', stakeholder.alias, activeTopic.alias, activeCategory.alias, subCategory.alias]"
[active]="subCategory.alias === activeSubCategory.alias"></slider-tab>
</ng-template>
</slider-tabs>
</div>
</div>
<div inner>
<div *ngIf="privateStakeholder" class="message">
@ -93,62 +95,93 @@
<ng-template #content>
<div *ngIf="countSectionsWithIndicatorsToShow(activeSubCategory.numbers) > 0" class="uk-margin-medium-bottom">
<ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;">
<div *ngIf="countIndicatorsToShow(number.indicators) > 0" class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom" uk-grid
uk-height-match="target: .uk-card">
<h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5>
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
<div *ngIf="hasPermission(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)">
<div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative"
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<div *ngIf="!showDescriptionOverlay[j]">
<div class="uk-text-small uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div>
<div class="number uk-text-small uk-text-bold">
<span *ngIf="numberResults.get(i + '-' + j)" [innerHTML]="numberResults.get(i + '-' + j) | numberRound: 2:1"></span>
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
<ng-container *ngIf="!isMobile && countIndicatorsToShow(number.indicators) > 0">
<div class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom" uk-grid
uk-height-match="target: .uk-card">
<h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5>
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
<div *ngIf="hasPermission(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)">
<div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative"
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<div *ngIf="!showDescriptionOverlay[j]">
<div
class="uk-text-small uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div>
<div class="number uk-text-small uk-text-bold">
<span *ngIf="numberResults.get(i + '-' + j)"
[innerHTML]="numberResults.get(i + '-' + j) | numberRound: 2:1"></span>
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
</div>
<div *ngIf="indicator.description || indicator.additionalDescription"
class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right">
<a class="uk-display-inline-block uk-button uk-button-link" uk-tooltip="Note"
(click)="toggleDescriptionOverlay($event, j)">
<span class="uk-flex uk-flex-middle">
<icon name="analytics" type="outlined" [flex]="true"></icon>
</span>
</a>
</div>
</div>
<div *ngIf="indicator.description || indicator.additionalDescription"
class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right">
<a class="uk-display-inline-block uk-button uk-button-link" uk-tooltip="Note" (click)="toggleDescriptionOverlay($event, j)">
<span class="uk-flex uk-flex-middle">
<icon name="analytics" type="outlined" [flex]="true"></icon>
</span>
</a>
</div>
</div>
<div *ngIf="showDescriptionOverlay[j] && (indicator.description || indicator.additionalDescription)" click-outside-or-esc class="uk-overflow-auto"
(clickOutside)="closeDescriptionOverlay($event, j)">
<div class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right">
<a class="uk-display-inline-block uk-button uk-button-link" (click)="toggleDescriptionOverlay($event, j)">
<span class="uk-flex uk-flex-middle">
<icon name="close" type="outlined" [flex]="true"></icon>
</span>
</a>
</div>
<div class="uk-margin-small-top uk-margin-right">
<p *ngIf="indicator.description">
{{indicator.description}}
</p>
<p *ngIf="indicator.additionalDescription">
{{indicator.additionalDescription}}
</p>
<div
*ngIf="showDescriptionOverlay[j] && (indicator.description || indicator.additionalDescription)"
click-outside-or-esc class="uk-overflow-auto"
(clickOutside)="closeDescriptionOverlay($event, j)">
<div class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right">
<a class="uk-display-inline-block uk-button uk-button-link"
(click)="toggleDescriptionOverlay($event, j)">
<span class="uk-flex uk-flex-middle">
<icon name="close" type="outlined" [flex]="true"></icon>
</span>
</a>
</div>
<div class="uk-margin-small-top uk-margin-right">
<p *ngIf="indicator.description">
{{indicator.description}}
</p>
<p *ngIf="indicator.additionalDescription">
{{indicator.additionalDescription}}
</p>
</div>
</div>
</div>
</div>
</ng-template>
</div>
</ng-container>
<ng-container *ngIf="isMobile && countIndicatorsToShow(number.indicators) > 0">
<h6 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h6>
<div class="uk-card uk-card-default uk-padding-small number-card">
<div class="uk-grid uk-grid-small uk-child-width-1-1" uk-grid>
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
<div *ngIf="hasPermission(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)">
<div [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<div *ngIf="!showDescriptionOverlay[j]">
<div
class="uk-text-xsmall uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div>
<div class="number uk-text-small uk-text-bold">
<span *ngIf="numberResults.get(i + '-' + j)"
[innerHTML]="numberResults.get(i + '-' + j) | numberRound: 2:1"></span>
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
</div>
</div>
</div>
</div>
</ng-template>
</div>
</ng-template>
</div>
</div>
</ng-container>
</ng-container>
</div>
<ng-container *ngFor="let chart of activeSubCategory.charts; let i = index;">
<div *ngIf="countIndicatorsToShow(chart.indicators) > 0"
class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid
uk-height-match="target: .uk-card">
<h5 *ngIf="chart.title" class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5>
class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid
uk-height-match="target: .uk-card">
<h5 *ngIf="chart.title && !isMobile" class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5>
<h6 *ngIf="chart.title && isMobile" class="uk-width-1-1">{{chart.title}}</h6>
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
<div *ngIf="hasPermission(indicator.visibility) && chartsActiveType.get(i + '-' + j)"
[ngClass]="getChartClassBySize(indicator.width)">
[ngClass]="getChartClassBySize(indicator.width)">
<div class="uk-card uk-card-default uk-position-relative"
[class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()">
[class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()">
<div class="uk-card-body uk-text-center uk-margin-small-bottom">
<h6 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom ">
<div>{{indicator.name + " "}}</div>
@ -165,14 +198,14 @@
Filtered: {{chartsActiveType.get(i + '-' + j).filtersApplied}} out of
{{countSelectedFilters()}}</div>-->
<iframe [class.uk-blend-multiply]="!isFullscreen"
*ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
class="uk-width-1-1" allowfullscreen="true" mozallowfullscreen="true"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
*ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
class="uk-width-1-1" allowfullscreen="true" mozallowfullscreen="true"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
<div *ngIf="properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'">
<img class="uk-width-1-1 uk-blend-multiply"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
src="assets/chart-placeholder.png">
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
src="assets/chart-placeholder.png">
</div>
<img *ngIf="chartsActiveType.get(i + '-' + j).source === 'image'"
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
@ -222,13 +255,11 @@
<div sticky_footer class="uk-visible@m">
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
</div>
<div footer class="uk-hidden@m">
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
</div>
<ng-template #graph_and_feedback_template>
<div *ngIf="!view" class="uk-margin-small-top uk-margin-small-bottom uk-text-small uk-flex hideInfo">
<div *ngIf="!view" class="uk-margin-small-top uk-margin-small-bottom uk-grid uk-grid-small uk-text-small hideInfo"
uk-grid>
<!-- Last Stats Date-->
<div class="uk-width-expand@m uk-width-1-2">
<div class="uk-width-expand@m uk-width-1-1">
<icon name="graph" customClass="text-graph"></icon>
<span class="uk-margin-small-left uk-text-baseline uk-text-meta">Powered by </span>
<a href="https://graph.openaire.eu" class="text-graph">OpenAIRE Research Graph</a>
@ -237,7 +268,7 @@
</span>
</div>
<!--Feedback-->
<div class="uk-width-auto uk-margin-small-left">
<div class="uk-width-auto@m uk-width-1-1">
<span class="uk-text-meta">Send us your </span>
<a class="uk-link" [href]="feedback" target="_self">feedback</a>
<span class="uk-text-meta">.</span>
@ -248,7 +279,8 @@
<div *ngIf="stakeholder && !privateStakeholder " href="#style_switcher" uk-toggle="" id="filters_switcher_toggle"
class="uk-offcanvas-switcher uk-flex uk-flex-center uk-flex-middle">
<icon name="filters" ratio="1.5" visuallyHidden="Filters" gradient="filters_icon"></icon>
<span [class.uk-hidden]="countSelectedFilters() === 0" class="uk-offcanvas-count uk-flex uk-flex-middle uk-flex-center">
<span [class.uk-hidden]="countSelectedFilters() === 0"
class="uk-offcanvas-count uk-flex uk-flex-middle uk-flex-center">
{{countSelectedFilters()}}
</span>
</div>
@ -269,7 +301,8 @@
<div *ngIf="!user" class="uk-margin-top"><a class="uk-link" (click)="logIn()"> Sign in</a> to apply filters.</div>
<ul *ngIf="user" class="uk-list uk-list-xlarge uk-list-divider uk-margin-top">
<li>
<range-filter #rangeFilter [filter]="periodFilter" yearMin="2000" [yearMax]="currentYear" [mandatoryRange]="true"
<range-filter #rangeFilter [filter]="periodFilter" yearMin="2000" [yearMax]="currentYear"
[mandatoryRange]="true"
(onFilterChange)="filter()"></range-filter>
</li>
<ng-container *ngFor="let filter of filters ">
@ -279,9 +312,9 @@
</li>
</ng-container>
</ul>
<div *ngIf="user || countSelectedFilters() > 0 " class="uk-margin-medium-top uk-alert uk-alert-primary">
If your filter selection cannot be applied to a chart, that chart will appear grayed-out.
</div>
<i *ngIf="user || countSelectedFilters() > 0 " class="uk-margin-medium-top uk-text-small uk-display-block">
<sup>*</sup> If your filter selection cannot be applied to a chart, that chart will appear grayed-out.
</i>
</div>
</div>
</div>

4
src/app/monitor/monitor.component.less
View File

@ -1,7 +1,7 @@
@import (reference) "~src/assets/openaire-theme/less/_import-variables";
.uk-card {
&.semiFiltered, &.semiFiltered > * > .highcharts-series-group {
&.semiFiltered {
&, & > * > .highcharts-series-group {
opacity: 0.5;
}
}

14
src/app/monitor/monitor.component.ts
View File

@ -80,6 +80,9 @@ export class MonitorComponent implements OnInit, OnDestroy {
public statsUpdateDate: Date;
public showDescriptionOverlay: boolean[] = [];
public isFullscreen: boolean = false;
public isMobile: boolean = false;
@HostListener('fullscreenchange', ['$event'])
@HostListener('webkitfullscreenchange', ['$event'])
@HostListener('mozfullscreenchange', ['$event'])
@ -118,10 +121,11 @@ export class MonitorComponent implements OnInit, OnDestroy {
}));
}
this.keyword = this._fb.control('');
this.subscriptions.push(this.keyword.valueChanges.subscribe(value => {
//TODO do a real action
}));
let subscription: Subscription;
this.layoutService.isMobile.subscribe(isMobile => {
this.isMobile = isMobile;
this.cdr.detectChanges();
});
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
this.user = user;
this.subscriptions.push(this.route.params.subscribe(params => {
@ -323,10 +327,6 @@ export class MonitorComponent implements OnInit, OnDestroy {
return count;
}
public get isSmallScreen() {
return this.layoutService.isSmallScreen;
}
public get open() {
return this.layoutService.open;
}

7
src/app/monitor/monitor.module.ts
View File

@ -26,13 +26,18 @@ import {IconsModule} from '../openaireLibrary/utils/icons/icons.module';
import {filters, graph, incognito} from "../openaireLibrary/utils/icons/icons";
import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module";
import {NumberRoundModule} from "../openaireLibrary/utils/pipes/number-round.module";
import {SliderTabsModule} from "../openaireLibrary/sharedComponents/tabs/slider-tabs.module";
import {SliderUtilsModule} from "../openaireLibrary/sharedComponents/slider-utils/slider-utils.module";
import {
SidebarMobileToggleModule
} from "../openaireLibrary/dashboard/sharedComponents/sidebar/sidebar-mobile-toggle/sidebar-mobile-toggle.module";
@NgModule({
imports: [
CommonModule, FormsModule, RouterModule, ErrorMessagesModule,
HelperModule, Schema2jsonldModule, SEOServiceModule, MonitorRoutingModule, SideBarModule, InputModule,
UserMiniModule, ClickModule, BottomModule, RangeFilterModule, SearchFilterModule, PageContentModule, IconsModule,
LogoUrlPipeModule, NumberRoundModule
LogoUrlPipeModule, NumberRoundModule, SliderTabsModule, SliderUtilsModule, SidebarMobileToggleModule
],
declarations: [
MonitorComponent

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 5454509b55e817b9320a128920d03cb75b5ac44d
Subproject commit 679cae51f2435a97faf1cc019de854c922e93d14

2
src/assets/common-assets

@ -1 +1 @@
Subproject commit 4455b94804936a853baa3654e6e3398875a17a12
Subproject commit 540ba93c0fc9a4be88b2102033fc18ee16ea8673

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit 78c51f00f766b53cd516eac381e676f0be9ad20f
Subproject commit 3b10e32e0df3103a23b36d58b2c6656396b18428