+
![]()
-
-
+
-
-
-
-
-
Feature has no asset.
-
-
-
+
-
-
-
+
+
+
+
Feature has no asset.
+
+
+
+
+
diff --git a/angular/src/app/components/feature-metadata/feature-metadata.component.html b/angular/src/app/components/feature-metadata/feature-metadata.component.html
index c6bddc7e..0637b8bd 100644
--- a/angular/src/app/components/feature-metadata/feature-metadata.component.html
+++ b/angular/src/app/components/feature-metadata/feature-metadata.component.html
@@ -2,12 +2,14 @@
Metadata
-
-
- {{ item.key | titlecase }}
-
-
- {{ item.value | json }}
-
+
+
+
+ {{ item.key | titlecase }}
+
+
+
+ {{ item.value | json }}
+
+
diff --git a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.ts b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.ts
index d27ab96b..38715d31 100644
--- a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.ts
+++ b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.ts
@@ -19,7 +19,8 @@ export class ModalQuestionnaireViewerComponent implements OnInit {
ngOnInit() {
this.projectService.activeProject.subscribe((p) => {
this.geoDataService.getFeatureAssetSource(this.feature, '/questionnaire.rq').subscribe((featureSource: any) => {
- const questionnaire = QuestionnaireBuilder.renderQuestionnaire(featureSource);
+ const asset_path = this.geoDataService.getFeatureAssetSourcePath(this.feature);
+ const questionnaire = QuestionnaireBuilder.renderQuestionnaire(featureSource, asset_path);
$('#questionnaire-view').after(questionnaire); // Insert new elements after
![]()
});
});
diff --git a/angular/src/app/components/questionnaire-detail/questionnaire-detail.component.html b/angular/src/app/components/questionnaire-detail/questionnaire-detail.component.html
new file mode 100644
index 00000000..49d27a78
--- /dev/null
+++ b/angular/src/app/components/questionnaire-detail/questionnaire-detail.component.html
@@ -0,0 +1,10 @@
+
+
+
+
![]()
+
+
{{ asset.filename }}
+
+
diff --git a/angular/src/app/components/questionnaire-detail/questionnaire-detail.component.spec.ts b/angular/src/app/components/questionnaire-detail/questionnaire-detail.component.spec.ts
new file mode 100644
index 00000000..c45af8a0
--- /dev/null
+++ b/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
;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [QuestionnaireDetailComponent],
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(QuestionnaireDetailComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/angular/src/app/components/questionnaire-detail/questionnaire-detail.component.styl b/angular/src/app/components/questionnaire-detail/questionnaire-detail.component.styl
new file mode 100644
index 00000000..469be7dd
--- /dev/null
+++ b/angular/src/app/components/questionnaire-detail/questionnaire-detail.component.styl
@@ -0,0 +1,4 @@
+@import "../../../variables.styl"
+ .caption
+ color #1f5c7a
+ font-size 0.8em
diff --git a/angular/src/app/components/questionnaire-detail/questionnaire-detail.component.ts b/angular/src/app/components/questionnaire-detail/questionnaire-detail.component.ts
new file mode 100644
index 00000000..bde5917e
--- /dev/null
+++ b/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;
+ 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,
+ };
+ });
+ }
+}
diff --git a/angular/src/app/models/questionnaire.ts b/angular/src/app/models/questionnaire.ts
new file mode 100644
index 00000000..554fe980
--- /dev/null
+++ b/angular/src/app/models/questionnaire.ts
@@ -0,0 +1,6 @@
+export interface QuestionnaireAsset {
+ filename: string;
+ coordinates: any;
+ path: string;
+ previewPath: string;
+}
diff --git a/angular/src/app/services/geo-data.service.ts b/angular/src/app/services/geo-data.service.ts
index 61d9baed..508b7943 100644
--- a/angular/src/app/services/geo-data.service.ts
+++ b/angular/src/app/services/geo-data.service.ts
@@ -536,10 +536,31 @@ export class GeoDataService {
});
}
- getFeatureAssetSource(feature: Feature, optionalPath = null) {
+ /**
+ * Get the source path for a feature asset.
+ *
+ * @param feature - The feature for which to get the source path (assumes that there is a single asset).
+ * @param optionalPath - An optional additional path to append to the source path.
+ * @returns The source path for the feature asset.
+ */
+ getFeatureAssetSourcePath(feature: Feature, optionalPath: string | null = null): string {
const baseFeatureSource = this.envService.apiUrl + '/assets/' + feature.assets[0].path;
- const featureSource = optionalPath ? baseFeatureSource + optionalPath : baseFeatureSource;
- return this.http.get(featureSource, { headers: { 'content-type': 'application/json' } });
+ const featureSourcePath = optionalPath ? baseFeatureSource + optionalPath : baseFeatureSource;
+ return featureSourcePath;
+ }
+
+ /**
+ * Get the feature source
+ *
+ * Note: only supports json
+ *
+ * @param feature - The feature for which to get the source path (assumes that there is a single asset).
+ * @param optionalPath - An optional additional path to append to the source path.
+ * @returns The source path for the feature asset.
+ */
+ getFeatureAssetSource(feature: Feature, optionalPath = null) {
+ const featureSourcePath = this.getFeatureAssetSourcePath(feature, optionalPath);
+ return this.http.get(featureSourcePath, { headers: { 'content-type': 'application/json' } });
}
public get qmsSearchResults(): Observable> {
diff --git a/angular/src/app/utils/questionnaireBuilder.ts b/angular/src/app/utils/questionnaireBuilder.ts
index 2dbc1ce4..6c2d8ad0 100644
--- a/angular/src/app/utils/questionnaireBuilder.ts
+++ b/angular/src/app/utils/questionnaireBuilder.ts
@@ -560,7 +560,7 @@ QuestionnaireBuilder.ASSET_EMBEDDING_DEFAULT = true;
QuestionnaireBuilder.ALLOW_BACK_DEFAULT = true;
QuestionnaireBuilder.EDITABLE_DEFAULT = false;
-QuestionnaireBuilder.renderQuestionnaire = function(questionnaire_json) {
+QuestionnaireBuilder.renderQuestionnaire = function(questionnaire_json, asset_path) {
/** Method to generate read only questionnaire for viewing in DesignSafe
*
* Takes a json object containing questionnaire structure and responses
@@ -569,7 +569,7 @@ QuestionnaireBuilder.renderQuestionnaire = function(questionnaire_json) {
*
* **/
- const questionnaire = new Questionnaire(questionnaire_json);
+ const questionnaire = new Questionnaire(questionnaire_json, asset_path);
if (questionnaire) { return questionnaire.renderView(); }
};
@@ -583,10 +583,17 @@ class Questionnaire {
MAP_ADDED_TO_PANEL;
embedded_asset_map;
embedded_asset_uuids;
+ asset_path;
+
+ constructor(metadata, asset_path) {
+
- constructor(metadata) {
- // add metadata
const qnaire = this;
+
+ // add base path to assets
+ qnaire.asset_path = asset_path
+
+ // add metadata
for (const property in metadata) { qnaire[property] = metadata[property]; }
qnaire.num_questions = 0;
@@ -901,7 +908,7 @@ class Question {
parent_question;
decline;
responseStrings;
- assetUuids;
+ assets;
constructor(
metadata,
@@ -1075,24 +1082,16 @@ class Question {
/** !!!!! This method will need to be updated to get embedded assets to work in designsafe !!!!! **/
addEmbeddedAssets(container) {
const question = this;
-
- if (question.hasOwnProperty('assetUuids')) {
- if (question.assetUuids) {
- if (question.assetUuids.length) {
- for (const uuid of question.assetUuids) {
- // let asset = Assets.getAsset(uuid);
-
- // TODO modify this url path to work with DesingSafe
- // let url =
- // Parameters.deployment === 'live'
- // ? 'https://rapid.apl.uw.edu' + asset.file_url
- // : 'https://rapid2.apl.uw.edu' + asset.file_url;
+ if (question.hasOwnProperty('assets')) {
+ if (question.assets) {
+ if (question.assets.length) {
+ for (const asset of question.assets) {
+ const url = question.parent_template.asset_path + '/' + asset.filename;
DOM.new({
tag: 'img',
class: 'embeddedAssetViewImg',
- // src: url,
- src: 'https://google.com',
+ src: url,
parent: container,
children: [
{
@@ -1610,7 +1609,7 @@ class SingleAnswer extends Question {
* has been added
* **/
- // question.addEmbeddedAssets(container)
+ question.addEmbeddedAssets(container)
}
}
class MultiAnswer extends SingleAnswer {
@@ -1727,7 +1726,7 @@ class MultiAnswer extends SingleAnswer {
$(view).insertAfter($(option_element));
}
- // question.addEmbeddedAssets(container)
+ question.addEmbeddedAssets(container)
}
getResponse(viewer_option) {
@@ -2165,7 +2164,7 @@ class MultiText extends Question {
i++;
}
- // question.addEmbeddedAssets(container)
+ question.addEmbeddedAssets(container)
if (!question.is_sub_question) {
$(view).appendTo($(container));
@@ -2400,7 +2399,7 @@ class NumberField extends Question {
parent: item,
});
- // question.addEmbeddedAssets(container)
+ question.addEmbeddedAssets(container)
if (!question.is_sub_question) {
$(view).appendTo($(container));
@@ -2737,7 +2736,7 @@ class LocationField extends Question {
question.responseStrings[2]
);
- // question.addEmbeddedAssets(container)
+ question.addEmbeddedAssets(container)
}
}
class RangeAnswer extends Question {
@@ -2990,7 +2989,7 @@ class RangeAnswer extends Question {
'optionSelected'
);
- // question.addEmbeddedAssets(container)
+ question.addEmbeddedAssets(container)
if (!question.is_sub_question) {
$(view).appendTo($(container));
@@ -3296,7 +3295,7 @@ class Matrix extends Question {
}
}
- // question.addEmbeddedAssets(container)
+ question.addEmbeddedAssets(container)
$(view).appendTo(container);
}
@@ -3403,7 +3402,7 @@ class TextPage extends Question {
const question = this;
const view = $(this.read_only_view);
$(view).find('p.questionNumber').html(question.scroll_label);
- // question.addEmbeddedAssets(container)
+ question.addEmbeddedAssets(container)
$(view).appendTo(container);
}
}
diff --git a/angular/src/environments/environment.ts b/angular/src/environments/environment.ts
index 5e7f677d..6dda6877 100644
--- a/angular/src/environments/environment.ts
+++ b/angular/src/environments/environment.ts
@@ -3,7 +3,9 @@
// The list of file replacements can be found in `angular.json`.
import { jwt as devJWT } from './jwt';
+import { dev_env as devEnv } from './jwt';
import { EnvironmentType } from '../environments/environmentType';
+console.log(devEnv);
export interface AppEnvironment {
jwt?: string;
@@ -12,7 +14,7 @@ export interface AppEnvironment {
}
export const environment: AppEnvironment = {
- backend: EnvironmentType.Local,
+ backend: devEnv,
jwt: devJWT,
production: false,
};
diff --git a/angular/src/styles.styl b/angular/src/styles.styl
index 05bf6587..88da74f0 100644
--- a/angular/src/styles.styl
+++ b/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/mapillary-js@2.18.0/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
diff --git a/angular/tsconfig.json b/angular/tsconfig.json
index 12838d6a..5931e529 100644
--- a/angular/tsconfig.json
+++ b/angular/tsconfig.json
@@ -11,7 +11,7 @@
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
- "target": "es2015",
+ "target": "es2020",
"typeRoots": [
"node_modules/@types",
"src/app/typings"