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

This commit is contained in:
Bernd Bestel 2018-11-20 19:23:48 +01:00
parent 589ad36855
commit f7f90238f2
No known key found for this signature in database
GPG Key ID: 71BD34C0D4891300
5 changed files with 60 additions and 1 deletions

View File

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

View File

@ -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'
);

View File

@ -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;

37
public/js/grocy_clock.js Normal file
View File

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

View File

@ -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>