Add core app

2023-03-05 20:09:31 +00:00
parent b2bdc77496
commit a51797ef94
63 changed files with 1532 additions and 4 deletions
--- a/core/templates/index.html
+++ b/core/templates/index.html
@@ -0,0 +1,103 @@
+{% extends "base.html" %}
+{% load static %}
+{% load joinsep %}
+{% block content %}
+  <div class="grid-stack" id="grid-stack-main">
+    <script>
+      var grid = GridStack.init({
+        cellHeight: 20,
+        cellWidth: 50,
+        cellHeightUnit: 'px',
+        auto: true,
+        float: true,
+        draggable: {handle: '.panel-heading', scroll: false, appendTo: 'body'},
+        removable: false,
+        animate: true,
+      });
+      // GridStack.init();
+
+      // a widget is ready to be loaded
+      document.addEventListener('load-widget', function(event) {
+        let containers = htmx.findAll('#widget');
+        for (let x = 0, len = containers.length; x < len; x++) {
+          container = containers[x];
+          // get the scripts, they won't be run on the new element so we need to eval them
+          let widgetelement = container.firstElementChild.cloneNode(true);
+          console.log(widgetelement);
+          var scripts = htmx.findAll(widgetelement, "script");
+          var new_id = widgetelement.id;
+
+          // check if there's an existing element like the one we want to swap
+          let grid_element = htmx.find('#grid-stack-main');
+          let existing_widget = htmx.find(grid_element, "#"+new_id);
+
+          // get the size and position attributes
+          if (existing_widget) {
+            let attrs = existing_widget.getAttributeNames();
+            for (let i = 0, len = attrs.length; i < len; i++) {
+              if (attrs[i].startsWith('gs-')) { // only target gridstack attributes
+                widgetelement.setAttribute(attrs[i], existing_widget.getAttribute(attrs[i]));
+              }
+            }
+          }
+          // clear the queue element
+          container.outerHTML = "";
+          // container.firstElementChild.outerHTML = "";
+          grid.addWidget(widgetelement);
+
+          // re-create the HTMX JS listeners, otherwise HTMX won't work inside the grid
+          htmx.process(widgetelement);
+
+          // update the size of the widget according to its content
+          var added_widget = htmx.find(grid_element, "#"+new_id);
+          var itemContent = htmx.find(added_widget, ".control");
+          var scrollheight = itemContent.scrollHeight+80;
+          var verticalmargin = 0;
+          var cellheight = grid.opts.cellHeight;
+          var height = Math.ceil((scrollheight + verticalmargin) / (cellheight + verticalmargin));
+          var opts = {
+            h: height,
+          }
+          grid.update(
+            added_widget,
+            opts
+          );
+
+          // run the JS scripts inside the added element again
+          for (var i = 0; i < scripts.length; i++) {
+            eval(scripts[i].innerHTML);
+          }
+        }
+        // clear the containers we just added
+        // for (let x = 0, len = containers.length; x < len; x++) {
+        //   container = containers[x];
+        //   container.inner = "";
+        // }
+        grid.compact();
+      });
+    </script>
+    <!-- <div>
+      <div
+        hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+        hx-get="{# url 'example' type='widget' #}"
+        hx-target="#widgets-here"
+        hx-trigger="load"
+        hx-swap="afterend"
+        style="display: none;"></div>
+      <div
+        hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+        hx-get="{# url 'example' type='widget' #}"
+        hx-target="#widgets-here"
+        hx-trigger="load"
+        hx-swap="afterend"
+        style="display: none;"></div>
+      <div
+        hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+        hx-get="{# url 'example' type='widget' #}"
+        hx-target="#widgets-here"
+        hx-trigger="load"
+        hx-swap="afterend"
+        style="display: none;"></div>
+    </div> -->
+
+{% endblock %}