feat: Prevention - On the fly quality checks in the product edit form (…

…#8258)
openfoodfacts · May 3, 2023 · 89da8ff · 89da8ff
1 parent 2a3244f
commit 89da8ff
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 1 deletion.
diff --git a/templates/web/pages/product_edit/product_edit_form_display.tt.html b/templates/web/pages/product_edit/product_edit_form_display.tt.html
@@ -226,7 +226,9 @@ <h1>[% title %]</h1>
                                     </td>
 
                                             <td class="nutriment_col" [% column_display_style_nutrition_data %]>
-                                                <input class="nutriment_value nutriment_value_as_sold" id="nutriment_[% nutriment.enid %]" name="nutriment_[% nutriment.enid %]" value="[% nutriment.value %]" [% nutriment.disabled %] autocomplete="off"/>
+                                                <input class="nutriment_value nutriment_value_as_sold soft-background" id="nutriment_[% nutriment.enid %]" name="nutriment_[% nutriment.enid %]" value="[% nutriment.value %]" [% nutriment.disabled %] autocomplete="off"/>
+                                                <span id="nutriment_question_mark_[% nutriment.enid %]" class="question_mark">?</span>
+                                                <span id="nutriment_sugars_warning_[% nutriment.enid %]" class="sugars_warning">Please enter a valid value.</span>
                                             </td>
                                             <td class="nutriment_col_prepared" [% column_display_style_nutrition_data_prepared %]>
                                                 <input class="nutriment_value nutriment_value_prepared" id="nutriment_[% nutriment.enidp %]" name="nutriment_[% nutriment.enidp %]" value="[% nutriment.valuep %]" [% nutriment.disabled %] autocomplete="off"/>
@@ -347,4 +349,44 @@ <h1>[% title %]</h1>
 
 
 </body>
+
+<style>
+.question_mark {
+    display: none;
+    position: relative;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: #999;
+    color: #fff;
+    text-align: center;
+    font-weight: bold;
+    cursor: help;
+}
+
+.sugars_warning {
+  display: none;
+  position: absolute;
+  left: 16%;
+  transform: translateX(50%);
+  padding: 0.5em;
+  background-color: #333;
+  color: #fff;
+  font-size: 0.8em;
+  white-space: nowrap;
+  margin-top: 1%;
+}
+
+.soft-background {
+    background-color: #f5f5f5;
+}
+
+.question_mark:hover + .sugars_warning {
+    display: inline-block;
+}
+
+.question_mark:hover {
+    opacity: 0.7;
+}
+</style>
 <!-- end templates/[% template.name %] -->
diff --git a/templates/web/pages/product_edit/product_edit_form_display.tt.js b/templates/web/pages/product_edit/product_edit_form_display.tt.js
@@ -34,3 +34,67 @@
 		\$('#nutrition_data_div').show();
 	}
 });
+
+function show_warning(should_show, nutrient_id, warning_message){
+	if(should_show) {
+		\$('#nutriment_'+nutrient_id).css("background-color", "rgb(255 237 235)");
+		\$('#nutriment_question_mark_'+nutrient_id).css("display", "inline-table");
+		\$('#nutriment_sugars_warning_'+nutrient_id).text(warning_message);
+	}else {
+		\$('#nutriment_'+nutrient_id).css("background-color", "white");
+		\$('#nutriment_question_mark_'+nutrient_id).css("display", "none");
+	}
+}
+
+var sugars_value;
+var carbohydrates_value;
+var saturated_fats_value;
+var fat_value;
+
+var required_nutrients_id = ['energy-kj', 'energy-kcal', 'fat', 'saturated-fat', 'sugars', 'carbohydrates', 'fiber', 'proteins', 'salt', 'sodium', 'alcohol'];
+
+required_nutrients_id.forEach(nutrient_id => {
+	\$('#nutriment_' + nutrient_id).on('input', function() {
+		var nutrient_value = \$(this).val();
+		var is_above_or_below_100 = isNaN(nutrient_value) || nutrient_value < 0 || nutrient_value > 100;
+		show_warning(is_above_or_below_100, nutrient_id, "Please enter a value between 0 and 100");
+
+		var crutial_nutrients = ['fat', 'saturated-fat', 'sugars', 'carbohydrates'];
+
+		if (crutial_nutrients.includes(nutrient_id)) {
+			switch(nutrient_id) {
+				case "saturated-fat":
+					saturated_fats_value = nutrient_value;
+					break;
+				case "sugars":
+					sugars_value = nutrient_value;
+					break;
+				case "carbohydrates":
+					carbohydrates_value = nutrient_value;
+					break;
+				case "fat":
+					fat_value = nutrient_value;
+					break;
+			}
+
+			if(!fat_value) {
+				fat_value = \$('#nutriment_fat').val();
+			}
+			if(!carbohydrates_value){
+				carbohydrates_value = \$('#nutriment_carbohydrates').val();
+			}
+			if(!sugars_value) {
+				sugars_value = \$('#nutriment_sugars').val();
+			}
+			if(!saturated_fats_value) {
+				saturated_fats_value = \$('#nutriment_saturated-fat').val();
+			}
+
+			var is_sugars_above_carbohydrates = carbohydrates_value < sugars_value;
+			show_warning(is_sugars_above_carbohydrates, 'sugars', 'Sugars should not be higher than carbohydrates');
+
+			var is_fat_above_saturated_fats = fat_value < saturated_fats_value;
+			show_warning(is_fat_above_saturated_fats, 'saturated-fat', 'Saturated fats should not be higher than fat');
+		}
+	});
+});