Auto reload the current page when the database has changed and when idling (closes #59)

controllers/SystemApiController.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace Grocy\Controllers;
+
+use \Grocy\Services\DatabaseService;
+
+class SystemApiController extends BaseApiController
+{
+	public function __construct(\Slim\Container $container)
+	{
+		parent::__construct($container);
+		$this->DatabaseService = new DatabaseService();
+	}
+
+	protected $DatabaseService;
+
+	public function GetDbChangedTime(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
+	{
+		return $this->ApiResponse(array(
+			'changed_time' => $this->DatabaseService->GetDbChangedTime()
+		));
+	}
+}

grocy.openapi.json

@@ -24,6 +24,26 @@
 		}
 	],
 	"paths": {
+		"/system/get-db-changed-time": {
+			"get": {
+				"description": "Returns the time when the database was last changed",
+				"tags": [
+					"System"
+				],
+				"responses": {
+					"200": {
+						"description": "An DbChangedTimeResponse object",
+						"content": {
+							"application/json": {
+								"schema": {
+									"$ref": "#/components/schemas/DbChangedTimeResponse"
+								}
+							}
+						}
+					}
+				}
+			}
+		},
 		"/get-objects/{entity}": {
 			"get": {
 				"description": "Returns all objects of the given entity",
@@ -2009,6 +2029,15 @@
 						"format": "date-time"
 					}
 				}
+			},
+			"DbChangedTimeResponse": {
+				"type": "object",
+				"properties": {
+					"changed_time": {
+						"type": "string",
+						"format": "date-time"
+					}
+				}
 			}
 		},
 		"examples": {

public/js/grocy_dbchangedhandling.js

@@ -0,0 +1,53 @@
+Grocy.Api.Get('system/get-db-changed-time',
+	function(result)
+	{
+		Grocy.DatabaseChangedTime = moment(result.changed_time);
+	},
+	function(xhr)
+	{
+		console.error(xhr);
+	}
+);
+
+// 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
+setInterval(function()
+{
+	Grocy.Api.Get('system/get-db-changed-time',
+		function(result)
+		{
+			var newDbChangedTime = moment(result.changed_time);
+			if (newDbChangedTime.isSameOrAfter(Grocy.DatabaseChangedTime))
+			{
+				if (Grocy.IdleTime >= 50)
+				{
+					window.location.reload();
+				}
+
+				Grocy.DatabaseChangedTime = newDbChangedTime;
+			}
+		},
+		function(xhr)
+		{
+			console.error(xhr);
+		}
+	);
+}, 60000);
+
+Grocy.IdleTime = 0;
+Grocy.ResetIdleTime = function()
+{
+	Grocy.IdleTime = 0;
+}
+window.onmousemove = Grocy.ResetIdleTime;
+window.onmousedown = Grocy.ResetIdleTime;
+window.onclick = Grocy.ResetIdleTime;
+window.onscroll = Grocy.ResetIdleTime;
+window.onkeypress = Grocy.ResetIdleTime;
+
+// Increase the idle time once every second
+// On any interaction it will be reset to 0 (see above)
+setInterval(function()
+{
+	Grocy.IdleTime += 1;
+}, 1000);

routes.php

@@ -79,6 +79,9 @@ $app->group('/api', function()
 	$this->post('/edit-object/{entity}/{objectId}', '\Grocy\Controllers\GenericEntityApiController:EditObject');
 	$this->get('/delete-object/{entity}/{objectId}', '\Grocy\Controllers\GenericEntityApiController:DeleteObject');
 
+	// System
+	$this->get('/system/get-db-changed-time', '\Grocy\Controllers\SystemApiController:GetDbChangedTime');
+
 	// Users
 	$this->get('/users/get', '\Grocy\Controllers\UsersApiController:GetUsers');
 	$this->post('/users/create', '\Grocy\Controllers\UsersApiController:CreateUser');

services/DatabaseService.php

@@ -63,4 +63,9 @@ class DatabaseService
 
 		return false;
 	}
+
+	public function GetDbChangedTime()
+	{
+		return date('Y-m-d H:i:s', filemtime(GROCY_DATAPATH . '/grocy.db'));
+	}
 }

views/layout/default.blade.php

@@ -269,6 +269,7 @@
 
 	<script src="{{ $U('/js/extensions.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/js/grocy.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/js/grocy_dbchangedhandling.js?v=', true) }}{{ $version }}"></script>
 	@stack('pageScripts')
 	@stack('componentScripts')
 	<script src="{{ $U('/viewjs', true) }}/@yield('viewJsName').js?v={{ $version }}"></script>