Purchase price hints

public/viewjs/purchase.js

@@ -161,6 +161,8 @@ if (Grocy.Components.ProductPicker !== undefined)
 						Grocy.Components.LocationPicker.SetId(productDetails.location.id);
 					}
 
+					$('#amount_qu_unit').attr("qu-factor-purchase-to-stock", productDetails.product.qu_factor_purchase_to_stock);
+					$('#amount_qu_unit').attr("quantity-unit-stock-name", productDetails.quantity_unit_stock.name);
 					if (productDetails.product.qu_id_purchase === productDetails.product.qu_id_stock)
 					{
 						$('#amount_qu_unit').text(productDetails.quantity_unit_purchase.name);
@@ -170,6 +172,12 @@ if (Grocy.Components.ProductPicker !== undefined)
 						$('#amount_qu_unit').text(productDetails.quantity_unit_purchase.name + " (" + __t("will be multiplied by a factor of %1$s to get %2$s", parseFloat(productDetails.product.qu_factor_purchase_to_stock).toLocaleString({ minimumFractionDigits: 0, maximumFractionDigits: 2 }), __n(2, productDetails.quantity_unit_stock.name, productDetails.quantity_unit_stock.name_plural)) + ")");
 					}
 
+					var priceTypeUnitPrice = $("#price-type-unit-price");
+					var priceTypeUnitPriceLabel = $("[for=" + priceTypeUnitPrice.attr("id") + "]");
+					priceTypeUnitPriceLabel.text(productDetails.quantity_unit_purchase.name + " price");
+
+					refreshPriceHint();
+
 					if (productDetails.product.allow_partial_units_in_stock == 1)
 					{
 						$("#amount").attr("min", "0.01");
@@ -320,8 +328,24 @@ if (Grocy.Components.DateTimePicker)
 	});
 }
 
+$('#price').on('change', function(e)
+{
+	refreshPriceHint();
+});
+
+$('#price-type-unit-price').on('change', function(e)
+{
+	refreshPriceHint();
+});
+
+$('#price-type-total-price').on('change', function(e)
+{
+	refreshPriceHint();
+});
+
 $('#amount').on('change', function(e)
 {
+	refreshPriceHint();
 	Grocy.FrontendHelpers.ValidateForm('purchase-form');
 });
 
@@ -330,6 +354,42 @@ if (GetUriParam("flow") === "shoppinglistitemtostock")
 	$('#amount').val(parseFloat(GetUriParam("amount")).toLocaleString({ minimumFractionDigits: 0, maximumFractionDigits: 4 }));
 }
 
+function refreshPriceHint()
+{
+
+	if ($('#amount').val() == 0)
+	{
+		$('#price-hint').text("");
+		return;
+	}
+	if ($('#price').val() == 0)
+	{
+		$('#price-hint').text("");
+		return;
+	}
+
+	if ($("input[name='price-type']:checked").val() == "total-price")
+	{
+		var priceTypeUnitPrice = $("#price-type-unit-price");
+		var priceTypeUnitPriceLabel = $("[for=" + priceTypeUnitPrice.attr("id") + "]");
+		var price = $('#price').val() / $('#amount').val();
+
+		$('#price-hint').text('(will result with ' + priceTypeUnitPriceLabel.text() + ' cost of ' + price.toFixed(2) + ')');
+	}
+	else
+	{
+		if (document.getElementById("amount_qu_unit").getAttribute("qu-factor-purchase-to-stock") > 1)
+		{
+			var price = $('#price').val() / document.getElementById("amount_qu_unit").getAttribute("qu-factor-purchase-to-stock");
+			$('#price-hint').text('(will result with ' + document.getElementById("amount_qu_unit").getAttribute("quantity-unit-stock-name") + ' cost of ' + price.toFixed(2) + ')');
+		}
+		else
+		{
+			$('#price-hint').text("");
+		}
+	}
+};
+
 function UndoStockBooking(bookingId)
 {
 	Grocy.Api.Post('stock/bookings/' + bookingId.toString() + '/undo', { },

views/purchase.blade.php

@@ -76,14 +76,14 @@
 				'min' => 0,
 				'step' => 0.01,
 				'value' => '',
-				'hint' => $__t('in %s and based on the purchase quantity unit', GROCY_CURRENCY),
+				'hintId' => 'price-hint',
 				'invalidFeedback' => $__t('The price cannot be lower than %s', '0'),
 				'isRequired' => false,
 				'additionalGroupCssClasses' => 'mb-1'
 			))
 			<div class="form-check form-check-inline mb-3">
 				<input class="form-check-input" type="radio" name="price-type" id="price-type-unit-price" value="unit-price" checked>
-				<label class="form-check-label" for="price-type-unit-price">{{ $__t('Unit price') }}</label>
+				<label class="form-check-label" for="price-type-unit-price">{{ $__t('Price') }}</label>
 			</div>
 			<div class="form-check form-check-inline mb-3">
 				<input class="form-check-input" type="radio" name="price-type" id="price-type-total-price" value="total-price">