From 3c82ad8125c2b3747f138a2b2d988e9f5bf496da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Agneray?= <francois.agneray@lam.fr>
Date: Thu, 13 Oct 2022 21:03:30 +0200
Subject: [PATCH] #88 => Add detail page dynamics components
---
.../display-detail-renderer.component.html | 0
.../display-detail-renderer.component.ts | 0
.../search/detail/components/index.ts | 4 +-
.../renderer/index.ts | 0
.../display-image.component.html | 1 +
.../display-image.component.ts | 63 +++++++++++++++++++
.../display-object.component.html | 2 +-
.../display-object.component.ts | 8 ++-
.../display-value-by-attribute.component.html | 1 +
.../display-value-by-attribute.component.ts | 17 +++++
.../dynamic-components/index.ts | 8 ++-
11 files changed, 98 insertions(+), 6 deletions(-)
rename client/src/app/instance/search/detail/{dynamic-content/dynamic-components => components}/display-detail-renderer.component.html (100%)
rename client/src/app/instance/search/detail/{dynamic-content/dynamic-components => components}/display-detail-renderer.component.ts (100%)
rename client/src/app/instance/search/detail/{dynamic-content/dynamic-components => components}/renderer/index.ts (100%)
create mode 100644 client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-image.component.html
create mode 100644 client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-image.component.ts
create mode 100644 client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-value-by-attribute.component.html
create mode 100644 client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-value-by-attribute.component.ts
diff --git a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-detail-renderer.component.html b/client/src/app/instance/search/detail/components/display-detail-renderer.component.html
similarity index 100%
rename from client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-detail-renderer.component.html
rename to client/src/app/instance/search/detail/components/display-detail-renderer.component.html
diff --git a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-detail-renderer.component.ts b/client/src/app/instance/search/detail/components/display-detail-renderer.component.ts
similarity index 100%
rename from client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-detail-renderer.component.ts
rename to client/src/app/instance/search/detail/components/display-detail-renderer.component.ts
diff --git a/client/src/app/instance/search/detail/components/index.ts b/client/src/app/instance/search/detail/components/index.ts
index 0dcbf58e..1e9bb66c 100644
--- a/client/src/app/instance/search/detail/components/index.ts
+++ b/client/src/app/instance/search/detail/components/index.ts
@@ -8,7 +8,9 @@
*/
import { DetailContentComponent } from './detail-content.component';
+import { DisplayDetailRendererComponent } from './display-detail-renderer.component';
export const dummiesComponents = [
- DetailContentComponent
+ DetailContentComponent,
+ DisplayDetailRendererComponent
];
diff --git a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/renderer/index.ts b/client/src/app/instance/search/detail/components/renderer/index.ts
similarity index 100%
rename from client/src/app/instance/search/detail/dynamic-content/dynamic-components/renderer/index.ts
rename to client/src/app/instance/search/detail/components/renderer/index.ts
diff --git a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-image.component.html b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-image.component.html
new file mode 100644
index 00000000..e443e913
--- /dev/null
+++ b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-image.component.html
@@ -0,0 +1 @@
+<img [src]="getValue()" alt="Not found" [ngStyle]="getStyle()">
\ No newline at end of file
diff --git a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-image.component.ts b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-image.component.ts
new file mode 100644
index 00000000..dec3191f
--- /dev/null
+++ b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-image.component.ts
@@ -0,0 +1,63 @@
+import { Component, Input } from '@angular/core';
+
+import { getHost } from 'src/app/shared/utils';
+import { Attribute, Dataset } from 'src/app/metamodel/models';
+import { AppConfigService } from 'src/app/app-config.service';
+
+@Component({
+ selector: 'app-display-image',
+ templateUrl: 'display-image.component.html'
+})
+export class DisplayImageComponent {
+ @Input() object: any;
+ @Input() attributeList: Attribute[];
+ @Input() dataset: Dataset;
+ @Input() attributeImageId: number;
+ @Input() type: string;
+ @Input() width: string;
+ @Input() height: string;
+
+ constructor(private appConfig: AppConfigService) { }
+
+ /**
+ * Returns source image.
+ *
+ * @return string
+ */
+ getValue(): string {
+ console.log(this.width);
+ if (this.type === 'fits') {
+ return `${this.appConfig.servicesUrl}/fits-to-png/${this.dataset.name}?filename=${this.getPath()}`
+ + `&stretch=linear&pmin=0.25&pmax=99.75&axes=true`;
+ } else if (this.type === 'image') {
+ return `${getHost(this.appConfig.apiUrl)}/dataset/${this.dataset.name}/file-explorer${this.getPath()}`;
+ } else {
+ return this.object[this.getAttributeImage().label] as string;
+ }
+ }
+
+ getPath() {
+ let path = this.object[this.getAttributeImage().label];
+ if (path[0] !== '/') {
+ path = '/' + path;
+ }
+ return path;
+ }
+
+ getAttributeImage() {
+ return this.attributeList.find(attribute => attribute.id === this.attributeImageId);
+ }
+
+ getStyle() {
+ let style = {
+ "width": '100%'
+ } as any;
+ if (this.width && this.height) {
+ style = {
+ "width": this.width,
+ "height": this.height
+ };
+ }
+ return style;
+ }
+}
diff --git a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-object.component.html b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-object.component.html
index c8eb0047..825ae5b0 100644
--- a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-object.component.html
+++ b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-object.component.html
@@ -1,6 +1,6 @@
<!-- Accordion families -->
<accordion [isAnimated]="true">
- <accordion-group *ngFor="let family of outputFamilyList" #ag [isOpen]="true" class="pl-2">
+ <accordion-group *ngFor="let family of getOutputFamilyList()" #ag [isOpen]="true" class="pl-2">
<button class="btn btn-link btn-block clearfix pb-2" accordion-heading>
<span class="pull-left float-left text-primary">
{{ family.label }}
diff --git a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-object.component.ts b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-object.component.ts
index cc088179..aeefb7d7 100644
--- a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-object.component.ts
+++ b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-object.component.ts
@@ -35,8 +35,14 @@ export class DisplayObjectComponent {
constructor(protected store: Store<{}>) { }
+ getOutputFamilyList() {
+ return this.outputFamilyList.filter(family => this.getOutputCategoryListByFamily(family.id).length > 0);
+ }
+
getOutputCategoryListByFamily(idOutputFamily: number): OutputCategory[] {
- return this.outputCategoryList.filter(outputCategory => outputCategory.id_output_family === idOutputFamily);
+ return this.outputCategoryList
+ .filter(outputCategory => outputCategory.id_output_family === idOutputFamily)
+ .filter(outputCategory => this.getAttributeListByOutputCategory(outputCategory.id).length > 0);
}
getAttributeListByOutputCategory(idOutputCategory: number): Attribute[] {
diff --git a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-value-by-attribute.component.html b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-value-by-attribute.component.html
new file mode 100644
index 00000000..035011ce
--- /dev/null
+++ b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-value-by-attribute.component.html
@@ -0,0 +1 @@
+{{ object[getAttributeById().label] }}
\ No newline at end of file
diff --git a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-value-by-attribute.component.ts b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-value-by-attribute.component.ts
new file mode 100644
index 00000000..e606b4b1
--- /dev/null
+++ b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-value-by-attribute.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+
+import { Attribute } from 'src/app/metamodel/models';
+
+@Component({
+ selector: 'app-display-value-by-attribute',
+ templateUrl: 'display-value-by-attribute.component.html'
+})
+export class DisplayValueByAttributeComponent {
+ @Input() object: any;
+ @Input() attributeList: Attribute[];
+ @Input() attributeId: number;
+
+ getAttributeById() {
+ return this.attributeList.find(attribute => attribute.id === this.attributeId);
+ }
+}
diff --git a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/index.ts b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/index.ts
index ce5f3daf..12808868 100644
--- a/client/src/app/instance/search/detail/dynamic-content/dynamic-components/index.ts
+++ b/client/src/app/instance/search/detail/dynamic-content/dynamic-components/index.ts
@@ -8,15 +8,17 @@
*/
import { DisplayObjectComponent } from './display-object.component';
+import { DisplayValueByAttributeComponent } from './display-value-by-attribute.component';
import { DisplayRaDecComponent } from './display-ra-dec.component';
import { DisplaySpectraComponent } from './display-spectra.component';
+import { DisplayImageComponent } from './display-image.component';
import { SpectraGraphComponent } from './spectra-graph/spectra-graph.component';
-import { DisplayDetailRendererComponent } from './display-detail-renderer.component';
export const dynamicComponents = [
DisplayObjectComponent,
+ DisplayValueByAttributeComponent,
DisplayRaDecComponent,
DisplaySpectraComponent,
- SpectraGraphComponent,
- DisplayDetailRendererComponent
+ DisplayImageComponent,
+ SpectraGraphComponent
];
--
GitLab