/ - Diff - D-Net - D-Net project tracking tool

       color: var(--portal-dark-color);
+    }
     .countries input, .countries input:focus {
       background: transparent 0 0 no-repeat padding-box;
       border-radius: 4px;
       padding: 15px;
       border: none;
       outline: none;
+    }
     .countries input::placeholder {
       color: #a3a3a3;
       font-weight: 600;
+    }
     @media only screen and (max-width: 980px) {
       .countries input {
         font-size: 14px;
+      }
       .countries .search-mobile {
         padding-bottom: 5px;
         border-bottom: 2px solid var(--portal-main-color);
+      }
+    }
     button.search, button.search:hover {
       color: #333333;
       font-weight: 700;
       border: none;
       outline: none;
       background-color: transparent;
       font-family: "Roboto", sans-serif;
       font-size: 16px;
+    }
     button.search:hover {
       color: var(--portal-main-color);
+    }
     .card {
       background: #FFFFFF 0 0 no-repeat padding-box;
       box-shadow: 0 3px 6px #00000029;

     import {NgModule} from "@angular/core";
     import {CommonModule} from "@angular/common";
     import {RouterModule} from "@angular/router";
     import {NgModule} from '@angular/core';
     import {CommonModule} from '@angular/common';
     import {RouterModule} from '@angular/router';
     import {AnalyticsComponent} from "./analytics.component";
     import {AnalyticsComponent} from './analytics.component';
     import {MatAutocompleteModule} from '@angular/material/autocomplete';
     import {ReactiveFormsModule} from '@angular/forms';
     import {MatFormFieldModule} from '@angular/material/form-field';
-...
     import {Schema2jsonldModule} from '../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module';
     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 {arrow_down} from '../openaireLibrary/utils/icons/icons';
     import {LoadingModule} from '../openaireLibrary/utils/loading/loading.module';
     import {SearchInputModule} from '../openaireLibrary/sharedComponents/search-input/search-input.module';
     @NgModule({
       imports: [
         CommonModule,
         MatAutocompleteModule,
         ReactiveFormsModule,
         MatFormFieldModule,
         MatInputModule,
         RouterModule.forChild([{
           path: '', component: AnalyticsComponent
         }]),
         Schema2jsonldModule,
         IconsModule,
         LoadingModule
         LoadingModule,
         SearchInputModule
       ],
       declarations: [AnalyticsComponent],
       exports: [AnalyticsComponent]

           <div class="uk-padding-small uk-padding-remove-vertical">
             <h2 class="uk-margin-medium-bottom portal-color uk-text-bold">Track Countries Usage Activity</h2>
             <div class="uk-container uk-text-bold">
               <div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-medium-bottom search-mobile">
                 <div class="uk-width-3-5">
                   <form [formGroup]="countryFb" (ngSubmit)="search()">
                     <input #input type="text" class="uk-width-1-1"
                            [class.uk-animation-slide-right-medium]="showSearch && !countryFb.get('country').value"
                            [class.uk-hidden@m]="!showSearch"
                            [class.uk-hidden]="country"
                            placeholder="SEARCH FOR A COUNTRY"
                            (blur)="closeSearch()"
                            aria-label="Number"
                            formControlName="country"
                            [matAutocomplete]="auto">
                     <mat-autocomplete #auto="matAutocomplete" (optionSelected)="search()">
                       <mat-option *ngFor="let option of countries | async" [value]="option">
                         {{option}}
                       </mat-option>
                     </mat-autocomplete>
                   </form>
                   <div *ngIf="country && !showSearch" class="uk-flex uk-flex-left">
                     <span class="uk-flex uk-flex-middle">
                       <span>{{country}}</span>
                       <span class="uk-icon clickable space" uk-icon="icon: close; ratio: 0.8" (click)="reset()">
                         <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="close"><path
                             fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path>
                           <path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path>
                         </svg>
                       </span>
                     </span>
                   </div>
               <div class="uk-width-4-5@m uk-align-center">
                 <div search-input #searchInput [control]="countryFb" [showSearch]="showSearch"
                      placeholder="SEARCH FOR A COUNTRY"
                      [selected]="country" [loading]="loading" [list]="countries" (searchEmitter)="search($event)" (resetEmitter)="reset()">
                 </div>
                 <button [disabled]="loading" class="search uk-margin-medium-left uk-visible@m"
                         (mousedown)="$event.preventDefault()" (click)="toggle()">
                   <img src="assets/usage-statistics-assets/analytics/search.svg">
                   <span class="uk-text-uppercase space">search</span>
                 </button>
                 <button [disabled]="loading" class="search uk-hidden@m"
                         (mousedown)="$event.preventDefault()" (click)="search(false)">
                   <img src="assets/usage-statistics-assets/analytics/search.svg">
                   <span class="uk-text-uppercase space">search</span>
                 </button>
               </div>
               <div class="uk-margin-medium-bottom">
                 <div class="uk-text-uppercase">{{(country) ? country : 'worldwide'}}</div>

     import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
     import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
     import {CountryUsageStat, UsageStat} from '../entities/usage-stat';
     import {FormControl, FormGroup} from '@angular/forms';
     import {FormControl} from '@angular/forms';
     import {Observable, Subscriber, Subscription} from 'rxjs';
     import {UsageStatsService} from '../services/usage-stats.service';
     import {map, startWith} from 'rxjs/operators';
-...
     import {properties} from '../../environments/environment';
     import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
     import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
     import {SearchInputComponent} from '../openaireLibrary/sharedComponents/search-input/search-input.component';
     @Component({
       selector: 'analytics',
-...
       styleUrls: ['analytics.component.css'],
     })
     export class AnalyticsComponent implements OnInit, OnDestroy {
       public countryFb: FormGroup;
       public countryFb: FormControl;
       public countries: Observable<string[]>;
       public country: string;
       public loading: boolean = true;
-...
       private timeouts: any[] = [];
       public years = 0;
       public charts: SafeUrl[];
       @ViewChild('input') input: ElementRef;
       properties: EnvProperties = properties;
       description = "Track Countries Usage Activity. Worldwide Monthly Usage Events, Monthly Views & Downloads.";
       title = "OpenAIRE - UsageCounts | Analytics";
       subs: Subscription[] = [];
       searchSub: Subscription = null;
       @ViewChild('searchInput') searchInput: SearchInputComponent;
       constructor(private usageStatsService: UsageStatsService,
                   private route: ActivatedRoute,
-...
+      }
       private init() {
         this.countryFb = new FormGroup({
           country: new FormControl(null)
         });
         this.countries = this.countryFb.get('country').valueChanges
         this.countryFb = new FormControl(null);
         this.countries = this.countryFb.valueChanges
           .pipe(
             startWith(''),
             map(value => this._filter(value))
-...
+      }
       public search(show: boolean = false) {
         this.country = this.countryFb.value.country;
         this.country = this.countryFb.value;
         this.showSearch = show;
         this.loading = true;
         this.clearTimeouts();
-...
         return countries.map(value => value.name).filter(option => filterValue && option.toLowerCase().includes(filterValue));
+      }
       toggle() {
         this.showSearch = !this.showSearch;
         if (this.showSearch) {
           setTimeout(() => { // this will make the execution after the above boolean has changed
             this.input.nativeElement.focus();
           }, 0);
+        }
+      }
       closeSearch() {
         this.showSearch = false;
+      }
       clearTimeouts() {
         this.timeouts.forEach(timeout => {
           clearTimeout(timeout);
-...
         this.clearTimeouts();
         if (this.state == 0) {
           this.init();
           this.showSearch = true;
           setTimeout(() => { // this will make the execution after the above boolean has changed
             this.input.nativeElement.focus();
           }, 0);
           this.search();
           this.searchInput.reset();
           this.search(true);
+        }
+      }

Project

General

Profile

D-Net

Revision 60209

Added by Konstantinos Triantafyllou over 3 years ago