openaire-library/landingPages/dataProvider/dataProvider.component.html

<div id="tm-main" class=" uk-section  uk-margin-small-top tm-middle"   >
  <div uk-grid uk-grid>
   <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">

<div class="uk-container uk-margin-top datasource">
    <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning  uk-margin-large-top" role="alert">{{warningMessage}}</div>
    <div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger  uk-margin-large-top" role="alert">{{errorMessage}}</div>
    <div [style.display]="showLoading ? 'inline' : 'none'" class="uk-animation-fade uk-margin-large-top  uk-width-1-1" role="alert"><img src="./assets/loading.gif" class="uk-align-center" alt="Loading"></div>

    <div *ngIf="dataProviderInfo != null" uk-grid class="uk-grid-large">

        <div class="uk-width-3-4@l uk-width-3-4@xl uk-width-3-4@m uk-width-1-1@s">
            <!--h3 *ngIf="dataProviderInfo.title != null">
                <a *ngIf="dataProviderInfo.title['url'] != undefined && dataProviderInfo.title['url'] != null"
                    href="{{dataProviderInfo.title['url']}}" target="_blank" class="custom-external">
                    {{dataProviderInfo.title['name']}}
                </a>
                <p *ngIf="dataProviderInfo.title['url'] == undefined || dataProviderInfo.title['url'] == null">
                    {{dataProviderInfo.title['name']}}
                </p>
            </h3-->
            <showTitle   [title]="dataProviderInfo.title"></showTitle>
            <div class="uk-text-large " *ngIf="dataProviderInfo.officialName && this.dataProviderInfo.title.name != dataProviderInfo.officialName ">{{dataProviderInfo.officialName}}</div>

            <span *ngIf="dataProviderInfo.type" class="uk-label custom-label label-type label-dataprovider " title="Type">{{dataProviderInfo.type}}</span>
            <span *ngIf="dataProviderInfo.compatibility" class="uk-label custom-label label-compatibility " title="Compatibility">{{dataProviderInfo.compatibility}}</span>

            <ul class="uk-list">
                <li *ngIf="dataProviderInfo.aggregationStatus && dataProviderInfo.aggregationStatus.fundedContent != -1"><span class="uk-text-bold">Number of results with funding information: </span>
                    {{dataProviderInfo.aggregationStatus.fundedContent | number}}
                </li>
                <li *ngIf="dataProviderInfo.aggregationStatus && dataProviderInfo.aggregationStatus.indexRecords != -1"><span class="uk-text-bold">Number of collected full-texts: </span>
                    {{dataProviderInfo.aggregationStatus.indexRecords | number}}
                </li>
                <li *ngIf="dataProviderInfo.oaiPmhURL"><span class="uk-text-bold">OAI-PMH: </span>
                        <span class="uk-button-text">
                            <a target="_blank" href="{{dataProviderInfo.oaiPmhURL}}">
                                {{dataProviderInfo.oaiPmhURL}}
                            </a>
                        </span>

                </li>
                <li *ngIf="dataProviderInfo.openDoarURL">
                        <span class="uk-button-text">
                            <a target="_blank" href="{{dataProviderInfo.openDoarURL}}">
                                Detailed content provider information (OpenDOAR)
                            </a>
                        </span>

                </li>
                <li *ngIf="dataProviderInfo.r3DataURL">
                        <span class="uk-button-text">
                            <a target="_blank" href="{{dataProviderInfo.r3DataURL}}">
                                Detailed content provider information (Re3data)
                            </a>
                        </span>

                </li>

                <li *ngIf="dataProviderInfo.countries != undefined && dataProviderInfo.countries.length > 0"><span class="uk-text-bold">Countries: </span>{{dataProviderInfo.countries.join(", ")}}</li>
            </ul>

            <!--tabs [id] = "datasourceId"
                  [name] = "dataProviderInfo.title['name']"
                  [resultsBy] = "dataProviderInfo.resultsBy"
                  [tabs]="dataProviderInfo.tabs"
                  [statistics]="dataProviderInfo.statistics"
                  [organizations]="dataProviderInfo.organizations"
                  [_dataproviderService]="_dataproviderService">
            </tabs-->
            <div *ngIf="showTabs">
                <ul *ngIf="dataProviderInfo.tabs != undefined" class="uk-tab uk-visible@xl" uk-tab="connect: #tab-content">
                    <li *ngFor="let tab of dataProviderInfo.tabs; let i=index" id="{{dataProviderInfo.tabs[i].content}}"
                        [class]="activeTab==tab.name?'uk-active':''">
                        <a
                            (click)="search(tab.content, 1, 10); activeTab=tab.name">
                                {{tab.name}}

                                <span class="uk-badge uk-badge-notification" *ngIf="tab.content=='publicationsTab'">
                                    {{fetchPublications.searchUtils.totalResults}}
                                </span>
                                <span class="uk-badge uk-badge-notification" *ngIf="tab.content=='datasetsTab'">
                                    {{fetchDatasets.searchUtils.totalResults}}
                                </span>
                                <span class="uk-badge uk-badge-notification" *ngIf="tab.content=='softwareTab'">
                                    {{fetchSoftware.searchUtils.totalResults}}
                                </span>
                                <span class="uk-badge uk-badge-notification" *ngIf="tab.content=='projectsTab'">
                                    {{fetchProjects.searchUtils.totalResults}}
                                </span>
                                <span class="uk-badge uk-badge-notification" *ngIf="tab.content=='datasourcesTab'">
                                    {{fetchDataproviders.searchUtils.totalResults}}
                                </span>
                                <span class="uk-badge uk-badge-notification" *ngIf="tab.content=='organizationsTab'">
                                    {{dataProviderInfo.organizations.length}}
                                </span>
                        </a>
                    </li>
                </ul>

                <button class="uk-button uk-button-default uk-hidden@xl" type="button">
                  <span uk-navbar-toggle-icon></span> <span class="uk-margin-small-left">{{activeTab}}</span>
                </button>

                <ul *ngIf="dataProviderInfo.tabs != undefined" id="toggle-small-tabs" class="uk-subnav uk-subnav-pill uk-dropdown uk-hidden@xl" uk-switcher="connect: #tab-content" uk-dropdown="mode: click" uk-toggle="target: #toggle-small-tabs">
                    <li *ngFor="let tab of dataProviderInfo.tabs; let i=index" id="{{dataProviderInfo.tabs[i].content}}"
                        [class]="activeTab==tab.name?'uk-active':''">
                        <a
                            (click)="search(tab.content, 1, 10); activeTab=tab.name">
                                {{tab.name}}

                                <span class="uk-badge uk-badge-notification" *ngIf="tab.content=='publicationsTab'">
                                    {{fetchPublications.searchUtils.totalResults}}
                                </span>
                                <span class="uk-badge uk-badge-notification" *ngIf="tab.content=='datasetsTab'">
                                    {{fetchDatasets.searchUtils.totalResults}}
                                </span>
                                <span class="uk-badge uk-badge-notification" *ngIf="tab.content=='softwareTab'">
                                    {{fetchSoftware.searchUtils.totalResults}}
                                </span>
                                <span class="uk-badge uk-badge-notification" *ngIf="tab.content=='projectsTab'">
                                    {{fetchProjects.searchUtils.totalResults}}
                                </span>
                                <span class="uk-badge uk-badge-notification" *ngIf="tab.content=='datasourcesTab'">
                                    {{fetchDataproviders.searchUtils.totalResults}}
                                </span>
                                <span class="uk-badge uk-badge-notification" *ngIf="tab.content=='organizationsTab'">
                                    {{dataProviderInfo.organizations.length}}
                                </span>
                        </a>
                    </li>
                </ul>

                <!--ul *ngIf="dataProviderInfo.tabs != undefined" id="tab-content" class="uk-switcher uk-margin custom-tab-content"-->
                <div *ngIf="dataProviderInfo.tabs != undefined" class="uk-margin custom-tab-content">

                    <!--div class="uk-animation-fade" *ngFor="let tab of dataProviderInfo.tabs; let i=index"-->
                    <div class="uk-animation-fade">
                        <!--*ngIf="tab.content=='publicationsTab'"-->
                        <publicationsTab *ngIf="activeTab=='Publications'"
                                         [paramsForSearchLink]="paramsForSearchLink"
                                         [fetchPublications] = "fetchPublications" [(properties)]=properties>
                        </publicationsTab>
                        <!--*ngIf="tab.content=='datasetsTab'"-->
                        <datasetsTab *ngIf="activeTab=='Research Data'"
                                     [paramsForSearchLink]="paramsForSearchLink"
                                     [fetchDatasets]="fetchDatasets" [(properties)]=properties>
                        </datasetsTab>
                        <softwareTab *ngIf="activeTab=='Software'"
                                     [paramsForSearchLink]="paramsForSearchLink"
                                     [fetchSoftware]="fetchSoftware" [(properties)]=properties>
                        </softwareTab>
                        <!--*ngIf="  tab.content=='projectsTab'"-->
                        <projectsTab *ngIf="activeTab=='Projects'"
                                     [paramsForSearchLink]="paramsForSearchLink"
                                     [fetchProjects]="fetchProjects" [(properties)]=properties>
                        </projectsTab>
                        <!--*ngIf="  tab.content=='datasourcesTab'"-->
                        <datasourcesTab *ngIf="activeTab=='Datasources'"
                                        [paramsForSearchLink]="paramsForSearchLink"
                                        [fetchDataproviders]="fetchDataproviders" [(properties)]=properties>
                        </datasourcesTab>
                        <!--*ngIf="  tab.content=='organizationsTab'"-->
                        <organizationsTab *ngIf="activeTab=='Organizations'"
                                          [organizations]="dataProviderInfo.organizations">
                        </organizationsTab>
                        <!--*ngIf="  tab.content=='relatedDatasourcesTab'"-->
                        <relatedDatasourcesTab *ngIf="activeTab=='Related Content Providers'"
                            [dataproviderId]="datasourceId"
                            [results]="dataProviderInfo.relatedDatasources"
                            [loading]="loadingRelatedDatasources"
                            [fetchPublications]="fetchAggregatorsPublications"
                            [fetchDatasets]="fetchAggregatorsDatasets"  [(properties)]=properties>
                            <!--[type]="relatedDataprovidersResultsType"-->
                        </relatedDatasourcesTab>

                        <!-- *ngIf="  tab.content=='statisticsTab' && statsClicked"-->
                        <div *ngIf="activeTab=='Statistics' && statsClicked">
                          <!--div *ngIf="fetchPublications.searchUtils.totalResults == 0 && fetchDatasets.searchUtils.totalResults == 0" class = "uk-alert  uk-alert-primary">
                              No statistics available
                          </div-->
                          <!--div *ngIf="fetchPublications.searchUtils.status == errorCodes.NONE && fetchDatasets.searchUtils.status == errorCodes.NONE"
                                class="uk-alert uk-alert-primary uk-animation-fade" role="alert">No statistics available</div>
                          <div *ngIf="fetchPublications.searchUtils.status == errorCodes.ERROR || fetchDatasets.searchUtils.status == errorCodes.ERROR"
                                class="uk-alert uk-alert-warning uk-animation-fade" role="alert">An Error Occured</div>
                          <div *ngIf="fetchPublications.searchUtils.status == errorCodes.NOT_AVAILABLE || fetchDatasets.searchUtils.status == errorCodes.NOT_AVAILABLE"
                                class="uk-alert uk-alert-danger uk-animation-fade" role="alert">Service not available</div>
                          <div *ngIf="fetchPublications.searchUtils.status == errorCodes.LOADING || fetchDatasets.searchUtils.status == errorCodes.LOADING"
                                class="uk-animation-fade uk-margin-large-top  uk-width-1-1" role="alert"><img src="./assets/loading.gif" class="uk-align-center" alt="Loading"></div-->

                          <errorMessages [status]="[fetchPublications.searchUtils.status, fetchDatasets.searchUtils.status]" [type]="'statistics'"></errorMessages>

                          <div *ngIf="(fetchPublications.searchUtils.totalResults != 0 || fetchDatasets.searchUtils.totalResults != 0)">
                            <p class="uk-text-bold">Latest Research Result Timeline</p>
                            <i-frame  [url]=docsTimelineUrl width="800" height="350"></i-frame>
                            <p class="uk-text-bold">Research Result Types</p>
                            <i-frame [url]=docsTypesUrl width="800" height="350"></i-frame>
                          </div>


                            <div *ngIf="fetchPublications.searchUtils.totalResults > 0 || (fetchDatasets.searchUtils.totalResults > 0)">

                                  <p class="uk-text-bold">Funders in Research Results of content provider</p>
                                  <i-frame  [url]=docsFunderUrl width="800" height="350"></i-frame>

                            </div>
                            <div *ngIf="fetchPublications.searchUtils.totalResults > 0 ">
                                <p class="uk-text-bold">Projects with most Publications</p>
                                <i-frame [url]=pubsProjectsUrl width="800" height="350"></i-frame>
                            </div>
                            <div *ngIf="(fetchDatasets.searchUtils.totalResults > 0)">
                                  <div>
                                      <p class="uk-text-bold">Projects with most Research Data</p>
                                      <i-frame  [url]=dataProjectsUrl width="800" height="350"></i-frame>
                                  </div>
                            </div>
                          </div>
                        </div>

                        <!--*ngIf="  tab.content=='metricsTab'"-->
                        <!--[name]="dataProviderInfo.title['name']"-->
                        <metrics *ngIf="activeTab=='Metrics'" [pageViews]="pageViews"
                            [id]="datasourceId" [entityType]="'datasources'" [entity]="'Content Provider'"
                            (metricsResults)="metricsResults($event)" [(properties)] = properties>
                        </metrics>
                        <i-frame *ngIf="activeTab=='Metrics' && metricsClicked && totalViews > 0"
                            [url]=viewsFrameUrl width="100%" height="250">
                        </i-frame>
                        <i-frame *ngIf="activeTab=='Metrics' && metricsClicked && totalDownloads > 0"
                            [url]=downloadsFrameUrl width="100%" height="250">
                        </i-frame>
                    </div>
                <!--/ul-->
                </div>

        </div>
        <div class="uk-width-1-4@l uk-width-1-4@xl uk-width-1-4@m uk-width-1-1@s">
          <div class="uk-card uk-card-default uk-padding-small">
            <div>
              Share - Bookmark<addThis ></addThis>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>