Merge pull request #3606 from ProjectSidewalk/3595-validate-add-open-…

…comment-for-agree

Adds optional comment box for agree validations

app/views/newValidateBeta.scala.html

@@ -190,6 +190,11 @@ <h3>@Messages("validate.mission.complete.category")</h3>
  </div>
  </div>
  </div>
+ <div id="validate-optional-comment-section" class="right-ui-section">
+ <div id="optional-comment-input" class="input-group input-group-sm validate-text-input">
+ <input type="text" class="form-control" placeholder="Add optional comment" id="add-optional-comment" size="36" aria-label="Add optional comment">
+ </div>
+ </div>
  <div id="validate-why-no-section" class="right-ui-section">
  <div id="validate-why-not-header" class="right-ui-header">Why not?</div>
  <div id="no-reason-options">
@@ -201,7 +206,7 @@ <h3>@Messages("validate.mission.complete.category")</h3>
  </div>
  </div>
  </div>
- <div id="validate-why-unsure-section" class="right-ui-section validate-why-unsure-section">
+ <div id="validate-why-unsure-section" class="right-ui-section">
  <div id="validate-why-unsure-header" class="right-ui-header">Why 'Unsure'?</div>
  <div id="unsure-reason-options">
  <button id="unsure-button-1" class="validation-reason-button"></button>
@@ -212,7 +217,7 @@ <h3>@Messages("validate.mission.complete.category")</h3>
  </div>
  </div>
  </div>
- <div id="validate-submit-section" class="right-ui-section button-section validate-submit-section">
+ <div id="validate-submit-section" class="right-ui-section button-section">
  <button id="new-validate-beta-back-button" class="new-validate-beta-button-small">Back</button>
  <button id="new-validate-beta-submit-button" class="new-validate-beta-button-small">Submit</button>
  </div>

public/javascripts/SVValidate/src/Main.js

@@ -75,6 +75,8 @@ function Main (param) {
 
  svv.ui.newValidateBeta.tagsMenu = $("#validate-tags-section");
  svv.ui.newValidateBeta.severityMenu = $("#validate-severity-section");
+ svv.ui.newValidateBeta.optionalCommentSection = $("#validate-optional-comment-section");
+ svv.ui.newValidateBeta.optionalCommentTextBox = $("#add-optional-comment");
  svv.ui.newValidateBeta.noMenu = $("#validate-why-no-section");
  svv.ui.newValidateBeta.disagreeReasonOptions = $("#no-reason-options");
  svv.ui.newValidateBeta.disagreeReasonTextBox = $("#add-disagree-comment")

public/javascripts/SVValidate/src/keyboard/Keyboard.js

@@ -19,6 +19,7 @@ function Keyboard(menuUI) {
  // Set the addingComment status based on whether the user is currently typing in a validation comment text field.
  function checkIfTextAreaSelected() {
  if (document.activeElement === menuUI.comment[0] ||
+ (svv.newValidateBeta && document.activeElement === svv.ui.newValidateBeta.optionalCommentTextBox[0]) ||
  (svv.newValidateBeta && document.activeElement === svv.ui.newValidateBeta.disagreeReasonTextBox[0]) ||
  (svv.newValidateBeta && document.activeElement === svv.ui.newValidateBeta.unsureReasonTextBox[0]) ||
  (svv.newValidateBeta && document.activeElement === document.getElementById('select-tag-selectized'))) {

public/javascripts/SVValidate/src/label/Label.js

@@ -44,6 +44,7 @@ function Label(params) {
  newSeverity: undefined,
  oldTags: undefined,
  newTags: undefined,
+ agreeComment: '',
  disagreeOption: undefined,
  disagreeReasonTextBox: '',
  unsureOption: undefined,

public/javascripts/SVValidate/src/menu/RightMenu.js

@@ -74,11 +74,12 @@ function RightMenu(menuUI) {
  };
  }
 
- // Log clicks to disagree and unsure text boxes.
+ // Log clicks to the three text boxes.
+ menuUI.optionalCommentTextBox.click(function() { svv.tracker.push('Click=AgreeCommentTextbox'); });
  menuUI.disagreeReasonTextBox.click(function() { svv.tracker.push('Click=DisagreeReasonTextbox'); });
  menuUI.unsureReasonTextBox.click(function() { svv.tracker.push('Click=UnsureReasonTextbox'); });
 
- // Add oninput for disagree and unsure other reason text box.
+ // Add oninput for disagree and unsure other reason text boxes.
  menuUI.disagreeReasonTextBox.on('input', function() {
  if (menuUI.disagreeReasonTextBox.val() === '') {
  menuUI.disagreeReasonTextBox.removeClass('chosen');
@@ -113,6 +114,8 @@ function RightMenu(menuUI) {
  menuUI.unsureButton.removeClass('chosen');
  menuUI.tagsMenu.css('display', 'none');
  menuUI.severityMenu.css('display', 'none');
+ menuUI.optionalCommentSection.css('display', 'none');
+ menuUI.optionalCommentTextBox.val('');
 
  // Update the text on each disagree button.
  menuUI.noMenu.css('display', 'none');
@@ -157,6 +160,8 @@ function RightMenu(menuUI) {
  menuUI.submitButton.prop('disabled', true);
  } else {
  // This is a validation that they are going back to, so update all the views to match what they had before.
+ menuUI.optionalCommentTextBox.val(label.getProperty('agreeComment'));
+
  let disagreeOption = label.getProperty('disagreeOption');
  $disagreeReasonButtons.removeClass('chosen');
  if (disagreeOption === 'other') {
@@ -197,6 +202,7 @@ function RightMenu(menuUI) {
  // Pedestrian Signal label type doesn't have severity ratings.
  menuUI.severityMenu.css('display', 'block');
  }
+ menuUI.optionalCommentSection.css('display', 'block');
  menuUI.noMenu.css('display', 'none');
  menuUI.unsureMenu.css('display', 'none');
  menuUI.submitButton.prop('disabled', false);
@@ -308,6 +314,7 @@ function RightMenu(menuUI) {
 
  function saveValidationState() {
  let currLabel = svv.panorama.getCurrentLabel();
+ currLabel.setProperty('agreeComment', menuUI.optionalCommentTextBox.val());
  currLabel.setProperty('disagreeReasonTextBox', menuUI.disagreeReasonTextBox.val());
  currLabel.setProperty('unsureReasonTextBox', menuUI.unsureReasonTextBox.val());
  }
@@ -333,7 +340,9 @@ function RightMenu(menuUI) {
 
  // Fill in the comment based on the disagree options they picked or one of the free form text boxes.
  let comment = '';
- if (action === 'Disagree') {
+ if (action === 'Agree') {
+ comment = currLabel.getProperty('agreeComment');
+ } else if (action === 'Disagree') {
  let disagreeReason = currLabel.getProperty('disagreeOption');
  if (disagreeReason === 'other') {
  comment = currLabel.getProperty('disagreeReasonTextBox');

public/stylesheets/newValidateBeta.css

@@ -146,7 +146,7 @@
  display: block;
 }
 
-.validate-submit-section {
+#validate-submit-section {
  display: flex;
  justify-content: space-between;
  margin-top: auto; /* Pushes the section to the bottom of the right-ui-holder. */
@@ -424,6 +424,10 @@
  gap: 20px; /* This can be used to control the distance between the severity icons. */
 }
 
+#optional-comment-input {
+ margin-top: 0px; /* Overrides .validate-text-input margin, since the textbox for agreeing looks different. */
+}
+
 #no-reason-options, #unsure-reason-options {
  display: flex;
  flex-direction: column;