[Usage-Counts | Trunk]: Fix search bug on alalytics. Change loading

src/app/about/about.component.ts

@@ -1,10 +1,10 @@
-import {Component, HostListener, OnInit} from '@angular/core';
+import {Component, HostListener, OnDestroy, OnInit} from '@angular/core';
 import {faqs} from './faqs';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Meta, Title} from '@angular/platform-browser';
 import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
 import {properties} from '../../environments/environment';
-import {Subscription} from 'rxjs';
+import {Subscriber, Subscription} from 'rxjs';
 import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
 import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
 
@@ -13,7 +13,7 @@ import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
   templateUrl: 'about.component.html',
   styleUrls: ['about.component.css'],
 })
-export class AboutComponent implements OnInit {
+export class AboutComponent implements OnInit, OnDestroy {
   faqs: any[] = faqs;
   properties: EnvProperties = properties;
   description = "UsageCounts service is an OpenAIRE service built to cover the needs of content providers and consumers and offer added value to assist them in reaching their goals. UsageCounts forms metrics of usage activity of Open Access Repositories categorizing the data retrieved by country, number of downloads, number of views, number of repositories and all derivative quantitative open metrics, comprehensively. Architecture. ";
@@ -58,6 +58,14 @@ export class AboutComponent implements OnInit {
     }));
   }
   
+  public ngOnDestroy() {
+    this.subs.forEach(subscription => {
+      if (subscription instanceof Subscriber) {
+        subscription.unsubscribe();
+      }
+    });
+  }
+  
   goTo(id: string) {
     const yOffset = -100;
     const element = document.getElementById(id);
@@ -66,9 +74,4 @@ export class AboutComponent implements OnInit {
       window.scrollTo({top: y, behavior: 'smooth'});
     }
   }
-  public ngOnDestroy() {
-    for (let sub of this.subs) {
-      sub.unsubscribe();
-    }
-  }
 }

src/app/analytics/analytics.component.html

@@ -58,8 +58,8 @@
             <div class="uk-text-muted uk-text-uppercase uk-text-small">Results</div>
           </div>
           <div class="uk-width-2-3 uk-margin-large-bottom uk-margin-auto-left uk-margin-auto-right">
-            <div *ngIf="loading" class="uk-animation-fade uk-margin-medium-top  uk-width-1-1" role="alert">
+            <div *ngIf="loading" class="uk-padding-large  uk-width-1-1">
-              <span class="loading-gif  uk-align-center"></span>
+              <loading></loading>
             </div>
             <div *ngIf="display && !loading" class="uk-grid uk-child-width-1-3@m uk-child-width-1-2@s"
                  uk-grid>
@@ -166,8 +166,8 @@
                 </li>
               </ul>
             </div>
-            <div *ngIf="iframeLoading" class="uk-animation-fade uk-margin-medium-top uk-width-1-1" role="alert">
+            <div *ngIf="iframeLoading" class="uk-padding-large uk-width-1-1" role="alert">
-              <span class="loading-gif  uk-align-center"></span>
+              <loading></loading>
             </div>
             <iframe (load)="onLoad()" class="uk-animation-fade" width="742" height="453" seamless frameborder="0"
                     scrolling="no" [class.uk-hidden]="iframeLoading"

src/app/analytics/analytics.component.ts

@@ -1,7 +1,7 @@
-import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {CountryUsageStat, UsageStat} from '../entities/usage-stat';
 import {FormControl, FormGroup} from '@angular/forms';
-import {Observable, Subscription} from 'rxjs';
+import {Observable, Subscriber, Subscription} from 'rxjs';
 import {UsageStatsService} from '../services/usage-stats.service';
 import {map, startWith} from 'rxjs/operators';
 import {countries} from '../services/countries';
@@ -19,7 +19,7 @@ import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
   templateUrl: 'analytics.component.html',
   styleUrls: ['analytics.component.css'],
 })
-export class AnalyticsComponent implements OnInit {
+export class AnalyticsComponent implements OnInit, OnDestroy {
   public countryFb: FormGroup;
   public countries: Observable<string[]>;
   public country: string;
@@ -36,6 +36,8 @@ export class AnalyticsComponent implements OnInit {
   description = "Track Countries Usage Activity. Worldwide Monthly Usage Events, Monthly Views & Downloads.";
   title = "OpenAIRE - UsageCounts | Analytics";
   subs: Subscription[] = [];
+  searchSub: Subscription = null;
+  
   constructor(private usageStatsService: UsageStatsService,
               private route: ActivatedRoute,
               private router: Router,
@@ -72,6 +74,15 @@ export class AnalyticsComponent implements OnInit {
     }
   }
   
+  public ngOnDestroy() {
+    this.subs.forEach(subscription => {
+      if (subscription instanceof Subscriber) {
+        subscription.unsubscribe();
+      }
+    });
+    this.clearTimeouts();
+  }
+  
   private init() {
     this.countryFb = new FormGroup({
       country: new FormControl(null)
@@ -119,7 +130,7 @@ export class AnalyticsComponent implements OnInit {
     this.clearTimeouts();
     if (this.country && this.country.length > 0) {
       this.country = StringUtils.capitalize(this.country);
-      this.usageStatsService.getCountryMetrics(this.country).subscribe(stats => {
+      this.searchSub = this.usageStatsService.getCountryMetrics(this.country).subscribe(stats => {
         this.display = this.roundCountryUsageStat(stats);
         this.loading = false;
         if (this.display) {
@@ -177,6 +188,9 @@ export class AnalyticsComponent implements OnInit {
       clearTimeout(timeout);
     });
     this.state = 0;
+    if(this.searchSub instanceof Subscription) {
+      this.searchSub.unsubscribe();
+    }
   }
   
   reset() {
@@ -203,9 +217,4 @@ export class AnalyticsComponent implements OnInit {
   public getSafeUrl(url: string): SafeUrl {
     return this.sanitizer.bypassSecurityTrustResourceUrl(url);
   }
-  public ngOnDestroy() {
-    for (let sub of this.subs) {
-      sub.unsubscribe();
-    }
-  }
 }

src/app/analytics/analytics.module.ts

@@ -11,6 +11,7 @@ import {Schema2jsonldModule} from '../openaireLibrary/sharedComponents/schema2js
 import {IconsModule} from '../openaireLibrary/utils/icons/icons.module';
 import {IconsService} from '../openaireLibrary/utils/icons/icons.service';
 import {arrow_down, arrow_right} from '../openaireLibrary/utils/icons/icons';
+import {LoadingModule} from '../openaireLibrary/utils/loading/loading.module';
 
 @NgModule({
   imports: [
@@ -23,7 +24,8 @@ import {arrow_down, arrow_right} from '../openaireLibrary/utils/icons/icons';
       path: '', component: AnalyticsComponent
     }]),
     Schema2jsonldModule,
-    IconsModule
+    IconsModule,
+    LoadingModule
   ],
   declarations: [AnalyticsComponent],
   exports: [AnalyticsComponent]

src/app/contact/contact.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {Router} from '@angular/router';
 import {EmailService} from '../openaireLibrary/utils/email/email.service';
 import {Email} from '../openaireLibrary/utils/email/email';
@@ -8,7 +8,7 @@ import {Meta, Title} from '@angular/platform-browser';
 import {HelperFunctions} from '../openaireLibrary/utils/HelperFunctions.class';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {properties} from '../../environments/environment';
-import {Subscription} from 'rxjs';
+import {Subscriber, Subscription} from 'rxjs';
 import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
 import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
 
@@ -18,7 +18,7 @@ import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
   styleUrls: ['contact.component.css']
 })
 
-export class ContactComponent implements OnInit {
+export class ContactComponent implements OnInit, OnDestroy {
   public showLoading = true;
   public errorMessage = '';
   public email: Email;
@@ -27,9 +27,10 @@ export class ContactComponent implements OnInit {
   public contactForm: FormGroup;
   @ViewChild('AlertModal') modal;
   @ViewChild('recaptcha') recaptcha;
-  description = "Any questions? Contact us ";
+  description = 'Any questions? Contact us ';
-  title = "OpenAIRE - UsageCounts |  Contact Us";
+  title = 'OpenAIRE - UsageCounts |  Contact Us';
   subs: Subscription[] = [];
+  
   constructor(private router: Router,
               private emailService: EmailService,
               private _title: Title, private _piwikService: PiwikService,
@@ -39,24 +40,29 @@ export class ContactComponent implements OnInit {
   
   ngOnInit() {
     this._title.setTitle(this.title);
-    this._meta.updateTag({content: this.description}, "name='description'");
+    this._meta.updateTag({content: this.description}, 'name=\'description\'');
-    this._meta.updateTag({content: this.description}, "property='og:description'");
+    this._meta.updateTag({content: this.description}, 'property=\'og:description\'');
-    this._meta.updateTag({content: this.title}, "property='og:title'");
+    this._meta.updateTag({content: this.title}, 'property=\'og:title\'');
     this._title.setTitle(this.title);
     let url = this.properties.domain + this.properties.baseLink + this.router.url;
     this.seoService.createLinkForCanonicalURL(url, false);
-    this._meta.updateTag({content: url}, "property='og:url'");
+    this._meta.updateTag({content: url}, 'property=\'og:url\'');
     if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
       this.subs.push(this._piwikService.trackView(this.properties, this.title).subscribe());
-    }    this.email = {body: '', subject: '', recipients: []};
+    }
+    this.email = {body: '', subject: '', recipients: []};
     this.reset();
     this.showLoading = false;
   }
+  
   public ngOnDestroy() {
-    for (let sub of this.subs) {
+    this.subs.forEach(subscription => {
-      sub.unsubscribe();
+      if (subscription instanceof Subscriber) {
-    }
+        subscription.unsubscribe();
+      }
+    });
   }
+  
   public send(event) {
     HelperFunctions.scroll();
     if (event.valid === true) {

src/app/home/home.component.ts

@@ -1,9 +1,9 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Meta, Title} from '@angular/platform-browser';
 import {FullPageSliderComponent} from '../openaireLibrary/utils/full-page-slider/full-page-slider.component';
 import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
-import {Subscription} from 'rxjs';
+import {Subscriber, Subscription} from 'rxjs';
 import {properties} from '../../environments/environment';
 import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
 import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
@@ -13,56 +13,60 @@ import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
   templateUrl: 'home.component.html',
   styleUrls: ['home.component.css'],
 })
-export class HomeComponent implements OnInit{
+export class HomeComponent implements OnInit, OnDestroy {
   
   public initSlide: number = 1;
   public fragments: string[] = ['', 'why', 'who', 'features'];
-  @ViewChild("slider")
+  @ViewChild('slider')
   public slider: FullPageSliderComponent;
   properties: EnvProperties = properties;
-
+  
   subs: Subscription[] = [];
+  
   constructor(private route: ActivatedRoute,
               private router: Router,
               private _title: Title, private _piwikService: PiwikService,
               private _meta: Meta, private seoService: SEOService
-  ) {}
+  ) {
+  }
   
-  ngOnInit()
+  ngOnInit() {
-  {
+    let description = 'UsageCounts service collects usage data from Open Science content providers repositories, journals, and other scientific data sources. Then, it aggregates them, delivering standardized activity reports about research usage and uptake. It complements existing citation mechanisms and assists institutional repository managers, research communities, research organizations, funders, and policy makers to track and evaluate research from an early stage.';
-    let description = "UsageCounts service collects usage data from Open Science content providers repositories, journals, and other scientific data sources. Then, it aggregates them, delivering standardized activity reports about research usage and uptake. It complements existing citation mechanisms and assists institutional repository managers, research communities, research organizations, funders, and policy makers to track and evaluate research from an early stage.";
+    let title = 'OpenAIRE - UsageCounts';
-    let title = "OpenAIRE - UsageCounts";
     this._title.setTitle(title);
-    this._meta.updateTag({content: description}, "name='description'");
+    this._meta.updateTag({content: description}, 'name=\'description\'');
-    this._meta.updateTag({content: description}, "property='og:description'");
+    this._meta.updateTag({content: description}, 'property=\'og:description\'');
-    this._meta.updateTag({content: title}, "property='og:title'");
+    this._meta.updateTag({content: title}, 'property=\'og:title\'');
     this._title.setTitle(title);
     let url = this.properties.domain + this.properties.baseLink + this.router.url;
     this.seoService.createLinkForCanonicalURL(url, false);
-    this._meta.updateTag({content: url}, "property='og:url'");
+    this._meta.updateTag({content: url}, 'property=\'og:url\'');
     if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
       this.subs.push(this._piwikService.trackView(this.properties, title).subscribe());
     }
     this.subs.push(this.route.fragment.subscribe(name => {
-      if(name) {
+      if (name) {
         let slide = this.fragments.findIndex(fragment => fragment === name) + 1;
-        if(slide > 0) {
+        if (slide > 0) {
           this.initSlide = slide;
         }
       }
     }));
     this.subs.push(this.slider.stateAsObservable.subscribe(state => {
-      if(state == 1) {
+      if (state == 1) {
         this.router.navigate(['/']);
       } else {
         this.router.navigate(['/'], {fragment: this.fragments[state - 1]});
       }
     }));
   }
+  
   public ngOnDestroy() {
-    for (let sub of this.subs) {
+    this.subs.forEach(subscription => {
-      sub.unsubscribe();
+      if (subscription instanceof Subscriber) {
-    }
+        subscription.unsubscribe();
+      }
+    });
   }
-
+  
 }

src/app/resources/resources.component.ts

@@ -1,9 +1,9 @@
-import {Component, HostListener, OnInit} from '@angular/core';
+import {Component, HostListener, OnDestroy, OnInit} from '@angular/core';
 import {Meta, Title} from '@angular/platform-browser';
 import {ActivatedRoute, Router} from '@angular/router';
 import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
 import {properties} from '../../environments/environment';
-import {Subscription} from 'rxjs';
+import {Subscriber, Subscription} from 'rxjs';
 import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
 import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
 
@@ -12,7 +12,7 @@ import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
   templateUrl: 'resources.component.html',
   styleUrls: ['resources.component.css'],
 })
-export class ResourcesComponent implements OnInit {
+export class ResourcesComponent implements OnInit, OnDestroy {
   properties: EnvProperties = properties;
   description = "OpenAIRE Provide. The resources of the OpenAIRE UsageCounts Service are available through the OpenAIRE PROVIDE product, which is serving the content providers. APIs and Reports.";
   title = "OpenAIRE - UsageCounts | Resources";
@@ -56,6 +56,14 @@ export class ResourcesComponent implements OnInit {
     }));
   }
   
+  public ngOnDestroy() {
+    this.subs.forEach(subscription => {
+      if (subscription instanceof Subscriber) {
+        subscription.unsubscribe();
+      }
+    });
+  }
+  
   goTo(id: string) {
     const yOffset = -100;
     const element = document.getElementById(id);
@@ -64,9 +72,4 @@ export class ResourcesComponent implements OnInit {
       window.scrollTo({top: y, behavior: 'smooth'});
     }
   }
-  public ngOnDestroy() {
-    for (let sub of this.subs) {
-      sub.unsubscribe();
-    }
-  }
 }

src/app/sushilite/sushilite.component.ts

@@ -8,8 +8,8 @@ import {properties} from '../../environments/environment';
   templateUrl: 'sushilite.component.html',
   styleUrls: ['sushilite.component.css'],
 })
-export class SushiliteComponent implements OnInit{
+export class SushiliteComponent implements OnInit {
-
+  
   public url: string;
   public reportTitle: string;
   public screenHeight: number;