add gauge comment to correlation details component and flow tab

AmericanWhitewater · Dec 18, 2024 · ca6cf50 · ca6cf50
1 parent 56c4d0e
commit ca6cf50
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/src/app/views/river-detail/components/edit-flows/components/correlation-details.vue b/src/app/views/river-detail/components/edit-flows/components/correlation-details.vue
@@ -67,10 +67,17 @@
 
       <div class="correlation-fields">
         <div>
-          <label for="isPrimary" class="bx--label">Primary Gauge</label>
+          <label for="isPrimary" class="bx--label">Primary gauge</label>
           <input v-model="isPrimary" type="checkbox" :disabled="!editing" >
         </div>
 
+        <div class="mb-spacing-sm">
+          <cv-text-input v-if="editing" v-model="comment" label="Correlation comment:" class="correlation-comment" />
+          <template v-else-if="comment">
+            <label for="comment" class="bx--label">Correlation comment:</label>
+            <p v-text="comment" />
+          </template>
+        </div>
 
         <hr>
 
@@ -195,6 +202,7 @@ export default {
         beginHighRunnable: null,
         endHighRunnable: null,
       },
+      comment: null,
       isPrimary: undefined,
       saving: false,
       errors: [],
@@ -276,6 +284,7 @@ export default {
         gaugeSource: this.correlation?.gaugeInfo.gaugeSource,
         gaugeSourceIdentifier: this.correlation?.gaugeInfo.gaugeSourceIdentifier,
         forcePrimary: this.isPrimary ? 'force-primary' : null,
+        comment: this.comment,
         correlationDetails: processedDetails || null
       }
     },
@@ -394,6 +403,7 @@ export default {
       }
 
       this.isPrimary = this.correlation.isPrimary;
+      this.comment = this.correlation.comment;
     }
   }
 }

diff --git a/src/app/views/river-detail/components/flow-tab/flow-tab.vue b/src/app/views/river-detail/components/flow-tab/flow-tab.vue
@@ -97,6 +97,11 @@
                         <cv-skeleton-text headline/>
                       </template>
                       <template v-else>
+                        <div v-if="gauge.comment" class="gauge-comment bx--tile bx--type-caption">
+                          <label class="bx--label">Correlation comment</label>
+                          <br>
+                          <span v-text="gauge.comment" />
+                        </div>
                         <div v-if="gauge.gaugeInfo.externalSourceLinks" class="gauge-links">
                           <h6 class="mb-spacing-sm">View at source:</h6>
                           <cv-link v-if="gauge.gaugeInfo.externalSourceLinks.sourceLink"