Merge pull request #686 from Henry-Hao/issue-669

Issue 669

Author: joshi1983

app/public/js/location_report.js

@@ -2,6 +2,7 @@
 location_report.js is used in the report on a single location, 
 pages/location_report/collapsed.blade.php.
 */
+var suggestion_counter = 0;
 function initMap() {
 	var map = new google.maps.Map(document.getElementById('map'), {
 	  zoom: 15,
@@ -114,6 +115,14 @@ function setSuggestionMessage(msg, is_warning) {
 	}
 }
 
+function resetHighlight(){
+	$('#location-name').val($('#location-name').data('value'));
+	$('#address').val($('#address').data('value'));
+	$('#phone-number').val($('#phone-number').data('value'));
+	$('#url').val($('#url').data('value'));
+	$('.highlight').removeClass('highlight');
+}
+
 function suggestionSubmitted(r) {
 	setSuggestionMessage("Suggestion has been created.", false);
 
@@ -164,12 +173,44 @@ function suggestionButtonClicked() {
 			'url': url
 		},
 		'url': '/api/add-suggestion',
+		'beforeSend': function(jqXHR,settings) {
+			$('button').prop('disabled',true);
+		},
 		'success': suggestionSubmitted,
-		'error': suggestionFailed
+		'error': suggestionFailed,
+		'complete': function(jqXHR,textStatus) {
+			$('button').prop('disabled',false);
+			resetHighlight();
+		}
 	});
 }
 
+function highlightDiffField(id) {
+	$('#' + id).bind('input', function(event){
+		//highlight modified suggestion fields
+		if($(this).data('value') != $(this).val()){
+			if(!$(this).hasClass('highlight'))
+				suggestion_counter += 1;
+			$(this).addClass('highlight');
+		} else {
+			if($(this).hasClass('highlight'))
+				suggestion_counter -= 1;
+			$(this).removeClass('highlight');
+		}
+		// disable submit button when there is no difference in the fields
+		if(suggestion_counter > 0)
+			$("#suggestionFormConfirm").prop("disabled",false);
+		else
+			$("#suggestionFormConfirm").prop("disabled",true);
+
+	})
+}
+
 function setupSuggestionFeature() {
+	highlightDiffField("location-name");
+	highlightDiffField("phone-number");
+	highlightDiffField("address");
+	highlightDiffField("url");
 	$("#suggestionFormConfirm").click(suggestionButtonClicked);
 }
 

app/resources/assets/sass/_location_map_report.scss

@@ -37,6 +37,10 @@ This is where to put SCSS for the location report that shows a map.
 	}
 }
 
+.highlight {
+	background-color: rgba(77, 121, 255,0.3) !important;
+}
+
 .suggestion-form {
 	label {
 		margin-top: 7px;

app/resources/views/pages/location_report/collapsed.blade.php

@@ -151,7 +151,7 @@
 					<button type="button" class="btn btn-default" 
 						data-dismiss="modal">Close
 					</button>
-					<button type="button" class="btn btn-primary" id="suggestionFormConfirm">
+					<button type="button" class="btn btn-primary" id="suggestionFormConfirm" disabled>
 						Confirm
 					</button>
 					</div>

app/resources/views/pages/location_report/suggestion_form.blade.php

@@ -8,25 +8,25 @@
 			<div class="col-sm-6 col-xs-12">
 				<div class="input-group">
 					<label for="location-name">Location name:</label>
-					<input type="text" class="form-control"  name="location-name" id="location-name" value="{{ $location->name }}" required>
+					<input type="text" class="form-control"  name="location-name" id="location-name" data-value="{{ $location->name }}" value="{{ $location->name }}" required>
 				</div>
 			</div>
 			<div class="col-sm-6 col-xs-12">
 				<div class="input-group">
 					<label for="phone-number">Phone number:</label>
-					<input type="tel" class="form-control" name="phone-number" id="phone-number" value="{{ $location->phone_number }}">
+					<input type="tel" class="form-control" name="phone-number" id="phone-number" data-value="{{ $location->phone_number }}" value="{{ $location->phone_number }}">
 				</div>
 			</div>
 			<div class="col-xs-12">
 				<div class="input-group">
 					<label for="address">Address:</label>
-					<input type="text" class="form-control" name="address" id="address" value="{{ $location->address }}" required>
+					<input type="text" class="form-control" name="address" id="address" data-value="{{ $location->address }}" value="{{ $location->address }}" required>
 				</div>
 			</div>
 			<div class="col-xs-12">
 				<div class="input-group">
 					<label for="url">External website:</label>
-					<input type="url" class="form-control" name="url" id="url" value="{{ $location->external_web_url }}">
+					<input type="url" class="form-control" name="url" id="url" data-value="{{ $location->external_web_url }}" value="{{ $location->external_web_url }}">
 				</div>
 			</div>
 		</div>