From 726ccd38d8fb5fa6b3c71b6222faceecc61ec423 Mon Sep 17 00:00:00 2001
From: Mark Veidemanis <m@zm.is>
Date: Mon, 29 Aug 2022 12:24:06 +0100
Subject: [PATCH] Implement widget spawning

---
 core/templates/base.html                      |  4 ++-
 core/templates/modals/drilldown.html          |  2 +-
 core/templates/partials/magnet.html           | 10 +++----
 core/templates/ui/drilldown/drilldown.html    |  4 ++-
 .../ui/drilldown/table_results_partial.html   | 13 +++++++-
 core/templates/widgets/drilldown.html         | 30 +++++++++++++++++++
 .../{panels => window-content}/context.html   |  0
 .../context_table.html                        |  0
 .../{panels => window-content}/drilldown.html |  0
 core/templates/windows/drilldown.html         |  2 +-
 core/views/ui/drilldown.py                    |  2 ++
 11 files changed, 56 insertions(+), 11 deletions(-)
 create mode 100644 core/templates/widgets/drilldown.html
 rename core/templates/{panels => window-content}/context.html (100%)
 rename core/templates/{panels => window-content}/context_table.html (100%)
 rename core/templates/{panels => window-content}/drilldown.html (100%)

diff --git a/core/templates/base.html b/core/templates/base.html
index d7004e6..11ec52b 100644
--- a/core/templates/base.html
+++ b/core/templates/base.html
@@ -203,6 +203,9 @@
       .ui-close {
         float: right;
       }
+      .grid-stack-item:hover .ui-resizable-handle {
+        display: block !important;
+      }
 
     </style>
   </head>
@@ -274,7 +277,6 @@
                 <a class="button is-dark" href="{% url 'logout' %}">Logout</a>
               {% endif %}
 
-
             </div>
           </div>
         </div>
diff --git a/core/templates/modals/drilldown.html b/core/templates/modals/drilldown.html
index 539d39f..cb3be77 100644
--- a/core/templates/modals/drilldown.html
+++ b/core/templates/modals/drilldown.html
@@ -8,7 +8,7 @@
   <div class="modal-background"></div>
   <div class="modal-content">
     <div class="box">
-      {% include 'panels/drilldown.html' %}
+      {% include 'window-content/drilldown.html' %}
       <button class="modal-close is-large" aria-label="close"></button>
     </div>
   </div>
diff --git a/core/templates/partials/magnet.html b/core/templates/partials/magnet.html
index baddf8f..5f9bbfc 100644
--- a/core/templates/partials/magnet.html
+++ b/core/templates/partials/magnet.html
@@ -1,10 +1,8 @@
 <magnet-block attract-distance="10" align-to="outer|center" class="floating-window">
   {% extends 'partials/panel.html' %}
+    {% block heading %}
+    {% endblock %}
 
-      {% block heading %}
-      {% endblock %}
-
-      {% block panel_content %}
-      {% endblock %}
-
+    {% block panel_content %}
+    {% endblock %}
 </magnet-block>
\ No newline at end of file
diff --git a/core/templates/ui/drilldown/drilldown.html b/core/templates/ui/drilldown/drilldown.html
index 8b85ed0..f276c6d 100644
--- a/core/templates/ui/drilldown/drilldown.html
+++ b/core/templates/ui/drilldown/drilldown.html
@@ -54,7 +54,7 @@
     }
   </script>
 
-  <div class="grid-stack">
+  <div class="grid-stack" id="grid-stack-main">
     <div class="grid-stack-item" gs-w="7" gs-h="10" gs-y="0" gs-x="1">
       <div class="grid-stack-item-content">
         <nav class="panel">
@@ -90,6 +90,8 @@
   </div>
   <div id="items-here">
   </div>
+  <div id="widgets-here" style="display: none;">
+  </div>
   <script>
     var grid = GridStack.init({
       cellHeight: 20,
diff --git a/core/templates/ui/drilldown/table_results_partial.html b/core/templates/ui/drilldown/table_results_partial.html
index 6e632cb..88f30af 100644
--- a/core/templates/ui/drilldown/table_results_partial.html
+++ b/core/templates/ui/drilldown/table_results_partial.html
@@ -302,7 +302,18 @@
                                         hx-swap="afterend"
                                         hx-trigger="click"
                                         class="has-text-black">
-                                        <span class="icon" data-tooltip="Open drilldown panel">
+                                        <span class="icon" data-tooltip="Open drilldown window">
+                                          <i class="fa-solid fa-album"></i>
+                                        </span>
+                                      </a>
+                                      <a
+                                        hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+                                        hx-post="{% url 'modal_drilldown' type='widget' %}"
+                                        hx-vals='{"net": "{{ row.cells.net }}", "nick": "{{ row.cells.nick }}", "channel": "{{ row.cells.channel }}"}'
+                                        hx-target="#widgets-here" 
+                                        hx-trigger="click"
+                                        class="has-text-black">
+                                        <span class="icon" data-tooltip="Open drilldown widget">
                                           <i class="fa-solid fa-album"></i>
                                         </span>
                                       </a>
diff --git a/core/templates/widgets/drilldown.html b/core/templates/widgets/drilldown.html
new file mode 100644
index 0000000..324c407
--- /dev/null
+++ b/core/templates/widgets/drilldown.html
@@ -0,0 +1,30 @@
+<div id="drilldown-widget">
+  <div id="drilldown-widget-{{ net }}" class="grid-stack-item" gs-w="5" gs-h="15" gs-y="10" gs-x="1">
+    <div class="grid-stack-item-content">
+      <div class="panel">
+        <p class="panel-heading" style="padding: .2em; line-height: .5em;">
+          <i class="fa-solid fa-arrows-up-down-left-right has-text-grey-light ui-move"></i>
+          <i
+          class="fa-solid fa-xmark has-text-grey-light ui-close"
+          onclick='grid.removeWidget("drilldown-widget-{{ net }}");'></i>
+          Drilldown
+        </p>
+        <div class="panel-block is-active">
+          <div class="control">
+            <div id="results">
+              {% include 'window-content/drilldown.html' %}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  //var contents = $("#drilldown-widget").outerHTML;
+  var contents = document.getElementById("drilldown-widget");
+  var grid = document.getElementById("grid-stack-main").gridstack;
+  grid.addWidget(contents.innerHTML);
+  contents.outerHTML = "";
+
+</script>
\ No newline at end of file
diff --git a/core/templates/panels/context.html b/core/templates/window-content/context.html
similarity index 100%
rename from core/templates/panels/context.html
rename to core/templates/window-content/context.html
diff --git a/core/templates/panels/context_table.html b/core/templates/window-content/context_table.html
similarity index 100%
rename from core/templates/panels/context_table.html
rename to core/templates/window-content/context_table.html
diff --git a/core/templates/panels/drilldown.html b/core/templates/window-content/drilldown.html
similarity index 100%
rename from core/templates/panels/drilldown.html
rename to core/templates/window-content/drilldown.html
diff --git a/core/templates/windows/drilldown.html b/core/templates/windows/drilldown.html
index e311f1f..b8aebb9 100644
--- a/core/templates/windows/drilldown.html
+++ b/core/templates/windows/drilldown.html
@@ -5,5 +5,5 @@
 {% endblock %}
 
 {% block panel_content %}
-  {% include 'panels/drilldown.html' %}
+  {% include 'window-content/drilldown.html' %}
 {% endblock %}
\ No newline at end of file
diff --git a/core/views/ui/drilldown.py b/core/views/ui/drilldown.py
index 35dba46..a331421 100644
--- a/core/views/ui/drilldown.py
+++ b/core/views/ui/drilldown.py
@@ -422,6 +422,8 @@ class ThresholdInfoModal(APIView):
             return JsonResponse({"success": False})
         if type == "window":
             self.template_name = "windows/drilldown.html"
+        elif type == "widget":
+            self.template_name = "widgets/drilldown.html"
 
         net = request.data["net"]
         nick = request.data["nick"]