eSales Media Git repositories
Browse code

First draft for daily schedule view

Benjamin Roth authored on12/09/2024 16:00:25
Showing3 changed files
contao/templates/backend/be_wa_daily_schedule.html.twig
History View file @0336be5
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,40 @@
1 
+{% extends "@ContaoCore/Backend/be_page.html.twig" %}
2 
+{% block headline %}
3 
+    <span>Weinanlieferung</span> <span>Tages-Übersicht</span>
4 
+{% endblock %}
5 
+
6 
+{% block error %}
7 
+{% endblock %}
8 
+
9 
+{% block main %}
10 
+    <div class="vr-daily-schedule">
11 
+        <div class="daily-timeline-container">
12 
+            <div class="daily-timeline">
13 
+                {% for time in 0..23 %}
14 
+                    <div class="daily-timeline-label-container">
15 
+                        <div class="daily-timeline-label">{{ '%1$02d:00'|format(time) }}</div>
16 
+                    </div>
17 
+                {% endfor %}
18 
+            </div>
19 
+        </div>
20 
+        <div class="daily-grid-container">
21 
+            <div class="daily-grid">
22 
+                <div class="daily-grid-hourlines">
23 
+                    {% for line in 1..24 %}
24 
+                        <div class="line"></div>
25 
+                    {% endfor %}
26 
+                </div>
27 
+                <div class="daily-grid-cells-container">
28 
+                    <div class="daily-grid-cells">
29 
+                        {% for line in [4,14,15,38] %}
30 
+                            <div class="event-cell" style="grid-row: {{ line }} / {{ line+2 }}">
31 
+                                <div class="event-title">Standort 1</div>
32 
+                                <div class="event-time">XX:XX - XX:XX</div>
33 
+                            </div>
34 
+                        {% endfor %}
35 
+                    </div>
36 
+                </div>
37 
+            </div>
38 
+        </div>
39 
+    </div>
40 
+{% endblock %}
public/css/daily_schedule_view.scss
History View file @0336be5
0 41 
new file mode 100644
... ... 
@@ -0,0 +1,132 @@
1 
+// Variables for colors and sizes
2 
+$border-color: #ddd;
3 
+$event-bg-color: #007bff;
4 
+$event-border-color: darken($event-bg-color,20%);
5 
+$event-border-width: 1px;
6 
+$event-color: #fff;
7 
+$hour-line-color: #999;
8 
+$time-color: #666;
9 
+$text-color: #333;
10 
+$header-bg-color: #f2f2f2;
11 
+$slot-height: 3rem;
12 
+$cell-amount: 48;
13 
+
14 
+.vr-daily-schedule {
15 
+  position: relative;
16 
+  display: flex;
17 
+  overflow: hidden;
18 
+  align-items: stretch;
19 
+  flex: 1 1 auto;
20 
+
21 
+  .daily-timeline-container {
22 
+    height: auto;
23 
+    overflow-y: hidden;
24 
+    flex: none;
25 
+    display: flex;
26 
+    align-items: flex-start;
27 
+    min-width: 40px;
28 
+  }
29 
+
30 
+  .daily-timeline {
31 
+    position: relative;
32 
+    background-color: #fff;
33 
+    box-sizing: border-box;
34 
+    margin-left: auto;
35 
+  }
36 
+
37 
+  .daily-timeline-label-container {
38 
+    height: $slot-height;
39 
+    position: relative;
40 
+    padding-inline-end: 8px;
41 
+    text-align: right;
42 
+
43 
+    &:first-child {
44 
+      .daily-timeline-label {
45 
+        display: none;
46 
+      }
47 
+    }
48 
+  }
49 
+
50 
+  .daily-timeline-label {
51 
+    display: block;
52 
+    color: #70757a;
53 
+    font-size: 10px;
54 
+    position: relative;
55 
+    top: -6px;
56 
+  }
57 
+
58 
+  .daily-grid-container {
59 
+    flex: 1 1 0;
60 
+    overflow-x: auto;
61 
+    overflow-y: scroll;
62 
+    display: flex;
63 
+    align-items: flex-start;
64 
+  }
65 
+
66 
+  .daily-grid {
67 
+    border-bottom: $hour-line-color 1px solid;
68 
+    position: relative;
69 
+    min-width: 100%;
70 
+    flex: none;
71 
+    display: inline-flex;
72 
+    vertical-align: top;
73 
+
74 
+    .line {
75 
+      height: $slot-height;
76 
+
77 
+      &:after {
78 
+        content: "";
79 
+        border-bottom: $hour-line-color 1px solid;
80 
+        position: absolute;
81 
+        width: 100%;
82 
+        margin-top: -1px;
83 
+        z-index: 3;
84 
+        pointer-events: none;
85 
+        opacity: .5;
86 
+      }
87 
+    }
88 
+  }
89 
+
90 
+  .daily-grid-cells-container {
91 
+    position: relative;
92 
+    padding: 0 12px;
93 
+    box-sizing: border-box;
94 
+    flex: 1 0 auto;
95 
+    width: 129px;
96 
+    min-width: 129px;
97 
+    border-right: white 1px solid;
98 
+    overflow: visible;
99 
+
100 
+    .daily-grid-cells {
101 
+      grid-column-gap: 3px;
102 
+      z-index: 2;
103 
+      position: relative;
104 
+      height: 100%;
105 
+      width: 100%;
106 
+      display: grid;
107 
+      grid-template-rows: repeat($cell-amount, #{$slot-height / ($cell-amount / 24)});
108 
+
109 
+      .event-cell {
110 
+        line-height: $slot-height / 4;
111 
+        z-index: 2;
112 
+        box-sizing: border-box;
113 
+        border-radius: 5px;
114 
+        background-color: $event-bg-color;
115 
+        border: $event-border-color $event-border-width solid;
116 
+        padding: 3px;
117 
+        color: $event-color;
118 
+        font-size: 12px;
119 
+        display: flex;
120 
+      }
121 
+      .event-title {
122 
+        white-space: normal;
123 
+        overflow-wrap: break-word;
124 
+        word-wrap: break-word;
125 
+        &:after {
126 
+          content: ",";
127 
+          margin-inline-end: 4px;
128 
+        }
129 
+      }
130 
+    }
131 
+  }
132 
+}
src/Controller/Backend/WeinanlieferungDailyScheduleController.php
History View file @0336be5
0 133 
new file mode 100644
... ... 
@@ -0,0 +1,142 @@
1 
+<?php
2 
+
3 
+declare(strict_types=1);
4 
+
5 
+/*
6 
+ * This file is part of contao-weinanlieferung-bundle.
7 
+ *
8 
+ * (c) vonRotenberg
9 
+ *
10 
+ * @license commercial
11 
+ */
12 
+
13 
+namespace vonRotenberg\WeinanlieferungBundle\Controller\Backend;
14 
+
15 
+use Contao\Ajax;
16 
+use Contao\Backend;
17 
+use Contao\BackendTemplate;
18 
+use Contao\Config;
19 
+use Contao\Controller;
20 
+use Contao\CoreBundle\Controller\AbstractController;
21 
+use Contao\CoreBundle\Csrf\ContaoCsrfTokenManager;
22 
+use Contao\Date;
23 
+use Contao\DC_File;
24 
+use Contao\Environment;
25 
+use Contao\FileTree;
26 
+use Contao\FrontendUser;
27 
+use Contao\Image;
28 
+use Contao\Input;
29 
+use Contao\Message;
30 
+use Contao\SelectMenu;
31 
+use Contao\StringUtil;
32 
+use Contao\System;
33 
+use Contao\TextArea;
34 
+use Contao\TextField;
35 
+use Contao\Upload;
36 
+use Contao\Widget;
37 
+use Doctrine\DBAL\Connection;
38 
+use MenAtWork\MultiColumnWizardBundle\Contao\Widgets\MultiColumnWizard;
39 
+use Symfony\Component\HttpFoundation\RequestStack;
40 
+use Symfony\Component\HttpFoundation\Response;
41 
+use Symfony\Component\Routing\Annotation\Route;
42 
+use Symfony\Contracts\Translation\TranslatorInterface;
43 
+use Twig\Environment as TwigEnvironment;
44 
+use vonRotenberg\WeinanlieferungBundle\Model\WeinanlieferungLeseartModel;
45 
+use vonRotenberg\WeinanlieferungBundle\Model\WeinanlieferungRebsorteModel;
46 
+use vonRotenberg\WeinanlieferungBundle\Model\WeinanlieferungReservationModel;
47 
+use vonRotenberg\WeinanlieferungBundle\Model\WeinanlieferungSlotsModel;
48 
+use vonRotenberg\WeinanlieferungBundle\Model\WeinanlieferungSlottypesModel;
49 
+
50 
+/**
51 
+ * @Route("%contao.backend.route_prefix%/weinanlieferung/daily_schedule", name=self::class, defaults={"_scope" = "backend"})
52 
+ */
53 
+class WeinanlieferungDailyScheduleController extends AbstractController
54 
+{
55 
+    private $twig;
56 
+    private $tokenManager;
57 
+    private $request;
58 
+    private $db;
59 
+
60 
+    private $translator;
61 
+
62 
+    protected $fields;
63 
+
64 
+    public function __construct(TwigEnvironment $twig, ContaoCsrfTokenManager $tokenManager, RequestStack $requestStack, Connection $db, TranslatorInterface $translator)
65 
+    {
66 
+        $this->twig = $twig;
67 
+        $this->tokenManager = $tokenManager;
68 
+        $this->request = $requestStack->getCurrentRequest();
69 
+        $this->db = $db;
70 
+        $this->translator = $translator;
71 
+
72 
+        $container = System::getContainer();
73 
+        $objSession = $container->get('session');
74 
+
75 
+
76 
+        $strKey = Input::get('popup') ? 'popupReferer' : 'referer';
77 
+        $strRefererId = $this->request->attributes->get('_contao_referer_id');
78 
+
79 
+        $session = $objSession->get($strKey);
80 
+        $session[$strRefererId]['current'] = substr(Environment::get('requestUri'), \strlen(Environment::get('path')) + 1);
81 
+        $objSession->set($strKey, $session);
82 
+    }
83 
+
84 
+    public function __invoke(): Response
85 
+    {
86 
+        System::loadLanguageFile('default');
87 
+
88 
+        $GLOBALS['TL_CSS']['cirrus'] = 'bundles/vonrotenbergweinanlieferung/css/backend.css|static';
89 
+        $GLOBALS['TL_CSS']['cirrus'] = 'bundles/vonrotenbergweinanlieferung/css/daily_schedule_view.scss|static';
90 
+        $arrData = [
91 
+            'request_token' => $this->tokenManager->getDefaultTokenValue(),
92 
+            'ref'           => $this->request->attributes->get('_contao_referer_id')
93 
+        ];
94 
+
95 
+        // Handle ajax request pre actions
96 
+        if ($_POST && Environment::get('isAjaxRequest'))
97 
+        {
98 
+            $this->objAjax = new Ajax(Input::post('action'));
99 
+            $this->objAjax->executePreActions();
100 
+        }
101 
+
102 
+        // Handle ajax request post actions
103 
+        if ($_POST && Environment::get('isAjaxRequest'))
104 
+        {
105 
+            $dc = new DC_File('tl_vr_wa_slotassistant');
106 
+            $this->objAjax->executePostActions($dc);
107 
+        }
108 
+
109 
+        $events = [
110 
+            [
111 
+                'title' => 'Morning Meeting',
112 
+                'start' => '09:00',
113 
+                'end' => '10:00',
114 
+            ],
115 
+            [
116 
+                'title' => 'Team Stand-up',
117 
+                'start' => '11:00',
118 
+                'end' => '11:30',
119 
+            ],
120 
+            [
121 
+                'title' => 'Lunch Break',
122 
+                'start' => '12:00',
123 
+                'end' => '13:00',
124 
+            ],
125 
+            [
126 
+                'title' => 'Client Call',
127 
+                'start' => '15:00',
128 
+                'end' => '16:00',
129 
+            ],
130 
+        ];
131 
+
132 
+        return new Response(
133 
+            $this->twig->render(
134 
+                '@Contao_VonrotenbergWeinanlieferungBundle/be_wa_daily_schedule.html.twig',
135 
+                [
136 
+                    'events' => $events,
137 
+                    'date' => new \DateTime()
138 
+                ]
139 
+            )
140 
+        );
141 
+    }
142 
+}