From 101355cae286d9930ea6cd11585409cfc1154823 Mon Sep 17 00:00:00 2001
From: Bernd Bestel <bernd@berrnd.de>
Date: Tue, 21 Jan 2020 22:44:04 +0100
Subject: [PATCH] Added day summary (costs and calories) to the meal plan
 (closes #502)

---
 changelog/55_UNRELEASED_2019-xx-xx.md |  3 ++-
 public/viewjs/mealplan.js             | 31 ++++++++++++++++++++++-----
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/changelog/55_UNRELEASED_2019-xx-xx.md b/changelog/55_UNRELEASED_2019-xx-xx.md
index 431b8f4f..6cac5ac3 100644
--- a/changelog/55_UNRELEASED_2019-xx-xx.md
+++ b/changelog/55_UNRELEASED_2019-xx-xx.md
@@ -23,8 +23,9 @@
 ### Recipe improvements
 - When adding or editing a recipe ingredient, a dialog is now used instead of switching between pages (thanks @kriddles)
 
-### Meal plan fixes
+### Meal plan improvements/fixes
 - Added that the calories per serving are now also shown
+- Added that the total costs and calories per day are displayed in the header of each day column
 - Fixed that when `FEATURE_FLAG_STOCK_PRICE_TRACKING` was set to `false`, prices were still shown (thanks @kriddles)
 - Fixed that the week costs were missing for the weeks 1 - 9 of a year
 
diff --git a/public/viewjs/mealplan.js b/public/viewjs/mealplan.js
index fb565cdd..489a930c 100644
--- a/public/viewjs/mealplan.js
+++ b/public/viewjs/mealplan.js
@@ -29,7 +29,7 @@ var calendar = $("#calendar").fullCalendar({
 			UpdateUriParam("week", view.start.format("YYYY-MM-DD"));
 		}
 
-		$(".fc-day-header").append('<a class="ml-1 btn btn-outline-dark btn-xs my-1 add-recipe-button" href="#"><i class="fas fa-plus"></i></a>');
+		$(".fc-day-header").prepend('<a class="mr-1 btn btn-outline-dark btn-xs my-1 add-recipe-button" href="#"><i class="fas fa-plus"></i></a>');
 
 		var weekRecipeName = view.start.year().toString() + "-" + ((view.start.week() - 1).toString().padStart(2, "0")).toString();
 		var weekRecipe = FindObjectInArrayByPropertyValue(internalRecipes, "name", weekRecipeName);
@@ -97,14 +97,14 @@ var calendar = $("#calendar").fullCalendar({
 			fulfillmentInfoHtml = __t('Not enough in stock');
 			var fulfillmentIconHtml = '<i class="fas fa-times text-danger"></i>';
 		}
-		var costAndCaloriesPerServing = ""
+		var costsAndCaloriesPerServing = ""
 		if (Grocy.FeatureFlags.GROCY_FEATURE_FLAG_STOCK_PRICE_TRACKING)
 		{
-			costAndCaloriesPerServing = '<h5 class="small text-truncate"><span class="locale-number locale-number-currency">' + resolvedRecipe.costs + '</span> / <span class="locale-number locale-number-generic">' + resolvedRecipe.calories + '</span> kcal ' + __t('per serving') + '<h5>';
+			costsAndCaloriesPerServing = '<h5 class="small text-truncate"><span class="locale-number locale-number-currency">' + resolvedRecipe.costs + '</span> / <span class="locale-number locale-number-generic">' + resolvedRecipe.calories + '</span> kcal ' + __t('per serving') + '<h5>';
 		}
 		else
 		{
-			costAndCaloriesPerServing = '<h5 class="small text-truncate"><span class="locale-number locale-number-generic">' + resolvedRecipe.calories + '</span> kcal ' + __t('per serving') + '<h5>';
+			costsAndCaloriesPerServing = '<h5 class="small text-truncate"><span class="locale-number locale-number-generic">' + resolvedRecipe.calories + '</span> kcal ' + __t('per serving') + '<h5>';
 		}
 
 		element.html(' \
@@ -112,7 +112,7 @@ var calendar = $("#calendar").fullCalendar({
 				<h5 class="text-truncate">' + recipe.name + '<h5> \
 				<h5 class="small text-truncate">' + __n(mealPlanEntry.servings, "%s serving", "%s servings") + '</h5> \
 				<h5 class="small timeago-contextual text-truncate">' + fulfillmentIconHtml + " " + fulfillmentInfoHtml + '</h5> \
-				' + costAndCaloriesPerServing + ' \
+				' + costsAndCaloriesPerServing + ' \
 				<h5> \
 					<a class="ml-1 btn btn-outline-danger btn-xs remove-recipe-button" href="#"><i class="fas fa-trash"></i></a> \
 					<a class="ml-1 btn btn-outline-primary btn-xs recipe-order-missing-button ' + recipeOrderMissingButtonDisabledClasses + '" href="#" data-toggle="tooltip" title="' + __t("Put missing products on shopping list") + '" data-recipe-id="' + recipe.id.toString() + '" data-recipe-name="' + recipe.name + '" data-recipe-type="' + recipe.type + '"><i class="fas fa-cart-plus"></i></a> \
@@ -125,6 +125,27 @@ var calendar = $("#calendar").fullCalendar({
 		{
 			element.html(element.html() + '<div class="mx-auto"><img data-src="' + U("/api/files/recipepictures/") + btoa(recipe.picture_file_name) + '?force_serve_as=picture&best_fit_width=400" class="img-fluid lazy"></div>')
 		}
+
+		var dayRecipeName = event.start.format("YYYY-MM-DD");
+		if (!$("#day-summary-" + dayRecipeName).length) // This runs for every event/recipe, so maybe multiple times per day, so only add the day summary once
+		{	
+			var dayRecipe = FindObjectInArrayByPropertyValue(internalRecipes, "name", dayRecipeName);
+			if (dayRecipe != null)
+			{
+				var dayRecipeResolved = FindObjectInArrayByPropertyValue(recipesResolved, "recipe_id", dayRecipe.id);
+
+				var costsAndCaloriesPerDay = ""
+				if (Grocy.FeatureFlags.GROCY_FEATURE_FLAG_STOCK_PRICE_TRACKING)
+				{
+					costsAndCaloriesPerDay = '<h5 class="small text-truncate"><span class="locale-number locale-number-currency">' + dayRecipeResolved.costs + '</span> / <span class="locale-number locale-number-generic">' + dayRecipeResolved.calories + '</span> kcal ' + '<h5>';
+				}
+				else
+				{
+					costsAndCaloriesPerDay = '<h5 class="small text-truncate"><span class="locale-number locale-number-generic">' + dayRecipeResolved.calories + '</span> kcal ' + '<h5>';
+				}
+				$(".fc-day-header[data-date='" + dayRecipeName + "']").append('<h5 id="day-summary-' + dayRecipeName + '" class="small text-truncate border-top pt-1 pb-0">' + costsAndCaloriesPerDay + '</h5>');
+			}
+		}
 	},
 	"eventAfterAllRender": function(view)
 	{