Schedule detail: Introduce Timescale

Author: sukhwinder33445

library/Notifications/Widget/TimeGrid/Timescale.php

@@ -0,0 +1,96 @@
+<?php
+
+/* Icinga Notifications Web | (c) 2025 Icinga GmbH | GPLv2 */
+
+namespace Icinga\Module\Notifications\Widget\TimeGrid;
+
+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 ipl\Web\Style;
+use Locale;
+
+class Timescale extends BaseHtmlElement
+{
+    use Translation;
+
+    protected $tag = 'div';
+
+    protected $defaultAttributes = ['class' => 'timescale'];
+
+    /** @var int The number of days shown */
+    protected $days;
+
+    /** @var Style */
+    protected $style;
+
+    /**
+     * Create a new Timescale
+     *
+     * @param int $days
+     * @param Style $style
+     */
+    public function __construct(int $days, Style $style)
+    {
+        $this->days = $days;
+        $this->style = $style;
+    }
+
+    public function assemble(): void
+    {
+        switch (true) {
+            case $this->days === 1:
+                $timestampPerDay = 24;
+                break;
+            case $this->days <= 7:
+                $timestampPerDay = 3;
+                break;
+            case $this->days <= 14:
+                $timestampPerDay = 2;
+                break;
+            default:
+                $timestampPerDay = 1;
+        }
+
+        $this->style->addFor($this, ['--timestampsPerDay' => $timestampPerDay]);
+
+        $dateFormatter = new IntlDateFormatter(
+            Locale::getDefault(),
+            IntlDateFormatter::NONE,
+            IntlDateFormatter::SHORT
+        );
+
+        $timeIntervals = 24 / $timestampPerDay;
+
+        $time = new DateTime();
+        $dayTimestamps = [];
+        for ($i = 0; $i < $timestampPerDay; $i++) {
+            // am-pm is separated by non-breaking whitespace
+            $parts = preg_split('/\s/u', $dateFormatter->format($time->setTime($i * $timeIntervals, 0)));
+
+            $dayTimestamps[$i] = new HtmlElement('span', new Attributes(['class' => 'timestamp']), new Text($parts[0]));
+
+            if (isset($parts[1])) {
+                $dayTimestamps[$i]->addHtml(
+                    new HtmlElement('span', new Attributes(['class' => 'am-pm']), new Text($parts[1]))
+                );
+            }
+        }
+
+        $allTimestamps = array_merge(...array_fill(0, $this->days, $dayTimestamps));
+
+        $lastPosition = count($allTimestamps) - 1;
+
+        $fakeLast = clone $allTimestamps[$lastPosition];
+        $allTimestamps[$lastPosition] = $fakeLast->addAttributes(['class' => 'last']);
+        // added the class to add them into the same cell
+        $first = clone $allTimestamps[0];
+        $allTimestamps[] = $first->addAttributes(['class' => 'midnight']);
+
+        $this->addHtml(...$allTimestamps);
+    }
+}

library/Notifications/Widget/Timeline.php

@@ -11,6 +11,7 @@
 use Icinga\Module\Notifications\Widget\TimeGrid\DynamicGrid;
 use Icinga\Module\Notifications\Widget\TimeGrid\EntryProvider;
 use Icinga\Module\Notifications\Widget\TimeGrid\GridStep;
+use Icinga\Module\Notifications\Widget\TimeGrid\Timescale;
 use Icinga\Module\Notifications\Widget\Timeline\Entry;
 use Icinga\Module\Notifications\Widget\Timeline\MinimalGrid;
 use Icinga\Module\Notifications\Widget\Timeline\Rotation;
@@ -312,6 +313,9 @@ protected function assemble()
                     Text::create($this->translate('Result'))
                 )
             );
+
+            $this->getGrid()
+                ->addHtml(new Timescale($this->days, $this->getStyle()));
         }
 
         $this->addHtml(

public/css/timeline.less

@@ -9,6 +9,7 @@
     --stepRowHeight: 4em;
     --primaryRowHeight: 4em;
     position: relative;
+    margin-right: 1em; // make midnight timestamp visible
 
     .time-grid-header {
       box-sizing: border-box;
@@ -51,10 +52,48 @@
       display: block;
       border-top: 1px solid black;
       position: absolute;
-      bottom: var(--stepRowHeight);
+      bottom: ~"calc(var(--stepRowHeight) + 3em)"; // 3em .timescale height
       right: 0;
       left: 0;
     }
+
+    .timescale {
+      display: grid;
+      grid-template-columns: repeat(~"calc(var(--primaryColumns) * var(--timestampsPerDay))", 1fr);
+      border-left: 1px solid transparent; // this is required to maintain the grid layout, otherwise timestamp::before is not positioned correctly
+      grid-area: ~"4 / 2 / 4 / 3";
+      height: 3em;
+
+      .timestamp {
+        text-align: center;
+        position: relative;
+        transform: translateX(~"calc(-50% - 1px)"); // 1px border-left of .timescale
+        padding-top: 0.5em;
+        font-size: .75em;
+
+        &.last,
+        &.midnight {
+          grid-area: ~"1 / -2 / 2 / end";
+        }
+
+        &.midnight {
+          transform: translateX(~"calc(50% - 1px)"); // 1px border-left of .timescale
+        }
+
+        .am-pm {
+          display: block;
+        }
+
+        &:after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 50%;
+          width: 1px;
+          height: 0.5em; // padding of .timestamp
+        }
+      }
+    }
   }
 }
 
@@ -103,6 +142,14 @@
     font-size: .75em;
     opacity: .8;
   }
+
+  .timescale .timestamp {
+    color: @gray-semilight;
+
+    &:after {
+      background: @gray-lighter;
+    }
+  }
 }
 
 .timeline.minimal-layout .empty-notice {