task/WG-96 add assets to original questionnaire code

angular/package.json

@@ -46,6 +46,7 @@
     "leaflet.markercluster": "^1.4.1",
     "mapillary-js": "^4.1.0",
     "ng-tapis": "2.1.6",
+    "ngx-owl-carousel-o": "^2.1.1",
     "ngx-toastr": "^11.3.3",
     "patch-package": "^6.4.7",
     "rxjs": "~6.5.3",

angular/src/app/app.module.ts

@@ -7,6 +7,7 @@ import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { ModalModule, BsDropdownModule, TooltipModule, TabsModule, PaginationModule } from 'ngx-foundation';
 import { FileSizeModule } from 'ngx-filesize';
 import { ApiModule } from 'ng-tapis';
+import { CarouselModule } from 'ngx-owl-carousel-o';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { MapComponent } from './components/map/map.component';
@@ -68,6 +69,7 @@ import { ModalStreetviewOrganizationComponent } from './components/modal-streetv
 import { StreetviewAssetDetailComponent } from './components/streetview-asset-detail/streetview-asset-detail.component';
 import { StreetviewFiltersComponent } from './components/streetview-filters/streetview-filters.component';
 import { ModalQuestionnaireViewerComponent } from './components/modal-questionnaire-viewer/modal-questionnaire-viewer.component';
+import { QuestionnaireDetailComponent } from './components/questionnaire-detail/questionnaire-detail.component';
 
 @NgModule({
   declarations: [
@@ -122,6 +124,7 @@ import { ModalQuestionnaireViewerComponent } from './components/modal-questionna
     StreetviewAssetDetailComponent,
     StreetviewFiltersComponent,
     ModalQuestionnaireViewerComponent,
+    QuestionnaireDetailComponent,
   ],
   imports: [
     CommonModule,
@@ -143,6 +146,7 @@ import { ModalQuestionnaireViewerComponent } from './components/modal-questionna
     ToastrModule.forRoot(),
     DragDropModule,
     PaginationModule.forRoot(),
+    CarouselModule,
   ],
   providers: [
     AuthService,

angular/src/app/components/asset-detail/asset-detail.component.html

@@ -13,44 +13,38 @@
         </div>
         <hr />
     </div>
-    <div class="cell medium-5 auto asset-detail-content">
+    <div class="cell medium-6 auto asset-detail-content">
         <img *ngIf="feature.featureType() === 'image'" [src]="featureSource" />
         <video *ngIf="feature.featureType() === 'video'" [src]="featureSource" controls width="100%"></video>
         <div style="position: relative" *ngIf="feature.featureType() === 'point_cloud'">
             <iframe class="e2e-iframe-trusted-src" [src]="safePointCloudUrl" style="width: 100%; height: 300px"> </iframe>
         </div>
-    </div>
-    <div class="cell medium-1 text-center asset-detail-action">
         <div *ngIf="feature.featureType() === 'questionnaire'">
-            <button class="button small" (click)="openQuestionnaireModal(feature)">View Questionnaire</button>
+            <app-questionnaire-detail [feature]="feature" [featureSource]="featureSource"></app-questionnaire-detail>
         </div>
+    </div>
+    <div class="cell medium-1 text-center asset-detail-action">
         <div *ngIf="feature.featureType() === 'image'">
             <a [href]="featureSource" download="feature-{{ feature.id }}.jpeg">
                 <button class="button small">Download</button>
             </a>
         </div>
-        <div class="cell medium-1 text-center asset-detail-action">
-            <div *ngIf="feature.featureType() === 'image'">
-                <a [href]="featureSource" download="feature-{{ feature.id }}.jpeg">
-                    <button class="button small">Download</button>
-                </a>
-            </div>
-            <div *ngIf="feature.featureType() === 'point_cloud'">
-                <a [href]="featureSource + '/index.html'" target="_blank">
-                    <button class="button small">View</button>
-                </a>
-            </div>
-            <div *ngIf="!feature.assets.length" class="text-center">
-                <div data-alert class="alert-box secondary">Feature has no asset.</div>
-                <button class="button expanded hollow" (click)="openFileBrowserModal()" *ngIf="!isPublicView">
-                    Add asset from DesignSafe
-                </button>
-            </div>
-            <hr />
+        <div *ngIf="feature.featureType() === 'point_cloud'">
+            <a [href]="featureSource + '/index.html'" target="_blank">
+                <button class="button small">View</button>
+            </a>
         </div>
-        <div class="cell medium-5 asset-detail-content">
-            <app-feature-metadata [feature]="feature"></app-feature-metadata>
-            <app-feature-geometry [feature]="feature"></app-feature-geometry>
+        <div *ngIf="feature.featureType() === 'questionnaire'">
+            <button class="button small" (click)="openQuestionnaireModal(feature)">View Questionnaire</button>
         </div>
+        <div *ngIf="!feature.assets.length" class="text-center">
+            <div data-alert class="alert-box secondary">Feature has no asset.</div>
+            <button class="button expanded hollow" (click)="openFileBrowserModal()" *ngIf="!isPublicView">Add asset from DesignSafe</button>
+        </div>
+        <hr />
+    </div>
+    <div class="cell medium-5 asset-detail-content">
+        <app-feature-metadata [feature]="feature"></app-feature-metadata>
+        <app-feature-geometry [feature]="feature"></app-feature-geometry>
     </div>
 </div>

angular/src/app/components/feature-metadata/feature-metadata.component.html

@@ -2,12 +2,14 @@
     <h6 class="">Metadata</h6>
 </div>
 <div class="grid-x grid-margin-x kv-table" *ngFor="let item of feature.properties | keyvalue">
-    <div class="cell small-4 text-left break">
-        <b>
-            <span> {{ item.key | titlecase }} </span></b
-        >
-    </div>
-    <div class="cell small-8 text-left break">
-        <code>{{ item.value | json }}</code>
-    </div>
+    <ng-container *ngIf="!item.key.startsWith('_hazmapper')">
+        <div class="cell small-4 text-left break">
+            <b
+                ><span>{{ item.key | titlecase }}</span></b
+            >
+        </div>
+        <div class="cell small-8 text-left break">
+            <code>{{ item.value | json }}</code>
+        </div>
+    </ng-container>
 </div>

angular/src/app/components/questionnaire-detail/questionnaire-detail.component.html

@@ -0,0 +1,10 @@
+<owl-carousel-o [options]="customOptions">
+    <ng-template carouselSlide *ngFor="let asset of assetImages">
+        <div class="slide">
+            <img [src]="asset.previewPath" [alt]="asset.filename" />
+            <div class="caption">
+                <h6>{{ asset.filename }}</h6>
+            </div>
+        </div>
+    </ng-template>
+</owl-carousel-o>

angular/src/app/components/questionnaire-detail/questionnaire-detail.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuestionnaireDetailComponent } from './questionnaire-detail.component';
+
+describe('QuestionnaireDetailComponent', () => {
+  let component: QuestionnaireDetailComponent;
+  let fixture: ComponentFixture<QuestionnaireDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [QuestionnaireDetailComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QuestionnaireDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular/src/app/components/questionnaire-detail/questionnaire-detail.component.styl

@@ -0,0 +1,4 @@
+@import "../../../variables.styl"
+  .caption
+    color #1f5c7a
+    font-size 0.8em

angular/src/app/components/questionnaire-detail/questionnaire-detail.component.ts

@@ -0,0 +1,49 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { OwlOptions } from 'ngx-owl-carousel-o';
+import { Feature } from '../../models/models';
+import { QuestionnaireAsset } from '../../models/questionnaire';
+
+@Component({
+  selector: 'app-questionnaire-detail',
+  templateUrl: './questionnaire-detail.component.html',
+  styleUrls: ['./questionnaire-detail.component.styl'],
+  providers: [],
+})
+export class QuestionnaireDetailComponent implements OnInit {
+  @Input() feature: Feature;
+  @Input() featureSource: string;
+  assetImages: Array<QuestionnaireAsset>;
+  customOptions: OwlOptions = {
+    items: 1,
+    loop: false,
+    autoplay: false,
+    nav: true,
+    dots: false,
+    responsive: {},
+    mouseDrag: true,
+    touchDrag: true,
+    pullDrag: true,
+    center: false,
+  };
+
+  constructor() {}
+
+  ngOnInit() {
+    // Retrieve asset images and map them to a new array with proper paths to full/preview images
+    this.assetImages = this.feature.properties._hazmapper.questionnaire.assets.map((asset) => {
+      const pathToFullImage = this.featureSource + '/' + asset.filename;
+      const fileExtension = pathToFullImage.substring(pathToFullImage.lastIndexOf('.'));
+      const pathWithoutExtension = pathToFullImage.substring(0, pathToFullImage.lastIndexOf('.'));
+      const pathToPreviewImage = `${pathWithoutExtension}.preview${fileExtension}`;
+
+      const filename = asset.filename.split('.');
+      filename.splice(filename.length - 1, 0, 'preview');
+      return {
+        filename: asset.filename,
+        coordinates: asset.coordinates,
+        path: pathToFullImage,
+        previewPath: pathToPreviewImage,
+      };
+    });
+  }
+}

angular/src/app/models/questionnaire.ts

@@ -0,0 +1,6 @@
+export interface QuestionnaireAsset {
+  filename: string;
+  coordinates: any;
+  path: string;
+  previewPath: string;
+}

angular/src/styles.styl

@@ -1,4 +1,4 @@
-// You can add global styles to this file, and also import other style files 
+// You can add global styles to this file, and also import other style files
 @import "~leaflet/dist/leaflet.css"
 @import "~@fortawesome/fontawesome-free/css/all.css"
 @import "~foundation-sites/dist/css/foundation.css"
@@ -7,8 +7,8 @@
 @import "~ngx-foundation/dist/css/ngx-foundation.css"
 @import '~ngx-toastr/toastr.css'
 @import url('https://unpkg.com/[email protected]/dist/mapillary.min.css')
-
-
+@import '~ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.css'
+@import '~ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.css'
 
 html
 body
@@ -17,11 +17,11 @@ h2
 h3
 h4
 h5
-h6 
+h6
     font-family Raleway
 
 
-.tooltip 
+.tooltip
   word-wrap break-word
 
 

angular/tsconfig.json

@@ -11,7 +11,7 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
-    "target": "es2015",
+    "target": "es2020",
     "typeRoots": [
       "node_modules/@types",
       "src/app/typings"