Finish first early version of "pictures for products" (references #58)

migrations/0040.sql

@@ -0,0 +1,2 @@
+ALTER TABLE products
+ADD picture_file_name TEXT;

public/js/grocy.js

@@ -177,6 +177,42 @@ Grocy.Api.Post = function(apiFunction, jsonData, success, error)
 	xhr.send(JSON.stringify(jsonData));
 };
 
+Grocy.Api.UploadFile = function(fileInput, group, success, error)
+{
+	if (fileInput[0].files.length === 0)
+	{
+		return;
+	}
+
+	var xhr = new XMLHttpRequest();
+	var url = U('/api/files/upload/' + group + '?file_name=' + encodeURIComponent(fileInput[0].files[0].name));
+
+	xhr.onreadystatechange = function()
+	{
+		if (xhr.readyState === XMLHttpRequest.DONE)
+		{
+			if (xhr.status === 200)
+			{
+				if (success)
+				{
+					success(JSON.parse(xhr.responseText));
+				}
+			}
+			else
+			{
+				if (error)
+				{
+					error(xhr);
+				}
+			}
+		}
+	};
+
+	xhr.open('POST', url, true);
+	xhr.setRequestHeader('Content-type', 'application/octet-stream');
+	xhr.send(fileInput[0].files[0]);
+};
+
 Grocy.FrontendHelpers = { };
 Grocy.FrontendHelpers.ValidateForm = function(formId)
 {

public/viewjs/productform.js

@@ -9,12 +9,34 @@
 		redirectDestination = returnTo + '?createdproduct=' + encodeURIComponent($('#name').val());
 	}
 
+	var jsonData = $('#product-form').serializeJSON();
+	if ($("#product-picture")[0].files.length > 0)
+	{
+		jsonData.picture_file_name = $("#product-picture")[0].files[0].name;
+	}
+
 	if (Grocy.EditMode === 'create')
 	{
-		Grocy.Api.Post('add-object/products', $('#product-form').serializeJSON(),
+		Grocy.Api.Post('add-object/products', jsonData,
 			function(result)
 			{
-				window.location.href = redirectDestination;
+				if (jsonData.hasOwnProperty("picture_file_name"))
+				{
+					Grocy.Api.UploadFile($("#product-picture"), 'productpictures',
+						function(result)
+						{
+							window.location.href = redirectDestination;
+						},
+						function(xhr)
+						{
+							Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
+						}
+					);
+				}
+				else
+				{
+					window.location.href = redirectDestination;
+				}
 			},
 			function(xhr)
 			{
@@ -24,10 +46,26 @@
 	}
 	else
 	{
-		Grocy.Api.Post('edit-object/products/' + Grocy.EditObjectId, $('#product-form').serializeJSON(),
+		Grocy.Api.Post('edit-object/products/' + Grocy.EditObjectId, jsonData,
 			function(result)
 			{
-				window.location.href = redirectDestination;
+				if (jsonData.hasOwnProperty("picture_file_name"))
+				{
+					Grocy.Api.UploadFile($("#product-picture"), 'productpictures',
+						function(result)
+						{
+							window.location.href = redirectDestination;
+						},
+						function(xhr)
+						{
+							Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
+						}
+					);
+				}
+				else
+				{
+					window.location.href = redirectDestination;
+				}
 			},
 			function(xhr)
 			{

public/viewjs/stockoverview.js

@@ -141,6 +141,17 @@ $(document).on('click', '.product-consume-button', function(e)
 	);
 });
 
+$(document).on("click", ".show-product-picture-button", function(e)
+{
+	var pictureUrl = $(e.currentTarget).attr("data-picture-url");
+	var productName = $(e.currentTarget).attr("data-product-name");
+
+	bootbox.alert({
+		title: L("Image of product #1", productName),
+		message: "<img src='" + pictureUrl + "' class='img-fluid'>"
+	});
+});
+
 function RefreshStatistics()
 {
 	Grocy.Api.Get('stock/get-current-stock',

views/productform.blade.php

@@ -108,6 +108,16 @@
 				'additionalHtmlElements' => '<p id="qu-conversion-info" class="form-text text-muted small d-none"></p>'
 			))
 
+			<div class="form-group">
+				<label for="product-picture">{{ $L('Product picture') }}</label>
+				<input type="file" class="form-control-file" id="product-picture" accept="image/*">
+				
+				@if(!empty($product->picture_file_name))
+					<label class="mt-2">{{ $L('Current picture') }}</label>
+					<img src="{{ $U('/api/files/get/productpictures?file_name=' . $product->picture_file_name) }}" class="img-fluid">
+				@endif
+			</div>
+
 			<button id="save-product-button" class="btn btn-success">{{ $L('Save') }}</button>
 		</form>
 	</div>

views/stockoverview.blade.php

@@ -74,6 +74,11 @@
 							data-consume-amount="{{ $currentStockEntry->amount }}">
 							<i class="fas fa-utensils"></i> {{ $L('All') }}
 						</a>
+						<a id="product-{{ $currentStockEntry->product_id }}-show-product-picture-button" class="btn btn-info btn-sm show-product-picture-button @if(empty(FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->picture_file_name)) disabled @endif" href="#"
+							data-picture-url="{{ $U('/api/files/get/productpictures?file_name=' . FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->picture_file_name) }}"
+							data-product-name="{{ FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->name }}">
+							<i class="fas fa-image"></i>
+						</a>
 					</td>
 					<td>
 						{{ FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->name }}