🚧 draft metadata window

src/adjuster/adjuster.module.ts

@@ -11,6 +11,7 @@ import {AdjusterEventService} from './adjuster-event.service';
 import {AdjusterLoaderComponent} from './adjuster-loader.component';
 import {AdjusterService} from './adjuster.service';
 import {DatasetListComponent} from './dataset-list.component';
+import { MetadataDialogComponent } from './metadata-dialog.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -22,7 +23,7 @@ import {DatasetListComponent} from './dataset-list.component';
     TranslateModule,
   ],
   exports: [AdjusterComponent],
-  declarations: [AdjusterComponent, AdjusterLoaderComponent, DatasetListComponent],
+  declarations: [AdjusterComponent, AdjusterLoaderComponent, DatasetListComponent, MetadataDialogComponent],
   providers: [AdjusterService, AdjusterEventService],
 })
 export class AdjusterModule {}

src/adjuster/dataset-list.component.html

@@ -20,7 +20,7 @@
       (click)="descriptionVisible = !descriptionVisible"></span-->
     <!--label class="ps-2 cursor-pointer text-secondary"
       (click)="descriptionVisible = !descriptionVisible">{{dataset.name}}</label-->
-      <label><a class="text-info non-underlined-link" (click)="showMetadataWindow()">{{dataset.name}}</a></label>
+      <label><a class="text-info non-underlined-link" (click)="showMetadataWindow(dataset)">{{dataset.name}}</a></label>
     <!--div class="p-2 mb-2 text-info" [hidden]="!descriptionVisible">
       {{dataset.desc}}
     </div-->

src/adjuster/dataset-list.component.ts

@@ -1,5 +1,9 @@
 import {Component, Input, OnInit} from '@angular/core';
 
+import {HsDialogContainerService} from 'hslayers-ng';
+
+import {MetadataDialogComponent} from './metadata-dialog.component';
+
 @Component({
   selector: 'pra-dataset-list',
   templateUrl: './dataset-list.component.html',
@@ -9,11 +13,11 @@ import {Component, Input, OnInit} from '@angular/core';
 export class DatasetListComponent implements OnInit {
   @Input() factor;
   datasetlistVisible = false;
-  constructor() {}
+  constructor(public hsDialogContainerService: HsDialogContainerService) {}
 
   ngOnInit() {}
 
-  showMetadataWindow() {
-    //TODO: create window, show data from ontology
+  showMetadataWindow(dataset) {
+    this.hsDialogContainerService.create(MetadataDialogComponent, {title: dataset.name});
   }
 }

src/adjuster/metadata-dialog.component.html

@@ -0,0 +1,55 @@
+<div class="modal in hs-composition-share-dialog" tabindex="-1" role="dialog" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title">
+          <span>{{ data.title }}</span>
+        </h4>
+        <button type="button" (click)="close()" class="btn-close" data-dismiss="modal">
+          <span aria-hidden="true">&times;</span><span class="visually-hidden">{{ "COMMON.close" | translate }}</span>
+        </button>
+      </div>
+      <div class="modal-body" style="max-height: 600px; overflow-y: auto">
+        <div class="row">
+          <div class="col-md-3">
+            <b>{{ "METADATA.coverage" | translate }}</b>
+          </div>
+          <div class="col-md-9">{{data.coverage}}</div>
+        </div>
+        <div class="row">
+          <div class="col-md-3">
+            <b>{{ "METADATA.LoD" | translate }}</b>
+          </div>
+          <div class="col-md-9">{{data.lod}}</div>
+        </div>
+        <div class="row">
+          <div class="col-md-3">
+            <b>{{ "METADATA.update" | translate }}</b>
+          </div>
+          <div class="col-md-9">{{data.update}}</div>
+        </div>
+        <div class="row">
+          <div class="col-md-3">
+            <b>{{ "METADATA.source" | translate }}</b>
+          </div>
+          <div class="col-md-9">{{data.source}}</div>
+        </div>
+        <div class="row">
+          <div class="col-md-3">
+            <b>{{ "COMMON.url" | translate }}</b>
+          </div>
+          <div class="col-md-9"><a [href]="data.link" target="_blank">{{data.link}}</a></div>
+        </div>
+      </div>
+      <!--div class="modal-footer">
+        <div class="btn-group" role="group">
+          <button class="btn btn-secondary" (click)="shareOnSocial()">
+            <i class="icon-share-alt"></i> {{'COMMON.share' | translate}}
+          </button>
+        </div>
+        <button type="button" class="btn btn-secondary" (click)="close()"
+          data-dismiss="modal">{{'COMMON.close' | translate}}</button>
+      </div-->
+    </div>
+  </div>
+</div>

src/adjuster/metadata-dialog.component.ts

@@ -0,0 +1,37 @@
+import {Component, OnInit, ViewRef} from '@angular/core';
+
+import {HsDialogComponent, HsDialogContainerService} from 'hslayers-ng';
+
+import {MetadataDialogService} from './metadata-dialog.service';
+
+@Component({
+  selector: 'pra-metadata-dialog',
+  templateUrl: './metadata-dialog.component.html' 
+})
+
+export class MetadataDialogComponent implements HsDialogComponent, OnInit {
+  viewRef: ViewRef;
+  data: DatasetDescriptor;
+
+  constructor(
+    public hsDialogContainerService: HsDialogContainerService,
+    public metadataDialogService: MetadataDialogService
+    ) {}
+
+  ngOnInit() {
+    this.data = this.metadataDialogService.loadDatasetMetadata(this.data.title);
+  }
+
+  close(): void {
+    this.hsDialogContainerService.destroy(this);
+  }
+}
+
+export type DatasetDescriptor = {
+  title: string;
+  coverage?: string;
+  link?: string;
+  lod?: string;
+  source?: string;
+  update?: string;
+};

src/adjuster/metadata-dialog.service.ts

@@ -0,0 +1,24 @@
+import {Injectable} from '@angular/core';
+
+import ontology from '../data/rural_attractiveness.owl.json';
+import {DatasetDescriptor} from './metadata-dialog.component';
+
+@Injectable({providedIn: 'root'})
+export class MetadataDialogService {
+  constructor() {}
+  
+  loadDatasetMetadata(datasetName: string): DatasetDescriptor {
+    console.log(ontology);
+    const ontoInfo = ontology.find((subject) => subject['http://www.w3.org/2000/01/rdf-schema#label']?.find((label) => label['@value']?.includes(datasetName)))
+    console.log(ontoInfo);
+    //TODO: the returned values must reflect possibility of multi-values (e.g. coverage CZ + EU)
+    return {
+      title: datasetName,
+      coverage: ontoInfo['http://www.semanticweb.org/attractiveness/hasCoverage'][0]['@id'] ?? null,
+      link: ontoInfo['http://www.semanticweb.org/attractiveness/link'][0]['@value'] ?? null,
+      lod: ontoInfo['http://www.semanticweb.org/attractiveness/hasLoD'][0]['@id'] ?? null,
+      source: ontoInfo['http://www.semanticweb.org/attractiveness/hasSource'][0]['@id'] ?? null,
+      update: ontoInfo['http://www.semanticweb.org/attractiveness/update'][0]['@value'] ?? null
+    };
+  }
+}

src/translations.json

@@ -16,6 +16,12 @@
         "Vyberte alespoň jednu datovou sadu a nastavte váhu aspoň jednoho faktoru na ne-nulovou hodnotu.",
       "numberOfClusters": "Počet shluků k vytvoření",
       "serverError": "Chyba serveru"
+    },
+    "METADATA": {
+      "coverage": "Pokrývá území",
+      "LoD": "Úroveň detailu",
+      "source": "Zdroj",
+      "update": "Aktualizace"
     }
   },
   "en": {
@@ -34,6 +40,12 @@
       "noDataSelectedMsg": "Select at least one dataset and set at least one factor's weight to a non-zero value.",
       "numberOfClusters": "Number of clusters to create",
       "serverError": "Server error"
+    },
+    "METADATA": {
+      "coverage": "Covers area",
+      "LoD": "Level of Detail",
+      "source": "Source",
+      "update": "Update"
     }
   }
 }