Preview schedules in the overview

application/controllers/ScheduleController.php

@@ -129,6 +129,7 @@ public function addRotationAction(): void
         });
         $form->on(RotationConfigForm::ON_SUCCESS, function (RotationConfigForm $form) use ($scheduleId) {
             $form->addRotation();
+            $this->sendExtraUpdates(['#col1']);
             $this->closeModalAndRefreshRelatedView(Links::schedule($scheduleId));
         });
 
@@ -154,14 +155,17 @@ public function editRotationAction(): void
         $form->setSuggestionUrl(Url::fromPath('notifications/schedule/suggest-recipient'));
         $form->on(RotationConfigForm::ON_SUCCESS, function (RotationConfigForm $form) use ($id, $scheduleId) {
             $form->editRotation($id);
+            $this->sendExtraUpdates(['#col1']);
             $this->closeModalAndRefreshRelatedView(Links::schedule($scheduleId));
         });
         $form->on(RotationConfigForm::ON_SENT, function (RotationConfigForm $form) use ($id, $scheduleId) {
             if ($form->hasBeenRemoved()) {
                 $form->removeRotation($id);
+                $this->sendExtraUpdates(['#col1']);
                 $this->closeModalAndRefreshRelatedView(Links::schedule($scheduleId));
             } elseif ($form->hasBeenWiped()) {
                 $form->wipeRotation();
+                $this->sendExtraUpdates(['#col1']);
                 $this->closeModalAndRefreshRelatedView(Links::schedule($scheduleId));
             } elseif (! $form->hasBeenSubmitted()) {
                 foreach ($form->getPartUpdates() as $update) {
@@ -188,6 +192,7 @@ public function moveRotationAction(): void
 
         $form = new MoveRotationForm(Database::get());
         $form->on(MoveRotationForm::ON_SUCCESS, function (MoveRotationForm $form) {
+            $this->sendExtraUpdates(['#col1']);
             $this->redirectNow(Links::schedule($form->getScheduleId()));
         });
 

library/Notifications/Widget/Calendar/DayGrid.php

@@ -63,7 +63,7 @@ protected function createGridSteps(): Traversable
 
     protected function createHeader(): BaseHtmlElement
     {
-        $header = new HtmlElement('div', Attributes::create(['class' => 'header']));
+        $header = new HtmlElement('div', Attributes::create(['class' => 'time-grid-header']));
         $dayNames = [
             'Mon' => t('Mon', 'monday'),
             'Tue' => t('Tue', 'tuesday'),

library/Notifications/Widget/Calendar/MonthGrid.php

@@ -80,7 +80,7 @@ protected function createHeader(): BaseHtmlElement
             $this->translate('Sun', 'sunday')
         ];
 
-        $header = new HtmlElement('div', Attributes::create(['class' => 'header']));
+        $header = new HtmlElement('div', Attributes::create(['class' => 'time-grid-header']));
         foreach ($dayNames as $dayName) {
             $header->addHtml(new HtmlElement(
                 'div',

library/Notifications/Widget/Calendar/WeekGrid.php

@@ -76,7 +76,7 @@ protected function createHeader(): BaseHtmlElement
             t('Sun', 'sunday')
         ];
 
-        $header = new HtmlElement('div', Attributes::create(['class' => 'header']));
+        $header = new HtmlElement('div', Attributes::create(['class' => 'time-grid-header']));
 
         $currentDay = clone $this->getGridStart();
         $interval = new DateInterval('P1D');

library/Notifications/Widget/ItemList/ScheduleList.php

@@ -4,6 +4,11 @@
 
 namespace Icinga\Module\Notifications\Widget\ItemList;
 
+use DateTime;
+use Icinga\Module\Notifications\Widget\TimeGrid\DaysHeader;
+use ipl\Html\Attributes;
+use ipl\Html\HtmlDocument;
+use ipl\Html\HtmlElement;
 use ipl\Web\Common\BaseItemList;
 
 class ScheduleList extends BaseItemList
@@ -14,4 +19,19 @@ protected function getItemClass(): string
     {
         return ScheduleListItem::class;
     }
+
+    protected function assemble(): void
+    {
+        parent::assemble();
+
+        $this->prependWrapper(
+            (new HtmlDocument())->add(
+                HtmlElement::create(
+                    'div',
+                    Attributes::create(['class' => 'schedules-header']),
+                    new DaysHeader((new DateTime())->setTime(0, 0), 7)
+                )
+            )
+        );
+    }
 }

library/Notifications/Widget/ItemList/ScheduleListItem.php

@@ -4,10 +4,15 @@
 
 namespace Icinga\Module\Notifications\Widget\ItemList;
 
+use DateTime;
 use Icinga\Module\Notifications\Common\Links;
 use Icinga\Module\Notifications\Model\Schedule;
+use Icinga\Module\Notifications\Widget\Timeline;
+use Icinga\Module\Notifications\Widget\Timeline\Rotation;
+use Icinga\Util\Csp;
 use ipl\Html\BaseHtmlElement;
 use ipl\Web\Common\BaseListItem;
+use ipl\Web\Style;
 use ipl\Web\Widget\Link;
 
 /**
@@ -41,8 +46,27 @@ protected function assembleHeader(BaseHtmlElement $header): void
         $header->addHtml($this->createTitle());
     }
 
+    protected function assembleCaption(BaseHtmlElement $caption): void
+    {
+        // Number of days is set to 7, since default mode for schedule is week
+        // and the start day should be the current day
+        $timeline = (new Timeline((new DateTime())->setTime(0, 0), 7))
+            ->minimalLayout()
+            ->setStyle(
+                (new Style())
+                    ->setNonce(Csp::getStyleNonce())
+                    ->setModule('notifications')
+            );
+
+        foreach ($this->item->rotation->with('timeperiod')->orderBy('first_handoff', SORT_DESC) as $rotation) {
+            $timeline->addRotation(new Rotation($rotation));
+        }
+
+        $caption->addHtml($timeline);
+    }
+
     protected function assembleMain(BaseHtmlElement $main): void
     {
-        $main->addHtml($this->createHeader());
+        $main->addHtml($this->createHeader(), $this->createCaption());
     }
 }

library/Notifications/Widget/TimeGrid/DaysHeader.php

@@ -0,0 +1,96 @@
+<?php
+
+/* Icinga Notifications Web | (c) 2024 Icinga GmbH | GPLv2 */
+
+namespace Icinga\Module\Notifications\Widget\TimeGrid;
+
+use DateInterval;
+use DateTime;
+use IntlDateFormatter;
+use ipl\Html\Attributes;
+use ipl\Html\BaseHtmlElement;
+use ipl\Html\HtmlElement;
+use ipl\Html\Text;
+use ipl\I18n\Translation;
+use Locale;
+
+class DaysHeader extends BaseHtmlElement
+{
+    use Translation;
+
+    /** @var int The number of days to show */
+    protected $days;
+
+    protected $tag = 'div';
+
+    protected $defaultAttributes = ['class' => ['days-header', 'time-grid-header']];
+
+    /** @var DateTime Starting day */
+    protected $startDay;
+
+    /**
+     * Create a new DaysHeader
+     *
+     * @param DateTime $startDay
+     * @param int $days
+     */
+    public function __construct(DateTime $startDay, int $days)
+    {
+        $this->startDay = $startDay;
+        $this->days = $days;
+    }
+
+    public function assemble(): void
+    {
+        $dayNames = [
+            $this->translate('Mon', 'monday'),
+            $this->translate('Tue', 'tuesday'),
+            $this->translate('Wed', 'wednesday'),
+            $this->translate('Thu', 'thursday'),
+            $this->translate('Fri', 'friday'),
+            $this->translate('Sat', 'saturday'),
+            $this->translate('Sun', 'sunday')
+        ];
+
+        $interval = new DateInterval('P1D');
+        $today = (new DateTime())->setTime(0, 0);
+        $time = clone $this->startDay;
+        $dateFormatter = new IntlDateFormatter(
+            Locale::getDefault(),
+            IntlDateFormatter::MEDIUM,
+            IntlDateFormatter::NONE
+        );
+
+        for ($i = 0; $i < $this->days; $i++) {
+            if ($time == $today) {
+                $title = [new HtmlElement(
+                    'span',
+                    Attributes::create(['class' => 'day-name']),
+                    Text::create($this->translate('Today'))
+                )];
+            } else {
+                $title = [
+                    new HtmlElement(
+                        'span',
+                        Attributes::create(['class' => 'date']),
+                        Text::create($time->format($this->translate('d/m', 'day-name, time')))
+                    ),
+                    Text::create(' '),
+                    new HtmlElement(
+                        'span',
+                        Attributes::create(['class' => 'day-name']),
+                        Text::create($dayNames[$time->format('N') - 1])
+                    )
+                ];
+            }
+
+            $this->addHtml(new HtmlElement(
+                'div',
+                Attributes::create(['class' => 'column-title', 'title' => $dateFormatter->format($time)]),
+                ...$title
+            ));
+
+            $time->add($interval);
+        }
+    }
+}

library/Notifications/Widget/TimeGrid/DynamicGrid.php

@@ -6,13 +6,10 @@
 
 use DateInterval;
 use DateTime;
-use IntlDateFormatter;
 use InvalidArgumentException;
 use ipl\Html\Attributes;
 use ipl\Html\BaseHtmlElement;
 use ipl\Html\HtmlElement;
-use ipl\Html\Text;
-use Locale;
 use LogicException;
 use Traversable;
 
@@ -98,59 +95,7 @@ protected function sideBar(): BaseHtmlElement
 
     protected function createHeader(): BaseHtmlElement
     {
-        $dayNames = [
-            $this->translate('Mon', 'monday'),
-            $this->translate('Tue', 'tuesday'),
-            $this->translate('Wed', 'wednesday'),
-            $this->translate('Thu', 'thursday'),
-            $this->translate('Fri', 'friday'),
-            $this->translate('Sat', 'saturday'),
-            $this->translate('Sun', 'sunday')
-        ];
-
-        $interval = new DateInterval('P1D');
-        $today = (new DateTime())->setTime(0, 0);
-        $time = clone $this->getGridStart();
-        $dateFormatter = new IntlDateFormatter(
-            Locale::getDefault(),
-            IntlDateFormatter::MEDIUM,
-            IntlDateFormatter::NONE
-        );
-
-        $header = new HtmlElement('div', Attributes::create(['class' => 'header']));
-        for ($i = 0; $i < $this->days; $i++) {
-            if ($time == $today) {
-                $title = [new HtmlElement(
-                    'span',
-                    Attributes::create(['class' => 'day-name']),
-                    Text::create($this->translate('Today'))
-                )];
-            } else {
-                $title = [
-                    new HtmlElement(
-                        'span',
-                        Attributes::create(['class' => 'date']),
-                        Text::create($time->format($this->translate('d/m', 'day-name, time')))
-                    ),
-                    Text::create(' '),
-                    new HtmlElement(
-                        'span',
-                        Attributes::create(['class' => 'day-name']),
-                        Text::create($dayNames[$time->format('N') - 1])
-                    )
-                ];
-            }
-
-            $header->addHtml(new HtmlElement(
-                'div',
-                Attributes::create(['class' => 'column-title', 'title' => $dateFormatter->format($time)]),
-                ...$title
-            ));
-
-            $time->add($interval);
-        }
-
-        return $header;
+        return new DaysHeader($this->getGridStart(), $this->days);
     }
 
     protected function createGridSteps(): Traversable