wip(Dashboard): grid widgets

assets/bootstrap.js

@@ -10,6 +10,7 @@ import { startStimulusApp } from '@symfony/stimulus-bundle';
 import Popover from '@stimulus-components/popover';
 import Dialog from '@stimulus-components/dialog';
 import Dropdown from '@stimulus-components/dropdown';
+
 import 'animate.css';
 
 const app = startStimulusApp();

assets/controllers/dashboard_widgets_controller.js

@@ -0,0 +1,40 @@
+import { Controller } from '@hotwired/stimulus';
+import {GridStack} from "../vendor/gridstack/gridstack.index.js";
+
+/*
+* The following line makes this controller "lazy": it won't be downloaded until needed
+* See https://symfony.com/bundles/StimulusBundle/current/index.html#lazy-stimulus-controllers
+*/
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+    grid;
+
+    initialize() {
+
+    }
+
+    connect() {
+        this.grid = GridStack.init({
+            column: 2,
+            alwaysShowResizeHandle: true,
+            margin: "2rem",
+            resizable: {
+                handles: 'e,se,s,sw,w'
+            }
+        });
+
+        this.grid.load();
+    }
+
+    // Add custom controller actions here
+    // fooBar() { this.fooTarget.classList.toggle(this.bazClass) }
+
+    disconnect() {
+        // Called anytime its element is disconnected from the DOM
+        // (on page change, when it's removed from or moved in the DOM, etc.)
+
+        // Here you should remove all event listeners added in "connect()" 
+        // this.fooTarget.removeEventListener('click', this._fooBar)
+    }
+}

importmap.php

@@ -70,4 +70,7 @@ return [
     '@ungap/custom-elements' => [
         'version' => '1.3.0',
     ],
+    'gridstack' => [
+        'version' => '12.3.3',
+    ],
 ];

src/Monitor/Framework/Scheduler/MonitorDispatcher.php

@@ -33,7 +33,9 @@ class MonitorDispatcher
             'tvshows' => MonitorTvShowCommand::class,
         ];
 
-        $monitors = $this->monitorRepository->findBy(['status' => ['New', 'Active']]);
+        $monitors = $this->monitorRepository->findBy([
+            'status' => ['New', 'Active'],
+        ]);
 
         foreach ($monitors as $monitor) {
             $monitor->setStatus('In Progress');

templates/base.html.twig

@@ -11,7 +11,14 @@
         {% endblock %}
 
         {% block javascripts %}
-            {% block importmap %}{{ importmap('app') }}{% endblock %}
+            {% block pre_js %}{% endblock %}
+
+            {% block importmap %}
+                {{ importmap('app') }}
+            {% endblock %}
+
+            {% block post_js %}{% endblock %}
+
             <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js'></script>
         {% endblock %}
     </head>

templates/index/index.html.twig

@@ -4,20 +4,31 @@
 {% block h2 %}Dashboard{% endblock %}
 
 {% block body %}
-    <div class="p-4 flex flex-col grow gap-4 z-10">
-        <div class="flex flex-col md:flex-row gap-4">
-            <twig:Card title="Active Downloads" class="w-full">
-                <twig:DownloadList :type="'active'" />
-            </twig:Card>
+    <div class="p-4 z-10">
+        <div class="grid-stack gs-2">
+            <div class="grid-stack-item" gs-x="1">
+                <div class="grid-stack-item-content">
+                    <twig:Card title="Active Downloads">
+                        <twig:DownloadList :type="'active'" />
+                    </twig:Card>
+                </div>
+            </div>
 
-            <twig:Card title="Recent Downloads" class="w-full">
-                <twig:DownloadList :type="'complete'" />
-            </twig:Card>
-        </div>
-        <div class="flex flex-col md:flex-row gap-4">
-            <twig:Card title="Monitors" class="w-full">
-                <twig:MonitorList :type="'active'" :isWidget="true" />
-            </twig:Card>
+            <div class="grid-stack-item"  gs-x="2">
+                <div class="grid-stack-item-content">
+                    <twig:Card title="Complete Downloads" >
+                        <twig:DownloadList :type="'complete'" />
+                    </twig:Card>
+                </div>
+            </div>
+
+            <div class="grid-stack-item" gs-x="3">
+                <div class="grid-stack-item-content">
+                    <twig:Card title="Active Monitors">
+                        <twig:MonitorList :type="'active'" />
+                    </twig:Card>
+                </div>
+            </div>
         </div>
         <div class="flex flex-col gap-4">
             <twig:Card title="Popular Movies" contentClass="grid grid-cols-2 gap-4 md:flex md:flex-row md:justify-between w-full">
@@ -45,5 +56,6 @@
                 {% endfor %}
             </twig:Card>
         </div>
+        <div class="grid-stack" data-controller="dashboard-widgets"></div>
     </div>
 {% endblock %}