From f6649d51bd3092e54d31522089773aedae22dc10 Mon Sep 17 00:00:00 2001
From: Bernd Bestel <bernd@berrnd.de>
Date: Sat, 5 Jan 2019 20:06:35 +0100
Subject: [PATCH] Finalize loading speed improvements for all data tables (this
 now closes #120)

This is a workaround for now. The tables are still DOM sourced because of too big dependencies between server side rendering and frontend JS code. The tables are initially load while tbody is hidden, this results in a speedup by around 65 %.
---
 public/viewjs/batteries.js         | 1 +
 public/viewjs/batteriesjournal.js  | 1 +
 public/viewjs/batteriesoverview.js | 1 +
 public/viewjs/chores.js            | 1 +
 public/viewjs/choresjournal.js     | 1 +
 public/viewjs/choresoverview.js    | 1 +
 public/viewjs/equipment.js         | 1 +
 public/viewjs/locations.js         | 1 +
 public/viewjs/manageapikeys.js     | 1 +
 public/viewjs/productgroups.js     | 1 +
 public/viewjs/products.js          | 1 +
 public/viewjs/quantityunits.js     | 1 +
 public/viewjs/recipeform.js        | 2 ++
 public/viewjs/recipes.js           | 1 +
 public/viewjs/shoppinglist.js      | 1 +
 public/viewjs/stockjournal.js      | 1 +
 public/viewjs/taskcategories.js    | 1 +
 public/viewjs/tasks.js             | 1 +
 public/viewjs/users.js             | 1 +
 views/batteries.blade.php          | 2 +-
 views/batteriesjournal.blade.php   | 2 +-
 views/batteriesoverview.blade.php  | 2 +-
 views/chores.blade.php             | 2 +-
 views/choresjournal.blade.php      | 2 +-
 views/choresoverview.blade.php     | 2 +-
 views/equipment.blade.php          | 2 +-
 views/locations.blade.php          | 2 +-
 views/manageapikeys.blade.php      | 2 +-
 views/productgroups.blade.php      | 2 +-
 views/products.blade.php           | 2 +-
 views/quantityunits.blade.php      | 2 +-
 views/recipeform.blade.php         | 4 ++--
 views/recipes.blade.php            | 2 +-
 views/shoppinglist.blade.php       | 2 +-
 views/stockjournal.blade.php       | 2 +-
 views/taskcategories.blade.php     | 2 +-
 views/tasks.blade.php              | 2 +-
 views/users.blade.php              | 2 +-
 38 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/public/viewjs/batteries.js b/public/viewjs/batteries.js
index abd8df4e..79232da6 100644
--- a/public/viewjs/batteries.js
+++ b/public/viewjs/batteries.js
@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#batteries-table tbody').removeClass("d-none");
 
 $("#search").on("keyup", function()
 {
diff --git a/public/viewjs/batteriesjournal.js b/public/viewjs/batteriesjournal.js
index cf97c552..98b79f2e 100644
--- a/public/viewjs/batteriesjournal.js
+++ b/public/viewjs/batteriesjournal.js
@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#batteries-journal-table tbody').removeClass("d-none");
 
 $("#battery-filter").on("change", function()
 {
diff --git a/public/viewjs/batteriesoverview.js b/public/viewjs/batteriesoverview.js
index a96e0cc8..a4d095b0 100644
--- a/public/viewjs/batteriesoverview.js
+++ b/public/viewjs/batteriesoverview.js
@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#batteries-overview-table tbody').removeClass("d-none");
 
 $("#search").on("keyup", function()
 {
diff --git a/public/viewjs/chores.js b/public/viewjs/chores.js
index 539f81e7..6cc6fcbb 100644
--- a/public/viewjs/chores.js
+++ b/public/viewjs/chores.js
@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#chores-table tbody').removeClass("d-none");
 
 $("#search").on("keyup", function()
 {
diff --git a/public/viewjs/choresjournal.js b/public/viewjs/choresjournal.js
index 0899fa7e..2d7e382c 100644
--- a/public/viewjs/choresjournal.js
+++ b/public/viewjs/choresjournal.js
@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#chores-journal-table tbody').removeClass("d-none");
 
 $("#chore-filter").on("change", function()
 {
diff --git a/public/viewjs/choresoverview.js b/public/viewjs/choresoverview.js
index 5a15a66e..a786edf0 100644
--- a/public/viewjs/choresoverview.js
+++ b/public/viewjs/choresoverview.js
@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#chores-overview-table tbody').removeClass("d-none");
 
 $("#search").on("keyup", function()
 {
diff --git a/public/viewjs/equipment.js b/public/viewjs/equipment.js
index 1f2a21d5..436c381b 100644
--- a/public/viewjs/equipment.js
+++ b/public/viewjs/equipment.js
@@ -21,6 +21,7 @@
 		DisplayEquipment($('#equipment-table tbody tr:eq(0)').data("equipment-id"));
 	}
 });
+$('#equipment-table tbody').removeClass("d-none");
 
 equipmentTable.on('select', function(e, dt, type, indexes)
 {
diff --git a/public/viewjs/locations.js b/public/viewjs/locations.js
index 578a7663..2d17a685 100644
--- a/public/viewjs/locations.js
+++ b/public/viewjs/locations.js
@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#locations-table tbody').removeClass("d-none");
 
 $("#search").on("keyup", function()
 {
diff --git a/public/viewjs/manageapikeys.js b/public/viewjs/manageapikeys.js
index 20fd6438..869793d0 100644
--- a/public/viewjs/manageapikeys.js
+++ b/public/viewjs/manageapikeys.js
@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#apikeys-table tbody').removeClass("d-none");
 
 var createdApiKeyId = GetUriParam('CreatedApiKeyId');
 if (createdApiKeyId !== undefined)
diff --git a/public/viewjs/productgroups.js b/public/viewjs/productgroups.js
index ccd3f9b6..b35a2aff 100644
--- a/public/viewjs/productgroups.js
+++ b/public/viewjs/productgroups.js
@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#productgroups-table tbody').removeClass("d-none");
 
 $("#search").on("keyup", function()
 {
diff --git a/public/viewjs/products.js b/public/viewjs/products.js
index 838c725d..9b81e238 100644
--- a/public/viewjs/products.js
+++ b/public/viewjs/products.js
@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#products-table tbody').removeClass("d-none");
 
 $("#search").on("keyup", function()
 {
diff --git a/public/viewjs/quantityunits.js b/public/viewjs/quantityunits.js
index 6cfba9a0..e0067d30 100644
--- a/public/viewjs/quantityunits.js
+++ b/public/viewjs/quantityunits.js
@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#quantityunits-table tbody').removeClass("d-none");
 
 $("#search").on("keyup", function()
 {
diff --git a/public/viewjs/recipeform.js b/public/viewjs/recipeform.js
index 9a0a52c0..630e5ff3 100644
--- a/public/viewjs/recipeform.js
+++ b/public/viewjs/recipeform.js
@@ -43,6 +43,7 @@ var recipesPosTables = $('#recipes-pos-table').DataTable({
 		dataSrc: 4
 	}
 });
+$('#recipes-pos-table tbody').removeClass("d-none");
 
 var recipesIncludesTables = $('#recipes-includes-table').DataTable({
 	'paginate': false,
@@ -64,6 +65,7 @@ var recipesIncludesTables = $('#recipes-includes-table').DataTable({
 		});
 	}
 });
+$('#recipes-includes-table tbody').removeClass("d-none");
 
 Grocy.FrontendHelpers.ValidateForm('recipe-form');
 $("#name").focus();
diff --git a/public/viewjs/recipes.js b/public/viewjs/recipes.js
index 2b46c16b..f86d217a 100644
--- a/public/viewjs/recipes.js
+++ b/public/viewjs/recipes.js
@@ -23,6 +23,7 @@
 		this.api().row({ order: 'current' }, 0).select();
 	}
 });
+$('#recipes-table tbody').removeClass("d-none");
 
 var rowSelect = GetUriParam("row");
 if (typeof rowSelect !== "undefined")
diff --git a/public/viewjs/shoppinglist.js b/public/viewjs/shoppinglist.js
index 7bd6bc1c..db6bf1f6 100644
--- a/public/viewjs/shoppinglist.js
+++ b/public/viewjs/shoppinglist.js
@@ -23,6 +23,7 @@
 		dataSrc: 3
 	}
 });
+$('#shoppinglist-table tbody').removeClass("d-none");
 
 $("#search").on("keyup", function()
 {
diff --git a/public/viewjs/stockjournal.js b/public/viewjs/stockjournal.js
index 66f03869..8ac12b4e 100644
--- a/public/viewjs/stockjournal.js
+++ b/public/viewjs/stockjournal.js
@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#stock-journal-table tbody').removeClass("d-none");
 
 $("#product-filter").on("change", function()
 {
diff --git a/public/viewjs/taskcategories.js b/public/viewjs/taskcategories.js
index aab0687a..8429be5e 100644
--- a/public/viewjs/taskcategories.js
+++ b/public/viewjs/taskcategories.js
@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#taskcategories-table tbody').removeClass("d-none");
 
 $("#search").on("keyup", function()
 {
diff --git a/public/viewjs/tasks.js b/public/viewjs/tasks.js
index 38633309..f072444c 100644
--- a/public/viewjs/tasks.js
+++ b/public/viewjs/tasks.js
@@ -22,6 +22,7 @@
 		dataSrc: 3
 	}
 });
+$('#tasks-table tbody').removeClass("d-none");
 
 $("#search").on("keyup", function()
 {
diff --git a/public/viewjs/users.js b/public/viewjs/users.js
index 1492ced1..01603509 100644
--- a/public/viewjs/users.js
+++ b/public/viewjs/users.js
@@ -18,6 +18,7 @@
 		});
 	}
 });
+$('#users-table tbody').removeClass("d-none");
 
 $("#search").on("keyup", function()
 {
diff --git a/views/batteries.blade.php b/views/batteries.blade.php
index 17bfd658..3105ee27 100644
--- a/views/batteries.blade.php
+++ b/views/batteries.blade.php
@@ -35,7 +35,7 @@
 					<th>{{ $L('Charge cycle interval (days)') }}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($batteries as $battery)
 				<tr>
 					<td class="fit-content">
diff --git a/views/batteriesjournal.blade.php b/views/batteriesjournal.blade.php
index e8a5f2a9..11f901cc 100644
--- a/views/batteriesjournal.blade.php
+++ b/views/batteriesjournal.blade.php
@@ -37,7 +37,7 @@
 					<th>{{ $L('Tracked time') }}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($chargeCycles as $chargeCycleEntry)
 				<tr class="@if($chargeCycleEntry->undone == 1) text-muted @endif">
 					<td class="fit-content">
diff --git a/views/batteriesoverview.blade.php b/views/batteriesoverview.blade.php
index 711f8125..5a8da551 100644
--- a/views/batteriesoverview.blade.php
+++ b/views/batteriesoverview.blade.php
@@ -48,7 +48,7 @@
 					<th class="d-none">Hidden status</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($current as $curentBatteryEntry)
 				<tr id="battery-{{ $curentBatteryEntry->battery_id }}-row" class="@if(FindObjectInArrayByPropertyValue($batteries, 'id', $curentBatteryEntry->battery_id)->charge_interval_days > 0 && $curentBatteryEntry->next_estimated_charge_time < date('Y-m-d H:i:s')) table-danger @elseif(FindObjectInArrayByPropertyValue($batteries, 'id', $curentBatteryEntry->battery_id)->charge_interval_days > 0 && $curentBatteryEntry->next_estimated_charge_time < date('Y-m-d H:i:s', strtotime("+$nextXDays days"))) table-warning @endif">
 					<td class="fit-content">
diff --git a/views/chores.blade.php b/views/chores.blade.php
index 8705e789..cd2cab94 100644
--- a/views/chores.blade.php
+++ b/views/chores.blade.php
@@ -35,7 +35,7 @@
 				<th>{{ $L('Description') }}</th>
 			</tr>
 		</thead>
-		<tbody>
+		<tbody class="d-none">
 			@foreach($chores as $chore)
 			<tr>
 				<td class="fit-content">
diff --git a/views/choresjournal.blade.php b/views/choresjournal.blade.php
index 951ad9bc..fc3c8667 100644
--- a/views/choresjournal.blade.php
+++ b/views/choresjournal.blade.php
@@ -38,7 +38,7 @@
 					<th>{{ $L('Done by') }}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($choresLog as $choreLogEntry)
 				<tr class="@if($choreLogEntry->undone == 1) text-muted @endif">
 					<td class="fit-content">
diff --git a/views/choresoverview.blade.php b/views/choresoverview.blade.php
index 22d53502..d13b8a32 100644
--- a/views/choresoverview.blade.php
+++ b/views/choresoverview.blade.php
@@ -48,7 +48,7 @@
 					<th class="d-none">Hidden status</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($currentChores as $curentChoreEntry)
 				<tr id="chore-{{ $curentChoreEntry->chore_id }}-row" class="@if(FindObjectInArrayByPropertyValue($chores, 'id', $curentChoreEntry->chore_id)->period_type === \Grocy\Services\ChoresService::CHORE_TYPE_DYNAMIC_REGULAR && $curentChoreEntry->next_estimated_execution_time < date('Y-m-d H:i:s')) table-danger @elseif(FindObjectInArrayByPropertyValue($chores, 'id', $curentChoreEntry->chore_id)->period_type === \Grocy\Services\ChoresService::CHORE_TYPE_DYNAMIC_REGULAR && $curentChoreEntry->next_estimated_execution_time < date('Y-m-d H:i:s', strtotime("+$nextXDays days"))) table-warning @endif">
 					<td class="fit-content">
diff --git a/views/equipment.blade.php b/views/equipment.blade.php
index e1284e85..8f2057d3 100644
--- a/views/equipment.blade.php
+++ b/views/equipment.blade.php
@@ -24,7 +24,7 @@
 					<th>{{ $L('Name') }}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($equipment as $equipmentItem)
 				<tr data-equipment-id="{{ $equipmentItem->id }}">
 					<td>
diff --git a/views/locations.blade.php b/views/locations.blade.php
index 93bb0cff..e2d3ae3d 100644
--- a/views/locations.blade.php
+++ b/views/locations.blade.php
@@ -33,7 +33,7 @@
 					<th>{{ $L('Description') }}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($locations as $location)
 				<tr>
 					<td class="fit-content">
diff --git a/views/manageapikeys.blade.php b/views/manageapikeys.blade.php
index f1b82aa5..e876d52b 100644
--- a/views/manageapikeys.blade.php
+++ b/views/manageapikeys.blade.php
@@ -40,7 +40,7 @@
 					<th>{{ $L('Created') }}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($apiKeys as $apiKey)
 				<tr id="apiKeyRow_{{ $apiKey->id }}">
 					<td class="fit-content">
diff --git a/views/productgroups.blade.php b/views/productgroups.blade.php
index b0b1da9f..f8f42d32 100644
--- a/views/productgroups.blade.php
+++ b/views/productgroups.blade.php
@@ -33,7 +33,7 @@
 					<th>{{ $L('Description') }}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($productGroups as $productGroup)
 				<tr>
 					<td class="fit-content">
diff --git a/views/products.blade.php b/views/products.blade.php
index 39018364..b6b6f262 100644
--- a/views/products.blade.php
+++ b/views/products.blade.php
@@ -41,7 +41,7 @@
 					<th>{{ $L('Product group') }}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($products as $product)
 				<tr>
 					<td class="fit-content">
diff --git a/views/quantityunits.blade.php b/views/quantityunits.blade.php
index 0970c1e8..c23d6a7f 100644
--- a/views/quantityunits.blade.php
+++ b/views/quantityunits.blade.php
@@ -33,7 +33,7 @@
 					<th>{{ $L('Description') }}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($quantityunits as $quantityunit)
 				<tr>
 					<td class="fit-content">
diff --git a/views/recipeform.blade.php b/views/recipeform.blade.php
index 1d616b1a..4db67bfd 100644
--- a/views/recipeform.blade.php
+++ b/views/recipeform.blade.php
@@ -72,7 +72,7 @@
 							<th class="d-none">Hiden ingredient group</th>
 						</tr>
 					</thead>
-					<tbody>
+					<tbody class="d-none">
 						@if($mode == "edit")
 						@foreach($recipePositions as $recipePosition)
 						<tr class="@if(FindObjectInArrayByPropertyValue($recipesFulfillment, 'recipe_pos_id', $recipePosition->id)->need_fulfilled == 1) table-success @elseif(FindObjectInArrayByPropertyValue($recipesFulfillment, 'recipe_pos_id', $recipePosition->id)->need_fulfilled_with_shopping_list == 1) table-warning  @else table-danger @endif">
@@ -125,7 +125,7 @@
 							<th>{{ $L('Recipe') }}</th>
 						</tr>
 					</thead>
-					<tbody>
+					<tbody class="d-none">
 						@if($mode == "edit")
 						@foreach($recipeNestings as $recipeNesting)
 						<tr>
diff --git a/views/recipes.blade.php b/views/recipes.blade.php
index 084fda76..2f9c4c71 100644
--- a/views/recipes.blade.php
+++ b/views/recipes.blade.php
@@ -26,7 +26,7 @@
 					<th class="d-none">Hidden status for sorting of "Requirements fulfilled" column</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($recipes as $recipe)
 				<tr data-recipe-id="{{ $recipe->id }}">
 					<td>
diff --git a/views/shoppinglist.blade.php b/views/shoppinglist.blade.php
index 2b18debf..28495176 100644
--- a/views/shoppinglist.blade.php
+++ b/views/shoppinglist.blade.php
@@ -63,7 +63,7 @@
 					<th class="d-none">Hidden status</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($listItems as $listItem)
 				<tr id="shoppinglistitem-{{ $listItem->id }}-row" class="@if(FindObjectInArrayByPropertyValue($missingProducts, 'id', $listItem->product_id) !== null) table-info @endif">
 					<td class="fit-content">
diff --git a/views/stockjournal.blade.php b/views/stockjournal.blade.php
index fcbea8be..2da9f960 100644
--- a/views/stockjournal.blade.php
+++ b/views/stockjournal.blade.php
@@ -39,7 +39,7 @@
 					<th>{{ $L('Booking type') }}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($stockLog as $stockLogEntry)
 				<tr class="@if($stockLogEntry->undone == 1) text-muted @endif">
 					<td class="fit-content">
diff --git a/views/taskcategories.blade.php b/views/taskcategories.blade.php
index 3ef055ba..43fabb32 100644
--- a/views/taskcategories.blade.php
+++ b/views/taskcategories.blade.php
@@ -33,7 +33,7 @@
 					<th>{{ $L('Description') }}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($taskCategories as $taskCategory)
 				<tr>
 					<td class="fit-content">
diff --git a/views/tasks.blade.php b/views/tasks.blade.php
index 39f0683c..1613a332 100644
--- a/views/tasks.blade.php
+++ b/views/tasks.blade.php
@@ -64,7 +64,7 @@
 					<th class="d-none">Hidden status</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($tasks as $task)
 				<tr id="task-{{ $task->id }}-row" class="@if($task->done == 1) text-muted @endif @if(!empty($task->due_date) && $task->due_date < date('Y-m-d')) table-danger @elseif(!empty($task->due_date) && $task->due_date < date('Y-m-d', strtotime("+$nextXDays days"))) table-warning @endif">
 					<td class="fit-content">
diff --git a/views/users.blade.php b/views/users.blade.php
index 4e65fabf..bf323eab 100644
--- a/views/users.blade.php
+++ b/views/users.blade.php
@@ -34,7 +34,7 @@
 					<th>{{ $L('Last name') }}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="d-none">
 				@foreach($users as $user)
 				<tr>
 					<td class="fit-content">