@@ -10,7 +10,7 @@

     <div class="tl_panel">

         <div id="vr-daily-schedule-zoom" class="tl_submit_panel">

             <label for="daily-zoom-slider">Zoom</label>

-            <input type="range" id="daily-zoom-slider" min="1.5" max="9" step="1.5" value="3">

+            <input type="range" id="daily-zoom-slider" min="4.5" max="12" step="1.5" value="6">

             <button id="daily-zoom-in" class="tl_submit">+</button>

             <button id="daily-zoom-out" class="tl_submit">-</button>

             <button id="daily-zoom-reset" class="tl_submit" data-default="3">Reset</button>

@@ -27,10 +27,10 @@

                     let split = currentVal.match(/^([-.\d]+(?:\.\d+)?)(.*)$/);

                     [value,unit] = [parseFloat(split[1]),split[2] ? split[2] : ''];

-                    if (element.id == 'daily-zoom-in' && value < 9)

+                    if (element.id == 'daily-zoom-in' && value < 12)

                     {

                         root.style.setProperty('--slot-height',(value + 1.5) + unit);

-                    } else if (element.id == 'daily-zoom-out' && value >= 3)

+                    } else if (element.id == 'daily-zoom-out' && value >= 4.5)

                     {

                         root.style.setProperty('--slot-height',(value - 1.5) + unit);

                     } else if (element.id == 'daily-zoom-reset')

@@ -69,12 +69,22 @@

                 </div>

                 <div class="daily-grid-cells-container">

                     <div class="daily-grid-cells">

-                        {% for line in [4,14,15,38] %}

-                            <div class="event-cell" style="grid-row: {{ line }} / {{ line+2 }}">

+                        {% for row, event in events %}

+                            {% if event is not null %}

+                                <div class="event-cell" style="grid-row: {{ event.rowStart }} / {{ event.rowEnd }}">

+                                    <div class="event-title">{{ event.location.title }}</div>

+                                    <div class="event-time">{{ event.slot.time|date("H:i") }} - {{ (event.slot.time + event.slot.duration*60)|date("H:i") }}</div>

+                                </div>

+                            {% else %}

+                                <div class="cell-placeholder" style="grid-row: {{ row }} / {{ row }}">+ Neuer Slot</div>

+                            {% endif %}

+                        {% endfor %}{#

+                        {% for line in [8,28,30,76] %}

+                            <div class="event-cell" style="grid-row: {{ line }} / {{ line+4 }}">

                                 <div class="event-title">Standort 1</div>

                                 <div class="event-time">XX:XX - XX:XX</div>

                             </div>

-                        {% endfor %}

+                        {% endfor %} #}

                     </div>

                 </div>

             </div>

@@ -8,12 +8,12 @@ $hour-line-color: #999;

 $time-color: #666;

 $text-color: #333;

 $header-bg-color: #f2f2f2;

-$slot-height: 3rem;

-$slot-animation-duration: .25s;

-$cell-amount: 48;

+$slot-height: 6rem;

+$animation-duration: .25s;

+$row-amount: 96;

-@mixin animate-slot {

-  transition: height $slot-animation-duration ease-in-out, line-height $slot-animation-duration ease-in-out, grid-template-rows $slot-animation-duration ease-in-out;

+@mixin animate-zoom {

+  transition: height $animation-duration ease-in-out, line-height $animation-duration ease-in-out, grid-template-rows $animation-duration ease-in-out;

 }

 :root {

@@ -48,7 +48,7 @@ $cell-amount: 48;

     position: relative;

     padding-inline-end: 8px;

     text-align: right;

-    @include animate-slot;

+    @include animate-zoom;

     &:first-child {

       .daily-timeline-label {

@@ -83,7 +83,7 @@ $cell-amount: 48;

     .line {

       height: var(--slot-height);

-      @include animate-slot;

+      @include animate-zoom;

       &:after {

         content: "";

@@ -115,12 +115,34 @@ $cell-amount: 48;

       height: 100%;

       width: 100%;

       display: grid;

-      grid-template-rows: repeat($cell-amount, calc(var(--slot-height) / (#{$cell-amount} / 24)));

-      @include animate-slot;

+      grid-template-rows: repeat($row-amount, calc(var(--slot-height) / (#{$row-amount} / 24)));

+      @include animate-zoom;

+

+      .cell-placeholder {

+        line-height: calc(var(--slot-height) / 4);

+        @include animate-zoom;

+        z-index: 1;

+        box-sizing: border-box;

+        border-radius: 5px;

+        background-color: #f0f0f0;

+        border: #e0e0e0 $event-border-width solid;

+        padding: 3px;

+        color: #555;

+        font-size: 12px;

+        display: flex;

+        align-items: center;

+        justify-content: center;

+        opacity: 0;

+        cursor: pointer;

+

+        &:hover {

+          opacity: .8;

+        }

+      }

       .event-cell {

         line-height: calc(var(--slot-height) / 4);

-        @include animate-slot;

+        @include animate-zoom;

         z-index: 2;

         box-sizing: border-box;

         border-radius: 5px;

@@ -106,6 +106,46 @@ class WeinanlieferungDailyScheduleController extends AbstractController

             $this->objAjax->executePostActions($dc);

         }

+        // Get events

+        $Tag = new Date(mktime(0,0,0,12,24,2024));

+        $scheduleRows = 96;

+        $scheduleRowSeconds = ($Tag->dayEnd - $Tag->dayBegin) / $scheduleRows;

+        $arrOptions = [];

+        $arrOptions['column'][] = 'tl_vr_wa_slot.time BETWEEN ? and ?';

+        $arrOptions['value'][] = $Tag->dayBegin;

+        $arrOptions['value'][] = $Tag->dayEnd;

+

+        $arrSlots = [];

+        $arrRows = array_flip(range(1,$scheduleRows));

+        array_walk($arrRows,function(&$val) {

+            $val = null;

+        });

+        if (($slots = WeinanlieferungSlotsModel::findMultiplePublishedByPids([1],$arrOptions)) !== null)

+        {

+            foreach ($slots as $slot)

+            {

+                $Slottime = new Date($slot->time);

+                $startOffset = $slot->time - $Slottime->dayBegin;

+                $endOffset = $slot->time + ($slot->duration * 60) - $Slottime->dayBegin;

+                $rowStart = ceil($startOffset / $scheduleRowSeconds);

+                $rowEnd = ceil($endOffset / $scheduleRowSeconds);

+

+                $arrSlots[$rowStart] = [

+                    'rowStart' => $rowStart,

+                    'rowEnd' => $rowEnd,

+                    'slot' => $slot->row(),

+                    'location' => $slot->getRelated('pid')->row()

+                ];

+

+                for ($i=$rowStart; $i < $rowEnd; $i++)

+                {

+                    $arrRows = array_diff_key($arrRows, [$i=>null]);

+                }

+            }

+        }

+        $arrRows = array_replace($arrRows,$arrSlots);

+        ksort($arrRows);

+

         $events = [

             [

                 'title' => 'Morning Meeting',

@@ -133,7 +173,7 @@ class WeinanlieferungDailyScheduleController extends AbstractController

             $this->twig->render(

                 '@Contao_VonrotenbergWeinanlieferungBundle/be_wa_daily_schedule.html.twig',

                 [

-                    'events' => $events,

+                    'events' => $arrRows,

                     'date' => new \DateTime()

                 ]

             )