Make it possible to add pictures to recipes (closes #136)

migrations/0050.sql

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

public/viewjs/recipeform.js

@@ -5,11 +5,51 @@
 	var jsonData = $('#recipe-form').serializeJSON();
 	Grocy.FrontendHelpers.BeginUiBusy("recipe-form");
 
+	if ($("#recipe-picture")[0].files.length > 0)
+	{
+		var someRandomStuff = Math.random().toString(36).substring(2, 100) + Math.random().toString(36).substring(2, 100);
+		jsonData.picture_file_name = someRandomStuff + $("#recipe-picture")[0].files[0].name;
+	}
+
+	if (Grocy.DeleteRecipePictureOnSave)
+	{
+		jsonData.picture_file_name = null;
+
+		Grocy.Api.DeleteFile(Grocy.RecipePictureFileName, 'recipepictures', {},
+			function (result)
+			{
+				// Nothing to do
+			},
+			function (xhr)
+			{
+				Grocy.FrontendHelpers.EndUiBusy("recipe-form");
+				Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
+			}
+		);
+	}
+
 	Grocy.Api.Put('objects/recipes/' + Grocy.EditObjectId, jsonData,
+		function(result)
+		{
+			if (jsonData.hasOwnProperty("picture_file_name") && !Grocy.DeleteRecipePictureOnSave)
+			{
+				Grocy.Api.UploadFile($("#recipe-picture")[0].files[0], 'recipepictures', jsonData.picture_file_name,
 					function(result)
 					{
 						window.location.href = U('/recipes');
 					},
+					function (xhr)
+					{
+						Grocy.FrontendHelpers.EndUiBusy("recipe-form");
+						Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
+					}
+				);
+			}
+			else
+			{
+				window.location.href = U('/recipes');
+			}
+		},
 		function(xhr)
 		{
 			Grocy.FrontendHelpers.EndUiBusy("recipe-form");
@@ -306,6 +346,15 @@ $('#save-recipe-include-button').on('click', function(e)
 	}
 });
 
+Grocy.DeleteRecipePictureOnSave = false;
+$('#delete-current-recipe-picture-button').on('click', function (e)
+{
+	Grocy.DeleteRecipePictureOnSave = true;
+	$("#current-recipe-picture").addClass("d-none");
+	$("#delete-current-recipe-picture-on-save-hint").removeClass("d-none");
+	$("#delete-current-recipe-picture-button").addClass("disabled");
+});
+
 $('#description').summernote({
 	minHeight: '300px',
 	lang: L('summernote_locale')

views/recipeform.blade.php

@@ -29,6 +29,10 @@
 
 		@if($mode == 'edit')
 			<script>Grocy.EditObjectId = {{ $recipe->id }};</script>
+
+			@if(!empty($recipe->picture_file_name))
+				<script>Grocy.RecipePictureFileName = '{{ $recipe->picture_file_name }}';</script>
+			@endif
 		@endif
 	</div>
 </div>
@@ -48,6 +52,15 @@
 				<textarea id="description" class="form-control" name="description">@if($mode == 'edit'){{ $recipe->description }}@endif</textarea>
 			</div>
 
+			<div class="form-group">
+				<label for="recipe-picture">{{ $L('Picture') }}</label>
+				<div class="custom-file">
+					<input type="file" class="custom-file-input" id="recipe-picture" accept="image/*">
+					<label class="custom-file-label" for="recipe-picture">{{ $L('No file selected') }}</label>
+				</div>
+				<p class="form-text text-muted small">{{ $L('If you don\'t select a file, the current picture will not be altered') }}</p>
+			</div>
+
 			<button id="save-recipe-button" class="btn btn-success">{{ $L('Save') }}</button>
 
 		</form>
@@ -147,6 +160,19 @@
 				</table>
 			</div>
 		</div>
+
+		<div class="row mt-5">
+			<div class="col">
+				<label class="mt-2">{{ $L('Current picture') }}</label>
+				<button id="delete-current-recipe-picture-button" class="btn btn-sm btn-danger @if(empty($recipe->picture_file_name)) disabled @endif"><i class="fas fa-trash"></i> {{ $L('Delete') }}</button>
+				@if(!empty($recipe->picture_file_name))
+					<p><img id="current-recipe-picture" src="{{ $U('/api/files/recipepictures/' . base64_encode($recipe->picture_file_name)) }}" class="img-fluid img-thumbnail mt-2"></p>
+					<p id="delete-current-recipe-picture-on-save-hint" class="form-text text-muted font-italic d-none">{{ $L('The current picture will be deleted when you save the recipe') }}</p>
+				@else
+					<p id="no-current-recipe-picture-hint" class="form-text text-muted font-italic">{{ $L('No picture available') }}</p>
+				@endif
+			</div>
+		</div>
 	</div>
 </div>
 

views/recipes.blade.php

@@ -73,6 +73,10 @@
 					<h3 class="mb-0">{{ $selectedRecipeSubRecipe->name }}</h3>
 				</div>
 
+				@if(!empty($selectedRecipeSubRecipe->picture_file_name))
+					<p><img src="{{ $U('/api/files/recipepictures/' . base64_encode($selectedRecipeSubRecipe->picture_file_name)) }}" class="img-fluid"></p>
+				@endif
+
 				@php $selectedRecipeSubRecipePositionsFiltered = FindAllObjectsInArrayByPropertyValue($selectedRecipeSubRecipesPositions, 'recipe_id', $selectedRecipeSubRecipe->id); @endphp
 				@if(count($selectedRecipeSubRecipePositionsFiltered) > 0)
 				<div class="card-body">
@@ -105,6 +109,10 @@
 			@endforeach
 
 			<!-- Selected recipe -->
+			@if(!empty($selectedRecipe->picture_file_name))
+				<p><img src="{{ $U('/api/files/recipepictures/' . base64_encode($selectedRecipe->picture_file_name)) }}" class="img-fluid"></p>
+			@endif
+
 			@if($selectedRecipePositions->count() > 0)
 			<div class="card-body">
 				<h5 class="mb-0">{{ $L('Ingredients') }}</h5>