#88 => Add detail page dynamics components

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
 ];

client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-image.component.html

+<img [src]="getValue()" alt="Not found" [ngStyle]="getStyle()">
\ No newline at end of file

client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-image.component.ts

+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;
+    }
+}

client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-object.component.html

 <!-- 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 }}

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[] {

client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-value-by-attribute.component.html

+{{ object[getAttributeById().label] }}
\ No newline at end of file

client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-value-by-attribute.component.ts

+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);
+    }
+}

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
 ];