Merge pull request #10 from gisktzh/feature/gb3-1390-info-with-image-…

…preview Feature/gb3 1390 info with image preview
gisktzh · Oct 28, 2024 · 92c64fc · 92c64fc
2 parents 82c1a5e + fbe4c14
commit 92c64fc
Show file tree

Hide file tree

Showing 13 changed files with 203 additions and 84 deletions.
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
     "prepare": "node ./prepare.mjs",
     "update-version": "node ./update-version.js",
     "format-all": "prettier --write ./src",
-    "generate-gb3-api": "npx swagger-typescript-api -p https://maps.zh.ch/api-docs/gb3/v2/swagger.yaml -o ./src/app/shared/models -n gb3-api-generated.interfaces.ts --no-client --extract-response-body --extract-request-body --extract-request-body && node ./remove-generated-api-version-references.js ./src/app/shared/models/gb3-api-generated.interfaces.ts"
+    "generate-gb3-api": "npx swagger-typescript-api -p https://maps.zh.ch/api-docs/gb3/v3/swagger.yaml -o ./src/app/shared/models -n gb3-api-generated.interfaces.ts --no-client --extract-response-body --extract-request-body --extract-request-body && node ./remove-generated-api-version-references.js ./src/app/shared/models/gb3-api-generated.interfaces.ts"
   },
   "private": true,
   "engines": {

diff --git a/.../components/feature-info-overlay/feature-info-content/feature-info-content.component.html b/.../components/feature-info-overlay/feature-info-content/feature-info-content.component.html
@@ -1,5 +1,5 @@
 <div class="feature-info-content">
-  <table class="feature-info-content__table" attr.aria-describedby="Informationen zu {{ layer.title }}">
+  <table class="feature-info-content__table" [attr.aria-describedby]="'Informationen zu ' + layer.title">
     <tr class="feature-info-content__table__row">
       <th class="feature-info-content__table__row__column feature-info-content__table__row__column--header" scope="col"></th>
       <th
@@ -37,18 +37,34 @@
           class="feature-info-content__table__row__column"
           tableColumnIdentifier
         >
-          <a
-            class="feature-info-content__table__row__column__link"
-            *ngIf="cellValue.cellType === 'url'; else textCell"
-            [href]="cellValue.url"
-            target="_blank"
-            rel="noopener noreferrer"
-            [title]="cellValue.displayValue"
-          >
-            {{ cellValue.displayValue
-            }}<span class="feature-info-content__table__row__column__link__icon"><mat-icon [inline]="true">north_east</mat-icon></span>
-          </a>
-          <ng-template #textCell>{{ cellValue.displayValue }}</ng-template>
+          @switch (cellValue.cellType) {
+            @case ('url') {
+              <a
+                class="feature-info-content__table__row__column__link"
+                [href]="cellValue.url"
+                target="_blank"
+                rel="noopener noreferrer"
+                [title]="cellValue.displayValue"
+              >
+                {{ cellValue.displayValue }}
+                <span class="feature-info-content__table__row__column__link__icon"><mat-icon [inline]="true">north_east</mat-icon></span>
+              </a>
+            }
+            @case ('image') {
+              <a [href]="cellValue.url" target="_blank" rel="noopener noreferrer" [title]="cellValue.displayValue">
+                <img
+                  class="feature-info-content__table__row__column__image"
+                  ngSrc="{{ cellValue.src }}"
+                  [alt]="cellValue.alt"
+                  width="200"
+                  height="200"
+                />
+              </a>
+            }
+            @case ('text') {
+              {{ cellValue.displayValue }}
+            }
+          }
         </td>
       </tr>
     </ng-container>

diff --git a/.../components/feature-info-overlay/feature-info-content/feature-info-content.component.scss b/.../components/feature-info-overlay/feature-info-content/feature-info-content.component.scss
@@ -122,6 +122,10 @@ $fixed-border: inset calc(-1 * $border-size) 0 0 0 ktzh-variables.$zh-black100;
           }
         }
 
+        .feature-info-content__table__row__column__image {
+          object-fit: contain;
+        }
+
         .feature-info-content__table__row__column__wrapper {
           display: flex;
           justify-content: space-between;

diff --git a/...ap/components/feature-info-overlay/feature-info-content/feature-info-content.component.ts b/...ap/components/feature-info-overlay/feature-info-content/feature-info-content.component.ts
@@ -1,6 +1,6 @@
 import {AfterViewInit, Component, Inject, Input, OnDestroy, OnInit, QueryList, Renderer2, ViewChildren} from '@angular/core';
 import {ConfigService} from '../../../../shared/services/config.service';
-import {FeatureInfoResultLayer} from '../../../../shared/interfaces/feature-info.interface';
+import {FeatureInfoResultFeatureField, FeatureInfoResultLayer} from '../../../../shared/interfaces/feature-info.interface';
 import {FeatureInfoActions} from '../../../../state/map/actions/feature-info.actions';
 import {Store} from '@ngrx/store';
 import {selectPinnedFeatureId} from '../../../../state/map/reducers/feature-info.reducer';
@@ -10,9 +10,8 @@ import {TableColumnIdentifierDirective} from './table-column-identifier.directiv
 import {GeometryWithSrs} from '../../../../shared/interfaces/geojson-types-with-srs.interface';
 import {MAP_SERVICE} from '../../../../app.module';
 import {MapService} from '../../../interfaces/map.service';
-import {LinkObject} from '../../../../shared/interfaces/link-object.interface';
 
-type CellType = 'text' | 'url';
+type CellType = 'text' | 'url' | 'image';
 
 /**
  * Each TableCell has an fid (identifying the feature), a displayvalue and a type. These are then further narrowed down to handle string
@@ -33,7 +32,14 @@ interface UrlTableCell extends AbstractTableCell {
   url: string;
 }
 
-type TableCell = TextTableCell | UrlTableCell;
+interface ImageTableCell extends AbstractTableCell {
+  cellType: 'image';
+  url: string;
+  src: string;
+  alt: string;
+}
+
+type TableCell = TextTableCell | UrlTableCell | ImageTableCell;
 
 /**
  * A TableHeader is a AbstractTableCell with a displayValue that is string only.
@@ -237,19 +243,27 @@ export class FeatureInfoContentComponent implements OnInit, OnDestroy, AfterView
     return {displayValue, fid, hasGeometry};
   }
 
-  private createTableCellForFeatureAndField(fid: number, value: string | LinkObject | null): TableCell {
-    const displayValue = value ?? DEFAULT_CELL_VALUE;
-
-    if (typeof displayValue === 'string') {
-      return {cellType: 'text', fid, displayValue};
+  private createTableCellForFeatureAndField(fid: number, feature: FeatureInfoResultFeatureField): TableCell {
+    switch (feature.type) {
+      case 'text':
+        return {cellType: 'text', fid, displayValue: feature.value ?? DEFAULT_CELL_VALUE};
+      case 'image':
+        return {
+          cellType: 'image',
+          fid,
+          displayValue: feature.value.src.title ?? feature.value.src.href,
+          url: feature.value.url.href,
+          src: feature.value.src.href,
+          alt: feature.value.alt,
+        };
+      case 'link':
+        return {
+          cellType: 'url',
+          fid,
+          displayValue: feature.value.title ?? feature.value.href,
+          url: feature.value.href,
+        };
     }
-
-    return {
-      cellType: 'url',
-      fid,
-      displayValue: displayValue.title ?? displayValue.href,
-      url: displayValue.href,
-    };
   }
 
   /**
@@ -268,15 +282,15 @@ export class FeatureInfoContentComponent implements OnInit, OnDestroy, AfterView
       const tableHeader = this.createTableHeaderForFeature(fid, featureIdx, features.length, !!geometry);
       this.tableHeaders.push(tableHeader);
 
-      fields.forEach(({label, value}) => {
-        const tableCell = this.createTableCellForFeatureAndField(fid, value);
+      fields.forEach((feature) => {
+        const tableCell = this.createTableCellForFeatureAndField(fid, feature);
 
-        if (this.tableRows.has(label)) {
+        if (this.tableRows.has(feature.label)) {
           // see: https://stackoverflow.com/questions/70723319/object-is-possibly-undefined-using-es6-map-get-right-after-map-set
           // -> it should never happen, but IF it were to happen, we are not doing anything.
-          this.tableRows.get(label)?.push(tableCell);
+          this.tableRows.get(feature.label)?.push(tableCell);
         } else {
-          this.tableRows.set(label, [tableCell]);
+          this.tableRows.set(feature.label, [tableCell]);
         }
       });
     });

diff --git a/src/app/shared/configs/runtime.config.ts b/src/app/shared/configs/runtime.config.ts
@@ -9,7 +9,7 @@ export const defaultRuntimeConfig: RuntimeConfig[] = [
     apiBasePaths: {
       gb2Api: {
         baseUrl: 'https://maps.zh.ch/gb3',
-        version: 'v2',
+        version: 'v3',
       },
       gb2StaticFiles: {
         baseUrl: 'https://maps.zh.ch',

diff --git a/src/app/shared/interfaces/feature-info.interface.ts b/src/app/shared/interfaces/feature-info.interface.ts
@@ -2,12 +2,35 @@ import {GeometryWithSrs} from './geojson-types-with-srs.interface';
 import {HasMetaDataLink} from './metaDataLink.interface';
 import {IsSingleLayer} from './single-layer.interface';
 import {LinkObject} from './link-object.interface';
+import {Image} from './image.interface';
 
-export interface FeatureInfoResultFeatureField {
+export type FeatureInfoResultFeatureFieldType = 'image' | 'link' | 'text';
+
+export interface AbstractFeatureInfoResultFeatureField {
   label: string;
-  value: string | LinkObject | null;
+  type: FeatureInfoResultFeatureFieldType;
+}
+
+export interface FeatureInfoResultFeatureImageField extends AbstractFeatureInfoResultFeatureField {
+  value: Image;
+  type: 'image';
+}
+
+export interface FeatureInfoResultFeatureLinkField extends AbstractFeatureInfoResultFeatureField {
+  value: LinkObject;
+  type: 'link';
+}
+
+export interface FeatureInfoResultFeatureTextField extends AbstractFeatureInfoResultFeatureField {
+  value: string | null;
+  type: 'text';
 }
 
+export type FeatureInfoResultFeatureField =
+  | FeatureInfoResultFeatureImageField
+  | FeatureInfoResultFeatureLinkField
+  | FeatureInfoResultFeatureTextField;
+
 interface FeatureInfoResultFeature {
   fid: number;
   fields: FeatureInfoResultFeatureField[];

diff --git a/src/app/shared/interfaces/image.interface.ts b/src/app/shared/interfaces/image.interface.ts
@@ -0,0 +1,7 @@
+import {LinkObject} from './link-object.interface';
+
+export interface Image {
+  src: LinkObject;
+  alt: string;
+  url: LinkObject;
+}
diff --git a/src/app/shared/models/gb3-api-generated.interfaces.ts b/src/app/shared/models/gb3-api-generated.interfaces.ts
@@ -678,8 +678,8 @@ export interface Contact {
 export interface Dataset {
   /** UUID */
   uuid: string;
-  /** Link auf Bild */
-  image_url: string | null;
+  /** image object of the thumbnail image */
+  image_url: Image;
   /** Verfügbarkeit OGD/NOGD */
   ogd: boolean;
   /** Kontakt: Verantwortlich für Geodaten */
@@ -934,19 +934,41 @@ export interface GeometryCrs {
   };
 }
 
+/** Image source path and meta data */
+export interface Image {
+  /** Source path of the image file for rendering e.g. as thumbnail */
+  src: LinkObject;
+  /** Alternative text of the image for accessiblity purposes */
+  alt: string;
+  /** Link to the original image file */
+  url: LinkObject;
+}
+
 /** Feature field */
 export type InfoFeatureField =
   | {
       /** Field label */
       label: string;
       /** Field value (string, numeric or null) */
       value: string | number | null;
+      /** type for the text object (here 'text') */
+      type: 'text';
     }
   | {
       /** Field label */
       label: string;
       /** Field link */
-      link: LinkObject;
+      value: LinkObject;
+      /** type for the link object (here 'link') */
+      type: 'link';
+    }
+  | {
+      /** Field label */
+      label: string;
+      /** Field image */
+      value: Image;
+      /** type for the image object (here 'image') */
+      type: 'image';
     };
 
 /** A link MUST be represented as either: a string containing the link’s URL or a link object. */
@@ -970,10 +992,10 @@ export interface LinkObject {
 export interface Map {
   /** Map UUID */
   uuid: string;
-  /** Link auf Bild */
-  image_url: string | null;
+  /** image object of the thumbnail image */
+  image_url: Image;
   /** Kontakt: Verantwortlich für Geodaten */
-  kontakt_geodaten: Contact;
+  kontakt_metadaten: Contact;
   /** Map GB2-Nummer */
   gb2_id: number;
   /** Topic name */
@@ -1025,15 +1047,15 @@ export interface MunicipalityItem {
 export interface Product {
   /** Product UUID */
   uuid: string;
-  /** Link auf Bild */
-  image_url: string | null;
+  /** image object of the thumbnail image */
+  image_url: Image;
   /** Kontakt: Zuständig für Geometadaten */
   kontakt_metadaten: Contact;
   /** Product GDP-Nummer */
   gdpnummer: number;
   /** Name des Geodatenprodukts */
   name: string;
-  /** Beschreibung */
+  /** Beschreibung des Geoproduktes */
   beschreibung: string;
   datasets: {
     /** Dataset UUID */
@@ -1103,8 +1125,8 @@ export interface SearchMatch {
 export interface Service {
   /** Service UUID */
   uuid: string;
-  /** Link auf Bild */
-  image_url: string | null;
+  /** image object of the thumbnail image */
+  image_url: Image;
   /** Kontakt: Zuständig für Geometadaten */
   kontakt_metadaten: Contact;
   /** Service GDSer-Nummer */
@@ -1113,7 +1135,7 @@ export interface Service {
   servicetyp: string;
   /** Name des Geodienstes */
   name: string;
-  /** Beschreibung */
+  /** Beschreibung des Geodienstes */
   beschreibung: string;
   /** URL */
   url: LinkObject;
@@ -1266,8 +1288,6 @@ export type MetadataMapsListData = MetadataMaps;
 
 export type MetadataMapsDetailData = MetadataMap;
 
-export type MetadataMapsDetail2Data = MetadataMap;
-
 export type MetadataProductsListData = MetadataProducts;
 
 export type MetadataProductsDetailData = MetadataProduct;

diff --git a/src/app/shared/pipes/text-or-placeholder.pipe.ts b/src/app/shared/pipes/text-or-placeholder.pipe.ts
@@ -5,7 +5,7 @@ import {Pipe, PipeTransform} from '@angular/core';
   standalone: true,
 })
 export class TextOrPlaceholderPipe implements PipeTransform {
-  transform(value: string | null): string {
+  public transform(value: string | null): string {
     return value ?? '-';
   }
 }