Fix missing comma

Italian localization

.bowerrc

@@ -1,3 +0,0 @@
-{
-	"directory": "public/bower_components"
-}

.gitignore

@@ -1,3 +1,3 @@
-/public/bower_components
+/public/node_modules
 /vendor
 /.release

.yarnrc

@@ -0,0 +1,4 @@
+--modules-folder public/node_modules
+--install.production true
+--install.ignore-scripts true
+--install.ignore-optional true

README.md

@@ -11,17 +11,22 @@ A household needs to be managed. I did this so far (almost 10 years) with my fir
 For now my main focus is on stock management, ERP your fridge!
 
 ## How to install
-Just unpack the [latest release](https://github.com/berrnd/grocy/releases/latest) on your PHP (7.0 or later required) enabled webserver (webservers root should point to the `/public` directory), copy `config-dist.php` to `data/config.php`, edit it to your needs, ensure that the `data` directory is writable and you're ready to go.
+Just unpack the [latest release](https://github.com/berrnd/grocy/releases/latest) on your PHP (SQLite extension required, currently only tested with PHP 7.2) enabled webserver (webservers root should point to the `/public` directory), copy `config-dist.php` to `data/config.php`, edit it to your needs, ensure that the `data` directory is writable and you're ready to go.
 
-Default login is user `admin` with password `admin` - see the `data/config.php` file. Alternatively clone this repository and install Composer and Bower dependencies manually.
+Default login is user `admin` with password `admin` - see the `data/config.php` file. Alternatively clone this repository and install Composer and Yarn dependencies manually.
 
 If you use nginx as your webserver, please include `try_files $uri /index.php;` in your location block.
 
+If, however, your webserver does not support URL rewriting, set `DISABLE_URL_REWRITING` in `data/config.php` (`Setting('DISABLE_URL_REWRITING', true);`).
+
 ## How to update
-Just overwrite everything with the latest release while keeping the `/data` directory, check `config-dist.php` for new configuration options and add them to your `data/config.php` (it will show up as an error if something is missing there).
+Just overwrite everything with the latest release while keeping the `/data` directory, check `config-dist.php` for new configuration options and add them to your `data/config.php` (the default from values `config-dist.php` will be used for not in `data/config.php` defined settings).
 
 ## Things worth to know
 
+### REST API & data model documentation
+See the integrated Swagger UI instance on [/api](https://demo-en.grocy.info/api).
+
 ### Barcode readers
 Some fields also allow to select a value by scanning a barcode. It works best when your barcode reader prefixes every barcode with a letter which is normally not part of a item name (I use a `$`) and sends a `TAB` after a scan.
 
@@ -32,7 +37,7 @@ The following shorthands are available:
   - Example: `0517` will be converted to `2018-05-17`
 - `YYYYMMDD` gets expanded to the proper ISO-8601 notation
   - Example: `20190417` will be converted to `2019-04-17`
-- `x` gets expanded to `2099-12-31` (which I use for products which never expire)
+- `x` gets expanded to `2999-12-31` (which I use for products which never expire)
 - Down/up arrow keys will increase/decrease the date by one day
 - Right/left arrow keys will increase/decrease the date by 1 week
 
@@ -40,12 +45,24 @@ The following shorthands are available:
 Wherever a button contains a bold highlighted letter, this is a shortcut key.
 Example: Button "Add as new **p**roduct" can be "pressed" by using the `P` key on your keyboard.
 
+### Barcode lookup via external services
+Products can be directly added to the database via looking them up against external services by a barcode.
+This is currently only possible through the REST API.
+There is no plugin included for any service, see the reference implementation in `data/plugins/DemoBarcodeLookupPlugin.php`.
+
+### Localization
+grocy is fully localizable - the default language is English (integrated into code), a German localization is always maintained by me. There is one file per language in the `localization` directory, if you want to create a translation, it's best to copy `localization/de.php` to a new one (e. g. `localization/it.php`) and translating all strings there. (Language can be changed in `data/config.php`, e. g. `Setting('CULTURE', 'it');`)
+
 ### Database migrations
 Database schema migration is automatically done when visiting the root (`/`) route (click on the logo in the left upper edge).
 
 ### Demo mode
 When the file `data/demo.txt` exists, the application will work in a demo mode which means authentication is disabled and some demo data will be generated during the database schema migration.
 
+### Adding your own CSS or JS without to have to modify the application itself
+- When the file `data/custom.js` exists, the contents of the file be added just before `</body>` on every page
+- When the file `data/custom.css` exists, the contents of the file be added just before `</head>` on every page
+
 ## Screenshots
 #### Dashboard
 ![Dashboard](https://github.com/berrnd/grocy/raw/master/publication_assets/dashboard.png "Dashboard")

app.php

@@ -3,46 +3,43 @@
 use \Psr\Http\Message\ServerRequestInterface as Request;
 use \Psr\Http\Message\ResponseInterface as Response;
 
-use \Grocy\Middleware\SessionAuthMiddleware;
 use \Grocy\Helpers\UrlManager;
-use \Grocy\Services\ApplicationService;
+use \Grocy\Controllers\LoginController;
 
 require_once __DIR__ . '/vendor/autoload.php';
 require_once __DIR__ . '/data/config.php';
+require_once __DIR__ . '/config-dist.php'; //For not in own config defined values we use the default ones
 
 // Setup base application
-if (PHP_SAPI !== 'cli')
-{
-	$appContainer = new \Slim\Container([
-		'settings' => [
-			'displayErrorDetails' => true,
-			'determineRouteBeforeAppMiddleware' => true
-		],
-		'view' => function($container)
-		{
-			return new \Slim\Views\Blade(__DIR__ . '/views', __DIR__ . '/data/viewcache');
-		},
-		'UrlManager' => function($container)
-		{
-			return new UrlManager(BASE_URL);
-		}
-	]);
+$appContainer = new \Slim\Container([
+	'settings' => [
+		'displayErrorDetails' => true,
+		'determineRouteBeforeAppMiddleware' => true
+	],
+	'view' => function($container)
+	{
+		return new \Slim\Views\Blade(__DIR__ . '/views', __DIR__ . '/data/viewcache');
+	},
+	'LoginControllerInstance' => function($container)
+	{
+		return new LoginController($container, 'grocy_session');
+	},
+	'UrlManager' => function($container)
+	{
+		return new UrlManager(BASE_URL);
+	},
+	'ApiKeyHeaderName' => function($container)
+	{
+		return 'GROCY-API-KEY';
+	}
+]);
+$app = new \Slim\App($appContainer);
 
-	$app = new \Slim\App($appContainer);
-}
-else
+if (PHP_SAPI === 'cli')
 {
-	$app = new \Slim\App();
 	$app->add(\pavlakis\cli\CliRequest::class);
 }
 
-// Add session handling if this is not a demo installation
-$applicationService = new ApplicationService();
-if (!$applicationService->IsDemoInstallation())
-{
-	$app->add(SessionAuthMiddleware::class);
-}
-
 require_once __DIR__ . '/routes.php';
 
 $app->run();

bower.json

@@ -1,22 +0,0 @@
-{
-	"name": "grocy",
-	"private": true,
-	"dependencies": {
-		"bootstrap": "^3.3.7",
-		"font-awesome": "^4.7.0",
-		"bootbox": "^4.4.0",
-		"jquery.serializeJSON": "^2.8.1",
-		"bootstrap-validator": "^0.11.9",
-		"bootstrap-datepicker": "^1.7.1",
-		"moment": "^2.18.1",
-		"bootstrap-combobox": "^1.1.8",
-		"datatables.net": "^1.10.15",
-		"datatables.net-bs": "^2.1.1",
-		"datatables.net-responsive": "^2.1.1",
-		"datatables.net-responsive-bs": "^2.1.1",
-		"jquery-timeago": "^1.6.1",
-		"toastr": "^2.1.3",
-		"tagmanager": "^3.0.2",
-		"eonasdan-bootstrap-datetimepicker": "^4.17.47"
-	}
-}

build.bat

@@ -4,10 +4,10 @@ if %projectPath:~-1%==\ set projectPath=%projectPath:~0,-1%
 set releasePath=%projectPath%\.release
 mkdir "%releasePath%"
 
-for /f "tokens=*" %%a in ('type version.txt') do set version=%%a
+for /f "tokens=*" %%a in ('build_tools\jq.exe .Version version.json --raw-output') do set version=%%a
 
 del "%releasePath%\grocy_%version%.zip"
-"build_tools\7za.exe" a -r "%releasePath%\grocy_%version%.zip" "%projectPath%\*" -xr!.* -xr!build_tools -xr!build.bat -xr!composer.json -xr!composer.lock -xr!bower.json -xr!publication_assets
+"build_tools\7za.exe" a -r "%releasePath%\grocy_%version%.zip" "%projectPath%\*" -xr!.* -xr!build_tools -xr!build.bat -xr!composer.json -xr!composer.lock -xr!package.json -xr!yarn.lock -xr!publication_assets
 "build_tools\7za.exe" a "%releasePath%\grocy_%version%.zip" "%projectPath%\public\.htaccess"
 "build_tools\7za.exe" rn "%releasePath%\grocy_%version%.zip" .htaccess public\.htaccess
 "build_tools\7za.exe" d "%releasePath%\grocy_%version%.zip" data\*.* data\sessions data\viewcache\*

composer.json

@@ -1,9 +1,11 @@
 {
 	"require": {
+		"php": ">=7.2",
 		"slim/slim": "^3.8",
 		"morris/lessql": "^0.3.4",
 		"pavlakis/slim-cli": "^1.0",
-		"rubellum/slim-blade-view": "^0.1.1"
+		"rubellum/slim-blade-view": "^0.1.1",
+		"tuupola/cors-middleware": "^0.7.0"
 	},
 	"autoload": {
 		"psr-4": {

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
         "This file is @generated automatically"
     ],
-    "content-hash": "12ebab60e283dfdab831d1cc22430d05",
+    "content-hash": "131ab83ecb1ea3d1a431cc70b5092448",
     "packages": [
         {
             "name": "container-interop/container-interop",
@@ -105,17 +105,69 @@
             "time": "2018-01-09T20:05:19+00:00"
         },
         {
-            "name": "illuminate/container",
-            "version": "v5.6.16",
+            "name": "http-interop/http-factory",
+            "version": "0.3.0",
             "source": {
                 "type": "git",
-                "url": "https://github.com/illuminate/container.git",
-                "reference": "4a42d667a05ec6d31f05b532cdac7e8e68e5ea2a"
+                "url": "https://github.com/http-interop/http-factory.git",
+                "reference": "c2587cc0a6f74987fefb5b8074acfd32c69a4b0f"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/illuminate/container/zipball/4a42d667a05ec6d31f05b532cdac7e8e68e5ea2a",
-                "reference": "4a42d667a05ec6d31f05b532cdac7e8e68e5ea2a",
+                "url": "https://api.github.com/repos/http-interop/http-factory/zipball/c2587cc0a6f74987fefb5b8074acfd32c69a4b0f",
+                "reference": "c2587cc0a6f74987fefb5b8074acfd32c69a4b0f",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.3.0",
+                "psr/http-message": "^1.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.0.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Interop\\Http\\Factory\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "PHP-FIG",
+                    "homepage": "http://www.php-fig.org/"
+                }
+            ],
+            "description": "Common interface for HTTP message factories",
+            "keywords": [
+                "factory",
+                "http",
+                "message",
+                "psr",
+                "psr-17",
+                "psr-7",
+                "request",
+                "response"
+            ],
+            "time": "2017-03-24T14:48:51+00:00"
+        },
+        {
+            "name": "illuminate/container",
+            "version": "v5.6.27",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/illuminate/container.git",
+                "reference": "1f0757cae8749400aeda730f6438a081fc3c082d"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/illuminate/container/zipball/1f0757cae8749400aeda730f6438a081fc3c082d",
+                "reference": "1f0757cae8749400aeda730f6438a081fc3c082d",
                 "shasum": ""
             },
             "require": {
@@ -146,20 +198,20 @@
             ],
             "description": "The Illuminate Container package.",
             "homepage": "https://laravel.com",
-            "time": "2018-01-21T02:13:38+00:00"
+            "time": "2018-05-24T13:16:56+00:00"
         },
         {
             "name": "illuminate/contracts",
-            "version": "v5.6.16",
+            "version": "v5.6.27",
             "source": {
                 "type": "git",
                 "url": "https://github.com/illuminate/contracts.git",
-                "reference": "322ec80498b3bf85bc4025d028e130a9b50242b9"
+                "reference": "3dc639feabe0f302f574157a782ede323881a944"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/illuminate/contracts/zipball/322ec80498b3bf85bc4025d028e130a9b50242b9",
-                "reference": "322ec80498b3bf85bc4025d028e130a9b50242b9",
+                "url": "https://api.github.com/repos/illuminate/contracts/zipball/3dc639feabe0f302f574157a782ede323881a944",
+                "reference": "3dc639feabe0f302f574157a782ede323881a944",
                 "shasum": ""
             },
             "require": {
@@ -190,11 +242,11 @@
             ],
             "description": "The Illuminate Contracts package.",
             "homepage": "https://laravel.com",
-            "time": "2018-04-07T17:05:26+00:00"
+            "time": "2018-05-11T23:38:58+00:00"
         },
         {
             "name": "illuminate/events",
-            "version": "v5.6.16",
+            "version": "v5.6.27",
             "source": {
                 "type": "git",
                 "url": "https://github.com/illuminate/events.git",
@@ -239,16 +291,16 @@
         },
         {
             "name": "illuminate/filesystem",
-            "version": "v5.6.16",
+            "version": "v5.6.27",
             "source": {
                 "type": "git",
                 "url": "https://github.com/illuminate/filesystem.git",
-                "reference": "c9ab9376076cedd88a374d7281d62b619634d578"
+                "reference": "2677365f61c66fad13ff12a37cd4fa8aaeb048d2"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/illuminate/filesystem/zipball/c9ab9376076cedd88a374d7281d62b619634d578",
-                "reference": "c9ab9376076cedd88a374d7281d62b619634d578",
+                "url": "https://api.github.com/repos/illuminate/filesystem/zipball/2677365f61c66fad13ff12a37cd4fa8aaeb048d2",
+                "reference": "2677365f61c66fad13ff12a37cd4fa8aaeb048d2",
                 "shasum": ""
             },
             "require": {
@@ -287,20 +339,20 @@
             ],
             "description": "The Illuminate Filesystem package.",
             "homepage": "https://laravel.com",
-            "time": "2018-04-06T13:15:37+00:00"
+            "time": "2018-07-07T14:54:27+00:00"
         },
         {
             "name": "illuminate/support",
-            "version": "v5.6.16",
+            "version": "v5.6.27",
             "source": {
                 "type": "git",
                 "url": "https://github.com/illuminate/support.git",
-                "reference": "fad0669f858423679497a17f973261cc32f9a5a8"
+                "reference": "97ca44c95392ce0a41749fa47b953734d88b94b1"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/illuminate/support/zipball/fad0669f858423679497a17f973261cc32f9a5a8",
-                "reference": "fad0669f858423679497a17f973261cc32f9a5a8",
+                "url": "https://api.github.com/repos/illuminate/support/zipball/97ca44c95392ce0a41749fa47b953734d88b94b1",
+                "reference": "97ca44c95392ce0a41749fa47b953734d88b94b1",
                 "shasum": ""
             },
             "require": {
@@ -315,6 +367,7 @@
             },
             "suggest": {
                 "illuminate/filesystem": "Required to use the composer class (5.6.*).",
+                "ramsey/uuid": "Required to use Str::uuid() (^3.7).",
                 "symfony/process": "Required to use the composer class (~4.0).",
                 "symfony/var-dumper": "Required to use the dd function (~4.0)."
             },
@@ -344,20 +397,20 @@
             ],
             "description": "The Illuminate Support package.",
             "homepage": "https://laravel.com",
-            "time": "2018-04-05T21:19:22+00:00"
+            "time": "2018-07-04T01:23:57+00:00"
         },
         {
             "name": "illuminate/view",
-            "version": "v5.6.16",
+            "version": "v5.6.27",
             "source": {
                 "type": "git",
                 "url": "https://github.com/illuminate/view.git",
-                "reference": "54eaf45ee7946d8f8cde13d5e89c5ea2e997040d"
+                "reference": "625c35e8942f0ecd467acb8db8daf8449390d559"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/illuminate/view/zipball/54eaf45ee7946d8f8cde13d5e89c5ea2e997040d",
-                "reference": "54eaf45ee7946d8f8cde13d5e89c5ea2e997040d",
+                "url": "https://api.github.com/repos/illuminate/view/zipball/625c35e8942f0ecd467acb8db8daf8449390d559",
+                "reference": "625c35e8942f0ecd467acb8db8daf8449390d559",
                 "shasum": ""
             },
             "require": {
@@ -392,7 +445,7 @@
             ],
             "description": "The Illuminate View package.",
             "homepage": "https://laravel.com",
-            "time": "2018-04-03T12:56:35+00:00"
+            "time": "2018-07-06T14:55:12+00:00"
         },
         {
             "name": "morris/lessql",
@@ -443,17 +496,72 @@
             "time": "2018-01-27T13:18:21+00:00"
         },
         {
-            "name": "nesbot/carbon",
-            "version": "1.25.0",
+            "name": "neomerx/cors-psr7",
+            "version": "v1.0.13",
             "source": {
                 "type": "git",
-                "url": "https://github.com/briannesbitt/Carbon.git",
-                "reference": "cbcf13da0b531767e39eb86e9687f5deba9857b4"
+                "url": "https://github.com/neomerx/cors-psr7.git",
+                "reference": "2556e2013f16a55532c95928455257d5b6bbc6e2"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/briannesbitt/Carbon/zipball/cbcf13da0b531767e39eb86e9687f5deba9857b4",
-                "reference": "cbcf13da0b531767e39eb86e9687f5deba9857b4",
+                "url": "https://api.github.com/repos/neomerx/cors-psr7/zipball/2556e2013f16a55532c95928455257d5b6bbc6e2",
+                "reference": "2556e2013f16a55532c95928455257d5b6bbc6e2",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.6.0",
+                "psr/http-message": "^1.0",
+                "psr/log": "^1.0"
+            },
+            "require-dev": {
+                "mockery/mockery": "^1.0",
+                "phpunit/phpunit": "^5.7",
+                "scrutinizer/ocular": "^1.1",
+                "squizlabs/php_codesniffer": "^3.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Neomerx\\Cors\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "Apache-2.0"
+            ],
+            "authors": [
+                {
+                    "name": "neomerx",
+                    "email": "info@neomerx.com"
+                }
+            ],
+            "description": "Framework agnostic (PSR-7) CORS implementation (www.w3.org/TR/cors/)",
+            "homepage": "https://github.com/neomerx/cors-psr7",
+            "keywords": [
+                "Cross Origin Resource Sharing",
+                "Cross-Origin Resource Sharing",
+                "cors",
+                "neomerx",
+                "psr-7",
+                "psr7",
+                "w3.org",
+                "www.w3.org"
+            ],
+            "time": "2018-05-23T16:10:11+00:00"
+        },
+        {
+            "name": "nesbot/carbon",
+            "version": "1.32.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/briannesbitt/Carbon.git",
+                "reference": "64563e2b9f69e4db1b82a60e81efa327a30ff343"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/briannesbitt/Carbon/zipball/64563e2b9f69e4db1b82a60e81efa327a30ff343",
+                "reference": "64563e2b9f69e4db1b82a60e81efa327a30ff343",
                 "shasum": ""
             },
             "require": {
@@ -466,13 +574,15 @@
             },
             "type": "library",
             "extra": {
-                "branch-alias": {
-                    "dev-master": "1.23-dev"
+                "laravel": {
+                    "providers": [
+                        "Carbon\\Laravel\\ServiceProvider"
+                    ]
                 }
             },
             "autoload": {
                 "psr-4": {
-                    "Carbon\\": "src/Carbon/"
+                    "": "src/"
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
@@ -493,7 +603,7 @@
                 "datetime",
                 "time"
             ],
-            "time": "2018-03-19T15:50:49+00:00"
+            "time": "2018-07-05T06:59:26+00:00"
         },
         {
             "name": "nikic/fast-route",
@@ -780,6 +890,112 @@
             ],
             "time": "2016-08-06T14:39:51+00:00"
         },
+        {
+            "name": "psr/http-server-handler",
+            "version": "1.0.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/php-fig/http-server-handler.git",
+                "reference": "439d92054dc06097f2406ec074a2627839955a02"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/php-fig/http-server-handler/zipball/439d92054dc06097f2406ec074a2627839955a02",
+                "reference": "439d92054dc06097f2406ec074a2627839955a02",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.0",
+                "psr/http-message": "^1.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.0.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Psr\\Http\\Server\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "PHP-FIG",
+                    "homepage": "http://www.php-fig.org/"
+                }
+            ],
+            "description": "Common interface for HTTP server-side request handler",
+            "keywords": [
+                "handler",
+                "http",
+                "http-interop",
+                "psr",
+                "psr-15",
+                "psr-7",
+                "request",
+                "response",
+                "server"
+            ],
+            "time": "2018-01-22T17:04:15+00:00"
+        },
+        {
+            "name": "psr/http-server-middleware",
+            "version": "1.0.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/php-fig/http-server-middleware.git",
+                "reference": "ea17eb1fb2c8df6db919cc578451a8013c6a0ae5"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/php-fig/http-server-middleware/zipball/ea17eb1fb2c8df6db919cc578451a8013c6a0ae5",
+                "reference": "ea17eb1fb2c8df6db919cc578451a8013c6a0ae5",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.0",
+                "psr/http-message": "^1.0",
+                "psr/http-server-handler": "^1.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.0.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Psr\\Http\\Server\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "PHP-FIG",
+                    "homepage": "http://www.php-fig.org/"
+                }
+            ],
+            "description": "Common interface for HTTP server-side middleware",
+            "keywords": [
+                "http",
+                "http-interop",
+                "middleware",
+                "psr",
+                "psr-15",
+                "psr-7",
+                "request",
+                "response"
+            ],
+            "time": "2018-01-22T17:08:31+00:00"
+        },
         {
             "name": "psr/log",
             "version": "1.0.2",
@@ -927,16 +1143,16 @@
         },
         {
             "name": "slim/slim",
-            "version": "3.9.2",
+            "version": "3.10.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/slimphp/Slim.git",
-                "reference": "4086d0106cf5a7135c69fce4161fe355a8feb118"
+                "reference": "d8aabeacc3688b25e2f2dd2db91df91ec6fdd748"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/slimphp/Slim/zipball/4086d0106cf5a7135c69fce4161fe355a8feb118",
-                "reference": "4086d0106cf5a7135c69fce4161fe355a8feb118",
+                "url": "https://api.github.com/repos/slimphp/Slim/zipball/d8aabeacc3688b25e2f2dd2db91df91ec6fdd748",
+                "reference": "d8aabeacc3688b25e2f2dd2db91df91ec6fdd748",
                 "shasum": ""
             },
             "require": {
@@ -994,20 +1210,20 @@
                 "micro",
                 "router"
             ],
-            "time": "2017-11-26T19:13:09+00:00"
+            "time": "2018-04-19T19:29:08+00:00"
         },
         {
             "name": "symfony/debug",
-            "version": "v4.0.8",
+            "version": "v4.1.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/debug.git",
-                "reference": "5961d02d48828671f5d8a7805e06579d692f6ede"
+                "reference": "dbe0fad88046a755dcf9379f2964c61a02f5ae3d"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/debug/zipball/5961d02d48828671f5d8a7805e06579d692f6ede",
-                "reference": "5961d02d48828671f5d8a7805e06579d692f6ede",
+                "url": "https://api.github.com/repos/symfony/debug/zipball/dbe0fad88046a755dcf9379f2964c61a02f5ae3d",
+                "reference": "dbe0fad88046a755dcf9379f2964c61a02f5ae3d",
                 "shasum": ""
             },
             "require": {
@@ -1023,7 +1239,7 @@
             "type": "library",
             "extra": {
                 "branch-alias": {
-                    "dev-master": "4.0-dev"
+                    "dev-master": "4.1-dev"
                 }
             },
             "autoload": {
@@ -1050,20 +1266,20 @@
             ],
             "description": "Symfony Debug Component",
             "homepage": "https://symfony.com",
-            "time": "2018-04-03T05:24:00+00:00"
+            "time": "2018-06-08T09:39:36+00:00"
         },
         {
             "name": "symfony/finder",
-            "version": "v4.0.8",
+            "version": "v4.1.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/finder.git",
-                "reference": "ca27c02b7a3fef4828c998c2ff9ba7aae1641c49"
+                "reference": "84714b8417d19e4ba02ea78a41a975b3efaafddb"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/finder/zipball/ca27c02b7a3fef4828c998c2ff9ba7aae1641c49",
-                "reference": "ca27c02b7a3fef4828c998c2ff9ba7aae1641c49",
+                "url": "https://api.github.com/repos/symfony/finder/zipball/84714b8417d19e4ba02ea78a41a975b3efaafddb",
+                "reference": "84714b8417d19e4ba02ea78a41a975b3efaafddb",
                 "shasum": ""
             },
             "require": {
@@ -1072,7 +1288,7 @@
             "type": "library",
             "extra": {
                 "branch-alias": {
-                    "dev-master": "4.0-dev"
+                    "dev-master": "4.1-dev"
                 }
             },
             "autoload": {
@@ -1099,20 +1315,20 @@
             ],
             "description": "Symfony Finder Component",
             "homepage": "https://symfony.com",
-            "time": "2018-04-04T05:10:37+00:00"
+            "time": "2018-06-19T21:38:16+00:00"
         },
         {
             "name": "symfony/polyfill-mbstring",
-            "version": "v1.7.0",
+            "version": "v1.8.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/polyfill-mbstring.git",
-                "reference": "78be803ce01e55d3491c1397cf1c64beb9c1b63b"
+                "reference": "3296adf6a6454a050679cde90f95350ad604b171"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/polyfill-mbstring/zipball/78be803ce01e55d3491c1397cf1c64beb9c1b63b",
-                "reference": "78be803ce01e55d3491c1397cf1c64beb9c1b63b",
+                "url": "https://api.github.com/repos/symfony/polyfill-mbstring/zipball/3296adf6a6454a050679cde90f95350ad604b171",
+                "reference": "3296adf6a6454a050679cde90f95350ad604b171",
                 "shasum": ""
             },
             "require": {
@@ -1124,7 +1340,7 @@
             "type": "library",
             "extra": {
                 "branch-alias": {
-                    "dev-master": "1.7-dev"
+                    "dev-master": "1.8-dev"
                 }
             },
             "autoload": {
@@ -1158,20 +1374,20 @@
                 "portable",
                 "shim"
             ],
-            "time": "2018-01-30T19:27:44+00:00"
+            "time": "2018-04-26T10:06:28+00:00"
         },
         {
             "name": "symfony/translation",
-            "version": "v4.0.8",
+            "version": "v4.1.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/translation.git",
-                "reference": "e20a9b7f9f62cb33a11638b345c248e7d510c938"
+                "reference": "b6d8164085ee0b6debcd1b7a131fd6f63bb04854"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/translation/zipball/e20a9b7f9f62cb33a11638b345c248e7d510c938",
-                "reference": "e20a9b7f9f62cb33a11638b345c248e7d510c938",
+                "url": "https://api.github.com/repos/symfony/translation/zipball/b6d8164085ee0b6debcd1b7a131fd6f63bb04854",
+                "reference": "b6d8164085ee0b6debcd1b7a131fd6f63bb04854",
                 "shasum": ""
             },
             "require": {
@@ -1186,20 +1402,21 @@
             "require-dev": {
                 "psr/log": "~1.0",
                 "symfony/config": "~3.4|~4.0",
+                "symfony/console": "~3.4|~4.0",
                 "symfony/dependency-injection": "~3.4|~4.0",
                 "symfony/finder": "~2.8|~3.0|~4.0",
                 "symfony/intl": "~3.4|~4.0",
                 "symfony/yaml": "~3.4|~4.0"
             },
             "suggest": {
-                "psr/log": "To use logging capability in translator",
+                "psr/log-implementation": "To use logging capability in translator",
                 "symfony/config": "",
                 "symfony/yaml": ""
             },
             "type": "library",
             "extra": {
                 "branch-alias": {
-                    "dev-master": "4.0-dev"
+                    "dev-master": "4.1-dev"
                 }
             },
             "autoload": {
@@ -1226,7 +1443,167 @@
             ],
             "description": "Symfony Translation Component",
             "homepage": "https://symfony.com",
-            "time": "2018-02-22T10:50:29+00:00"
+            "time": "2018-06-22T08:59:39+00:00"
+        },
+        {
+            "name": "tuupola/callable-handler",
+            "version": "0.3.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/tuupola/callable-handler.git",
+                "reference": "5141efa1e974687a3fa53338811a988198f50662"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/tuupola/callable-handler/zipball/5141efa1e974687a3fa53338811a988198f50662",
+                "reference": "5141efa1e974687a3fa53338811a988198f50662",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.0",
+                "psr/http-server-middleware": "^1.0"
+            },
+            "require-dev": {
+                "codedungeon/phpunit-result-printer": "^0.4.4",
+                "overtrue/phplint": "^1.0",
+                "phpunit/phpunit": "^6.5",
+                "squizlabs/php_codesniffer": "^3.2",
+                "tuupola/http-factory": "^0.3.0",
+                "zendframework/zend-diactoros": "^1.6"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Tuupola\\Middleware\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Mika Tuupola",
+                    "email": "tuupola@appelsiini.net",
+                    "homepage": "https://appelsiini.net/",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Compatibility layer for PSR-7 double pass and PSR-15 middlewares.",
+            "homepage": "https://github.com/tuupola/callable-handler",
+            "keywords": [
+                "middleware",
+                "psr-15",
+                "psr-7"
+            ],
+            "time": "2018-01-23T04:07:25+00:00"
+        },
+        {
+            "name": "tuupola/cors-middleware",
+            "version": "0.7.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/tuupola/cors-middleware.git",
+                "reference": "b0e2b7acacf22acae6ba029ee424fd6c073bb443"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/tuupola/cors-middleware/zipball/b0e2b7acacf22acae6ba029ee424fd6c073bb443",
+                "reference": "b0e2b7acacf22acae6ba029ee424fd6c073bb443",
+                "shasum": ""
+            },
+            "require": {
+                "neomerx/cors-psr7": "^1.0",
+                "php": "^7.1",
+                "psr/http-server-middleware": "^1.0",
+                "tuupola/callable-handler": "^0.3.0",
+                "tuupola/http-factory": "^0.3.0"
+            },
+            "require-dev": {
+                "codedungeon/phpunit-result-printer": "^0.4.4",
+                "equip/dispatch": "dev-approved-psr15 as 1.0.x-dev",
+                "overtrue/phplint": "^1.0",
+                "phpunit/phpunit": "^6.5",
+                "squizlabs/php_codesniffer": "^3.2",
+                "zendframework/zend-diactoros": "^1.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Tuupola\\Middleware\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Mika Tuupola",
+                    "email": "tuupola@appelsiini.net",
+                    "homepage": "http://www.appelsiini.net/",
+                    "role": "Developer"
+                }
+            ],
+            "description": "PSR-7 and PSR-15 CORS middleware",
+            "homepage": "https://github.com/tuupola/cors-middleware",
+            "keywords": [
+                "cors",
+                "middleware",
+                "psr-15",
+                "psr-7"
+            ],
+            "time": "2018-01-25T02:29:07+00:00"
+        },
+        {
+            "name": "tuupola/http-factory",
+            "version": "0.3.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/tuupola/http-factory.git",
+                "reference": "57b2e19ff3f4af0bbee4e31fd282689be351f1ad"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/tuupola/http-factory/zipball/57b2e19ff3f4af0bbee4e31fd282689be351f1ad",
+                "reference": "57b2e19ff3f4af0bbee4e31fd282689be351f1ad",
+                "shasum": ""
+            },
+            "require": {
+                "http-interop/http-factory": "^0.3.0"
+            },
+            "require-dev": {
+                "http-interop/http-factory-tests": "^0.3.0",
+                "overtrue/phplint": "^0.2.1",
+                "phpunit/phpunit": "^5.7",
+                "squizlabs/php_codesniffer": "^3.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Tuupola\\Http\\Factory\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Mika Tuupola",
+                    "email": "tuupola@appelsiini.net",
+                    "homepage": "http://www.appelsiini.net/",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Lightweight autodiscovering PSR-17 HTTP factories",
+            "homepage": "https://github.com/tuupola/http-factory",
+            "keywords": [
+                "http",
+                "psr-17",
+                "psr-7"
+            ],
+            "time": "2017-07-15T22:03:15+00:00"
         }
     ],
     "packages-dev": [],
@@ -1235,6 +1612,8 @@
     "stability-flags": [],
     "prefer-stable": false,
     "prefer-lowest": false,
-    "platform": [],
+    "platform": {
+        "php": ">=7.2"
+    },
     "platform-dev": []
 }

config-dist.php

@@ -1,17 +1,26 @@
 <?php
 
 # Login credentials
-define('HTTP_USER', 'admin');
-define('HTTP_PASSWORD', 'admin');
+Setting('HTTP_USER', 'admin');
+Setting('HTTP_PASSWORD', 'admin');
 
 # Either "production" or "dev"
-define('MODE', 'production');
+Setting('MODE', 'production');
 
 # Either "en" or "de" or the filename (without extension) of
 # one of the other available localization files in the "/localization" directory
-define('CULTURE', 'en');
+Setting('CULTURE', 'en');
 
 # The base url of your installation,
 # should be just "/" when running directly under the root of a (sub)domain
 # or for example "https:/example.com/grocy" when using a subdirectory
-define('BASE_URL', '/');
+Setting('BASE_URL', '/');
+
+# The plugin to use for external barcode lookups,
+# must be the filename without .php extension and must be located in /data/plugins,
+# see /data/plugins/DemoBarcodeLookupPlugin.php for an example implementation
+Setting('STOCK_BARCODE_LOOKUP_PLUGIN', 'DemoBarcodeLookupPlugin');
+
+# If, however, your webserver does not support URL rewriting,
+# set this to true
+Setting('DISABLE_URL_REWRITING', false);

controllers/BaseApiController.php

@@ -4,8 +4,25 @@ namespace Grocy\Controllers;
 
 class BaseApiController extends BaseController
 {
-	protected function ApiResponse($response)
+
+	public function __construct(\Slim\Container $container)
 	{
-		return json_encode($response);
+		parent::__construct($container);
+		$this->OpenApiSpec = json_decode(file_get_contents(__DIR__ . '/../grocy.openapi.json'));
+	}
+
+	protected $OpenApiSpec;
+
+	protected function ApiResponse($data)
+	{
+		return json_encode($data);
+	}
+
+	protected function VoidApiActionResponse($response, $success = true, $status = 200, $errorMessage = '')
+	{
+		return $response->withStatus($status)->withJson(array(
+			'success' => $success,
+			'error_message' => $errorMessage
+		));
 	}
 }

controllers/BaseController.php

@@ -13,7 +13,9 @@ class BaseController
 		$this->Database = $databaseService->GetDbConnection();
 
 		$applicationService = new ApplicationService();
-		$container->view->set('version', $applicationService->GetInstalledVersion());
+		$versionInfo = $applicationService->GetInstalledVersion();
+		$container->view->set('version', $versionInfo->Version);
+		$container->view->set('releaseDate', $versionInfo->ReleaseDate);
 
 		$localizationService = new LocalizationService(CULTURE);
 		$container->view->set('localizationStrings', $localizationService->GetCurrentCultureLocalizations());
@@ -21,9 +23,9 @@ class BaseController
 		{
 			return $localizationService->Localize($text, ...$placeholderValues);
 		});
-		$container->view->set('U', function($relativePath) use($container)
+		$container->view->set('U', function($relativePath, $isResource = false) use($container)
 		{
-			return $container->UrlManager->ConstructUrl($relativePath);
+			return $container->UrlManager->ConstructUrl($relativePath, $isResource);
 		});
 
 		$this->AppContainer = $container;

controllers/BatteriesApiController.php

@@ -17,16 +17,31 @@ class BatteriesApiController extends BaseApiController
 	public function TrackChargeCycle(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		$trackedTime = date('Y-m-d H:i:s');
-		if (isset($request->getQueryParams()['tracked_time']) && !empty($request->getQueryParams()['tracked_time']))
+		if (isset($request->getQueryParams()['tracked_time']) && !empty($request->getQueryParams()['tracked_time']) && IsIsoDateTime($request->getQueryParams()['tracked_time']))
 		{
 			$trackedTime = $request->getQueryParams()['tracked_time'];
 		}
 
-		return $this->ApiResponse(array('success' => $this->BatteriesService->TrackChargeCycle($args['batteryId'], $trackedTime)));
+		try
+		{
+			$this->BatteriesService->TrackChargeCycle($args['batteryId'], $trackedTime);
+			return $this->VoidApiActionResponse($response);
+		}
+		catch (\Exception $ex)
+		{
+			return $this->VoidApiActionResponse($response, false, 400, $ex->getMessage());
+		}
 	}
 
 	public function BatteryDetails(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
-		return $this->ApiResponse($this->BatteriesService->GetBatteryDetails($args['batteryId']));
+		try
+		{
+			return $this->ApiResponse($this->BatteriesService->GetBatteryDetails($args['batteryId']));
+		}
+		catch (\Exception $ex)
+		{
+			return $this->VoidApiActionResponse($response, false, 400, $ex->getMessage());
+		}
 	}
 }

controllers/BatteriesController.php

@@ -22,24 +22,30 @@ class BatteriesController extends BaseController
 			$nextChargeTimes[$battery->id] = $this->BatteriesService->GetNextChargeTime($battery->id);
 		}
 
+		$nextXDays = 5;
+		$countDueNextXDays = count(FindAllItemsInArrayByValue($nextChargeTimes, date('Y-m-d', strtotime("+$nextXDays days")), '<'));
+		$countOverdue = count(FindAllItemsInArrayByValue($nextChargeTimes, date('Y-m-d', strtotime('-1 days')), '<'));
 		return $this->AppContainer->view->render($response, 'batteriesoverview', [
-			'batteries' => $this->Database->batteries(),
+			'batteries' => $this->Database->batteries()->orderBy('name'),
 			'current' => $this->BatteriesService->GetCurrent(),
-			'nextChargeTimes' => $nextChargeTimes
+			'nextChargeTimes' => $nextChargeTimes,
+			'nextXDays' => $nextXDays,
+			'countDueNextXDays' => $countDueNextXDays - $countOverdue,
+			'countOverdue' => $countOverdue
 		]);
 	}
 
 	public function TrackChargeCycle(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		return $this->AppContainer->view->render($response, 'batterytracking', [
-			'batteries' =>  $this->Database->batteries()
+			'batteries' =>  $this->Database->batteries()->orderBy('name')
 		]);
 	}
 
 	public function BatteriesList(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		return $this->AppContainer->view->render($response, 'batteries', [
-			'batteries' => $this->Database->batteries()
+			'batteries' => $this->Database->batteries()->orderBy('name')
 		]);
 	}
 

controllers/GenericEntityApiController.php

@@ -6,35 +6,75 @@ class GenericEntityApiController extends BaseApiController
 {
 	public function GetObjects(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
-		return $this->ApiResponse($this->Database->{$args['entity']}());
+		if ($this->IsValidEntity($args['entity']))
+		{
+			return $this->ApiResponse($this->Database->{$args['entity']}());
+		}
+		else
+		{
+			return $this->VoidApiActionResponse($response, false, 400, 'Entity does not exist or is not exposed');
+		}
 	}
 
 	public function GetObject(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
-		return $this->ApiResponse($this->Database->{$args['entity']}($args['objectId']));
+		if ($this->IsValidEntity($args['entity']))
+		{
+			return $this->ApiResponse($this->Database->{$args['entity']}($args['objectId']));
+		}
+		else
+		{
+			return $this->VoidApiActionResponse($response, false, 400, 'Entity does not exist or is not exposed');
+		}
 	}
 
 	public function AddObject(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
-		$newRow = $this->Database->{$args['entity']}()->createRow($request->getParsedBody());
-		$newRow->save();
-		$success = $newRow->isClean();
-		return $this->ApiResponse(array('success' => $success));
+		if ($this->IsValidEntity($args['entity']))
+		{
+			$newRow = $this->Database->{$args['entity']}()->createRow($request->getParsedBody());
+			$newRow->save();
+			$success = $newRow->isClean();
+			return $this->ApiResponse(array('success' => $success));
+		}
+		else
+		{
+			return $this->VoidApiActionResponse($response, false, 400, 'Entity does not exist or is not exposed');
+		}
 	}
 
 	public function EditObject(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
-		$row = $this->Database->{$args['entity']}($args['objectId']);
-		$row->update($request->getParsedBody());
-		$success = $row->isClean();
-		return $this->ApiResponse(array('success' => $success));
+		if ($this->IsValidEntity($args['entity']))
+		{
+			$row = $this->Database->{$args['entity']}($args['objectId']);
+			$row->update($request->getParsedBody());
+			$success = $row->isClean();
+			return $this->ApiResponse(array('success' => $success));
+		}
+		else
+		{
+			return $this->VoidApiActionResponse($response, false, 400, 'Entity does not exist or is not exposed');
+		}
 	}
 
 	public function DeleteObject(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
-		$row = $this->Database->{$args['entity']}($args['objectId']);
-		$row->delete();
-		$success = $row->isClean();
-		return $this->ApiResponse(array('success' => $success));
+		if ($this->IsValidEntity($args['entity']))
+		{
+			$row = $this->Database->{$args['entity']}($args['objectId']);
+			$row->delete();
+			$success = $row->isClean();
+			return $this->ApiResponse(array('success' => $success));
+		}
+		else
+		{
+			return $this->VoidApiActionResponse($response, false, 400, 'Entity does not exist or is not exposed');
+		}
+	}
+
+	private function IsValidEntity($entity)
+	{
+		return in_array($entity, $this->OpenApiSpec->components->internalSchemas->ExposedEntity->enum);
 	}
 }

controllers/HabitsApiController.php

@@ -17,16 +17,31 @@ class HabitsApiController extends BaseApiController
 	public function TrackHabitExecution(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		$trackedTime = date('Y-m-d H:i:s');
-		if (isset($request->getQueryParams()['tracked_time']) && !empty($request->getQueryParams()['tracked_time']))
+		if (isset($request->getQueryParams()['tracked_time']) && !empty($request->getQueryParams()['tracked_time']) && IsIsoDateTime($request->getQueryParams()['tracked_time']))
 		{
 			$trackedTime = $request->getQueryParams()['tracked_time'];
 		}
 
-		return $this->ApiResponse(array('success' => $this->HabitsService->TrackHabit($args['habitId'], $trackedTime)));
+		try
+		{
+			$this->HabitsService->TrackHabit($args['habitId'], $trackedTime);
+			return $this->VoidApiActionResponse($response);
+		}
+		catch (\Exception $ex)
+		{
+			return $this->VoidApiActionResponse($response, false, 400, $ex->getMessage());
+		}
 	}
 
 	public function HabitDetails(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
-		return $this->ApiResponse($this->HabitsService->GetHabitDetails($args['habitId']));
+		try
+		{
+			return $this->ApiResponse($this->HabitsService->GetHabitDetails($args['habitId']));
+		}
+		catch (\Exception $ex)
+		{
+			return $this->VoidApiActionResponse($response, false, 400, $ex->getMessage());
+		}
 	}
 }

controllers/HabitsController.php

@@ -22,24 +22,30 @@ class HabitsController extends BaseController
 			$nextHabitTimes[$habit->id] = $this->HabitsService->GetNextHabitTime($habit->id);
 		}
 
+		$nextXDays = 5;
+		$countDueNextXDays = count(FindAllItemsInArrayByValue($nextHabitTimes, date('Y-m-d', strtotime("+$nextXDays days")), '<'));
+		$countOverdue = count(FindAllItemsInArrayByValue($nextHabitTimes, date('Y-m-d', strtotime('-1 days')), '<'));
 		return $this->AppContainer->view->render($response, 'habitsoverview', [
-			'habits' => $this->Database->habits(),
+			'habits' => $this->Database->habits()->orderBy('name'),
 			'currentHabits' => $this->HabitsService->GetCurrentHabits(),
-			'nextHabitTimes' => $nextHabitTimes
+			'nextHabitTimes' => $nextHabitTimes,
+			'nextXDays' => $nextXDays,
+			'countDueNextXDays' => $countDueNextXDays - $countOverdue,
+			'countOverdue' => $countOverdue
 		]);
 	}
 
 	public function TrackHabitExecution(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		return $this->AppContainer->view->render($response, 'habittracking', [
-			'habits' => $this->Database->habits()
+			'habits' => $this->Database->habits()->orderBy('name')
 		]);
 	}
 
 	public function HabitsList(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		return $this->AppContainer->view->render($response, 'habits', [
-			'habits' => $this->Database->habits()
+			'habits' => $this->Database->habits()->orderBy('name')
 		]);
 	}
 

controllers/LoginController.php

@@ -9,13 +9,15 @@ use \Grocy\Services\DemoDataGeneratorService;
 
 class LoginController extends BaseController
 {
-	public function __construct(\Slim\Container $container)
+	public function __construct(\Slim\Container $container, string $sessionCookieName)
 	{
 		parent::__construct($container);
 		$this->SessionService = new SessionService();
+		$this->SessionCookieName = $sessionCookieName;
 	}
 
 	protected $SessionService;
+	protected $SessionCookieName;
 
 	public function ProcessLogin(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
@@ -25,7 +27,7 @@ class LoginController extends BaseController
 			if ($postParams['username'] === HTTP_USER && $postParams['password'] === HTTP_PASSWORD)
 			{
 				$sessionKey = $this->SessionService->CreateSession();
-				setcookie('grocy_session', $sessionKey, time() + 31536000); // Cookie expires in 1 year, but session validity is up to SessionService
+				setcookie($this->SessionCookieName, $sessionKey, time() + 31536000); // Cookie expires in 1 year, but session validity is up to SessionService
 
 				return $response->withRedirect($this->AppContainer->UrlManager->ConstructUrl('/'));
 			}
@@ -47,7 +49,7 @@ class LoginController extends BaseController
 
 	public function Logout(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
-		$this->SessionService->RemoveSession($_COOKIE['grocy_session']);
+		$this->SessionService->RemoveSession($_COOKIE[$this->SessionCookieName]);
 		return $response->withRedirect($this->AppContainer->UrlManager->ConstructUrl('/'));
 	}
 
@@ -66,4 +68,9 @@ class LoginController extends BaseController
 
 		return $response->withRedirect($this->AppContainer->UrlManager->ConstructUrl('/stockoverview'));
 	}
+
+	public function GetSessionCookieName()
+	{
+		return $this->SessionCookieName;
+	}
 }

controllers/OpenApiController.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace Grocy\Controllers;
+
+use \Grocy\Services\ApplicationService;
+use \Grocy\Services\ApiKeyService;
+
+class OpenApiController extends BaseApiController
+{
+	public function __construct(\Slim\Container $container)
+	{
+		parent::__construct($container);
+		$this->ApiKeyService = new ApiKeyService();
+	}
+
+	protected $ApiKeyService;
+
+	public function DocumentationUi(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
+	{
+		return $this->AppContainer->view->render($response, 'openapiui');
+	}
+
+	public function DocumentationSpec(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
+	{
+		$applicationService = new ApplicationService();
+
+		$versionInfo = $applicationService->GetInstalledVersion();
+		$this->OpenApiSpec->info->version = $versionInfo->Version;
+		$this->OpenApiSpec->info->description = str_replace('PlaceHolderManageApiKeysUrl', $this->AppContainer->UrlManager->ConstructUrl('/manageapikeys'), $this->OpenApiSpec->info->description);
+		$this->OpenApiSpec->servers[0]->url = $this->AppContainer->UrlManager->ConstructUrl('/api');
+
+		return $this->ApiResponse($this->OpenApiSpec);
+	}
+
+	public function ApiKeysList(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
+	{
+		return $this->AppContainer->view->render($response, 'manageapikeys', [
+			'apiKeys' => $this->Database->api_keys()
+		]);
+	}
+
+	public function CreateNewApiKey(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
+	{
+		$newApiKey = $this->ApiKeyService->CreateApiKey();
+		$newApiKeyId = $this->ApiKeyService->GetApiKeyId($newApiKey);
+		return $response->withRedirect($this->AppContainer->UrlManager->ConstructUrl("/manageapikeys?CreatedApiKeyId=$newApiKeyId"));
+	}
+}

controllers/StockApiController.php

@@ -16,13 +16,20 @@ class StockApiController extends BaseApiController
 
 	public function ProductDetails(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
-		return $this->ApiResponse($this->StockService->GetProductDetails($args['productId']));
+		try
+		{
+			return $this->ApiResponse($this->StockService->GetProductDetails($args['productId']));
+		}
+		catch (\Exception $ex)
+		{
+			return $this->VoidApiActionResponse($response, false, 400, $ex->getMessage());
+		}
 	}
 
 	public function AddProduct(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		$bestBeforeDate = date('Y-m-d');
-		if (isset($request->getQueryParams()['bestbeforedate']) && !empty($request->getQueryParams()['bestbeforedate']))
+		if (isset($request->getQueryParams()['bestbeforedate']) && !empty($request->getQueryParams()['bestbeforedate']) && IsIsoDate($request->getQueryParams()['bestbeforedate']))
 		{
 			$bestBeforeDate = $request->getQueryParams()['bestbeforedate'];
 		}
@@ -33,7 +40,15 @@ class StockApiController extends BaseApiController
 			$transactionType = $request->getQueryParams()['transactiontype'];
 		}
 
-		return $this->ApiResponse(array('success' => $this->StockService->AddProduct($args['productId'], $args['amount'], $bestBeforeDate, $transactionType)));
+		try
+		{
+			$this->StockService->AddProduct($args['productId'], $args['amount'], $bestBeforeDate, $transactionType);
+			return $this->VoidApiActionResponse($response);
+		}
+		catch (\Exception $ex)
+		{
+			return $this->VoidApiActionResponse($response, false, 400, $ex->getMessage());
+		}
 	}
 
 	public function ConsumeProduct(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
@@ -50,18 +65,34 @@ class StockApiController extends BaseApiController
 			$transactionType = $request->getQueryParams()['transactiontype'];
 		}
 
-		return $this->ApiResponse(array('success' => $this->StockService->ConsumeProduct($args['productId'], $args['amount'], $spoiled, $transactionType)));
+		try
+		{
+			$this->StockService->ConsumeProduct($args['productId'], $args['amount'], $spoiled, $transactionType);
+			return $this->VoidApiActionResponse($response);
+		}
+		catch (\Exception $ex)
+		{
+			return $this->VoidApiActionResponse($response, false, 400, $ex->getMessage());
+		}
 	}
 
 	public function InventoryProduct(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		$bestBeforeDate = date('Y-m-d');
-		if (isset($request->getQueryParams()['bestbeforedate']) && !empty($request->getQueryParams()['bestbeforedate']))
+		if (isset($request->getQueryParams()['bestbeforedate']) && !empty($request->getQueryParams()['bestbeforedate']) && IsIsoDate($request->getQueryParams()['bestbeforedate']))
 		{
 			$bestBeforeDate = $request->getQueryParams()['bestbeforedate'];
 		}
 
-		return $this->ApiResponse(array('success' => $this->StockService->InventoryProduct($args['productId'], $args['newAmount'], $bestBeforeDate)));
+		try
+		{
+			$this->StockService->InventoryProduct($args['productId'], $args['newAmount'], $bestBeforeDate);
+			return $this->VoidApiActionResponse($response);
+		}
+		catch (\Exception $ex)
+		{
+			return $this->VoidApiActionResponse($response, false, 400, $ex->getMessage());
+		}
 	}
 
 	public function CurrentStock(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
@@ -69,9 +100,27 @@ class StockApiController extends BaseApiController
 		return $this->ApiResponse($this->StockService->GetCurrentStock());
 	}
 
-	public function AddmissingProductsToShoppingList(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
+	public function AddMissingProductsToShoppingList(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		$this->StockService->AddMissingProductsToShoppingList();
-		return $this->ApiResponse(array('success' => true));
+		return $this->VoidApiActionResponse($response);
+	}
+
+	public function ExternalBarcodeLookup(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
+	{
+		try
+		{
+			$addFoundProduct = false;
+			if (isset($request->getQueryParams()['add']) && ($request->getQueryParams()['add'] === 'true' || $request->getQueryParams()['add'] === 1))
+			{
+				$addFoundProduct = true;
+			}
+			
+			return $this->ApiResponse($this->StockService->ExternalBarcodeLookup($args['barcode'], $addFoundProduct));
+		}
+		catch (\Exception $ex)
+		{
+			return $this->VoidApiActionResponse($response, false, 400, $ex->getMessage());
+		}
 	}
 }

controllers/StockController.php

@@ -17,32 +17,40 @@ class StockController extends BaseController
 
 	public function Overview(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
+		$currentStock = $this->StockService->GetCurrentStock();
+		$nextXDays = 5;
+		$countExpiringNextXDays = count(FindAllObjectsInArrayByPropertyValue($currentStock, 'best_before_date', date('Y-m-d', strtotime('+5 days')), '<'));
+		$countAlreadyExpired = count(FindAllObjectsInArrayByPropertyValue($currentStock, 'best_before_date', date('Y-m-d', strtotime('-1 days')), '<'));
 		return $this->AppContainer->view->render($response, 'stockoverview', [
-			'products' => $this->Database->products(),
-			'quantityunits' => $this->Database->quantity_units(),
-			'currentStock' => $this->StockService->GetCurrentStock(),
-			'missingProducts' => $this->StockService->GetMissingProducts()
+			'products' => $this->Database->products()->orderBy('name'),
+			'quantityunits' => $this->Database->quantity_units()->orderBy('name'),
+			'locations' => $this->Database->locations()->orderBy('name'),
+			'currentStock' => $currentStock,
+			'missingProducts' => $this->StockService->GetMissingProducts(),
+			'nextXDays' => $nextXDays,
+			'countExpiringNextXDays' => $countExpiringNextXDays,
+			'countAlreadyExpired' => $countAlreadyExpired
 		]);
 	}
 
 	public function Purchase(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		return $this->AppContainer->view->render($response, 'purchase', [
-			'products' => $this->Database->products()
+			'products' => $this->Database->products()->orderBy('name')
 		]);
 	}
 
 	public function Consume(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		return $this->AppContainer->view->render($response, 'consume', [
-			'products' => $this->Database->products()
+			'products' => $this->Database->products()->orderBy('name')
 		]);
 	}
 
 	public function Inventory(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		return $this->AppContainer->view->render($response, 'inventory', [
-			'products' => $this->Database->products()
+			'products' => $this->Database->products()->orderBy('name')
 		]);
 	}
 
@@ -50,8 +58,8 @@ class StockController extends BaseController
 	{
 		return $this->AppContainer->view->render($response, 'shoppinglist', [
 			'listItems' => $this->Database->shopping_list(),
-			'products' => $this->Database->products(),
-			'quantityunits' => $this->Database->quantity_units(),
+			'products' => $this->Database->products()->orderBy('name'),
+			'quantityunits' => $this->Database->quantity_units()->orderBy('name'),
 			'missingProducts' => $this->StockService->GetMissingProducts()
 		]);
 	}
@@ -59,23 +67,23 @@ class StockController extends BaseController
 	public function ProductsList(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		return $this->AppContainer->view->render($response, 'products', [
-			'products' => $this->Database->products(),
-			'locations' => $this->Database->locations(),
-			'quantityunits' => $this->Database->quantity_units()
+			'products' => $this->Database->products()->orderBy('name'),
+			'locations' => $this->Database->locations()->orderBy('name'),
+			'quantityunits' => $this->Database->quantity_units()->orderBy('name')
 		]);
 	}
 
 	public function LocationsList(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		return $this->AppContainer->view->render($response, 'locations', [
-			'locations' => $this->Database->locations()
+			'locations' => $this->Database->locations()->orderBy('name')
 		]);
 	}
 
 	public function QuantityUnitsList(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		return $this->AppContainer->view->render($response, 'quantityunits', [
-			'quantityunits' => $this->Database->quantity_units()
+			'quantityunits' => $this->Database->quantity_units()->orderBy('name')
 		]);
 	}
 
@@ -84,8 +92,8 @@ class StockController extends BaseController
 		if ($args['productId'] == 'new')
 		{
 			return $this->AppContainer->view->render($response, 'productform', [
-				'locations' =>  $this->Database->locations(),
-				'quantityunits' =>  $this->Database->quantity_units(),
+				'locations' =>  $this->Database->locations()->orderBy('name'),
+				'quantityunits' =>  $this->Database->quantity_units()->orderBy('name'),
 				'mode' => 'create'
 			]);
 		}
@@ -93,8 +101,8 @@ class StockController extends BaseController
 		{
 			return $this->AppContainer->view->render($response, 'productform', [
 				'product' =>  $this->Database->products($args['productId']),
-				'locations' =>  $this->Database->locations(),
-				'quantityunits' =>  $this->Database->quantity_units(),
+				'locations' =>  $this->Database->locations()->orderBy('name'),
+				'quantityunits' =>  $this->Database->quantity_units()->orderBy('name'),
 				'mode' => 'edit'
 			]);
 		}
@@ -139,7 +147,7 @@ class StockController extends BaseController
 		if ($args['itemId'] == 'new')
 		{
 			return $this->AppContainer->view->render($response, 'shoppinglistform', [
-				'products' =>  $this->Database->products(),
+				'products' =>  $this->Database->products()->orderBy('name'),
 				'mode' => 'create'
 			]);
 		}
@@ -147,7 +155,7 @@ class StockController extends BaseController
 		{
 			return $this->AppContainer->view->render($response, 'shoppinglistform', [
 				'listItem' =>  $this->Database->shopping_list($args['itemId']),
-				'products' =>  $this->Database->products(),
+				'products' =>  $this->Database->products()->orderBy('name'),
 				'mode' => 'edit'
 			]);
 		}

data/.gitignore

@@ -1,3 +1,4 @@
 *
 !.gitignore
 !viewcache
+!plugins

data/plugins/.gitignore

@@ -0,0 +1,3 @@
+*
+!.gitignore
+!DemoBarcodeLookupPlugin.php

data/plugins/DemoBarcodeLookupPlugin.php

@@ -0,0 +1,78 @@
+<?php
+
+use \Grocy\Helpers\BaseBarcodeLookupPlugin;
+
+/*
+	This class must extend BaseBarcodeLookupPlugin (in namespace \Grocy\Helpers)
+*/
+class DemoBarcodeLookupPlugin extends BaseBarcodeLookupPlugin
+{
+	/*
+		To use this plugin, configure it in data/config.php like this:
+		define('STOCK_BARCODE_LOOKUP_PLUGIN', 'DemoBarcodeLookupPlugin');
+	*/
+
+	/*
+		To try it:
+		Call the API function at /api/stock/external-barcode-lookup/{barcode}
+
+		When you also add ?add=true as a query parameter to the API call,
+		on a successful lookup the product is added to the database and in the output
+		the new product id is included (automatically, nothing to do here in the plugin)
+	*/
+
+	/*
+		Provided references:
+
+		$this->Locations contains all locations
+		$this->QuantityUnits contains all quantity units
+	*/
+
+	/*
+		Useful hints:
+
+		Get a quantity unit by name:
+		$quantityUnit = FindObjectInArrayByPropertyValue($this->QuantityUnits, 'name', 'Piece');
+
+		Get a location by name:
+		$location = FindObjectInArrayByPropertyValue($this->Locations, 'name', 'Fridge');
+	*/
+
+	/*
+		This class must implement the protected abstract function ExecuteLookup($barcode),
+		which is called with the barcode that needs to be looked up and must return an
+		associative array of the product model or null, when nothing was found for the barcode.
+
+		The returned array must contain at least these properties:
+		array(
+			'name' => '',
+			'location_id' => 1, // A valid id of a location object, check against $this->Locations
+			'qu_id_purchase' => 1, // A valid id of quantity unit object, check against $this->QuantityUnits
+			'qu_id_stock' => 1, // A valid id of quantity unit object, check against $this->QuantityUnits
+			'qu_factor_purchase_to_stock' => 1, // Normally 1 when quantity unit stock and purchase is the same
+			'barcode' => $barcode // The barcode of the product, maybe just pass through $barcode or manipulate it if necessary
+		)
+	*/
+	protected function ExecuteLookup($barcode)
+	{
+		if ($barcode === 'x') // Demonstration when nothing is found
+		{
+			return null;
+		}
+		elseif ($barcode === 'e') // Demonstration when an error occurred
+		{
+			throw new \Exception('This is the error message from the plugin...');
+		}
+		else
+		{
+			return array(
+				'name' => 'LookedUpProduct_' . RandomString(5),
+				'location_id' => $this->Locations[0]->id,
+				'qu_id_purchase' => $this->QuantityUnits[0]->id,
+				'qu_id_stock' => $this->QuantityUnits[0]->id,
+				'qu_factor_purchase_to_stock' => 1,
+				'barcode' => $barcode
+			);
+		}
+	}
+}

helpers/BaseBarcodeLookupPlugin.php

@@ -0,0 +1,80 @@
+<?php
+
+namespace Grocy\Helpers;
+
+abstract class BaseBarcodeLookupPlugin
+{
+	final public function __construct($locations, $quantityUnits)
+	{
+		$this->Locations = $locations;
+		$this->QuantityUnits = $quantityUnits;
+	}
+
+	protected $Locations;
+	protected $QuantityUnits;
+
+	abstract protected function ExecuteLookup($barcode);
+
+	final public function Lookup($barcode)
+	{
+		$pluginOutput = $this->ExecuteLookup($barcode);
+
+		if ($pluginOutput === null)
+		{
+			return $pluginOutput;
+		}
+
+		// Plugin must return an associative array
+		if (!is_array($pluginOutput))
+		{
+			throw new \Exception('Plugin output must be an associative array');
+		}
+		if (!IsAssociativeArray($pluginOutput)) // $pluginOutput is at least an indexed array here
+		{
+			throw new \Exception('Plugin output must be an associative array');
+		}
+
+		// Check for minimum needed properties
+		$minimunNeededProperties = array(
+			'name',
+			'location_id',
+			'qu_id_purchase',
+			'qu_id_stock',
+			'qu_factor_purchase_to_stock',
+			'barcode'
+		);
+		foreach ($minimunNeededProperties as $prop)
+		{
+			if (!array_key_exists($prop, $pluginOutput))
+			{
+				throw new \Exception("Plugin output does not provide needed property $prop");
+			}
+		}
+
+		// $pluginOutput contains all needed properties here
+
+		// Check referenced entity ids are valid
+		$locationId = $pluginOutput['location_id'];
+		if (FindObjectInArrayByPropertyValue($this->Locations, 'id', $locationId) === null)
+		{
+			throw new \Exception("Location $locationId is not a valid location id");
+		}
+		$quIdPurchase = $pluginOutput['qu_id_purchase'];
+		if (FindObjectInArrayByPropertyValue($this->QuantityUnits, 'id', $quIdPurchase) === null)
+		{
+			throw new \Exception("Location $quIdPurchase is not a valid quantity unit id");
+		}
+		$quIdStock = $pluginOutput['qu_id_stock'];
+		if (FindObjectInArrayByPropertyValue($this->QuantityUnits, 'id', $quIdStock) === null)
+		{
+			throw new \Exception("Location $quIdStock is not a valid quantity unit id");
+		}
+		$quFactor = $pluginOutput['qu_factor_purchase_to_stock'];
+		if (empty($quFactor) || !is_numeric($quFactor))
+		{
+			throw new \Exception('Quantity unit factor is empty or not a number');
+		}
+
+		return $pluginOutput;
+	}
+}

helpers/UrlManager.php

@@ -4,14 +4,34 @@ namespace Grocy\Helpers;
 
 class UrlManager
 {
-	public function __construct(string $basePath) {
-		$this->BasePath = $basePath;
+	public function __construct(string $basePath)
+	{
+		if ($basePath === '/')
+		{
+			$this->BasePath = $this->GetBaseUrl();
+		}
+		else
+		{
+			$this->BasePath = $basePath;
+		}
 	}
 
 	protected $BasePath;
 
-	public function ConstructUrl($relativePath)
+	public function ConstructUrl($relativePath, $isResource = false)
 	{
-		return rtrim($this->BasePath, '/') . $relativePath;
+		if (DISABLE_URL_REWRITING === false || $isResource === true)
+		{
+			return rtrim($this->BasePath, '/') . $relativePath;
+		}
+		else // Is not a resource and URL rewriting is disabled
+		{
+			return rtrim($this->BasePath, '/') . '/index.php' . $relativePath;
+		}
+	}
+
+	private function GetBaseUrl()
+	{
+		return (isset($_SERVER['HTTPS']) ? "https" : "http") . "://$_SERVER[HTTP_HOST]";
 	}
 }

helpers/extensions.php

@@ -45,6 +45,38 @@ function FindAllObjectsInArrayByPropertyValue($array, $propertyName, $propertyVa
 	return $returnArray;
 }
 
+function FindAllItemsInArrayByValue($array, $value, $operator = '==')
+{
+	$returnArray = array();
+
+	foreach($array as $item)
+	{
+		switch($operator)
+		{
+			case '==':
+				if($item == $value)
+				{
+					$returnArray[] = $item;
+				}
+				break;
+			case '>':
+				if($item > $value)
+				{
+					$returnArray[] = $item;
+				}
+				break;
+			case '<':
+				if($item < $value)
+				{
+					$returnArray[] = $item;
+				}
+				break;
+		}
+	}
+
+	return $returnArray;
+}
+
 function SumArrayValue($array, $propertyName)
 {
 	$sum = 0;
@@ -61,3 +93,45 @@ function GetClassConstants($className)
 	$r = new ReflectionClass($className);
 	return $r->getConstants();
 }
+
+function RandomString($length, $allowedChars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ')
+{
+	$randomString = '';
+	for ($i = 0; $i < $length; $i++)
+	{
+		$randomString .= $allowedChars[rand(0, strlen($allowedChars) - 1)];
+	}
+
+	return $randomString;
+}
+
+function IsAssociativeArray(array $array)
+{
+	$keys = array_keys($array);
+	return array_keys($keys) !== $keys;
+}
+
+function IsIsoDate($dateString)
+{
+	$d = DateTime::createFromFormat('Y-m-d', $dateString);
+	return $d && $d->format('Y-m-d') === $dateString;
+}
+
+function IsIsoDateTime($dateTimeString)
+{
+	$d = DateTime::createFromFormat('Y-m-d H:i:s', $dateTimeString);
+	return $d && $d->format('Y-m-d H:i:s') === $dateTimeString;
+}
+
+function BoolToString(bool $bool)
+{
+	return $bool ? 'true' : 'false';
+}
+
+function Setting(string $name, string $value)
+{
+	if (!defined($name))
+	{
+		define($name, $value);
+	}
+}

localization/de.php

@@ -101,6 +101,49 @@ return array(
 	'Are you sure to delete quantity unit "#1"?' => 'Mengeneinheit "#1" wirklich löschen?',
 	'Are you sure to delete product "#1"?' => 'Produkt "#1" wirklich löschen?',
 	'Are you sure to delete location "#1"?' => 'Standort "#1" wirklich löschen?',
+	'Manage API keys' => 'API-Keys verwalten',
+    'REST API & data model documentation' => 'REST-API & Datenmodell Dokumentation',
+    'API keys' => 'API-Keys',
+    'Create new API key' => 'Neuen API-Key erstellen',
+    'API key' => 'API-Key',
+    'Expires' => 'Läuft ab',
+    'Created' => 'Erstellt',
+	'This product is not in stock' => 'Dieses Produkt ist nicht vorrätig',
+	'This means #1 will be added to stock' => 'Das bedeutet #1 wird dem Bestand hinzugefügt',
+	'This means #1 will be removed from stock' => 'Das bedeutet #1 wird aus dem Bestand entfernt',
+	'This means it is estimated that a new execution of this habit is tracked #1 days after the last was tracked' => 'Das bedeutet, dass eine erneute Ausführung der Gewohnheit #1 Tage nach der letzten Ausführung geplant wird',
+	'Removed #1 #2 of #3 from stock' => '#1 #2 #3 aus dem Bestand entfernt',
+	'About grocy' => 'Über grocy',
+	'Close' => 'Schließen',
+	'#1 batteries are due to be charged within the next #2 days' => '#1 Batterien müssen in den nächsten #2 Tagen geladen werden',
+	'#1 batteries are overdue to be charged' => '#1 Batterien sind überfällig',
+	'#1 habits are due to be done within the next #2 days' => '#1 Gewohnheiten stehen in den nächsten #2 Tagen an',
+	'#1 habits are overdue to be done' => '#1 Gewohnheiten sind überfällig',
+	'Released on' => 'Veröffentlicht am',
+	'Consume #3 #1 of #2' => 'Verbrauche #3 #1 #2',
+	'Added #1 #2 of #3 to stock' => '#1 #2 #3 dem Bestand hinzugefügt',
+	'Stock amount of #1 is now #2 #3' => 'Es sind nun #2 #3 #1 im Bestand',
+	'Tracked execution of habit #1 on #2' => 'Ausführung von #1 am #2 erfasst',
+	'Tracked charge cylce of battery #1 on #2' => 'Ladezyklus für Batterie #1 am #2 erfasst',
+	'Consume all #1 which are currently in stock' => 'Verbrauche den kompletten Bestand von #1',
+	'All' => 'Alle',
+	'Track charge cycle of battery #1' => 'Erfasse einen Ladezyklus für Batterie #1',
+	'Track execution of habit #1' => 'Erfasse eine Ausführung von #1',
+	'Filter by location' => 'Nach Standort filtern',
+	'Search' => 'Suche',
+	'Not logged in' => 'Nicht angemeldet',
+	'You have to select a product' => 'Ein Produkt muss ausgewählt werden',
+	'You have to select a habit' => 'Eine Gewohnheit muss ausgewählt werden',
+	'You have to select a battery' => 'Eine Batterie muss ausgewählt werden',
+	'A name is required' => 'Ein Name ist erforderlich',
+	'A location is required' => 'Ein Standort ist erforderlich',
+	'The amount cannot be lower than #1' => 'Die Menge darf nicht kleiner als #1 sein',
+	'This cannot be negative' => 'Dies darf nicht negativ sein',
+	'A quantity unit is required' => 'Eine Mengeneinheit muss ausgewählt werden',
+	'A period type is required' => 'Eine Periodentyp muss ausgewählt werden',
+	'A best before date is required and must be later than today' => 'Ein Mindesthaltbarkeitsdatum ist erforderlich und muss später als heute sein',
+	'Settings' => 'Einstellungen',
+	'This can only be before now' => 'Dies kann nur vor jetzt sein',
 	
 	//Constants
 	'manually' => 'Manuell',
@@ -110,7 +153,6 @@ return array(
 	'timeago_locale' => 'de',
 	'timeago_nan' => 'vor NaN Jahren',
 	'moment_locale' => 'de',
-	'bootstrap_datepicker_locale' => 'de',
 	'datatables_localization' => '{"sEmptyTable":"Keine Daten in der Tabelle vorhanden","sInfo":"_START_ bis _END_ von _TOTAL_ Einträgen","sInfoEmpty":"Keine Daten vorhanden","sInfoFiltered":"(gefiltert von _MAX_ Einträgen)","sInfoPostFix":"","sInfoThousands":".","sLengthMenu":"_MENU_ Einträge anzeigen","sLoadingRecords":"Wird geladen ..","sProcessing":"Bitte warten ..","sSearch":"Suchen","sZeroRecords":"Keine Einträge vorhanden","oPaginate":{"sFirst":"Erste","sPrevious":"Zurück","sNext":"Nächste","sLast":"Letzte"},"oAria":{"sSortAscending":": aktivieren, um Spalte aufsteigend zu sortieren","sSortDescending":": aktivieren, um Spalte absteigend zu sortieren"},"select":{"rows":{"0":"Zum Auswählen auf eine Zeile klicken","1":"1 Zeile ausgewählt","_":"%d Zeilen ausgewählt"}},"buttons":{"print":"Drucken","colvis":"Spalten","copy":"Kopieren","copyTitle":"In Zwischenablage kopieren","copyKeys":"Taste <i>ctrl</i> oder <i>⌘</i> + <i>C</i> um Tabelle<br>in Zwischenspeicher zu kopieren.<br><br>Um abzubrechen die Nachricht anklicken oder Escape drücken.","copySuccess":{"1":"1 Spalte kopiert","_":"%d Spalten kopiert"}}}',
 	
 	//Demo data

localization/en.php

@@ -9,6 +9,5 @@ return array(
 	'timeago_locale' => 'en',
 	'timeago_nan' => 'NaN years ago',
 	'moment_locale' => '',
-	'bootstrap_datepicker_locale' => '',
 	'datatables_localization' => '{"sEmptyTable":"No data available in table","sInfo":"Showing _START_ to _END_ of _TOTAL_ entries","sInfoEmpty":"Showing 0 to 0 of 0 entries","sInfoFiltered":"(filtered from _MAX_ total entries)","sInfoPostFix":"","sInfoThousands":",","sLengthMenu":"Show _MENU_ entries","sLoadingRecords":"Loading...","sProcessing":"Processing...","sSearch":"Search:","sZeroRecords":"No matching records found","oPaginate":{"sFirst":"First","sLast":"Last","sNext":"Next","sPrevious":"Previous"},"oAria":{"sSortAscending":": activate to sort column ascending","sSortDescending":": activate to sort column descending"}}'
 );

localization/it.php

@@ -0,0 +1,188 @@
+<?php
+
+return array(
+	'Stock overview' => 'Dispensa',
+	'#1 products with #2 units in stock' => '#1 prodotti stano per finire(#2 unità)',
+	'#1 products expiring within the next #2 days' => '#1 prodotti scadranno tra #2 giorni',
+	'#1 products are already expired' => '#1 prodotti scaduti',
+	'#1 products are below defined min. stock amount' => '#1 prodotti sotto il limite minimo',
+	'Product' => 'prodotto',
+	'Amount' => 'quantità',
+	'Next best before date' => 'Prossima data di scadenza',
+	'Logout' => 'Logout',
+	'Habits overview' => 'Riepilogo delle abitudini',
+	'Batteries overview' => 'Riepilogo delle batterie',
+	'Purchase' => 'Acquisti',
+	'Consume' => 'Consumi',
+	'Inventory' => 'Inventario',
+	'Shopping list' => 'Lista della spesa',
+	'Habit tracking' => 'Dati abitudini',
+	'Battery tracking' => 'Dati batterie',
+	'Products' => 'Prodotti',
+	'Locations' => 'Posizioni',
+	'Quantity units' => 'Unità di misura',
+	'Habits' => 'Abitudini',
+	'Batteries' => 'Batterie',
+	'Habit' => 'Abitudine',
+	'Next estimated tracking' => 'Prossima esecuzione',
+	'Last tracked' => 'Ultima esecuzione',
+	'Battery' => 'Batterie',
+	'Last charged' => 'Ultima ricarica',
+	'Next planned charge cycle' => 'Prossima ricarica',
+	'Best before' => 'Data di scadenza',
+	'OK' => 'OK',
+	'Product overview' => 'Riepilogo dei prodotti',
+	'Stock quantity unit' => 'Unità di misura',
+	'Stock amount' => 'Quantità',
+	'Last purchased' => 'Ultimo acquisto',
+	'Last used' => 'Ultimo utilizzo',
+	'Spoiled' => 'Scaduto',
+	'Barcode lookup is disabled' => 'I codici a barre sono disabilitati',
+	'will be added to the list of barcodes for the selected product on submit' => 'sarà aggiunto alla lista dei codici a barre per questo prodotto',
+	'New amount' => 'Nuova quantità',
+	'Note' => 'Nota',
+	'Tracked time' => 'Ora di esecuzione',
+	'Habit overview' => 'Riepilogo dell\'abitudine',
+	'Tracked count' => 'Numero di esecuzioni',
+	'Battery overview' => 'Riepilogo della batteria',
+	'Charge cycles count' => 'Numero di ricariche',
+	'Create shopping list item' => 'Aggiungi un prodotto alla lista della spesa',
+	'Edit shopping list item' => 'Modifica un\'entrata della lista della spesa',
+	'#1 units were automatically added and will apply in addition to the amount entered here' => '#1 sono state aggiunte automaticamente',
+	'Save' => 'Salva',
+	'Add' => 'Aggiungi',
+	'Name' => 'Nome',
+	'Location' => 'Posizione',
+	'Min. stock amount' => 'Quantità minima',
+	'QU purchase' => 'Unità di acquisto',
+	'QU stock' => 'Unità di dispensa',
+	'QU factor' => 'Fattore di conversione',
+	'Description' => 'Descrizione',
+	'Create product' => 'Aggiungi prodotto',
+	'Barcode(s)' => 'Codice a barre',
+	'Minimum stock amount' => 'Quantità minima',
+	'Default best before days' => 'Data di scadenza standard in giorni',
+	'Quantity unit purchase' => 'Unità di acquisto',
+	'Quantity unit stock' => 'Unità di dispensa',
+	'Factor purchase to stock quantity unit' => 'Fattore di conversione tra quantità di acquisto e di dispensa',
+	'Create location' => 'Aggiungi posizione',
+	'Create quantity unit' => 'Aggiungi unità di misura',
+	'Period type' => 'Tipo di ripetizione',
+	'Period days' => 'Periodo in giorni',
+	'Create habit' => 'Aggiungi abitudine',
+	'Used in' => 'Usato in',
+	'Create battery' => 'Aggiungi batteria',
+	'Edit battery' => 'Modifica batteria',
+	'Edit habit' => 'Modifica abitudine',
+	'Edit quantity unit' => 'Modifica unità di misura',
+	'Edit product' => 'Modifica prodotto',
+	'Edit location' => 'Modifica posizione',
+	'Record data' => 'Registra dati',
+	'Manage master data' => 'Gestisci dati',
+	'This will apply to added products' => 'Verrà applicato ai prodotti aggiunti',
+	'never' => 'mai',
+	'Add products that are below defined min. stock amount' => 'Aggiungi prodotti sotti il limite minimo',
+	'For purchases this amount of days will be added to today for the best before date suggestion' => 'Questo numero di giorni verrà aggiunto alla data di acquisto per la data di scadenza',
+	'This means 1 #1 purchased will be converted into #2 #3 in stock' => 'Questo significa che 1 #1 acquistato diventerà #2 #3 in dispensa',
+	'Login' => 'Login',
+	'Username' => 'Username',
+	'Password' => 'Password',
+	'Invalid credentials, please try again' => 'Credenziali non valide, per favore riprova',
+	'Are you sure to delete battery "#1"?' => 'Sei sicuro di voler eliminare la batteria "#1"?',
+	'Yes' => 'Si',
+	'No' => 'No',
+	'Are you sure to delete habit "#1"?' => 'Sei sicuro di voler eliminare l\'abitudine "#1"?',
+	'"#1" could not be resolved to a product, how do you want to proceed?' => '"#1" non è stato associato a nessun prodotto, vuoi procedere?',
+	'Create or assign product' => 'Aggiungi o assegna prodotto',
+	'Cancel' => 'Annulla',
+	'Add as new product' => 'Aggiungi come nuovo prodotto',
+	'Add as barcode to existing product' => 'Assegna il codice a barre ad un prodotto',
+	'Add as new product and prefill barcode' => 'Aggiungi come nuovo prodotto ed assegna il codice a barre',
+	'Are you sure to delete quantity unit "#1"?' => 'Sei sicuro di voler eliminare l\'unità di misura "#1"?',
+	'Are you sure to delete product "#1"?' => 'Sei sicuro di voler eliminare il prodotto "#1"?',
+	'Are you sure to delete location "#1"?' => 'Sei sicuro di voler eliminare la posizione "#1"?',
+	'Manage API keys' => 'Gestisci le chiavi API',
+    'REST API & data model documentation' => 'REST API & Documentazione del modello di dati',
+    'API keys' => 'Chiavi API',
+    'Create new API key' => 'Crea nuova chiave API',
+    'API key' => 'Chiave API',
+    'Expires' => 'Scade il',
+    'Created' => 'Creata il',
+	'This product is not in stock' => 'Questo prodotto non è in dispensa',
+	'This means #1 will be added to stock' => '#1 sarà aggiunto alla dispensa',
+	'This means #1 will be removed from stock' => '#1 sarà rimosso dalla dispensa',
+	'This means it is estimated that a new execution of this habit is tracked #1 days after the last was tracked' => 'L\'esecuzione dell\'abitudine è #1 giorni dopo la precedente',
+	'Removed #1 #2 of #3 from stock' => '#1 #2 su #3 rimossi dalla dispensa',
+	'About grocy' => 'Riguardo grocy',
+	'Close' => 'Chiudi',
+	'#1 batteries are due to be charged within the next #2 days' => '#1 batterie da ricaricare entro #2 giorni',
+	'#1 batteries are overdue to be charged' => '#1 batterie devono essere ricaricate',
+	'#1 habits are due to be done within the next #2 days' => '#1 abitudini da eseguire entro #2 giorni',
+	'#1 habits are overdue to be done' => '#1 abitudini da eseguire',
+	'Released on' => 'Rilasciato il',
+	'Consume #3 #1 of #2' => 'Consumati #3 #1 di #2',
+	'Added #1 #2 of #3 to stock' => 'Aggiunti #1 #2 di #3',
+	'Stock amount of #1 is now #2 #3' => 'La quantità in dispensa di #1 è ora #2 #3',
+	'Tracked execution of habit #1 on #2' => 'Esecuzione dell\'abitudine #1 registrata il #2',
+	'Tracked charge cylce of battery #1 on #2' => 'Ricarica della batteria #1 effettuata il #2',
+	'Consume all #1 which are currently in stock' => 'Consuma tutto #1 in dispensa',
+	'All' => 'Tutto',
+	'Track charge cycle of battery #1' => 'Registra la ricarica della batteria #1',
+	'Track execution of habit #1' => 'Registra l\'esecuzione dell\'abitudine #1',
+	'Filter by location' => 'Filtra per posizione',
+	'Search' => 'Cerca',
+	'Not logged in' => 'Non autenticato',
+	'You have to select a product' => 'Devi selezionare un prodotto',
+	'You have to select a habit' => 'Devi selezionare un\'abitudine',
+	'You have to select a battery' => 'Devi selezionare una batteria',
+	'A name is required' => 'Inserisci un nome',
+	'A location is required' => 'Inserisci la posizione',
+	'The amount cannot be lower than #1' => 'La quantità non può essere minore di #1',
+	'This cannot be negative' => 'Il numero non può essere negativo',
+	'A quantity unit is required' => 'Inserisci un\'unità di misura',
+	'A period type is required' => 'Seleziona un tipo di ripetizione',
+	
+	//Constants
+	'manually' => 'Manualmente',
+	'dynamic-regular' => 'Regolatore dinamico',
+	
+	//Technical component translations
+	'timeago_locale' => 'it',
+	'timeago_nan' => 'NaN anni fa',
+	'moment_locale' => 'it',
+	'bootstrap_datepicker_locale' => 'it',
+	'datatables_localization' => '{"sEmptyTable":"Nessun dato disponibile","sInfo":"Mostrando da _START_ a _END_ di _TOTAL_ voci","sInfoEmpty":"Mostrando da 0 a 0 di 0 voci","sInfoFiltered":"(Filtrato da _MAX_ voci totali)","sInfoPostFix":"","sInfoThousands":",","sLengthMenu":"Mostra _MENU_ voci","sLoadingRecords":"Caricando...","sProcessing":"Calcolando...","sSearch":"Cerca:","sZeroRecords":"Nessun risultato trovato","oPaginate":{"sFirst":"Prima","sLast":"Ultima","sNext":"Prossima","sPrevious":"Precedente"},"oAria":{"sSortAscending":": ordine crescente","sSortDescending":": ordine decrescente"}}',
+	
+	//Demo data
+	'Cookies' => 'Biscotti',
+	'Chocolate' => 'Cioccolato',
+	'Pantry' => 'Vorratskammer',
+	'Candy cupboard' => 'Süßigkeitenschrank',
+	'Tinned food cupboard' => 'Konservenschrank',
+	'Fridge' => 'Kühlschrank',
+	'Piece' => 'Pezzo',
+	'Pack' => 'Pacco',
+	'Glass' => 'Bicchiere',
+	'Tin' => 'Scatola',
+	'Can' => 'Lattina',
+	'Bunch' => 'Cespo',
+	'Gummy bears' => 'Caramelle',
+	'Crisps' => 'Patatine',
+	'Eggs' => 'Uova',
+	'Noodles' => 'Spaghetti',
+	'Pickles' => 'Marmellata',
+	'Gulash soup' => 'Dado',
+	'Yogurt' => 'Yogurt',
+	'Cheese' => 'Parmigiano',
+	'Cold cuts' => 'Pancetta',
+	'Paprika' => 'Pepe',
+	'Cucumber' => 'Zucchine',
+	'Radish' => 'Radicchio',
+	'Tomato' => 'Pomodori',
+	'Changed towels in the bathroom' => 'Cambiare asciugamani in bagno',
+	'Cleaned the kitchen floor' => 'Pulire la cucina',
+	'Warranty ends' => 'Scadenza dalla garanzia',
+	'TV remote control' => 'Telecomando',
+	'Alarm clock' => 'Sveglia',
+	'Heat remote control' => 'Termostato'
+);

middleware/ApiKeyAuthMiddleware.php

@@ -0,0 +1,58 @@
+<?php
+
+namespace Grocy\Middleware;
+
+use \Grocy\Services\SessionService;
+use \Grocy\Services\ApiKeyService;
+
+class ApiKeyAuthMiddleware extends BaseMiddleware
+{
+	public function __construct(\Slim\Container $container, string $sessionCookieName, string $apiKeyHeaderName)
+	{
+		parent::__construct($container);
+		$this->SessionCookieName = $sessionCookieName;
+		$this->ApiKeyHeaderName = $apiKeyHeaderName;
+	}
+
+	protected $SessionCookieName;
+	protected $ApiKeyHeaderName;
+
+	public function __invoke(\Slim\Http\Request $request, \Slim\Http\Response $response, callable $next)
+	{
+		$route = $request->getAttribute('route');
+		$routeName = $route->getName();
+
+		if ($this->ApplicationService->IsDemoInstallation())
+		{
+			$response = $next($request, $response);
+		}
+		else
+		{
+			$validSession = true;
+			$validApiKey = true;
+			
+			$sessionService = new SessionService();
+			if (!isset($_COOKIE[$this->SessionCookieName]) || !$sessionService->IsValidSession($_COOKIE[$this->SessionCookieName]))
+			{
+				$validSession = false;
+			}
+
+			$apiKeyService = new ApiKeyService();
+			if (!$request->hasHeader($this->ApiKeyHeaderName) || !$apiKeyService->IsValidApiKey($request->getHeaderLine($this->ApiKeyHeaderName)))
+			{
+				$validApiKey = false;
+			}
+
+			if (!$validSession && !$validApiKey)
+			{
+				$response = $response->withStatus(401);
+			}
+			else
+			{
+				$response = $next($request, $response);
+			}
+		}
+
+		return $response;
+	}
+}

middleware/BaseMiddleware.php

@@ -2,11 +2,16 @@
 
 namespace Grocy\Middleware;
 
+use \Grocy\Services\ApplicationService;
+
 class BaseMiddleware
 {
-	public function __construct(\Slim\Container $container) {
+	public function __construct(\Slim\Container $container)
+	{
 		$this->AppContainer = $container;
+		$this->ApplicationService = new ApplicationService();
 	}
 
 	protected $AppContainer;
+	protected $ApplicationService;
 }

middleware/CliMiddleware.php

@@ -13,7 +13,7 @@ class CliMiddleware extends BaseMiddleware
 		}
 		else
 		{
-			$response = $next($request, $response, $next);
+			$response = $next($request, $response);
 			return $response->withHeader('Content-Type', 'text/plain');
 		}
 	}

middleware/JsonMiddleware.php

@@ -6,7 +6,7 @@ class JsonMiddleware extends BaseMiddleware
 {
 	public function __invoke(\Slim\Http\Request $request, \Slim\Http\Response $response, callable $next)
 	{
-		$response = $next($request, $response, $next);
+		$response = $next($request, $response);
 		return $response->withHeader('Content-Type', 'application/json');
 	}
 }

middleware/SessionAuthMiddleware.php

@@ -6,24 +6,35 @@ use \Grocy\Services\SessionService;
 
 class SessionAuthMiddleware extends BaseMiddleware
 {
+	public function __construct(\Slim\Container $container, string $sessionCookieName)
+	{
+		parent::__construct($container);
+		$this->SessionCookieName = $sessionCookieName;
+	}
+
+	protected $SessionCookieName;
+
 	public function __invoke(\Slim\Http\Request $request, \Slim\Http\Response $response, callable $next)
 	{
 		$route = $request->getAttribute('route');
 		$routeName = $route->getName();
 
-		if ($routeName === 'root')
+		if ($routeName === 'root' || $this->ApplicationService->IsDemoInstallation())
 		{
+			define('AUTHENTICATED', $this->ApplicationService->IsDemoInstallation());
 			$response = $next($request, $response);
 		}
 		else
 		{
 			$sessionService = new SessionService();
-			if ((!isset($_COOKIE['grocy_session']) || !$sessionService->IsValidSession($_COOKIE['grocy_session'])) && $routeName !== 'login')
+			if ((!isset($_COOKIE[$this->SessionCookieName]) || !$sessionService->IsValidSession($_COOKIE[$this->SessionCookieName])) && $routeName !== 'login')
 			{
+				define('AUTHENTICATED', false);
 				$response = $response->withRedirect($this->AppContainer->UrlManager->ConstructUrl('/login'));
 			}
 			else
 			{
+				define('AUTHENTICATED', $routeName !== 'login');
 				$response = $next($request, $response);
 			}
 		}

migrations/0022.sql

@@ -0,0 +1,7 @@
+CREATE TABLE api_keys (
+	id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT UNIQUE,
+	api_key TEXT NOT NULL UNIQUE,
+	expires DATETIME,
+	last_used DATETIME,
+	row_created_timestamp DATETIME DEFAULT (datetime('now', 'localtime'))
+)

migrations/0023.sql

@@ -0,0 +1 @@
+DELETE FROM sessions

migrations/0024.sql

@@ -0,0 +1,2 @@
+ALTER TABLE sessions
+ADD COLUMN last_used DATETIME

package.json

@@ -0,0 +1,26 @@
+{
+	"name": "grocy",
+	"private": true,
+	"dependencies": {
+		"@danielfarrell/bootstrap-combobox": "https://github.com/pallidus-fintech/bootstrap-combobox.git#enhance/boostrap_4",
+		"@fortawesome/fontawesome-free": "^5.1.0",
+		"TagManager": "https://github.com/max-favilli/tagmanager.git#3.0.2",
+		"bootbox": "https://github.com/makeusabrew/bootbox.git#v5.x",
+		"bootstrap": "^4.1.1",
+		"bootstrap-side-navbar": "https://github.com/samrayner/bootstrap-side-navbar.git#1.0.1",
+		"datatables.net": "^1.10.19",
+		"datatables.net-bs4": "^1.10.19",
+		"datatables.net-responsive": "^2.2.3",
+		"datatables.net-responsive-bs4": "^2.2.3",
+		"jquery": "^3.3.1",
+		"jquery-serializejson": "^2.8.1",
+		"jquery-ui-dist": "^1.12.1",
+		"moment": "^2.22.2",
+		"startbootstrap-sb-admin": "^4.0.0",
+		"swagger-ui-dist": "^3.17.3",
+		"tagmanager": "https://github.com/max-favilli/tagmanager.git#3.0.2",
+		"tempusdominus-bootstrap-4": "^5.0.1",
+		"timeago": "^1.6.3",
+		"toastr": "^2.1.4"
+	}
+}

public/css/grocy.css

@@ -1,94 +1,26 @@
-body {
-	padding-top: 50px;
+/* Main style customizations */
+body {
 	font-family: 'Noto Sans', sans-serif;
 }
 
-.navbar-fixed-top {
-	border: 0;
+.content-text {
+	font-size: 0.85rem;
 }
 
-.sidebar {
-	display: none;
+.responsive-button {
+    white-space: normal;
 }
 
-@media (min-width: 768px) {
-	.sidebar {
-		position: fixed;
-		top: 51px;
-		bottom: 0;
-		left: 0;
-		z-index: 1000;
-		display: block;
-		padding: 20px;
-		overflow-x: hidden;
-		overflow-y: auto;
-		background-color: #e5e5e5;
-		border-right: 2px solid #d6d6d6;
-		min-width: 220px;
-		max-width: 260px;
-	}
-
-	#navbar-mobile {
-		display: none !important;
-	}
+.no-real-button {
+	pointer-events: none;
 }
 
-.nav-sidebar {
-	margin-right: -21px;
-	margin-bottom: 20px;
-	margin-left: -20px;
+.timeago-contextual {
+	font-style: italic;
+	font-size: 0.8em;
 }
 
-.nav-sidebar > li > a {
-	padding-right: 20px;
-	padding-left: 20px;
-	transition: all 0.3s;
-}
-
-.nav-sidebar > li > a:hover {
-	box-shadow: inset 5px 0 0 #337ab7;
-	transition: all 0.3s;
-}
-
-.nav-sidebar > li > a:focus {
-	box-shadow: inset 5px 0 0 #ab2230;
-	transition: all 0.3s;
-}
-
-.nav-sidebar > .active > a,
-.nav-sidebar > .active > a:hover,
-.nav-sidebar > .active > a:focus {
-	background-color: #d6d6d6;
-	box-shadow: inset 5px 0 0 #ab2230;
-	transition: all 0.3s;
-}
-
-.navbar-default {
-	background-color: #e5e5e5;
-}
-
-.main {
-	padding: 20px;
-}
-
-@media (min-width: 768px) {
-	.main {
-		padding-right: 40px;
-		padding-left: 40px;
-	}
-}
-
-.main .page-header {
-	margin-top: 0;
-}
-
-.nav-copyright {
-	color: #a7a7a7;
-	font-size: 11px;
-	text-align: center;
-}
-
-.discrete-link {
+a.discrete-link {
 	color: inherit !important;
 	transition: all 0.3s !important;
 }
@@ -96,28 +28,91 @@
 a.discrete-link:hover {
 	color: #337ab7 !important;
 	text-decoration: none !important;
-	transition: all 0.3s !important;
 }
 
 a.discrete-link:focus {
 	color: #ab2230 !important;
 	text-decoration: none !important;
+}
+
+.card {
+	border: 2px solid;
+	border-color: #d6d6d6;
+	border-radius: 0;
+}
+
+.card-header {
+	background-color: #e5e5e5;
+}
+
+.content-text .invalid-feedback {
+	font-size: 95%;
+}
+
+/* Navigation style customizations */
+#mainNav {
+	background-color: #e5e5e5 !important;
+	border-bottom: 2px solid !important;
+	border-color: #d6d6d6 !important;
+}
+
+.navbar-sidenav {
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+.navbar-sidenav,
+.sidenav-second-level {
+	background-color: #e5e5e5 !important;
+	border-top: 2px solid !important;
+	border-right: 2px solid !important;
+	border-color: #d6d6d6 !important;
+}
+
+.navbar-nav .dropdown-menu {
+	background-color: #e5e5e5 !important;
+	border: 0;
+	border-radius: 0;
+}
+
+.navbar-nav .dropdown-divider {
+	border-top: 2px solid !important;
+	border-color: #d6d6d6 !important;
+}
+
+.sidenav-toggler {
+	background-color: #d6d6d6 !important;
+	border-right: 2px solid !important;
+	border-color: #d6d6d6 !important;
+}
+
+.navbar-sidenav > li,
+.sidenav-second-level > li {
 	transition: all 0.3s !important;
 }
 
-.navbar-fixed-top {
-	border-bottom: 2px solid;
-	border-color: #d6d6d6;
+.navbar-sidenav > li:hover,
+.sidenav-second-level > li:hover,
+.navbar-nav .dropdown-item:hover {
+	box-shadow: inset 5px 0 0 #337ab7 !important;
+	background-color: #d6d6d6 !important;
 }
 
-.navbar-brand {
-	font-weight: bold;
-	letter-spacing: -5px;
-	font-size: 2.2em;
-	color: #0b024c !important;
-	margin-left: 0 !important;
-	padding-left: 5px !important;
-	
+.navbar-sidenav > li > a:focus,
+.sidenav-second-level > li > a:focus,
+.navbar-nav .dropdown-item:focus {
+	box-shadow: inset 5px 0 0 #ab2230 !important;
+	background-color: #d6d6d6 !important;
+}
+
+.active-page {
+	box-shadow: inset 5px 0 0 #ab2230 !important;
+	background-color: #d6d6d6 !important;
+}
+
+/* Third party component customizations - DataTables */
+td {
+     vertical-align: middle !important;
 }
 
 .table td.fit-content,
@@ -126,46 +121,38 @@ a.discrete-link:focus {
 	width: 1%;
 }
 
-.dataTables_info,
-.dataTables_length,
-.dataTables_filter {
-	font-style: italic;
+.dataTables_filter,
+.dataTables_info {
+	display: none;
 }
 
-.timeago-contextual {
-	font-style: italic;
-	font-size: 0.8em;
+/* Third party component customizations - toastr */
+#toast-container > div {
+	opacity: 1;
+	filter: alpha(opacity=100);
 }
 
-.disabled,
-.no-real-button {
-	pointer-events: none;
-	margin-top: 2px;
-	margin-bottom: 2px;
+.toast-success {
+	background-color: #28a745;
 }
 
-.warning-bg {
-	background-color: #fcf8e3 !important;
+.toast-error {
+	background-color: #dc3545;
 }
 
-.error-bg {
-	background-color: #f2dede !important;
+#toast-container > div {
+	box-shadow: none;
 }
 
-.info-bg {
-	background-color: #afd9ee !important;
+/* Third party component customizations - SB Admin 2 */
+#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link:after,
+#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
 }
 
-.discrete-content-separator {
-	padding-top: 5px;
-	padding-bottom: 5px;
-}
-
-.discrete-content-separator-2x {
-	padding-top: 10px;
-	padding-bottom: 10px;
-}
-
-.well {
-	background-color: #e5e5e5;
+@media (max-width:992px) {
+	#mainNav .navbar-collapse .navbar-sidenav > .nav-item > .nav-link {
+		padding: 0.8em;
+	}
 }

public/img/grocy_icon.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="60.000000pt" height="93.000000pt" viewBox="0 0 60.000000 93.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,93.000000) scale(0.100000,-0.100000)"
+fill="#0b024c" stroke="none">
+<path d="M165 905 c-52 -18 -109 -82 -132 -148 -14 -39 -18 -82 -18 -172 0
+-104 3 -127 23 -170 43 -94 114 -144 205 -145 59 0 112 21 156 63 l33 32 -7
+-75 c-10 -96 -17 -116 -57 -140 -43 -26 -130 -26 -233 0 -43 11 -80 20 -82 20
+-2 0 -3 -30 -1 -67 l3 -68 50 -13 c28 -8 100 -14 160 -15 172 -1 255 38 304
+142 l26 56 3 353 4 352 -75 0 -75 0 -7 -40 -7 -40 -36 31 c-67 59 -150 75
+-237 44z m206 -141 c45 -23 62 -72 62 -180 1 -112 -18 -152 -79 -172 -125 -42
+-201 80 -163 260 21 96 97 135 180 92z"/>
+</g>
+</svg>

public/img/grocy_logo.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="242.000000pt" height="93.000000pt" viewBox="0 0 242.000000 93.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,93.000000) scale(0.100000,-0.100000)"
+fill="#0b024c" stroke="none">
+<path d="M165 905 c-52 -18 -109 -82 -132 -148 -14 -39 -18 -82 -18 -172 0
+-104 3 -127 23 -170 43 -94 114 -144 205 -145 59 0 112 21 156 63 l33 32 -7
+-75 c-10 -96 -17 -116 -57 -140 -43 -26 -130 -26 -233 0 -43 11 -80 20 -82 20
+-2 0 -3 -30 -1 -67 l3 -68 50 -13 c28 -8 100 -14 160 -15 121 -1 183 14 244
+60 36 28 81 112 81 155 0 54 6 58 90 58 l78 0 4 193 c3 180 4 194 25 223 20
+28 99 72 110 61 2 -3 -1 -24 -6 -48 -6 -24 -11 -79 -11 -121 0 -137 53 -233
+158 -285 50 -24 69 -28 147 -28 107 0 158 20 219 83 l40 41 23 -34 c13 -20 46
+-45 80 -62 51 -25 69 -28 153 -28 68 0 108 5 143 18 l47 19 0 74 0 74 -42 -21
+c-58 -30 -154 -37 -197 -15 -85 44 -98 250 -21 328 24 24 36 28 84 28 99 0 92
+9 200 -260 l97 -242 -23 -46 c-32 -65 -67 -87 -134 -87 l-54 0 0 -66 0 -67 45
+-6 c108 -17 215 34 269 128 20 33 296 754 296 771 0 3 -40 5 -89 5 l-90 0 -64
+-197 c-35 -109 -69 -214 -75 -233 -10 -34 -10 -34 -11 -7 -1 16 -31 120 -68
+232 l-66 202 -143 8 c-116 5 -154 4 -197 -9 -61 -18 -126 -61 -145 -98 l-14
+-25 -52 53 c-40 39 -67 56 -106 68 -87 26 -181 19 -272 -19 -14 -5 -18 -2 -18
+14 0 19 -6 21 -52 21 -64 0 -129 -30 -164 -76 -15 -19 -30 -34 -34 -34 -4 0
+-13 23 -20 50 l-12 50 -133 0 -133 0 -7 -40 -7 -40 -36 31 c-67 59 -150 75
+-237 44z m206 -141 c45 -23 62 -72 62 -180 1 -112 -18 -152 -79 -172 -125 -42
+-201 80 -163 260 21 96 97 135 180 92z m888 -10 c40 -33 54 -89 49 -184 -7
+-118 -41 -160 -131 -160 -87 0 -121 53 -121 185 0 135 34 185 125 185 36 0 55
+-6 78 -26z"/>
+</g>
+</svg>

public/js/grocy.js

@@ -21,12 +21,27 @@ U = function(relativePath)
 
 if (!Grocy.ActiveNav.isEmpty())
 {
-	var menuItem = $('.nav').find("[data-nav-for-page='" + Grocy.ActiveNav + "']");
-	menuItem.addClass('active');
+	var menuItem = $('#sidebarResponsive').find("[data-nav-for-page='" + Grocy.ActiveNav + "']");
+	menuItem.addClass('active-page');
 }	
 
 $.timeago.settings.allowFuture = true;
-$('time.timeago').timeago();
+RefreshContextualTimeago = function()
+{	
+	$('time.timeago').timeago();
+}
+RefreshContextualTimeago();
+
+toastr.options = {
+	toastClass: 'alert',
+	closeButton: true,
+	timeOut: 20000,
+	extendedTimeOut: 5000
+};
+
+window.FontAwesomeConfig = {
+	searchPseudoElements: true
+}
 
 Grocy.Api = { };
 Grocy.Api.Get = function(apiFunction, success, error)
@@ -89,3 +104,19 @@ Grocy.Api.Post = function(apiFunction, jsonData, success, error)
 	xhr.setRequestHeader('Content-type', 'application/json');
 	xhr.send(JSON.stringify(jsonData));
 };
+
+Grocy.FrontendHelpers = { };
+Grocy.FrontendHelpers.ValidateForm = function(formId)
+{
+	var form = document.getElementById(formId);
+	if (form.checkValidity() === true)
+	{
+		$(form).find(':submit').removeClass('disabled');
+	}
+	else
+	{
+		$(form).find(':submit').addClass('disabled');
+	}
+
+	$(form).addClass('was-validated');
+}

public/viewjs/batteries.js

@@ -1,7 +1,31 @@
-$(document).on('click', '.battery-delete-button', function(e)
+var batteriesTable = $('#batteries-table').DataTable({
+	'paginate': false,
+	'order': [[1, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
+});
+
+$("#search").on("keyup", function()
 {
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	batteriesTable.search(value).draw();
+});
+
+$(document).on('click', '.battery-delete-button', function (e)
+{
+	var objectName = $(e.currentTarget).attr('data-battery-name');
+	var objectId = $(e.currentTarget).attr('data-battery-id');
+
 	bootbox.confirm({
-		message: L('Are you sure to delete battery "#1"?', $(e.currentTarget).attr('data-battery-name')),
+		message: L('Are you sure to delete battery "#1"?', objectName),
 		buttons: {
 			confirm: {
 				label: L('Yes'),
@@ -16,7 +40,7 @@
 		{
 			if (result === true)
 			{
-				Grocy.Api.Get('delete-object/batteries/' + $(e.currentTarget).attr('data-battery-id'),
+				Grocy.Api.Get('delete-object/batteries/' + objectId,
 					function(result)
 					{
 						window.location.href = U('/batteries');
@@ -30,12 +54,3 @@
 		}
 	});
 });
-
-$('#batteries-table').DataTable({
-	'pageLength': 50,
-	'order': [[1, 'asc']],
-	'columnDefs': [
-		{ 'orderable': false, 'targets': 0 }
-	],
-	'language': JSON.parse(L('datatables_localization'))
-});

public/viewjs/batteriesoverview.js

@@ -1,5 +1,45 @@
-$('#batteries-overview-table').DataTable({
-	'pageLength': 50,
-	'order': [[1, 'desc']],
-	'language': JSON.parse(L('datatables_localization'))
+var batteriesOverviewTable = $('#batteries-overview-table').DataTable({
+	'paginate': false,
+	'order': [[2, 'desc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
+});
+
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	batteriesOverviewTable.search(value).draw();
+});
+
+$(document).on('click', '.track-charge-cycle-button', function(e)
+{
+	var batteryId = $(e.currentTarget).attr('data-battery-id');
+	var batteryName = $(e.currentTarget).attr('data-battery-name');
+	var trackedTime = moment().format('YYYY-MM-DD HH:mm:ss');
+
+	Grocy.Api.Get('batteries/track-charge-cycle/' + batteryId + '?tracked_time=' + trackedTime,
+		function(result)
+		{
+			$('#battery-' + batteryId + '-last-tracked-time').parent().effect('highlight', {}, 500);
+			$('#battery-' + batteryId + '-last-tracked-time').fadeOut(500, function () {
+				$(this).text(trackedTime).fadeIn(500);
+			});
+			$('#battery-' + batteryId + '-last-tracked-time-timeago').attr('datetime', trackedTime);
+			RefreshContextualTimeago();
+
+			toastr.success(L('Tracked charge cylce of battery #1 on #2', batteryName, trackedTime));
+		},
+		function(xhr)
+		{
+			console.error(xhr);
+		}
+	);
 });

public/viewjs/batteryform.js

@@ -30,6 +30,26 @@
 	}
 });
 
+$('#battery-form input').keyup(function(event)
+{
+	Grocy.FrontendHelpers.ValidateForm('battery-form');
+});
+
+$('#battery-form input').keydown(function(event)
+{
+	if (event.keyCode === 13) //Enter
+	{
+		if (document.getElementById('battery-form').checkValidity() === false) //There is at least one validation error
+		{
+			event.preventDefault();
+			return false;
+		}
+		else
+		{
+			$('#save-battery-button').click();
+		}
+	}
+});
+
 $('#name').focus();
-$('#battery-form').validator();
-$('#battery-form').validator('validate');
+Grocy.FrontendHelpers.ValidateForm('battery-form');

public/viewjs/batterytracking.js

@@ -7,18 +7,18 @@
 	Grocy.Api.Get('batteries/get-battery-details/' + jsonForm.battery_id,
 		function (batteryDetails)
 		{
-			Grocy.Api.Get('batteries/track-charge-cycle/' + jsonForm.battery_id + '?tracked_time=' + $('#tracked_time').val(),
+			Grocy.Api.Get('batteries/track-charge-cycle/' + jsonForm.battery_id + '?tracked_time=' + $('#tracked_time').find('input').val(),
 				function(result)
 				{
-					toastr.success('Tracked charge cylce of battery ' + batteryDetails.battery.name + ' on ' + $('#tracked_time').val());
+					toastr.success(L('Tracked charge cylce of battery #1 on #2', batteryDetails.battery.name, $('#tracked_time').find('input').val()));
 
 					$('#battery_id').val('');
 					$('#battery_id_text_input').focus();
 					$('#battery_id_text_input').val('');
-					$('#tracked_time').val(moment().format('YYYY-MM-DD HH:mm:ss'));
-					$('#tracked_time').trigger('change');
+					$('#tracked_time').find('input').val(moment().format('YYYY-MM-DD HH:mm:ss'));
+					$('#tracked_time').find('input').trigger('change');
 					$('#battery_id_text_input').trigger('change');
-					$('#batterytracking-form').validator('validate');
+					Grocy.FrontendHelpers.ValidateForm('batterytracking-form');
 				},
 				function(xhr)
 				{
@@ -40,26 +40,7 @@ $('#battery_id').on('change', function(e)
 	if (batteryId)
 	{
 		Grocy.Components.BatteryCard.Refresh(batteryId);
-		$('#tracked_time').focus();
-	}
-});
-
-$('.datetimepicker').datetimepicker(
-{
-	format: 'YYYY-MM-DD HH:mm:ss',
-	showTodayButton: true,
-	calendarWeeks: true,
-	maxDate: moment()
-});
-
-$('#tracked_time').val(moment().format('YYYY-MM-DD HH:mm:ss'));
-$('#tracked_time').trigger('change');
-
-$('#tracked_time').on('focus', function(e)
-{
-	if ($('#battery_id_text_input').val().length === 0)
-	{
-		$('#battery_id_text_input').focus();
+		$('#tracked_time').find('input').focus();
 	}
 });
 
@@ -71,79 +52,31 @@ $('#battery_id').val('');
 $('#battery_id_text_input').focus();
 $('#battery_id_text_input').val('');
 $('#battery_id_text_input').trigger('change');
+Grocy.FrontendHelpers.ValidateForm('batterytracking-form');
 
-$('#batterytracking-form').validator();
-$('#batterytracking-form').validator('validate');
+$('#batterytracking-form input').keyup(function (event)
+{
+	Grocy.FrontendHelpers.ValidateForm('batterytracking-form');
+});
 
 $('#batterytracking-form input').keydown(function(event)
 {
 	if (event.keyCode === 13) //Enter
 	{
-		if ($('#batterytracking-form').validator('validate').has('.has-error').length !== 0) //There is at least one validation error
+		if (document.getElementById('batterytracking-form').checkValidity() === false) //There is at least one validation error
 		{
 			event.preventDefault();
 			return false;
 		}
+		else
+		{
+			$('#save-batterytracking-button').click();
+		}
 	}
 });
 
-$('#tracked_time').on('change', function(e)
+$('#tracked_time').find('input').on('keypress', function (e)
 {
-	var value = $('#tracked_time').val();
-	var now = new Date();
-	var centuryStart = Number.parseInt(now.getFullYear().toString().substring(0, 2) + '00');
-	var centuryEnd = Number.parseInt(now.getFullYear().toString().substring(0, 2) + '99');
-
-	if (value === 'x' || value === 'X') {
-		value = '29991231';
-	}
-
-	if (value.length === 4 && !(Number.parseInt(value) > centuryStart && Number.parseInt(value) < centuryEnd))
-	{
-		value = (new Date()).getFullYear().toString() + value;
-	}
-
-	if (value.length === 8 && $.isNumeric(value))
-	{
-		value = value.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3');
-		$('#tracked_time').val(value);
-		$('#batterytracking-form').validator('validate');
-	}
+	Grocy.FrontendHelpers.ValidateForm('batterytracking-form');
 });
 
-$('#tracked_time').on('keypress', function(e)
-{
-	var element = $(e.target);
-	var value = element.val();
-	var dateObj = moment(element.val(), 'YYYY-MM-DD', true);
-
-	$('.datepicker').datepicker('hide');
-
-	//If input is empty and any arrow key is pressed, set date to today
-	if (value.length === 0 && (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 37 || e.keyCode === 39))
-	{
-		dateObj = moment(new Date(), 'YYYY-MM-DD', true);
-	}
-
-	if (dateObj.isValid())
-	{
-		if (e.keyCode === 38) //Up
-		{
-			element.val(dateObj.add(-1, 'days').format('YYYY-MM-DD'));
-		}
-		else if (e.keyCode === 40) //Down
-		{
-			element.val(dateObj.add(1, 'days').format('YYYY-MM-DD'));
-		}
-		else if (e.keyCode === 37) //Left
-		{
-			element.val(dateObj.add(-1, 'weeks').format('YYYY-MM-DD'));
-		}
-		else if (e.keyCode === 39) //Right
-		{
-			element.val(dateObj.add(1, 'weeks').format('YYYY-MM-DD'));
-		}
-	}
-
-	$('#batterytracking-form').validator('validate');
-});

public/viewjs/components/datepicker.js

@@ -1,92 +0,0 @@
-$(function()
-{
-	$('.datepicker').datepicker(
-	{
-		format: 'yyyy-mm-dd',
-		startDate: '+0d',
-		todayHighlight: true,
-		autoclose: true,
-		calendarWeeks: true,
-		orientation: 'bottom auto',
-		weekStart: 1,
-		showOnFocus: false,
-		language: L('bootstrap_datepicker_locale')
-	});
-	$('.datepicker').trigger('change');
-
-	EmptyElementWhenMatches('#datepicker-timeago', L('timeago_nan'));
-});
-
-$('.datepicker').on('keydown', function(e)
-{
-	if (e.keyCode === 13) //Enter
-	{
-		$('.datepicker').trigger('change');
-	}
-});
-
-$('.datepicker').on('keypress', function(e)
-{
-	var element = $(e.target);
-	var value = element.val();
-	var dateObj = moment(element.val(), 'YYYY-MM-DD', true);
-
-	$('.datepicker').datepicker('hide');
-
-	//If input is empty and any arrow key is pressed, set date to today
-	if (value.length === 0 && (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 37 || e.keyCode === 39))
-	{
-		dateObj = moment(new Date(), 'YYYY-MM-DD', true);
-	}
-
-	if (dateObj.isValid())
-	{
-		if (e.keyCode === 38) //Up
-		{
-			element.val(dateObj.add(-1, 'days').format('YYYY-MM-DD'));
-		}
-		else if (e.keyCode === 40) //Down
-		{
-			element.val(dateObj.add(1, 'days').format('YYYY-MM-DD'));
-		}
-		else if (e.keyCode === 37) //Left
-		{
-			element.val(dateObj.add(-1, 'weeks').format('YYYY-MM-DD'));
-		}
-		else if (e.keyCode === 39) //Right
-		{
-			element.val(dateObj.add(1, 'weeks').format('YYYY-MM-DD'));
-		}
-	}
-});
-
-$('.datepicker').on('change', function(e)
-{
-	var value = $('.datepicker').val();
-	var now = new Date();
-	var centuryStart = Number.parseInt(now.getFullYear().toString().substring(0, 2) + '00');
-	var centuryEnd = Number.parseInt(now.getFullYear().toString().substring(0, 2) + '99');
-
-	if (value === 'x' || value === 'X') {
-		value = '29991231';
-	}
-
-	if (value.length === 4 && !(Number.parseInt(value) > centuryStart && Number.parseInt(value) < centuryEnd))
-	{
-		value = (new Date()).getFullYear().toString() + value;
-	}
-
-	if (value.length === 8 && $.isNumeric(value))
-	{
-		value = value.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3');
-		$('.datepicker').val(value);
-	}
-
-	$('#datepicker-timeago').text($.timeago($('.datepicker').val()));
-	EmptyElementWhenMatches('#datepicker-timeago', L('timeago_nan'));
-});
-
-$('#datepicker-button').on('click', function(e)
-{
-	$('.datepicker').datepicker('show');
-});

public/viewjs/components/datetimepicker.js

@@ -1,11 +1,162 @@
-$(function()
+Grocy.Components.DateTimePicker = { };
+
+Grocy.Components.DateTimePicker.GetInputElement = function()
 {
-	$('.datetimepicker').datetimepicker(
-	{
-		format: 'YYYY-MM-DD HH:mm:ss',
-		showTodayButton: true,
-		calendarWeeks: true,
-		maxDate: moment(),
-		locale: moment.locale('de')
-	});
+	return $('.datetimepicker').find('input');
+}
+
+Grocy.Components.DateTimePicker.GetValue = function()
+{
+	return Grocy.Components.DateTimePicker.GetInputElement().val();
+}
+
+Grocy.Components.DateTimePicker.SetValue = function(value)
+{
+	Grocy.Components.DateTimePicker.GetInputElement().val(value);
+	Grocy.Components.DateTimePicker.GetInputElement().trigger('change');
+}
+
+var startDate = null;
+if (Grocy.Components.DateTimePicker.GetInputElement().data('init-with-now') === true)
+{
+	startDate = moment().format(Grocy.Components.DateTimePicker.GetInputElement().data('format'));
+}
+
+var limitDate = moment('2999-12-31 23:59:59');
+if (Grocy.Components.DateTimePicker.GetInputElement().data('limit-end-to-now') === true)
+{
+	limitDate = moment();
+}
+
+$('.datetimepicker').datetimepicker(
+{
+	format: Grocy.Components.DateTimePicker.GetInputElement().data('format'),
+	buttons: {
+		showToday: true,
+		showClose: true
+	},
+	calendarWeeks: true,
+	maxDate: limitDate,
+	locale: moment.locale(),
+	defaultDate: startDate,
+	useCurrent: false,
+	icons: {
+		time: 'far fa-clock',
+		date: 'far fa-calendar',
+		up: 'fas fa-arrow-up',
+		down: 'fas fa-arrow-down',
+		previous: 'fas fa-chevron-left',
+		next: 'fas fa-chevron-right',
+		today: 'fas fa-calendar-check',
+		clear: 'far fa-trash-alt',
+		close: 'far fa-times-circle'
+	},
+	sideBySide: true,
+	keyBinds: {
+		up: function(widget) { },
+		down: function(widget) { },
+		'control up': function(widget) { },
+		'control down': function(widget) { },
+		left: function(widget) { },
+		right: function(widget) { },
+		pageUp: function(widget) { },
+		pageDown: function(widget) { },
+		enter: function(widget) { },
+		escape: function(widget) { },
+		'control space': function(widget) { },
+		t: function(widget) { },
+		'delete': function(widget) { }
+	}
+});
+
+Grocy.Components.DateTimePicker.GetInputElement().on('keyup', function(e)
+{
+	$('.datetimepicker').datetimepicker('hide');
+
+	var value = Grocy.Components.DateTimePicker.GetValue();
+	var now = new Date();
+	var centuryStart = Number.parseInt(now.getFullYear().toString().substring(0, 2) + '00');
+	var centuryEnd = Number.parseInt(now.getFullYear().toString().substring(0, 2) + '99');
+	var format = Grocy.Components.DateTimePicker.GetInputElement().data('format');
+	var nextInputElement = $(Grocy.Components.DateTimePicker.GetInputElement().data('next-input-selector'));
+
+	//If input is empty and any arrow key is pressed, set date to today
+	if (value.length === 0 && (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 37 || e.keyCode === 39))
+	{
+		Grocy.Components.DateTimePicker.SetValue(moment(new Date(), format, true).format(format));
+		nextInputElement.focus();
+	}
+	else if (value === 'x' || value === 'X')
+	{
+		Grocy.Components.DateTimePicker.SetValue(moment('2999-12-31 23:59:59').format(format));
+		nextInputElement.focus();
+	}
+	else if (value.length === 4 && !(Number.parseInt(value) > centuryStart && Number.parseInt(value) < centuryEnd))
+	{
+		Grocy.Components.DateTimePicker.SetValue((new Date()).getFullYear().toString() + value);
+		nextInputElement.focus();
+	}
+	else if (value.length === 8 && $.isNumeric(value))
+	{
+		Grocy.Components.DateTimePicker.SetValue(value.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3'));
+		nextInputElement.focus();
+	}
+	else
+	{
+		var dateObj = moment(value, format, true);
+		if (dateObj.isValid())
+		{
+			if (e.keyCode === 38) //Up
+			{
+				Grocy.Components.DateTimePicker.SetValue(dateObj.add(-1, 'days').format(format));
+			}
+			else if (e.keyCode === 40) //Down
+			{
+				Grocy.Components.DateTimePicker.SetValue(dateObj.add(1, 'days').format(format));
+			}
+			else if (e.keyCode === 37) //Left
+			{
+				Grocy.Components.DateTimePicker.SetValue(dateObj.add(-1, 'weeks').format(format));
+			}
+			else if (e.keyCode === 39) //Right
+			{
+				Grocy.Components.DateTimePicker.SetValue(dateObj.add(1, 'weeks').format(format));
+			}
+		}
+	}
+
+	//Custom validation
+	value = Grocy.Components.DateTimePicker.GetValue();
+	dateObj = moment(value, format, true);
+	var element = Grocy.Components.DateTimePicker.GetInputElement()[0];
+	if (!dateObj.isValid())
+	{
+		element.setCustomValidity("error");
+	}
+	else
+	{
+		if (Grocy.Components.DateTimePicker.GetInputElement().data('limit-end-to-now') === true && dateObj.isAfter(moment()))
+		{
+			element.setCustomValidity("error");
+		}
+		else if (Grocy.Components.DateTimePicker.GetInputElement().data('limit-start-to-now') === true && dateObj.isBefore(moment()))
+		{
+			element.setCustomValidity("error");
+		}
+		else
+		{
+			element.setCustomValidity("");
+		}
+	}
+});
+
+Grocy.Components.DateTimePicker.GetInputElement().on('input', function(e)
+{
+	$('#datetimepicker-timeago').text($.timeago(Grocy.Components.DateTimePicker.GetValue()));
+	EmptyElementWhenMatches('#datetimepicker-timeago', L('timeago_nan'));
+});
+
+$('.datetimepicker').on('update.datetimepicker', function(e)
+{
+	Grocy.Components.DateTimePicker.GetInputElement().trigger('input');
 });

public/viewjs/components/habitcard.js

@@ -1,6 +1,6 @@
 Grocy.Components.HabitCard = { };
 
-Grocy.Components.HabitCard.Refresh = function (habitId)
+Grocy.Components.HabitCard.Refresh = function(habitId)
 {
 	Grocy.Api.Get('habits/get-habit-details/' + habitId,
 		function(habitDetails)

public/viewjs/consume.js

@@ -16,14 +16,14 @@
 			Grocy.Api.Get('stock/consume-product/' + jsonForm.product_id + '/' + jsonForm.amount + '?spoiled=' + spoiled,
 				function(result)
 				{
-					toastr.success('Removed ' + jsonForm.amount + ' ' + productDetails.quantity_unit_stock.name + ' of ' + productDetails.product.name + ' from stock');
+					toastr.success(L('Removed #1 #2 of #3 from stock', jsonForm.amount, productDetails.quantity_unit_stock.name, productDetails.product.name));
 
 					$('#amount').val(1);
 					$('#product_id').val('');
 					$('#product_id_text_input').focus();
 					$('#product_id_text_input').val('');
 					$('#product_id_text_input').trigger('change');
-					$('#consume-form').validator('validate');
+					Grocy.FrontendHelpers.ValidateForm('consume-form');
 				},
 				function(xhr)
 				{
@@ -50,26 +50,19 @@ $('#product_id').on('change', function(e)
 			function (productDetails)
 			{
 				$('#amount').attr('max', productDetails.stock_amount);
-				$('#consume-form').validator('update');
 				$('#amount_qu_unit').text(productDetails.quantity_unit_stock.name);
 
 				if ((productDetails.stock_amount || 0) === 0)
 				{
 					$('#product_id').val('');
 					$('#product_id_text_input').val('');
-					$('#product_id_text_input').addClass('has-error');
-					$('#product_id_text_input').parent('.input-group').addClass('has-error');
-					$('#product_id_text_input').closest('.form-group').addClass('has-error');
-					$('#product-error').text('This product is not in stock.');
-					$('#product-error').show();
+					Grocy.FrontendHelpers.ValidateForm('consume-form');
+					$('#product-error').text(L('This product is not in stock'));
 					$('#product_id_text_input').focus();
 				}
 				else
 				{
-					$('#product_id_text_input').removeClass('has-error');
-					$('#product_id_text_input').parent('.input-group').removeClass('has-error');
-					$('#product_id_text_input').closest('.form-group').removeClass('has-error');
-					$('#product-error').hide();
+					Grocy.FrontendHelpers.ValidateForm('consume-form');
 					$('#amount').focus();
 				}
 			},
@@ -103,30 +96,30 @@ $('#product_id').val('');
 $('#product_id_text_input').focus();
 $('#product_id_text_input').val('');
 $('#product_id_text_input').trigger('change');
-
-$('#consume-form').validator();
-$('#consume-form').validator('validate');
+Grocy.FrontendHelpers.ValidateForm('consume-form');
 
 $('#amount').on('focus', function(e)
 {
-	if ($('#product_id_text_input').val().length === 0)
-	{
-		$('#product_id_text_input').focus();
-	}
-	else
-	{
-		$(this).select();
-	}
+	$(this).select();
+});
+
+$('#consume-form input').keyup(function (event)
+{
+	Grocy.FrontendHelpers.ValidateForm('consume-form');
 });
 
 $('#consume-form input').keydown(function(event)
 {
 	if (event.keyCode === 13) //Enter
 	{
-		if ($('#consume-form').validator('validate').has('.has-error').length !== 0) //There is at least one validation error
+		if (document.getElementById('consume-form').checkValidity() === false) //There is at least one validation error
 		{
 			event.preventDefault();
 			return false;
 		}
+		else
+		{
+			$('#save-consume-button').click();
+		}
 	}
 });

public/viewjs/habitform.js

@@ -30,9 +30,29 @@
 	}
 });
 
+$('#habit-form input').keyup(function(event)
+{
+	Grocy.FrontendHelpers.ValidateForm('habit-form');
+});
+
+$('#habit-form input').keydown(function(event)
+{
+	if (event.keyCode === 13) //Enter
+	{
+		if (document.getElementById('habit-form').checkValidity() === false) //There is at least one validation error
+		{
+			event.preventDefault();
+			return false;
+		}
+		else
+		{
+			$('#save-habit-button').click();
+		}
+	}
+});
+
 $('#name').focus();
-$('#habit-form').validator();
-$('#habit-form').validator('validate');
+Grocy.FrontendHelpers.ValidateForm('habit-form');
 
 $('.input-group-habit-period-type').on('change', function(e)
 {
@@ -41,11 +61,11 @@ $('.input-group-habit-period-type').on('change', function(e)
 
 	if (periodType === 'dynamic-regular')
 	{
-		$('#habit-period-type-info').text('This means it is estimated that a new "execution" of this habit is tracked ' + periodDays.toString() + ' days after the last was tracked.');
-		$('#habit-period-type-info').show();
+		$('#habit-period-type-info').text(L('This means it is estimated that a new execution of this habit is tracked #1 days after the last was tracked', periodDays.toString()));
+		$('#habit-period-type-info').removeClass('d-none');
 	}
 	else
 	{
-		$('#habit-period-type-info').hide();
+		$('#habit-period-type-info').addClass('d-none');
 	}
 });

public/viewjs/habits.js

@@ -1,7 +1,31 @@
-$(document).on('click', '.habit-delete-button', function(e)
+var habitsTable  = $('#habits-table').DataTable({
+	'paginate': false,
+	'order': [[1, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
+});
+
+$("#search").on("keyup", function()
 {
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	habitsTable.search(value).draw();
+});
+
+$(document).on('click', '.habit-delete-button', function (e)
+{
+	var objectName = $(e.currentTarget).attr('data-habit-name');
+	var objectId = $(e.currentTarget).attr('data-habit-id');
+
 	bootbox.confirm({
-		message: L('Are you sure to delete habit "#1"?', $(e.currentTarget).attr('data-habit-name')),
+		message: L('Are you sure to delete habit "#1"?', objectName),
 		buttons: {
 			confirm: {
 				label: L('Yes'),
@@ -16,7 +40,7 @@
 		{
 			if (result === true)
 			{
-				Grocy.Api.Get('delete-object/habits/' + $(e.currentTarget).attr('data-habit-id'),
+				Grocy.Api.Get('delete-object/habits/' + objectId,
 					function(result)
 					{
 						window.location.href = U('/habits');
@@ -30,12 +54,3 @@
 		}
 	});
 });
-
-$('#habits-table').DataTable({
-	'pageLength': 50,
-	'order': [[1, 'asc']],
-	'columnDefs': [
-		{ 'orderable': false, 'targets': 0 }
-	],
-	'language': JSON.parse(L('datatables_localization'))
-});

public/viewjs/habitsoverview.js

@@ -1,5 +1,45 @@
-$('#habits-overview-table').DataTable({
-	'pageLength': 50,
-	'order': [[1, 'desc']],
-	'language': JSON.parse(L('datatables_localization'))
+var habitsOverviewTable = $('#habits-overview-table').DataTable({
+	'paginate': false,
+	'order': [[2, 'desc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
+});
+
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	habitsOverviewTable.search(value).draw();
+});
+
+$(document).on('click', '.track-habit-button', function(e)
+{
+	var habitId = $(e.currentTarget).attr('data-habit-id');
+	var habitName = $(e.currentTarget).attr('data-habit-name');
+	var trackedTime = moment().format('YYYY-MM-DD HH:mm:ss');
+
+	Grocy.Api.Get('habits/track-habit-execution/' + habitId + '?tracked_time=' + trackedTime,
+		function(result)
+		{
+			$('#habit-' + habitId + '-last-tracked-time').parent().effect('highlight', {}, 500);
+			$('#habit-' + habitId + '-last-tracked-time').fadeOut(500, function () {
+				$(this).text(trackedTime).fadeIn(500);
+			});
+			$('#habit-' + habitId + '-last-tracked-time-timeago').attr('datetime', trackedTime);
+			RefreshContextualTimeago();
+
+			toastr.success(L('Tracked execution of habit #1 on #2', habitName, trackedTime));
+		},
+		function(xhr)
+		{
+			console.error(xhr);
+		}
+	);
 });

public/viewjs/habittracking.js

@@ -7,18 +7,17 @@
 	Grocy.Api.Get('habits/get-habit-details/' + jsonForm.habit_id,
 		function (habitDetails)
 		{
-			Grocy.Api.Get('habits/track-habit-execution/' + jsonForm.habit_id + '?tracked_time=' + $('#tracked_time').val(),
+			Grocy.Api.Get('habits/track-habit-execution/' + jsonForm.habit_id + '?tracked_time=' + Grocy.Components.DateTimePicker.GetValue(),
 				function(result)
 				{
-					toastr.success('Tracked execution of habit ' + habitDetails.habit.name + ' on ' + $('#tracked_time').val());
+					toastr.success(L('Tracked execution of habit #1 on #2', habitDetails.habit.name, Grocy.Components.DateTimePicker.GetValue()));
 
 					$('#habit_id').val('');
 					$('#habit_id_text_input').focus();
 					$('#habit_id_text_input').val('');
-					$('#tracked_time').val(moment().format('YYYY-MM-DD HH:mm:ss'));
-					$('#tracked_time').trigger('change');
+					Grocy.Components.DateTimePicker.SetValue(moment().format('YYYY-MM-DD HH:mm:ss'));
 					$('#habit_id_text_input').trigger('change');
-					$('#habittracking-form').validator('validate');
+					Grocy.FrontendHelpers.ValidateForm('habittracking-form');
 				},
 				function(xhr)
 				{
@@ -40,18 +39,7 @@ $('#habit_id').on('change', function(e)
 	if (habitId)
 	{
 		Grocy.Components.HabitCard.Refresh(habitId);
-		$('#tracked_time').focus();
-	}
-});
-
-$('#tracked_time').val(moment().format('YYYY-MM-DD HH:mm:ss'));
-$('#tracked_time').trigger('change');
-
-$('#tracked_time').on('focus', function(e)
-{
-	if ($('#habit_id_text_input').val().length === 0)
-	{
-		$('#habit_id_text_input').focus();
+		Grocy.Components.DateTimePicker.GetInputElement().focus();
 	}
 });
 
@@ -59,27 +47,32 @@ $('.combobox').combobox({
 	appendId: '_text_input'
 });
 
-$('#habit_id').val('');
 $('#habit_id_text_input').focus();
-$('#habit_id_text_input').val('');
 $('#habit_id_text_input').trigger('change');
+Grocy.FrontendHelpers.ValidateForm('habittracking-form');
 
-$('#habittracking-form').validator();
-$('#habittracking-form').validator('validate');
+$('#habittracking-form input').keyup(function (event)
+{
+	Grocy.FrontendHelpers.ValidateForm('habittracking-form');
+});
 
 $('#habittracking-form input').keydown(function(event)
 {
 	if (event.keyCode === 13) //Enter
 	{
-		if ($('#habittracking-form').validator('validate').has('.has-error').length !== 0) //There is at least one validation error
+		if (document.getElementById('habittracking-form').checkValidity() === false) //There is at least one validation error
 		{
 			event.preventDefault();
 			return false;
 		}
+		else
+		{
+			$('#save-habittracking-button').click();
+		}
 	}
 });
 
-$('#tracked_time').on('keypress', function(e)
+Grocy.Components.DateTimePicker.GetInputElement().on('keypress', function(e)
 {
-	$('#habittracking-form').validator('validate');
+	Grocy.FrontendHelpers.ValidateForm('habittracking-form');
 });

public/viewjs/inventory.js

@@ -7,7 +7,7 @@
 	Grocy.Api.Get('stock/get-product-details/' + jsonForm.product_id,
 		function (productDetails)
 		{
-			Grocy.Api.Get('stock/inventory-product/' + jsonForm.product_id + '/' + jsonForm.new_amount + '?bestbeforedate=' + $('#best_before_date').val(),
+			Grocy.Api.Get('stock/inventory-product/' + jsonForm.product_id + '/' + jsonForm.new_amount + '?bestbeforedate=' + Grocy.Components.DateTimePicker.GetValue(),
 				function(result)
 				{
 					var addBarcode = GetUriParam('addbarcodetoselection');
@@ -32,7 +32,7 @@
 						);
 					}
 
-					toastr.success('Stock amount of ' + productDetails.product.name  + ' is now ' + jsonForm.new_amount.toString() + ' ' + productDetails.quantity_unit_stock.name);
+					toastr.success(L('Stock amount of #1 is now #2 #3', productDetails.product.name, jsonForm.new_amount, productDetails.quantity_unit_stock.name));
 
 					if (addBarcode !== undefined)
 					{
@@ -40,14 +40,14 @@
 					}
 					else
 					{
-						$('#inventory-change-info').hide();
+						$('#inventory-change-info').addClass('d-none');
 						$('#new_amount').val('');
-						$('#best_before_date').val('');
+						Grocy.Components.DateTimePicker.SetValue('');
 						$('#product_id').val('');
 						$('#product_id_text_input').focus();
 						$('#product_id_text_input').val('');
 						$('#product_id_text_input').trigger('change');
-						$('#inventory-form').validator('validate');
+						Grocy.FrontendHelpers.ValidateForm('inventory-form');
 					}
 				},
 				function(xhr)
@@ -164,38 +164,11 @@ $('#product_id_text_input').on('change', function(e)
 });
 
 $('#new_amount').val('');
-$('#best_before_date').val('');
 $('#product_id').val('');
 $('#product_id_text_input').focus();
 $('#product_id_text_input').val('');
 $('#product_id_text_input').trigger('change');
-
-$('#inventory-form').validator({
-	custom: {
-		'isodate': function($el)
-		{
-			if ($el.val().length !== 0 && !moment($el.val(), 'YYYY-MM-DD', true).isValid())
-			{
-				return 'Wrong date format, needs to be YYYY-MM-DD';
-			}
-			else if (moment($el.val()).isValid())
-			{
-				if (moment($el.val()).isBefore(moment(), 'day'))
-				{
-					return 'This value cannot be before today.';
-				}
-			}
-		},
-		'notequal': function($el)
-		{
-			if ($el.val().length !== 0 && $el.val().toString() === $el.attr('not-equal').toString())
-			{
-				return 'This value cannot be equal to ' + $el.attr('not-equal').toString();
-			}
-		}
-	}
-});
-$('#inventory-form').validator('validate');
+Grocy.FrontendHelpers.ValidateForm('inventory-form');
 
 $('#new_amount').on('focus', function(e)
 {
@@ -209,15 +182,24 @@ $('#new_amount').on('focus', function(e)
 	}
 });
 
+$('#inventory-form input').keyup(function (event)
+{
+	Grocy.FrontendHelpers.ValidateForm('inventory-form');
+});
+
 $('#inventory-form input').keydown(function(event)
 {
 	if (event.keyCode === 13) //Enter
 	{
-		if ($('#inventory-form').validator('validate').has('.has-error').length !== 0) //There is at least one validation error
+		if (document.getElementById('inventory-form').checkValidity() === false) //There is at least one validation error
 		{
 			event.preventDefault();
 			return false;
 		}
+		else
+		{
+			$('#save-inventory-button').click();
+		}
 	}
 });
 
@@ -243,8 +225,8 @@ var addBarcode = GetUriParam('addbarcodetoselection');
 if (addBarcode !== undefined)
 {
 	$('#addbarcodetoselection').text(addBarcode);
-	$('#flow-info-addbarcodetoselection').removeClass('hide');
-	$('#barcode-lookup-disabled-hint').removeClass('hide');
+	$('#flow-info-addbarcodetoselection').removeClass('d-none');
+	$('#barcode-lookup-disabled-hint').removeClass('d-none');
 }
 
 $('#new_amount').on('keypress', function(e)
@@ -252,63 +234,48 @@ $('#new_amount').on('keypress', function(e)
 	$('#new_amount').trigger('change');
 });
 	
-$('#best_before_date').on('change', function(e)
+Grocy.Components.DateTimePicker.GetInputElement().on('change', function(e)
 {
-	$('#inventory-form').validator('validate');
+	Grocy.FrontendHelpers.ValidateForm('inventory-form');
 });
 
-$('#best_before_date').on('keypress', function(e)
+Grocy.Components.DateTimePicker.GetInputElement().on('keypress', function(e)
 {
-	$('#inventory-form').validator('validate');
+	Grocy.FrontendHelpers.ValidateForm('inventory-form');
 });
 
-$('#best_before_date').on('keydown', function(e)
+$('#new_amount').on('keyup', function(e)
 {
-	if (e.keyCode === 13) //Enter
-	{
-		$('#best_before_date').trigger('change');
-	}
-});	
-
-$('#new_amount').on('change', function(e)
-{
-	if ($('#product_id').parent().hasClass('has-error'))
-	{
-		$('#inventory-change-info').hide();
-		return;
-	}
-
 	var productId = $('#product_id').val();
-	var newAmount = $('#new_amount').val();
-
+	var newAmount = parseInt($('#new_amount').val());
+	
 	if (productId)
 	{
 		Grocy.Api.Get('stock/get-product-details/' + productId,
 			function(productDetails)
 			{
-				var productStockAmount = productDetails.stock_amount || '0';
-
+				var productStockAmount = parseInt(productDetails.stock_amount || '0');
+				
 				if (newAmount > productStockAmount)
 				{
 					var amountToAdd = newAmount - productDetails.stock_amount;
-					$('#inventory-change-info').text('This means ' + amountToAdd.toString() + ' ' + productDetails.quantity_unit_stock.name + ' will be added to stock');
-					$('#inventory-change-info').show();
-					$('#best_before_date').attr('required', 'required');
+					$('#inventory-change-info').text(L('This means #1 will be added to stock', amountToAdd.toString() + ' ' + productDetails.quantity_unit_stock.name));
+					$('#inventory-change-info').removeClass('d-none');
+					Grocy.Components.DateTimePicker.GetInputElement().attr('required', '');
 				}
 				else if (newAmount < productStockAmount)
 				{
 					var amountToRemove = productStockAmount - newAmount;
-					$('#inventory-change-info').text('This means ' + amountToRemove.toString() + ' ' + productDetails.quantity_unit_stock.name + ' will be removed from stock');
-					$('#inventory-change-info').show();
-					$('#best_before_date').removeAttr('required');
+					$('#inventory-change-info').text(L('This means #1 will be removed from stock', amountToRemove.toString() + ' ' + productDetails.quantity_unit_stock.name));
+					$('#inventory-change-info').removeClass('d-none');
+					Grocy.Components.DateTimePicker.GetInputElement().removeAttr('required');
 				}
 				else
 				{
-					$('#inventory-change-info').hide();
+					$('#inventory-change-info').addClass('d-none');
 				}
 
-				$('#inventory-form').validator('update');
-				$('#inventory-form').validator('validate');
+				Grocy.FrontendHelpers.ValidateForm('inventory-form');
 			},
 			function(xhr)
 			{

public/viewjs/locationform.js

@@ -30,6 +30,26 @@
 	}
 });
 
+$('#location-form input').keyup(function (event)
+{
+	Grocy.FrontendHelpers.ValidateForm('location-form');
+});
+
+$('#location-form input').keydown(function (event)
+{
+	if (event.keyCode === 13) //Enter
+	{
+		if (document.getElementById('location-form').checkValidity() === false) //There is at least one validation error
+		{
+			event.preventDefault();
+			return false;
+		}
+		else
+		{
+			$('#save-location-button').click();
+		}
+	}
+});
+
 $('#name').focus();
-$('#location-form').validator();
-$('#location-form').validator('validate');
+Grocy.FrontendHelpers.ValidateForm('location-form');

public/viewjs/locations.js

@@ -1,7 +1,31 @@
-$(document).on('click', '.location-delete-button', function(e)
+var locationsTable = $('#locations-table').DataTable({
+	'paginate': false,
+	'order': [[1, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
+});
+
+$("#search").on("keyup", function()
 {
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	locationsTable.search(value).draw();
+});
+
+$(document).on('click', '.location-delete-button', function (e)
+{
+	var objectName = $(e.currentTarget).attr('data-location-name');
+	var objectId = $(e.currentTarget).attr('data-location-id');
+
 	bootbox.confirm({
-		message: L('Are you sure to delete location "#1"?', $(e.currentTarget).attr('data-location-name')),
+		message: L('Are you sure to delete location "#1"?', objectName),
 		buttons: {
 			confirm: {
 				label: L('Yes'),
@@ -16,7 +40,7 @@
 		{
 			if (result === true)
 			{
-				Grocy.Api.Get('delete-object/locations/' + $(e.currentTarget).attr('data-location-id'),
+				Grocy.Api.Get('delete-object/locations/' + objectId,
 					function(result)
 					{
 						window.location.href = U('/locations');
@@ -30,12 +54,3 @@
 		}
 	});
 });
-
-$('#locations-table').DataTable({
-	'pageLength': 50,
-	'order': [[1, 'asc']],
-	'columnDefs': [
-		{ 'orderable': false, 'targets': 0 }
-	],
-	'language': JSON.parse(L('datatables_localization'))
-});

public/viewjs/login.js

@@ -1,9 +1,7 @@
-$('.logout-button').hide();
-
-$('#username').focus();
+$('#username').focus();
 
 if (GetUriParam('invalid') === 'true')
 {
 	$('#login-error').text(L('Invalid credentials, please try again'));
-	$('#login-error').show();
+	$('#login-error').removeClass('d-none');
 }

public/viewjs/manageapikeys.js

@@ -0,0 +1,62 @@
+var apiKeysTable = $('#apikeys-table').DataTable({
+	'paginate': false,
+	'order': [[4, 'desc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
+});
+
+var createdApiKeyId = GetUriParam('CreatedApiKeyId');
+if (createdApiKeyId !== undefined)
+{
+	$('#apiKeyRow_' + createdApiKeyId).effect('highlight', {}, 3000);
+}
+
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	apiKeysTable.search(value).draw();
+});
+
+$(document).on('click', '.apikey-delete-button', function (e)
+{
+	var objectName = $(e.currentTarget).attr('data-apikey-apikey');
+	var objectId = $(e.currentTarget).attr('data-apikey-id');
+
+	bootbox.confirm({
+		message: L('Are you sure to delete API key "#1"?', objectName),
+		buttons: {
+			confirm: {
+				label: L('Yes'),
+				className: 'btn-success'
+			},
+			cancel: {
+				label: L('No'),
+				className: 'btn-danger'
+			}
+		},
+		callback: function(result)
+		{
+			if (result === true)
+			{
+				Grocy.Api.Get('delete-object/api_keys/' + objectId,
+					function(result)
+					{
+						window.location.href = U('/manageapikeys');
+					},
+					function(xhr)
+					{
+						console.error(xhr);
+					}
+				);
+			}
+		}
+	});
+});

public/viewjs/openapiui.js

@@ -0,0 +1,26 @@
+function HideTopbarPlugin()
+{
+	return {
+		components: {
+			Topbar: function () { return null }
+		}
+	}
+}
+
+const swaggerUi = SwaggerUIBundle({
+	url: Grocy.OpenApi.SpecUrl,
+	dom_id: '#swagger-ui',
+	deepLinking: true,
+	presets: [
+		SwaggerUIBundle.presets.apis,
+		SwaggerUIStandalonePreset
+	],
+	plugins: [
+		SwaggerUIBundle.plugins.DownloadUrl,
+		HideTopbarPlugin
+	],
+	layout: 'StandaloneLayout',
+	docExpansion: "list"
+});
+
+window.ui = swaggerUi;

public/viewjs/productform.js

@@ -82,15 +82,35 @@ $('.input-group-qu').on('change', function(e)
 	if (factor > 1)
 	{
 		$('#qu-conversion-info').text(L('This means 1 #1 purchased will be converted into #2 #3 in stock', $("#qu_id_purchase option:selected").text(), (1 * factor).toString(), $("#qu_id_stock option:selected").text()));
-		$('#qu-conversion-info').show();
+		$('#qu-conversion-info').removeClass('d-none');
 	}
 	else
 	{
-		$('#qu-conversion-info').hide();
+		$('#qu-conversion-info').addClass('d-none');
+	}
+});
+
+$('#product-form input').keyup(function(event)
+{
+	Grocy.FrontendHelpers.ValidateForm('product-form');
+});
+
+$('#product-form input').keydown(function(event)
+{
+	if (event.keyCode === 13) //Enter
+	{
+		if (document.getElementById('product-form').checkValidity() === false) //There is at least one validation error
+		{
+			event.preventDefault();
+			return false;
+		}
+		else
+		{
+			$('#save-product-button').click();
+		}
 	}
 });
 
 $('#name').focus();
-$('#product-form').validator();
-$('#product-form').validator('validate');
 $('.input-group-qu').trigger('change');
+Grocy.FrontendHelpers.ValidateForm('product-form');

public/viewjs/products.js

@@ -1,7 +1,31 @@
-$(document).on('click', '.product-delete-button', function(e)
+var productsTable = $('#products-table').DataTable({
+	'paginate': false,
+	'order': [[1, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
+});
+
+$("#search").on("keyup", function()
 {
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	productsTable.search(value).draw();
+});
+
+$(document).on('click', '.product-delete-button', function (e)
+{
+	var objectName = $(e.currentTarget).attr('data-product-name');
+	var objectId = $(e.currentTarget).attr('data-product-id');
+
 	bootbox.confirm({
-		message: L('Are you sure to delete product "#1"?', $(e.currentTarget).attr('data-product-name')),
+		message: L('Are you sure to delete product "#1"?', objectName),
 		buttons: {
 			confirm: {
 				label: L('Yes'),
@@ -16,7 +40,7 @@
 		{
 			if (result === true)
 			{
-				Grocy.Api.Get('delete-object/products/' + $(e.currentTarget).attr('data-product-id'),
+				Grocy.Api.Get('delete-object/products/' + objectId,
 					function(result)
 					{
 						window.location.href = U('/products');
@@ -30,12 +54,3 @@
 		}
 	});
 });
-
-$('#products-table').DataTable({
-	'pageLength': 50,
-	'order': [[1, 'asc']],
-	'columnDefs': [
-		{ 'orderable': false, 'targets': 0 }
-	],
-	'language': JSON.parse(L('datatables_localization'))
-});

public/viewjs/purchase.js

@@ -9,7 +9,7 @@
 		{
 			var amount = jsonForm.amount * productDetails.product.qu_factor_purchase_to_stock;
 
-			Grocy.Api.Get('stock/add-product/' + jsonForm.product_id + '/' + amount + '?bestbeforedate=' + $('#best_before_date').val(),
+			Grocy.Api.Get('stock/add-product/' + jsonForm.product_id + '/' + amount + '?bestbeforedate=' + Grocy.Components.DateTimePicker.GetValue(),
 				function(result)
 				{
 					var addBarcode = GetUriParam('addbarcodetoselection');
@@ -34,7 +34,7 @@
 						);
 					}
 
-					toastr.success('Added ' + amount + ' ' + productDetails.quantity_unit_stock.name + ' of ' + productDetails.product.name + ' to stock');
+					toastr.success(L('Added #1 #2 of #3 to stock', amount, productDetails.quantity_unit_stock.name, productDetails.product.name));
 
 					if (addBarcode !== undefined)
 					{
@@ -43,12 +43,12 @@
 					else
 					{
 						$('#amount').val(0);
-						$('#best_before_date').val('');
+						Grocy.Components.DateTimePicker.SetValue('');
 						$('#product_id').val('');
 						$('#product_id_text_input').focus();
 						$('#product_id_text_input').val('');
 						$('#product_id_text_input').trigger('change');
-						$('#purchase-form').validator('validate');
+						Grocy.FrontendHelpers.ValidateForm('purchase-form');
 					}
 				},
 				function(xhr)
@@ -79,13 +79,12 @@ $('#product_id').on('change', function(e)
 				
 				if (productDetails.product.default_best_before_days.toString() !== '0')
 				{
-					$('#best_before_date').val(moment().add(productDetails.product.default_best_before_days, 'days').format('YYYY-MM-DD'));
-					$('#best_before_date').trigger('change');
+					Grocy.Components.DateTimePicker.SetValue(moment().add(productDetails.product.default_best_before_days, 'days').format('YYYY-MM-DD'));
 					$('#amount').focus();
 				}
 				else
 				{
-					$('#best_before_date').focus();
+					Grocy.Components.DateTimePicker.GetInputElement().focus();
 				}
 			},
 			function(xhr)
@@ -97,7 +96,8 @@ $('#product_id').on('change', function(e)
 });
 
 $('.combobox').combobox({
-	appendId: '_text_input'
+	appendId: '_text_input',
+	bsVersion: '4'
 });
 
 $('#product_id_text_input').on('change', function(e)
@@ -173,39 +173,11 @@ $('#product_id_text_input').on('change', function(e)
 });
 
 $('#amount').val(0);
-$('#best_before_date').val('');
 $('#product_id').val('');
 $('#product_id_text_input').focus();
 $('#product_id_text_input').val('');
 $('#product_id_text_input').trigger('change');
-
-$('#purchase-form').validator({
-	custom: {
-		'isodate': function($el)
-		{
-			if ($el.val().length !== 0 && !moment($el.val(), 'YYYY-MM-DD', true).isValid())
-			{
-				return 'Wrong date format, needs to be YYYY-MM-DD';
-			}
-			else if (moment($el.val()).isValid())
-			{
-				if (moment($el.val()).isBefore(moment(), 'day'))
-				{
-					return 'This value cannot be before today.';
-				}
-			}
-		}
-	}
-});
-$('#purchase-form').validator('validate');
-
-$('#best_before_date').on('focus', function(e)
-{
-	if ($('#product_id_text_input').val().length === 0)
-	{
-		$('#product_id_text_input').focus();
-	}
-});
+Grocy.FrontendHelpers.ValidateForm('purchase-form');
 
 $('#amount').on('focus', function(e)
 {
@@ -219,15 +191,24 @@ $('#amount').on('focus', function(e)
 	}
 });
 
+$('#purchase-form input').keyup(function(event)
+{
+	Grocy.FrontendHelpers.ValidateForm('purchase-form');
+});
+
 $('#purchase-form input').keydown(function(event)
 {
 	if (event.keyCode === 13) //Enter
 	{
-		if ($('#purchase-form').validator('validate').has('.has-error').length !== 0) //There is at least one validation error
+		if (document.getElementById('purchase-form').checkValidity() === false) //There is at least one validation error
 		{
 			event.preventDefault();
 			return false;
 		}
+		else
+		{
+			$('#save-purchase-button').click();
+		}
 	}
 });
 
@@ -245,7 +226,7 @@ if (prefillProduct !== undefined)
 		$('#product_id').val(possibleOptionElement.val());
 		$('#product_id').data('combobox').refresh();
 		$('#product_id').trigger('change');
-		$('#best_before_date').focus();
+		Grocy.Components.DateTimePicker.GetInputElement().focus();
 	}
 }
 
@@ -253,16 +234,21 @@ var addBarcode = GetUriParam('addbarcodetoselection');
 if (addBarcode !== undefined)
 {
 	$('#addbarcodetoselection').text(addBarcode);
-	$('#flow-info-addbarcodetoselection').removeClass('hide');
-	$('#barcode-lookup-disabled-hint').removeClass('hide');
+	$('#flow-info-addbarcodetoselection').removeClass('d-none');
+	$('#barcode-lookup-disabled-hint').removeClass('d-none');
 }
 
-$('#best_before_date').on('change', function(e)
+Grocy.Components.DateTimePicker.GetInputElement().on('change', function(e)
 {
-	$('#purchase-form').validator('validate');
+	Grocy.FrontendHelpers.ValidateForm('purchase-form');
 });
 
-$('#best_before_date').on('keypress', function(e)
+Grocy.Components.DateTimePicker.GetInputElement().on('keypress', function(e)
 {
-	$('#purchase-form').validator('validate');
+	Grocy.FrontendHelpers.ValidateForm('purchase-form');
+});
+
+$('#amount').on('change', function (e)
+{
+	Grocy.FrontendHelpers.ValidateForm('purchase-form');
 });

public/viewjs/quantityunitform.js

@@ -30,6 +30,26 @@
 	}
 });
 
+$('#quantityunit-form input').keyup(function(event)
+{
+	Grocy.FrontendHelpers.ValidateForm('quantityunit-form');
+});
+
+$('#quantityunit-form input').keydown(function(event)
+{
+	if (event.keyCode === 13) //Enter
+	{
+		if (document.getElementById('quantityunit-form').checkValidity() === false) //There is at least one validation error
+		{
+			event.preventDefault();
+			return false;
+		}
+		else
+		{
+			$('#save-quantityunit-button').click();
+		}
+	}
+});
+
 $('#name').focus();
-$('#quantityunit-form').validator();
-$('#quantityunit-form').validator('validate');
+Grocy.FrontendHelpers.ValidateForm('quantityunit-form');

public/viewjs/quantityunits.js

@@ -1,7 +1,31 @@
-$(document).on('click', '.quantityunit-delete-button', function(e)
+var quantityUnitsTable = $('#quantityunits-table').DataTable({
+	'paginate': false,
+	'order': [[1, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
+});
+
+$("#search").on("keyup", function()
 {
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	quantityUnitsTable.search(value).draw();
+});
+
+$(document).on('click', '.quantityunit-delete-button', function (e)
+{
+	var objectName = $(e.currentTarget).attr('data-quantityunit-name');
+	var objectId = $(e.currentTarget).attr('data-quantityunit-id');
+
 	bootbox.confirm({
-		message: L('Are you sure to delete quantity unit "#1"?', $(e.currentTarget).attr('data-quantityunit-name')),
+		message: L('Are you sure to delete quantity unit "#1"?', objectName),
 		buttons: {
 			confirm: {
 				label: 'Yes',
@@ -16,7 +40,7 @@
 		{
 			if (result === true)
 			{
-				Grocy.Api.Get('delete-object/quantity_units/' + $(e.currentTarget).attr('data-quantityunit-id'),
+				Grocy.Api.Get('delete-object/quantity_units/' + objectId,
 					function(result)
 					{
 						window.location.href = U('/quantityunits');
@@ -30,12 +54,3 @@
 		}
 	});
 });
-
-$('#quantityunits-table').DataTable({
-	'pageLength': 50,
-	'order': [[1, 'asc']],
-	'columnDefs': [
-		{ 'orderable': false, 'targets': 0 }
-	],
-	'language': JSON.parse(L('datatables_localization'))
-});

public/viewjs/shoppinglist.js

@@ -1,4 +1,25 @@
-$(document).on('click', '.shoppinglist-delete-button', function(e)
+var shoppingListTable = $('#shoppinglist-table').DataTable({
+	'paginate': false,
+	'order': [[1, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
+});
+
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	shoppingListTable.search(value).draw();
+});
+
+$(document).on('click', '.shoppinglist-delete-button', function (e)
 {
 	Grocy.Api.Get('delete-object/shopping_list/' + $(e.currentTarget).attr('data-shoppinglist-id'),
 		function(result)
@@ -25,12 +46,3 @@ $(document).on('click', '#add-products-below-min-stock-amount', function(e)
 		}
 	);
 });
-
-$('#shoppinglist-table').DataTable({
-	'pageLength': 50,
-	'order': [[1, 'asc']],
-	'columnDefs': [
-		{ 'orderable': false, 'targets': 0 }
-	],
-	'language': JSON.parse(L('datatables_localization'))
-});

public/viewjs/shoppinglistform.js

@@ -42,43 +42,7 @@ $('#product_id').on('change', function(e)
 			function (productDetails)
 			{
 				$('#amount_qu_unit').text(productDetails.quantity_unit_purchase.name);
-
-				if ($('#product_id').hasClass('suppress-next-custom-validate-event'))
-				{
-					$('#product_id').removeClass('suppress-next-custom-validate-event');
-				}
-				else
-				{
-					Grocy.Api.Get('get-objects/shopping_list',
-						function (currentShoppingListItems)
-						{
-							if (currentShoppingListItems.filter(function (e) { return e.product_id === productId; }).length > 0)
-							{
-								$('#product_id').val('');
-								$('#product_id_text_input').val('');
-								$('#product_id_text_input').addClass('has-error');
-								$('#product_id_text_input').parent('.input-group').addClass('has-error');
-								$('#product_id_text_input').closest('.form-group').addClass('has-error');
-								$('#product-error').text('This product is already on the shopping list.');
-								$('#product-error').show();
-								$('#product_id_text_input').focus();
-							}
-							else
-							{
-								$('#product_id_text_input').removeClass('has-error');
-								$('#product_id_text_input').parent('.input-group').removeClass('has-error');
-								$('#product_id_text_input').closest('.form-group').removeClass('has-error');
-								$('#product-error').hide();
-
-								$('#amount').focus();
-							}
-						},
-						function(xhr)
-						{
-							console.error(xhr);
-						}
-					);
-				}
+				$('#amount').focus();
 			},
 			function(xhr)
 			{
@@ -97,7 +61,8 @@ $('#product_id_text_input').on('change', function(e)
 	var input = $('#product_id_text_input').val().toString();
 	var possibleOptionElement = $("#product_id option[data-additional-searchdata*='" + input + "']").first();
 
-	if (possibleOptionElement.length > 0 && possibleOptionElement.text().length > 0) {
+	if (possibleOptionElement.length > 0 && possibleOptionElement.text().length > 0)
+	{
 		$('#product_id').val(possibleOptionElement.val());
 		$('#product_id').data('combobox').refresh();
 		$('#product_id').trigger('change');
@@ -113,8 +78,7 @@ if (Grocy.EditMode === 'edit')
 	$('#product_id').trigger('change');
 }
 
-$('#shoppinglist-form').validator();
-$('#shoppinglist-form').validator('validate');
+Grocy.FrontendHelpers.ValidateForm('shoppinglist-form');
 
 $('#amount').on('focus', function(e)
 {
@@ -122,16 +86,29 @@ $('#amount').on('focus', function(e)
 	{
 		$('#product_id_text_input').focus();
 	}
+	else
+	{
+		$(this).select();
+	}
 });
 
-$('#shoppinglist-form input').keydown(function(event)
+$('#shoppinglist-form input').keyup(function (event)
+{
+	Grocy.FrontendHelpers.ValidateForm('shoppinglist-form');
+});
+
+$('#shoppinglist-form input').keydown(function (event)
 {
 	if (event.keyCode === 13) //Enter
 	{
-		if ($('#shoppinglist-form').validator('validate').has('.has-error').length !== 0) //There is at least one validation error
+		if (document.getElementById('shoppinglist-form').checkValidity() === false) //There is at least one validation error
 		{
 			event.preventDefault();
 			return false;
 		}
+		else
+		{
+			$('#save-shoppinglist-button').click();
+		}
 	}
 });

public/viewjs/stockoverview.js

@@ -1,5 +1,70 @@
-$('#stock-overview-table').DataTable({
-	'pageLength': 50,
-	'order': [[2, 'asc']],
-	'language': JSON.parse(L('datatables_localization'))
+var stockOverviewTable = $('#stock-overview-table').DataTable({
+	'paginate': false,
+	'order': [[3, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 },
+		{ 'visible': false, 'targets': 4 }
+	],
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
+});
+
+$("#location-filter").on("change", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	stockOverviewTable.column(4).search(value).draw();
+});
+
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	stockOverviewTable.search(value).draw();
+});
+
+$(document).on('click', '.product-consume-button', function(e)
+{
+	var productId = $(e.currentTarget).attr('data-product-id');
+	var productName = $(e.currentTarget).attr('data-product-name');
+	var productQuName = $(e.currentTarget).attr('data-product-qu-name');
+	var consumeAmount = $(e.currentTarget).attr('data-consume-amount');
+
+	Grocy.Api.Get('stock/consume-product/' + productId + '/' + consumeAmount,
+		function(result)
+		{
+			var oldAmount = parseInt($('#product-' + productId + '-amount').text());
+			var newAmount = oldAmount - consumeAmount;
+			if (newAmount === 0)
+			{
+				$('#product-' + productId + '-row').fadeOut(500, function()
+				{
+					$(this).remove();
+				});
+			}	
+			else
+			{
+				$('#product-' + productId + '-amount').parent().effect('highlight', { }, 500);
+				$('#product-' + productId + '-amount').fadeOut(500, function()
+				{
+					$(this).text(newAmount).fadeIn(500);
+				});
+				$('#product-' + productId + '-consume-all-button').attr('data-consume-amount', newAmount);
+			}	
+
+			toastr.success(L('Removed #1 #2 of #3 from stock', consumeAmount, productQuName, productName));
+		},
+		function(xhr)
+		{
+			console.error(xhr);
+		}
+	);
 });

routes.php

@@ -2,51 +2,62 @@
 
 use \Grocy\Middleware\JsonMiddleware;
 use \Grocy\Middleware\CliMiddleware;
+use \Grocy\Middleware\SessionAuthMiddleware;
+use \Grocy\Middleware\ApiKeyAuthMiddleware;
+use \Tuupola\Middleware\CorsMiddleware;
 
-// Base route
-$app->get('/', 'Grocy\Controllers\LoginController:Root')->setName('root');
+$app->group('', function()
+{
+	// Base route
+	$this->get('/', 'LoginControllerInstance:Root')->setName('root');
 
-// Login routes
-$app->get('/login', 'Grocy\Controllers\LoginController:LoginPage')->setName('login');
-$app->post('/login', 'Grocy\Controllers\LoginController:ProcessLogin')->setName('login');
-$app->get('/logout', 'Grocy\Controllers\LoginController:Logout');
+	// Login routes
+	$this->get('/login', 'LoginControllerInstance:LoginPage')->setName('login');
+	$this->post('/login', 'LoginControllerInstance:ProcessLogin')->setName('login');
+	$this->get('/logout', 'LoginControllerInstance:Logout');
 
-// Stock routes
-$app->get('/stockoverview', 'Grocy\Controllers\StockController:Overview');
-$app->get('/purchase', 'Grocy\Controllers\StockController:Purchase');
-$app->get('/consume', 'Grocy\Controllers\StockController:Consume');
-$app->get('/inventory', 'Grocy\Controllers\StockController:Inventory');
+	// Stock routes
+	$this->get('/stockoverview', 'Grocy\Controllers\StockController:Overview');
+	$this->get('/purchase', 'Grocy\Controllers\StockController:Purchase');
+	$this->get('/consume', 'Grocy\Controllers\StockController:Consume');
+	$this->get('/inventory', 'Grocy\Controllers\StockController:Inventory');
 
-$app->get('/products', 'Grocy\Controllers\StockController:ProductsList');
-$app->get('/product/{productId}', 'Grocy\Controllers\StockController:ProductEditForm');
+	$this->get('/products', 'Grocy\Controllers\StockController:ProductsList');
+	$this->get('/product/{productId}', 'Grocy\Controllers\StockController:ProductEditForm');
 
-$app->get('/locations', 'Grocy\Controllers\StockController:LocationsList');
-$app->get('/location/{locationId}', 'Grocy\Controllers\StockController:LocationEditForm');
+	$this->get('/locations', 'Grocy\Controllers\StockController:LocationsList');
+	$this->get('/location/{locationId}', 'Grocy\Controllers\StockController:LocationEditForm');
 
-$app->get('/quantityunits', 'Grocy\Controllers\StockController:QuantityUnitsList');
-$app->get('/quantityunit/{quantityunitId}', 'Grocy\Controllers\StockController:QuantityUnitEditForm');
+	$this->get('/quantityunits', 'Grocy\Controllers\StockController:QuantityUnitsList');
+	$this->get('/quantityunit/{quantityunitId}', 'Grocy\Controllers\StockController:QuantityUnitEditForm');
 
-$app->get('/shoppinglist', 'Grocy\Controllers\StockController:ShoppingList');
-$app->get('/shoppinglistitem/{itemId}', 'Grocy\Controllers\StockController:ShoppingListItemEditForm');
+	$this->get('/shoppinglist', 'Grocy\Controllers\StockController:ShoppingList');
+	$this->get('/shoppinglistitem/{itemId}', 'Grocy\Controllers\StockController:ShoppingListItemEditForm');
 
+	// Habit routes
+	$this->get('/habitsoverview', 'Grocy\Controllers\HabitsController:Overview');
+	$this->get('/habittracking', 'Grocy\Controllers\HabitsController:TrackHabitExecution');
 
-// Habit routes
-$app->get('/habitsoverview', 'Grocy\Controllers\HabitsController:Overview');
-$app->get('/habittracking', 'Grocy\Controllers\HabitsController:TrackHabitExecution');
+	$this->get('/habits', 'Grocy\Controllers\HabitsController:HabitsList');
+	$this->get('/habit/{habitId}', 'Grocy\Controllers\HabitsController:HabitEditForm');
 
-$app->get('/habits', 'Grocy\Controllers\HabitsController:HabitsList');
-$app->get('/habit/{habitId}', 'Grocy\Controllers\HabitsController:HabitEditForm');
+	// Batterry routes
+	$this->get('/batteriesoverview', 'Grocy\Controllers\BatteriesController:Overview');
+	$this->get('/batterytracking', 'Grocy\Controllers\BatteriesController:TrackChargeCycle');
 
-// Batterry routes
-$app->get('/batteriesoverview', 'Grocy\Controllers\BatteriesController:Overview');
-$app->get('/batterytracking', 'Grocy\Controllers\BatteriesController:TrackChargeCycle');
-
-$app->get('/batteries', 'Grocy\Controllers\BatteriesController:BatteriesList');
-$app->get('/battery/{batteryId}', 'Grocy\Controllers\BatteriesController:BatteryEditForm');
+	$this->get('/batteries', 'Grocy\Controllers\BatteriesController:BatteriesList');
+	$this->get('/battery/{batteryId}', 'Grocy\Controllers\BatteriesController:BatteryEditForm');
 
+	// Other routes
+	$this->get('/api', 'Grocy\Controllers\OpenApiController:DocumentationUi');
+	$this->get('/manageapikeys', 'Grocy\Controllers\OpenApiController:ApiKeysList');
+	$this->get('/manageapikeys/new', 'Grocy\Controllers\OpenApiController:CreateNewApiKey');
+})->add(new SessionAuthMiddleware($appContainer, $appContainer->LoginControllerInstance->GetSessionCookieName()));
 
 $app->group('/api', function()
 {
+	$this->get('/get-openapi-specification', 'Grocy\Controllers\OpenApiController:DocumentationSpec');
+
 	$this->get('/get-objects/{entity}', 'Grocy\Controllers\GenericEntityApiController:GetObjects');
 	$this->get('/get-object/{entity}/{objectId}', 'Grocy\Controllers\GenericEntityApiController:GetObject');
 	$this->post('/add-object/{entity}', 'Grocy\Controllers\GenericEntityApiController:AddObject');
@@ -59,13 +70,23 @@ $app->group('/api', function()
 	$this->get('/stock/get-product-details/{productId}', 'Grocy\Controllers\StockApiController:ProductDetails');
 	$this->get('/stock/get-current-stock', 'Grocy\Controllers\StockApiController:CurrentStock');
 	$this->get('/stock/add-missing-products-to-shoppinglist', 'Grocy\Controllers\StockApiController:AddMissingProductsToShoppingList');
+	$this->get('/stock/external-barcode-lookup/{barcode}', 'Grocy\Controllers\StockApiController:ExternalBarcodeLookup');
 
 	$this->get('/habits/track-habit-execution/{habitId}', 'Grocy\Controllers\HabitsApiController:TrackHabitExecution');
 	$this->get('/habits/get-habit-details/{habitId}', 'Grocy\Controllers\HabitsApiController:HabitDetails');
 	
 	$this->get('/batteries/track-charge-cycle/{batteryId}', 'Grocy\Controllers\BatteriesApiController:TrackChargeCycle');
 	$this->get('/batteries/get-battery-details/{batteryId}', 'Grocy\Controllers\BatteriesApiController:BatteryDetails');
-})->add(JsonMiddleware::class);
+})->add(new ApiKeyAuthMiddleware($appContainer, $appContainer->LoginControllerInstance->GetSessionCookieName(), $appContainer->ApiKeyHeaderName))
+->add(JsonMiddleware::class)
+->add(new CorsMiddleware([
+	'origin' => ["*"],
+	'methods' => ["GET", "POST"],
+	'headers.allow' => [ $appContainer->ApiKeyHeaderName ],
+	'headers.expose' => [ ],
+	'credentials' => false,
+	'cache' => 0,
+]));
 
 $app->group('/cli', function()
 {

services/ApiKeyService.php

@@ -0,0 +1,64 @@
+<?php
+
+namespace Grocy\Services;
+
+class ApiKeyService extends BaseService
+{
+	/**
+	 * @return boolean
+	 */
+	public function IsValidApiKey($apiKey)
+	{
+		if ($apiKey === null || empty($apiKey))
+		{
+			return false;
+		}
+		else
+		{
+			$apiKeyRow = $this->Database->api_keys()->where('api_key = :1 AND expires > :2', $apiKey, date('Y-m-d H:i:s', time()))->fetch();
+			if ($apiKeyRow !== null)
+			{
+				$apiKeyRow->update(array(
+					'last_used' => date('Y-m-d H:i:s', time())
+				));
+				return true;
+			}
+			else
+			{
+				return false;
+			}
+		}
+	}
+
+	/**
+	 * @return string
+	 */
+	public function CreateApiKey()
+	{
+		$newApiKey = $this->GenerateApiKey();
+		
+		$apiKeyRow = $this->Database->api_keys()->createRow(array(
+			'api_key' => $newApiKey,
+			'expires' => '2999-12-31 23:59:59' // Default is that API keys expire never
+		));
+		$apiKeyRow->save();
+
+		return $newApiKey;
+	}
+
+	public function RemoveApiKey($apiKey)
+	{
+		$this->Database->api_keys()->where('api_key', $apiKey)->delete();
+	}
+
+	public function GetApiKeyId($apiKey)
+	{
+		$apiKey = $this->Database->api_keys()->where('api_key', $apiKey)->fetch();
+		return $apiKey->id;
+	}
+
+	private function GenerateApiKey()
+	{
+		return RandomString(50);
+	}
+}

services/ApplicationService.php

@@ -13,14 +13,11 @@ class ApplicationService extends BaseService
 	}
 
 	private $InstalledVersion;
-	/**
-	 * @return string
-	 */
 	public function GetInstalledVersion()
 	{
 		if ($this->InstalledVersion == null)
 		{
-			$this->InstalledVersion = preg_replace("/\r|\n/", '', file_get_contents(__DIR__ . '/../version.txt'));
+			$this->InstalledVersion = json_decode(file_get_contents(__DIR__ . '/../version.json'));
 		}
 
 		return $this->InstalledVersion;

services/BatteriesService.php

@@ -12,6 +12,11 @@ class BatteriesService extends BaseService
 
 	public function GetNextChargeTime(int $batteryId)
 	{
+		if (!$this->BatteryExists($batteryId))
+		{
+			throw new \Exception('Battery does not exist');
+		}
+		
 		$battery = $this->Database->batteries($batteryId);
 		$batteryLastLogRow = $this->DatabaseService->ExecuteDbQuery("SELECT * from batteries_current WHERE battery_id = $batteryId LIMIT 1")->fetch(\PDO::FETCH_OBJ);
 
@@ -21,7 +26,7 @@ class BatteriesService extends BaseService
 		}
 		else
 		{
-			return date('Y-m-d H:i:s');
+			return date('2999-12-31 23:59:59');
 		}
 
 		return null;
@@ -29,6 +34,11 @@ class BatteriesService extends BaseService
 
 	public function GetBatteryDetails(int $batteryId)
 	{
+		if (!$this->BatteryExists($batteryId))
+		{
+			throw new \Exception('Battery does not exist');
+		}
+
 		$battery = $this->Database->batteries($batteryId);
 		$batteryChargeCylcesCount = $this->Database->battery_charge_cycles()->where('battery_id', $batteryId)->count();
 		$batteryLastChargedTime = $this->Database->battery_charge_cycles()->where('battery_id', $batteryId)->max('tracked_time');
@@ -42,6 +52,11 @@ class BatteriesService extends BaseService
 
 	public function TrackChargeCycle(int $batteryId, string $trackedTime)
 	{
+		if (!$this->BatteryExists($batteryId))
+		{
+			throw new \Exception('Battery does not exist');
+		}
+
 		$logRow = $this->Database->battery_charge_cycles()->createRow(array(
 			'battery_id' => $batteryId,
 			'tracked_time' => $trackedTime
@@ -50,4 +65,10 @@ class BatteriesService extends BaseService
 
 		return true;
 	}
+
+	private function BatteryExists($batteryId)
+	{
+		$batteryRow = $this->Database->batteries()->where('id = :1', $batteryId)->fetch();
+		return $batteryRow !== null;
+	}
 }

services/HabitsService.php

@@ -15,13 +15,18 @@ class HabitsService extends BaseService
 
 	public function GetNextHabitTime(int $habitId)
 	{
+		if (!$this->HabitExists($habitId))
+		{
+			throw new \Exception('Habit does not exist');
+		}
+
 		$habit = $this->Database->habits($habitId);
 		$habitLastLogRow = $this->DatabaseService->ExecuteDbQuery("SELECT * from habits_current WHERE habit_id = $habitId LIMIT 1")->fetch(\PDO::FETCH_OBJ);
 
 		switch($habit->period_type)
 		{
 			case self::HABIT_TYPE_MANUALLY:
-				return date('Y-m-d H:i:s');
+				return date('2999-12-31 23:59:59');
 			case self::HABIT_TYPE_DYNAMIC_REGULAR:
 				return date('Y-m-d H:i:s', strtotime('+' . $habit->period_days . ' day', strtotime($habitLastLogRow->last_tracked_time)));
 		}
@@ -31,6 +36,11 @@ class HabitsService extends BaseService
 
 	public function GetHabitDetails(int $habitId)
 	{
+		if (!$this->HabitExists($habitId))
+		{
+			throw new \Exception('Habit does not exist');
+		}
+
 		$habit = $this->Database->habits($habitId);
 		$habitTrackedCount = $this->Database->habits_log()->where('habit_id', $habitId)->count();
 		$habitLastTrackedTime = $this->Database->habits_log()->where('habit_id', $habitId)->max('tracked_time');
@@ -44,6 +54,11 @@ class HabitsService extends BaseService
 
 	public function TrackHabit(int $habitId, string $trackedTime)
 	{
+		if (!$this->HabitExists($habitId))
+		{
+			throw new \Exception('Habit does not exist');
+		}
+		
 		$logRow = $this->Database->habits_log()->createRow(array(
 			'habit_id' => $habitId,
 			'tracked_time' => $trackedTime
@@ -52,4 +67,10 @@ class HabitsService extends BaseService
 
 		return true;
 	}
+
+	private function HabitExists($habitId)
+	{
+		$habitRow = $this->Database->habits()->where('id = :1', $habitId)->fetch();
+		return $habitRow !== null;
+	}
 }

services/SessionService.php

@@ -15,7 +15,18 @@ class SessionService extends BaseService
 		}
 		else
 		{
-			return $this->Database->sessions()->where('session_key = :1 AND expires > :2', $sessionKey, time())->count() === 1;
+			$sessionRow = $this->Database->sessions()->where('session_key = :1 AND expires > :2', $sessionKey, date('Y-m-d H:i:s', time()))->fetch();
+			if ($sessionRow !== null)
+			{
+				$sessionRow->update(array(
+					'last_used' => date('Y-m-d H:i:s', time())
+				));
+				return true;
+			}
+			else
+			{
+				return false;
+			}
 		}
 	}
 
@@ -24,11 +35,11 @@ class SessionService extends BaseService
 	 */
 	public function CreateSession()
 	{
-		$newSessionKey = uniqid() . uniqid() . uniqid();
+		$newSessionKey = $this->GenerateSessionKey();
 		
 		$sessionRow = $this->Database->sessions()->createRow(array(
 			'session_key' => $newSessionKey,
-			'expires' => time() + 2592000 //30 days
+			'expires' => date('Y-m-d H:i:s', time() + 2592000) // Default is that sessions expire in 30 days
 		));
 		$sessionRow->save();
 
@@ -39,4 +50,9 @@ class SessionService extends BaseService
 	{
 		$this->Database->sessions()->where('session_key', $sessionKey)->delete();
 	}
+
+	private function GenerateSessionKey()
+	{
+		return RandomString(50);
+	}
 }

services/StockService.php

@@ -22,6 +22,11 @@ class StockService extends BaseService
 
 	public function GetProductDetails(int $productId)
 	{
+		if (!$this->ProductExists($productId))
+		{
+			throw new \Exception('Product does not exist');
+		}
+
 		$product = $this->Database->products($productId);
 		$productStockAmount = $this->Database->stock()->where('product_id', $productId)->sum('amount');
 		$productLastPurchased = $this->Database->stock_log()->where('product_id', $productId)->where('transaction_type', self::TRANSACTION_TYPE_PURCHASE)->max('purchased_date');
@@ -41,6 +46,11 @@ class StockService extends BaseService
 
 	public function AddProduct(int $productId, int $amount, string $bestBeforeDate, $transactionType)
 	{
+		if (!$this->ProductExists($productId))
+		{
+			throw new \Exception('Product does not exist');
+		}
+
 		if ($transactionType === self::TRANSACTION_TYPE_CONSUME || $transactionType === self::TRANSACTION_TYPE_PURCHASE || $transactionType === self::TRANSACTION_TYPE_INVENTORY_CORRECTION)
 		{
 			$stockId = uniqid();
@@ -68,12 +78,17 @@ class StockService extends BaseService
 		}
 		else
 		{
-			throw new Exception("Transaction type $transactionType is not valid (StockService.AddProduct)");
+			throw new \Exception("Transaction type $transactionType is not valid (StockService.AddProduct)");
 		}
 	}
 
 	public function ConsumeProduct(int $productId, int $amount, bool $spoiled, $transactionType)
 	{
+		if (!$this->ProductExists($productId))
+		{
+			throw new \Exception('Product does not exist');
+		}
+
 		if ($transactionType === self::TRANSACTION_TYPE_CONSUME || $transactionType === self::TRANSACTION_TYPE_PURCHASE || $transactionType === self::TRANSACTION_TYPE_INVENTORY_CORRECTION)
 		{
 			$productStockAmount = $this->Database->stock()->where('product_id', $productId)->sum('amount');
@@ -141,6 +156,11 @@ class StockService extends BaseService
 
 	public function InventoryProduct(int $productId, int $newAmount, string $bestBeforeDate)
 	{
+		if (!$this->ProductExists($productId))
+		{
+			throw new \Exception('Product does not exist');
+		}
+		
 		$productStockAmount = $this->Database->stock()->where('product_id', $productId)->sum('amount');
 
 		if ($newAmount > $productStockAmount)
@@ -182,4 +202,50 @@ class StockService extends BaseService
 			}
 		}
 	}
+
+	private function ProductExists($productId)
+	{
+		$productRow = $this->Database->products()->where('id = :1', $productId)->fetch();
+		return $productRow !== null;
+	}
+
+	private function LoadBarcodeLookupPlugin()
+	{
+		$pluginName = defined('STOCK_BARCODE_LOOKUP_PLUGIN') ? STOCK_BARCODE_LOOKUP_PLUGIN : '';
+		if (empty($pluginName))
+		{
+			throw new \Exception('No barcode lookup plugin defined');
+		}
+
+		$path = __DIR__ . "/../data/plugins/$pluginName.php";
+		if (file_exists($path))
+		{
+			require_once $path;
+			return new $pluginName($this->Database->locations()->fetchAll(), $this->Database->quantity_units()->fetchAll());
+		}
+		else
+		{
+			throw new \Exception("Plugin $pluginName was not found");
+		}
+	}
+
+	public function ExternalBarcodeLookup($barcode, $addFoundProduct)
+	{
+		$plugin = $this->LoadBarcodeLookupPlugin();
+		$pluginOutput = $plugin->Lookup($barcode);
+
+		if ($pluginOutput !== null) // Lookup was successful
+		{
+			if ($addFoundProduct === true)
+			{
+				// Add product to database and include new product id in output
+				$newRow = $this->Database->products()->createRow($pluginOutput);
+				$newRow->save();
+
+				$pluginOutput['id'] = $newRow->id;
+			}
+		}
+
+		return $pluginOutput;
+	}
 }

version.json

@@ -0,0 +1,4 @@
+{
+	"Version": "1.13.0",
+	"ReleaseDate": "2018-07-12"
+}

version.txt

@@ -1 +0,0 @@
-1.8.1

views/batteries.blade.php

@@ -5,17 +5,27 @@
 @section('viewJsName', 'batteries')
 
 @section('content')
-<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
+<div class="row">
+	<div class="col">
+		<h1>
+			@yield('title')
+			<a class="btn btn-outline-dark" href="{{ $U('/battery/new') }}">
+				<i class="fas fa-plus"></i>&nbsp;{{ $L('Add') }}
+			</a>
+		</h1>
+	</div>
+</div>
 
-	<h1 class="page-header">
-		@yield('title')
-		<a class="btn btn-default" href="/battery/new" role="button">
-			<i class="fa fa-plus"></i>&nbsp;{{ $L('Add') }}
-		</a>
-	</h1>
+<div class="row mt-3">
+	<div class="col-xs-12 col-md-6 col-xl-3">
+		<label for="search"><i class="fas fa-search"></i> {{ $L('Search') }}</label>
+		<input type="text" class="form-control" id="search">
+	</div>
+</div>
 
-	<div class="table-responsive">
-		<table id="batteries-table" class="table table-striped">
+<div class="row">
+	<div class="col">
+		<table id="batteries-table" class="table table-sm table-striped dt-responsive">
 			<thead>
 				<tr>
 					<th>#</th>
@@ -28,11 +38,11 @@
 				@foreach($batteries as $battery)
 				<tr>
 					<td class="fit-content">
-						<a class="btn btn-info" href="/battery/{{ $battery->id }}" role="button">
-							<i class="fa fa-pencil"></i>
+						<a class="btn btn-info btn-sm" href="{{ $U('/battery/') }}{{ $battery->id }}">
+							<i class="fas fa-edit"></i>
 						</a>
-						<a class="btn btn-danger battery-delete-button" href="#" role="button" data-battery-id="{{ $battery->id }}" data-battery-name="{{ $battery->name }}">
-							<i class="fa fa-trash"></i>
+						<a class="btn btn-danger btn-sm battery-delete-button" href="#" data-battery-id="{{ $battery->id }}" data-battery-name="{{ $battery->name }}">
+							<i class="fas fa-trash"></i>
 						</a>
 					</td>
 					<td>
@@ -49,6 +59,5 @@
 			</tbody>
 		</table>
 	</div>
-
 </div>
 @stop

views/batteriesoverview.blade.php

@@ -4,15 +4,32 @@
 @section('activeNav', 'batteriesoverview')
 @section('viewJsName', 'batteriesoverview')
 
+@push('pageScripts')
+	<script src="{{ $U('/node_modules/jquery-ui-dist/jquery-ui.min.js?v=', true) }}{{ $version }}"></script>
+@endpush
+
 @section('content')
-<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
+<div class="row">
+	<div class="col">
+		<h1>@yield('title')</h1>
+		<p class="btn btn-lg btn-warning no-real-button responsive-button mr-2">{{ $L('#1 batteries are due to be charged within the next #2 days', $countDueNextXDays, $nextXDays) }}</p>
+		<p class="btn btn-lg btn-danger no-real-button responsive-button">{{ $L('#1 batteries are overdue to be charged', $countOverdue) }}</p>
+	</div>
+</div>
 
-	<h1 class="page-header">@yield('title')</h1>
+<div class="row mt-3">
+	<div class="col-xs-12 col-md-6 col-xl-3">
+		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
+		<input type="text" class="form-control" id="search">
+	</div>
+</div>
 
-	<div class="table-responsive">
-		<table id="batteries-overview-table" class="table table-striped">
+<div class="row">
+	<div class="col">
+		<table id="batteries-overview-table" class="table table-sm table-striped dt-responsive">
 			<thead>
 				<tr>
+					<th>#</th>
 					<th>{{ $L('Battery') }}</th>
 					<th>{{ $L('Last charged') }}</th>
 					<th>{{ $L('Next planned charge cycle') }}</th>
@@ -20,13 +37,20 @@
 			</thead>
 			<tbody>
 				@foreach($current as $curentBatteryEntry)
-				<tr class="@if(FindObjectInArrayByPropertyValue($batteries, 'id', $curentBatteryEntry->battery_id)->charge_interval_days > 0 && $nextChargeTimes[$curentBatteryEntry->battery_id] < date('Y-m-d H:i:s')) error-bg @endif">
+				<tr class="@if(FindObjectInArrayByPropertyValue($batteries, 'id', $curentBatteryEntry->battery_id)->charge_interval_days > 0 && $nextChargeTimes[$curentBatteryEntry->battery_id] < date('Y-m-d H:i:s')) table-danger @endif">
+					<td class="fit-content">
+						<a class="btn btn-success btn-sm track-charge-cycle-button" href="#" title="{{ $L('Track charge cycle of battery #1', FindObjectInArrayByPropertyValue($batteries, 'id', $curentBatteryEntry->battery_id)->name) }}"
+							data-battery-id="{{ $curentBatteryEntry->battery_id }}"
+							data-battery-name="{{ FindObjectInArrayByPropertyValue($batteries, 'id', $curentBatteryEntry->battery_id)->name }}">
+							<i class="fas fa-fire"></i>
+						</a>
+					</td>
 					<td>
 						{{ FindObjectInArrayByPropertyValue($batteries, 'id', $curentBatteryEntry->battery_id)->name }}
 					</td>
 					<td>
-						{{ $curentBatteryEntry->last_tracked_time }}
-						<time class="timeago timeago-contextual" datetime="{{ $curentBatteryEntry->last_tracked_time }}"></time>
+						<span id="battery-{{ $curentBatteryEntry->battery_id }}-last-tracked-time">{{ $curentBatteryEntry->last_tracked_time }}</span>
+						<time id="battery-{{ $curentBatteryEntry->battery_id }}-last-tracked-time-timeago" class="timeago timeago-contextual" datetime="{{ $curentBatteryEntry->last_tracked_time }}"></time>
 					</td>
 					<td>
 						@if(FindObjectInArrayByPropertyValue($batteries, 'id', $curentBatteryEntry->battery_id)->charge_interval_days > 0)
@@ -41,6 +65,5 @@
 			</tbody>
 		</table>
 	</div>
-
 </div>
 @stop

views/batteryform.blade.php

@@ -9,37 +9,37 @@
 @section('viewJsName', 'batteryform')
 
 @section('content')
-<div class="col-sm-3 col-sm-offset-3 col-md-4 col-md-offset-2">
+<div class="row">
+	<div class="col-lg-6 col-xs-12">
+		<h1>@yield('title')</h1>
 
-	<h1 class="page-header">@yield('title')</h1>
+		<script>Grocy.EditMode = '{{ $mode }}';</script>
 
-	<script>Grocy.EditMode = '{{ $mode }}';</script>
+		@if($mode == 'edit')
+			<script>Grocy.EditObjectId = {{ $battery->id }}</script>
+		@endif
 
-	@if($mode == 'edit')
-		<script>Grocy.EditObjectId = {{ $battery->id }}</script>
-	@endif
+		<form id="battery-form" novalidate>
 
-	<form id="battery-form">
+			<div class="form-group">
+				<label for="name">{{ $L('Name') }}</label>
+				<input type="text" class="form-control" required id="name" name="name" value="@if($mode == 'edit'){{ $battery->name }}@endif">
+				<div class="invalid-feedback">{{ $L('A name is required') }}</div>
+			</div>
 
-		<div class="form-group">
-			<label for="name">{{ $L('Name') }}</label>
-			<input type="text" class="form-control" required id="name" name="name" value="@if($mode == 'edit'){{ $battery->name }}@endif">
-			<div class="help-block with-errors"></div>
-		</div>
+			<div class="form-group">
+				<label for="description">{{ $L('Description') }}</label>
+				<input type="text" class="form-control" id="description" name="description" value="@if($mode == 'edit'){{ $battery->description }}@endif">
+			</div>
 
-		<div class="form-group">
-			<label for="description">{{ $L('Description') }}</label>
-			<input type="text" class="form-control" id="description" name="description" value="@if($mode == 'edit'){{ $battery->description }}@endif">
-		</div>
+			<div class="form-group">
+				<label for="name">{{ $L('Used in') }}</label>
+				<input type="text" class="form-control" id="used_in" name="used_in" value="@if($mode == 'edit'){{ $battery->used_in }}@endif">
+			</div>
 
-		<div class="form-group">
-			<label for="name">{{ $L('Used in') }}</label>
-			<input type="text" class="form-control" id="used_in" name="used_in" value="@if($mode == 'edit'){{ $battery->used_in }}@endif">
-		</div>
-
-		<button id="save-battery-button" type="submit" class="btn btn-default">{{ $L('Save') }}</button>
-
-	</form>
+			<button id="save-battery-button" type="submit" class="btn btn-success">{{ $L('Save') }}</button>
 
+		</form>
+	</div>
 </div>
 @stop

views/batterytracking.blade.php

@@ -5,41 +5,40 @@
 @section('viewJsName', 'batterytracking')
 
 @section('content')
-<div class="col-sm-3 col-sm-offset-3 col-md-3 col-md-offset-2">
+<div class="row">
+	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
+		<h1>@yield('title')</h1>
 
-	<h1 class="page-header">@yield('title')</h1>
+		<form id="batterytracking-form" novalidate>
 
-	<form id="batterytracking-form">
-
-		<div class="form-group">
-			<label for="battery_id">{{ $L('Battery') }}</label>
-			<select class="form-control combobox" id="battery_id" name="battery_id" required>
-				<option value=""></option>
-				@foreach($batteries as $battery)
-					<option value="{{ $battery->id }}">{{ $battery->name }}</option>
-				@endforeach
-			</select>
-			<div id="battery-error" class="help-block with-errors"></div>
-		</div>
-
-		<div class="form-group">
-			<label for="tracked_time">{{ $L('Tracked time') }}</label>
-			<div class="input-group date datetimepicker">
-				<input type="text" class="form-control" id="tracked_time" name="tracked_time" required >
-				<span class="input-group-addon">
-					<span class="fa fa-calendar"></span>
-				</span>
+			<div class="form-group">
+				<label for="battery_id">{{ $L('Battery') }}</label>
+				<select class="form-control combobox" id="battery_id" name="battery_id" required>
+					<option value=""></option>
+					@foreach($batteries as $battery)
+						<option value="{{ $battery->id }}">{{ $battery->name }}</option>
+					@endforeach
+				</select>
+				<div class="invalid-feedback">{{ $L('You have to select a battery') }}</div>
 			</div>
-			<div class="help-block with-errors"></div>
-		</div>
 
-		<button id="save-batterytracking-button" type="submit" class="btn btn-default">{{ $L('OK') }}</button>
+			@include('components.datetimepicker', array(
+				'id' => 'tracked_time',
+				'label' => 'Tracked time',
+				'format' => 'YYYY-MM-DD HH:mm:ss',
+				'initWithNow' => true,
+				'limitEndToNow' => true,
+				'limitStartToNow' => false,
+				'invalidFeedback' => $L('This can only be before now')
+			))
 
-	</form>
+			<button id="save-batterytracking-button" type="submit" class="btn btn-success">{{ $L('OK') }}</button>
 
-</div>
+		</form>
+	</div>
 
-<div class="col-sm-6 col-md-5 col-lg-3">
-	@include('components.batterycard')
+	<div class="col-xs-12 col-md-6 col-xl-4">
+		@include('components.batterycard')
+	</div>
 </div>
 @stop

views/components/batterycard.blade.php

@@ -1,15 +1,15 @@
 @push('componentScripts')
-	<script src="{{ $U('/viewjs/components/batterycard.js') }}?v={{ $version }}"></script>
+	<script src="{{ $U('/viewjs/components/batterycard.js', true) }}?v={{ $version }}"></script>
 @endpush
 
-<div class="main well">
-
-	<h3>{{ $L('Battery overview') }} <strong><span id="batterycard-battery-name"></span></strong></h3>
-
-	<p>
+<div class="card">
+	<div class="card-header">
+		<i class="fas fa-battery-three-quarters"></i> {{ $L('Battery overview') }}
+	</div>
+	<div class="card-body">
+		<h3><span id="batterycard-battery-name"></span></h3>
 		<strong>{{ $L('Used in') }}:</strong> <span id="batterycard-battery-used_in"></span><br>
 		<strong>{{ $L('Charge cycles count') }}:</strong> <span id="batterycard-battery-charge-cycles-count"></span><br>
 		<strong>{{ $L('Last charged') }}:</strong> <span id="batterycard-battery-last-charged"></span> <time id="batterycard-battery-last-charged-timeago" class="timeago timeago-contextual"></time><br>
-	</p>
-	
+	</div>
 </div>

views/components/datepicker.blade.php

@@ -1,14 +0,0 @@
-@push('componentScripts')
-	<script src="{{ $U('/viewjs/components/datepicker.js') }}?v={{ $version }}"></script>
-@endpush
-
-<div class="form-group">
-	<label for="{{ $id }}">{{ $L($label) }}&nbsp;&nbsp;<span class="small text-muted"><time id="datepicker-timeago" class="timeago timeago-contextual"></time>@if(!empty($hint))<br>{{ $L($hint) }}@endif</span></label>
-	<div class="input-group date">
-		<input type="text" data-isodate="isodate" class="form-control datepicker" id="{{ $id }}" name="{{ $id }}" required autocomplete="off">
-		<div id="datepicker-button" class="input-group-addon">
-			<i class="fa fa-calendar"></i>
-		</div>
-	</div>
-	<div class="help-block with-errors"></div>
-</div>

views/components/datetimepicker.blade.php

@@ -1,14 +1,19 @@
 @push('componentScripts')
-	<script src="{{ $U('/viewjs/components/datetimepicker.js') }}?v={{ $version }}"></script>
+	<script src="{{ $U('/viewjs/components/datetimepicker.js', true) }}?v={{ $version }}"></script>
 @endpush
 
 <div class="form-group">
-<label for="{{ $id }}">{{ $L($label) }}</label>
-	<div class="input-group date datetimepicker">
-		<input type="text" class="form-control" id="{{ $id }}" name="{{ $id }}" required>
-		<span class="input-group-addon">
-			<span class="fa fa-calendar"></span>
-		</span>
+	<label for="{{ $id }}">{{ $L($label) }}&nbsp;&nbsp;<span class="small text-muted"><time id="datetimepicker-timeago" class="timeago timeago-contextual"></time>@if(!empty($hint))<br>{{ $L($hint) }}@endif</span></label>
+	<div class="input-group date datetimepicker" id="{{ $id }}" data-target-input="nearest">
+		<input type="text" required class="form-control datetimepicker-input"
+			data-target="#{{ $id }}" data-format="{{ $format }}"
+			data-init-with-now="{{ BoolToString($initWithNow) }}"
+			data-limit-end-to-now="{{ BoolToString($limitEndToNow) }}"
+			data-limit-start-to-now="{{ BoolToString($limitStartToNow) }}"
+			data-next-input-selector="{{ $nextInputSelector }}" />
+		<div class="input-group-append" data-target="#{{ $id }}" data-toggle="datetimepicker">
+			<div class="input-group-text"><i class="fas fa-calendar"></i></div>
+		</div>
+		<div class="invalid-feedback">{{ $invalidFeedback }}</div>
 	</div>
-	<div class="help-block with-errors"></div>
 </div>

views/components/habitcard.blade.php

@@ -1,14 +1,14 @@
 @push('componentScripts')
-	<script src="{{ $U('/viewjs/components/habitcard.js') }}?v={{ $version }}"></script>
+	<script src="{{ $U('/viewjs/components/habitcard.js', true) }}?v={{ $version }}"></script>
 @endpush
 
-<div class="main well">
-
-	<h3>{{ $L('Habit overview') }} <strong><span id="habitcard-habit-name"></span></strong></h3>
-
-	<p>
+<div class="card">
+	<div class="card-header">
+		<i class="fas fa-refresh"></i> {{ $L('Habit overview') }}
+	</div>
+	<div class="card-body">
+		<h3><span id="habitcard-habit-name"></span></h3>
 		<strong>{{ $L('Tracked count') }}:</strong> <span id="habitcard-habit-tracked-count"></span><br>
 		<strong>{{ $L('Last tracked') }}:</strong> <span id="habitcard-habit-last-tracked"></span> <time id="habitcard-habit-last-tracked-timeago" class="timeago timeago-contextual"></time><br>
-	</p>
-	
+	</div>
 </div>

views/components/productcard.blade.php

@@ -1,16 +1,16 @@
 @push('componentScripts')
-	<script src="{{ $U('/viewjs/components/productcard.js') }}?v={{ $version }}"></script>
+	<script src="{{ $U('/viewjs/components/productcard.js', true) }}?v={{ $version }}"></script>
 @endpush
 
-<div class="main well">
-
-	<h3>{{ $L('Product overview') }} <strong><span id="productcard-product-name"></span></strong></h3>
-	<h4><strong>{{ $L('Stock quantity unit') }}:</strong> <span id="productcard-product-stock-qu-name"></span></h4>
-
-	<p>
+<div class="card">
+	<div class="card-header">
+		<i class="fab fa-product-hunt"></i> {{ $L('Product overview') }}
+	</div>
+	<div class="card-body">
+		<h3><span id="productcard-product-name"></span></h3>
+		<strong>{{ $L('Stock quantity unit') }}:</strong> <span id="productcard-product-stock-qu-name"></span><br>
 		<strong>{{ $L('Stock amount') }}:</strong> <span id="productcard-product-stock-amount"></span> <span id="productcard-product-stock-qu-name2"></span><br>
 		<strong>{{ $L('Last purchased') }}:</strong> <span id="productcard-product-last-purchased"></span> <time id="productcard-product-last-purchased-timeago" class="timeago timeago-contextual"></time><br>
 		<strong>{{ $L('Last used') }}:</strong> <span id="productcard-product-last-used"></span> <time id="productcard-product-last-used-timeago" class="timeago timeago-contextual"></time>
-	</p>
-	
+	</div>
 </div>

views/consume.blade.php

@@ -5,42 +5,42 @@
 @section('viewJsName', 'consume')
 
 @section('content')
-<div class="col-sm-3 col-sm-offset-3 col-md-3 col-md-offset-2">
+<div class="row">
+	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
+		<h1>@yield('title')</h1>
 
-	<h1 class="page-header">@yield('title')</h1>
+		<form id="consume-form" novalidate>
 
-	<form id="consume-form">
+			<div class="form-group">
+				<label for="product_id">{{ $L('Product') }}&nbsp;&nbsp;<i class="fas fa-barcode"></i></label>
+				<select class="form-control combobox" id="product_id" name="product_id" required>
+					<option value=""></option>
+					@foreach($products as $product)
+						<option data-additional-searchdata="{{ $product->barcode }}" value="{{ $product->id }}">{{ $product->name }}</option>
+					@endforeach
+				</select>
+				<div id="product-error" class="invalid-feedback">{{ $L('You have to select a product') }}</div>
+			</div>
 
-		<div class="form-group">
-			<label for="product_id">{{ $L('Product') }}&nbsp;&nbsp;<i class="fa fa-barcode"></i></label>
-			<select class="form-control combobox" id="product_id" name="product_id" required>
-				<option value=""></option>
-				@foreach($products as $product)
-					<option data-additional-searchdata="{{ $product->barcode }}" value="{{ $product->id }}">{{ $product->name }}</option>
-				@endforeach
-			</select>
-			<div id="product-error" class="help-block with-errors"></div>
-		</div>
+			<div class="form-group">
+				<label for="amount">{{ $L('Amount') }}&nbsp;&nbsp;<span id="amount_qu_unit" class="small text-muted"></span></label>
+				<input type="number" class="form-control" id="amount" name="amount" value="1" min="1" required>
+				<div class="invalid-feedback">{{ $L('The amount cannot be lower than #1', '0') }}</div>
+			</div>
 
-		<div class="form-group">
-			<label for="amount">{{ $L('Amount') }}&nbsp;&nbsp;<span id="amount_qu_unit" class="small text-muted"></span></label>
-			<input type="number" class="form-control" id="amount" name="amount" value="1" min="1" required>
-			<div class="help-block with-errors"></div>
-		</div>
+			<div class="checkbox">
+				<label for="spoiled">
+					<input type="checkbox" id="spoiled" name="spoiled"> {{ $L('Spoiled') }}
+				</label>
+			</div>
 
-		<div class="checkbox">
-			<label for="spoiled">
-				<input type="checkbox" id="spoiled" name="spoiled"> {{ $L('Spoiled') }}
-			</label>
-		</div>
+			<button id="save-consume-button" type="submit" class="btn btn-success">{{ $L('OK') }}</button>
 
-		<button id="save-consume-button" type="submit" class="btn btn-default">{{ $L('OK') }}</button>
+		</form>
+	</div>
 
-	</form>
-
-</div>
-
-<div class="col-sm-6 col-md-5 col-lg-3">
-	@include('components.productcard')
+	<div class="col-xs-12 col-md-6 col-xl-4">
+		@include('components.productcard')
+	</div>
 </div>
 @stop

views/habitform.blade.php

@@ -9,50 +9,50 @@
 @section('viewJsName', 'habitform')
 
 @section('content')
-<div class="col-sm-3 col-sm-offset-3 col-md-4 col-md-offset-2">
+<div class="row">
+	<div class="col-lg-6 col-xs-12">
+		<h1>@yield('title')</h1>
 
-	<h1 class="page-header">@yield('title')</h1>
+		<script>Grocy.EditMode = '{{ $mode }}';</script>
 
-	<script>Grocy.EditMode = '{{ $mode }}';</script>
+		@if($mode == 'edit')
+			<script>Grocy.EditObjectId = {{ $habit->id }};</script>
+		@endif
 
-	@if($mode == 'edit')
-		<script>Grocy.EditObjectId = {{ $habit->id }};</script>
-	@endif
+		<form id="habit-form" novalidate>
 
-	<form id="habit-form">
+			<div class="form-group">
+				<label for="name">{{ $L('Name') }}</label>
+				<input type="text" class="form-control" required id="name" name="name" value="@if($mode == 'edit'){{ $habit->name }}@endif">
+				<div class="invalid-feedback">{{ $L('A name is required') }}</div>
+			</div>
 
-		<div class="form-group">
-			<label for="name">{{ $L('Name') }}</label>
-			<input type="text" class="form-control" required id="name" name="name" value="@if($mode == 'edit'){{ $habit->name }}@endif">
-			<div class="help-block with-errors"></div>
-		</div>
+			<div class="form-group">
+				<label for="description">{{ $L('Description') }}</label>
+				<textarea class="form-control" rows="2" id="description" name="description">@if($mode == 'edit'){{ $habit->description }}@endif</textarea>
+			</div>
 
-		<div class="form-group">
-			<label for="description">{{ $L('Description') }}</label>
-			<textarea class="form-control" rows="2" id="description" name="description">@if($mode == 'edit'){{ $habit->description }}@endif</textarea>
-		</div>
+			<div class="form-group">
+				<label for="period_type">{{ $L('Period type') }}</label>
+				<select required class="form-control input-group-habit-period-type" id="period_type" name="period_type">
+					@foreach($periodTypes as $periodType)
+						<option @if($mode == 'edit' && $periodType == $habit->period_type) selected="selected" @endif value="{{ $periodType }}">{{ $L($periodType) }}</option>
+					@endforeach
+				</select>
+				<div class="invalid-feedback">{{ $L('A period type is required') }}</div>
+			</div>
 
-		<div class="form-group">
-			<label for="period_type">{{ $L('Period type') }}</label>
-			<select required class="form-control input-group-habit-period-type" id="period_type" name="period_type">
-				@foreach($periodTypes as $periodType)
-					<option @if($mode == 'edit' && $periodType == $habit->period_type) selected="selected" @endif value="{{ $periodType }}">{{ $L($periodType) }}</option>
-				@endforeach
-			</select>
-			<div class="help-block with-errors"></div>
-		</div>
+			<div class="form-group">
+				<label for="period_days">{{ $L('Period days') }}</label>
+				<input type="number" class="form-control input-group-habit-period-type" id="period_days" name="period_days" min="0" value="@if($mode == 'edit'){{ $habit->period_days }}@endif">
+				<div class="invalid-feedback">{{ $L('This cannot be negative') }}</div>
+			</div>
 
-		<div class="form-group">
-			<label for="period_days">{{ $L('Period days') }}</label>
-			<input type="number" class="form-control input-group-habit-period-type" id="period_days" name="period_days" value="@if($mode == 'edit'){{ $habit->period_days }}@endif">
-			<div class="help-block with-errors"></div>
-		</div>
+			<p id="habit-period-type-info" class="form-text text-muted small d-none"></p>
 
-		<p id="habit-period-type-info" class="help-block text-muted"></p>
-
-		<button id="save-habit-button" type="submit" class="btn btn-default">{{ $L('Save') }}</button>
-
-	</form>
+			<button id="save-habit-button" type="submit" class="btn btn-success">{{ $L('Save') }}</button>
 
+		</form>
+	</div>
 </div>
 @stop

views/habits.blade.php

@@ -5,54 +5,63 @@
 @section('viewJsName', 'habits')
 
 @section('content')
-<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
+<div class="row">
+	<div class="col">
+		<h1>
+			@yield('title')
+			<a class="btn btn-outline-dark" href="{{ $U('/habit/new') }}">
+				<i class="fas fa-plus"></i>&nbsp;{{ $L('Add') }}
+			</a>
+		</h1>
+	</div>
+</div>
 
-	<h1 class="page-header">
-		@yield('title')
-		<a class="btn btn-default" href="/habit/new" role="button">
-			<i class="fa fa-plus"></i>&nbsp;{{ $L('Add') }}
-		</a>
-	</h1>
+<div class="row mt-3">
+	<div class="col-xs-12 col-md-6 col-xl-3">
+		<label for="search"><i class="fas fa-search"></i> {{ $L('Search') }}</label>
+		<input type="text" class="form-control" id="search">
+	</div>
+</div>
 
-	<div class="table-responsive">
-		<table id="habits-table" class="table table-striped">
-			<thead>
-				<tr>
-					<th>#</th>
-					<th>{{ $L('Name') }}</th>
-					<th>{{ $L('Period type') }}</th>
-					<th>{{ $L('Period days') }}</th>
-					<th>{{ $L('Description') }}</th>
-				</tr>
-			</thead>
-			<tbody>
-				@foreach($habits as $habit)
-				<tr>
-					<td class="fit-content">
-						<a class="btn btn-info" href="/habit/{{ $habit->id }}" role="button">
-							<i class="fa fa-pencil"></i>
-						</a>
-						<a class="btn btn-danger habit-delete-button" href="#" role="button" data-habit-id="{{ $habit->id }}" data-habit-name="{{ $habit->name }}">
-							<i class="fa fa-trash"></i>
-						</a>
-					</td>
-					<td>
-						{{ $habit->name }}
-					</td>
-					<td>
-						{{ $L($habit->period_type) }}
-					</td>
-					<td>
-						{{ $habit->period_days }}
-					</td>
-					<td>
-						{{ $habit->description }}
-					</td>
-				</tr>
-				@endforeach
-			</tbody>
+<div class="row">
+	<div class="col">
+		<table id="habits-table" class="table table-sm table-striped dt-responsive">
+		<thead>
+			<tr>
+				<th>#</th>
+				<th>{{ $L('Name') }}</th>
+				<th>{{ $L('Period type') }}</th>
+				<th>{{ $L('Period days') }}</th>
+				<th>{{ $L('Description') }}</th>
+			</tr>
+		</thead>
+		<tbody>
+			@foreach($habits as $habit)
+			<tr>
+				<td class="fit-content">
+					<a class="btn btn-info btn-sm" href="{{ $U('/habit/') }}{{ $habit->id }}">
+						<i class="fas fa-edit"></i>
+					</a>
+					<a class="btn btn-danger btn-sm habit-delete-button" href="#" data-habit-id="{{ $habit->id }}" data-habit-name="{{ $habit->name }}">
+						<i class="fas fa-trash"></i>
+					</a>
+				</td>
+				<td>
+					{{ $habit->name }}
+				</td>
+				<td>
+					{{ $L($habit->period_type) }}
+				</td>
+				<td>
+					{{ $habit->period_days }}
+				</td>
+				<td>
+					{{ $habit->description }}
+				</td>
+			</tr>
+			@endforeach
+		</tbody>
 		</table>
 	</div>
-
 </div>
 @stop

views/habitsoverview.blade.php

@@ -4,15 +4,32 @@
 @section('activeNav', 'habitsoverview')
 @section('viewJsName', 'habitsoverview')
 
+@push('pageScripts')
+	<script src="{{ $U('/node_modules/jquery-ui-dist/jquery-ui.min.js?v=', true) }}{{ $version }}"></script>
+@endpush
+
 @section('content')
-<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
+<div class="row">
+	<div class="col">
+		<h1>@yield('title')</h1>
+		<p class="btn btn-lg btn-warning no-real-button responsive-button mr-2">{{ $L('#1 habits are due to be done within the next #2 days', $countDueNextXDays, $nextXDays) }}</p>
+		<p class="btn btn-lg btn-danger no-real-button responsive-button">{{ $L('#1 habits are overdue to be done', $countOverdue) }}</p>
+	</div>
+</div>
 
-	<h1 class="page-header">@yield('title')</h1>
+<div class="row mt-3">
+	<div class="col-xs-12 col-md-6 col-xl-3">
+		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
+		<input type="text" class="form-control" id="search">
+	</div>
+</div>
 
-	<div class="table-responsive">
-		<table id="habits-overview-table" class="table table-striped">
+<div class="row">
+	<div class="col">
+		<table id="habits-overview-table" class="table table-sm table-striped dt-responsive">
 			<thead>
 				<tr>
+					<th>#</th>
 					<th>{{ $L('Habit') }}</th>
 					<th>{{ $L('Next estimated tracking') }}</th>
 					<th>{{ $L('Last tracked') }}</th>
@@ -20,7 +37,14 @@
 			</thead>
 			<tbody>
 				@foreach($currentHabits as $curentHabitEntry)
-				<tr class="@if(FindObjectInArrayByPropertyValue($habits, 'id', $curentHabitEntry->habit_id)->period_type === \Grocy\Services\HabitsService::HABIT_TYPE_DYNAMIC_REGULAR && $nextHabitTimes[$curentHabitEntry->habit_id] < date('Y-m-d H:i:s')) error-bg @endif">
+				<tr class="@if(FindObjectInArrayByPropertyValue($habits, 'id', $curentHabitEntry->habit_id)->period_type === \Grocy\Services\HabitsService::HABIT_TYPE_DYNAMIC_REGULAR && $nextHabitTimes[$curentHabitEntry->habit_id] < date('Y-m-d H:i:s')) table-danger @endif">
+					<td class="fit-content">
+						<a class="btn btn-success btn-sm track-habit-button" href="#" title="{{ $L('Track execution of habit #1', FindObjectInArrayByPropertyValue($habits, 'id', $curentHabitEntry->habit_id)->name) }}"
+							data-habit-id="{{ $curentHabitEntry->habit_id }}"
+							data-habit-name="{{ FindObjectInArrayByPropertyValue($habits, 'id', $curentHabitEntry->habit_id)->name }}">
+							<i class="fas fa-play"></i>
+						</a>
+					</td>
 					<td>
 						{{ FindObjectInArrayByPropertyValue($habits, 'id', $curentHabitEntry->habit_id)->name }}
 					</td>
@@ -33,14 +57,13 @@
 						@endif
 					</td>
 					<td>
-						{{ $curentHabitEntry->last_tracked_time }}
-						<time class="timeago timeago-contextual" datetime="{{ $curentHabitEntry->last_tracked_time }}"></time>
+						<span id="habit-{{ $curentHabitEntry->habit_id }}-last-tracked-time">{{ $curentHabitEntry->last_tracked_time }}</span>
+						<time id="habit-{{ $curentHabitEntry->habit_id }}-last-tracked-time-timeago" class="timeago timeago-contextual" datetime="{{ $curentHabitEntry->last_tracked_time }}"></time>
 					</td>
 				</tr>
 				@endforeach
 			</tbody>
 		</table>
 	</div>
-
 </div>
 @stop

views/habittracking.blade.php

@@ -5,35 +5,40 @@
 @section('viewJsName', 'habittracking')
 
 @section('content')
-<div class="col-sm-3 col-sm-offset-3 col-md-3 col-md-offset-2">
+<div class="row">
+	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
+		<h1>@yield('title')</h1>
 
-	<h1 class="page-header">@yield('title')</h1>
+		<form id="habittracking-form" novalidate>
 
-	<form id="habittracking-form">
+			<div class="form-group">
+				<label for="habit_id">{{ $L('Habit') }}</label>
+				<select class="form-control combobox" id="habit_id" name="habit_id" required>
+					<option value=""></option>
+					@foreach($habits as $habit)
+						<option value="{{ $habit->id }}">{{ $habit->name }}</option>
+					@endforeach
+				</select>
+				<div class="invalid-feedback">{{ $L('You have to select a habit') }}</div>
+			</div>
 
-		<div class="form-group">
-			<label for="habit_id">{{ $L('Habit') }}</label>
-			<select class="form-control combobox" id="habit_id" name="habit_id" required>
-				<option value=""></option>
-				@foreach($habits as $habit)
-					<option value="{{ $habit->id }}">{{ $habit->name }}</option>
-				@endforeach
-			</select>
-			<div id="product-error" class="help-block with-errors"></div>
-		</div>
+			@include('components.datetimepicker', array(
+				'id' => 'tracked_time',
+				'label' => 'Tracked time',
+				'format' => 'YYYY-MM-DD HH:mm:ss',
+				'initWithNow' => true,
+				'limitEndToNow' => true,
+				'limitStartToNow' => false,
+				'invalidFeedback' => $L('This can only be before now')
+			))
 
-		@include('components.datetimepicker', array(
-			'id' => 'tracked_time',
-			'label' => 'Tracked time'
-		))
+			<button id="save-habittracking-button" type="submit" class="btn btn-success">{{ $L('OK') }}</button>
 
-		<button id="save-habittracking-button" type="submit" class="btn btn-default">{{ $L('OK') }}</button>
+		</form>
+	</div>
 
-	</form>
-
-</div>
-
-<div class="col-sm-6 col-md-5 col-lg-3">
-	@include('components.habitcard')
+	<div class="col-xs-12 col-md-6 col-xl-4">
+		@include('components.habitcard')
+	</div>
 </div>
 @stop

views/inventory.blade.php

@@ -5,44 +5,50 @@
 @section('viewJsName', 'inventory')
 
 @section('content')
-<div class="col-sm-4 col-sm-offset-3 col-md-3 col-md-offset-2">
+<div class="row">
+	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
+		<h1>@yield('title')</h1>
 
-	<h1 class="page-header">@yield('title')</h1>
+		<form id="inventory-form" novalidate>
 
-	<form id="inventory-form">
+			<div class="form-group">
+				<label for="product_id">{{ $L('Product') }}&nbsp;&nbsp;<i class="fas fa-barcode"></i><span id="barcode-lookup-disabled-hint" class="small text-muted d-none">&nbsp;&nbsp;{{ $L('Barcode lookup is disabled') }}</span></label>
+				<select class="form-control combobox" id="product_id" name="product_id" required>
+					<option value=""></option>
+					@foreach($products as $product)
+						<option data-additional-searchdata="{{ $product->barcode }}" value="{{ $product->id }}">{{ $product->name }}</option>
+					@endforeach
+				</select>
+				<div class="invalid-feedback">{{ $L('You have to select a product') }}</div>
+				<div id="flow-info-addbarcodetoselection" class="form-text text-muted small d-none"><strong><span id="addbarcodetoselection"></span></strong> {{ $L('will be added to the list of barcodes for the selected product on submit') }}</div>
+			</div>
 
-		<div class="form-group">
-			<label for="product_id">{{ $L('Product') }}&nbsp;&nbsp;<i class="fa fa-barcode"></i><span id="barcode-lookup-disabled-hint" class="small text-muted hide">&nbsp;&nbsp;{{ $L('Barcode lookup is disabled') }}</span></label>
-			<select class="form-control combobox" id="product_id" name="product_id" required>
-				<option value=""></option>
-				@foreach($products as $product)
-					<option data-additional-searchdata="{{ $product->barcode }}" value="{{ $product->id }}">{{ $product->name }}</option>
-				@endforeach
-			</select>
-			<div class="help-block with-errors"></div>
-			<div id="flow-info-addbarcodetoselection" class="text-muted small hide"><strong><span id="addbarcodetoselection"></span></strong> {{ $L('will be added to the list of barcodes for the selected product on submit') }}</div>
-		</div>
+			<div class="form-group">
+				<label for="new_amount">{{ $L('New amount') }}&nbsp;&nbsp;<span id="new_amount_qu_unit" class="small text-muted"></span></label>
+				<input type="number" data-notequal="notequal" class="form-control" id="new_amount" name="new_amount" min="0" not-equal="-1" required>
+				<div class="invalid-feedback">{{ $L('The amount cannot be lower than #1', '0') }}</div>
+				<div id="inventory-change-info" class="form-text text-muted small d-none"></div>
+			</div>
+			
+			@include('components.datetimepicker', array(
+				'id' => 'best_before_date',
+				'label' => 'Best before',
+				'hint' => 'This will apply to added products',
+				'format' => 'YYYY-MM-DD',
+				'initWithNow' => false,
+				'limitEndToNow' => false,
+				'limitStartToNow' => true,
+				'invalidFeedback' => $L('A best before date is required and must be later than today'),
+				'nextInputSelector' => '#best_before_date'
+			))
 
-		<div class="form-group">
-			<label for="new_amount">{{ $L('New amount') }}&nbsp;&nbsp;<span id="new_amount_qu_unit" class="small text-muted"></span></label>
-			<input type="number" data-notequal="notequal" class="form-control" id="new_amount" name="new_amount" min="0" not-equal="-1" required>
-			<div class="help-block with-errors"></div>
-			<div id="inventory-change-info" class="help-block text-muted"></div>
-		</div>
+			<button id="save-inventory-button" type="submit" class="btn btn-success">{{ $L('OK') }}</button>
 
-		@include('components.datepicker', array(
-			'id' => 'best_before_date',
-			'label' => 'Best before',
-			'hint' => 'This will apply to added products'
-		))
+		</form>
+	</div>
 
-		<button id="save-inventory-button" type="submit" class="btn btn-default">{{ $L('OK') }}</button>
-
-	</form>
-
-</div>
-
-<div class="col-sm-6 col-md-5 col-lg-3">
-	@include('components.productcard')
+	<div class="col-xs-12 col-md-6 col-xl-4">
+		@include('components.productcard')
+	</div>
 </div>
 @stop

views/layout/default.blade.php

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{ CULTURE }}">
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="x-ua-compatible" content="ie=edge">
@@ -9,21 +9,26 @@
 	<meta name="format-detection" content="telephone=no">
 
 	<meta name="author" content="Bernd Bestel (bernd@berrnd.de)">
-	<link rel="icon" type="image/png" sizes="200x200" href="/img/grocy.png">
+	<link rel="icon" href="{{ $U('/img/grocy_icon.svg?v=', true) }}{{ $version }}">
 
 	<title>@yield('title') | grocy</title>
 
-	<link href="{{ $U('/bower_components/bootstrap/dist/css/bootstrap.min.css?v=') }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/bower_components/font-awesome/css/font-awesome.min.css?v=') }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css?v=') }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/bower_components/bootstrap-combobox/css/bootstrap-combobox.css?v=') }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css?v=') }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/bower_components/datatables.net-responsive-bs/css/responsive.bootstrap.min.css?v=') }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/bower_components/toastr/toastr.min.css?v=') }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/bower_components/tagmanager/tagmanager.css?v=') }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css?v=') }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/components_unmanaged/noto-sans-v6-latin/noto-sans-v6-latin.css?v=') }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/css/grocy.css?v=') }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/node_modules/bootstrap/dist/css/bootstrap.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/node_modules/startbootstrap-sb-admin/css/sb-admin.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/node_modules/@fortawesome/fontawesome-free/css/all.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/node_modules/@danielfarrell/bootstrap-combobox/css/bootstrap-combobox.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/node_modules/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/node_modules/toastr/build/toastr.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/node_modules/tagmanager/tagmanager.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/node_modules/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/components_unmanaged/noto-sans-v6-latin/noto-sans-v6-latin.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/css/grocy.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	@stack('pageStyles')
+
+	@if(file_exists(__DIR__ . '/../../data/custom.css'))
+		@php include __DIR__ . '/../../data/custom.css' @endphp
+	@endif
 
 	<script>
 		var Grocy = { };
@@ -34,213 +39,209 @@
 	</script>
 </head>
 
-<body>
-	<nav class="navbar navbar-default navbar-fixed-top">
-		<div class="container-fluid">
-			<div class="navbar-header">
-				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-mobile" >
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-				</button>
-				<a class="navbar-brand" href="{{ $U('/') }}">grocy</a>
-			</div>
+<body class="fixed-nav">
+	<nav id="mainNav" class="navbar navbar-expand-lg navbar-light fixed-top">
+		<a class="navbar-brand py-0" href="{{ $U('/') }}"><img src="{{ $U('/img/grocy_logo.svg?v=', true) }}{{ $version }}" height="30"></a>
+		
+		<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#sidebarResponsive">
+			<span class="navbar-toggler-icon"></span>
+		</button>
 
-			<div id="navbar" class="navbar-collapse collapse">
-				<ul class="nav navbar-nav navbar-right">
-					<li>
-						<a class="discrete-link logout-button" href="{{ $U('/logout') }}"><i class="fa fa-sign-out fa-fw"></i>&nbsp;{{ $L('Logout') }}</a>
-					</li>
-				</ul>
-			</div>
+		<div id="sidebarResponsive" class="collapse navbar-collapse">
+			<ul class="navbar-nav navbar-sidenav pt-2">
 
-			<div id="navbar-mobile" class="navbar-collapse collapse">
-
-				<ul class="nav navbar-nav navbar-right">
-					<li data-nav-for-page="stockoverview">
-						<a class="discrete-link" href="{{ $U('/stockoverview') }}"><i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Stock overview') }}</a>
-					</li>
-					<li data-nav-for-page="habitsoverview">
-						<a class="discrete-link" href="{{ $U('/habitsoverview') }}"><i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Habits overview') }}</a>
-					</li>
-					<li data-nav-for-page="batteriesoverview">
-						<a class="discrete-link" href="{{ $U('/batteriesoverview') }}"><i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Batteries overview') }}</a>
-					</li>
-				</ul>
-
-				<ul class="nav navbar-nav navbar-right">
-					<li class="disabled"><a href="#"><strong>{{ $L('Record data') }}</strong></a></li>
-					<li data-nav-for-page="purchase">
-						<a class="discrete-link" href="{{ $U('/purchase') }}"><i class="fa fa-shopping-cart fa-fw"></i>&nbsp;{{ $L('Purchase') }}</a>
-					</li>
-					<li data-nav-for-page="consume">
-						<a class="discrete-link" href="{{ $U('/consume') }}"><i class="fa fa-cutlery fa-fw"></i>&nbsp;{{ $L('Consume') }}</a>
-					</li>
-					<li data-nav-for-page="shoppinglist">
-						<a class="discrete-link" href="{{ $U('/shoppinglist') }}"><i class="fa fa-shopping-bag fa-fw"></i>&nbsp;{{ $L('Shopping list') }}</a>
-					</li>
-					<li data-nav-for-page="inventory">
-						<a class="discrete-link" href="{{ $U('/inventory') }}"><i class="fa fa-list fa-fw"></i>&nbsp;{{ $L('Inventory') }}</a>
-					</li>
-					<li data-nav-for-page="habittracking">
-						<a class="discrete-link" href="{{ $U('/habittracking') }}"><i class="fa fa-play fa-fw"></i>&nbsp;{{ $L('Habit tracking') }}</a>
-					</li>
-					<li data-nav-for-page="batterytracking">
-						<a class="discrete-link" href="{{ $U('/batterytracking') }}"><i class="fa fa-fire fa-fw"></i>&nbsp;{{ $L('Battery tracking') }}</a>
-					</li>
-				</ul>
-
-				<ul class="nav navbar-nav navbar-right">
-					<li class="disabled"><a href="#"><strong>{{ $L('Manage master data') }}</strong></a></li>
-					<li data-nav-for-page="products">
-						<a class="discrete-link" href="{{ $U('/products') }}"><i class="fa fa-product-hunt fa-fw"></i>&nbsp;{{ $L('Products') }}</a>
-					</li>
-					<li data-nav-for-page="locations">
-						<a class="discrete-link" href="{{ $U('/locations') }}"><i class="fa fa-map-marker fa-fw"></i>&nbsp;{{ $L('Locations') }}</a>
-					</li>
-					<li data-nav-for-page="quantityunits">
-						<a class="discrete-link" href="{{ $U('/quantityunits') }}"><i class="fa fa-balance-scale fa-fw"></i>&nbsp;{{ $L('Quantity units') }}</a>
-					</li>
-					<li data-nav-for-page="habits">
-						<a class="discrete-link" href="{{ $U('/habits') }}"><i class="fa fa-refresh fa-fw"></i>&nbsp;{{ $L('Habits') }}</a>
-					</li>
-					<li data-nav-for-page="batteries">
-						<a class="discrete-link" href="{{ $U('/batteries') }}"><i class="fa fa-battery-three-quarters fa-fw"></i>&nbsp;{{ $L('Batteries') }}</a>
-					</li>
-				</ul>
-
-				<ul class="nav navbar-nav navbar-right">
-					<li>
-						<a class="discrete-link logout-button" href="{{ $U('/logout') }}"><i class="fa fa-sign-out fa-fw"></i>&nbsp;{{ $L('Logout') }}</a>
-					</li>
-				</ul>
-
-				<div class="nav-copyright nav nav-sidebar">
-					grocy is a project by
-					<a class="discrete-link" href="https://berrnd.de" target="_blank">Bernd Bestel</a>
-					<br>
-					Created with passion since 2017
-					<br>
-					Version {{ $version }}
-					<br>
-					Life runs on code
-					<br>
-					<a class="discrete-link" href="https://github.com/berrnd/grocy" target="_blank">
-						<i class="fa fa-github"></i>
+				<li class="nav-item" data-toggle="tooltip" data-placement="right" title="{{ $L('Stock overview') }}" data-nav-for-page="stockoverview">
+					<a class="nav-link discrete-link" href="{{ $U('/stockoverview') }}">
+						<i class="fas fa-tachometer-alt"></i>
+						<span class="nav-link-text">{{ $L('Stock overview') }}</span>
 					</a>
-				</div>
+				</li>
+				<li class="nav-item" data-toggle="tooltip" data-placement="right" title="{{ $L('Habits overview') }}" data-nav-for-page="habitsoverview">
+					<a class="nav-link discrete-link" href="{{ $U('/habitsoverview') }}">
+						<i class="fas fa-tachometer-alt"></i>
+						<span class="nav-link-text">{{ $L('Habits overview') }}</span>
+					</a>
+				</li>
+				<li class="nav-item" data-toggle="tooltip" data-placement="right" title="{{ $L('Batteries overview') }}" data-nav-for-page="batteriesoverview">
+					<a class="nav-link discrete-link" href="{{ $U('/batteriesoverview') }}">
+						<i class="fas fa-tachometer-alt"></i>
+						<span class="nav-link-text">{{ $L('Batteries overview') }}</span>
+					</a>
+				</li>
 
-			</div>
+				<li class="nav-item mt-4" data-toggle="tooltip" data-placement="right" title="{{ $L('Purchase') }}" data-nav-for-page="purchase">
+					<a class="nav-link discrete-link" href="{{ $U('/purchase') }}">
+						<i class="fas fa-shopping-cart"></i>
+						<span class="nav-link-text">{{ $L('Purchase') }}</span>
+					</a>
+				</li>
+				<li class="nav-item" data-toggle="tooltip" data-placement="right" title="{{ $L('Consume') }}" data-nav-for-page="consume">
+					<a class="nav-link discrete-link" href="{{ $U('/consume') }}">
+						<i class="fas fa-utensils"></i>
+						<span class="nav-link-text">{{ $L('Consume') }}</span>
+					</a>
+				</li>
+				<li class="nav-item" data-toggle="tooltip" data-placement="right" title="{{ $L('Shopping list') }}" data-nav-for-page="shoppinglist">
+					<a class="nav-link discrete-link" href="{{ $U('/shoppinglist') }}">
+						<i class="fas fa-shopping-bag"></i>
+						<span class="nav-link-text">{{ $L('Shopping list') }}</span>
+					</a>
+				</li>
+				<li class="nav-item" data-toggle="tooltip" data-placement="right" title="{{ $L('Inventory') }}" data-nav-for-page="inventory">
+					<a class="nav-link discrete-link" href="{{ $U('/inventory') }}">
+						<i class="fas fa-list"></i>
+						<span class="nav-link-text">{{ $L('Inventory') }}</span>
+					</a>
+				</li>
+				<li class="nav-item" data-toggle="tooltip" data-placement="right" title="{{ $L('Habit tracking') }}" data-nav-for-page="habittracking">
+					<a class="nav-link discrete-link" href="{{ $U('/habittracking') }}">
+						<i class="fas fa-play"></i>
+						<span class="nav-link-text">{{ $L('Habit tracking') }}</span>
+					</a>
+				</li>
+				<li class="nav-item" data-toggle="tooltip" data-placement="right" title="{{ $L('Battery tracking') }}" data-nav-for-page="batterytracking">
+					<a class="nav-link discrete-link" href="{{ $U('/batterytracking') }}">
+						<i class="fas fa-fire"></i>
+						<span class="nav-link-text">{{ $L('Battery tracking') }}</span>
+					</a>
+				</li>
+				
+				<li class="nav-item mt-4" data-toggle="tooltip" data-placement="right" title="{{ $L('Manage master data') }}">
+					<a class="nav-link nav-link-collapse collapsed discrete-link" data-toggle="collapse" href="#top-nav-manager-master-data">
+						<i class="fas fa-table"></i>
+						<span class="nav-link-text">{{ $L('Manage master data') }}</span>
+					</a>
+					<ul id="top-nav-manager-master-data" class="sidenav-second-level collapse">
+						<li data-nav-for-page="products">
+							<a class="nav-link discrete-link" href="{{ $U('/products') }}">
+								<i class="fab fa-product-hunt"></i>
+								<span class="nav-link-text">{{ $L('Products') }}</span>
+							</a>
+						</li>
+						<li data-nav-for-page="locations">
+							<a class="nav-link discrete-link" href="{{ $U('/locations') }}">
+								<i class="fas fa-map-marker-alt"></i>
+								<span class="nav-link-text">{{ $L('Locations') }}</span>
+							</a>
+						</li>
+						<li data-nav-for-page="quantityunits">
+							<a class="nav-link discrete-link" href="{{ $U('/quantityunits') }}">
+								<i class="fas fa-balance-scale"></i>
+								<span class="nav-link-text">{{ $L('Quantity units') }}</span>
+							</a>
+						</li>
+						<li data-nav-for-page="habits">
+							<a class="nav-link discrete-link" href="{{ $U('/habits') }}">
+								<i class="fas fa-sync-alt"></i>
+								<span class="nav-link-text">{{ $L('Habits') }}</span>
+							</a>
+						</li>
+						<li data-nav-for-page="batteries">
+							<a class="nav-link discrete-link" href="{{ $U('/batteries') }}">
+								<i class="fas fa-battery-three-quarters"></i>
+								<span class="nav-link-text">{{ $L('Batteries') }}</span>
+							</a>
+						</li>
+					</ul>
+				</li>
+			</ul>
+
+			<ul class="navbar-nav sidenav-toggler">
+				<li class="nav-item">
+					<a id="sidenavToggler" class="nav-link text-center">
+						<i class="fas fa-angle-left"></i>
+					</a>
+				</li>
+			</ul>
+
+			<ul class="navbar-nav ml-auto">
+				@if(AUTHENTICATED === true)
+				<li class="nav-item dropdown">
+					<a class="nav-link dropdown-toggle discrete-link" href="#" data-toggle="dropdown"><i class="fas fa-user"></i> {{ HTTP_USER }}</a>
+
+					<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>
+				</li>
+				@endif
+
+				<li class="nav-item dropdown">
+					<a class="nav-link dropdown-toggle discrete-link" href="#" data-toggle="dropdown"><i class="fas fa-wrench"></i> <span class="d-inline d-lg-none">{{ $L('Settings') }}</span></a>
+
+					<div class="dropdown-menu dropdown-menu-right">
+						<a class="dropdown-item discrete-link" href="{{ $U('/manageapikeys') }}"><i class="fas fa-handshake"></i>&nbsp;{{ $L('Manage API keys') }}</a>
+						<a class="dropdown-item discrete-link" target="_blank" href="{{ $U('/api') }}"><i class="fas fa-book"></i>&nbsp;{{ $L('REST API & data model documentation') }}</a>
+						
+						<div class="dropdown-divider"></div>
+
+						<a class="dropdown-item discrete-link" href="#" data-toggle="modal" data-target="#about-modal"><i class="fas fa-info fa-fw"></i>&nbsp;{{ $L('About grocy') }} (Version {{ $version }})</a>
+					</div>
+				</li>
+			</ul>
 		</div>
 	</nav>
 
-	<div class="container-fluid">
-		<div class="row">
-
-			<div class="col-sm-3 col-md-2 sidebar">
-
-				<ul class="nav nav-sidebar">
-					<li data-nav-for-page="stockoverview">
-						<a class="discrete-link" href="{{ $U('/stockoverview') }}"><i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Stock overview') }}</a>
-					</li>
-					<li data-nav-for-page="habitsoverview">
-						<a class="discrete-link" href="{{ $U('/habitsoverview') }}"><i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Habits overview') }}</a>
-					</li>
-					<li data-nav-for-page="batteriesoverview">
-						<a class="discrete-link" href="{{ $U('/batteriesoverview') }}"><i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Batteries overview') }}</a>
-					</li>
-				</ul>
-
-				<ul class="nav nav-sidebar">
-					<li class="disabled"><a href="#"><strong>{{ $L('Record data') }}</strong></a></li>
-					<li data-nav-for-page="purchase">
-						<a class="discrete-link" href="{{ $U('/purchase') }}"><i class="fa fa-shopping-cart fa-fw"></i>&nbsp;{{ $L('Purchase') }}</a>
-					</li>
-					<li data-nav-for-page="consume">
-						<a class="discrete-link" href="{{ $U('/consume') }}"><i class="fa fa-cutlery fa-fw"></i>&nbsp;{{ $L('Consume') }}</a>
-					</li>
-					<li data-nav-for-page="shoppinglist">
-						<a class="discrete-link" href="{{ $U('/shoppinglist') }}"><i class="fa fa-shopping-bag fa-fw"></i>&nbsp;{{ $L('Shopping list') }}</a>
-					</li>
-					<li data-nav-for-page="inventory">
-						<a class="discrete-link" href="{{ $U('/inventory') }}"><i class="fa fa-list fa-fw"></i>&nbsp;{{ $L('Inventory') }}</a>
-					</li>
-					<li data-nav-for-page="habittracking">
-						<a class="discrete-link" href="{{ $U('/habittracking') }}"><i class="fa fa-play fa-fw"></i>&nbsp;{{ $L('Habit tracking') }}</a>
-					</li>
-					<li data-nav-for-page="batterytracking">
-						<a class="discrete-link" href="{{ $U('/batterytracking') }}"><i class="fa fa-fire fa-fw"></i>&nbsp;{{ $L('Battery tracking') }}</a>
-					</li>
-				</ul>
-
-				<ul class="nav nav-sidebar">
-					<li class="disabled"><a href="#"><strong>{{ $L('Manage master data') }}</strong></a></li>
-					<li data-nav-for-page="products">
-						<a class="discrete-link" href="{{ $U('/products') }}"><i class="fa fa-product-hunt fa-fw"></i>&nbsp;{{ $L('Products') }}</a>
-					</li>
-					<li data-nav-for-page="locations">
-						<a class="discrete-link" href="{{ $U('/locations') }}"><i class="fa fa-map-marker fa-fw"></i>&nbsp;{{ $L('Locations') }}</a>
-					</li>
-					<li data-nav-for-page="quantityunits">
-						<a class="discrete-link" href="{{ $U('/quantityunits') }}"><i class="fa fa-balance-scale fa-fw"></i>&nbsp;{{ $L('Quantity units') }}</a>
-					</li>
-					<li data-nav-for-page="habits">
-						<a class="discrete-link" href="{{ $U('/habits') }}"><i class="fa fa-refresh fa-fw"></i>&nbsp;{{ $L('Habits') }}</a>
-					</li>
-					<li data-nav-for-page="batteries">
-						<a class="discrete-link" href="{{ $U('/batteries') }}"><i class="fa fa-battery-three-quarters fa-fw"></i>&nbsp;{{ $L('Batteries') }}</a>
-					</li>
-				</ul>
-
-				<div class="nav-copyright nav nav-sidebar">
-					grocy is a project by
-					<a class="discrete-link" href="https://berrnd.de" target="_blank">Bernd Bestel</a>
-					<br>
-					Created with passion since 2017
-					<br>
-					Version {{ $version }}
-					<br>
-					Life runs on code
-					<br>
-					<a class="discrete-link" href="https://github.com/berrnd/grocy" target="_blank">
-						<i class="fa fa-github"></i>
-					</a>
+	<div class="content-wrapper">
+		<div class="container-fluid">
+			<div class="row">
+				<div class="col content-text">
+					@yield('content')
 				</div>
-
 			</div>
-
-			@yield('content')
-
 		</div>
 	</div>
 
-	<script src="{{ $U('/bower_components/jquery/dist/jquery.min.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/bootstrap/dist/js/bootstrap.min.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/bootbox/bootbox.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/jquery.serializeJSON/jquery.serializejson.min.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js?v=') }}{{ $version }}"></script>
-	@if(!empty($L('bootstrap_datepicker_locale')))<script src="{{ $U('/bower_components') }}/bootstrap-datepicker/dist/locales/bootstrap-datepicker.{{ $L('bootstrap_datepicker_locale') }}.min.js?v={{ $version }}"></script>@endif
-	<script src="{{ $U('/bower_components/moment/min/moment.min.js?v=') }}{{ $version }}"></script>
-	@if(!empty($L('moment_locale')))<script src="{{ $U('/bower_components') }}/moment/locale/{{ $L('moment_locale') }}.js?v={{ $version }}"></script>@endif
-	<script src="{{ $U('/bower_components/bootstrap-validator/dist/validator.min.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/bootstrap-combobox/js/bootstrap-combobox.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/datatables.net/js/jquery.dataTables.min.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/datatables.net-responsive/js/dataTables.responsive.min.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/datatables.net-responsive-bs/js/responsive.bootstrap.min.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/jquery-timeago/jquery.timeago.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components') }}/jquery-timeago/locales/jquery.timeago.{{ $L('timeago_locale') }}.js?v={{ $version }}"></script>
-	<script src="{{ $U('/bower_components/toastr/toastr.min.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/tagmanager/tagmanager.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js?v=') }}{{ $version }}"></script>
+	<div class="modal fade content-text" id="about-modal" tabindex="-1">
+		<div class="modal-dialog">
+			<div class="modal-content text-center">
+				<div class="modal-header">
+					<h4 class="modal-title w-100">{{ $L('About grocy') }}</h4>
+					<button type="button" class="close" data-dismiss="modal" title="{{ $L('Close') }}">&times;</button>
+				</div>
+				<div class="modal-body">
+					grocy is a project by
+					<a href="https://berrnd.de" class="discrete-link" target="_blank">Bernd Bestel</a><br>
+					Created with passion since 2017<br>
+					<br>
+					Version {{ $version }}<br>
+					{{ $L('Released on') }} {{ $releaseDate }} <time class="timeago timeago-contextual" datetime="{{ $releaseDate }}"></time><br>
+					<br>
+					Life runs on code<br>
+					<a href="https://github.com/berrnd/grocy" class="discrete-link" target="_blank">
+						<i class="fas fa-github"></i>
+					</a>
+				</div>
+			</div>
+		</div>
+	</div>
 
-	<script src="{{ $U('/js/extensions.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/js/grocy.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/viewjs') }}/@yield('viewJsName').js?v={{ $version }}"></script>
+	<script src="{{ $U('/node_modules/jquery/dist/jquery.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/startbootstrap-sb-admin/js/sb-admin.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/bootbox/dist/bootbox.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/jquery-serializeJSON/jquery.serializejson.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/moment/min/moment.min.js?v=', true) }}{{ $version }}"></script>
+	@if(!empty($L('moment_locale')))<script src="{{ $U('/node_modules', true) }}/moment/locale/{{ $L('moment_locale') }}.js?v={{ $version }}"></script>@endif
+	<script src="{{ $U('/node_modules/@danielfarrell/bootstrap-combobox/js/bootstrap-combobox.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/datatables.net/js/jquery.dataTables.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/datatables.net-responsive/js/dataTables.responsive.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/timeago/jquery.timeago.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules', true) }}/timeago/locales/jquery.timeago.{{ $L('timeago_locale') }}.js?v={{ $version }}"></script>
+	<script src="{{ $U('/node_modules/toastr/build/toastr.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/tagmanager/tagmanager.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js?v=', true) }}{{ $version }}"></script>
+
+	<script src="{{ $U('/js/extensions.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/js/grocy.js?v=', true) }}{{ $version }}"></script>
+	@stack('pageScripts')
 	@stack('componentScripts')
+	<script src="{{ $U('/viewjs', true) }}/@yield('viewJsName').js?v={{ $version }}"></script>
 
-	@if(file_exists(__DIR__ . '/../../data/add_before_end_body.html'))
-		@php include __DIR__ . '/../../data/add_before_end_body.html' @endphp
+	@if(file_exists(__DIR__ . '/../../data/custom.js'))
+		@php include __DIR__ . '/../../data/custom.js' @endphp
 	@endif
 </body>
+
 </html>

views/locationform.blade.php

@@ -9,32 +9,32 @@
 @section('viewJsName', 'locationform')
 
 @section('content')
-<div class="col-sm-3 col-sm-offset-3 col-md-4 col-md-offset-2">
+<div class="row">
+	<div class="col-lg-6 col-xs-12">
+		<h1>@yield('title')</h1>
 
-	<h1 class="page-header">@yield('title')</h1>
+		<script>Grocy.EditMode = '{{ $mode }}';</script>
 
-	<script>Grocy.EditMode = '{{ $mode }}';</script>
+		@if($mode == 'edit')
+			<script>Grocy.EditObjectId = {{ $location->id }};</script>
+		@endif
 
-	@if($mode == 'edit')
-		<script>Grocy.EditObjectId = {{ $location->id }};</script>
-	@endif
+		<form id="location-form" novalidate>
 
-	<form id="location-form">
+			<div class="form-group">
+				<label for="name">{{ $L('Name') }}</label>
+				<input type="text" class="form-control" required id="name" name="name" value="@if($mode == 'edit'){{ $location->name }}@endif">
+				<div class="invalid-feedback">{{ $L('A name is required') }}</div>
+			</div>
 
-		<div class="form-group">
-			<label for="name">{{ $L('Name') }}</label>
-			<input type="text" class="form-control" required id="name" name="name" value="@if($mode == 'edit'){{ $location->name }}@endif">
-			<div class="help-block with-errors"></div>
-		</div>
+			<div class="form-group">
+				<label for="description">{{ $L('Description') }}</label>
+				<textarea class="form-control" rows="2" id="description" name="description">@if($mode == 'edit'){{ $location->description }}@endif</textarea>
+			</div>
 
-		<div class="form-group">
-			<label for="description">{{ $L('Description') }}</label>
-			<textarea class="form-control" rows="2" id="description" name="description">@if($mode == 'edit'){{ $location->description }}@endif</textarea>
-		</div>
-
-		<button id="save-location-button" type="submit" class="btn btn-default">{{ $L('Save') }}</button>
-
-	</form>
+			<button id="save-location-button" type="submit" class="btn btn-success">{{ $L('Save') }}</button>
 
+		</form>
+	</div>
 </div>
 @stop

views/locations.blade.php

@@ -5,17 +5,27 @@
 @section('viewJsName', 'locations')
 
 @section('content')
-<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
+<div class="row">
+	<div class="col">
+		<h1>
+			@yield('title')
+			<a class="btn btn-outline-dark" href="{{ $U('/location/new') }}">
+				<i class="fas fa-plus"></i>&nbsp;{{ $L('Add') }}
+			</a>
+		</h1>
+	</div>
+</div>
 
-	<h1 class="page-header">
-		@yield('title')
-		<a class="btn btn-default" href="/location/new" role="button">
-			<i class="fa fa-plus"></i>&nbsp;{{ $L('Add') }}
-		</a>
-	</h1>
+<div class="row mt-3">
+	<div class="col-xs-12 col-md-6 col-xl-3">
+		<label for="search"><i class="fas fa-search"></i> {{ $L('Search') }}</label>
+		<input type="text" class="form-control" id="search">
+	</div>
+</div>
 
-	<div class="table-responsive">
-		<table id="locations-table" class="table table-striped">
+<div class="row">
+	<div class="col">
+		<table id="locations-table" class="table table-sm table-striped dt-responsive">
 			<thead>
 				<tr>
 					<th>#</th>
@@ -27,11 +37,11 @@
 				@foreach($locations as $location)
 				<tr>
 					<td class="fit-content">
-						<a class="btn btn-info" href="/location/{{ $location->id }}" role="button">
-							<i class="fa fa-pencil"></i>
+						<a class="btn btn-info btn-sm" href="{{ $U('/location/') }}{{ $location->id }}">
+							<i class="fas fa-edit"></i>
 						</a>
-						<a class="btn btn-danger location-delete-button" href="#" role="button" data-location-id="{{ $location->id }}" data-location-name="{{ $location->name }}">
-							<i class="fa fa-trash"></i>
+						<a class="btn btn-danger btn-sm location-delete-button" href="#" data-location-id="{{ $location->id }}" data-location-name="{{ $location->name }}">
+							<i class="fas fa-trash"></i>
 						</a>
 					</td>
 					<td>
@@ -45,6 +55,5 @@
 			</tbody>
 		</table>
 	</div>
-
 </div>
 @stop

views/login.blade.php

@@ -4,27 +4,27 @@
 @section('viewJsName', 'login')
 
 @section('content')
-<div class="col-md-4 col-md-offset-5">
+<div class="row">
+	<div class="col-lg-6 offset-lg-3 col-xs-12">
+		<h1 class="text-center">@yield('title')</h1>
 
-	<h1 class="page-header text-center">@yield('title')</h1>
+		<form method="post" action="{{ $U('/login') }}" id="login-form" novalidate>
 
-	<form method="post" action="/login" id="login-form">
+			<div class="form-group">
+				<label for="name">{{ $L('Username') }}</label>
+				<input type="text" class="form-control" required id="username" name="username">
+				<div class="invalid-feedback"></div>
+			</div>
 
-		<div class="form-group">
-			<label for="name">{{ $L('Username') }}</label>
-			<input type="text" class="form-control" required id="username" name="username">
-			<div class="help-block with-errors"></div>
-		</div>
+			<div class="form-group">
+				<label for="name">{{ $L('Password') }}</label>
+				<input type="password" class="form-control" required id="password" name="password">
+				<div id="login-error" class="form-text text-danger d-none"></div>
+			</div>
 
-		<div class="form-group">
-			<label for="name">{{ $L('Password') }}</label>
-			<input type="password" class="form-control" required id="password" name="password">
-			<div id="login-error" class="help-block with-errors"></div>
-		</div>
-
-		<button id="login-button" type="submit" class="btn btn-default">{{ $L('OK') }}</button>
-
-	</form>
+			<button id="login-button" type="submit" class="btn btn-success">{{ $L('OK') }}</button>
 
+		</form>
+	</div>
 </div>
 @stop