Create monitor component. Move stakeholders.json to assets.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor@57321 d315682c-612b-4755-9ff5-7f18f6832af3

package.json

@@ -8,7 +8,7 @@
   ],
   "scripts": {
     "ng": "ng",
-    "start": " ng serve --disable-host-check --host 0.0.0.0",
+    "start": " ng serve --port 4500 --disable-host-check --host 0.0.0.0",
     "start:ssr": "npm run build:ssr && npm run serve:ssr",
     "start:prerender": "npm run build:prerender && npm run serve:prerender",
     "build": "ng build",

src/app/app-routing.module.ts

@@ -9,8 +9,8 @@ import {ThemeComponent} from "./test/theme.component";
 
 const routes: Routes = [
   // Other Pages
-  { path: '', loadChildren: './home/home.module#HomeModule', resolve: { envSpecific: EnvironmentSpecificResolver  }},
-
+  { path: '', loadChildren: './home/home.module#HomeModule', resolve: { envSpecific: EnvironmentSpecificResolver }},
+  { path: 'monitor', loadChildren: './monitor/monitor.module#MonitorModule', resolve: { envSpecific: EnvironmentSpecificResolver }},
   { path: 'about',  redirectTo: 'about/learn-how', pathMatch: 'full'},
   { path: 'about/learn-how', loadChildren: './learn-how/learn-how.module#LearnHowModule', resolve: { envSpecific:  EnvironmentSpecificResolver }},
   { path: 'about/learn-in-depth', loadChildren: './learn-how/learnInDepth/learn-in-depth.module#LearnInDepthModule', resolve: { envSpecific:  EnvironmentSpecificResolver }},

src/app/monitor/monitor-routing.module.ts

@@ -0,0 +1,14 @@
+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 {MonitorComponent} from "./monitor.component";
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+     	{ path: ':id', component: MonitorComponent, canActivate: [FreeGuard], canDeactivate: [PreviousRouteRecorder] }
+    ])
+  ]
+})
+export class MonitorRoutingModule { }

src/app/monitor/monitor.component.html

@@ -0,0 +1,11 @@
+<schema2jsonld [URL]="properties.baseLink"
+               [logoURL]="properties.baseLink+'/assets/common-assets/logo-small-monitor.png'" type="home"
+               name="OpenAIRE Monitor">
+</schema2jsonld>
+<div
+  class="image-front-topbar uk-margin-large-top"
+  uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
+  tm-header-transparent="light" tm-header-transparent-placeholder="">
+  <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
+          [texts]="pageContents['top']"></helper>
+</div>

src/app/monitor/monitor.component.ts

@@ -0,0 +1,113 @@
+import {Component} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Meta, Title} from '@angular/platform-browser';
+import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
+import {CommunitiesService} from '../openaireLibrary/connect/communities/communities.service';
+import {SubscribeService} from '../openaireLibrary/utils/subscribe/subscribe.service';
+import {CommunityInfo} from '../openaireLibrary/connect/community/communityInfo';
+
+import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
+import {StringUtils} from '../openaireLibrary/utils/string-utils.class';
+
+import {ErrorCodes} from '../openaireLibrary/utils/properties/errorCodes';
+import {ErrorMessagesComponent} from '../openaireLibrary/utils/errorMessages.component';
+import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
+import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
+import {StakeholderService} from "../services/stakeholder.service";
+import {Stakeholder} from "../stakeholder";
+
+@Component({
+  selector: 'monitor',
+  templateUrl: 'monitor.component.html',
+})
+
+export class MonitorComponent {
+  public piwiksub: any;
+  public pageContents = null;
+  public divContents = null;
+  public status: number;
+  public loading: boolean = true;
+  public errorCodes: ErrorCodes;
+  public stakeholder: Stakeholder;
+  private errorMessages: ErrorMessagesComponent;
+  properties: EnvProperties;
+
+  constructor(
+    private route: ActivatedRoute,
+    private _router: Router,
+    private _meta: Meta,
+    private _title: Title,
+    private _piwikService: PiwikService,
+    private helper: HelperService,
+    private stakeholderService: StakeholderService,
+    private seoService: SEOService) {
+    this.errorCodes = new ErrorCodes();
+    this.errorMessages = new ErrorMessagesComponent();
+    this.status = this.errorCodes.LOADING;
+  }
+
+  public ngOnInit() {
+    this.route.data
+      .subscribe((data: { envSpecific: EnvProperties }) => {
+        this.route.params.subscribe( params => {
+          this.properties = data.envSpecific;
+          var url = data.envSpecific.baseLink + this._router.url;
+          this.stakeholderService.getStakeholder(params['id']).subscribe(stakeholder => {
+            this.stakeholder = stakeholder;
+            this.seoService.createLinkForCanonicalURL(url, false);
+            this._meta.updateTag({content: url}, "property='og:url'");
+            var description = "Monitor | " + this.stakeholder.index_name;
+            var title = "Monitor | " + this.stakeholder.index_shortName;
+            this._meta.updateTag({content: description}, "name='description'");
+            this._meta.updateTag({content: description}, "property='og:description'");
+            this._meta.updateTag({content: title}, "property='og:title'");
+            this._title.setTitle(title);
+            if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
+              this.piwiksub = this._piwikService.trackView(this.properties, title, this.properties.piwikSiteId).subscribe();
+            }
+            //this.getDivContents();
+            this.getPageContents();
+          }, error => {
+            console.log(error);
+            this._router.navigate(['']);
+          })
+        });
+      });
+  }
+
+  private getPageContents() {
+    this.helper.getPageHelpContents(this._router.url, this.properties, 'monitor').subscribe(contents => {
+      this.pageContents = contents;
+    })
+  }
+
+  private getDivContents() {
+    this.helper.getDivHelpContents(this._router.url, this.properties, 'monitor').subscribe(contents => {
+      this.divContents = contents;
+    })
+  }
+
+  public quote(param: string): string {
+    return StringUtils.quote(param);
+  }
+
+  public ngOnDestroy() {
+    if (this.piwiksub) {
+      this.piwiksub.unsubscribe();
+    }
+  }
+
+  private handleError(message: string, error): number {
+    var code = "";
+    if (!error.status) {
+      var error = error.json();
+      code = error.code;
+    } else {
+      code = error.status;
+    }
+
+    console.error("Monitor (component): " + message, error);
+
+    return this.errorMessages.getErrorCode(code);
+  }
+}

src/app/monitor/monitor.module.ts

@@ -0,0 +1,35 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+
+import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard';
+import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+
+import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
+import {ErrorMessagesModule} from '../openaireLibrary/utils/errorMessages.module';
+import {HelperModule} from "../openaireLibrary/utils/helper/helper.module";
+import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
+import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module";
+import {MonitorRoutingModule} from "./monitor-routing.module";
+import {MonitorComponent} from "./monitor.component";
+import {StakeholderService} from "../services/stakeholder.service";
+
+@NgModule({
+  imports: [
+    CommonModule, FormsModule, RouterModule, ErrorMessagesModule,
+    HelperModule, Schema2jsonldModule, SEOServiceModule, MonitorRoutingModule
+  ],
+  declarations: [
+    MonitorComponent
+  ],
+  providers: [
+    FreeGuard, PreviousRouteRecorder,
+    PiwikService, StakeholderService
+  ],
+  exports: [
+    MonitorComponent
+  ]
+})
+export class MonitorModule {
+}

src/app/services/stakeholder.service.ts

@@ -0,0 +1,29 @@
+import {Injectable} from "@angular/core";
+import {HttpClient, HttpErrorResponse} from "@angular/common/http";
+import {Observable} from "rxjs";
+import {Stakeholder} from "../stakeholder";
+import {map} from "rxjs/operators";
+
+@Injectable()
+export class StakeholderService {
+
+
+  constructor(private http: HttpClient) {
+  }
+
+  getStakeholder(id: string): Observable<Stakeholder> {
+    return this.http.get<any>('./assets/stakeholders.json').pipe(map(json => {
+      let stakeholder = json.stakeholders.filter(stakeholder => stakeholder.index_id === id)[0];
+      if(stakeholder) {
+        return stakeholder;
+      } else {
+        throw new HttpErrorResponse({
+          error: {
+            message: 'No Stakeholder has been found',
+            status: 404
+          }
+        })
+      }
+    }));
+  }
+}

src/app/stakeholder.ts

@@ -1,8 +1,9 @@
 export class Stakeholder {
-  type: string;
-  name: string;
-  shortName:string;
   id: string;
+  type: string;
+  index_id;
+  index_name: string;
+  index_shortName:string;
   isDefaultProfile: boolean;
   isActive: boolean;
   isPublic: boolean;

src/app/utils/customization/customization.component.ts

@@ -58,7 +58,8 @@ export class CustomizationComponent {
   }
 
   private buildCss() {
-    // console.log(this.layout);
+    console.log(this.layout);
+
     document.documentElement.style.setProperty('--portal-main-color', this.layout.mainColor);
     document.documentElement.style.setProperty('--portal-dark-color', this.layout.secondaryColor);
     let css = `
@@ -66,10 +67,11 @@ export class CustomizationComponent {
 .communityPanelBackground:not(bottom)  {   
     border-style: ` + (this.layout.panel.background.borderStyle != null ? this.layout.panel.background.borderStyle : 'solid') + `;
     border-color:` + (this.layout.panel.background.borderColor != null ? this.layout.panel.background.borderColor : 'transparent') + `;
-    border-width: ` + (this.layout.panel.background.borderWidth != null ? this.layout.panel.background.borderWidth : '1px') + `;`+`
+    border-width: ` + (this.layout.panel.background.borderWidth != null ? this.layout.panel.background.borderWidth: '1') + `px;`+`
+    
 }
 .communityPanelBackground, .communityPanelBackground .uk-section-primary {
-        background-color:  ` + this.layout.mainColor + `;    
+        background-color:  ` + (this.layout.panel.background.color?this.layout.panel.background.color:this.layout.mainColor) + `;    
 }
 
 /*Panel fonts*/
@@ -77,7 +79,8 @@ export class CustomizationComponent {
 .communityPanelBackground {
     color:` + (this.layout.panel.fonts.color != null ? this.layout.panel.fonts.color : 'white') + ` !important;` +
       (this.layout.panel.fonts.family != null ? ('font-family: ' + this.layout.panel.fonts.family + ' !important;') : '') +
-      (this.layout.panel.fonts.size != null ? ('font-size: ' + this.layout.panel.fonts.size + ' !important;') : '') +
+      (this.layout.panel.fonts.size != null ? ('font-size: ' + this.layout.panel.fonts.size + 'px !important;') : '') +
+      (this.layout.panel.fonts.weight != null ? ('font-weight: ' + this.layout.panel.fonts.weight + '!important;') : '') +
 
       `
 }
@@ -87,46 +90,47 @@ export class CustomizationComponent {
 
 .communityPanelBackground .uk-h6:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h5:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h4:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h3:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-h2:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h1:not(.ignoreCommunityPanelBackground) {
     color: ` + (this.layout.panel.title.color != null ? this.layout.panel.title.color : 'white') + ` !important;` +
-
+      (this.layout.panel.title.weight != null ? ('font-weight: ' + this.layout.panel.title.weight + '!important;') : '') +
       `
 }
 .communityPanelBackground .uk-h5:not(.ignoreCommunityPanelBackground){
 `+
       (this.layout.panel.title.family != null ? ('font-family: ' + this.layout.panel.title.family + ' !important;') : '') +
-      (this.layout.panel.title.size != null ? ('font-size: ' + this.layout.panel.title.size + ' !important;') : '') +
+      (this.layout.panel.title.size != null ? ('font-size: ' + this.layout.panel.title.size + 'px !important;') : '') +
       `
 }
 /* Panel links */
 .communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground), .communityPanelBackground a:not(.uk-button):not(.uk-button-text):not(.ignoreCommunityPanelBackground), .portal-card a {
     color: `
-      + (this.layout.panel.links.color != null ? this.layout.panel.links.color : 'white') + ` !important;` +
-      (this.layout.panel.links.family != null ? ('font-family: ' + this.layout.panel.links.family + ' !important;') : '') +
-      (this.layout.panel.links.size != null ? ('font-size: ' + this.layout.panel.links.size + ' !important;') : '') +
-      `
+      + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.color?this.layout.links.darkBackground.color:'white') :(this.layout.links.lightBackground.color?this.layout.links.lightBackground.color:'var(--portal-main-color)') ) + ` !important;`
+      + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.family?('font-family: ' + this.layout.links.darkBackground.family + ' !important;') : '') :'' )
+      + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.size?('font-size: ' + this.layout.links.darkBackground.size + 'px !important;') : '') :'' )
+      +`
 }
 /* Panel links - hover */
 
 .communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground):hover, .communityPanelBackground a:not(.uk-button):not(.uk-button-text):not(.ignoreCommunityPanelBackground):hover, .portal-card a:hover {
     color: `
-      + (this.layout.panel.links.onHover.color != null ? this.layout.panel.links.onHover.color : `rgba(255, 255, 255, 0.5)`) + ` !important;` + `
+      + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.onHover.color?this.layout.links.darkBackground.onHover.color:`rgba(255, 255, 255, 0.5)`) :(this.layout.links.lightBackground.onHover.color?this.layout.links.lightBackground.onHover.color:'var(--portal-dark-color)') ) + ` !important;`
+      + `
 }
  
 .uk-link, a:not(.uk-button), .uk-navbar-dropdown-nav > li > a, .uk-navbar-nav > li > a, .loginLink,
 .uk-tab > .uk-active > a, .uk-tab > * > a:focus, .uk-tab > * > a:hover {
-    color:` + (this.layout.links.color != null ? this.layout.links.color : `var(--portal-main-color)`) + `     
+    color:` + (this.layout.links.lightBackground.color != null ? this.layout.links.lightBackground.color : `var(--portal-main-color)`) + `     
 }
 
 .uk-link:hover, a:not(.uk-button):hover,
 .uk-navbar-dropdown-nav > li > a:focus, .uk-navbar-dropdown-nav > li > a:hover, .uk-navbar-nav > li > a:hover, .uk-navbar-nav > li > a:focus, .uk-navbar-nav > li > a:active, .uk-navbar-nav > li:hover > a,
 .uk-navbar-dropdown-nav > li.uk-active > a, .uk-tab > .uk-active > a, .uk-navbar-nav > li.uk-active > a, .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav > li.uk-active > a {
-    color:` + (this.layout.links.onHover.color != null ? this.layout.links.onHover.color : `var(--portal-dark-color)`) + `     
+    color:` + (this.layout.links.lightBackground.onHover.color != null ? this.layout.links.lightBackground.onHover.color : `var(--portal-dark-color)`) + `     
 }
 
 .communityBorder {
     border-color: ` + (this.layout.box.borderColor != null ? this.layout.box.borderColor : `var(--portal-main-color)`) + `;
     border-style: ` + (this.layout.box.borderStyle != null ? this.layout.box.borderStyle : `solid`) + `;
-    border-width: ` + (this.layout.box.borderWidth != null ? this.layout.box.borderWidth : `2px`) + `;
-    border-radius: ` + (this.layout.box.borderRadius != null ? this.layout.box.borderRadius : `6px`) + `;
+    border-width: ` + (this.layout.box.borderWidth != null ? this.layout.box.borderWidth : `2`) + `px;
+    border-radius: ` + (this.layout.box.borderRadius != null ? this.layout.box.borderRadius : `6`) + `px;
 }
 
 /*Panel Elements & cards*/
@@ -135,11 +139,15 @@ export class CustomizationComponent {
     border-color: ` + (this.layout.panel.panelElements.borderColor != null ? this.layout.panel.panelElements.borderColor : `rgba(255, 255, 255, 0.5)`) + `;
 }
 .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) a{    
-    border-color: ` + (this.layout.panel.links.color != null ? this.layout.panel.links.color : `rgba(255, 255, 255, 0.8)`) + `;
+    border-color: ` +
+      + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.color?this.layout.links.darkBackground.color:'rgba(255, 255, 255, 0.8)') :(this.layout.links.lightBackground.color?this.layout.links.lightBackground.color:'var(--portal-main-color)') )   +
+       + `;
     border-bottom: 1px solid;
 }
 .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) a:hover{    
-    border-color: ` + (this.layout.panel.links.onHover.color != null ? this.layout.panel.links.onHover.color : `rgba(255, 255, 255, 0.5)`) + `;
+    border-color: ` +
+      (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.onHover.color?this.layout.links.darkBackground.onHover.color:'rgba(255, 255, 255, 0.5)') :(this.layout.links.lightBackground.onHover.color?this.layout.links.lightBackground.onHover.color:'var(--portal-dark-color)') )+
+      + `;
 }
 .communityPanelBackground .uk-card:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) {
     color: ` + (this.layout.panel.panelElements.color != null ? this.layout.panel.panelElements.color : `rgba(255, 255, 255, 0.5)`) + `;
@@ -147,40 +155,60 @@ export class CustomizationComponent {
 
 
 .uk-button:not(.uk-button-text){
-  border-radius:` + (this.layout.buttons.borderRadius != null ? this.layout.buttons.borderRadius : `4px`) + `;
+  border-radius:` + (this.layout.buttons.lightBackground.borderRadius != null ? this.layout.buttons.lightBackground.borderRadius : `4`) + `px;
 }
 .uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary), .portal-button {
-    background-color:` + (this.layout.buttons.backgroundColor != null ? this.layout.buttons.backgroundColor : `#003052`) + `;
-    color: ` + (this.layout.buttons.color != null ? this.layout.buttons.color : `white`) + `;
-    border-color: ` + (this.layout.buttons.borderColor != null ? this.layout.buttons.borderColor : `transparent`) + `;
-    border-style: ` + (this.layout.buttons.borderStyle != null ? this.layout.buttons.borderStyle : `solid`) + `;
-    border-width: ` + (this.layout.buttons.borderWidth != null ? this.layout.buttons.borderWidth : `1px`) + `;
+    background-color:` + (this.layout.buttons.lightBackground.backgroundColor != null ? this.layout.buttons.lightBackground.backgroundColor : `#003052`) + `;
+    color: ` + (this.layout.buttons.lightBackground.color != null ? this.layout.buttons.lightBackground.color : `white`) + `;
+    border-color: ` + (this.layout.buttons.lightBackground.borderColor != null ? this.layout.buttons.lightBackground.borderColor : `transparent`) + `;
+    border-style: ` + (this.layout.buttons.lightBackground.borderStyle != null ? this.layout.buttons.lightBackground.borderStyle : `solid`) + `;
+    border-width: ` + (this.layout.buttons.lightBackground.borderWidth != null ? this.layout.buttons.lightBackground.borderWidth : `1`) + `px;
   
 
 }
 
 .uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary):hover, .portal-button:hover {
-    background-color: ` + (this.layout.buttons.onHover.backgroundColor != null ? this.layout.buttons.onHover.backgroundColor : `#154B71`) + `;
-    color: ` + (this.layout.buttons.onHover.color != null ? this.layout.buttons.onHover.color : `white`) + `;
-    border-color: ` + (this.layout.buttons.onHover.color != null ? this.layout.buttons.onHover.color : `transparent`) + `;
+    background-color: ` + (this.layout.buttons.lightBackground.onHover.backgroundColor != null ? this.layout.buttons.lightBackground.onHover.backgroundColor : `#154B71`) + `;
+    color: ` + (this.layout.buttons.lightBackground.onHover.color != null ? this.layout.buttons.lightBackground.onHover.color : `white`) + `;
+    border-color: ` + (this.layout.buttons.lightBackground.onHover.color != null ? this.layout.buttons.lightBackground.onHover.color : `transparent`) + `;
 }
 
 /*Buttons*/
 .communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground) {
-    background-color: ` + (this.layout.panel.buttons.backgroundColor != null ? this.layout.panel.buttons.backgroundColor : `white`) + `  !important;
-    color: ` + (this.layout.panel.buttons.color != null ? this.layout.panel.buttons.color : `var(--portal-main-color)`) + ` !important;
-    border-color: ` + (this.layout.panel.buttons.borderColor != null ? this.layout.panel.buttons.borderColor : `transparent`) + ` !important;
-    border-style: ` + (this.layout.panel.buttons.borderStyle != null ? this.layout.panel.buttons.borderStyle : `solid`) + `  !important;
-    border-width: ` + (this.layout.panel.buttons.borderWidth != null ? this.layout.panel.buttons.borderWidth : `1px`) + ` !important;
-    border-radius:` + (this.layout.panel.buttons.borderRadius != null ? this.layout.panel.buttons.borderRadius : `4px`) + ` !important;
-    font-weight:` + (this.layout.panel.buttons.fontWeight != null ? this.layout.panel.buttons.fontWeight : `600`) + `;
-
+    background-color: `
+      + (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.backgroundColor?this.layout.buttons.darkBackground.backgroundColor:'white') :(this.layout.buttons.lightBackground.backgroundColor?this.layout.buttons.lightBackground.backgroundColor:'var(--portal-main-color)') )
+        +`  !important;
+    color: `
+      + (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.color?this.layout.buttons.darkBackground.color:'var(--portal-main-color)') :(this.layout.buttons.lightBackground.color?this.layout.buttons.lightBackground.color:'white') )
+      +  ` !important;
+    border-color: `
+      + (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderColor?this.layout.buttons.darkBackground.borderColor:'white') :(this.layout.buttons.lightBackground.borderColor?this.layout.buttons.lightBackground.borderColor:'var(--portal-main-color)') )
+       + ` !important;
+    border-style: ` +
+       (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderStyle?this.layout.buttons.darkBackground.borderStyle:'solid') :(this.layout.buttons.lightBackground.borderStyle?this.layout.buttons.lightBackground.borderStyle:'solid') )
+       + `  !important;
+    border-width: ` +
+      (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderWidth?this.layout.buttons.darkBackground.borderWidth:'1px') :(this.layout.buttons.lightBackground.borderWidth?this.layout.buttons.lightBackground.borderWidth:'1px') )
+      + ` !important;
+    border-radius:` +
+      (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderRadius?this.layout.buttons.darkBackground.borderRadius:'4px') :(this.layout.buttons.lightBackground.borderRadius?this.layout.buttons.lightBackground.borderRadius:'4px') )+
+       + ` !important;
+    font-weight:`
+      // (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.fontWeight?this.layout.buttons.darkBackground.fontWeight:'4px') :(this.layout.buttons.lightBackground.borderRadius?this.layout.buttons.lightBackground.borderRadius:'4px') )+
+      // (this.layout.panel.buttons.fontWeight != null ? this.layout.panel.buttons.fontWeight : `600`) + `;
++`
 }
 
 .communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground):hover {
-    background-color: ` + (this.layout.panel.buttons.onHover.backgroundColor != null ? this.layout.panel.buttons.onHover.backgroundColor : ` #eeeeee `) + ` !important;
-    color: ` + (this.layout.panel.buttons.onHover.color != null ? this.layout.panel.buttons.onHover.color : ` var(--portal-main-color) `) + `  !important;
-    border-color:` + (this.layout.panel.buttons.onHover.borderColor != null ? this.layout.panel.buttons.onHover.borderColor : `transparent`) + `  !important;
+    background-color: ` +
+       (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.onHover.backgroundColor?this.layout.buttons.darkBackground.onHover.backgroundColor:' #eeeeee') :(this.layout.buttons.lightBackground.onHover.backgroundColor?this.layout.buttons.lightBackground.onHover.backgroundColor:'var(--portal-dark-color)') )
+      + ` !important;
+    color: ` +
+      (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.onHover.color?this.layout.buttons.darkBackground.onHover.color:' var(--portal-main-color) ') :(this.layout.buttons.lightBackground.onHover.color?this.layout.buttons.lightBackground.onHover.color:'white') )
+       + `  !important;
+    border-color:`
+       +(this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.onHover.borderColor?this.layout.buttons.darkBackground.onHover.borderColor:' #eeeeee ') :(this.layout.buttons.lightBackground.onHover.borderColor?this.layout.buttons.lightBackground.onHover.borderColor:'var(--portal-dark-color)') )
+      + `  !important;
 }
 
 

src/assets/stakeholders.json

@@ -1,9 +1,11 @@
 {
  "stakeholders":[
   {
+    "id": "1",
     "type": "funder",
-    "name": "European Comission",
-    "id": "EC",
+    "index_id": "EC",
+    "index_name": "European Comission",
+    "index_shortName": "EC",
     "isDefaultProfile": false,
     "isActive": true,
     "isPublic": true,