Show optionally a clock in the header (closes #109)

config-dist.php

@@ -45,3 +45,6 @@ DefaultUserSetting('product_presets_qu_id', -1); // Default quantity unit id for
 # If the page should be automatically reloaded when there was
 # an external change
 DefaultUserSetting('auto_reload_on_db_change', true);
+
+# Show a clock in the header next to the logo or not
+DefaultUserSetting('show_clock_in_header', false);

localization/en/strings.php

@@ -321,5 +321,6 @@ return array(
 	'Product expires' => 'Product expires',
 	'Task due' => 'Task due',
 	'Chore due' => 'Chore due',
-	'Battery charge cycle due' => 'Battery charge cycle due'
+	'Battery charge cycle due' => 'Battery charge cycle due',
+	'Show clock in header' => 'Show clock in header'
 );

public/css/grocy.css

@@ -156,6 +156,10 @@ input::-webkit-inner-spin-button {
 	background-color: #d6d6d6 !important;
 }
 
+.navbar-brand {
+	margin-right: 0;
+}
+
 /* Third party component customizations - DataTables */
 td {
      vertical-align: middle !important;

public/js/grocy_clock.js

@@ -0,0 +1,37 @@
+$("#show-clock-in-header").on("change", function ()
+{
+	CheckHeaderClockEnabled();
+});
+
+function RefreshHeaderClock()
+{
+	$("#clock-small").text(moment().format("l LT"));
+	$("#clock-big").text(moment().format("LLLL"));
+}
+
+Grocy.HeaderClockInterval = null;
+function CheckHeaderClockEnabled()
+{
+	// Refresh the clock in the header every second when enabled
+	if (BoolVal(Grocy.UserSettings.show_clock_in_header))
+	{
+		RefreshHeaderClock();
+		$("#clock-container").removeClass("d-none");
+
+		Grocy.HeaderClockInterval = setInterval(function()
+		{
+			RefreshHeaderClock();
+		}, 1000);
+	}
+	else
+	{
+		if (Grocy.HeaderClockInterval !== null)
+		{
+			clearInterval(Grocy.HeaderClockInterval);
+			Grocy.HeaderClockInterval = null;
+		}
+
+		$("#clock-container").addClass("d-none");
+	}
+}
+CheckHeaderClockEnabled();

views/layout/default.blade.php

@@ -50,6 +50,11 @@
 	@if(!($embedded))
 	<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>
+		<span id="clock-container" class="text-muted font-italic d-none">
+			<i class="far fa-clock"></i>
+			<span id="clock-small" class="d-inline d-sm-none"></span>
+			<span id="clock-big" class="d-none d-sm-inline"></span>
+		</span>
 		
 		<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#sidebarResponsive">
 			<span class="navbar-toggler-icon"></span>
@@ -224,6 +229,14 @@
 								</label>
 							</div>
 						</div>
+						<div class="dropdown-item">
+							<div class="form-check">
+								<input class="form-check-input user-setting-control" type="checkbox" id="show-clock-in-header" data-setting-key="show_clock_in_header">
+								<label class="form-check-label" for="show-clock-in-header">
+									{{ $L('Show clock in header') }}
+								</label>
+							</div>
+						</div>
 						<div class="dropdown-divider"></div>
 						<div class="dropdown-item">
 							<div class="form-check">
@@ -333,6 +346,7 @@
 	<script src="{{ $U('/js/grocy.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/js/grocy_dbchangedhandling.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/js/grocy_nightmode.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/js/grocy_clock.js?v=', true) }}{{ $version }}"></script>
 	@stack('pageScripts')
 	@stack('componentScripts')
 	<script src="{{ $U('/viewjs', true) }}/@yield('viewJsName').js?v={{ $version }}"></script>