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',
loadChildren: './home/home.module#HomeModule',
loadChildren: './stakeholder/stakeholder.module#StakeholderModule',
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 {Option} from "../../../utils/indicator-utils";
import {AbstractControl, FormControl} from "@angular/forms";
@Component({
selector: '[dashboard-input]',
@ -9,7 +8,8 @@ import {AbstractControl, FormControl} from "@angular/forms";
<input *ngIf="type === 'text'" matInput [placeholder]="label"
[formControl]="formControl" [required]="required">
<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">
{{option.label}}
</mat-option>
@ -18,7 +18,7 @@ import {AbstractControl, FormControl} from "@angular/forms";
`
})
export class InputComponent implements OnInit, OnDestroy {
@Input('formInput') formControl: FormControl;
@Input('formInput') formControl: any;
@Input('type') type: string = 'text';
@Input('label') label: string;
@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).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 {FreeGuard} from '../openaireLibrary/login/freeGuard.guard';
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
import {HomeComponent} from "./home.component";
import {StakeholderComponent} from "./stakeholder.component";
@NgModule({
imports: [
RouterModule.forChild([
{
path: '',
component: HomeComponent,
component: StakeholderComponent,
canActivate: [FreeGuard],
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>
</div>
</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">
<div *ngIf="topicFb">
<div class="md-card">
@ -49,17 +49,13 @@
<textarea class="uk-textarea" formControlName="description"
rows="3" type="text"></textarea>
</div>
<div class="uk-width-1-2">
<select class="uk-select uk-form-small" formControlName="isPublic">
<option [value]="true">Public</option>
<option [value]="false">Private</option>
</select>
<div dashboard-input [type]="'select'"
[formInput]="topicFb.get('isPublic')" [options]="indicatorUtils.isPublic"
label="Privacy" class="uk-width-1-2">
</div>
<div class="uk-width-1-2">
<select class="uk-select uk-form-small" formControlName="isActive">
<option [value]="true">Active</option>
<option [value]="false">Inactive</option>
</select>
<div dashboard-input [type]="'select'"
[formInput]="topicFb.get('isActive')" [options]="indicatorUtils.isActive"
label="Status" class="uk-width-1-2">
</div>
</div>
<hr>
@ -107,17 +103,13 @@
<textarea class="uk-textarea" formControlName="description"
rows="3" type="text"></textarea>
</div>
<div class="uk-width-1-2">
<select class="uk-select uk-form-small" formControlName="isPublic">
<option [value]="true">Public</option>
<option [value]="false">Private</option>
</select>
<div dashboard-input [type]="'select'"
[formInput]="topicFb.get('isPublic')" [options]="indicatorUtils.isPublic"
label="Privacy" class="uk-width-1-2">
</div>
<div class="uk-width-1-2">
<select class="uk-select uk-form-small" formControlName="isActive">
<option [value]="true">Active</option>
<option [value]="false">Inactive</option>
</select>
<div dashboard-input [type]="'select'"
[formInput]="topicFb.get('isActive')" [options]="indicatorUtils.isActive"
label="Status" class="uk-width-1-2">
</div>
</div>
<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 {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {LayoutService} from "../library/sharedComponents/sidebar/layout.service";
import {IndicatorUtils} from "../utils/indicator-utils";
declare var UIkit;
@Component({
selector: 'home',
templateUrl: './home.component.html',
selector: 'stakeholder',
templateUrl: './stakeholder.component.html',
})
export class HomeComponent implements OnInit, OnDestroy {
export class StakeholderComponent implements OnInit, OnDestroy {
public subscriptions: any[] = [];
public loading: boolean = true;
public errorCodes: ErrorCodes;
@ -27,6 +28,7 @@ export class HomeComponent implements OnInit, OnDestroy {
public analysisOpen: boolean = true;
private errorMessages: ErrorMessagesComponent;
public topicFb: FormGroup;
public indicatorUtils: IndicatorUtils = new IndicatorUtils();
public element: any;
public index: number;
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 {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 {RouterModule} from "@angular/router";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
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({
imports: [
CommonModule, HomeRoutingModule, ModalModule, RouterModule, FormsModule, AlertModalModule, ReactiveFormsModule
CommonModule, StakeholderRoutingModule, ModalModule, RouterModule, FormsModule, AlertModalModule, ReactiveFormsModule, InputModule
],
declarations: [
HomeComponent
StakeholderComponent
],
providers: [
FreeGuard, PreviousRouteRecorder,
PiwikService
],
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">
<span *ngFor="let indicatorPath of indicator.indicatorPaths"
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)}}
</i>
{{indicatorPath.type + ' Chart'}}
@ -158,7 +159,8 @@
<div class="uk-width-1-3 uk-text-center"
[ngClass]="'uk-child-width-1-' + indicator.indicatorPaths.length" uk-grid>
<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)}}
</i>
<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"
rows="3" type="text"></textarea>
</div>
<div class="uk-width-1-2">
<select class="uk-select uk-form-small" formControlName="isPublic">
<option [value]="true">Public</option>
<option [value]="false">Private</option>
</select>
<div dashboard-input [type]="'select'"
[formInput]="topicFb.get('isPublic')" [options]="indicatorUtils.isPublic"
label="Privacy" class="uk-width-1-2">
</div>
<div class="uk-width-1-2">
<select class="uk-select uk-form-small" formControlName="isActive">
<option [value]="true">Active</option>
<option [value]="false">Inactive</option>
</select>
<div dashboard-input [type]="'select'"
[formInput]="topicFb.get('isActive')" [options]="indicatorUtils.isActive"
label="Status" class="uk-width-1-2">
</div>
</div>
<hr>
@ -102,17 +98,13 @@
[class.uk-form-danger]="categoryFb.get('name').dirty && categoryFb.get('name').invalid"
type="text">
</div>
<div class="uk-width-1-2">
<select class="uk-select uk-form-small" formControlName="isPublic">
<option [value]="true">Public</option>
<option [value]="false">Private</option>
</select>
<div dashboard-input [type]="'select'"
[formInput]="categoryFb.get('isPublic')" [options]="indicatorUtils.isPublic"
label="Privacy" class="uk-width-1-2">
</div>
<div class="uk-width-1-2">
<select class="uk-select uk-form-small" formControlName="isActive">
<option [value]="true">Active</option>
<option [value]="false">Inactive</option>
</select>
<div dashboard-input [type]="'select'"
[formInput]="categoryFb.get('isActive')" [options]="indicatorUtils.isActive"
label="Status" class="uk-width-1-2">
</div>
</div>
<hr>
@ -164,17 +156,13 @@
[class.uk-form-danger]="subcategoryFb.get('name').dirty && subcategoryFb.get('name').invalid"
type="text">
</div>
<div class="uk-width-1-2">
<select class="uk-select uk-form-small" formControlName="isPublic">
<option [value]="true">Public</option>
<option [value]="false">Private</option>
</select>
<div dashboard-input [type]="'select'"
[formInput]="subcategoryFb.get('isPublic')" [options]="indicatorUtils.isPublic"
label="Privacy" class="uk-width-1-2">
</div>
<div class="uk-width-1-2">
<select class="uk-select uk-form-small" formControlName="isActive">
<option [value]="true">Active</option>
<option [value]="false">Inactive</option>
</select>
<div dashboard-input [type]="'select'"
[formInput]="subcategoryFb.get('isActive')" [options]="indicatorUtils.isActive"
label="Status" class="uk-width-1-2">
</div>
</div>
<hr>
@ -218,17 +206,13 @@
[class.uk-form-danger]="subcategoryFb.get('name').dirty && subcategoryFb.get('name').invalid"
type="text">
</div>
<div class="uk-width-1-2">
<select class="uk-select uk-form-small" formControlName="isPublic">
<option [value]="true">Public</option>
<option [value]="false">Private</option>
</select>
<div dashboard-input [type]="'select'"
[formInput]="subcategoryFb.get('isPublic')" [options]="indicatorUtils.isPublic"
label="Privacy" class="uk-width-1-2">
</div>
<div class="uk-width-1-2">
<select class="uk-select uk-form-small" formControlName="isActive">
<option [value]="true">Active</option>
<option [value]="false">Inactive</option>
</select>
<div dashboard-input [type]="'select'"
[formInput]="subcategoryFb.get('isActive')" [options]="indicatorUtils.isActive"
label="Status" class="uk-width-1-2">
</div>
</div>
<hr>
@ -272,17 +256,13 @@
[class.uk-form-danger]="categoryFb.get('name').dirty && categoryFb.get('name').invalid"
type="text">
</div>
<div class="uk-width-1-2">
<select class="uk-select uk-form-small" formControlName="isPublic">
<option [value]="true">Public</option>
<option [value]="false">Private</option>
</select>
<div dashboard-input [type]="'select'"
[formInput]="categoryFb.get('isPublic')" [options]="indicatorUtils.isPublic"
label="Privacy" class="uk-width-1-2">
</div>
<div class="uk-width-1-2">
<select class="uk-select uk-form-small" formControlName="isActive">
<option [value]="true">Active</option>
<option [value]="false">Inactive</option>
</select>
<div dashboard-input [type]="'select'"
[formInput]="categoryFb.get('isActive')" [options]="indicatorUtils.isActive"
label="Status" class="uk-width-1-2">
</div>
</div>
<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 {Subscriber} from "rxjs";
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {IndicatorUtils} from "../utils/indicator-utils";
declare var UIkit;
@ -18,6 +19,7 @@ declare var UIkit;
export class TopicComponent implements OnInit, OnDestroy {
public subscriptions: any[] = [];
public properties: EnvProperties;
public indicatorUtils: IndicatorUtils = new IndicatorUtils();
public loading: boolean = true;
public stakeholder: Stakeholder;
/**

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

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

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

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