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

[Monitor-Dashboard]: Rename home -> stakeholder. Add custom classes to chart Icons 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57708 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2019-11-27 12:14:14 +00:00
parent ba4dee6d5f
commit e8e95da10f
11 changed files with 82 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app-routing.module.ts
View File

@ -25,7 +25,7 @@ const routes: Routes = [
}, },
{ {
path: 'admin/:stakeholder', path: 'admin/:stakeholder',
loadChildren: './home/home.module#HomeModule', loadChildren: './stakeholder/stakeholder.module#StakeholderModule',
resolve: {envSpecific: EnvironmentSpecificResolver} resolve: {envSpecific: EnvironmentSpecificResolver}
}, },
{ {

12
src/app/library/sharedComponents/input/input.component.ts
View File

@ -1,6 +1,5 @@
import {Component, Input, OnDestroy, OnInit} from "@angular/core"; import {Component, Input, OnDestroy, OnInit} from "@angular/core";
import {Option} from "../../../utils/indicator-utils"; import {Option} from "../../../utils/indicator-utils";
import {AbstractControl, FormControl} from "@angular/forms";
@Component({ @Component({
selector: '[dashboard-input]', selector: '[dashboard-input]',
@ -9,7 +8,8 @@ import {AbstractControl, FormControl} from "@angular/forms";
<input *ngIf="type === 'text'" matInput [placeholder]="label" <input *ngIf="type === 'text'" matInput [placeholder]="label"
[formControl]="formControl" [required]="required"> [formControl]="formControl" [required]="required">
<textarea *ngIf="type === 'textarea'" [rows]="rows" matInput [placeholder]="label" [formControl]="formControl"></textarea> <textarea *ngIf="type === 'textarea'" [rows]="rows" matInput [placeholder]="label" [formControl]="formControl"></textarea>
<mat-select *ngIf="type === 'select'" [placeholder]="label" [formControl]="formControl" [disableOptionCentering]="true"> <mat-select *ngIf="type === 'select'" [placeholder]="label" (openedChange)="stopPropagation()"
[formControl]="formControl" [disableOptionCentering]="true">
<mat-option *ngFor="let option of options" [value]="option.value"> <mat-option *ngFor="let option of options" [value]="option.value">
{{option.label}} {{option.label}}
</mat-option> </mat-option>
@ -18,7 +18,7 @@ import {AbstractControl, FormControl} from "@angular/forms";
` `
}) })
export class InputComponent implements OnInit, OnDestroy { export class InputComponent implements OnInit, OnDestroy {
@Input('formInput') formControl: FormControl; @Input('formInput') formControl: any;
@Input('type') type: string = 'text'; @Input('type') type: string = 'text';
@Input('label') label: string; @Input('label') label: string;
@Input('rows') rows: number = 3; @Input('rows') rows: number = 3;
@ -38,4 +38,10 @@ export class InputComponent implements OnInit, OnDestroy {
&& this.formControl.validator(this.formControl) && this.formControl.validator(this.formControl)
&& this.formControl.validator(this.formControl).required; && this.formControl.validator(this.formControl).required;
} }
stopPropagation() {
if(event) {
event.stopPropagation();
}
}
} }

6
src/app/home/home-routing.module.ts → src/app/stakeholder/stakeholder-routing.module.ts
View File

@ -2,19 +2,19 @@ import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router'; import {RouterModule} from '@angular/router';
import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard'; import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard';
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard'; import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
import {HomeComponent} from "./home.component"; import {StakeholderComponent} from "./stakeholder.component";
@NgModule({ @NgModule({
imports: [ imports: [
RouterModule.forChild([ RouterModule.forChild([
{ {
path: '', path: '',
component: HomeComponent, component: StakeholderComponent,
canActivate: [FreeGuard], canActivate: [FreeGuard],
canDeactivate: [PreviousRouteRecorder] canDeactivate: [PreviousRouteRecorder]
} }
]) ])
] ]
}) })
export class HomeRoutingModule { export class StakeholderRoutingModule {
} }

34
src/app/home/home.component.html → src/app/stakeholder/stakeholder.component.html
View File

@ -29,7 +29,7 @@
</button> </button>
</div> </div>
</a> </a>
<div uk-drop="mode: none; offset: -2; delay-hide: 0;" #editTopic <div uk-drop="mode: none; offset: -2; delay-hide: 0; flip: false" #editTopic
class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop"> class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
<div *ngIf="topicFb"> <div *ngIf="topicFb">
<div class="md-card"> <div class="md-card">
@ -49,17 +49,13 @@
<textarea class="uk-textarea" formControlName="description" <textarea class="uk-textarea" formControlName="description"
rows="3" type="text"></textarea> rows="3" type="text"></textarea>
</div> </div>
<div class="uk-width-1-2"> <div dashboard-input [type]="'select'"
<select class="uk-select uk-form-small" formControlName="isPublic"> [formInput]="topicFb.get('isPublic')" [options]="indicatorUtils.isPublic"
<option [value]="true">Public</option> label="Privacy" class="uk-width-1-2">
<option [value]="false">Private</option>
</select>
</div> </div>
<div class="uk-width-1-2"> <div dashboard-input [type]="'select'"
<select class="uk-select uk-form-small" formControlName="isActive"> [formInput]="topicFb.get('isActive')" [options]="indicatorUtils.isActive"
<option [value]="true">Active</option> label="Status" class="uk-width-1-2">
<option [value]="false">Inactive</option>
</select>
</div> </div>
</div> </div>
<hr> <hr>
@ -107,17 +103,13 @@
<textarea class="uk-textarea" formControlName="description" <textarea class="uk-textarea" formControlName="description"
rows="3" type="text"></textarea> rows="3" type="text"></textarea>
</div> </div>
<div class="uk-width-1-2"> <div dashboard-input [type]="'select'"
<select class="uk-select uk-form-small" formControlName="isPublic"> [formInput]="topicFb.get('isPublic')" [options]="indicatorUtils.isPublic"
<option [value]="true">Public</option> label="Privacy" class="uk-width-1-2">
<option [value]="false">Private</option>
</select>
</div> </div>
<div class="uk-width-1-2"> <div dashboard-input [type]="'select'"
<select class="uk-select uk-form-small" formControlName="isActive"> [formInput]="topicFb.get('isActive')" [options]="indicatorUtils.isActive"
<option [value]="true">Active</option> label="Status" class="uk-width-1-2">
<option [value]="false">Inactive</option>
</select>
</div> </div>
</div> </div>
<hr> <hr>

8
src/app/home/home.component.ts → src/app/stakeholder/stakeholder.component.ts
View File

@ -12,14 +12,15 @@ import {AlertModal} from "../openaireLibrary/utils/modal/alert";
import {Subscriber} from "rxjs"; import {Subscriber} from "rxjs";
import {FormBuilder, FormGroup, Validators} from "@angular/forms"; import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {LayoutService} from "../library/sharedComponents/sidebar/layout.service"; import {LayoutService} from "../library/sharedComponents/sidebar/layout.service";
import {IndicatorUtils} from "../utils/indicator-utils";
declare var UIkit; declare var UIkit;
@Component({ @Component({
selector: 'home', selector: 'stakeholder',
templateUrl: './home.component.html', templateUrl: './stakeholder.component.html',
}) })
export class HomeComponent implements OnInit, OnDestroy { export class StakeholderComponent implements OnInit, OnDestroy {
public subscriptions: any[] = []; public subscriptions: any[] = [];
public loading: boolean = true; public loading: boolean = true;
public errorCodes: ErrorCodes; public errorCodes: ErrorCodes;
@ -27,6 +28,7 @@ export class HomeComponent implements OnInit, OnDestroy {
public analysisOpen: boolean = true; public analysisOpen: boolean = true;
private errorMessages: ErrorMessagesComponent; private errorMessages: ErrorMessagesComponent;
public topicFb: FormGroup; public topicFb: FormGroup;
public indicatorUtils: IndicatorUtils = new IndicatorUtils();
public element: any; public element: any;
public index: number; public index: number;
properties: EnvProperties; properties: EnvProperties;

13
src/app/home/home.module.ts → src/app/stakeholder/stakeholder.module.ts
View File

@ -5,27 +5,28 @@ import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard';
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard'; import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service'; import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
import {HomeComponent} from "./home.component";
import {HomeRoutingModule} from "./home-routing.module";
import {ModalModule} from "../openaireLibrary/utils/modal/modal.module"; import {ModalModule} from "../openaireLibrary/utils/modal/modal.module";
import {RouterModule} from "@angular/router"; import {RouterModule} from "@angular/router";
import {FormsModule, ReactiveFormsModule} from "@angular/forms"; import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module"; import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module";
import {StakeholderComponent} from "./stakeholder.component";
import {StakeholderRoutingModule} from "./stakeholder-routing.module";
import {InputModule} from "../library/sharedComponents/input/input.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, HomeRoutingModule, ModalModule, RouterModule, FormsModule, AlertModalModule, ReactiveFormsModule CommonModule, StakeholderRoutingModule, ModalModule, RouterModule, FormsModule, AlertModalModule, ReactiveFormsModule, InputModule
], ],
declarations: [ declarations: [
HomeComponent StakeholderComponent
], ],
providers: [ providers: [
FreeGuard, PreviousRouteRecorder, FreeGuard, PreviousRouteRecorder,
PiwikService PiwikService
], ],
exports: [ exports: [
HomeComponent StakeholderComponent
] ]
}) })
export class HomeModule { export class StakeholderModule {
} }

6
src/app/topic/indicators.component.html
View File

@ -119,7 +119,8 @@
<ng-template [ngIf]="!grid"> <ng-template [ngIf]="!grid">
<span *ngFor="let indicatorPath of indicator.indicatorPaths" <span *ngFor="let indicatorPath of indicator.indicatorPaths"
class="uk-margin-medium-right uk-text-capitalize uk-flex uk-flex-middle"> class="uk-margin-medium-right uk-text-capitalize uk-flex uk-flex-middle">
<i class="material-icons md-24 uk-margin-small-right"> <i class="material-icons md-24 uk-margin-small-right"
[ngClass]="indicatorUtils.chartTypesIconsClasses.get(indicatorPath.type)">
{{indicatorUtils.chartTypesIcons.get(indicatorPath.type)}} {{indicatorUtils.chartTypesIcons.get(indicatorPath.type)}}
</i> </i>
{{indicatorPath.type + ' Chart'}} {{indicatorPath.type + ' Chart'}}
@ -158,7 +159,8 @@
<div class="uk-width-1-3 uk-text-center" <div class="uk-width-1-3 uk-text-center"
[ngClass]="'uk-child-width-1-' + indicator.indicatorPaths.length" uk-grid> [ngClass]="'uk-child-width-1-' + indicator.indicatorPaths.length" uk-grid>
<div *ngFor="let indicatorPath of indicator.indicatorPaths"> <div *ngFor="let indicatorPath of indicator.indicatorPaths">
<i class="material-icons md-24"> <i class="material-icons md-24"
[ngClass]="indicatorUtils.chartTypesIconsClasses.get(indicatorPath.type)">
{{indicatorUtils.chartTypesIcons.get(indicatorPath.type)}} {{indicatorUtils.chartTypesIcons.get(indicatorPath.type)}}
</i> </i>
<div class="uk-text-capitalize">{{indicatorPath.type + ' Chart'}}</div> <div class="uk-text-capitalize">{{indicatorPath.type + ' Chart'}}</div>

80
src/app/topic/topic.component.html
View File

@ -39,17 +39,13 @@
<textarea class="uk-textarea" formControlName="description" <textarea class="uk-textarea" formControlName="description"
rows="3" type="text"></textarea> rows="3" type="text"></textarea>
</div> </div>
<div class="uk-width-1-2"> <div dashboard-input [type]="'select'"
<select class="uk-select uk-form-small" formControlName="isPublic"> [formInput]="topicFb.get('isPublic')" [options]="indicatorUtils.isPublic"
<option [value]="true">Public</option> label="Privacy" class="uk-width-1-2">
<option [value]="false">Private</option>
</select>
</div> </div>
<div class="uk-width-1-2"> <div dashboard-input [type]="'select'"
<select class="uk-select uk-form-small" formControlName="isActive"> [formInput]="topicFb.get('isActive')" [options]="indicatorUtils.isActive"
<option [value]="true">Active</option> label="Status" class="uk-width-1-2">
<option [value]="false">Inactive</option>
</select>
</div> </div>
</div> </div>
<hr> <hr>
@ -102,17 +98,13 @@
[class.uk-form-danger]="categoryFb.get('name').dirty && categoryFb.get('name').invalid" [class.uk-form-danger]="categoryFb.get('name').dirty && categoryFb.get('name').invalid"
type="text"> type="text">
</div> </div>
<div class="uk-width-1-2"> <div dashboard-input [type]="'select'"
<select class="uk-select uk-form-small" formControlName="isPublic"> [formInput]="categoryFb.get('isPublic')" [options]="indicatorUtils.isPublic"
<option [value]="true">Public</option> label="Privacy" class="uk-width-1-2">
<option [value]="false">Private</option>
</select>
</div> </div>
<div class="uk-width-1-2"> <div dashboard-input [type]="'select'"
<select class="uk-select uk-form-small" formControlName="isActive"> [formInput]="categoryFb.get('isActive')" [options]="indicatorUtils.isActive"
<option [value]="true">Active</option> label="Status" class="uk-width-1-2">
<option [value]="false">Inactive</option>
</select>
</div> </div>
</div> </div>
<hr> <hr>
@ -164,17 +156,13 @@
[class.uk-form-danger]="subcategoryFb.get('name').dirty && subcategoryFb.get('name').invalid" [class.uk-form-danger]="subcategoryFb.get('name').dirty && subcategoryFb.get('name').invalid"
type="text"> type="text">
</div> </div>
<div class="uk-width-1-2"> <div dashboard-input [type]="'select'"
<select class="uk-select uk-form-small" formControlName="isPublic"> [formInput]="subcategoryFb.get('isPublic')" [options]="indicatorUtils.isPublic"
<option [value]="true">Public</option> label="Privacy" class="uk-width-1-2">
<option [value]="false">Private</option>
</select>
</div> </div>
<div class="uk-width-1-2"> <div dashboard-input [type]="'select'"
<select class="uk-select uk-form-small" formControlName="isActive"> [formInput]="subcategoryFb.get('isActive')" [options]="indicatorUtils.isActive"
<option [value]="true">Active</option> label="Status" class="uk-width-1-2">
<option [value]="false">Inactive</option>
</select>
</div> </div>
</div> </div>
<hr> <hr>
@ -218,17 +206,13 @@
[class.uk-form-danger]="subcategoryFb.get('name').dirty && subcategoryFb.get('name').invalid" [class.uk-form-danger]="subcategoryFb.get('name').dirty && subcategoryFb.get('name').invalid"
type="text"> type="text">
</div> </div>
<div class="uk-width-1-2"> <div dashboard-input [type]="'select'"
<select class="uk-select uk-form-small" formControlName="isPublic"> [formInput]="subcategoryFb.get('isPublic')" [options]="indicatorUtils.isPublic"
<option [value]="true">Public</option> label="Privacy" class="uk-width-1-2">
<option [value]="false">Private</option>
</select>
</div> </div>
<div class="uk-width-1-2"> <div dashboard-input [type]="'select'"
<select class="uk-select uk-form-small" formControlName="isActive"> [formInput]="subcategoryFb.get('isActive')" [options]="indicatorUtils.isActive"
<option [value]="true">Active</option> label="Status" class="uk-width-1-2">
<option [value]="false">Inactive</option>
</select>
</div> </div>
</div> </div>
<hr> <hr>
@ -272,17 +256,13 @@
[class.uk-form-danger]="categoryFb.get('name').dirty && categoryFb.get('name').invalid" [class.uk-form-danger]="categoryFb.get('name').dirty && categoryFb.get('name').invalid"
type="text"> type="text">
</div> </div>
<div class="uk-width-1-2"> <div dashboard-input [type]="'select'"
<select class="uk-select uk-form-small" formControlName="isPublic"> [formInput]="categoryFb.get('isPublic')" [options]="indicatorUtils.isPublic"
<option [value]="true">Public</option> label="Privacy" class="uk-width-1-2">
<option [value]="false">Private</option>
</select>
</div> </div>
<div class="uk-width-1-2"> <div dashboard-input [type]="'select'"
<select class="uk-select uk-form-small" formControlName="isActive"> [formInput]="categoryFb.get('isActive')" [options]="indicatorUtils.isActive"
<option [value]="true">Active</option> label="Status" class="uk-width-1-2">
<option [value]="false">Inactive</option>
</select>
</div> </div>
</div> </div>
<hr> <hr>

2
src/app/topic/topic.component.ts
View File

@ -8,6 +8,7 @@ import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
import {AlertModal} from "../openaireLibrary/utils/modal/alert"; import {AlertModal} from "../openaireLibrary/utils/modal/alert";
import {Subscriber} from "rxjs"; import {Subscriber} from "rxjs";
import {FormBuilder, FormGroup, Validators} from "@angular/forms"; import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {IndicatorUtils} from "../utils/indicator-utils";
declare var UIkit; declare var UIkit;
@ -18,6 +19,7 @@ declare var UIkit;
export class TopicComponent implements OnInit, OnDestroy { export class TopicComponent implements OnInit, OnDestroy {
public subscriptions: any[] = []; public subscriptions: any[] = [];
public properties: EnvProperties; public properties: EnvProperties;
public indicatorUtils: IndicatorUtils = new IndicatorUtils();
public loading: boolean = true; public loading: boolean = true;
public stakeholder: Stakeholder; public stakeholder: Stakeholder;
/** /**

4
src/app/utils/indicator-utils.ts
View File

@ -44,6 +44,10 @@ export class IndicatorUtils {
['other', 'perm_media'] ['other', 'perm_media']
]); ]);
chartTypesIconsClasses: Map<string, string> = new Map([
['bar', 'rotate-90']
]);
isPublicIcon: Map<boolean, string> = new Map([ isPublicIcon: Map<boolean, string> = new Map([
[true, 'public'], [true, 'public'],
[false, 'lock'] [false, 'lock']

4
src/assets/monitor-custom.css
View File

@ -28,3 +28,7 @@
background-color: rgba(0, 0, 0, 0.50); background-color: rgba(0, 0, 0, 0.50);
position: absolute; position: absolute;
} }
.rotate-90 {
transform: rotate(90deg);
}