Browse code

Add multi column view

Benjamin Roth authored on11/10/2024 15:42:46
Showing4 changed files
... ...
@@ -68,8 +68,22 @@
68 68
                     {% endfor %}
69 69
                 </div>
70 70
                 <div class="daily-grid-cells-container">
71
-                    <div class="daily-grid-cells">
72
-                        {% for row, event in events %}
71
+                    <div class="daily-grid-columns">
72
+                        {% for column in columns %}
73
+                            <div class="daily-grid-column">
74
+                                {% for row, event in column.entries %}
75
+                                    {% if event is not null %}
76
+                                        <div class="event-cell" style="grid-row: {{ event.rowStart }} / {{ event.rowEnd }}">
77
+                                            <div class="event-title">{{ event.location.title }}</div>
78
+                                            <div class="event-time">{{ event.slot.time|date("H:i") }} - {{ (event.slot.time + event.slot.duration*60)|date("H:i") }}</div>
79
+                                        </div>
80
+                                    {% else %}
81
+                                        <div class="cell-placeholder" style="grid-row: {{ row }} / {{ row }}">+ Neuer Slot</div>
82
+                                    {% endif %}
83
+                                {% endfor %}
84
+                            </div>
85
+                        {% endfor %}
86
+                        {# {% for row, event in events %}
73 87
                             {% if event is not null %}
74 88
                                 <div class="event-cell" style="grid-row: {{ event.rowStart }} / {{ event.rowEnd }}">
75 89
                                     <div class="event-title">{{ event.location.title }}</div>
... ...
@@ -78,13 +92,7 @@
78 92
                             {% else %}
79 93
                                 <div class="cell-placeholder" style="grid-row: {{ row }} / {{ row }}">+ Neuer Slot</div>
80 94
                             {% endif %}
81
-                        {% endfor %}{#
82
-                        {% for line in [8,28,30,76] %}
83
-                            <div class="event-cell" style="grid-row: {{ line }} / {{ line+4 }}">
84
-                                <div class="event-title">Standort 1</div>
85
-                                <div class="event-time">XX:XX - XX:XX</div>
86
-                            </div>
87
-                        {% endfor %} #}
95
+                        {% endfor %}#}
88 96
                     </div>
89 97
                 </div>
90 98
             </div>
... ...
@@ -1,7 +1,7 @@
1 1
 // Variables for colors and sizes
2 2
 $border-color: #ddd;
3
-$event-bg-color: #007bff;
4
-$event-border-color: darken($event-bg-color,20%);
3
+$event-bg-color: #007bff, #ff3300;
4
+$event-border-color: darken(nth($event-bg-color,1),20%);
5 5
 $event-border-width: 1px;
6 6
 $event-color: #fff;
7 7
 $hour-line-color: #999;
... ...
@@ -108,7 +108,14 @@ $row-amount: 96;
108 108
     border-right: white 1px solid;
109 109
     overflow: visible;
110 110
 
111
-    .daily-grid-cells {
111
+    .daily-grid-columns {
112
+      display: flex;
113
+      align-items: flex-start;
114
+      grid-column-gap: 10px;
115
+    }
116
+
117
+    .daily-grid-column {
118
+      flex: 1 0 0;
112 119
       grid-column-gap: 3px;
113 120
       z-index: 2;
114 121
       position: relative;
... ...
@@ -146,7 +153,7 @@ $row-amount: 96;
146 153
         z-index: 2;
147 154
         box-sizing: border-box;
148 155
         border-radius: 5px;
149
-        background-color: $event-bg-color;
156
+        background-color: nth($event-bg-color, 1);
150 157
         border: $event-border-color $event-border-width solid;
151 158
         padding: 3px;
152 159
         color: $event-color;
... ...
@@ -162,6 +169,12 @@ $row-amount: 96;
162 169
           margin-inline-end: 4px;
163 170
         }
164 171
       }
172
+
173
+      @for $i from 1 through length($event-bg-color) {
174
+        &:nth-child(#{length($event-bg-color)}n+#{$i}) .event-cell {
175
+          background: nth($event-bg-color, $i)
176
+        }
177
+      }
165 178
     }
166 179
   }
167 180
 }
... ...
@@ -46,6 +46,7 @@ use vonRotenberg\WeinanlieferungBundle\Model\WeinanlieferungRebsorteModel;
46 46
 use vonRotenberg\WeinanlieferungBundle\Model\WeinanlieferungReservationModel;
47 47
 use vonRotenberg\WeinanlieferungBundle\Model\WeinanlieferungSlotsModel;
48 48
 use vonRotenberg\WeinanlieferungBundle\Model\WeinanlieferungSlottypesModel;
49
+use vonRotenberg\WeinanlieferungBundle\Model\WeinanlieferungStandortModel;
49 50
 
50 51
 /**
51 52
  * @Route("%contao.backend.route_prefix%/weinanlieferung/daily_schedule", name=self::class, defaults={"_scope" = "backend"})
... ...
@@ -115,67 +116,57 @@ class WeinanlieferungDailyScheduleController extends AbstractController
115 116
         $arrOptions['value'][] = $Tag->dayBegin;
116 117
         $arrOptions['value'][] = $Tag->dayEnd;
117 118
 
118
-        $arrSlots = [];
119 119
         // Todo: Add columns per location for a side by side view
120 120
         $arrColumns = [];
121
-        $arrRows = array_flip(range(1,$scheduleRows));
122
-        array_walk($arrRows,function(&$val) {
121
+        $arrRowsTemplate = array_flip(range(1,$scheduleRows));
122
+        array_walk($arrRowsTemplate,function(&$val) {
123 123
             $val = null;
124 124
         });
125
-        if (($slots = WeinanlieferungSlotsModel::findMultiplePublishedByPids([1],$arrOptions)) !== null)
125
+        if (($Locations = WeinanlieferungStandortModel::findAll()) !== null)
126 126
         {
127
-            foreach ($slots as $slot)
127
+            foreach ($Locations as $location)
128 128
             {
129
-                $Slottime = new Date($slot->time);
130
-                $startOffset = $slot->time - $Slottime->dayBegin;
131
-                $endOffset = $slot->time + ($slot->duration * 60) - $Slottime->dayBegin;
132
-                $rowStart = ceil($startOffset / $scheduleRowSeconds);
133
-                $rowEnd = ceil($endOffset / $scheduleRowSeconds);
134
-
135
-                $arrSlots[$rowStart] = [
136
-                    'rowStart' => $rowStart,
137
-                    'rowEnd' => $rowEnd,
138
-                    'slot' => $slot->row(),
139
-                    'location' => $slot->getRelated('pid')->row()
140
-                ];
129
+                $arrSlots = [];
130
+                $arrRows = $arrRowsTemplate;
141 131
 
142
-                for ($i=$rowStart; $i < $rowEnd; $i++)
132
+                if (($Slots = WeinanlieferungSlotsModel::findPublishedByPid($location->id,$arrOptions)) !== null)
143 133
                 {
144
-                    $arrRows = array_diff_key($arrRows, [$i=>null]);
134
+                    foreach ($Slots as $slot)
135
+                    {
136
+                        $Slottime = new Date($slot->time);
137
+                        $startOffset = $slot->time - $Slottime->dayBegin;
138
+                        $endOffset = $slot->time + ($slot->duration * 60) - $Slottime->dayBegin;
139
+                        $rowStart = ceil($startOffset / $scheduleRowSeconds);
140
+                        $rowEnd = ceil($endOffset / $scheduleRowSeconds);
141
+
142
+                        $arrSlots[$rowStart] = [
143
+                            'rowStart' => $rowStart,
144
+                            'rowEnd' => $rowEnd,
145
+                            'slot' => $slot->row(),
146
+                            'location' => $location->row()
147
+                        ];
148
+
149
+                        for ($i=$rowStart; $i < $rowEnd; $i++)
150
+                        {
151
+                            $arrRows = array_diff_key($arrRows, [$i=>null]);
152
+                        }
153
+                    }
145 154
                 }
155
+                $arrRows = array_replace($arrRows,$arrSlots);
156
+                ksort($arrRows);
157
+dump($arrRows);
158
+                $arrColumns[] = [
159
+                    'label' => $location->title,
160
+                    'entries' => $arrRows
161
+                ];
146 162
             }
147 163
         }
148
-        $arrRows = array_replace($arrRows,$arrSlots);
149
-        ksort($arrRows);
150
-
151
-        $events = [
152
-            [
153
-                'title' => 'Morning Meeting',
154
-                'start' => '09:00',
155
-                'end' => '10:00',
156
-            ],
157
-            [
158
-                'title' => 'Team Stand-up',
159
-                'start' => '11:00',
160
-                'end' => '11:30',
161
-            ],
162
-            [
163
-                'title' => 'Lunch Break',
164
-                'start' => '12:00',
165
-                'end' => '13:00',
166
-            ],
167
-            [
168
-                'title' => 'Client Call',
169
-                'start' => '15:00',
170
-                'end' => '16:00',
171
-            ],
172
-        ];
173 164
 
174 165
         return new Response(
175 166
             $this->twig->render(
176 167
                 '@Contao_VonrotenbergWeinanlieferungBundle/be_wa_daily_schedule.html.twig',
177 168
                 [
178
-                    'events' => $arrRows,
169
+                    'columns' => $arrColumns,
179 170
                     'date' => new \DateTime()
180 171
                 ]
181 172
             )
... ...
@@ -47,11 +47,12 @@ class WeinanlieferungSlotsModel extends Model
47 47
         return static::findOneBy($arrColumns, $intId, $arrOptions);
48 48
     }
49 49
 
50
-    public static function findPublishedByPid($intPid, array $arrOptions=array())
50
+    public static function findPublishedByPid(int $intPid, array $arrOptions=array())
51 51
     {
52 52
         $time = time();
53 53
         $t = static::$strTable;
54 54
         $arrColumns = array("$t.pid=?");
55
+        $arrValues = array($intPid);
55 56
 
56 57
         // Skip unsaved elements (see #2708)
57 58
         $arrColumns[] = "$t.tstamp!=0";
... ...
@@ -64,7 +65,19 @@ class WeinanlieferungSlotsModel extends Model
64 65
             $arrOptions['order'] = "$t.time ASC";
65 66
         }
66 67
 
67
-        return static::findBy($arrColumns, $intPid, $arrOptions);
68
+        if (isset($arrOptions['column']))
69
+        {
70
+            $arrColumns = array_merge($arrColumns,$arrOptions['column']);
71
+            $arrOptions = array_diff_key($arrOptions,['column'=>true]);
72
+        }
73
+
74
+        if (isset($arrOptions['value']))
75
+        {
76
+            $arrValues = array_merge($arrValues,$arrOptions['value']);
77
+            $arrOptions = array_diff_key($arrOptions,['value'=>true]);
78
+        }
79
+
80
+        return static::findBy($arrColumns, $arrValues, $arrOptions);
68 81
     }
69 82
 
70 83
     public static function findMultiplePublishedByPids(array $arrPids, array $arrOptions=array())