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

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();