Implement widget spawning

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>

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>

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>

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,

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>

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>

core/templates/windows/drilldown.html

@@ -5,5 +5,5 @@
 {% endblock %}
 
 {% block panel_content %}
-  {% include 'panels/drilldown.html' %}
+  {% include 'window-content/drilldown.html' %}
 {% endblock %}

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"]