Feature/improved rotation tooltips (#374)

Author: BastianLedererIcinga

library/Notifications/Widget/Timeline.php

@@ -185,10 +185,16 @@ public function getEntries(): Traversable
         $occupiedCells = [];
         foreach ($rotations as $rotation) {
             $entryFound = false;
+            if (! $this->minimalLayout) {
+                $flyoutInfo = $rotation->generateEntryInfo();
+            }
+
             foreach ($rotation->fetchTimeperiodEntries($this->start, $this->getGrid()->getGridEnd()) as $entry) {
                 $entryFound = true;
                 if (! $this->minimalLayout) {
                     $entry->setPosition($maxPriority - $rotation->getPriority());
+                    $entry->setFlyoutContent($flyoutInfo);
+                    $entry->calculateAndSetWidthClass($this->getGrid());
 
                     yield $entry;
                 }
@@ -256,6 +262,8 @@ public function getEntries(): Traversable
                         $resultEntry->setUrl($entry->getUrl());
                         $resultEntry->getAttributes()
                             ->add('data-rotation-position', $entry->getPosition());
+                        $resultEntry->setFlyoutContent($entry->getFlyoutContent())
+                            ->calculateAndSetWidthClass($this->getGrid());
                     }
 
                     yield $resultEntry;

library/Notifications/Widget/Timeline/Entry.php

@@ -4,6 +4,7 @@
 
 namespace Icinga\Module\Notifications\Widget\Timeline;
 
+use Icinga\Module\Notifications\Widget\TimeGrid\BaseGrid;
 use ipl\Html\Attributes;
 use ipl\Html\BaseHtmlElement;
 use Icinga\Module\Notifications\Widget\TimeGrid;
@@ -16,6 +17,18 @@ class Entry extends TimeGrid\Entry
     /** @var Member */
     protected $member;
 
+    /** @var ?EntryFlyout Content of the flyoutmenu that is shown when the entry is hovered */
+    protected ?EntryFlyout $flyoutContent = null;
+
+    /**
+     * @var string A CSS class that changes the placement of the flyout
+     *
+     * "narrow-entry": centers the flyout's caret on the entry
+     * "medium-entry": behaves like narrow entry in minimal and poor layout, otherwise as a wide entry
+     * "wide-entry": the flyout has a fixed offset
+     */
+    protected string $widthClass = "wide-entry";
+
     public function setMember(Member $member): self
     {
         $this->member = $member;
@@ -33,6 +46,80 @@ public function getColor(int $transparency): string
         return TimeGrid\Util::calculateEntryColor($this->getMember()->getName(), $transparency);
     }
 
+    /**
+     * Set content of a tooltip that is shown when the entry is hovered
+     *
+     * @param EntryFlyout $content
+     *
+     * @return static
+     */
+    public function setFlyoutContent(EntryFlyout $content): static
+    {
+        $this->flyoutContent = $content;
+
+        return $this;
+    }
+
+    /**
+     * Return the entry's flyout element
+     *
+     * @return EntryFlyout|null
+     */
+    public function getFlyoutContent(): ?EntryFlyout
+    {
+        return $this->flyoutContent;
+    }
+
+    /**
+     * Set value of $widthClass which will be a CSS class of the rendered entry
+     *
+     * @param string $widthClass
+     *
+     * @return $this
+     */
+    public function setWidthClass(string $widthClass): static
+    {
+        $this->widthClass = $widthClass;
+
+        return $this;
+    }
+
+    /**
+     * Return the current width class
+     *
+     * @return string
+     */
+    public function getWidthClass(): string
+    {
+        return $this->widthClass;
+    }
+
+    /**
+     * Assign a width class based on the fraction of the grid duration occupied by this entry
+     *
+     * @param BaseGrid $grid
+     * @param float $mediumThreshold Fraction of grid duration below which the entry is considered medium width
+     * @param float $narrowThreshold Fraction of grid duration below which the entry is considered narrow
+     *
+     * @return $this
+     */
+    public function calculateAndSetWidthClass(BaseGrid $grid, $mediumThreshold = 0.2, $narrowThreshold = 0.1): static
+    {
+        $totalGridDuration = $grid->getGridEnd()->getTimestamp() - $grid->getGridStart()->getTimestamp();
+        $start = max($this->getStart()->getTimestamp(), $grid->getGridStart()->getTimestamp());
+        $end = min($this->getEnd()->getTimestamp(), $grid->getGridEnd()->getTimestamp());
+        $duration = $end - $start;
+        if ($duration / $totalGridDuration < $narrowThreshold) {
+            $this->setWidthClass('narrow-entry');
+        } elseif ($duration / $totalGridDuration < $mediumThreshold) {
+            $this->setWidthClass('medium-entry');
+        } else {
+            $this->setWidthClass('wide-entry');
+        }
+
+        return $this;
+    }
+
     protected function assembleContainer(BaseHtmlElement $container): void
     {
         $container->addHtml(
@@ -48,24 +135,9 @@ protected function assembleContainer(BaseHtmlElement $container): void
             )
         );
 
-        $dateType = \IntlDateFormatter::NONE;
-        $timeType = \IntlDateFormatter::SHORT;
-        if (
-            $this->getStart()->diff($this->getEnd())->days > 0
-            || $this->getStart()->format('Y-m-d') !== $this->getEnd()->format('Y-m-d')
-        ) {
-            $dateType = \IntlDateFormatter::SHORT;
+        if (isset($this->flyoutContent)) {
+            $this->addHtml($this->flyoutContent->withActiveMember($this->getMember()));
+            $this->getAttributes()->add('class', $this->getWidthClass());
         }
-
-        $formatter = new \IntlDateFormatter(\Locale::getDefault(), $dateType, $timeType);
-
-        $container->addAttributes([
-            'title' => sprintf(
-                $this->translate('%s is available from %s to %s'),
-                $this->getMember()->getName(),
-                $formatter->format($this->getStart()),
-                $formatter->format($this->getEnd())
-            )
-        ]);
     }
 }