highlight modified fields in suggestion form

Author: neodes-h

app/public/js/location_report.js

@@ -169,7 +169,22 @@ function suggestionButtonClicked() {
 	});
 }
 
+function highlightDiffField(id) {
+	var element = document.getElementById(id);
+	element.addEventListener("change",function(event){
+		if(element.dataset.value != element.value){
+			$(element).addClass('highlight');
+		} else {
+			$(element).removeClass('highlight');
+		}
+	})
+}
+
 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/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>