task/WG-173:show asset image alongside question in the questionnaire (#…

…165) * Show asset images with questions * Fix prettier errors * Remove reduntant types from JSDoc strings
TACC-Cloud · Nov 3, 2023 · e69b999 · e69b999
1 parent bbbc869
commit e69b999
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 31 deletions.
diff --git a/...lar/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.ts b/...lar/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 <img>
       });
     });

diff --git 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<Array<any>> {

diff --git 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);
   }
 }