From 075ba3f34ef46247db39dba5e38ed716fde30da4 Mon Sep 17 00:00:00 2001 From: Philippe Lafreniere Date: Tue, 5 Jan 2021 16:05:52 -0500 Subject: [PATCH 1/4] feat(catalog): use abstract if metadata url is undefined --- .../lib/catalog/shared/catalog.abstract.ts | 3 + .../src/lib/catalog/shared/catalog.service.ts | 8 ++- .../metadata-abstract.component.html | 64 +++++++++++++++++++ .../metadata-button.component.html | 2 +- .../lib/metadata/shared/metadata.service.ts | 13 +++- 5 files changed, 86 insertions(+), 4 deletions(-) create mode 100644 packages/geo/src/lib/metadata/metadata-button/metadata-abstract.component.html diff --git a/packages/geo/src/lib/catalog/shared/catalog.abstract.ts b/packages/geo/src/lib/catalog/shared/catalog.abstract.ts index c17926725c..f8805c13cd 100644 --- a/packages/geo/src/lib/catalog/shared/catalog.abstract.ts +++ b/packages/geo/src/lib/catalog/shared/catalog.abstract.ts @@ -14,6 +14,7 @@ export abstract class Catalog implements ICatalog { id: string; title: string; url: string; + abstract?: string; forcedProperties?: any[]; items?: CatalogItem[]; type?: TypeCatalogStrings; @@ -49,9 +50,11 @@ class WMSCatalog extends Catalog { super(options, service); const sType: string = TypeCatalog[TypeCatalog.wms]; this.type = TypeCatalog[sType]; + console.log(options); } public collectCatalogItems(): Observable { + console.log('collect', this); return this.catalogService.loadCatalogWMSLayerItems(this); } } diff --git a/packages/geo/src/lib/catalog/shared/catalog.service.ts b/packages/geo/src/lib/catalog/shared/catalog.service.ts index 26ab8e367d..ec628465f5 100644 --- a/packages/geo/src/lib/catalog/shared/catalog.service.ts +++ b/packages/geo/src/lib/catalog/shared/catalog.service.ts @@ -134,6 +134,10 @@ export class CatalogService { return this.getCatalogCapabilities(catalog).pipe( map((capabilities: any) => { const items = []; + if (capabilities && capabilities.Service && capabilities.Service.Abstract) { + catalog.abstract = capabilities.Service.Abstract; + } + this.includeRecursiveItems( catalog, capabilities.Capability.Layer, @@ -318,6 +322,7 @@ export class CatalogService { } private prepareCatalogItemLayer(layer, idParent, layersQueryFormat, catalog) { + console.log(catalog); const configuredQueryFormat = this.retriveLayerInfoFormat( layer.Name, layersQueryFormat @@ -374,13 +379,14 @@ export class CatalogService { metadata: { url: metadata ? metadata.OnlineResource : undefined, extern: metadata ? true : undefined, - abstract: layer.Abstract + abstract: layer.Abstract || catalog.abstract }, legendOptions, tooltip: { type: catalog.tooltipType }, sourceOptions } }; + console.log(layerPrepare); return ObjectUtils.removeUndefined(layerPrepare); } diff --git a/packages/geo/src/lib/metadata/metadata-button/metadata-abstract.component.html b/packages/geo/src/lib/metadata/metadata-button/metadata-abstract.component.html new file mode 100644 index 0000000000..401c51acb0 --- /dev/null +++ b/packages/geo/src/lib/metadata/metadata-button/metadata-abstract.component.html @@ -0,0 +1,64 @@ +

Install Angular

+ +

Develop across all platforms

+

Learn one way to build applications with Angular and reuse your code and abilities to build + apps for any deployment target. For web, mobile web, native mobile and native desktop.

+ +

Speed & Performance

+

Achieve the maximum speed possible on the Web Platform today, and take it further, via Web + Workers and server-side rendering. Angular puts you in control over scalability. Meet huge + data requirements by building data models on RxJS, Immutable.js or another push-model.

+ +

Incredible tooling

+

Build features quickly with simple, declarative templates. Extend the template language with + your own components and use a wide array of existing components. Get immediate Angular-specific + help and feedback with nearly every IDE and editor. All this comes together so you can focus + on building amazing apps rather than trying to make the code work.

+ +

Loved by millions

+

From prototype through global deployment, Angular delivers the productivity and scalable + infrastructure that supports Google's largest applications.

+ +

What is Angular?

+ +

Angular is a platform that makes it easy to build applications with the web. Angular + combines declarative templates, dependency injection, end to end tooling, and integrated + best practices to solve development challenges. Angular empowers developers to build + applications that live on the web, mobile, or the desktop

+ +

Architecture overview

+ +

Angular is a platform and framework for building client applications in HTML and TypeScript. + Angular is itself written in TypeScript. It implements core and optional functionality as a + set of TypeScript libraries that you import into your apps.

+ +

The basic building blocks of an Angular application are NgModules, which provide a compilation + context for components. NgModules collect related code into functional sets; an Angular app is + defined by a set of NgModules. An app always has at least a root module that enables + bootstrapping, and typically has many more feature modules.

+ +

Components define views, which are sets of screen elements that Angular can choose among and + modify according to your program logic and data. Every app has at least a root component.

+ +

Components use services, which provide specific functionality not directly related to views. + Service providers can be injected into components as dependencies, making your code modular, + reusable, and efficient.

+ +

Both components and services are simply classes, with decorators that mark their type and + provide metadata that tells Angular how to use them.

+ +

The metadata for a component class associates it with a template that defines a view. A + template combines ordinary HTML with Angular directives and binding markup that allow Angular + to modify the HTML before rendering it for display.

+ +

The metadata for a service class provides the information Angular needs to make it available + to components through Dependency Injection (DI).

+ +

An app's components typically define many views, arranged hierarchically. Angular provides + the Router service to help you define navigation paths among views. The router provides + sophisticated in-browser navigational capabilities.

+ + + + + diff --git a/packages/geo/src/lib/metadata/metadata-button/metadata-button.component.html b/packages/geo/src/lib/metadata/metadata-button/metadata-button.component.html index c548b2a74b..2fbab80918 100644 --- a/packages/geo/src/lib/metadata/metadata-button/metadata-button.component.html +++ b/packages/geo/src/lib/metadata/metadata-button/metadata-button.component.html @@ -1,5 +1,5 @@ -

Develop across all platforms

-

Learn one way to build applications with Angular and reuse your code and abilities to build - apps for any deployment target. For web, mobile web, native mobile and native desktop.

- -

Speed & Performance

-

Achieve the maximum speed possible on the Web Platform today, and take it further, via Web - Workers and server-side rendering. Angular puts you in control over scalability. Meet huge - data requirements by building data models on RxJS, Immutable.js or another push-model.

- -

Incredible tooling

-

Build features quickly with simple, declarative templates. Extend the template language with - your own components and use a wide array of existing components. Get immediate Angular-specific - help and feedback with nearly every IDE and editor. All this comes together so you can focus - on building amazing apps rather than trying to make the code work.

- -

Loved by millions

-

From prototype through global deployment, Angular delivers the productivity and scalable - infrastructure that supports Google's largest applications.

- -

What is Angular?

- -

Angular is a platform that makes it easy to build applications with the web. Angular - combines declarative templates, dependency injection, end to end tooling, and integrated - best practices to solve development challenges. Angular empowers developers to build - applications that live on the web, mobile, or the desktop

- -

Architecture overview

- -

Angular is a platform and framework for building client applications in HTML and TypeScript. - Angular is itself written in TypeScript. It implements core and optional functionality as a - set of TypeScript libraries that you import into your apps.

- -

The basic building blocks of an Angular application are NgModules, which provide a compilation - context for components. NgModules collect related code into functional sets; an Angular app is - defined by a set of NgModules. An app always has at least a root module that enables - bootstrapping, and typically has many more feature modules.

- -

Components define views, which are sets of screen elements that Angular can choose among and - modify according to your program logic and data. Every app has at least a root component.

- -

Components use services, which provide specific functionality not directly related to views. - Service providers can be injected into components as dependencies, making your code modular, - reusable, and efficient.

- -

Both components and services are simply classes, with decorators that mark their type and - provide metadata that tells Angular how to use them.

- -

The metadata for a component class associates it with a template that defines a view. A - template combines ordinary HTML with Angular directives and binding markup that allow Angular - to modify the HTML before rendering it for display.

- -

The metadata for a service class provides the information Angular needs to make it available - to components through Dependency Injection (DI).

- -

An app's components typically define many views, arranged hierarchically. Angular provides - the Router service to help you define navigation paths among views. The router provides - sophisticated in-browser navigational capabilities.

- - - - - +

{{ data.abstract }}

+ \ No newline at end of file diff --git a/packages/geo/src/lib/metadata/metadata-button/metadata-abstract.component.scss b/packages/geo/src/lib/metadata/metadata-button/metadata-abstract.component.scss new file mode 100644 index 0000000000..42c44a7811 --- /dev/null +++ b/packages/geo/src/lib/metadata/metadata-button/metadata-abstract.component.scss @@ -0,0 +1,12 @@ +.close-button { + top: 10px; + right: 10px; + padding: 10px; + line-height: 10px; + position: absolute !important; + min-width: auto; +} + +mat-dialog-container { + position: relative; +} \ No newline at end of file diff --git a/packages/geo/src/lib/metadata/metadata-button/metadata-button.component.ts b/packages/geo/src/lib/metadata/metadata-button/metadata-button.component.ts index 853da7866a..7a1bd72e9a 100644 --- a/packages/geo/src/lib/metadata/metadata-button/metadata-button.component.ts +++ b/packages/geo/src/lib/metadata/metadata-button/metadata-button.component.ts @@ -1,4 +1,5 @@ -import { Component, Input, ChangeDetectionStrategy } from '@angular/core'; +import { Component, Input, ChangeDetectionStrategy, Inject, ViewEncapsulation } from '@angular/core'; +import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { Layer } from '../../layer/shared/layers/layer'; @@ -33,10 +34,21 @@ export class MetadataButtonComponent { } private _color = 'primary'; - constructor(private metadataService: MetadataService) {} + constructor( + private metadataService: MetadataService, + private dialog: MatDialog) {} openMetadata(metadata: MetadataOptions) { - this.metadataService.open(metadata); + if (metadata.extern) { + this.metadataService.open(metadata); + } else if (!metadata.extern && metadata.abstract) { + this.dialog.open(MetadataAbstractComponent, { + data: { + layerTitle: this.layer.title, + abstract: metadata.abstract + } + }); + } } get options(): MetadataLayerOptions { @@ -46,3 +58,13 @@ export class MetadataButtonComponent { return this.layer.options; } } + +@Component({ + selector: 'igo-metadata-abstract', + templateUrl: './metadata-abstract.component.html', + styleUrls: ['./metadata-abstract.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class MetadataAbstractComponent { + constructor(@Inject(MAT_DIALOG_DATA) public data: MetadataOptions) {} +} diff --git a/packages/geo/src/lib/metadata/metadata.module.ts b/packages/geo/src/lib/metadata/metadata.module.ts index ff99c1d631..b5dfa5a676 100644 --- a/packages/geo/src/lib/metadata/metadata.module.ts +++ b/packages/geo/src/lib/metadata/metadata.module.ts @@ -1,3 +1,4 @@ +import { MatDialogModule } from '@angular/material/dialog'; import { NgModule, ModuleWithProviders } from '@angular/core'; import { CommonModule } from '@angular/common'; @@ -7,7 +8,7 @@ import { MatTooltipModule } from '@angular/material/tooltip'; import { IgoLanguageModule } from '@igo2/core'; -import { MetadataButtonComponent } from './metadata-button/metadata-button.component'; +import { MetadataButtonComponent, MetadataAbstractComponent } from './metadata-button/metadata-button.component'; @NgModule({ imports: [ @@ -15,10 +16,15 @@ import { MetadataButtonComponent } from './metadata-button/metadata-button.compo MatIconModule, MatButtonModule, MatTooltipModule, - IgoLanguageModule + IgoLanguageModule, + MatDialogModule ], - exports: [MetadataButtonComponent], - declarations: [MetadataButtonComponent] + exports: [ + MetadataButtonComponent, + MetadataAbstractComponent], + declarations: [ + MetadataButtonComponent, + MetadataAbstractComponent] }) export class IgoMetadataModule { static forRoot(): ModuleWithProviders { diff --git a/packages/geo/src/lib/metadata/shared/metadata.interface.ts b/packages/geo/src/lib/metadata/shared/metadata.interface.ts index 6794e45b6a..b4de31782b 100644 --- a/packages/geo/src/lib/metadata/shared/metadata.interface.ts +++ b/packages/geo/src/lib/metadata/shared/metadata.interface.ts @@ -5,6 +5,7 @@ export interface MetadataOptions { extern?: boolean; abstract?: string; keywordList?: string[]; + layerTitle?: string; } export interface MetadataLayerOptions extends LayerOptions { diff --git a/packages/geo/src/lib/metadata/shared/metadata.service.ts b/packages/geo/src/lib/metadata/shared/metadata.service.ts index 9ecb2b2664..676c518dac 100644 --- a/packages/geo/src/lib/metadata/shared/metadata.service.ts +++ b/packages/geo/src/lib/metadata/shared/metadata.service.ts @@ -1,5 +1,4 @@ -import { Component, Injectable } from '@angular/core'; -import { MatDialog } from '@angular/material/dialog'; +import { Injectable } from '@angular/core'; import { MetadataOptions } from './metadata.interface'; @@ -7,19 +6,11 @@ import { MetadataOptions } from './metadata.interface'; providedIn: 'root' }) export class MetadataService { - constructor(public dialog: MatDialog) {} + constructor() {} open(metadata: MetadataOptions) { if (metadata.extern) { window.open(metadata.url, '_blank'); - } else if (!metadata.extern && metadata.abstract) { - this.dialog.open(MetadataAbstractComponent); } } } - -@Component({ - selector: 'igo-metadata-abstract', - templateUrl: './metadata-astract.component.html', -}) -export class MetadataAbstractComponent {} From 90cbdfce3a81049e334206379a90c56121786b20 Mon Sep 17 00:00:00 2001 From: Philippe Lafreniere Date: Thu, 7 Jan 2021 12:56:51 -0500 Subject: [PATCH 3/4] feat(catalog): allow to use abstract a meta when metadata url is undefined --- .../src/lib/catalog/shared/catalog.service.ts | 48 +++++++++++++------ .../metadata-abstract.component.html | 5 +- .../metadata-abstract.component.scss | 6 +-- .../metadata-button.component.ts | 3 +- .../lib/metadata/shared/metadata.interface.ts | 2 + 5 files changed, 45 insertions(+), 19 deletions(-) diff --git a/packages/geo/src/lib/catalog/shared/catalog.service.ts b/packages/geo/src/lib/catalog/shared/catalog.service.ts index bc47c85c0b..3904771af8 100644 --- a/packages/geo/src/lib/catalog/shared/catalog.service.ts +++ b/packages/geo/src/lib/catalog/shared/catalog.service.ts @@ -134,7 +134,7 @@ export class CatalogService { return this.getCatalogCapabilities(catalog).pipe( map((capabilities: any) => { const items = []; - if (capabilities && capabilities.Service && capabilities.Service.Abstract) { + if (capabilities.Service && capabilities.Service.Abstract && capabilities.Service.Abstract.length) { catalog.abstract = capabilities.Service.Abstract; } @@ -151,11 +151,7 @@ export class CatalogService { loadCatalogWMTSLayerItems(catalog: Catalog): Observable { return this.getCatalogCapabilities(catalog).pipe( map((capabilities: any) => { - if (capabilities && capabilities.ServiceIdentification && capabilities.ServiceIdentification.Abstract) { - catalog.abstract = capabilities.ServiceIdentification.Abstract; - } - - return this.getWMTSItems(catalog, capabilities) + return this.getWMTSItems(catalog, capabilities); }) ); } @@ -163,7 +159,6 @@ export class CatalogService { loadCatalogArcGISRestItems(catalog: Catalog): Observable { return this.getCatalogCapabilities(catalog).pipe( map((capabilities: any) => { - console.log(capabilities); return this.getArcGISRESTItems(catalog, capabilities); }) ); @@ -374,6 +369,13 @@ export class CatalogService { } } + let abstract; + if (layer.Abstract) { + abstract = layer.Abstract; + } else if (!layer.Abstract && catalog.abstract) { + abstract = catalog.abstract; + } + const layerPrepare = { id: generateIdFromSourceOptions(sourceOptions), type: CatalogItemType.Layer, @@ -385,7 +387,8 @@ export class CatalogService { metadata: { url: metadata ? metadata.OnlineResource : undefined, extern: metadata ? true : undefined, - abstract: layer.Abstract || catalog.abstract + abstract, + type: baseSourceOptions.type }, legendOptions, tooltip: { type: catalog.tooltipType }, @@ -503,12 +506,18 @@ export class CatalogService { catalog, capabilities: { [key: string]: any } ): CatalogItemLayer[] { - console.log(catalog); const layers = capabilities.Contents.Layer; const regexes = (catalog.regFilters || []).map( (pattern: string) => new RegExp(pattern) ); + if ( + capabilities.ServiceIdentification && + capabilities.ServiceIdentification.Abstract && + capabilities.ServiceIdentification.Abstract.length) { + catalog.abstract = capabilities.ServiceIdentification.Abstract; + } + return layers .map((layer: any) => { let forcedTitle; @@ -543,7 +552,6 @@ export class CatalogService { catalog.sourceOptions, { params } ) as WMTSDataSourceOptions; - console.log(sourceOptions); return ObjectUtils.removeUndefined({ id: generateIdFromSourceOptions(sourceOptions), @@ -552,11 +560,12 @@ export class CatalogService { address: catalog.id, options: { sourceOptions, - metadata: catalog.abstract ? { + metadata: { url: undefined, extern: undefined, - abstract: catalog.abstract - } : undefined, + abstract: catalog.abstract, + type: baseSourceOptions.type + } } }); }) @@ -572,6 +581,11 @@ export class CatalogService { (pattern: string) => new RegExp(pattern) ); + let abstract; + if (capabilities.serviceDescription && capabilities.serviceDescription.length) { + abstract = capabilities.serviceDescription; + } + return layers .map((layer: any) => { let forcedTitle; @@ -608,7 +622,13 @@ export class CatalogService { title: forcedTitle !== undefined ? forcedTitle : layer.name, address: catalog.id, options: { - sourceOptions + sourceOptions, + metadata: { + url: undefined, + extern: undefined, + abstract, + type: baseSourceOptions.type + } } }); }) diff --git a/packages/geo/src/lib/metadata/metadata-button/metadata-abstract.component.html b/packages/geo/src/lib/metadata/metadata-button/metadata-abstract.component.html index a68aa8a4ec..c695f87c0d 100644 --- a/packages/geo/src/lib/metadata/metadata-button/metadata-abstract.component.html +++ b/packages/geo/src/lib/metadata/metadata-button/metadata-abstract.component.html @@ -1,5 +1,8 @@

{{ data.layerTitle }}

- +

{{ data.abstract }}

+ + +

\ No newline at end of file diff --git a/packages/geo/src/lib/metadata/metadata-button/metadata-abstract.component.scss b/packages/geo/src/lib/metadata/metadata-button/metadata-abstract.component.scss index 42c44a7811..5d454487a7 100644 --- a/packages/geo/src/lib/metadata/metadata-button/metadata-abstract.component.scss +++ b/packages/geo/src/lib/metadata/metadata-button/metadata-abstract.component.scss @@ -1,7 +1,7 @@ .close-button { - top: 10px; - right: 10px; - padding: 10px; + top: 5px; + right: 5px; + padding: 7px; line-height: 10px; position: absolute !important; min-width: auto; diff --git a/packages/geo/src/lib/metadata/metadata-button/metadata-button.component.ts b/packages/geo/src/lib/metadata/metadata-button/metadata-button.component.ts index 7a1bd72e9a..fbebfc1456 100644 --- a/packages/geo/src/lib/metadata/metadata-button/metadata-button.component.ts +++ b/packages/geo/src/lib/metadata/metadata-button/metadata-button.component.ts @@ -45,7 +45,8 @@ export class MetadataButtonComponent { this.dialog.open(MetadataAbstractComponent, { data: { layerTitle: this.layer.title, - abstract: metadata.abstract + abstract: metadata.abstract, + type: metadata.type } }); } diff --git a/packages/geo/src/lib/metadata/shared/metadata.interface.ts b/packages/geo/src/lib/metadata/shared/metadata.interface.ts index b4de31782b..aa9efff003 100644 --- a/packages/geo/src/lib/metadata/shared/metadata.interface.ts +++ b/packages/geo/src/lib/metadata/shared/metadata.interface.ts @@ -1,3 +1,4 @@ +import { TypeCatalogStrings } from '../../catalog'; import { LayerOptions } from '../../layer/shared/layers/layer.interface'; export interface MetadataOptions { @@ -6,6 +7,7 @@ export interface MetadataOptions { abstract?: string; keywordList?: string[]; layerTitle?: string; + type?: TypeCatalogStrings; } export interface MetadataLayerOptions extends LayerOptions { From 4c847861ba06ce7e7425c32d8b5d83ee431d3e2b Mon Sep 17 00:00:00 2001 From: Philippe Lafreniere Date: Thu, 7 Jan 2021 14:32:47 -0500 Subject: [PATCH 4/4] lint --- packages/geo/src/lib/catalog/shared/catalog.service.ts | 4 +--- .../metadata/metadata-button/metadata-abstract.component.html | 2 +- .../metadata/metadata-button/metadata-abstract.component.scss | 2 +- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/geo/src/lib/catalog/shared/catalog.service.ts b/packages/geo/src/lib/catalog/shared/catalog.service.ts index 3904771af8..f4fbb76794 100644 --- a/packages/geo/src/lib/catalog/shared/catalog.service.ts +++ b/packages/geo/src/lib/catalog/shared/catalog.service.ts @@ -150,9 +150,7 @@ export class CatalogService { loadCatalogWMTSLayerItems(catalog: Catalog): Observable { return this.getCatalogCapabilities(catalog).pipe( - map((capabilities: any) => { - return this.getWMTSItems(catalog, capabilities); - }) + map((capabilities: any) => this.getWMTSItems(catalog, capabilities)) ); } diff --git a/packages/geo/src/lib/metadata/metadata-button/metadata-abstract.component.html b/packages/geo/src/lib/metadata/metadata-button/metadata-abstract.component.html index c695f87c0d..a506a5a7fb 100644 --- a/packages/geo/src/lib/metadata/metadata-button/metadata-abstract.component.html +++ b/packages/geo/src/lib/metadata/metadata-button/metadata-abstract.component.html @@ -5,4 +5,4 @@

{{ data.abstract }}

- \ No newline at end of file + diff --git a/packages/geo/src/lib/metadata/metadata-button/metadata-abstract.component.scss b/packages/geo/src/lib/metadata/metadata-button/metadata-abstract.component.scss index 5d454487a7..fb6f3df705 100644 --- a/packages/geo/src/lib/metadata/metadata-button/metadata-abstract.component.scss +++ b/packages/geo/src/lib/metadata/metadata-button/metadata-abstract.component.scss @@ -9,4 +9,4 @@ mat-dialog-container { position: relative; -} \ No newline at end of file +}