Make auto reloading the page on external database changes configurable (closes #74)

controllers/BaseController.php

@@ -5,6 +5,7 @@ namespace Grocy\Controllers;
 use \Grocy\Services\DatabaseService;
 use \Grocy\Services\ApplicationService;
 use \Grocy\Services\LocalizationService;
+use \Grocy\Services\UsersService;
 
 class BaseController
 {
@@ -41,6 +42,15 @@ class BaseController
 			return $container->UrlManager->ConstructUrl($relativePath, $isResource);
 		});
 
+		try {
+			$usersService = new UsersService();
+			$container->view->set('userSettings', $usersService->GetUserSettings(GROCY_USER_ID));
+		}
+		catch (\Exception $ex)
+		{
+			// Happens when database is not initialised or migrated...
+		}
+
 		$this->AppContainer = $container;
 	}
 

public/js/grocy_dbchangedhandling.js

@@ -10,8 +10,8 @@
 );
 
 // Check if the database has changed once a minute
-// If a change is detected, reload the current page, but only if already idling for at least 50 seconds
+// If a change is detected, reload the current page, but only if already idling for at least 50 seconds,
-// and when there is no unsaved form data
+// when there is no unsaved form data and when the user enabled auto reloading
 setInterval(function()
 {
 	Grocy.Api.Get('system/get-db-changed-time',
@@ -22,7 +22,7 @@ setInterval(function()
 			{
 				if (Grocy.IdleTime >= 50)
 				{
-					if ($("form.is-dirty").length === 0)
+					if (Grocy.AutoReloadOnDatabaseChangeEnabled && $("form.is-dirty").length === 0)
 					{
 						window.location.reload();
 					}
@@ -55,3 +55,29 @@ setInterval(function()
 {
 	Grocy.IdleTime += 1;
 }, 1000);
+
+$("#auto-reload-enabled").on("change", function()
+{
+	var value = $(this).is(":checked");
+	
+	Grocy.AutoReloadOnDatabaseChangeEnabled = value;
+
+	jsonData = { };
+	jsonData.value = value;
+	console.log(jsonData);
+	Grocy.Api.Post('user/settings/auto_reload_on_db_change', jsonData,
+		function(result)
+		{
+			// Nothing to do...
+		},
+		function(xhr)
+		{
+			Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
+		}
+	);
+});
+
+if (Grocy.AutoReloadOnDatabaseChangeEnabled)
+{
+	$("#auto-reload-enabled").prop("checked", true);
+}

services/UsersService.php

@@ -63,6 +63,19 @@ class UsersService extends BaseService
 		}
 	}
 
+	public function GetUserSettings($userId)
+	{
+		$settings = array();
+
+		$settingRows = $this->Database->user_settings()->where('user_id = :1', $userId)->fetchAll();
+		foreach ($settingRows as $settingRow)
+		{
+			$settings[$settingRow->key] = $settingRow->value;
+		}
+
+		return $settings;
+	}
+
 	public function SetUserSetting($userId, $settingKey, $settingValue)
 	{
 		$settingRow = $this->Database->user_settings()->where('user_id = :1 AND key = :2', $userId, $settingKey)->fetch();

views/layout/default.blade.php

@@ -41,6 +41,12 @@
 		Grocy.ActiveNav = '@yield('activeNav', '')';
 		Grocy.Culture = '{{ GROCY_CULTURE }}';
 		Grocy.Currency = '{{ GROCY_CURRENCY }}';
+
+		@if(array_key_exists('auto_reload_on_db_change', $userSettings))
+			Grocy.AutoReloadOnDatabaseChangeEnabled = {{ BoolToString($userSettings['auto_reload_on_db_change']) }};
+		@else
+			Grocy.AutoReloadOnDatabaseChangeEnabled = true;
+		@endif
 	</script>
 </head>
 
@@ -191,6 +197,14 @@
 					<div class="dropdown-menu dropdown-menu-right">
 						<a class="dropdown-item logout-button discrete-link" href="{{ $U('/logout') }}"><i class="fas fa-sign-out-alt"></i>&nbsp;{{ $L('Logout') }}</a>
 						<div class="dropdown-divider"></div>
+						<div class="dropdown-item">
+							<div class="form-check">
+								<input class="form-check-input" type="checkbox" id="auto-reload-enabled">
+								<label class="form-check-label" for="auto-reload-enabled">
+									{{ $L('Auto reload on external changes') }}
+								</label>
+							</div>
+						</div>
 						<div class="dropdown-item">
 							<div class="form-check">
 								<input class="form-check-input" type="checkbox" id="night-mode-enabled">