Implemented calendar category colors (closes #2368)

This commit is contained in:
Bernd Bestel 2023-11-04 14:11:02 +01:00
parent b3a5128dbd
commit 80d7284d72
No known key found for this signature in database
GPG Key ID: 71BD34C0D4891300
6 changed files with 132 additions and 9 deletions

View File

@ -35,7 +35,8 @@
### Calendar ### Calendar
- xxx - The different event types (due products, chores, tasks and so on) can now have different colors
- => New button "Configure colors" on the calendar page to configure these colors (top right corner)
### Tasks ### Tasks

View File

@ -213,6 +213,13 @@ DefaultUserSetting('batteries_due_soon_days', 5); // The "due soon" days
// Tasks settings // Tasks settings
DefaultUserSetting('tasks_due_soon_days', 5); // The "due soon" days DefaultUserSetting('tasks_due_soon_days', 5); // The "due soon" days
// Calendar settings
DefaultUserSetting('calendar_color_products', '#007bff'); // The event color (hex code) for due products
DefaultUserSetting('calendar_color_tasks', '#28a745'); // The event color (hex code) for due tasks
DefaultUserSetting('calendar_color_chores', '#ffc107'); // The event color (hex code) for due chores
DefaultUserSetting('calendar_color_batteries', '#17a2b8'); // The event color (hex code) for due battery charge cycles
DefaultUserSetting('calendar_color_meal_plan', '#6c757d'); // The event color (hex code) for meal plan items
// Component configuration for Quagga2 - read https://github.com/ericblade/quagga2#configobject for details // Component configuration for Quagga2 - read https://github.com/ericblade/quagga2#configobject for details
// Below is a generic good configuration, // Below is a generic good configuration,
// for an iPhone 7 Plus, halfsample = true, patchsize = small, frequency = 5 yields very good results // for an iPhone 7 Plus, halfsample = true, patchsize = small, frequency = 5 yields very good results

View File

@ -2432,3 +2432,6 @@ msgstr ""
msgid "Nothing was found for the given barcode" msgid "Nothing was found for the given barcode"
msgstr "" msgstr ""
msgid "Configure colors"
msgstr ""

View File

@ -58,3 +58,10 @@ $(window).one("resize", function()
calendar.fullCalendar("changeView", "month"); calendar.fullCalendar("changeView", "month");
} }
}); });
$("#configure-colors-button").on("click", function(e)
{
e.preventDefault();
$("#configure-colors-modal").modal("show");
});

View File

@ -15,6 +15,8 @@ class CalendarService extends BaseService
public function GetEvents() public function GetEvents()
{ {
$usersService = $this->getUsersService();
$stockEvents = []; $stockEvents = [];
if (GROCY_FEATURE_FLAG_STOCK_BEST_BEFORE_DATE_TRACKING) if (GROCY_FEATURE_FLAG_STOCK_BEST_BEFORE_DATE_TRACKING)
{ {
@ -29,7 +31,8 @@ class CalendarService extends BaseService
'title' => $titlePrefix . FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->name, 'title' => $titlePrefix . FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->name,
'start' => $currentStockEntry->best_before_date, 'start' => $currentStockEntry->best_before_date,
'date_format' => 'date', 'date_format' => 'date',
'link' => $this->UrlManager->ConstructUrl('/stockoverview') 'link' => $this->UrlManager->ConstructUrl('/stockoverview'),
'color' => $usersService->GetUserSettings(GROCY_USER_ID)['calendar_color_products']
]; ];
} }
} }
@ -46,7 +49,8 @@ class CalendarService extends BaseService
'title' => $titlePrefix . $currentTaskEntry->name, 'title' => $titlePrefix . $currentTaskEntry->name,
'start' => $currentTaskEntry->due_date, 'start' => $currentTaskEntry->due_date,
'date_format' => 'date', 'date_format' => 'date',
'link' => $this->UrlManager->ConstructUrl('/tasks') 'link' => $this->UrlManager->ConstructUrl('/tasks'),
'color' => $usersService->GetUserSettings(GROCY_USER_ID)['calendar_color_tasks']
]; ];
} }
} }
@ -73,7 +77,8 @@ class CalendarService extends BaseService
'start' => $currentChoreEntry->next_estimated_execution_time, 'start' => $currentChoreEntry->next_estimated_execution_time,
'date_format' => 'datetime', 'date_format' => 'datetime',
'link' => $this->UrlManager->ConstructUrl('/choresoverview'), 'link' => $this->UrlManager->ConstructUrl('/choresoverview'),
'allDay' => $chore->track_date_only == 1 'allDay' => $chore->track_date_only == 1,
'color' => $usersService->GetUserSettings(GROCY_USER_ID)['calendar_color_chores']
]; ];
} }
} }
@ -90,7 +95,8 @@ class CalendarService extends BaseService
'title' => $titlePrefix . FindObjectInArrayByPropertyValue($batteries, 'id', $currentBatteryEntry->battery_id)->name, 'title' => $titlePrefix . FindObjectInArrayByPropertyValue($batteries, 'id', $currentBatteryEntry->battery_id)->name,
'start' => $currentBatteryEntry->next_estimated_charge_time, 'start' => $currentBatteryEntry->next_estimated_charge_time,
'date_format' => 'datetime', 'date_format' => 'datetime',
'link' => $this->UrlManager->ConstructUrl('/batteriesoverview') 'link' => $this->UrlManager->ConstructUrl('/batteriesoverview'),
'color' => $usersService->GetUserSettings(GROCY_USER_ID)['calendar_color_batteries']
]; ];
} }
} }
@ -98,7 +104,7 @@ class CalendarService extends BaseService
$mealPlanRecipeEvents = []; $mealPlanRecipeEvents = [];
$mealPlanNotesEvents = []; $mealPlanNotesEvents = [];
$mealPlanProductEvents = []; $mealPlanProductEvents = [];
if (GROCY_FEATURE_FLAG_RECIPES) if (GROCY_FEATURE_FLAG_RECIPES_MEALPLAN)
{ {
$mealPlanSections = $this->getDatabase()->meal_plan_sections(); $mealPlanSections = $this->getDatabase()->meal_plan_sections();
@ -127,7 +133,8 @@ class CalendarService extends BaseService
'start' => $start, 'start' => $start,
'date_format' => $dateFormat, 'date_format' => $dateFormat,
'description' => $this->UrlManager->ConstructUrl('/mealplan' . '?week=' . $mealPlanDayRecipe->day), 'description' => $this->UrlManager->ConstructUrl('/mealplan' . '?week=' . $mealPlanDayRecipe->day),
'link' => $this->UrlManager->ConstructUrl('/recipes' . '?recipe=' . $mealPlanDayRecipe->recipe_id . '#fullscreen') 'link' => $this->UrlManager->ConstructUrl('/recipes' . '?recipe=' . $mealPlanDayRecipe->recipe_id . '#fullscreen'),
'color' => $usersService->GetUserSettings(GROCY_USER_ID)['calendar_color_meal_plan']
]; ];
} }

View File

@ -15,13 +15,18 @@
data-target="#related-links"> data-target="#related-links">
<i class="fa-solid fa-ellipsis-v"></i> <i class="fa-solid fa-ellipsis-v"></i>
</button> </button>
<div class="related-links collapse d-md-flex order-2 width-xs-sm-100 m-1 mt-md-0 mb-md-0 float-right" <div class="related-links collapse d-md-flex order-2 width-xs-sm-100 d-print-none"
id="related-links"> id="related-links">
<a id="ical-button" <a id="ical-button"
class="btn btn-outline-dark" class="btn btn-outline-dark m-1 mt-md-0 mb-md-0 float-right"
href="#"> href="#">
{{ $__t('Share/Integrate calendar (iCal)') }} {{ $__t('Share/Integrate calendar (iCal)') }}
</a> </a>
<a id="configure-colors-button"
class="btn btn-outline-secondary m-1 mt-md-0 mb-md-0 float-right"
href="#">
{{ $__t('Configure colors') }}
</a>
</div> </div>
</div> </div>
</div> </div>
@ -38,4 +43,97 @@
<div id="calendar"></div> <div id="calendar"></div>
</div> </div>
</div> </div>
<div class="modal fade"
id="configure-colors-modal"
tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title w-100">{{ $__t('Configure colors') }}</h4>
</div>
<div class="modal-body">
@if(GROCY_FEATURE_FLAG_STOCK_BEST_BEFORE_DATE_TRACKING)
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">{{ $__t('Products') }}</span>
</div>
<input id="calendar_color_products"
data-setting-key="calendar_color_products"
class="form-control user-setting-control"
type="color"
value={{$userSettings['calendar_color_products']}}>
</div>
</div>
@endif
@if(GROCY_FEATURE_FLAG_TASKS)
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">{{ $__t('Tasks') }}</span>
</div>
<input id="calendar_color_tasks"
data-setting-key="calendar_color_tasks"
class="form-control user-setting-control"
type="color"
value={{$userSettings['calendar_color_tasks']}}>
</div>
</div>
@endif
@if(GROCY_FEATURE_FLAG_CHORES)
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">{{ $__t('Chores') }}</span>
</div>
<input id="calendar_color_chores"
data-setting-key="calendar_color_chores"
class="form-control user-setting-control"
type="color"
value={{$userSettings['calendar_color_chores']}}>
</div>
</div>
@endif
@if(GROCY_FEATURE_FLAG_BATTERIES)
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">{{ $__t('Batteries') }}</span>
</div>
<input id="calendar_color_batteries"
data-setting-key="calendar_color_batteries"
class="form-control user-setting-control"
type="color"
value={{$userSettings['calendar_color_batteries']}}>
</div>
</div>
@endif
@if(GROCY_FEATURE_FLAG_RECIPES_MEALPLAN)
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">{{ $__t('Meal plan') }}</span>
</div>
<input id="calendar_color_meal_plan"
data-setting-key="calendar_color_meal_plan"
class="form-control user-setting-control"
type="color"
value={{$userSettings['calendar_color_meal_plan']}}>
</div>
</div>
@endif
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-success"
data-dismiss="modal">{{ $__t('OK') }}</button>
</div>
</div>
</div>
</div>
@stop @stop