From 3756f8df83aaa0c063d45b7f1c51798acac67961 Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Fri, 5 Aug 2022 11:34:37 +0300
Subject: [PATCH] create indicator themes page (TODO: menu entry, breadcrumbs
 and dynamic text links)

---
 .../indicators/indicator-themes.component.ts  | 59 +++++++++++++++++++
 monitor/indicators/indicator-themes.module.ts | 18 ++++++
 2 files changed, 77 insertions(+)
 create mode 100644 monitor/indicators/indicator-themes.component.ts
 create mode 100644 monitor/indicators/indicator-themes.module.ts

diff --git a/monitor/indicators/indicator-themes.component.ts b/monitor/indicators/indicator-themes.component.ts
new file mode 100644
index 00000000..8ea4351e
--- /dev/null
+++ b/monitor/indicators/indicator-themes.component.ts
@@ -0,0 +1,59 @@
+import {Component, OnInit} from "@angular/core";
+import {properties} from "../../../../environments/environment";
+import {Router} from "@angular/router";
+import {Meta, Title} from "@angular/platform-browser";
+import {SEOService} from "../../sharedComponents/SEO/SEO.service";
+
+@Component({
+  selector: 'indicator-themes-page',
+  template: `
+		<div class="uk-section">
+			<div class="uk-container uk-container-large">
+				<h1>Indicator Themes<span class="uk-text-primary">.</span></h1>
+			</div>
+			<div class="uk-section uk-container uk-container-large">
+				<div class="uk-grid uk-grid-large uk-flex-middle" uk-grid>
+					<div class="uk-width-3-5@m">
+					<img src="assets/common-assets/monitor-assets/indicator-themes-circle.png">
+					</div>
+					<div class="uk-width-2-5@m">
+						<div class="uk-width-4-5@m">
+							<h5>Indicator themes that we are covering in the Monitor dashboards.</h5>
+							<div class="uk-margin-bottom">
+								Please be aware that this is the current set, which will be enriched as requests and data are coming into the <a href="">OpenAIRE Research Graph</a>. We are in your disposal to add more indicator themes that may fit your needs.
+							</div>
+							<div>
+								Check out the indicator pages (for funders, institutions and research initiatives put hyperlinks for each) for the specific indicators for each type of dashboard, and the  <a href="">methodology and terminology</a> page ( hyperlink to terminology) on how we produce the metrics.
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+  `
+})
+export class IndicatorThemesComponent implements OnInit {
+  public properties = properties;
+  
+  constructor(private router: Router,
+              private meta: Meta,
+              private title: Title,
+              private seoService: SEOService) {
+  }
+  
+  ngOnInit() {
+    const description = "Monitor | Indicator Themes";
+		const title = "Monitor | Indicator Themes";
+		this.metaTags(title, description);
+  }
+  
+  metaTags(title, description) {
+    const url = properties.domain + properties.baseLink + this.router.url;
+    this.seoService.createLinkForCanonicalURL(url, false);
+    this.meta.updateTag({content: url}, "property='og:url'");
+    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);
+  }
+}
diff --git a/monitor/indicators/indicator-themes.module.ts b/monitor/indicators/indicator-themes.module.ts
new file mode 100644
index 00000000..bd84ac99
--- /dev/null
+++ b/monitor/indicators/indicator-themes.module.ts
@@ -0,0 +1,18 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {RouterModule} from "@angular/router";
+import {IndicatorThemesComponent} from "./indicator-themes.component";
+import {PreviousRouteRecorder} from "../../utils/piwik/previousRouteRecorder.guard";
+
+@NgModule({
+  imports: [CommonModule, RouterModule.forChild([
+    {
+      path: '',
+      component: IndicatorThemesComponent,
+      canDeactivate: [PreviousRouteRecorder]
+    },
+  ])],
+  declarations: [IndicatorThemesComponent],
+  exports: [IndicatorThemesComponent]
+})
+export class IndicatorThemesModule {}