[Library | Trunk: Add b2note component and enable it on development mode]

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58025 d315682c-612b-4755-9ff5-7f18f6832af3

landingPages/annotation/annotation.component.ts

@@ -0,0 +1,94 @@
+import {Component, Input, OnDestroy, OnInit} from "@angular/core";
+import {AnnotationService} from "./annotation.service";
+import {DomSanitizer} from "@angular/platform-browser";
+import {ResultLandingInfo} from "../../utils/entities/resultLandingInfo";
+
+@Component({
+    selector: 'b2note',
+    template: `
+      <form ngNoForm
+            action="https://b2note.eudat.eu/interface_main.html"
+            method="post"
+            target="b2note_iframe"
+            class="uk-padding-small uk-padding-remove-vertical">
+        <!--URL of the annotated record-->
+        <input
+            type="hidden"
+            name="recordurl_tofeed"
+            [value]="url">
+        <!--PID of the annotated record-->
+        <input
+            type="hidden"
+            name="pid_tofeed"
+            [value]="pid">
+        <!--URL of the record contents for downloading-->
+        <button class="uk-button uk-button-secondary uk-width-1-1"
+                (click)="toggleAnnotation($event)"
+                type="submit"
+                value="Annotate"
+                title="Click to annotate file using B2Note.">
+          Annotate
+        </button>
+      </form>
+      <div [class.uk-hidden@s]="!visible" class="widget-container">
+        <!--Close button, should be bound to hide the widget-->
+        <button type="button" class="close" aria-label="Close" (click)="toggleAnnotation($event)">
+          <span aria-hidden="true">×</span>
+        </button>
+        <!--The glorious iframe with the running app!-->
+        <iframe id="b2note_iframe" name="b2note_iframe" class="b2note-iframe">
+        </iframe>
+      </div>`,
+    styleUrls: ['annotation.css']
+})
+export class AnnotationComponent implements OnInit, OnDestroy {
+
+    @Input()
+    public landingInfo: ResultLandingInfo = null;
+    @Input()
+    public id: string = null;
+    public url: string = null;
+    public pid: string = null;
+    public keywords: string[] = [];
+    public visible: boolean = false;
+
+
+    constructor(private annotationService: AnnotationService,
+                private sanitizer: DomSanitizer) {
+    }
+    
+    ngOnInit(): void {
+        if(typeof window !== "undefined") {
+            let id = this.id;
+            this.url = window.location.href;
+            if (this.landingInfo.deletedByInferenceIds) {
+                id = this.landingInfo.deletedByInferenceIds[0];
+                this.url = this.url.replace(this.id, id);
+            }
+            if (this.landingInfo.identifiers.size > 0) {
+                if (this.landingInfo.identifiers.get('doi')) {
+                    this.pid = this.landingInfo.identifiers.get('doi')[0];
+                } else {
+                    const key: string = this.landingInfo.identifiers.keys().next().value;
+                    if (key) {
+                        this.pid = this.landingInfo.identifiers.get(key)[0];
+                    }
+                }
+            } else {
+                this.pid = id;
+            }
+            console.log(this.pid);
+            console.log(this.url);
+        }
+    }
+    
+    ngOnDestroy(): void {
+    }
+
+    public toggleAnnotation(event) {
+        if(this.visible) {
+            event.preventDefault()
+        }
+        this.visible = !this.visible;
+    }
+}

landingPages/annotation/annotation.css

@@ -0,0 +1,30 @@
+.widget-container {
+    position: absolute;
+    right: 0;
+    z-index: 1050;
+    padding: 19px;
+    margin-bottom: 20px;
+    box-shadow: black 0 0 32px;
+    border: 1px solid #e3e3e3;
+    border-radius: 4px;
+    outline: 0;
+    min-height: 20px;
+    background-color: #f5f5f5;
+}
+
+.close {
+    float: right;
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    font-size: 21px;
+    font-weight: bold;
+    opacity: 0.2;
+}
+
+.b2note-iframe {
+    width: 100%;
+    height: 600px;
+    border: 1px solid #dddddd;
+}

landingPages/annotation/annotation.module.ts

@@ -0,0 +1,8 @@
+import {NgModule} from "@angular/core";
+import {AnnotationComponent} from "./annotation.component";
+
+@NgModule({
+    declarations: [AnnotationComponent],
+    exports: [AnnotationComponent]
+})
+export class AnnotationModule {}

landingPages/annotation/annotation.service.ts

@@ -0,0 +1,19 @@
+import {Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {Observable} from "rxjs";
+
+@Injectable({
+    providedIn: "root"
+})
+export class AnnotationService {
+
+
+    constructor(private http: HttpClient) {
+    }
+
+    getAnnotations(annotation: any): Observable<any> {
+        return this.http.get('https://b2note.eudat.eu/interface_main.html?recordurl_tofeed=' +
+            encodeURIComponent(annotation.get('recordurl_tofeed').value) + '&pid_tofeed='
+            + encodeURIComponent(annotation.get('pid_tofeed').value));
+    }
+}

landingPages/result/resultLanding.component.html

@@ -368,6 +368,7 @@
           </div>
 
           <div class="uk-width-1-3@m uk-width-1-1@s">
+            <b2note *ngIf=" properties.environment === 'development' && resultLandingInfo" [id]="id" [landingInfo]="resultLandingInfo"></b2note>
             <div *ngIf="isRouteAvailable('participate/direct-claim') " class=" uk-padding-small">
               <button class="  uk-button portal-button   uk-width-1-1 ">
                <span class="uk-icon">
@@ -382,7 +383,6 @@
                </span>
                 Link this <span *ngIf="type != 'orp'">{{title.toLowerCase()}}</span><span *ngIf="type == 'orp'">product</span> to...
               </button>
-
               <div class="  uk-text-center uk-margin-expand uk-padding-small    uk-margin-auto  default-dropdown "
                    uk-dropdown="mode:click">
                 <div class="uk-grid    uk-child-width-1-3  uk-width-large ">

landingPages/result/resultLanding.module.ts

@@ -24,14 +24,15 @@ import {ShowAuthorsModule}            from "../../utils/authors/showAuthors.modu
 import {HelperModule}                 from "../../utils/helper/helper.module";
 import {ResultLandingUtilsModule}     from "../landing-utils/resultLandingUtils.module";
 import {AlertModalModule}             from "../../utils/modal/alertModal.module";
+import {AnnotationModule} from "../annotation/annotation.module";
 
 @NgModule({
-  imports: [
+    imports: [
-    CommonModule, FormsModule, LandingModule, SharedModule, RouterModule,
+        CommonModule, FormsModule, LandingModule, SharedModule, RouterModule,
-    CiteThisModule, PagingModule, IFrameModule,
+        CiteThisModule, PagingModule, IFrameModule,
-    MetricsModule, AltMetricsModule, ConfigurationServiceModule, Schema2jsonldModule, SEOServiceModule,
+        MetricsModule, AltMetricsModule, ConfigurationServiceModule, Schema2jsonldModule, SEOServiceModule,
-    DeletedByInferenceModule, ShowAuthorsModule, HelperModule, ResultLandingUtilsModule, AlertModalModule
+        DeletedByInferenceModule, ShowAuthorsModule, HelperModule, ResultLandingUtilsModule, AlertModalModule, AnnotationModule
-  ],
+    ],
   declarations: [
     ResultLandingComponent
   ],