Prepare calendar event popup

Controller.php

@@ -103,6 +103,9 @@ class Controller extends ModuleAbstract implements WebInterface
         $calendar->setDate(new SmartDateTime($request->getData('date') ?? 'now'));
         $view->addData('calendar', $calendar);
 
+        $calendarEventPopup = new \Modules\Calendar\Theme\Backend\Components\Event\BaseView($this->app, $request, $response);
+        $view->addData('calendarEventPopup', $calendarEventPopup);
+
         return $view;
     }
 

Theme/Backend/Components/Event/BaseView.php

@@ -0,0 +1,45 @@
+<?php
+/**
+ * Orange Management
+ *
+ * PHP Version 7.1
+ *
+ * @category   TBD
+ * @package    TBD
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @copyright  Dennis Eichhorn
+ * @license    OMS License 1.0
+ * @version    1.0.0
+ * @link       http://orange-management.com
+ */
+declare(strict_types=1);
+
+namespace Modules\Calendar\Theme\Backend\Components\Event;
+
+use phpOMS\Views\View;
+use phpOMS\ApplicationAbstract;
+use phpOMS\Message\RequestAbstract;
+use phpOMS\Message\ResponseAbstract;
+
+class BaseView extends View
+{
+    private $id = '';
+
+    public function __construct(ApplicationAbstract $app, RequestAbstract $request, ResponseAbstract $response)
+    {
+        parent::__construct($app, $request, $response);
+        $this->setTemplate('/Modules/Calendar/Theme/Backend/Components/Event/popup');
+    }
+
+    public function getId() : string
+    {
+        return $this->id;
+    }
+
+    public function render(...$data) : string
+    {
+        $this->id = $data[0];
+        return parent::render();
+    }
+}

Theme/Backend/Components/Event/popup.tpl.php

@@ -0,0 +1,27 @@
+<template id="calendar-event-popup-tpl">
+    <section id="calendar-event-popup" class="box w-50" style="z-index: 9; position: absolute; margin: 0 auto; left: 50%; top: 50%; transform: translate(-50%, -50%);">
+        <header><h1><?= $this->getText('Event', 'Calendar'); ?></h1></header>
+
+        <div class="inner">
+            <form>
+                <table class="layout">
+                    <tr><td><label for="iTitle">Title</label>
+                    <tr><td><input type="text" id="">
+                    <tr><td><label for="iTitle">Description</label>
+                    <tr><td><textarea></textarea>
+                    <tr><td><label for="iTitle">To</label>
+                    <tr><td><input type="text" id="">
+                    <tr><td><label for="iTitle">Files</label>
+                    <tr><td><input type="text" id="">
+                    <tr><td><button type="button" data-action='[
+                                    {
+                                        "listener": "click", "action": [
+                                            {"key": 1, "type": "dom.remove", "tpl": "calendar-event-popup", "aniOut": "fadeOut"}
+                                        ]
+                                    }
+                                ]'><?= $this->getText('Close', 'Calendar'); ?></button>
+                </table>
+            </form>
+        </div>
+    </section>
+</template>

Theme/Backend/Lang/en.lang.php

@@ -15,7 +15,9 @@
  */
 return ['Calendar' => [
     'Blocks'   => 'Blocks',
+    'Close'   => 'Close',
     'Day'      => 'Day',
+    'Event'      => 'Event',
     'Interval' => 'Interval',
     'Layout'   => 'Layout',
     'List'     => 'List',

Theme/Backend/calendar-dashboard.tpl.php

@@ -15,7 +15,13 @@ $calendar = $this->getData('calendar');
         </ul>
     </div>
     <div class="box w-100">
-        <div class="m-calendar-month">
+        <div id="calendar" class="m-calendar-month" data-action='[
+                            {
+                                "listener": "click", "selector": "#calendar span.tag", "action": [
+                                    {"key": 1, "type": "dom.popup", "tpl": "calendar-event-popup-tpl", "aniIn": "fadeIn"}
+                                ]
+                            }
+                        ]'>
             <?php $current = new \phpOMS\Datatypes\SmartDateTime($calendar->getDate()->format('Y') . '-' . $calendar->getDate()->format('m') . '-' . '01'); for($i = 0; $i < 6; $i++) : ?>
                 <div class="wf-100">
                 <?php for($j = 0; $j < 7; $j++) : ?>
@@ -30,7 +36,7 @@ $calendar = $this->getData('calendar');
                         $events = $calendar->getEventByDate($current);
                         $current->smartModify(0, 0, 1);
                     foreach($events as $event) : ?>
-                        <li><span class="tag purple" style="white-space: nowrap;"><?= $event->getName(); ?></span>
+                        <li><span id="event-tag-<?= $event->getId()?>" class="tag purple" style="white-space: nowrap;"><?= $event->getName(); ?></span>
                     <?php endforeach; ?>
                         </ul>
                     </div>
@@ -84,21 +90,4 @@ $calendar = $this->getData('calendar');
     <menuitem label="Delete"></menuitem>
 </menu>
 
-<div class="hidden">
+<?= $this->getData('calendarEventPopup')->render('iCalendarEvent'); ?>
-    <section class="box">
-        <div class="inner">
-            <form>
-                <table class="layout">
-                    <tr><td><label for="iTitle">Title</label>
-                    <tr><td><input type="text" id="">
-                    <tr><td><label for="iTitle">Description</label>
-                    <tr><td><textarea></textarea>
-                    <tr><td><label for="iTitle">To</label>
-                    <tr><td><input type="text" id="">
-                    <tr><td><label for="iTitle">Files</label>
-                    <tr><td><input type="text" id="">
-                </table>
-            </form>
-        </div>
-    </section>
-</div>