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

This commit is contained in:
Bernd Bestel 2018-09-30 23:22:17 +02:00
parent e5fb609c8e
commit 44cd26ae77
No known key found for this signature in database
GPG Key ID: 71BD34C0D4891300
6 changed files with 106 additions and 4 deletions

2
migrations/0040.sql Normal file
View File

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

View File

@ -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)
{

View File

@ -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)
{

View File

@ -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',

View File

@ -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>

View File

@ -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 }}